.c,.cc,.c8,.c6,.c7,.head, .content .box{width: 100%;}

.content{display: block}

span.menu-res{display: none}
.cont,aside{width: 100%}


@media (max-width : 960px) {

    .flex{display: block}
    .flex-mb{display: flex}
    .content .c{display: block;padding: 0 20px}
    .content{padding: 0 20px}

    header .logo{ height: 35px;text-align: center; margin: 10px;}
    header .c{padding: 0 10px}
    header .flex-end {justify-content: flex-start;margin-top: 8px;}

    header .btn{display: none;}

    span.menu-res{display: block;width: 40px;height: 40px;padding: 7px;background-color: var(--cl2);border-radius: 5px;font-size: 1.7em;margin-top: 11px;position: fixed;top: 0;right: 10px;color: var(--cl1);transition: 0.15s linear; text-align: center;cursor: pointer;z-index: 9999}
    span.menu-res::before{content: "n";width: 40px;height: 40px;display: block;position: absolute;top: 6px;right: 0;}
    .mn span.menu-res::before{content: "r";}
    .mn span.menu-res{right: 20px}
    .mn .menu-res{right: 250px}
    .mn nav{right:0;}
    header nav{position: fixed;overflow:hidden;padding-top: 30px;overflow-y:auto;height:100%;right:-100%;top: 0;width: 100%!important;background-color: var(--cl2);box-shadow: 0 0 6px rgba(0,0,0,0.6);transition: 0.15s linear;}
    header nav ul{display: block;padding: 0}
    header nav ul li{display: block;border-bottom: 1px solid var(--cl3-light);padding: 0 10px;}
    header nav ul li:hover{background: transparent}
    header nav ul li a{display:block;color:var(--cl1);font-size: 1.2em;}
    header nav ul li a span.icon2{display: none}
    header nav ul li ul{position: relative;margin-left: 20px;box-shadow: none;left: 0;display: block;padding: 0;background-color: transparent !important;}
    header nav ul li ul li{border-bottom: none}
    header nav li ul h3,header nav li ul .top{display: none}
    header nav li ul .mn,header nav li ul li{width: 100%;margin-right: 5px}
    header nav ul li ul li a{color:var(--cl3)}
    header nav ul li ul li:first-child a{padding-top: 0;}
    header nav ul ul li a:hover{color: var(--cl3); }

    .caroussel{text-align: center;height: 500px;}
    .caroussel .masq{display: flex;padding: 70px 20px 30px;height: 500px;}
    .caroussel h1, .team .cnt span{font-size: 2em;}
    .caroussel .child img, .caroussel video{height: 500px;}

    .btn{font-size: 1.1em;}
    .pt100{padding-top: 40px;}
    .pb100{padding-bottom: 40px;}

    .c0{padding: 15px;}
    .c0 .pt60{padding-top: 0;}
    .c0 img{height: 300px;}
    .c0 .p30{padding: 20px 0;}

    .c1 .c{padding: 0 15px;}

    .service{height: 300px;}
    .service .cnt div{padding: 0;}
    .service .title{font-size: 1.3em;}

    .c4{padding: 30px 15px;display: flex;flex-wrap: wrap;}
    .c4 img{height: 400px;}
    .c4 .box img{width: 35px;height: 35px;}
    .c4 .box p{font-size: .8em;}
    .c4 .col-5{margin-bottom: 15px;}
    .c4 .col-22{width: 48%;}

    .c2 .c{padding: 20px;}
    .c3{width: calc(100% - 30px); margin: 40px auto;}
    .c3 .btn{margin-top: 20px;}

    .fz3, .fz4{font-size: 2em;padding: 10px;}
    
    .contact.pb80{padding-bottom: 0}
    .contact .cc{padding: 0 20px;}
    .contact .flex .col-48{margin-bottom: 20px;}

    .content{font-size: 1.1em;}
    .content h2{font-size: 1.7em;}
    
    footer .c{padding: 30px 20px;}
    footer .logo{margin-bottom: 15px;}
    footer ul{margin-right: 0;}
    footer ul li a{font-size: 1.1em;}
    .grid2-mb{display:grid;grid-template-columns: repeat(2, calc( 50% - 10px ) [col-start]);grid-gap:20px}

}