@charset "utf-8";
@import url(../fonts/skmodernist/skmodernist.css);
@import url(../fonts/icons/icons.css); 
body{
	margin:0;
	padding:0;
	font-family:'skmodernist', sans-serif; font-weight:100; 
	color:#000;
	font-size:16px;
	width:100%;
	height:100%;
	
	
	background: repeating-linear-gradient(
	-45deg,
	#EEEEEE,
	#EEEEEE 2px,
	#FFFFFF 2px,
	#FFFFFF 4px
	);

}
ul, li, ol, form, img, h1, h2, h3, h4{padding:0 0 0 0; margin:0 0 0 0; border:0px;}
li{list-style:none;}
a {outline: none;}

/*DEBUG REPONSIVE*/
.sizedebug{ position:fixed; z-index:999999; bottom:0px; left:0px; font-size:12px; color:#FFFFFF; background-color:#000000; display:none; } 
@media(max-width: 1260px) {
  .sizedebug:after{content : '1260';}.sizedebug{ background-color:#BF2124;}
}
@media(max-width: 960px) {
  .sizedebug:after{content : '960';}.sizedebug{ background-color:#1DC3C0;}
}
@media(max-width: 480px) {
 .sizedebug:after{content : '480';}.sizedebug{ background-color:#C6F00A;}
}

/* 
bleu #FF3799
*/

/******************************************************************************************/
/*HEADER*/
/******************************************************************************************/
.main_header{ width:100%; padding:0 40px 0 40px; font-size:0px; background-color:rgba(255, 255, 255, 0.5); height:70px; line-height:70px; position:fixed; z-index:9999; box-sizing:border-box}

.logo{ display:inline-block;  height:40px; vertical-align:middle;}
.logo img{ display:inline-block; height:100%;}

.hlogo{ display:none;}

/*FULL SIZE MENU*/ 
.main_header .bar_menu{ display:inline-block; vertical-align:middle; line-height:70px; font-size:15px; margin:0 0 0 40px;}
.main_header .bar_menu a{ color:#333333; text-decoration:none; text-transform:uppercase; font-weight:200;}
.main_header .bar_menu a:hover{ color:#FF3799;} 
.main_header .bar_menu a:after{ font-family:Arial; font-size:16px; content: '•'; line-height:68px; vertical-align:bottom; padding-left: 5px; color:#FF3799;}
.main_header .bar_menu a:last-child:after{content:''; padding-left:0px;}
.main_header .bar_menu a.actif{ color:#FF3799;}

.main_header .bar_menu2{ display:inline-block; float:right;   vertical-align:middle; line-height:70px; font-size:15px; }
.main_header .bar_menu2 a{ color:#333333; text-decoration:none; text-transform:uppercase; font-weight:200;}
.main_header .bar_menu2 a:hover{ color:#FF3799;}
.main_header .bar_menu2 a.actif{ color:#FF3799;}

/*COMPACT MENU*/  
.compactMenu{display:none; vertical-align:middle; line-height:70px; font-size:16px; margin:0 0 0 40px; }
.compactMenu .section{ display:inline-block; position:relative; vertical-align: top;} 
.compactMenu .section .m{ position:absolute; display:inline-block;  text-decoration:none; color:#333333; line-height:70px; height:70px; padding:0 15px 0 15px; text-align:center; cursor:pointer; margin:0 0 0 0;  font-size:17px; border-right:1px solid #FFF; border-left:1px solid #FFF; background-color:#FFFFFF; z-index:9999;  font-weight:200; font-size:15px; text-transform:uppercase;}
.compactMenu .section .bOn {border-right:1px solid #D6D6D6; border-left:1px solid #D6D6D6; color:#FF3799;}
#nav li .sm {display:none; min-width:220px; width:auto; position:absolute; top:69px; left:0px; background-color:#FFF; border:1px solid #D6D6D6; padding:10px 0 10px 0; text-align:left; z-index:9998; }
#nav li .sm li{width:calc(100% - 30px); line-height:18px; padding:4px 15px 4px 15px; margin:0 0 0 0; height:auto; }
#nav li .sm li a { display:block; padding:0px 0 0px 0px; text-decoration:none; color:#333333; font-size:16px;}
#nav li .sm li a:hover { display:block; color:#FF3799;}

@media(max-width: 1260px) {
  .main_header .bar_menu{ margin:0 0 0 20px; font-size:14px;}
  /*masque Agence/Contact*/
	.main_header .bar_menu2{ display:none;}
}  
@media(max-width: 1040px) {
	/*masque menu normal*/
	.main_header .bar_menu{ display:none;}
	/**/
	.compactMenu{display:inline-block;}	
	.main_header .bar_menu2{ display:inline-block;}	
}
@media(max-width: 480px) {
	.main_header{ width:calc(100% - 20px); margin:0 10px 0 10px; font-size:0px; background-color:#FFFFFF; height:70px; line-height:70px; position:fixed; z-index:9999;}
}

/******************************************************************************************/
/*GLOBAL TRANSITIONS*/
/******************************************************************************************/
.social a,
.main_header a,
.infosBox .int2 span,
.infosBox .int1 span,
.infosBox .int1 .plus .btn,
.infosBox .backTop,
.navBox .buttons a,
.navBox .preview div,
.overtext,
#container .item .overtext .contain .btn,
.infContact .infos .text a{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
} 

/******************************************************************************************/
/*RUBRIQUE*/
/******************************************************************************************/
#container{ display:inline-block; position:relative; width:calc(100% - 60px);  margin:70px 20px 0 40px; z-index:0;}
#container:after { content: ''; display: block; clear: both;}
#container .item,#container .itemSizer{float:left; width:calc(25% - 20px); position:relative;  overflow:hidden; margin-bottom : 20px;}
.gutterSizer{width: 20px;}

#container .item.htitre{width:calc(50% - 20px); color:#FFFFFF; font-size:50px; font-weight:200; text-transform:uppercase; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); padding:0 10px 0 0; position:abolute; left:0px;} 
#container .item.htitre span{ color:#FF3799;}
 
#container .item img{float:left; width:100%;}
/**/
#container .item .overtext{position:absolute; z-index:3; top:0px; left:0px; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.5); cursor:pointer; opacity:0; display: flex; align-items: center; }

#container .item .overtext .contain{float:left; width:calc(100% - 30px); padding:10px 15px 15px 15px; text-align:center;}

#container .item .overtext .contain .titre{display:inline-block; color:#FFF; font-weight:200;}
#container .item .overtext .contain .titre:hover{}

#container .item .overtext .contain .btn{display:inline-block; color:#FFFFFF; font-family:icon; font-size:60px; cursor:pointer; margin:10px;}
#container .item .overtext .contain .btn:hover{ color:#FF3799;}


@media(max-width: 1260px) {
  #container .item,#container .itemSizer{ width:calc((100% / 3 ) - 20px);}
  #container .item.htitre{width:calc(((100% / 3 ) * 2 ) - 20px);} 
}
@media(max-width: 960px) {
  #container .item,#container .itemSizer{ width:calc(50% - 20px);}
  #container .item.htitre{width:calc(100% - 20px);}
}
@media(max-width: 600px) {
 #container .item,#container .itemSizer{ width:calc(100% - 20px);}
}
@media(max-width: 480px) {
#container .item,#container .itemSizer{ width:calc(100% - 10px);}
#container .item,#container .itemSizer{margin-bottom : 10px;}
#container{width:calc(100% - 10px);  margin:70px 0px 0 10px; z-index:0;}
}
/******************************************************************************************/
/*CONTACT ITEMS*/
/******************************************************************************************/
#container .item.ctitre{ color:#FFFFFF; font-size:50px; font-weight:200; text-transform:uppercase; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); padding:0 10px 0 0; position:abolute; left:0px; text-align:center;}
#container .item.ctitre span{ color:#FF3799;}

/**/
.equip{}
.equip .infos{position:absolute; display:inline-block; z-index:3; bottom:0px; left:0px; color:#FFFFFF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);  width:calc( 100% - 40px); padding:0 20px 20px 20px;}
.equip .infos .titre{font-size:14px; text-align:left;}
.equip .infos .text{ text-transform:uppercase; width:100%; text-align:left; font-size:14px;}

/**/

.infTexte{}  
.infTexte .infos{ background-color:#FF3799; padding:20px 20px 20px 20px;}
.infTexte .infos .titre{font-size:25px; text-transform:uppercase; color:#FFFFFF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}
.infTexte .infos .text{width:100%; text-align:justify; font-size:16px; color:#FFFFFF; line-height:24px;}

.infContact{}
.infContact .infos{ background-color:#FF3799; padding:20px 20px 20px 20px;}
.infContact .infos .titre{ text-transform:uppercase; color:#FFFFFF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}
.infContact .infos .text{width:100%; text-align:justify; font-size:16px; color:#FFFFFF; line-height:24px;}
.infContact .infos .text a{ text-decoration:underline; color:#FFFFFF;}
.infContact .infos .text a:hover{ color:#333333;}

 /******************************************************************************************/
/*HOME PAGE*/
/******************************************************************************************/
.cbp-bislideshow { 
	/*width: calc(100% - 80px);
	height: calc(100% - 80px); 
	z-index: -1;
	margin: 40px;*/
	
	width: 100%;
	height: 100%; 
	z-index: -1;
	margin: 0px;
} 
.mask{ display:inline-block; font-size:0px; position:fixed; z-index: 1; background-color: rgba(0, 0, 0, 0.5); width: calc(100% - 80px);
	height: calc(100% - 80px); margin: 40px;
	
	width: 100%;
	height: 100%;
	margin: 0px;
	}

/*MODIFIE LE MENU POUR L'ACCUEIL*/
.Hhome .hlogo{ display:inline-block; width:100%; text-align:center;}
.Hhome .hlogo img{ width:200px;}
.Hhome .logo { display:none;}  


.Hhome{display:inline-block; position:fixed; z-index:2; height:100%; width:100%; display: inline-flex; align-items: center; }
.Hhome .main_header{ text-align:center; background:none; display:inline-block; position:relative;}   
.Hhome .main_header .bar_menu2{ display:none;}
.Hhome .main_header .bar_menu{ margin:0 0 0 0; }
.Hhome .main_header .bar_menu a{ color:#FFFFFF;}
.Hhome .main_header .bar_menu a:hover{ color:#FF3799;}  
@media(max-width: 1260px) { 
}
@media(max-width: 1100px) { 
}
@media(max-width: 960px) {  
.Hhome .hlogo img{ width:260px; }
.Hhome .main_header .bar_menu{ display:inline-block; padding:0 20px 0 20px; line-height:30px;}
.Hhome .main_header .bar_menu a:after{line-height:30px; }
.Hhome .compactMenu{display:none;}
}
@media(max-width:500px) {  
.cbp-bislideshow,.mask { 
	width: calc(100% - 20px);
	height: calc(100% - 20px);  
	margin: 10px;
} 
}

 /******************************************************************************************/
/*SINGLE PAGE*/
/******************************************************************************************/
/*IMAGES*/
.imglist{ position:relative; z-index:1; display:inline-block; width:calc(100% - 80px); margin:40px 40px 0 40px; font-size:0px;}  
.imglist img{display:block; width:100%; margin-top:40px;}
.imglist img:first-child{ margin-top:32px;}

/*INFOBOX*/
.infosBox{position:fixed; width:calc(100% - 200px); top:100px; left:100px; z-index:2; text-align:left;} 
.infosBox .int1{}
.infosBox .int1 span{display:inline-block;  color:#FFFFFF; font-size:70px; font-weight:200; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}

.infosBox .int1 .plus{display:inline-block; position:relative; margin:0 0 0 10px; }
.infosBox .int1 .plus .btn{display:inline-block; color:#FFFFFF; font-family:icon; font-size:60px; cursor:pointer;text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}
.infosBox .int1 .plus .btn:hover{ color:#FF3799;}
.infosBox .int1 .plus .text{ position:absolute; top:100%; left:100%; background-color:#FFF; color:#333333; font-size:16px; line-height:20px; padding:20px; min-width:300px; display:none;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}  
.infosBox .int2{}
.infosBox .int2 span{display:inline-block;  width:100%;  color:#FFFFFF; font-size:160px;  line-height:0.8em; font-weight:200; text-transform:uppercase; word-break:break-strict;text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}

.infosBox .backTop{display:inline-block; color:#FFFFFF; font-family:icon; font-size:50px; cursor:pointer; opacity:0; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}
.infosBox .backTop:hover{color:#FF3799;}

/*resize on scroll*/
.infosBox.mini{}
.infosBox.mini .int1 span{font-size:50px;}
.infosBox.mini .int1 .plus .btn{font-size:50px;}
.infosBox.mini .int2 span{font-size:90px;}
.infosBox.mini .backTop{ opacity:1;}


@media(max-width: 1260px){ 
  .infosBox .int2 span{font-size:110px;}
}
@media(max-width: 960px){
  .infosBox .int2 span{font-size:90px;} 
}
@media(max-width: 480px){
  .imglist{width:calc(100% - 20px); margin:40px 10px 0 10px;}  
  .imglist img{margin-top:10px;}
  
  .infosBox{width:100%;}
  .infosBox .int1 span{font-size:40px;}
  .infosBox .int1 .plus .btn{font-size:40px; display:none;}
  
  .infosBox{width:calc(100% - 20px); top:100px; left:20px;} 
  .infosBox .int2 span{ margin-top:10px;font-size:70px; word-break:break-all;}  
  
  /*resize on scroll*/
	.infosBox.mini{}
	.infosBox.mini .int1 span{font-size:30px;}
	.infosBox.mini .int1 .plus .btn{font-size:30px;}
	.infosBox.mini .int2 span{font-size:55px;}
	.infosBox.mini .backTop{ opacity:1;}

}

/*NAV PREV NEXT*/
.navBox{position:fixed; top:104px; right:100px; z-index:9998; text-align:right;}
.navBox .buttons{ display:inline-block; margin-bottom:20px; font-size:0px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);}
.navBox .buttons .prev,.navBox .buttons .next{display:inline-block; color:#FFFFFF; text-align:center; width:60px; font-family:icon; font-size:70px; cursor:pointer; text-decoration:none;} 
.navBox .buttons .prev:hover,.navBox .buttons .next:hover{color:#FF3799;}
.navBox  .preview{ display:none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); font-size:0px;} 
.navBox  .preview div{display:inline-block; border:8px solid #FFFFFF;  width:160px;  height:160px; overflow:hidden; position:relative; background-color:#FFFFFF; z-index:98; font-size:0px; }
.navBox  .preview div:first-child{ border-right:0px;}
.navBox  .preview div img{display:block; font-size:0px;  width:200%;  position: absolute; top:-100%; left:-100%; right: -100%; bottom:-100%; margin:auto} 

.navBox  .preview .blackAndWhite{
	opacity:0.3;
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
} 

/*resize on scroll*/
.navBox.mini{}
.navBox.mini .buttons .prev,.navBox.mini .buttons .next{font-size:50px;}

@media(max-width: 960px){
	.navBox .buttons .prev,.navBox .buttons .next{font-size:60px;}
}
@media(max-width: 480px){
	.navBox{right:20px;}
	.navBox .buttons .prev,.navBox .buttons .next{font-size:40px;}
	.navBox.mini .buttons .prev,.navBox.mini .buttons .next{font-size:40px;}
	.navBox .buttons .prev,.navBox .buttons .next{width:40px;}
}
/******************************************************************************************/
/*FOOTER*/
/******************************************************************************************/
.main_footer{ display:inline-block; width:calc(100% - 80px); margin:40px 40px 40px 40px; text-align:left; font-size:0px; }
.main_footer .c1{ float:left; line-height:20px; font-size:14px;}
.main_footer .c1 .links a{ display:inline-block; color:#777777; font-size:14px; text-decoration:none;}
.main_footer .c1 .links a:hover{ text-decoration:underline;}
.main_footer .c1 .links a:after{content:" | "; display:inline-block; padding:0 0 0 3px; font-size:14px ; vertical-align:middle; }
.main_footer .c1 .links a:last-child:after{content:"";}
.main_footer .c1 .copy{  display:inline-block; width:100%; font-size:12px; color:#777777;}
.main_footer .c1 .copy a{ text-decoration:none; color:#777777;}
.main_footer .c1 .copy a:hover{ text-decoration:underline;}

.social{ float:right; }
.social a{display:inline-block; font-family:icon; font-size:20px; height:40px; width:40px; line-height:40px; margin:0px 10px 0px 0px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; border:1px solid #333333; text-align:center; color:#333333; text-decoration:none;}
.social a:hover{ background-color:#333333; color:#FFFFFF;}

/******************************************************************************************/
/*404*/
/******************************************************************************************/
.e404{ display:inline-block; margin:80px 40px 0 40px; width:calc(100% - 80px);}
.e404 h1{ text-transform:uppercase; color:#FFFFFF; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); font-size:100px;}
.e404 h2{ font-weight:100; font-size:16px;}