::-webkit-scrollbar{
  height:25px;
  width:10px;
  background:transparent;
  padding-top:10px;
}

::-webkit-scrollbar-track-piece:horizontal{
  border: none;
  background: #ccc;
  border-top: solid 16px #fff;
  border-bottom: solid 6px #fff;  
} 

::-webkit-scrollbar-thumb:horizontal{
  background:#6892AE;
  border: solid 0 transparent;
  border-top: solid 15px #fff;
  border-bottom: solid 5px #fff;

}

::-webkit-scrollbar-track-piece:vertical{
  border: none;
  background: #ccc;
  border-left: solid 4px #fff;
  border-right: solid 4px #fff;  
} 

::-webkit-scrollbar-thumb:vertical{
  background:#6892AE;
  border: solid 0 transparent;
  border-left: solid 2px #fff;
  border-right: solid 2px #fff;
  border-radius: 3px

}

		/* chargement des polices -------------*/
		/* Exo 2 regular --------------------*/

		@font-face{
			font-family: 'Exo 2';
			font-style: normal;
			font-weight: 400;
			src: url('fonts/Exo2-Regular.ttf') format('truetype');
		}
		/* Exo Bold */
		@font-face{
			font-family: 'Exo 2';
			font-style: normal;
			font-weight: 700;
			src: url('fonts/Exo2-Bold.ttf') format('truetype');
		}
		/* Exo Black */
		@font-face{
			font-family: 'Exo 2';
			font-style: normal;
			font-weight: 900;
			src: url('fonts/Exo2-Black.ttf') format('truetype');
		}

		*{ 
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-family: 'Exo 2', sans-serif;
		}
		.debug{
			position: fixed;
		}

		/* General
		---------------------------------*/
		header{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
		}
		a{	
			color:#000;
			text-decoration: none;
		}
		a:active{
			color:#000;
		}
		#scroller{
			height: 1px;
		}
		.horizontalLine{
			height: 3px;
			background: #000;
			position: absolute;
			left: 0;
			right: 0;
		}
		.verticalLine{
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(100% / 3);
			width: 2px;
			background: #000;
		}
		.clear{
			clear: both;
		}
		.container{
		max-width: 1024px;
		margin: 0 auto;
		position: relative;
		height: 100%;
		}

		section .container{
			padding: 5%;
			z-index: 1;
		}
		/* navigation -------------------*/
		#mainMenu{
			display: flex;
			justify-content: space-around;
			height: 45px;
			background: #0F212D;
			color: #fff;
			margin-top: -1px;
		}
		#mainMenu li{
			line-height: 45px;
			text-transform: uppercase;
			list-style-type: none;
			font-size: 13px;
		}
		#mainMenu a{
			color:#888;
			font-weight: bold;
		}
		#slantBorder{
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 0 20px 100vw;
			border-color: transparent transparent #0F212D transparent;
		}

		#mainMenu .current  a{
			color: #fff;
			font-weight: bold;
		}
		#logoContainer{
			display: none;
		}
		/* Structure et Elements divers
		--------------------------------*/

		.section{
			position: relative;
			height: 100vh;
			width: 100%;
			overflow: hidden;
		}
		.rotated{
			position: absolute;
			top: -30%;
			left: -30%;
			right: -30%;
			bottom: -30%;
			transform-origin: calc(100% / 3) 50%;
			transform: rotate(-13deg);
		}

		.verticale{
			position: absolute;
		    top: 0; 
		    width: 3px;
		    transform-origin: top;
		    left: 0;
		    transform: rotate(-13deg);
		    z-index: 3;
		}

		.horizontale{
			position: absolute;
			transform-origin: 0 50%;
			left:0;
			right:0;
			height: 3px;
		}

		/* home -----------------------------*/

		#home .horizontale{
		    right: -3%;
		    transform-origin: 0 50%;
		    transform: rotate(-13deg);
		    top: 25%;
		}
		#home .line{
			left: 0;
			right: 0;
		}

		#home .horizontale .line{
			left: 0;
			right: 0;
		}
		#logo{
		    position: absolute;
		    width: 120px;
		    font-size: 1.7em;
		    line-height: 0;
		    font-family: 'Exo 2', sans-serif;
		    text-transform: uppercase;
		    letter-spacing: 0.5em;
		    width:90px;
		    transform-origin: 0 0;
		}
		#per,#pe,#tum{
			line-height: 1;
			width: 100%;
		}
		#tum{
			letter-spacing: 0.4em;
		}
		#mobileTitle{
			text-transform: none;
			font-size: 14px;
			display: inline-block;
			transform-origin: 0 0;
			transform: translateX(102px) translateY(-77px) rotate(90deg);
			position: absolute;
		    left: 0;
		    right: 0;
			letter-spacing: 3px;
		}
		
		#titles{
			position: absolute;
			transform-origin: 0 0;
			z-index: 1;
		}
		#titles	h1{
		    font-family: 'Exo 2', sans-serif;
		    font-size: 1em;
		    line-height: 0;
		    text-transform: uppercase;
		}
		#nicolas{
			display: inline-block;
			font-weight: 700;
			font-size: 2.625em;
			line-height: 1;
		}
		#nicolas div{
			display: inline-block;
		}
		#landscapeTitle{
			display: none;
		}
		#mendoula{
			font-size: 4.75em;
			font-weight: 900;
			line-height: 0.75;
			display: inline-block;
		}
		#dou{
			letter-spacing: 0.1em;
		}
		#la{
			letter-spacing: 0.25em;
		}
		#titleCursor{
			font-size: 0.75em;
			animation: clignote 0.3s;
		}
		#homeJobs{
			margin: 10px 0 0 0;
		}
		#homeJobs li{
			list-style-type: none;
			font-size: 1.5em;
		}
		#homeJobs li:before{
			content: ">";
			margin: 0 5px 0 0;
		}
		/* Presentation
		-----------------------------------------*/
		#presentation .first{
			left: calc(100% / 3);
		}
		.titleWrapper{
			width: 200%;
		}
		.blocTitle{
		    position: absolute;
		    top: calc(16% - 1em);
		    left: 3%;
		    overflow-x: hidden;
		    transform-origin: 0;
		    transform: rotate(-13deg);
		}

		.titleFont{
			background: #6892AE;
		    top: 0px;
		    height: 25%;
		    position: absolute;
		    left: 0;
		    right: -10%;
		    z-index: -1;
		    transform-origin: 0 100%;
		}
		.menuFond{
			background: #2b495c;
			position: absolute;
			top:0;
			left: calc(100% / 3);
			transform-origin: 0 0;
			right: 0%;
			bottom: 0%;
			z-index: -2;
		}
		#presentation .horizontale{
			top:25%;
			left:0;
		}
		

		#presentation .horizontalLine{
			top: calc(100% / 3);
		} 
		#wrapper{
			position: relative;
			height: 100%;
		}
		#explain{
		    position: absolute;
		    /*bottom: 65px;*/
		    text-align: left;
		    top: calc(25% + 10px);
		    transform-origin: 0 0;
		    font-size: 1em;
		    padding: 0;
		    left:10px;
		}
		.rotator{
			transform-origin: 0 0;
		}
		#explain p{
			margin-bottom: 10px;
			line-height: 1.1;
		}
		#presentation h2{
			color: #fff;
		    font-size: 1.5em;
		    line-height: 1;
		    text-transform: uppercase;
		    position: absolute;
		    top: 3%;
		    transform-origin: 50%;
		    transform: rotate(-6deg);
       	}

		#presentation h3{
			position: relative;
			color: #fff;
		    font-size: 3em;
		    line-height: 1.2;
		    float: left;
		    width: 50%;
		}
		#presNav {
		    position: absolute;
		    right: 0%;
		    top: 20%;
		    transform-origin: 50%;
		    left: calc(50%);
		    padding-left: 5%;
		}
		#presNav li{
			color: #fff;
			font-weight: bold;
			list-style-type: none;
			text-transform: uppercase;
			font-size: 1.3em;
			letter-spacing: -1px;
			line-height: 2;
			transform-origin: 0 50%;
			cursor: pointer;
		}
		.blocDev, .blocGraph, .blocIllu{
			position: absolute;
			bottom: 0;
			left: -10%;
			right: -10%;
		}
		.blocTitleDesk{
			display: none;
		}

		/* Portfolio
		---------------------------------------------*/

		.sliderWrapper{
			position: absolute;
			top: calc(5% + 30px);
			left: 0;
			bottom: 0;
			right: 0;
			overflow: hidden;
			z-index: -1;
		}
		.workImg{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: calc(100% / 3);
			z-index: 1;
			background-position: center;
			background-size: cover;
			background-position: left top; 
			background-repeat: no-repeat;
		}
		.description{
			position: absolute;
			bottom: 70px;
			left: 0;
			right: 0;
			top: calc(100% *  2/3);
			z-index: 2;
			background: #fff;
			box-shadow: 0 -5px 12.5vh -12.5vh rgba(0,0,0,0.5);
			text-align: left;
			bottom: 0;
		}
		.description p{
		    position: relative;
		    z-index: 2;
		    top: -6.25vh;
		    padding: 10px;
		    width: 75%;
		    font-size: 0.8em;
		}
		.description button{
		    position: absolute;
		    height: 30px;
		    width: 90px;
		    line-height: 30px;
		    border: none;
		    color: #fff;
		    background: #3F525E;
		    left: 10px;
		}
		.descriptionTriangle{
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 12.5vh 0 0 100vw;
		    border-color: transparent transparent transparent #fff;
		    position: absolute;
		    bottom: calc(100% - 1px);
		    left: 0;

		}
		#sliderContainer{
			width:400%;
			height: 100%;
		}
		.work{
			position: relative;
			float: left;
			width: 25%;
			height: 100%;
			color: #888;
			text-align: center;
		}

		.workImg img {
		    height: 100%;
		    width: auto;
		    text-align: center;
		}
		.work h3{
		    position: relative;
		    z-index: 2;
		    top: -6.25vh;
		    width: 50%;
		    padding: 0 0 0 10px;
		    font-size: 1.3em;
		    line-height: 1;
		    color: #000;
		}
		.work h4{
			position: relative;
			top: -6.25vh;
		    font-size: 0.75em;
		    text-transform: uppercase;
		    font-weight: 300;
		    padding: 0 0 0 10px;
		}
		.work span{
			display: inline-block;
			font-size: 50px;
			font-weight: bold;
			margin: calc(100% / 3) auto 0;

		}
		#portfolio .line{
			left: 0;
			right: 0;
		}

		#portfolio .verticalLine{
			right: 16.4%;
			left: initial;
	    	bottom: 52%;
	    	top: 24.5%;
		}
		#portfolio .first{
			right: 62px;
			top:0;
			left: initial;

		}
		#portfolio .second{
			right: 0%;
			left: initial;
			transform-origin: 50% 0%;
		}
		#portfolio .horizontale{
			transform-origin: 100%;
			transform: rotate(16deg);
			right: 7.5%;
			bottom: 0;
			top: 0%;
		}
		.horizontaleLine{
    		position: absolute;
    		width: 2px;
    		background: #000;
    		top: 35%;
    		bottom: 0;
		}
		#corner{
			position: absolute;
			right:0;
			left: calc(100% - 65px);
			background: #2b495c;
			top: 0;
			bottom: calc(100% * 1/3);
			transform-origin: 0% 0%;
		}
		.navPort{
			position: absolute;
			bottom: 0;
			right: 0;
			left: calc(100% * 2/3 - 9px);
			transform-origin: 0% 0%;
		}
		.suivant, .precedent{
			color:#fff;
			position: absolute;
			border: solid 2px #000;
			border-style: solid none none none;
		}
		.precedent img{
			transform-origin: 50% 50%;
			transform: rotate(180deg);
		}
		.suivant{
			background: #46677D;
			right: 0;
			left: 0;
			top: 0;
			bottom: 45%;
		}
		.fleche{
			width: calc(100% / 6);
		}
		.fleche img{
			width:50%;
		}
		.suivant .fleche{
			position: absolute;
			bottom: 17%;
			left: 6%;
			font-weight: bold;
			transform-origin: 50% 50%;
		}
		.precedent{
			background: #2b495c;
			bottom: 0;
			right: 0;
			transform-origin: 0 100%;
		}

		.precedent .fleche{
			position: absolute;
			top: 10%;
			left: 10%;
			transform-origin: 50% 50%;
		}
		.miniature_Wrap{
			display: none;
		}

		/* Contact
		------------------------------------------*/
		#contact .horizontale {
		    height: 2px;
		    left: 0;
		    top:0;
		    transform-origin: 100% 0;	    
		}

		#contact .first{
			transform: rotate(64deg);
			left:calc(100% * 2/3);
			right: initial;
			bottom: 55%;
		}
		#contact .second{
			transform: rotate(-20deg);
		    left: 0;
		    right: initial;
		    bottom: 15%;
		    top: 25%;
		}
		#firstLine{
			top: calc(100%/6);
			transform: rotate(-25deg);
			right: 0;
		}

		#secondLine{
			top: 17%;
		    transform: rotate(70deg);
		    right: -33%;
		}

		.line{

			position: absolute;
			background: #000;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		#secondLine .line{
			left:0;
			right:100%;
		}
		.more{
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    padding: 20% 6% 60px;
		    top: 65%;
		    color: #fff;
		    text-align: left;
		    z-index: 9998;
		}
		.more p{
			position: static;
		    z-index: 1;
		    transform-origin: 50% 50%;
		    transform: rotate(-6deg);
		}
		.rectWrapper{
			position: relative;
			width: 100%;
			height: 100%
		}
		#rectangle{
			background: #2b495c;
			position: absolute;
			left: -5%;
			bottom: -10%;
			top: 70%;
			right: -10%;
			z-index: 9997;
			transform-origin: 50% 100%;
			transform: rotate(347deg) scale(1);
		}
		#contact h2{
			margin-bottom: 0.5em;
		}
		#contact form{
			position: relative;
			z-index: 9999;
		}
		#contact input, #contact select{
			height: 30px;
			width: 100%;
			background: #eee;
			border: solid 1px #bbb;
			padding: 5px;
			box-shadow: 3px 3px 9px rgba(0,0,0,0.1) inset;
		}
		#contact input[type=submit]{
			width: 50%;
			background: #789EB7;
			text-transform: uppercase;
			font-weight: bold;
			color: #fff;
			border: none;
			height: 40px;
		}

		#contact input[disabled]{
			background: #aaa;
		}

		#contact textarea{
			width:100%;
			height: 100px;
			margin-bottom: 0.5em;
			background: #eee;
			border: solid 1px #ccc;
			box-shadow: 3px 3px 3px rgba(0,0,0,0.1) inset;
			padding: 5px;
		}
		#contact .label{
			margin-bottom: 3px;
		}
		.fieldLine{
			position: relative;
			margin-bottom: 0.5em;
			z-index: 9998;
		}

		footer{
			display: none;
		}

		/* Animation
		------------------------------------------*/

		.slideOutRight{
			position: relative;
			animation: slideOutRight 0.25s forwards;
		}
		.slideOutLeft{
			position: relative;
			animation: slideOutLeft 0.25s forwards;
		}

		.slideInRight{
			position: relative;
			animation: slideInRight 0.25s forwards;
		}

		@keyframes slideInRight{
			0%{
				left: 100%;
				opacity: 0;
			}
			100%{
				left: 0%;
				opacity: 1;
			}
		}
		@keyframes slideOutRight{
			0%{
				left: 0;
				opacity: 1;
			}
			100%{
				left: 100%;
				opacity: 0;
			}

		}
		@keyframes slideOutLeft{
			0%{
				margin-left: 0;
				opacity: 1;
			}
			100%{
				margin-left: -50%;
				opacity: 0;
			}

		}
		@keyframes clignote{
			0%{
				display: inline;
			}
			100%{
				display:none;
			}
		}

		@keyframes homeVertical{
			0%{
				top:-100%;
			}
			100%{
				top:0%;
			}
		}