@charset "utf-8";
/* CSS Document */
html {font-size: 100%;}
body {margin:0; padding:0; color:#ffffff; font-family:'Open Sans', Arial, Verdana, sans-serif; background:#ffffff; position: relative;}
p, h1, h2, h3, h4, table, tr, td, img, ul, li {margin:0; padding:0; border:none; font-weight:normal;}

/* TRANSITIONS CHANGEMENT DE PAGE */
body:after, body:before {content: ''; height: 50vh; width: 100vw; position: fixed; background-color: #242843; z-index: 200; box-sizing: border-box; transition: all 0.6s ease 0.3s; -webkit-transition: all 0.6s ease 0.3s; -moz-transition: all 0.6s ease 0.3s; -o-transition: all 0.6s ease 0.3s;}
body:before {top: 0; left: 0; transform: translateX(-100%);}
body:after {bottom: 0; right: 0; transform: translateX(100%);}
body.projet-is-changing:after, body.projet-is-changing:before {transform: translateX(0); transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s;}

.cd-loading-bar {position: fixed; z-index: 201; top: calc(50vh - 0.5px); left: 0; height: 1px; width: 100vw; background-color: #06cabc; transform: translateX(-100%); transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s;}
.cd-loading-bar:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #06cabc; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0);}
.projet-is-changing .cd-loading-bar {transform: translateX(0); -moz-transition: -moz-transform 0.5s 0.3s; transition: transform 0.5s 0.3s;}
.projet-is-changing .cd-loading-bar:before {transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s;}

#pagemove {position: fixed; z-index:200; bottom: 0; left: 0; height: 100vh; width: 100vw; background:#dfe9f2;}
/* TRANSITIONS CHANGEMENT DE PAGE */

/* HEADER */
#logo {position: fixed; width: 50px; height: 50px; background:#242843; top: 10px; left: 10px; z-index: 15; border: 0;}
#logo img {width: 30px; position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); z-index: 2;}
#ico {position: fixed; width: 40px; height: 40px; top: 10px; right: 10px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; z-index: 11;}
/* #ico:before {content: ""; position: absolute; top: -10px; right: -10px; width: 50px; height: 50px; background:#242843; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 1;}
#ico:after {content: ""; position: absolute; top: -1px; right: -1px; width: 52px; height: 52px; box-sizing:border-box; border: solid 1px #06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 1;} */
#ico span {position: absolute; height: 1px; background: #ffffff; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; z-index: 2;}
#ico span:nth-child(1) {width: 10px; left: 15px; top: 15px;}
#ico span:nth-child(2) {width: 20px; left: 10px; top: 20px;}
#ico span:nth-child(3) {width: 10px; right: 15px; top: 25px;}
#ico.open {cursor: default;}
/* #ico.open:before {width: 100%; height: 100%;}
#ico.open:after {width: calc(100% - 18px); height: calc(100% - 18px);} */
#ico.open span:nth-child(1) {width: 0px; left: 0px;}
#ico.open span:nth-child(2) {width: 0px; left: 20px;}
#ico.open span:nth-child(3) {width: 0px; right: 0px;}

#cadre {position: fixed; top: 9px; right: 9px; width: 52px; height: 52px; box-sizing:border-box; border: solid 1px #06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 10;}
#cadre.open {width: calc(100% - 18px); height: calc(100% - 18px);}
#carre {position: fixed; top: 0px; right: 0px; width: 50px; height: 50px; background:#242843; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; z-index: 9;}
#carre.open {width: 100%; height: 100%;}

#menuClose {display: none; font-weight: 600; color: #ffffff; font-size: 0.750rem; position: fixed; top: 10px; right: 10px; padding-right: 40px; text-transform: uppercase; line-height: 40px; cursor: pointer; z-index: 11;}
#menuClose:after {content: ""; position: absolute; top: 20px; right: 10px; height: 1px; width: 0; background: #06cabc; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
#menuClose.show:after {width: 20px;}
/* HEADER */

/* MENU */
ul#menu {position: fixed; top: 50%; left: 50%; color: #000000; text-align: center; transform: translateX(-50%) translateY(-50%); z-index: 12; display: none;}
ul#menu li {list-style: none; font-family: 'Playfair Display', serif; color: #ffffff; font-size: 2.500rem; margin: 40px 0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";/*HACK IE 8*/ filter:alpha(opacity=0);/*HACK IE 5-7*/}
ul#menu li:nth-child(1) {margin-left: -150px;}
ul#menu li:nth-child(2) {margin-left: -150px;}
ul#menu li:nth-child(3) {margin-left: -150px;}
ul#menu li a {color: #ffffff; text-decoration: none; position: relative;}
ul#menu li a.actif {color: #06cabc;}
ul#menu li a:after {content:""; position: absolute; width: 50px; height: 1px; background: #ffffff; bottom: -5px; right: -25px;}
ul#menu li a.actif:after {width: 50px; background: #06cabc; bottom: 35%; right: 50%; transform: translateX(50%);}
/* MENU */

/* CONTENT */
/* ----- GENERAL -----*/
section {position: relative; width: 100%;}
h1 {font-family: 'Playfair Display', serif; font-size: 2rem; text-align: left; color:#29316b; margin-bottom: 30px; position: relative;}
h1 span {position: relative;}
h1 span:after {content: ""; width: 50px; height: 1px; background: #06cabc; bottom: -4.5px; right: -25px; position: absolute;}
h3 {font-family: 'Playfair Display', serif; font-size: 1.125rem; color:#525252; margin-top: 30px;}
p {color: #525252;}
body section article .slide {top: 50vh; z-index: 1; box-sizing: border-box; padding: 10px;}
body section article .visuel {height: 50vh; width: 100vw; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0;}
body section article .visuel.vc {background-image: url("../images/projet-vc0.jpg");}
body section article .visuel.hgm {background-image: url("../images/projet-hgm0.jpg"); background-position: 50% 50%;}
body section article .visuel.igs {background-image: url("../images/projet-igs0.jpg");}
body section article .visuel.orange {background-image: url("../images/projet-orange0.jpg");}
body section article .visuel.party {background-image: url("../images/projet-ap0.jpg");}
body section article .visuel.maif {background-image: url("../images/projet-maif0.jpg");}
body section article .visuel.ovk {background-image: url("../images/projet-ovk0.jpg");}
body section article .visuel.neuilly {background-image: url("../images/projet-neuilly0.jpg");}
body section article .visuel.orlyse {background-image: url("../images/projet-orlyse0.jpg");}
body section article .visuel.cuba {background-image: url("../images/projet-cuba0.jpg");}
/* ----- GENERAL -----*/
/* ----- INDICATEUR DE SCROLL ----- */
.centre {left: 50vw;}
.scroll, .top, #back {position: fixed; text-transform: uppercase; color: #242843; font-size: 0.813rem; font-weight: 600; padding: 10px 20px; box-sizing:border-box; cursor: pointer; transform:translateX(-50%);  z-index:5; background: #ffffff;}
.scroll {bottom: 15px;}
.top {top: 30px;}
#back {text-align: center; text-decoration: none; padding: 5px 20px 5px 20px; top: 15px;}
.scroll:before, .top:before, #back:before {content:""; position: absolute; left: calc(50% - 0.5px); transform:translateX(-50%); }
.scroll:before, .top:before {height: 15px; width: 1px; background:#06cabc; z-index: 0;}
#back:before {height: 20px; width: 1px; background:#06cabc; z-index: 0;}
.scroll:before, .scroll:after {top: 100%;}
.top:before, .top:after {bottom: 100%;}
#back:before, #back:after {bottom: 100%;}
.scroll span, .top span, #back span {position: absolute; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
.scroll span:nth-child(1), .top span:nth-child(1), #back span:nth-child(1) {top: 0; left: 0; width: 100%; height: 1px;}
.scroll span:nth-child(2), .top span:nth-child(2), #back span:nth-child(2) {bottom: 0; right: 0; width: 100%; height: 1px;}
.scroll span:nth-child(3), .top span:nth-child(3), #back span:nth-child(3) {top: 0; left: 0; width: 1px; height: 100%;}
.scroll span:nth-child(4), .top span:nth-child(4), #back span:nth-child(4) {bottom: 0; right: 0; width: 1px; height: 100%;}
/* ----- INDICATEUR DE SCROLL ----- */
/* ----- HOME ----- */
#home section {position: relative; width: 100vw; height: 100vh; overflow: hidden;}
#home section article {margin: 0 auto; position: relative; position: relative; width: 100vw; height: 100vh; z-index:1;}
#home section article#s1 {display: block;}
#home section article#s2, #home section article#s3 {display: none;}
#home section article .slide {left: 100px; height: 50vh; width: 100vw;}
#home section article .slide p {width: 98%; margin-bottom: 20px;}
#home section article .slide a {display: inline-block; color: #06cabc; text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 10px 20px; border: solid 1px #29316b; box-sizing:border-box; position: relative;}
#home section article .slide a:before {content:""; position: absolute; top: 50%; right: -10px; width: 20px; height: 1px; background: #06cabc; transition: all 0.8s ease 0.2s; -webkit-transition: all 0.8s ease 0.2s; -moz-transition: all 0.8s ease 0.2s; -o-transition: all 0.8s ease 0.2s;}
#home section article .slide a:hover:after {width: 100%;}
#home section article .slide a:hover:before {right:-10px;}
#home section article .visuel a {display: block; border: 0; width: 100%; height: 100%; padding: 0;}
/* ----- HOME ----- */
/* ----- INFOS ----- */
#infos h1 {font-size: 2rem;}
#infos section article {width: 90%; margin: 0 auto;}
section.donnees article, section.other article {text-align: left; font-size: 1rem;}
section.me {background:#242843; position: relative;}
section.me article {padding: 80px 0;}
section.me h1 {color:#ffffff;}
section.me p {color:#ffffff; margin-bottom: 35px; line-height: 1.5rem;}
section.me a {color:#06cabc; text-decoration: none; margin-top: 15px; display: block;}
section.me a span {position: relative;}
section.me a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 1px; background:#06cabc;}
section.donnees {background:#dfe9f2; padding: 40px 0; box-sizing:border-box;}
section.donnees article h3:first-of-type {margin-top: 0;}
section.donnees article h3 a {text-decoration: none; color: #525252;}
section.donnees article p {margin-top: 5px; color:#242843;}
section.donnees article p a {text-decoration: none; color:#242843;}
section.donnees a span {position: relative;}
#infos section.donnees a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 20px; height: 1px; background:#06cabc;}
section.other {background:#242843; padding: 50px 0; position: relative;}
section.other h1 {color:#ffffff; margin-top: 50px;}
section.other h1:first-of-type {margin-top: 0px;}
section.other ul {text-align: left;}
section.other ul li {display: block; font-size: 1rem; list-style: none; line-height: 24px; vertical-align: top;}
section.other ul.comp li {margin-top: 20px;}
section.other ul.item {margin-top: 30px;}
section.other ul.comp li:nth-child(1), section.other ul.item li:nth-child(1) {color:#06cabc; font-weight: 600;}
/* ----- INFOS ----- */
/* ----- PORTFOLIO ----- */
#portfolio section article {width: 100%; margin: 0 auto; padding: 80px 0 0 0; box-sizing:border-box;}
#portfolio section article ul li {list-style: none; width: 100%; box-sizing:border-box; padding-bottom: 50px;}
#portfolio section article ul li .visu {width: 100%; height: auto; color: #000000; font-size: 1rem; margin: 0 auto; position: relative;}
#portfolio section article ul li .visu img {width: 100%; height: auto; display: block;}
#portfolio section article ul li a.port-link {width: calc(100% - 20px); margin: 0 auto; border: solid 1px #06cabc; background:#ffffff; color:#242843; text-decoration: none; text-align: center; box-sizing:border-box; display: block; padding: 20px 0; position: relative; z-index: 1; margin-top: -40px;}
#portfolio section article ul li a.port-link h2 {font-family: 'Playfair Display', serif; font-size: 1.500rem; margin-bottom: 20px;}
#portfolio section article ul li a.port-link .btn {font-size: 0.813rem; text-transform: uppercase; color:#06cabc; font-weight: 600; border: solid 1px #06cabc; padding: 10px 20px; box-sizing:border-box; position: relative; display: inline-block;}
#portfolio section article ul li a.port-link .wait {font-size: 0.813rem; text-transform: uppercase; color:#06cabc; font-weight: 600; padding: 10px 20px; box-sizing:border-box; position: relative; display: inline-block;}
#portfolio section article ul li a.port-link .btn:after {content:""; position: absolute; top: 50%; right: -10px; width: 20px; height: 1px; background: #06cabc;}
/* ----- PORTFOLIO ----- */
/* ----- PROJET ----- */
#projet section.intro {position: relative; width: 100%;}
#projet section.intro article {margin: 0 auto; position: relative; position: relative; width: 100%; z-index:1;}
#projet section.intro article .slide {margin: 0 auto; box-sizing:border-box;}
#projet section.intro article .slide p {margin-bottom: 35px;}
#projet section.intro article .slide p.reco {margin-bottom: 0px; font-weight: 600; color: #06cabc;}
#projet section.donnees article {width: calc(100% - 20px); font-size: 0; margin: 0 auto;}
#projet section.donnees article .col {width: 100%; display: block; text-align: left; font-size: 1.250rem; vertical-align: top; margin-bottom: 20px;}
#projet section.donnees article .col:last-of-type {margin-bottom: 0;}
#projet section.donnees article .col h3 {font-size: 1.250rem;}
#projet section.donnees article a {display: inline-block; font-size: 1rem; margin-top: 30px; color: #06cabc; text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 10px 20px; border: solid 1px #29316b; box-sizing:border-box; position: relative;}
#projet section.donnees article a span{z-index: 1;}
#projet section.donnees article a:before {content:""; position: absolute; top: 50%; right: -10px; width: 20px; height: 1px; background: #06cabc; z-index: 1; transition: all 0.8s ease 0.2s; -webkit-transition: all 0.8s ease 0.2s; -moz-transition: all 0.8s ease 0.2s; -o-transition: all 0.8s ease 0.2s;}
#projet section.apercu {padding-top: 30px; box-sizing:border-box;}
#projet section.apercu article {width: 100%; margin: 0 auto;}
#projet section.apercu article img {width: 100%; margin-bottom: 20px; display: block;}
#projet section.apercu article img:last-of-type {margin-bottom: 0;}
/* ----- PROJET ----- */
/* ----- 404 - FAIL ----- */
section#fail {background:#242843; height: 100vh; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center;}
section#fail article {width: 100%; text-align: center;}
section#fail h1 {color: #161929; font-size: 300px; position: absolute; top: 20%; right: 0; transform: rotate(-90deg); z-index: 0;}
section#fail p {color:#ffffff; margin-bottom: 35px; font-size: 1.250rem; line-height: 1.5rem; position: relative; z-index:1;}
section#fail a {color:#06cabc; text-decoration: none; margin-top: 15px; display: block; position: relative; z-index:1;}
section#fail a span {position: relative;}
section#fail a span:after {content:""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 1px; background:#06cabc; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
section#fail a:hover span:after {left: calc(100% + -20px);}
/* ----- 404 - FAIL ----- */
/* CONTENT */