@media only screen and (max-width: 480px) {
    body {padding: 0 2rem}

    article {padding-top: 13rem}

    header,
    #home header{
        width: calc(100% - 4rem);
        width: -moz-calc(100% - 4rem);
        width: -webkit-calc(100% - 4rem);
        height: 8rem;
        right: 2rem;
    }


    header .mobile-menu-open label {
        position: absolute;
        bottom: 5.9rem;
    }

    header .tool {
        width: calc(100% - 6rem);
        width: -moz-calc(100% - 6rem);
        width: -webkit-calc(100% - 6rem);
    }

    header .tool button {margin-left: 1rem}

    header .tool form {
        width: calc(100% - 8rem);
        width: -moz-calc(100% - 8rem);
        width: -webkit-calc(100% - 8rem);
    }

    header .tool form input {font-size: 2rem}


    #banner {height: 20rem}



    #product-detail section {
        float: left;
        clear: both;
        width: 100% !important;
    }

    #product-detail .L {margin-top: 5rem}


    #product-detail .other a {
        width: calc((100% - 2rem)/2);
        width: -moz-calc((100% - 2rem)/2);
        width: -webkit-calc((100% - 2rem)/2);
        margin: 2rem 1rem;
    }


    /*
    ==================================
        PRODUCT
    ==================================
    */
    .panel .display,
    .panel .popup-filter {display: none}

    .product-list.show-2 a{
        width: calc((100% - 2rem)/2);
        width: -moz-calc((100% - 2rem)/2);
        width: -webkit-calc((100% - 2rem)/2);
        margin: 0 1rem;
    }

    .product-list.show-2 a:nth-of-type(n+3) {margin-top: 4rem}




    /*
    ==================================
        REQUEST
    ==================================
    */
    #request .images>label {
        float: left;
        width: calc((100%/5) - .5rem);
        width: -moz-calc((100%/5) - .5rem);
        width: -webkit-calc((100%/5) - .5rem);
    }



    /*
    ==================================
        CONTACT
    ==================================
    */

    #contact>div,
    #contact>div>* {
        float: left;
        clear: both;
        width: 100% !important;
    }

    #contact .right,
    #contact.about .left {margin-top: 5rem}




    /*
    ==================================
        PAYMENT
    ==================================
    */

    #payment section {
        float: left;
        clear: both;
        width: 100% !important;
    }

    #payment>section>label {text-align: center !important;}

    #payment .right {margin: 5rem 0}




    /*
    ==================================
        BASKET
    ==================================
    */

    #basket .divTable {float: left; display: block}

    #basket .divTable .head {display: none}

    #basket .divTable div {
        float: left;
        clear: both;
        width: 100% !important;
        padding: 1rem;
        box-sizing: border-box;
        position: relative;
        display: block;
    }

    #basket .divTable div:nth-of-type(2n+2) {background: #f2f2f2}

    #basket .divTable>div>span {
        float: left;
        width: 80%;
        text-align: left;
        clear: left;
        padding: .5rem 0 !important;
        box-sizing: border-box;
        display: block;
    }

    #basket .divTable>div>span:last-of-type {
        width: 20%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    #basket .divTable>div>span:last-of-type label {
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

    #basket .divTable input {text-align: left; padding: 0}


    #basket .sum>* {
        float: left;
        clear: both;
        width: 100%;
    }

    #basket .sum button {margin-top: 3rem}

    #basket .sum div>span {height: 3rem; line-height: 3rem}

    #basket-complete {
        width: 100vw;
        padding: 4rem;
    }
}