@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: 1.3em;
    }
	
	footer .info li.name {
		font-size: 2.8em;
		margin-bottom: .5em;
	}


    #banner {height: 20rem}

    #home .product > div > h2 {
        text-align: center;
        font-size: 3em;
    }



    #product-detail section {
        width: 100% !important;
    }

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

    #product-detail .images {
        column-count: 1
    }


    #product-detail .other .product-list {
        grid-template-columns: 1fr 1fr;
    }
	
	#article a > div:nth-of-type(1) {
		width: 5rem;
		height: 5rem;
	}

	#article a > div:nth-of-type(2) {
		width: calc(100% - 7rem);
	}

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

    .product-list.show-3,
    .product-list.show-6  {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px 10px;
    }




    /*
    ==================================
        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}

    #payment .right div input:first-of-type {
        width: 100%;
    }
    #payment .right div input:last-of-type {
        width: 100%;
        float: right;
        margin-top: 1rem;
    }




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

    #basket .divTable {display: block}

    #basket .divTable .head {display: none}

    #basket .divTable div {
        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 {
        width: 80%;
        text-align: 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 > * {
        width: 100%;
    }

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

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

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