@media (max-width: 1200px){

    /* global */
    .container { width: 100%; padding: 0px 20px; }

}

@media (max-width: 1050px){

    /* #product */
    #product .info footer span.left button { width: 100%; }

}

@media (max-width: 900px){

    /* c4 */
    .c4 { grid-template-columns: 1fr 1fr 1fr; }

}

@media (max-width: 780px){

    /* vitrine */
    #vitrine .left { width: 100%; margin-bottom: 20px; padding-right: 0px; }
    #vitrine .right { width: 100%; }

    /* product */
    #product .featured { width: 100%; }
    #product .info { width: 100%; padding-top: 30px; padding-left: 0px; }

}

@media (max-width: 700px){

    /* header */
    #header span.logo a { font-size: 24px; }

        /* header -> head */
        header.head h6 { font-size: 16px; }

    /* c4 */
    .c4 { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 520px){

    /* header */
    #header span.logo a { font-size: 18px; }

    /* c4 */
    .c4 { grid-template-columns: 1fr; }

    /* product */
    #product .info h1 { font-size: 24px; }
    #product .info footer { margin-top: 30px; }
    #product .info footer span.left { width: 100%; }
    #product .info footer span.right { width: 100%; margin-top: 20px; text-align: left; }
    #product .info footer span.right nav li { margin-left: 0px; margin-right: 7px; }
    #product .spec nav ul li h6 { display: block; margin-right: 0px; margin-bottom: 10px; }

    /* box */
    .box .cp  { width: 90%; }

}

@media (max-width: 440px){

    /* vitrine */
    #vitrine section { grid-template-columns: 1fr; }    

}