body{margin:0;padding:0;max-width: 100%;font-family: 'Lato', sans-serif;overflow-x: hidden;scroll-behavior: smooth !important;}
html{scroll-behavior: smooth !important;}

/* COMMON */
.nomob{}
.mob{display: none !important}
.cls{clear:both}
.clear-left {
    clear: left;
}
.text-small{font-size: 13px}
.text-normal{font-size: 16px}
.text-large{font-size: 18px}
.picto-mw{max-width: 120px}
.picto-mw-100{max-width: 100px}
.text-color-blue{color:#39b4e0}
.text-color-white{color:#ffffff}
.w-60{width: 60% !important}
.w-40{width: 40% !important}
.w-35{width: 35% !important}
.w-30{width: 30% !important}
.w-20{width: 20% !important}
.w-15{width: 15% !important}
.w-10{width: 10% !important}

.carousel-control-next-icon, .carousel-control-prev-icon{width: 4rem !important;height: 4rem !important}

.overlay{position: fixed;z-index: -1;background: #000000;opacity: 0;top:0;left:0;right: 0;bottom: 0px;transition: all 0.2s linear}
.overlay.on{z-index: 90;opacity: 0.5}


/* LAYOUT */

header{max-height: 100vh}
#sliderTop.carousel, #sliderTop .carousel-inner, #sliderTop .carousel-item, #sliderTop .active{height: 80vh;max-height: 80vh}
#sliderTop.carousel nav{position: absolute;bottom:15%;width: 100%;text-align: center;left:0;z-index: 100}
#sliderTop.carousel nav ul{display: inline-block;list-style: none;margin: 0;padding: 0}
#sliderTop.carousel nav ul li{color:#ffffff;display: inline-block;border-right:2px solid #39b4e0}
#sliderTop.carousel nav ul li:last-child{border: 0 !important}
#sliderTop.carousel nav ul li a{color:#ffffff;padding:8px;display: block !important;text-decoration: none;text-transform: uppercase;transition: all 0.2s ease}
#sliderTop.carousel nav ul li a:hover{color:#39b4e0}

.slide{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}
.sl1{background-image: url(/wp-content/uploads/2021/06/1-BAUWERK-CAAPARK-Chêne-Ambra-scaled.jpg);}
.sl2{background-image: url(/wp-content/uploads/2021/06/2-ALSAPAN-536-Chêne-Lin.jpg);}
.sl3{background-image: url(/wp-content/uploads/2021/06/4-SOGAL_SOUS-COMBLE_SEMI-OUVERT.jpeg);}
.sl4{background-image: url(/wp-content/uploads/2021/06/5-SOGAL_Porte-intérieure-Evidence-18.jpeg);}
.sl5{background-image: url(/wp-content/uploads/2021/06/7-K-LINE_TENERE_BOIS_Ext.jpg);}
.sl6{background-image: url(/wp-content/uploads/2021/06/8-azur-alu-80-belm-porte-entree-gris-2900-texture-72.jpg);}
.sl7{background-image: url(/wp-content/uploads/2021/06/porte-d-entree-bois-5.jpg);}
.sl8{background-image: url(/wp-content/uploads/2021/06/10-K-LINE_AMB-BAIE-COULISSANT-XXL-EXT.jpg);}
.sl9{background-image: url(/wp-content/uploads/2021/06/11-K-LINE_AMB-BAIE-COULISSANT-XXL-INT-2020.jpg);}
.sl10{background-image: url(/wp-content/uploads/2021/06/12-HERMES-LAMB-ENROULABLE-JPEG-scaled.jpg);}

.top-header{background:#39b4e0;height: 50px;color:#ffffff;font-size: 11px;line-height: 1.1;font-weight: 600}
.top-header a{color:#ffffff;text-decoration: none}

.line{width: 100px;height:2px;background:#39b4e0;margin: 0 auto;}


.baseline-header p{font-size: 30px;font-weight: 300}

.baseline-header.front{
    padding-top: 1px;
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    background:rgba(255,255,255,0.8);
    z-index: 100;
}

.baseline-header.front .line{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    margin:0 10px 0 10px;
}

.baseline-header.front p{display: inline-block;vertical-align: middle;margin:0;font-weight: 400}

.qualibat-header{background: #f9f9f9}

.qualibat-header .txt-top{
    font-size: 30px;
    color:#666666;
}

.qualibat-header .txt-bottom{
    font-size: 15px;
    font-weight: bold;
}
#sliderTemoignages{color:#ffffff;font-weight: 300}
#sliderTemoignages.carousel, #sliderTemoignages .carousel-inner, #sliderTemoignages .carousel-item, #sliderTemoignages .active{height: 25vh;min-height: 250px}
.picto-temoignages{margin-top: -3.5rem}

#sliderTemoignages .inner{width: 50%}

/* MENUS PAGES */

nav.page{text-align: center;}
nav.page ul{display: inline-block;list-style: none;margin: 0;padding: 0}
nav.page ul li{color:#ffffff;display: inline-block;border-right:2px solid #39b4e0}
nav.page ul li:last-child{border: 0 !important}
nav.page ul li a{color:#ffffff;padding:8px;display: block !important;text-decoration: none;text-transform: uppercase;transition: all 0.2s ease}
nav.page ul li a:hover{color:#39b4e0}

/*EFFECTS*/

.hover{transition: opacity 0.2s linear}
.hover:hover{opacity: 0.5}

.bg-gris{background: #e6e6e6}
.bg-gris-fonce{background: #53524e}
.bg-noir{background: #000000}
.bg-bleue{background:#39b4e0;}
.bg-opa-noir{background:rgba(0,0,0,0.5);}

.text-gris-clair{color:#e0e1e0;font-weight: 300;line-height: 1.1}

.galerie-photos a {
    position: relative;
    display: block;
}

.oeil {
    display: none;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #e7bc53;
    background: rgba(68,56,51,0.8);
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 3.0em;
}

.galerie-photos img {
    margin-bottom: 20px;
}

/* FOOTER MENU */

.menu-footer ul{display: inline-block;list-style: none}
.menu-footer ul li{display: inline-block;list-style: none}
.menu-footer ul li:after{
    content: "|";
    color:#303030;
    margin:0 3px 0 5px;
}
.menu-footer ul li:last-child:after{display: none}
.menu-footer ul li a{color:#303030;font-size: 13px;text-decoration: none;transition: opacity 0.15s linear}
.menu-footer ul li a:hover{opacity: 0.5}
.menu-footer ul li.current_page_item a{color:#39b4e0}

/* RESPONSIVE */

@media (max-width: 800px) {

    h2{font-size: 23px}
    .text-small{font-size:11px}
    .text-large{font-size: 16px}
    .text-normal{font-size: 15px}

    #sliderTop.carousel nav ul li a,
    nav.page ul li a{font-size: 13px}
    .carousel-control-next-icon, .carousel-control-prev-icon{width: 3rem !important;height: 3rem !important}
    .carousel-control-next, .carousel-control-prev {
        width: 8%;
    }
    .baseline-header p{font-size: 20px;}
    .baseline-header img{max-height: 28px !important}
    .qualibat-header .txt-top{
        font-size: 25px;
    }

    .qualibat-header .txt-bottom{
        font-size: 13px;
    }

    #sliderPartenaires img{height: 40px !important}
    #sliderTemoignages .inner{width: 80%}
}

@media (max-width: 600px) {
    .nomob{display: none !important}
    .mob{display: block !important}

    h2{font-size: 20px}
    .text-small{font-size:11px}
    .text-large{font-size: 16px}
    .text-normal{font-size: 13px}

    .top-mob{background: #E0E0E0;z-index: 100}

    .nav-mob{z-index: -10;margin-top: 80px;background: #ffffff;top:-400px;transition: all 0.2s linear}
    .nav-mob ul{list-style: none;margin:0;padding:0}
    .nav-mob ul li{display: block;border-bottom: 1px solid #E0E0E0}
    .nav-mob ul li:last-child{border: 0 !important}
    .nav-mob ul li a{display: block;padding:12px 20px 12px 30px;text-decoration: none;color:#39b4e0;font-weight: 600;text-transform: uppercase;font-size: 14px}

    .nav-mob.on{top:0px;z-index: 100;}


    .baseline-header p{font-size: 17px;}
    .baseline-header img{max-height: 20px !important}

    .qualibat-header{padding: 7px !important}
    .qualibat-header img{max-height: 50px !important}
    .qualibat-header .txt-top{
        font-size: 18px;
    }

    .qualibat-header .txt-bottom{
        font-size: 11px;
    }

    #sliderPartenaires img{height: 30px !important}
    #sliderTemoignages .inner{width: 80%}
}