html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after, q:before, q:after {content:'';content: none;}table{border-collapse:collapse;border-spacing:0;}img{max-width:100%;}a{text-decoration:none;}
#menu-wrapper{overflow:hidden;max-width:100%;cursor:pointer;}
#menu-wrapper #hamburger-menu{width:36px;height:38px;margin:0;background:#0096db;border-radius:.15em;color:#fff;position:absolute;right:1em;top:1em;}
#menu-wrapper #hamburger-menu span{opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);left:5px;display:block;width:25px;height:2px;border-radius:10px;background-color:#fff;position:absolute;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.4s ease-in-out;transition:.4s ease-in-out;}
#menu-wrapper #hamburger-menu span:nth-child(1){top:9px;}
#menu-wrapper #hamburger-menu span:nth-child(2){top:18px;}
#menu-wrapper #hamburger-menu span:nth-child(3){top:27px;}
#menu-wrapper #hamburger-menu.open span:nth-child(1){top:18px;-webkit-transform:rotate(135deg);transform:rotate(135deg);}
#menu-wrapper #hamburger-menu.open span:nth-child(2){opacity:0;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);left:-60px;}
#menu-wrapper #hamburger-menu.open span:nth-child(3){top:18px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
#menu-container .menu-list{padding-right:0;display:block;position:absolute;width:100%;max-width:350px;background:#37393a;box-shadow:rgba(100,100,100,0.2) 6px 2px 10px;z-index:999;overflow-y:auto;overflow-x:hidden;right:-100%;top:55px;display:none;z-index:20000;}
#menu-container .menu-list li.accordion-toggle span,#menu-container .menu-list .menu-login,#menu-container .menu-list li.noparent{font-size:16px;padding:20px;text-transform:uppercase;border-top:1px solid #dbdcd2;}
#menu-container .menu-list > li span{display:block;padding:20px;}
#menu-container .menu-list li:first-of-type{border-top:0;}
.accordion-toggle,.accordion-content{cursor:pointer;font-size:16px;position:relative;letter-spacing:1px;}
a.menu-link{color:#fff;line-height:1.2em;}
.accordion-content{display:none;}
.accordion-toggle span a:before,.accordion-toggle span a:after{content:'';display:block;position:absolute;top:30px;right:30px;width:15px;height:2px;margin-top:-1px;background-color:#5a5858;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .3s;transition:all .3s ease-out;}
.accordion-toggle span a:before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:1;z-index:2;}
.accordion-toggle.active-tab{background:#c1c1c2;transition:all .3s ease;}
.accordion-toggle a.active:before{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);background:#fff!important;}
.accordion-toggle a.active:after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);background:#fff!important;opacity:0;}
#menu-container .menu-list .menu-submenu{padding-top:10px;padding-bottom:10px;background:#626464;}
ul.menu-submenu a{color:#fff;padding:10px 0 10px 25px;text-transform:uppercase;}
ul.menu-submenu a:hover{color:#4b9a98;text-decoration:none;}

.upper{
    text-transform: uppercase;
}

/* Mobile */
body {font-family: 'Montserrat', sans-serif;}
a {display:inline-block;}
.conteneur{width:90%;margin:0 auto;} 
header{margin:1em 0;}
header a.logo{width:75%;} 
.blocmenu{display:none;}
h1, p, a { color:#000; margin:0 auto;} 
h1,h2,h3{line-height:1.1em;}
main { margin-top:2em;} 
p.copy{font-size:.75em;margin:4em 0 0 0;}
div.slider{
    background: rgb(0,143,209);
    background: linear-gradient(90deg, rgba(0,143,209,1) 0%, rgba(0,75,110,1) 35%, rgba(0,0,0,1) 100%);
    padding-top:2em;
}
div.slider h1{
    color:#fff;
    padding-bottom:2em;
    font-size:1.15em;
}

.font-size-2em{
    font-size: 1.5em;
}
h1{margin:1em 0;font-size:1.4em;}
h1 span{text-transform:uppercase;}
main p{margin:1em 0;line-height:1.2em;font-size:1em;}
main ul{list-style-type:disc;margin-left:1.2em;line-height:1.2em;}
main ul li{margin-bottom:.5em;}
main ul li ul{margin-top:.5em;}
section.procede{background: rgb(55,57,58);background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);padding:2em 0;margin:2em 0;}
section.procede h2{color:#fff;border-bottom:1px solid #fff;padding-bottom:1em;font-size:1.4em;}
section.procede p{color:#fff;}
section.procede ul{color:#fff;}
section.procede h3{color:#fff;text-transform:none;}
h3{font-size:1.3em;margin:2em 0 .75em 0;}
section.expertise article{margin:2em 0 3em 0;text-align:center;}
section.expertise article h2{font-weight:bold;font-size:1em;line-height:1.2em;vertical-align:baseline;margin-bottom:.5em;text-align:left;}
section.expertise article h2 span{font-size:1.7em;color:#5bb134;vertical-align:baseline;}
section.expertise article p{text-align:left;}
a.btnbleu{background-color:#0096db;padding:.5em 2em;color:#fff;text-transform:uppercase;font-size:.9em; transition: background-color .5s ease-out;}
a.btnbleu:hover{background-color:#5bb134;}
footer .blocmenufooter{display:none;}
footer {background:url(../images/tech-solutions-traitement-eaux.jpg) no-repeat right bottom;padding-bottom:6em;background-size:contain;margin-top:2em;}

@media only screen and (min-width: 21em) {
    #procede .boxflex h3{
        font-size: 1em;
        font-weight: bold;
        padding-bottom: 10px;
    }

    .last-procede h2, .procede-traitement-eaux .element h2{
        text-align: center;
        font-weight: bold;
        margin: 25px 0 25px 0;
    }

    .last-procede .element p, .last-procede .element ul, .procede-traitement-eaux .element ul{
        padding:0 0 25px 4%;
        width: 90%;
    }

    .procede-traitement-eaux .element img{
        width: 100%;
    }

    #container-formation h2{
        font-weight: bold;
        margin-top: 25px;
    }
    
    #container-eau-pure{
        width: 100%;
    }
    
    #container-eau-pure .services {
        background-image: url(../images/banniere-services-techniques.jpg);
        color: white;
    }
    
    #container-eau-pure .services h3{
        text-align: center;
        padding: 15px;
    }
    
    
    #container-eau-pure .services ul{
        padding: 0 0 10px 10px;
    }
    
    #container-eau-pure .services li{
        padding-bottom: 5px;
    }
/*     
    .titre-partenaires{
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        color: white;
        text-align: center;
    } */

    .titre-partenaires{
        font-size: 1.5em;
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        color: white;
        width: 100% !important;
        margin: auto auto;
        text-align: left;
        padding: 20px 0 20px 0;
    }

    .titre-partenaires h3{
        margin-left: 10%;
    }

    .titre-partenaires p{
        color: white;
        width: 80%;
        margin-left: 10%;
    }

    .titre-partenaires hr{
        padding-left: 0px;
        margin-left: 10%;
        width: 80%;
    }

    #partenaires .conteneur{
        display: block;
        text-align: center;
    }

    #partenaires .conteneur img{
        padding: 10px 0 10px 0;
        margin: 0;
    }

    #contact #adresse{
        margin-top: 25px;
        width: 100%;
    }

    #contact #adresse h3{
        font-weight: bold;
        margin: 0;
        margin-top: 25px;
    }

    #contact iframe{
        margin: 0;
        margin: 25px 0 25px 8px;
        display: inline-block;
    }

    #contact .employe{
        margin-bottom: 75px;
        width: 100%;
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        color: white;
        height: auto !important;
    }

    #contact .employe * {
        color: white;
    }

    #contact .employe div{
        padding-top: 15px;
        padding-bottom: 15px;
        margin-left: 25px;
    }

    #contact h2{
        margin: 0;
        font-size: 2em;
        font-weight: bold;
        padding: 30px 0 15px 0;
    }

    #contact h3{
        margin: 0 0 30px 0;
    }


}  

@media only screen and (min-width: 25em) {
    
}

@media only screen and (min-width: 31em) {
    footer{background-size:70%;}
    div.slider h1{font-size:1.3em;width:80%;}
    h1{margin:1em 0;font-size:1.6em;}

}

@media only screen and (min-width:36em) {
    section.expertise article{display:inline-block;width:48%;margin:1em 0;}
    section.expertise article:nth-child(2){margin-right:.75em;}
    section.expertise article h2{height:40px;}

    
}

@media only screen and (min-width: 48em) {
    #menu-container {display:none;}
    header a.logo{display:inline-block;width:240px;}
    .blocmenu{display:inline-block;width:64%;}
    .info{text-align:right;margin-top:1em;}
    .info ul{display:flex;justify-content:space-between;width:95%;margin:0 0 0 auto;font-size: 0.9em}
    .info ul li a{color:#000;font-size:.8em;}
    .info ul li a:hover{color:#0986bf;}
    .menuprincipal{text-align:center;margin-top:3em;margin-left:-50%;}
    .menuprincipal ul{display:flex;}
    .menuprincipal ul li{
        margin-left: 80px;
    }
    .menuprincipal ul li a{color:#000;font-size:.9em;text-transform:uppercase;padding:5px 3px;line-height:1.1em;}
    .menuprincipal ul li a:hover{color:#fff;background-color:#0096db;}
    
    div.slider{margin:4em 0;position:relative;}

    
    div.slider img{position:absolute;width:475px;right:0;top:-2.5em;z-index:1;}
    h1 span{display:block;}
    div.box50{display:inline-block;width:47%;}
    div.box50:nth-child(2){margin-right:2em;}
    div.box50 h3{margin-top:.75em;}
    h3{font-size:1.4em;}
    footer{background-size:auto;}
    
    div.slider h1{
        position:relative;
        padding:2.5em 0 4em 0;
        z-index:1000;
        width:450px;
        height: 80px;
    }
    
    .actif{
        color:#fff !important;
        background-color:#0096db;
    }

   
}
@media only screen and (min-width: 64em) {
    .conteneur{width:980px;margin:0 auto;}
    .menuprincipal{margin:1em 0 0 0;}
    header a.logo{display:inline-block;width:300px;}
    .blocmenu{width:calc(100% - 305px);}
    .info ul{width:475px;}
    .menuprincipal ul{width:96%;margin:0 0 0 auto;}
    div.slider img{width:640px;}
    div.slider h1{font-size:2em;width:550px;}
    div.boxflex{display:flex;}
    div.boxflex div{flex:1;margin-right:2em;}
    div.boxflex div:first-child{flex:1.5;}
    div.boxflex div h1{margin-top:.7em;}
    section.procede h2 span{width:65%;display:block;}
    section.procede h2{font-size:1.7em;line-height:1.2em;}
    section.expertise {text-align:center;}
    section.expertise h3{font-size:1.5em;}
    section.expertise article h2{text-align:center;height:auto;font-size:1.2em;}
    section.expertise article{width:32%;}
    section.expertise article:nth-child(3){margin-right:.75em;}
    section.expertise article p{width:90%;margin:1em auto;}
    footer{margin-top:5em;padding-bottom:3em;}
    footer a.logo{display:inline-block;width:19%;}
    footer .blocmenufooter{display:inline-block;width:100%;}
    footer .blocmenufooter .info{display:inline-block;width:45%;padding-left: 3%}
    footer .blocmenufooter .info ul{width:auto;}
    footer .blocmenufooter .info li a{font-size:.7em;}
    footer .blocmenufooter .menuprincipal{display:inline-block;width:49%;}
    footer .blocmenufooter .menuprincipal ul li a{font-size:.7em;padding:0;}
    footer .blocmenufooter .menuprincipal ul li a:hover{background-color:transparent;color:#0986bf;}
    
    div.slider h1{
        position:relative;
        padding:2.5em 0 4em 0;
        z-index:1000;
        width:450px;
        height: 130px;
    }
    
    .procede-traitement-eaux{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-top: 150px;
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        padding-top: 30px;
        padding-bottom: 30px;
        color: white;
    }
    
    .procede-traitement-eaux .element{
        text-align: left;
        flex: 15% 35% 35% 15%;
    }
    
    .last-procede h2, .procede-traitement-eaux .element h2{
        font-weight: bold;
        padding-bottom: 20px;
        text-align: left;
        font-size: 2em;
    }
    
    .last-procede{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-top: 50px;
        background-color: white;
        padding-top: 30px;
        padding-bottom: 30px;
        color: black;
    }
    
    .last-procede .element p{
        padding: 0;
        width: 90%;
    }
    
    .procede-traitement-eaux .boxflex.upper{
        margin: 0 0 50px;
        font-size: 2em;
    }
    
    
    .titre-procede{
        font-size: 2em;
    }
    
    
    
    h1.titre-eau-pure{
        width: 100% !important;
        padding-top: 50px;
    }
    
    #container-eau-pure{
        width: 100%;
    }
    
    #container-eau-pure ul{
        padding-top: 10px;
        width: 100%;
        font-size: 1.5em;
    }
    
    #container-eau-pure h3{
        font-size: 1.5em;
        font-weight: bold;
    }
    
    #container-eau-pure .services{
        background-image: url(../images/banniere-services-techniques.jpg);
        color: white;
    }
    
    #container-eau-pure .services h3{
        font-size: 2.5em;
        padding: 50px 0 0px 50px;
    }
    
    #container-eau-pure .services hr{
        padding-left: 0px;
        margin-left: 50px;
        width: 90%;
    }
    
    #container-eau-pure .services ul{
        padding: 15px 0 50px 50px;
    }
    
    #container-formation{
        font-size: 1.5em;
        padding-bottom: 50px;
        padding-top: 50px;
    }
    
    #container-formation h2{
        font-size: 2em;
    }
    
    .titre-partenaires{
        font-size: 2em;
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        color: white;
        width: 100% !important;
        margin: auto auto;
        text-align: left;
        padding: 20px 0 20px 0;
    }
    
    .titre-partenaires h2{
        margin-left: 10%;
    }
    
    .titre-partenaires p{
        color: white;
        width: 80%;
        margin-left: 10%;
    }
    
    .titre-partenaires hr{
        padding-left: 0px;
        margin-left: 10%;
        width: 80%;
    }
    
    #partenaires .conteneur{
        width: 90%;
        text-align: center;
        margin-top: 50px;
    }
    
    #partenaires .conteneur img{
        margin: 0 25px 0 25px;
    }
    
    #partenaires .boxflex{
        justify-content: space-between;
    }

    div.boxflex .employe div ul{
        margin-left: 0px;
        padding: 0px 10px 0 10px;
    }
    

    div .boxflex .employe div{
        flex:1;
        width: 90%;
    }
    
    #contact .employe{
        width: 30%;
        margin-right:2em;
    }
    
    #contact .employe span{
        font-size: 0.75em;
    }
    
    .square{
        background: rgb(55,57,58);
        background: linear-gradient(90deg, rgba(55,57,58,1) 0%, rgba(33,35,35,1) 35%, rgba(58,60,61,1) 100%);
        color: white !important;
    }
    
    .square h2{
        margin-top: 25px;
        padding-bottom: 20px;
        font-size: 2em; 
        border-bottom: 1px solid white;
        text-align: center;
    }
    
    .square p{
        margin-left: 50px;
        width: calc(100% - 50px) !important;
        color: white;
    }

    .square ul{
        margin-left: 100px;
    }

    #size100{
        width: 100%;
    }
}
@media only screen and (min-width: 96em) {
header a.logo{display:inline-block;width:336px;}
.blocmenu{width:calc(100% - 341px);}
.conteneur{width:1400px;margin:0 auto;}
.menuprincipal{text-align:right;}
div.slider{margin:5.5em 0;}
div.slider h1{font-size:3em;width:800px;}
footer{margin-top:5em;padding-bottom:3em;}
footer a.logo{display:inline-block;width:19%;}
footer .blocmenufooter{display:inline-block;width:80%;}
footer .blocmenufooter .info{display:inline-block;width:49%; padding-left: 0%;}
footer .blocmenufooter .info ul{width:auto;}
footer .blocmenufooter .info li a{font-size:.7em;}
footer .blocmenufooter .menuprincipal{display:inline-block;width:49%;}
footer .blocmenufooter .menuprincipal ul li a{font-size:.7em;padding:0;}
footer .blocmenufooter .menuprincipal ul li a:hover{background-color:transparent;color:#0986bf;}

#contact .employe{
    font-size: 1.2em;
}

div.slider h1.traitements-eaux{
    width: 450px;
}

div.slider img{width:950px;top:-4em;}

h1{font-size:2.4em;}

h1.titre-procede{
    padding-top: 100px;
    width: 100%;
}

section.procede h2{font-size:2.5em;padding-bottom:.5em;margin-bottom:.5em;}
div.box50 p{width:70%;}
div.box50 div{display:inline-block;width:49.5%;}
section.expertise h3{font-size:2.3em;margin-bottom:1.5em;}
section.expertise article{width:32%;}
section.expertise article:nth-child(2),section.expertise article:nth-child(3){margin-right:1em;}
footer .blocmenufooter .menuprincipal{text-align:center;width:57%;}
footer .blocmenufooter .info{display:inline-block;width:40%;margin-left:1em;}
}

@media only screen and (min-width: 110em) {
.conteneur{width:1650px;margin:0 auto;}
div.slider h1{font-size:3.5em;width:900px;padding:4em 0;}

div.slider img{width:1150px;top:-3.5em;}

.info ul li a{font-size:.9em;}
.menuprincipal{margin-top:1em;}
.menuprincipal ul{width:80%;}
.menuprincipal ul li a{font-size:1em;}
footer{padding-bottom:2.5em;}
section.expertise article:nth-child(2),section.expertise article:nth-child(3){margin-right:1.8em;}

footer .blocmenufooter .info{width:30%;margin-left:2em;}
footer .blocmenufooter .menuprincipal{width:67%;}
}
@media only print{
h1,h2,h3,h4,p,a,li{color:#000 !important;}
nav{display:none;}
}