@font-face { font-family:comfort; src:url(inc/Comfortaa-Light.ttf); }
@font-face { font-family:'interstellar'; src:url(inc/InterstelR.ttf); }
@font-face { font-family:'interstellarThin'; src:url(inc/InterstelRThin.ttf); }

::-WebKit-scrollbar { -WebKit-appearance: auto; width: 0; height: 8px; }
::-webkit-scrollbar-track-piece { background-color: rgba(200,200,200, .6);}
::-WebKit-scrollbar-thumb { background-color: rgba(0, 204, 221,.5); }

.db { position: fixed; top:0; z-index: 1000 }
/* CLASSES NATIVES HTML  ********************/
* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box;}
   
html, body { height: 100%; width: 100%; background: black;
	font-family: 'interstellarThin', helvetica, verdana; font-size: .8em; color: #5d5e60; line-height: 150%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-rendering: optimizeLegibility;
	image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic;
}

h1, h2, h3 { text-align: center; font-family: 'interstellarThin', helvetica, verdana; font-weight: 200 }
h1 { font-size: 3em; margin: 0 0 2.5%; padding-top: 10%; line-height: 120%; color: white; font-family: comfort, helvetica, verdana; text-shadow: -.1% .1% #333; }
h2 { font-size: 1.5em; margin: 0; text-align: left; padding-top: 2%; line-height: 120%; text-transform: uppercase; color: black; font-family: interstellar, helvetica, verdana; }
	h2::after { position: absolute; content:" "; margin: 0.8% 0 0 1%; height: .1%; width: 5%; min-width: 2px; background: #6d6e70; }
h3 { font-family: 'comfort', helvetica, verdana; font-size: 2em; padding: 1% 0 2%; text-align: left; line-height: 120% }


/* GRANDES ZONES ****************************/
.mainwrap, article { display: block; width: 100%; height: 125%; position: absolute; -webkit-overflow-scrolling: touch;  }

/* Sections */
article { background-size: cover; background-position: center bottom; background-repeat: no-repeat; display: inline-block; position: relative; }
article.accueil { background-color: white;}
article.domaine { background-color: white; }
article.realisation { background-color: white;  }
article.contact { background-color: white; }
article.foot { background-color: black; }

section { position: relative; }


/* Accueil */
article.accueil { background: lightgray; color: white; }
.accueil section { position: absolute; bottom: 0; width: 100% }
.accueil h2 { font-family: 'interstellarThin', helvetica, verdana; text-align: center; font-size: 2em; text-transform: none; font-weight: 100; padding: 0; margin: 0; text-shadow: -.1% .1% #333; background: white }
.accueil h2::before, .accueil h2::after { display:none }
.accueil img { width: 60%; position: absolute; bottom: 0; right: 0 }

/* Domaines ACTIVITES */
article.domaine { height: auto; position: relative }
.domaine h2 { position: absolute;}
.domaine h3 { padding-top: 10%; text-align: center }
.domaine section { width: 100%; height: 100%; padding: 2% 2vw; top: 0; background: white; position: -webkit-sticky; position: sticky } 
.domaine div { position: relative; overflow: hidden; }
.domaine p { text-align: justify; max-width: 80%; display: block; margin: auto }
.domaine b { display: block; font-size: 200px; width: 100%; position: absolute; color: #efeff2; z-index: -1;
	text-align: center; margin-top: 80px; font-weight: normal }
.domaine img { width: 30%; display: block; position: relative; margin-top: 10px }
.domaine ul { display: none }

/* realisation */
article.realisation { background: white; z-index: +10; height: auto; padding-top: 60px; }
.realisation .spacer { position: relative; height: 20% }
.realisation h2 { padding: 0; margin: -30px 0 0; position:absolute; z-index: 1 }
.realisation h3 { position: relative; font-weight: bold; padding: 140px 5px 0; margin: 0 }
.realisation section { background: white; }
.realisation .rea { position: relative; width: 100%; height: 220px; background-size: cover; background-position: center center; margin: 40px auto 0; color: white; text-shadow: -1px 1px #333; overflow: hidden }
.realisation .rea .masque { background: crimson; position: absolute; bottom: 0; width: 100%; height: 40% }

.realisation .rea a { color: white }
.realisation .rea p { position: relative; overflow: hidden; height: auto; padding: 5px; width: 100%; }
.realisation .particule { position: absolute; width: 100%; height: 100%; top:0; left:0; background: url(i/particule.png); z-index: -1 }
.realisation .rea::before { content: ""; position: absolute; left: 0; top: 0; z-index: 0; display: block; background-image: url('i/masque.png'); width: 100%; height: 100%; }
.realisation .closeRea { display: block; width: 40px; height: 0; position: absolute; top: 10px; right: 10px; border-radius: 50%; -webkit-border-radius: 50%; z-index: 10 } 

.realisation .rea.actif { height: 100%; }
.realisation .rea.actif .masque { display: none }
.realisation .rea.actif p { background-color: rgba(0,0,0,.6) }
.realisation .rea.actif h3 { margin-top: 20px; padding: 5px }
.realisation .rea.actif .closeRea { height: 36px; background-color: #000;
	background-image: url(i/retour.png); background-size: 70%; background-position: center 60%; background-repeat: no-repeat; cursor: pointer; }
.realisation .rea.actif p:last-of-type { margin-top: 0 }
.realisation .rea.actif .closeRea { height: 40px; }

.realisation .ac { background-image: url(i/rea/ac/ac.jpg) }
.realisation .af { background-image: url(i/rea/af/af.jpg) }
.realisation .crea { background-image: url(i/rea/crea/crea.jpg) }
.realisation .hobo { background-image: url(i/rea/hobo/hobo.jpg) }
.realisation .dword { background-image: url(i/rea/dword/dword2.jpg) }
.realisation .dboard { background-image: url(i/rea/dboard/dboard.png) }

.realisation .rea .wrap_vign { position: relative; z-index: 1; padding: 5px 0 5px; width: 100%; background: rgba(255,255,255,.3); text-align: center; display: none; }
.realisation .rea.actif .wrap_vign { width: 100%; display: block; } 
.realisation .rea .vignette { width: 11vw; height: 6vw; display: inline-block; margin: 2px; background-size: cover; background-position: center center }

/* contact */
article.contact { background-image: url(i/back3.jpg); background-position: center center; background-size: cover; min-height: 100%; height: auto }
article.contact img.arbre { display: none }
.contact h2 { position: absolute; color: white; top: 40px; text-transform: none; text-shadow: 1px 1px #333; z-index: 1 }
	.contact h2::before, .contact h2::after { width: 0 }
.contact section > div { margin: 70px 0 30px; z-index: 2; position: relative; background: rgba(255,255,255,.8) }
.ct_nom, .ct_mail { width: 100%; padding: 5px; margin-bottom: 5px; text-align: left; font-size: 1.6em; border: 0; -webkit-appearance: none; color: black; background: transparent; font-size: 1.2em; font-family: inherit; }
.ct_submit { padding: 5px; width: 100%; color: black; border: none; font-size: 1.6em; -webkit-appearance: none; font-size: 1.2em; font-family: inherit; }
.ct_texte { width: 100%; height: 150px; color: black; margin: 0; padding: 5px; border: 0; background: transparent; overflow: auto; font-size: 1.2em; font-family: inherit; }
::-webkit-input-placeholder { color:#777; }
::-moz-placeholder { color:#777; } /* firefox 19+ */
:-ms-input-placeholder { color:#777; } /* ie */
input:-moz-placeholder { color:#777; }

/* foot */
article.foot { height: 65%; background-color: #000; overflow: hidden }
.foot section { background-color: LightGray; padding-top: 5px; text-align: left; line-height: 150%; height: 40% }
.foot .footer { padding: 40px 10px 0; text-align: right }

.wrap_module { height: 90%; width: 100% }
.module { font-family: comfort; position: relative; display: inline-block; width: 25%; height: 40px; margin: 10px 0; border: 1px solid transparent; color: #000; text-align: center; opacity: 0.8; overflow: hidden; }
.module .wrap { position: relative; width: 100%; height: 100% }
.module .front { position: absolute; width: 100%; height: 100%; z-index: 2;}
.module .back { display: none }
.module .front span { vertical-align: middle; display: inline-block; border: 2px solid; padding: 2px 5px;
		border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px;
		line-height: 140%; color: #888; background: transparent; font-weight: bold; font-size: .9em } 
.module .back span { vertical-align: middle; display: inline-block; line-height: 140%; color: white }
.module img { margin: 20% auto; height: 60%; width: 60% }

.module:hover { opacity: 1; }
.module:hover .front { transform: rotateX(180deg) }
.module:hover .back { transform: rotateX(0deg) }


/* MENU **************************************/
.menu { display: block; width: 100%; list-style: none; position: absolute; text-align: right; background: rgba(0,0,0,.6); z-index: 100; top: 0 }
.menu a { display: block; width: 100%; height: 100%; position: relative; color: white; text-decoration: none; }
.menu li { display: inline-block; position: relative; padding: 8px 5px; }
	.menu li div { position: absolute; bottom: 0; left: 0; width: 0; height: .5%; z-index: 0 }
/* Menu fixe */
.menuFixed { position: fixed; }
/* Menu hover */
.menu li:hover div, .menu li.actif div { background: #00dbff; height: .4vw; width: 100% }
.menu li:hover a { color: #00dbff }



/* LOADING */
.loading { position: absolute; height: 0.2%; left: 50%; opacity: 0; white-space: nowrap; background-size: cover; background-position: center; 
	transform-origin: left center }
.loading div { display: inline-block; background: white; width: 1%; height: 0.2%; }

/* Pixels */
.foot .pixel_wrap { position: absolute; bottom: 0; left: 0; width: 50%; height: 60%; overflow-x: hidden; overflow-y: show }
.pixel { position: absolute; opacity: .9; text-align: center; color: white }

/* Ronds */
.wrap_rond { position: absolute; width: 100%; height: 100%; }
.rond { border-radius: 50%;  -webkit-border-radius: 50%; -moz-border-radius: 50%;
		position: absolute; opacity: 0.3; top: 200px; left: 0; background: black;
		border: 5px solid;
		box-shadow: 0 0 1px; }
.rond:hover { opacity: 1 }

/* voile */
.voile { opacity: 0; position: absolute; z-index: 199; top:0; left:0; width:100%; height: 100%; border: 10px solid white;
	border-radius: 10px; -webkit-border-radius: 10px;
	background-size: cover; background-repeat: no-repeat; background-position: center center; image-rendering: optimizeQuality; -ms-interpolation-mode: nearest-neighbor; cursor: pointer }
.voile .close { position: absolute; width: 7vw; max-width: 60px; height: 7vw; max-height: 60px; right: -3vw; top: -3vw; background-color: #000; 
	border-radius: 50%; -webkit-border-radius: 50%;
	background-image: url(i/close.png); background-size: 50%; background-position: center center; background-repeat: no-repeat; cursor: pointer; 
}
.voile .close:hover { background-size: 30%; background-image: url(i/close2.png) }
.voile .next { position: absolute; width: 12vw; height: 12vw; background-color: #000; left: CALC(50% - 6vw); top: CALC(50% - 6vw);
	border-radius: 10%; -webkit-border-radius: 10%; opacity: 0.7;
	background-image: url(i/next.png); background-size: 70%; background-position: center center; background-repeat: no-repeat;
}
.voile .next.nextMove { background-size: 5%; opacity: 0 }

/* TRANSITIONS */
.animlent { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
/*
.animlent01 { -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s; }
.animlent02 { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.animlent05 { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
*/
.animlent2 { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; transition: all 2s ease-in-out; }
.animlent20 { -webkit-transition: background-size 20s ease-in-out; -moz-transition: background-size 20s ease-in-out; transition: background-size 20s ease-in-out; }
.noanim { -webkit-transition: none; -moz-transition: none; transition: none }

/* ANIMATIONS */
.glisseHaut { margin-top: -100%; transform: scale(.3); -webkit-transform: scale(.3); -moz-transform: scale(.3) }
.glisseZoom { transform: scale(.3); -webkit-transform: scale(.3); -moz-transform: scale(.3); opacity: 0 }
div.invisibleText { height: 0; opacity: 0 }
.rea p.invisibleText { height: 0; margin-top: 30%; opacity: 0 }
.invisible { opacity: 0; display: none }
.rotate360 { transform: rotate(360deg); -webkit-transform: rotate(360deg); } 
.petitZoom { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }


/* Ken Burns */
.kenburnsLT {
    -webkit-animation-delay: 0s, 10s, 20s, 30s, 40s;
    -webkit-animation-duration: 10s, 10s, 10s, 10s, 10s;
    -webkit-animation-name: kenburnsLT, kenburnsRB, kenburnsLB, kenburnsRC, kenburnsCC;
    -moz-animation-delay: 0s, 10s, 20s, 30s, 40s;
    -moz-animation-duration: 10s, 10s, 10s, 10s, 10s;
    -moz-animation-name: kenburnsLT, kenburnsRB, kenburnsLB, kenburnsRC, kenburnsCC;
    -o-animation-delay: 0s, 10s, 20s, 30s, 40s;
    -o-animation-duration: 10s, 10s, 10s, 10s, 10s;
    -o-animation-name: kenburnsLT, kenburnsRB, kenburnsLB, kenburnsRC, kenburnsCC;
    animation-delay: 0s, 10s, 20s, 30s, 40s;
    animation-duration: 10s, 10s, 10s, 10s, 10s;
    animation-name: kenburnsLT, kenburnsRB, kenburnsLB, kenburnsRC, kenburnsCC;
} 
@keyframes kenburnsLT {
	from { background-size: 100%; background-position: 0 -50px }
    to { background-size: 130%; background-position: 0 0 }
}
@-webkit-keyframes kenburnsLT {
	from { background-size: 100%; background-position: 0 -50px }
    to { background-size: 130%; background-position: 0 0 }
}
@-moz-keyframes kenburnsLT {
	from { background-size: 100%; background-position: 0 -50px }
    to { background-size: 130%; background-position: 0 0 }
}
@-o-keyframes kenburnsLT {
	from { background-size: 100%; background-position: 0 -50px }
    to { background-size: 130%; background-position: 0 0 }
}

@-webkit-keyframes kenburnsRB {
	from { background-size: 130%; background-position: 0 0 }
    to { background-size: 160%; background-position: right bottom }
}
@-moz-keyframes kenburnsRB {
	from { background-size: 130%; background-position: 0 0 }
    to { background-size: 160%; background-position: right bottom }
}
@-o-keyframes kenburnsRB {
	from { background-size: 130%; background-position: 0 0 }
    to { background-size: 160%; background-position: right bottom }
}
@keyframes kenburnsRB {
	from { background-size: 130%; background-position: 0 0 }
    to { background-size: 160%; background-position: right bottom }
}

@-webkit-keyframes kenburnsLB {
	from { background-size: 160%; background-position: right bottom }
    to { background-size: 130%; background-position: left bottom }
}
@-moz-keyframes kenburnsLB {
	from { background-size: 160%; background-position: right bottom }
    to { background-size: 130%; background-position: left bottom }
}
@-o-keyframes kenburnsLB {
	from { background-size: 160%; background-position: right bottom }
    to { background-size: 130%; background-position: left bottom }
}
@keyframes kenburnsLB {
	from { background-size: 160%; background-position: right bottom }
    to { background-size: 130%; background-position: left bottom }
}

@-webkit-keyframes kenburnsRC {
	from { background-size: 130%; background-position: left bottom }
    to { background-size: 160%; background-position: right -50px }
}
@-moz-keyframes kenburnsRC {
	from { background-size: 130%; background-position: left bottom }
    to { background-size: 160%; background-position: right -50px }
}
@-o-keyframes kenburnsRC {
	from { background-size: 130%; background-position: left bottom }
    to { background-size: 160%; background-position: right -50px }
}
@keyframes kenburnsRC {
	from { background-size: 130%; background-position: left bottom }
    to { background-size: 160%; background-position: right -50px }
}

@-webkit-keyframes kenburnsCC {
	from { background-size: 160%; background-position: right -50px }
    to { background-size: 100%; background-position: center -50px }
}
@-moz-keyframes kenburnsCC {
	from { background-size: 160%; background-position: right -50px }
    to { background-size: 100%; background-position: center -50px }
}
@-o-keyframes kenburnsCC {
	from { background-size: 160%; background-position: right -50px }
    to { background-size: 100%; background-position: center -50px }
}
@keyframes kenburnsCC {
	from { background-size: 160%; background-position: right -50px }
	to { background-size: 100%; background-position: 0 -50px }
}






/* Portrait iPad iphone */
@media (max-device-width: 1024px)
  and (orientation: portrait) {
  	body { font-size: 1em; line-height: 140% }
  	article.accueil { height: CALC(100% - 80px); background-attachment: scroll }
  	.domaine div h3 { margin-top: 20% }
	.realisation .rea.actif { height: 150%; }
}

/* Paysage iPad iphone */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation: landscape) {
  	.accueil { height: CALC(80%); background-attachment: scroll }
  	body { line-height: 140% }
  	.accueil .img { width: 20% }
  	.realisation .rea { background-attachment: scroll }
}