@charset "UTF-8";
/* CSS Document */


header{width:100%;z-index:100;background:rgba(234, 235, 236, 0); position: fixed;top: 0;transition: top 0.4s ease-in-out;}
.nav-up {top: -170px;} /* effet sticky on scroll up and hide on scroll down */

.m-300px-t {margin-top: 300px; }
.logo{padding:20px 0 0 40px;float:left;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}

.btn-slider {
    position: absolute;
    bottom: 45%;
    right: 15%;
}

.lien-slider {
    position: absolute;
    bottom: 17%;
    right: 16%;
    color: #000;
    font-size: 23px;
}
.w-200px {
    width: 200px;
}
.m-5px-r {
    margin-right: 5px;
}
#navMenu li{display:inline-block;line-height:1;margin:0;background:none;vertical-align:middle}

.home #navMenu .navTop{background:rgba(234, 235, 236, 0);}
.home #navMenu .navTop li{color:#fff}
.navTop .active, .sousMenu .active {color: #006399; background: transparent;}

#navMenu .navTop{padding: 40px 30px 35px 0;text-align:right;background:rgba(234, 235, 236, 1);-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}#navMenu .navTop ul{margin:0}
#navMenu .navTop ul li{color:#555;letter-spacing:0.5px;margin-left:20px;font-size:13px}#navMenu .navTop ul li a{font-weight:400}
#navMenu .navTop ul li:first-child{margin-left:0}
#navMenu .navTop ul li a.current{color:#0092c1;}

#navMenu ul li.soum{padding:0 0 0 15px;margin:0 0 0 5px}
#navMenu ul li.soum a{background:#0092c1 url(../img/picto/soum-pictoBlanc.svg) no-repeat left 10px center;background-size:15px;padding:10px 15px 10px 32px;display:block;font-size:12px;font-weight:800;text-transform:uppercase;border-radius:5px;color:#fff;letter-spacing:0.3px;width: 210px; text-align: center;}
#navMenu ul li.soum a:hover{background-color:#006399;-webkit-transition: none;transition:none;}

#navMenu ul li.suivi{padding:0 0 0 15px;margin:5px 0 0 5px;}
#navMenu ul li.suivi a{background:#fff url(../img/picto/comm-pictoBleu.svg) no-repeat left 10px center;background-size:15px;padding:10px 15px 10px 32px;display:block;font-size:12px;font-weight:800;text-transform:uppercase;border-radius:5px;color:#006399;letter-spacing:0.3px; width: 210px; text-align: center; }
#navMenu ul li.suivi a:hover{background:#006399 url(../img/picto/suivi-pictoBlanc.svg) no-repeat left 10px center;color: #fff;background-size:15px;padding:10px 15px 10px 32px;display:block;}


#navMenu .navBottom {position:relative;width:100%;background:rgba(16,31,43,0.9);text-align:center;color:#fff;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;-webkit-align-items: center;align-items: center;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;clear: both;margin: 0 auto;}
#navMenu .navBottom a{text-transform:uppercase;font-size:13px;margin:0;}
#navMenu .navBottom a{line-height:1;display:block;font-weight:400;letter-spacing:1px;padding:15px 15px;width:calc(100% / 6);}

@media only screen and (max-width: 1450px) {
    #navMenu .navBottom a{font-size: 10px;}
}

a.serie{background:url(../img/picto/carre-bleu.svg) no-repeat center 9px ;background-size:25px;}
a.serie span{font-weight:800}
a.serie-signature {background-color: #0092c1 !important;}
#navMenu a.vitrerie {background:url(../img/picto/ligne-vitrerie.svg) no-repeat center center;background-size:100% 50px;font-weight:800;font-size:15px;}

@media only screen and (max-width: 1450px) {
    #navMenu a.vitrerie{font-size: 10px;}
}

#navMenu .navBottom a:hover  ,
#navMenu .navBottom a.serie:hover, 
#navMenu .navBottom a.active, 
#navMenu .navBottom a.serie.active{background-color:#0092C1 ;border:none;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
#navMenu a.vitrerie:hover, #navMenu a.vitrerie:active {background-color: #fff;}


header.sticky #navMenu .navTop {background:rgba(234, 235, 236, 1.0);}
header.sticky #navMenu .navTop ul li{color:#555}



/* MENU MOBILE */

#menuMob{display: none;}
#overLayer{position: fixed;min-height: 100%;width: 100%;top: 0;left: 0;background: rgba(16, 31, 43, 0.6);cursor: pointer;z-index: 2;display: none;}
#overLayer.is-visible {display: block;-webkit-animation: cd-fade-in 0.3s;-moz-animation: cd-fade-in 0.3s;animation: cd-fade-in 0.3s;}
@-webkit-keyframes cd-fade-in {0% {opacity: 0;}  100% {opacity: 1;}} @-moz-keyframes cd-fade-in {0% {opacity: 0;} 100% {opacity: 1;}} @keyframes cd-fade-in {0% {opacity: 0;}  100% {opacity: 1;}}


#headhome{position:relative}
.cycle-slideshow{position:relative;width:100%;margin:0 auto;margin:0;padding:0;z-index:0;height:100%;}
.cycle-slideshow .slide{width:100%;position:relative;height:100%;z-index:1}
.cycle-slideshow .slide .container{height:100%;padding-top:300px;text-align:center;z-index:999;}
.cycle-slideshow .slide .container h2{color:#fff;font-size:100px;font-weight:400}
.cycle-slideshow .slide-vitrerie .container h2{color:#fff;font-size:60px;font-weight:400;background:#101f2b;display:inline-block;padding:40px;border:none}
.cycle-slideshow .slide .container h3{font-size:80px;font-weight:300;display:inline-block;text-transform:uppercase;color:#fff;border:3px solid #fff;border-radius:5px;padding:20px 30px}

.cycle-slideshow .slide1{background:url(../img/slider/fenetre-head.jpg) no-repeat center top / cover fixed }
.cycle-slideshow .slide2{background:url(../img/slider/head-tanguay.jpg) no-repeat center top / cover fixed }
.cycle-slideshow .slide3{background:url(../img/slider/slide_interieur.jpg) no-repeat center top / cover fixed }
.cycle-slideshow .slide4{background:url(../img/slider/slide4.JPG) no-repeat center top / cover }
.cycle-slideshow .slide5{background:url(../img/slider/slide5.jpg) no-repeat center top / cover }
.cycle-slideshow .slide-vitrerie{background:url(../img/slider/fond-vitrerie-slide.jpg) no-repeat center top / cover fixed }
.cycle-slideshow .slide6{background:url(../img/slider/partenaires.jpg) no-repeat center top / cover }
.cycle-slideshow .slide7{background:url(../img/slider/slide-01.png) no-repeat center top / cover fixed }
.cycle-slideshow .slide8{background:url(../img/slider/slide-02.png) no-repeat center top / cover fixed }
.cycle-slideshow .slide9{background:url(../img/slider/recherche-cancer.png) no-repeat center top / cover }
.cycle-slideshow .slide10{background:url(../img/slider/promo-oct.jpg) no-repeat center top / cover }

.fleche{width:100%;position:absolute;bottom:5%;left:0;z-index:1}
.fleche img{margin:0 auto;display:block;z-index:1}


.cycle-pager { z-index: 500; overflow: hidden;position:absolute;right:60px;bottom:120px;}
.cycle-pager span { width: 17px; height: 17px; background:transparent;border:2px solid #ccc;margin:0 5px 0 0;display:inline-block;cursor: pointer;}
.cycle-pager span.cycle-pager-active {border:5px solid #0092C1;background:#0092C1;}
.cycle-pager > * { cursor: pointer;}



@media only screen and (max-width: 1260px) {

.logo {padding: 10px 0 0 40px}

#navMenu .navTop{padding:25px 25px 30px 0}
#navMenu .navTop ul li{letter-spacing:0.5px;margin-left:15px;font-size:12px}
#navMenu ul li.vitrerie{font-size:14px}


#navMenu .navBottom ul li{font-size:12px;}
#navMenu ul li.soum a, #navMenu ul li.suivi a{padding:10px 10px 10px 25px;font-size:12px;background-size:13px}
#navMenu ul li.suivi a {width: inherit; text-align: inherit;}


header.sticky .logo{padding:15px 0 0 25px;}
header.sticky #navMenu .navTop {padding: 20px 25px 25px 0;}
header.sticky #navMenu .navTop ul li{color:#555}

}



@media only screen and (max-width: 1170px) {
	
header{height:70px;background:rgba(16,31,43,0.9)} .home header{background:none}	
header.sticky #navMenu .navTop {padding: 0}

.logo {padding:8px 15px}.home .logo {padding-top:25px}
.logo img{width:170px}	


#menuMob{position: absolute;top:15px;right:25px;z-index:8;display:block;-webkit-transition: all 0.4s ease;transition: all 0.4s ease}.home #menuMob{top:30px}
#menuMob a{width:40px;height:40px;display: block;background: url("../img/menu-mobile.svg") no-repeat center center / 35px;}

#navMenu{z-index:3;width:260px;padding-top:0;position:fixed;top:0;height:100%;overflow-y: auto;-webkit-overflow-scrolling: touch;box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);left: -100%;background: #282828;-webkit-transition: left 0.3s;-moz-transition: left 0.3s;transition: left 0.3s;}
#navMenu.speed-in{left:0;}

#navMenu ul{margin:0;padding:0;float:none}
#navMenu ul li{display:block;margin:15px 0;padding:0;text-align:left;padding:2px 10px;line-height:1}
#navMenu .navTop, .home #navMenu .navTop {padding:70px 0 0;background:rgba(234, 235, 236, 1);color:#555;}
#navMenu .navTop ul li , .home #navMenu .navTop li{margin-left: 15px;color:#555;}
#navMenu .navTop ul li:first-child {margin-left:13px;}

#navMenu .navBottom, a.serie{display:block;text-align:left}
#navMenu .navBottom a.serie {background: rgba(0, 0, 0, 0) url("../img/picto/carre-bleu.svg") no-repeat scroll left 70px center / 25px auto;}
#navMenu .navBottom a{width:100%}
#navMenu .navBottom ul li.serie {background: rgba(0, 0, 0, 0) url("../img/picto/carre-bleu.svg") no-repeat scroll left 60px center / 25px auto;}
#navMenu  ul li.soum, #navMenu  ul li.suivi{float:none;margin:0!important;padding:0}
#navMenu  ul li.soum a, #navMenu  ul li.suivi a{border-radius:0;padding:15px 10px 15px 40px !important;background-position:left 20px center !important;}
.cesure {display: none;}

#navMenu ul li.vitrerie a{height:35px}

header.sticky{background:rgba(16,31,43,0.9);height:70px}	
header.sticky  #menuMob{top:15px}
header.sticky .logo{padding:10px 0 0 15px;}


.cycle-slideshow .slide .container{padding-top:260px;}
.cycle-slideshow .slide .container h2{font-size:70px}
.cycle-slideshow .slide .container h3{font-size:60px;}
    
.cycle-slideshow .slide1{background:url(../img/slider/fenetre-head.jpg) no-repeat center top / cover }
.cycle-slideshow .slide2{background:url(../img/slider/vue-head.jpg) no-repeat center top / cover}
.cycle-slideshow .slide3{background:url(../img/slider/exterieur-head.jpg) no-repeat center top / cover }
.cycle-slideshow .slide4{background:url(../img/slider/slide4.JPG) no-repeat center top / cover }
.cycle-slideshow .slide5{background:url(../img/slider/slide5.jpg) no-repeat center top / cover }
.cycle-slideshow .slide-vitrerie{background:url(../img/slider/fond-vitrerie-slide.jpg) no-repeat center top / cover }
.cycle-slideshow .slide9{background:url(../img/slider/cancer-mobile.png) no-repeat center center / cover }

.btn-slider {
    position: absolute;
    bottom: 0;
    left: 5px;
    display: flex;
    flex-direction: column;
    right: auto;
}
.btn-slider span {
    margin-bottom: 5px;
}
.lien-slider {
    right: 0;
    font-size: 12px;
}

}


@media only screen and (max-width: 600px) {
	
header{height:60px}	

.logo, header.sticky .logo{padding:5px 10px}.home .logo {padding: 10px 15px}
.logo img{width:150px}

#menuMob{top:14px;right:10px}	.home #menuMob{top:10px}
#menuMob a{background-size: 25px;}	
#navMenu .navTop, .home #navMenu .navTop {padding-top:50px}	
	
header.sticky{background:rgba(16,31,43,0.9);height:60px}	
header.sticky  #menuMob{top:10px;right:10px}	

.cycle-slideshow .slide .container{padding-top:200px;}
.cycle-slideshow .slide .container h2{font-size:50px}
.cycle-slideshow .slide .container h3{  font-size: 32px;padding: 10px 15px;}
.cycle-slideshow .slide1{background-attachement:scroll;}

	
.cycle-pager{right:15px}

}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { .cycle-slideshow .slide1{background-attachement:scroll;}} /* IPAD */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { .cycle-slideshow .slide1{background-attachement:scroll;}} /* IPAD RETINA */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){.cycle-slideshow .slide1{background-attachement:scroll;}}