font{display: none}

s.c, .c, .cc,.head{width: 100%;min-width: 300px;padding: 10px}



.content{display: block}



span.menu-res{display: none}

.cont,aside{width: 100%}



.gla-pagination{text-align: center;justify-content: center;margin: 40px auto}

.gla-pagination a{padding: 10px 16px;margin: 8px;}





@media (max-width : 960px) {



    *{flex-wrap: wrap}

    

    header .c{padding: 20px;text-align: center}



    header .logo{height: 70px;margin: 10px 0 20px}



    header form{width: 50%!important;display: flex !important;padding: 0 10px!important}

    header form input[type="search"]{width: calc(100% - 35px) !important;}



    .head .flex{display: flex;}

    .head .flex-end{justify-content: space-between;}

    .head .col-25{width: 25%;}



    span.menu-res{display: block;position: fixed; z-index: 999999 !important; top: 25px;right: 10px;transition: 0.15s linear;font-size: 1.9em;padding: 10px;cursor: pointer; border: 1px solid #2a182f;}

    nav{position: absolute;right:-250px;top: 0;height: 270px;z-index: 99999 !important;
        width: 250px!important;box-shadow: 0 0 6px rgba(0,0,0,0.6);transition: 0.15s linear;z-index: 1600;position: fixed;bottom: 0;padding: 10px; background-color: #f9a71a; border-bottom-left-radius: 75%;}

    .mn .menu-res{right: 185px;top: 25px; background-color: white;color:black;z-index: 9000;position: fixed;}

    .mn nav{right:0;}

    nav .c{min-width: auto;padding: 0 20px;text-align: left;}

    header nav{padding-top: 70px;}

    header nav ul,header nav .cats ul{display: block}

    header nav ul li{display: block;font-weight: bold; }

    header nav ul li ul{position: relative;display: block;margin-left: 20px;box-shadow: none;}

    header nav ul li ul li{display: block;font-weight: normal}

    header nav ul li a {
        color: #fff;
        padding: 10px;}

    header nav > ul, header nav .conf{width: 100%}

    header nav ul li ul{margin-left: 0}



    header nav .cats ul{position: static}

    header nav .cats .icon{display: none}



    .head .act .icon{font-size: 2em!important;}

    .head .av{width: 35px; height: 35px;}




    .caroussel{height: 500px}

    .caroussel .masq{height: 280px}

    .caroussel .masq div{padding: 20px;margin: 20px;font-size: 0.8em;opacity: 0.95;width: calc(100% - 40px) !important;}

    .caroussel .child div{width:90%;margin: 30px auto}

    .caroussel .child span {font-size: 2em;}
    .caroussel .child h1 {font-size: 1em;font-weight:500;margin-bottom: 0px; }

    .caroussel .child p{font-size: 0.9em}

    .caroussel .btn.icon{top: 62%;display: block}

    .caroussel .srch{ padding: 0 !important; width: 100% !important;}
    .srch form input { padding: 0px; }

    .caroussel .icon{font-size: 2em;}
    


    .h0{font-size: 3em;}

    .h2{font-size: 2.3em;}

    .c4 .h0{font-size: 1.7em;}
    .c > div{
        width: 100%;
    }
    .c .pm20{ padding: 20px;}

    .c1, .c2, .c3, .c7{padding: 50px 20px;}

    .c4 .c{padding: 30px;}

    .c5, .c8{padding: 20px}

    .c8 span{margin-bottom: 20px;}



    .c5 .marques{margin-top: 20px !important;}



    .c1 form > *{margin-bottom: 10px !important;}



    .c2 div div > div{margin-bottom: 40px}

    .c2 img{height: 250px;width: 100%}

    .c2 div.num{padding: 20px !important;margin-bottom: 0;border-radius: 0}



    .c3 .c div{justify-content: center;margin-bottom: 20px}



    .c4 .c{display: grid;}

    .c4 .c div{margin-bottom: 50px;}



    .c7{text-align: center;}

    .c7 .h0{margin-bottom: 20px;}

    

    .c8 .flex{display: flex;flex-direction: column-reverse;padding-bottom: 20px;}

    .c8 .ta-end{text-align: center;}

    .c8 a.mr20{margin-right: 0;}



    .mask .exit, .mask .btn{padding: 0;font-size: 1em;width: 40px;height: 40px;}



    .articles{justify-content: center;}



    .article{min-width: 280px;margin-bottom: 30px;}

    .article img{height: 300px;}



    .marques img{width:160px; height: 160px;}



    .single .c3.flex{flex-direction: column}

    .single .first-cont{padding-top: 20px;margin-bottom: 10px}

    .single .first-cont{display: block}

    .single .photos,.single .ar-cont{margin-top: 20px;display: block;width: 100%}

    .single .box .cnt{padding: 15px}

    .gla-comment{margin: 20px 0}

    .gla-cptch label{display: block;margin-bottom: 10px}

    .gla-cptch span{font-size: 0.8em}



    .single .ar-cont{padding: 0}

    .single .ar-cont h1{font-size: 1.5em}



    .single .mb60{margin-bottom: 0;}



    .single .gd, .grid3{display: block}

    .single .comm, .single .desc{width: 100%}



    .article:last-child{margin-bottom: 0;}



    .more_services{margin-top: 70px;}



    .contact .child,.contact .child2{width: 100%}



    .first-cont, .single .cont .boxes, .login .box, .single .cont .box .cnt{padding: 10px}

    .single .box .cnt{padding: 0}



    .login .box{margin-bottom: 50px;}



    .more-articles{margin-bottom: 20px;}

    .more-articles .article{width: 300px}



    .single .car-slide{width: 100%;margin: 0}



    .page .child{width:100%;margin: 10px}

    .page-aside{padding: 20px}



    .panier .ref{display: flex;margin-bottom: 10px;padding: 0 8px}

    .panier .ref div{width: calc(100% - 100px)}

    .panier .dt{width: 100%;margin: 10px 0;padding: 10px}

    .panier .dt span{margin-bottom: 5px;display: block;width: 100% !important;text-align: left}

    .panier .btn_show_prod{margin: 8px;display: block}



    .pg .child{padding: 15px;width: 100%}

    .pg .child2{width: 100%}

    .child2 ul{padding: 30px 15px}

    footer .child.cnt{width: 100%}



    .share p{width: 100%}



    .gla-com span.gla-com-time{display: block;float: none}

    .gla-form .group{display: block}

    .gla-form .group input[type=text], .gla-form .group input[type=email]{width: 100%}

    .gla-form label{margin-bottom: 10px}

    .gla-cptch{margin: 20px 0}



    footer{padding-top: 0;}

    footer .child{max-width:100%;width: 100%}

    footer .c{display: block;text-align: center}

    footer .c > div{display:block;margin-bottom: 40px;width: 100%;margin-top: 0;}

    footer .c > div a{margin-bottom: 20px;display: block;text-align: center}

    footer .c div > div{margin-bottom: 20px}



    .space .flex{flex-direction: column-reverse}

    .pg .products, .pg .command{width: 100%}





}



@media (max-width : 620px) {



    header .logo{height: 40px;}

    header .head .flex{display: block;}

    header .head .flex .col-25{width: auto !important;}

    header .cnt > div{display: flex;justify-content: space-between;align-items: center;margin-right: 20px}

    header .cnt div div{width: 75%;display: block}

    header .cnt div .pan{display: none}

    header .cnt .btn{font-size: 0.8em;padding: 5px 10px!important;margin-left: 65px!important;}

    header .cnt div .usr{display: flex;align-items: center}

    header .cnt div .usr img{margin-right: 5px}

    header .cnt div .usr span{font-size: .9em}

    .head ul{display: inline-block;}
    .head .conn ul {right: unset;top: 100%; }
    .head .conn ul li {text-align: start;  }


    .head ul.conn{padding: 0;vertical-align: middle; margin-left: 0;}

    .head li{text-align: center;margin:5px 0;display: flex !important; flex-direction: column;  padding-left: 30px; }


    .head .ava-m{ margin: 0 auto; }
    .head .ava-m ul li{ padding-left: 0 ;}
    .head .ava-m ul li img{margin-right: 0; }

    .flex_mobile{display: flex !important;align-items: center;}

    .flex_mobile form{width: 62% !important;margin: 0 !important;}

    .flex_mobile > div{width: 35%;}

    .flex_mobile form input[type=search]{padding: 15px 5px;}

    .flex_mobile a{margin-right: 0px !important;}


  
    .caroussel .masq{height: 330px}
    .caroussel h1{font-size: 2.5em;}
    .caroussel span{font-size: 1.5em;}
    .caroussel .spantext{font-size: 1.5em; z-index: -1;}
    .caroussel .icon{font-size: 2em;}
/* Index */
    .mslider{display: none;}
    .car-btns{display: none;}
    .mabtT{display: none;}
    .mh3{font-size: 3em;}
  /* profile */
    .c{display: block;}
    .mpays { flex-wrap: nowrap;}
    
    .grid2_mobile{display:grid !important;grid-template-columns: repeat(2, calc( 50% - 15px ) [col-start]);grid-gap:20px;text-align: left;font-size: 0.8em;}

    .grid2_mobile .fz3{font-size: 2.4em !important}



    .h0{font-size: 2em}

    .h2{font-size: 1.8em;}

    .c4 .h0{font-size: 1.5em;}



   .shapImg{width: calc(100% - 30px) ; }

    

    .c5 .grid5{grid-template-columns: repeat(2, calc( 50% - 15px ) [col-start])}
    .ca{padding: 0;}
    .ca div{ text-align:end ; margin-bottom: 30px; }
    
    .c1 .cats a {
       
        margin-bottom: 30px;
        display: block;
    }

    .single .photos{position: static;padding-top: 0;}

    .single .photos .first{max-height: 400px;min-height: 300px;}

    .single .more-img{display:grid;grid-template-columns: repeat(3, calc( calc(100% / 3) - 7px )[col-start]);grid-gap:10px;margin-top: 10px;}

    .single .colors .grid5{grid-template-columns: repeat(5, calc( 20% - 15px ) [col-start])}

    .single .more-img img{height: 90px;}



    /* .content{padding: 0 20px; border-top: 1px solid #a09f9f;} */

    

    .marques img{width:130px; height: 130px;}



    .mask .btn{top: 85%}



    .login .box, .login .box form{width: 100%}





    .article .t{height: auto}



    .single .ar-cont{margin-top: 0;}

    .single .ar-cont .colors .mr10, .single .ar-cont .fav.mr10{margin-right: 0;}

    .single .ar-cont .fav{padding: 8px}



    .h1{font-size: 3em;}

    .h1 .icon{display: block;margin-bottom: 8px}

    .pg .produit .ref{width: 100%}



    .pg h1{font-size: 1.5em;}



    .panier .products .ref img{width: 36%}

    .panier .products .ref div{width: 60%}

    .panier .products .flex.col-2{text-align: right;padding: 10px;}

    .pg .produit.flex{padding: 8px 0}

    .pg .produit .qnt{width: 60px;}

    .pg .produit .price{text-align: center;width: 45%;margin: 0;padding: 0;font-size: 1em}

    .pg .produit > button.icon, .pg .produit .btn{font-size: 1.9em}

    .panier .box h2{font-size: 1.2em}

    .panier .box p{font-size: .9em}

    .panier .box .btn{font-size: .9em;padding: 10px 15px;display: block;text-align: center;margin-top: 5px}

    .panier .box .rem{margin: 0;font-size: .9em}



    .commande{padding: 10px 0;}



    .inf .produit{padding: 0}

    .inf form{height: auto}

    .inf form label,.inf form div,.inf form input{width: 100%!important;}

    /* footer */
    .mapp a{font-size: 0.7em; width: 40% !important;height: 120px; margin-bottom: 0 !important; }
    .mapp img{ height: 80%; object-fit: contain; }
    .mapp div{display: flex; align-items: center; justify-content: center;}

}