@media (max-width: 360px) {

    #withDepoBox h1{
        font-size: 40px!important;
    }
}

@media (max-width: 480px) and (min-width: 361px) {
    #wrapper ul {
        width: 240px;
    }
    #wrapper .productSearch {
        width: 240px;
    }
    #wrapper .productSearch .inputs {
        margin-left: 0px;
    }
    #withDepoBox h1{
        font-size: 50px!important;
    }



    /**checkout**/
    #checkOutBox ul{

        width: 230px;
    }

    #checkOutBox{
        width: 230px;
        padding: 0px;
        margin-left:25%;
        overflow-x: hidden;

    }
    #totalBox {
        margin-left: 0px;
        padding:0px;
        margin-left:15%;
    }


    #historyBox .optionBox select{


        margin-top: 5px;
    }

}

@media (min-width:481px) and (max-width: 767px) {


    #wrapper ul {
        width: 480px;
    }

    #wrapper .productSearch {
        width: 480px;
    }

    #withDepoBox h1{
        font-size: 60px!important;
    }


    /**checkout**/
    #checkOutBox ul{

        width: 460px;
    }

    #checkOutBox{
        width: 435px;
        padding: 0px;
        margin-left:15%;
        overflow-x: hidden;

    }
    #totalBox {
        margin-left: 0px;
        padding:0px;
        margin-left:25%;
    }


    /**transaction history**/

    #historyBox .optionBox{
        width: 320px;

    }

    #historyBox .optionBox .datepicker{
        width: 180px;
        margin-left:10px;

    }

    #historyBox .optionBox .buttons{

        width: 180px;

    }

    #historyBox .optionBox select{

        width: 180px;
        margin:0;
        margin-top: 5px;
    }

    #historyBox .optionBox p{

        min-width: 460px;
        margin-right: 20%;
        margin-left: 10px;
    }




}

/* Small devices (tablets, 768px and up) */
@media (min-width:768px) and (max-width: 991px) {
    #wrapper ul {
        width: 720px;
    }

    #wrapper .productSearch {
        width: 720px;
    }

    /**checkout**/
    #checkOutBox ul{
        margin-left:0px;
        width: 440px;
    }

    #checkOutBox{
        width: 455px;
        margin-left: 0px;
        padding: 0px;

    }
    #totalBox {
        margin-left: 0px;
        padding:0px;
    }




}
/* Medium devices (desktops, 992px and up) */
@media (min-width:992px) and (max-width: 1199px) {

    #totalBox {
        margin-left: 2px;
    }

    #checkOutBox{
        margin-left:2px;
        padding: 2px;
    }





}
/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) and (max-width: 1399px) {
    #totalBox {
        margin-left: 10px;
    }

    #checkOutBox{
        margin-left:10px;
    }

}

/* Extra Large devices (large desktops, 1200px and up) */
@media (min-width:1400px) {
    #checkOutBox{
        margin-left:20%;
    }
}