@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 }
/* CLASSES NATIVES HTML  ********************/
* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box;}

html { width: 100%; height: 100%; }
body { height: 100%; width: 100%; background: #00dbff;
	font-family: 'interstellarThin', helvetica, verdana; font-size: 1em; color: #5d5e60; line-height: 150%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-rendering: geometricPrecision;
}

h1, h2, h3 { text-align: center; font-family: 'interstellarThin', helvetica, verdana; font-weight: 200; -webkit-font-smoothing: antialiased; }
h1 { font-size: 8vw; font-weight: bold; margin: 0 0 2.5vw; padding: 38vh 0 0 2vw; line-height: 120%; color: white; font-family: comfort, helvetica, verdana; text-shadow: 0 0 #333; -webkit-font-smoothing: antialiased; text-align: left; white-space: nowrap }
h2 { font-size: 1.2em; margin: 0; text-align: center; padding-top: 2vw; line-height: 120%; text-transform: uppercase; color: black; font-family: interstellarThin, helvetica, verdana; }
	h2::before { position: absolute; content:""; margin: .6em 0 0 -5vw; height: 1px; width: 4vw; min-width: 2px; background: #6d6e70; }
	h2::after { position: absolute; content:""; margin: .6em 0 0 1vw; height: 1px; width: 4vw; min-width: 2px; background: #6d6e70; }
h3 { font-family: 'comfort', helvetica, verdana; font-weight: normal; font-size: 3.2vw; padding: 1vw 0 2vw; text-align: left; line-height: 120%; -webkit-font-smoothing: antialiased; }


/* GRANDES ZONES ****************************/
.mainwrap, article { display: block; width: 100vw; height: 100%; position: absolute;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
/*.mainwrap { height: 100%; width: 100%; overflow-y: auto; position: fixed; top: 0; bottom: 0;
	-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; background-image: url(i/back1.jpg) }
article.domaine { background-color: white; }
article.realisation { background-color: white;  }
article.contact { background-color: white; }
article.foot { background-color: black; }

section { position: static; }


/* Accueil */
article.accueil { color: white; background-size: auto 150% }
.accueil section { position: absolute; bottom: 0; width: 100%; transform-origin: right bottom }
.accueil h1.depart { transform: translateY(40vh); -webkit-transform: translateY(40vh); }
.accueil h2 { font-family: 'interstellarThin', helvetica, verdana; font-size: 3vw; text-transform: none; font-weight: 50; padding: 3vw 0 3vw 2vw; margin: 0; text-shadow: 0 0 #333; background: white; text-align: left }
.accueil h2::before, .accueil h2::after { display:none }
.accueil img { position: absolute; bottom: -1vh; right: 0; width: 57vh }
.fleche { display: block; float: right; background-image: url(i/fleche.png); background-size: cover; max-width: 60px; width: 6vw; max-height: 60px; height: 6vw; margin: -1vh 5vw 0 0;
	filter: invert(30%); -webkit-filter: invert(30%); -moz-filter: invert(30%); }
	.fleche:hover { filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); }
.fleche.move { margin-top: -1.5vh }

/* Domaines ACTIVITES */
article.domaine { background-image: url(i/back2.png); height: 400%; background-size: auto 100%; background-position: bottom right; border-top: 70px solid white; margin-top: -5px }
.domaine h2 { padding: 0 0 0 10vw; height: 20vh; margin: 0; position:absolute; z-index: 1; }
.domaine h3 { padding-top: 5vh; text-align: center }
.domaine section { position: absolute; width: 50%; height: 100vh; padding: 2vh 4vw; top: 0; background: white; border-right: 1px solid lightgray; position: -webkit-sticky; position: sticky } 
.domaine div { position: relative; height: 80vh; width: 100%; }
.domaine p { text-align: justify; max-width: 25vw; display: block; margin: auto }
.domaine b { display: block; font-size: 20vw; width: 100%; position: absolute; color: #efeff2; z-index: -1; 
	text-align: center; margin-top: 15vh }
.domaine img { width: 15vw; max-width: 150px; display: block; position: absolute; bottom: 0; left: 1vw }

.domaine aside { position: absolute; left: 43vw; bottom: 0; width: 50vw; text-align: left; z-index: 10 }
.domaine aside figure { width: 15vw; height: 15vw; padding: 10px; position: relative; display: block; float: right; text-align: center; }
.domaine aside figure img { width: CALC(100% - 20px); height: 8vw; max-width: 15vw; margin-bottom: 10px }
.domaine aside figure figcaption { width: 100%; display: block; text-align: center; line-height: 120% }

.domaine ul { list-style: none; display: block; position: sticky; margin: 30vh 0 -45vh 45.5vw; }
.domaine li { display: block; width: 18vw; height: 3vw; margin: 0 0 2vw; padding: 0 3vw; white-space: nowrap; color: white; font-family: comfort, helvetica, verdana; font-size: 1.5vw; line-height: 3.2vw; background: rgba(0,0,0,.7);
	border-radius: 2vw; -webkit-border-radius: 2vw }
.domaine li::before { position: absolute; background: white; width: 3vw; height: 3vw; content:""; margin: 0 0 0 -4vw;
	border-radius: 50%; -webkit-border-radius: 50%; 
	-webkit-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); transition: all 1s cubic-bezier(.42,-0.01,.2,.92); }
.domaine li.actif::before { background: #00dbff }


/* realisation */
article.realisation { background: white; z-index: +10; height: auto; overflow: hidden }
.realisation section {  padding-bottom: 18vh; background: white; overflow: hidden }
.realisation .spacer { position: relative; height: 20vh }
.realisation h2 { color: inherit; padding: 9vh 0 0 10vw; height: 20vh; margin: 0; position:absolute; z-index: 1;
	-webkit-font-smoothing: antialiased; }
.realisation h3 { position: relative; padding: 1vh 3vw 0; margin-top: 29vh; width: 90%; font-size: 3vw }
.realisation .ligne { margin-top: 3vw; padding: 0 3vw;
	display: flexbox; display: flex; display: -webkit-flex; display: -ms-flex; 
	-webkit-box-orient: horizontal;
	  -webkit-flex-direction: row;
		  -ms-flex-direction: row;
			  flex-direction: row;
			  flex-flow: row;
			  align-items: flex-end; justify-content: space-between;
 }
.realisation .rea { position: relative; height: 45vh; min-width: 0px; width: 48.5%; max-width: 700px; padding: 10px 0;
	background-size: cover; background-position: center center; background-attachment: scroll; color: white; }
.realisation .rea .masque { background: crimson; position: absolute; bottom: 0; width: 100%; height: 34% }

.realisation .rea a { color: white; background: blue; padding: 2px 20px 2px 5px; text-decoration: none }
.realisation .rea p { position: relative; overflow: hidden; padding: 0 3vw 0; width: 90%; min-height: 10vh; bottom: 0 }
.realisation .particule { position: absolute; width: 100%; height: 100%; top:0; left:0; background: url(i/particule.png); z-index: 0; opacity: 0.2 }
.realisation .rea::before { content: ""; position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; background-color: rgba(0,0,0,1);
	-webkit-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); transition: all 1s cubic-bezier(.42,-0.01,.2,.92); }
.realisation .rea.lumineux { opacity: 0.8 }
.realisation .closeRea { display: block; width: 6vw; height: 0vw; position: absolute; top: 1vw; left: 5vw; border-radius: 50%; -webkit-border-radius: 50% } 

.realisation .ligne.actif { padding: 0 }
.realisation .ligne.actif .rea { width: 0; max-width: 100%; border: none }
.realisation .ligne.actif .rea.actif { height: 100vh; width: 100% }
.realisation .rea.actif .masque { opacity: 0; height: 0 }
.realisation .rea.actif .particule { opacity: 0.5 }
.realisation .rea.actif h3 { margin-top: 16vh; padding: 3vh 0 0 3vw; background-color: crimson; width: 40vw }
.realisation .rea.actif::before { width: 40vw; opacity: 1; background-color: rgba(255,255,255,.3); }
.realisation .rea.backBlur::before { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.realisation .rea.actif p { background-color: crimson; padding: 2vh 3vw; width: 40vw }
.realisation .rea.actif p:last-of-type { margin-top: 0; height: auto }
.realisation .rea.actif .closeRea { height: 6vw; top: 2vw; left: 3vw; 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 .closeRea::after { content:'FERMER'; width: 9vw; height: 6vw; background: rgba(0,0,0,.4); position: absolute; left: 3vw; top: 0; z-index: 0;
	text-align: right; padding-right: 2vw; font-size: 1.5vw; color: white; line-height: 6vw;
	border-top-right-radius: 3vw; border-bottom-right-radius: 3vw; -webkit-border-top-right-radius: 3vw; -webkit-border-bottom-right-radius: 3vw; }

.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; width: 100%; background: rgba(255,255,255,.3); text-align: center; opacity: 0; padding: 2vh 0 2vh; display: none; opacity: 0 }
.realisation .rea.actif .wrap_vign { width: 40vw; display: block; opacity: 1 } 
.realisation .rea .vignette { width: 11vw; height: 6vw; display: inline-block; margin: 2px; background-color: black; background-size: cover; background-position: center center }


/* contact */
article.contact { background-image: url(i/back3.jpg); background-position: center center; background-size: 140% 140%; background-color: #b3dfc7; }
article.contact .arbre { display: block; height: 100%; width: 100%; position: absolute; right: 0; bottom: -8vh; z-index: 0; background-image: url(i/arbre.png); background-size: contain; background-repeat: no-repeat; background-position: right center; background-color: transparent }
.contact h2 { position: absolute; margin: 5vh 0 0 10vw; z-index: 1 }
.contact section {  }
.contact section > div { width: 500px; margin: 20vh 0 0 5vw; z-index: 2; position: absolute; background: rgba(0, 219, 255, .9) }
.ct_nom, .ct_mail { width: 100%; padding: .5vw; margin-bottom: 2vh; text-align: left; font-size: 1.6vw; border: 0; -webkit-appearance: none; color: black; background-color: transparent; font-size: inherit; font-family: inherit; 
}
.ct_submit { width: 100%; padding: .5vw; background: rgba(255,255,255,.8); color: black; border: none; font-size: 1.6vw; -webkit-appearance: none; font-size: inherit; font-family: inherit; 
}
.ct_texte { width: 100%; height: 35vh; color: black; margin: 0; padding: .5vw; overflow: auto; font-size: inherit; font-family: inherit; background: transparent; border: 0 }
::-webkit-input-placeholder { color:#fff; }
::-moz-placeholder { color:#fff; } /* firefox 19+ */
:-ms-input-placeholder { color:#fff; } /* ie */
input:-moz-placeholder { color:#fff; }

/* foot */
article.foot { height: 65vh; background-color: #fff; overflow: hidden; margin-top: -1vh }
.foot section { background-color: LightGray; padding-top: 5vh; text-align: left; line-height: 150%; height: 33.5vh }
.foot .footer { padding: 0px 2.5% 0 72vw; text-align: right }

.wrap_module { height: 40vh; width: 100% }
.module { font-family: comfort; position: relative; display: inline-block; width: CALC(20% - 2px); height: 27vh; margin: 10px 2.5%; 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; background: crimson;
 		backface-visibility: hidden; -webkit-backface-visibility: hidden;
		line-height: 27vh;
}
.module .back { position: absolute; width: 100%; height: 100%; padding: 10px; z-index: 1;
		line-height: 160px; font-family: 'interstellarThin', helvetica, verdana;
		transform: rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; 
		background: #00dbff;
}
.module .front span { vertical-align: middle; display: inline-block; border: 3px solid; padding: 8px 10px 0;
		border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
		line-height: 100%; color: white; font-weight: bold; font-size: 2.5vw; text-transform: uppercase } 
.module .back span { vertical-align: middle; display: inline-block; line-height: 120%; }
.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(255,255,255, 1); z-index: 100; top: 0 }
.menu a { display: block; width: 100%; height: 100%; position: relative; color: black; text-decoration: none; }
.menu li { display: inline-block; position: relative; padding: 1.5vh 1vw 1.5vh; }
	.menu li div { position: absolute; bottom: 0; left: 0; width: 0; height: .5vw; z-index: 0 }
/* Menu fixe */
.menuFixed { position: fixed; }
.menuFixed li {  }
/* 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; width: 200px; height: 4px; background: lightgray; left: CALC(50% - 100px); opacity: 0; white-space: nowrap; line-height: 0; transform-origin: center center; text-align: center }
.loading div { display: inline-block; position: relative; background: aqua; height: 3px; margin-bottom: 2px; width: 0px; box-shadow: cyan 1px 1px 20px 2px; -webkit-box-shadow: cyan 1px 1px 20px 2px; }

/* Pixels */
.foot .pixel_wrap { position: absolute; top: 0; left: 0; width: 50%; height: 40vh; overflow: visible }
.pixel { position: absolute; opacity: .9; }

/* Ronds */
.wrap_rond { position: absolute; width: 100%; height: 100%; overflow: hidden;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
.rond { border-radius: 50%;  -webkit-border-radius: 50%; -moz-border-radius: 50%;
		position: absolute; opacity: 0.3; top: 50vh; left: 0; background: black;
		border: 5px solid; }

/* 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: 6vw; max-width: 60px; height: 6vw; 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 }
.blur {
	filter: blur(40px) brightness(2); -webkit-filter: blur(40px) brightness(2); -moz-filter: blur(40px) brightness(2); -ms-filter: blur(40px) brightness(2);
}
.shadow { -webkit-box-shadow: 0 0 40px rgba(0,0,0,.4); -moz-box-shadow: 0 0 40px rgba(0,0,0,.4); box-shadow: 0 0 40px rgba(0,0,0,.4); transition: none; -webkit-transition: none; -moz-transition: none }


/* TRANSITIONS */
.animlent2 { -webkit-transition: all 2s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all 2s cubic-bezier(.42,-0.01,.2,.92); transition: all 2s cubic-bezier(.42,-0.01,.2,.92); }
.animlent20 { -webkit-transition: background-size 20s ease-in-out; -moz-transition: background-size 20s ease-in-out; transition: background-size 20s ease-in-out; }
.animlent { -webkit-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all 1s cubic-bezier(.42,-0.01,.2,.92); transition: all 1s cubic-bezier(.42,-0.01,.2,.92); }
.animlent01 { -webkit-transition: all .1s; -moz-transition: all .1s; transition: all .1s; }
.animlent02 { -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; }
.animlent05 { -webkit-transition: all .5s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all .5s cubic-bezier(.42,-0.01,.2,.92); transition: all .5s cubic-bezier(.42,-0.01,.2,.92); }
.animlent2 { -webkit-transition: all 2s cubic-bezier(.42,-0.01,.2,.92); -moz-transition: all 2s cubic-bezier(.42,-0.01,.2,.92); transition: all 2s cubic-bezier(.42,-0.01,.2,.92); }
.noanim { -webkit-transition: none; -moz-transition: none; transition: none }

/* ANIMATIONS */
.glisseHaut { margin-top: -10vh; transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); opacity: 0 }
.glisseMenu { margin-top: -10vh; opacity: 0 }
.glisseBas { transform: translateY(40vh); -webkit-transform: translateY(40vh); -ms-transform: translateY(40vh); opacity: 0.4 }
.glisseZoom { transform: scale(.3); -webkit-transform: scale(.3); -moz-transform: scale(.3); opacity: 0 }
div.invisibleText { height: 0; transform: scale(.5); -webkit-transform: scale(.5); -moz-transform: scale(.5); opacity: 0 }
div.invisibleText b { transform: translateY(20vh); -webkit-transform: translateY(20vh); -ms-transform: translateY(20vh) }
.rea p.invisibleText { transform: translateY(40vh); -webkit-transform: translateY(40vh); -ms-transform: translateY(40vh); opacity: 0; padding-top: 0; padding-bottom: 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); }
.vignPuff {  transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); opacity: 0 }

.GPU {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

/* 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 }
}





/* petite largeur */
@media (max-width: 640px) {
  	body { font-size: 1em; line-height: 140%; color: #4d4e50 }
  	.menu { font-size: 1em }
  	h2 { font-size: 1em }
  	h3 { font-size: 2em }
  	.domaine section { width: 70%; } 
  	.domaine div h3 { padding-top: 15vh }
  	.domaine p { text-align: justify; max-width: 40vw; }
	.domaine ul { margin-left: 65.5vw; }
  	.competence section { padding-top: 10vh; height: 80vh }
  	.competence .back { line-height: 120% }
  	.realisation .ligne { display: block; margin: 0 }
  	.realisation .rea { width: 100%; margin-top: 40px; max-width: 100% }
	.realisation .rea p, .realisation .rea.actif p { width: 60vw }
	.realisation .rea.actif::before, .rea::before { width: 60vw }
	.realisation .rea.actif p, .realisation .rea.actif h3, .realisation .rea.actif .wrap_vign { width: 60vw }
	.realisation .rea.actif .closeRea { top: 5vw; left: 5vw; }
	.contact { margin-top: -5px }
	.contact .arbre { background-position: right bottom; bottom: 0 }
	.contact section > div { width: 70%; }
	.foot .footer { padding: 0px 2.5% 0 73vw; text-align: right }
	.module { font-size: .9em; width: CALC(25% - 2px); height: 27vh; margin: 10px 1px;  }
}



/* Portrait iPad */
@media (max-device-width: 1024px)
  and (orientation: portrait) {
  	body { font-size: 1.1em; line-height: 140%; color: #4d4e50 }
  	.menu { font-size: 1em }
  	h1 { font-size: 4.5em }
  	h2 { font-size: 1em }
  	h3 { font-size: 2em }
  	.accueil h2 { font-size: 2.2em }
  	.domaine section { width: 60%; } 
  	.domaine div h3 { padding-top: 15vh }
  	.domaine p { text-align: justify; max-width: 40vw; }
	.domaine ul { margin-left: 55.5vw; }
  	.competence section { padding-top: 10vh; height: 80vh }
  	.competence .back { line-height: 120% }
  	.realisation .ligne { display: block; margin: 0 }
  	.realisation .rea { background-attachment: scroll; width: 100%; margin-top: 40px; max-width: 100% }
	.realisation .rea.actif p, .realisation .rea.actif h3, .realisation .rea.actif .wrap_vign { width: 50vw }
	.realisation .rea.actif::before { width: 50vw }
	.realisation .rea.actif .closeRea { top: 5vw; left: 5vw; }
	.contact { margin-top: -5px }
	article.contact .arbre { background-position: right bottom; bottom: 0 }
	.contact section > div { width: 70%; }
	.foot .footer { padding: 0px 2.5% 0 73vw; text-align: right }
	
}

/* Paysage iPad */
@media (max-device-width: 1024px)
  and (orientation: landscape) {
  	body { font-size: 1.6vw; line-height: 140%; color: #4d4e50 }
  	.menu { font-size: 1.2em }
  	.realisation .rea { background-attachment: scroll }
  	.contact h2 { margin: 70vh 0 0 5vw; }
	article.contact .arbre { background-position: right bottom; bottom: 0 }
}