@import url(http://fonts.googleapis.com/css?family=Prata); 

body {
	width:100%;
	height:100%;
	opacity:1;
	overflow-y:scroll;
	overflow-x: hidden;
}

body.loading {
	overflow:hidden;
}

body.loading .loader {
	position:fixed;
	display:block;
	opacity:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10000000;
	background:#FFF;
	transition: none;
}

.loader {
	display:block;
	opacity:0;
	height:0;
	width:0;
	transition: opacity 1s ease-out, height 0s 1s, width 0s 1s;
}

#logocontainer { 
	display:block;
	width: 70px;
	height: 70px;
	position:fixed;
	top:50%;
	left:50%;
	margin:-35px 0 0 -35px;
	perspective: 800px;
}

#flip {
	display:block;
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 1s;
	animation: animLoad 1.5s ease-in-out 0s infinite;
	-webkit-animation: animLoad 1.5s ease-in-out 0s infinite;
	-moz-animation: animLoad 1.5s ease-in-out 0s infinite;
	-o-animation: animLoad 1.5s ease-in-out 0s infinite;
	-ms-animation: animLoad 1.5s ease-in-out 0s infinite;
}

#flip div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.logoback {
	transform: rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
}

@keyframes animLoad{
     from { transform: rotateY( 0deg ); }
     to   { transform: rotateY( 180deg ); }
}

@-webkit-keyframes animLoad{
     from { -webkit-transform: rotateY( 0deg ); }
     to   { -webkit-transform: rotateY( 180deg ); }
}

@-moz-keyframes animLoad{
     from { -moz-transform: rotateY( 0deg ); }
     to   { -moz-transform: rotateY( 180deg ); }
}

@-o-keyframes animLoad{
     from { -o-transform: rotateY( 0deg ); }
     to   { -o-transform: rotateY( 180deg ); }
}

@-ms-keyframes animLoad{
     from { -ms-transform: rotateY( 0deg ); }
     to   { -ms-transform: rotateY( 180deg ); }
}

body, div, a, h1, h2, h3, h4, h5, h6, p {
	margin:0;
	padding:0;	
}

.content {
	position:absolute;
	width:84%;
	height:auto;
	left:8%;
	top:0;
}

@media screen and (min-width: 1786px) {
	.content {
		position:absolute;
		width:1500px;
		height:auto;
		left:50%;
		margin-left:-750px;
		top:0;
	}
}

.clear {
	clear:both;
}


/* INTRO *****************************************/

#intro {
	position:fixed;
	width:100%;
	height:100%;
	background:url(design/bg_intro.jpg) no-repeat center center;
	background-size:cover;
	top:0;
	z-index:0;
	transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995);
	-webkit-transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995);
}	

#intro.enter {
	top:-100%;
	transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995);	
	-webkit-transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995);	
}

#intro video {
  position: absolute; 
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
  background: url(design/poster.jpg) no-repeat;
  background-size: cover;
}

#intro #mask {
	background:#000;
	z-index: 0;
	position: absolute;
	opacity:0.8; 
	right: 0; 
	bottom: 0;
	width: 100%; 
	height: 100%;

}

#artdirector, #illustrator {
	position:absolute;
	bottom:40%;
	height:33px;
	font-family:"Futura W01 Book", georgia, sans-serif;
	font-weight:400;
	font-size:24px;
	letter-spacing:4px;
	line-height:33px;
	text-transform:uppercase;
	color:#FFF;
	opacity:0.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#artdirector {
	width:100%;
	margin-left:0px;
}

#illustrator {
	width:180px;
}

#artdirector span, #illustrator span {
	display:block;
	width:100%;
	height:33px;	
}

body.loading #artdirector span {
	margin-left:0px;
}

body.loading #illustrator span {
	margin-left:0px;
}

body #artdirector span {
	text-align:center;
	transition:margin-left 0.6s cubic-bezier(0.415, 0.055, 0.275, 1.000);
	-webkit-transition:margin-left 0.6s cubic-bezier(0.415, 0.055, 0.275, 1.000);
}

body #illustrator span {
	margin-left:15px;
	transition:margin-left 0.6s cubic-bezier(0.415, 0.055, 0.275, 1.000);
	-webkit-transition:margin-left 0.6s cubic-bezier(0.415, 0.055, 0.275, 1.000);
}

body.loading #logo {
	opacity:0;
}

#logo {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-25%;
	margin-top:-18%;
	width:50%;
	height:auto;
	opacity:1;
	transition:opacity 1.2s 0.4s cubic-bezier(0.415, 0.055, 0.275, 1.000);
	-webkit-transition:opacity 1.2s 0.4s cubic-bezier(0.415, 0.055, 0.275, 1.000);
}

#openmenu {
	display:none;
}

@media screen and (max-aspect-ratio: 14/9) {
	#logo {
		margin-left:-35%;
		margin-top:-20%;
		width:70%;
	}
}

#logo img {
	width:100%;
	height:auto;	
}


/* MENU *****************************************/

nav {
	position:fixed;
	top:80%;
	width:100%;
	z-index:20;
}

nav.navtop {
	top:60px !important;
	transition:top 0.5s ease-out;	
	-webkit-transition:top 0.5s ease-out;
}

#logosmall {
	position:absolute;
	left:50%;
	margin-left:-35px;
	opacity:0;
	cursor:pointer;
	transform:scale(0.1);
	-ms-transform:scale(0.1);
	-moz-transform:scale(0.1);
	-webkit-transform:scale(0.1);
	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
}

@media screen and (min-width: 1786px) {
	nav.enter {
		width: 1786px;
		left: 50%;
		margin-left: -893px;
	}
}

nav.enter #logosmall {
	opacity:1;
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	transition:all 0.5s 0.2s ease-out;
	-webkit-transition:all 0.5s 0.2s ease-out;
}

#close {
	display:none;	
}

.menu {
	width:120px;
	height:90px;
	font-family:Prata,Georgia,serif;
	font-size:45px;
	color:#efab5a;	
	text-align:right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: linear-gradient(to right, #774021 50%, rgba(152,152,152,0.8) 50%), url(design/barre0.png) !important;
	background-position:-40px 60px, 58px 20px !important;
	background-size:200% 3px, 19px 18px !important;
	background-repeat:no-repeat, no-repeat !important;
	opacity:0.6;
	transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
	cursor:pointer;
}

body.spykar .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_maram.png) !important; }
body.indiabulls .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_zoo.png) !important; }
body.sky .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_cgi.png) !important; }
body.palava .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_antoine.png) !important; }
body.welspun .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_tokkun9f9d96.html) !important; }
body.spun .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_skull.png) !important; }
body.aegon .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_pmmt.png) !important; }
body.golf .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_dixon.png) !important; }
body.greens .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_artspire.png) !important; }
body.prius .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_dptevt.png) !important; }
body.lerecyclagepasapas .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_recyclage.png) !important; }
body.inlogia .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_inlogia.png) !important; }
body.witchatt .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_witchatt.png) !important; }
body.antro .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_antro.png) !important; }
body.origami .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_origami.png) !important; }
body.legrandbal .menu { color:#ffffff;background-image: linear-gradient(to right, #ffffff 50%, rgba(152,152,152,0.8) 50%), url(design/barre0_legrandbal.png) !important; }

.menu:hover, .menu.actif {
	background-position:0 60px, 38px 20px !important;
	background-size:200% 3px, 19px 18px !important;
	background-repeat:no-repeat, no-repeat !important;
	opacity:1;
}

nav.enter .menu {
	font-size:18px;
	height:65px;
	background-position:-40px 36px, 93px 7px !important;
	background-size:200% 3px, 11px 10px !important;
	background-repeat:no-repeat, no-repeat !important;
}


nav.enter .menu:hover, nav.enter .menu.actif {
	background-position:0px 36px, 79px 7px !important;
	background-size:200% 3px, 11px 10px !important;
	background-repeat:no-repeat, no-repeat !important;
}

.menu span.label {
	position:absolute;
	bottom:0;
	left:0;
	text-align:left;
	font-family:"Futura W01 Heavy", arial, sans-serif;
	font-weight:normal;
	font-size:16px;
	letter-spacing:4px;
	line-height:16px;
	text-transform:uppercase;
	color:#FFF;
	opacity:0.6;
	-webkit-font-smoothing:antialiased;	
	-moz-osx-font-smoothing: grayscale;
	transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
}

nav.enter .menu span.label {
	color:#000;	
	font-size:14px;
	letter-spacing:3px;
}

body.loading .menuworks, body.loading .menuabout, body.loading .menublog, body.loading .menucontact {
	top:300px;
}

.menublog, .menuworks {
	top:0;
	position:absolute;
	left:50%;
}

.menuabout, .menucontact {
	top:0;
	position:absolute;
	right:50%;
}

.menublog {
	background-position:-40px 60px, 70px 20px !important;
	background-size:200% 3px, 19px 18px !important;
	background-repeat:no-repeat, no-repeat !important;
	margin-left:-460px;
	transition:top 0.4s 0.2s ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, left 0.2s ease-out, margin-left 0.2s ease-out;
	-webkit-transition:top 0.4s 0.2s ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, left 0.2s ease-out, margin-left 0.2s ease-out;
}

.menublog:hover, .menublog.actif {
	background-position:0 60px, 50px 20px !important;
	background-size:200% 3px, 19px 18px !important;
	background-repeat:no-repeat, no-repeat !important;
}

nav.enter .menublog {
	left:8%;
	margin:0;
	background-position:0 36px, 97px 7px !important;
}

nav.enter .menublog.actif, nav.enter .menublog:hover {
	background-position:0 36px, 84px 7px !important;
	background-size:200% 3px, 11px 10px !important;
	background-repeat:no-repeat, no-repeat !important;
}

.menuworks {
	margin-left:-180px;
	transition:top 0.4s 0.3s  ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, left 0.2s ease-out, margin-left 0.2s ease-out;
	-webkit-transition:top 0.4s 0.3s  ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, left 0.2s ease-out, margin-left 0.2s ease-out;
}

nav.enter .menuworks {
	left:28%;
	margin:0;
}

.menuabout {
	margin-right:-200px;
	transition:top 0.4s 0.4s  ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, right 0.2s ease-out, margin-right 0.2s ease-out;
	-webkit-transition:top 0.4s 0.4s  ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, right 0.2s ease-out, margin-right 0.2s ease-out;
}

nav.enter .menuabout {
	right:28%;
	margin:0;
}

.menucontact {
	margin-right:-480px;
	transition:top 0.4s 0.5s ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, right 0.2s ease-out, margin-right 0.2s ease-out;
	-webkit-transition:top 0.4s 0.5s ease-out, background-position 0.2s ease-out, opacity 0.2s ease-out, right 0.2s ease-out, margin-right 0.2s ease-out;
}

nav.enter .menucontact {
	right:8%;
	margin:0;
}


/* GRID *****************************************/

#grid {
	position:absolute;
	top:100%;
	width:100%;
	z-index:1;
	opacity:1;
	min-height:1500px;
	overflow:hidden;
	transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995), opacity 2s ease-in-out, height 0s linear;
	-webkit-transition:top 0.7s cubic-bezier(0.560, 0.025, 0.360, 0.995), opacity 2s ease-in-out, height 0s linear;
}

#grid .content {
	position:absolute;
	top:300px;
}

#grid.enter, #grid_bg.enter {
	/*top:0;*/
	transition:top 0.7s ease-out, opacity 1.2s ease-in-out, height 0s linear;	
	-webkit-transition:top 0.7s ease-out, opacity 1.2s ease-in-out, height 0s linear;	
}

body.about #grid, body.about #grid.enter {
	height:0;
	transition:height 0s 0.5s linear;	
	-webkit-transition:height 0s 0.5s linear;
}

body.contact #grid, body.contact #grid.enter {
	height:0;
	transition:height 0s 0.5s linear;	
	-webkit-transition:height 0s 0.5s linear;
}

#grid.fade {
	opacity:0;
	height:0 !important;
	min-height:0;
	overflow:hidden;
	transition:opacity 1s ease-in-out, height 0s 1s linear;	
	-webkit-transition:opacity 1s ease-in-out, height 0s 1s linear;	
}

#grid_bg.fx {
	position:fixed;
	top:0;
}
#grid_bg {
	position:absolute;
	width:100%;
	height:100%;
	top:100%;
	z-index:0;
	/*background:url(background/general.jpg);*/
	background-repeat:no-repeat !important;
	background-size:cover !important;
	background-position:center center !important;
	transition:background 0.8s linear;
	-webkit-transition:background 0.8s linear;
}

#grid_bg:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(projects/spykar/bw.jpg), url(projects/indiabulls/bw.jpg), url(projects/sky/bw.jpg), url(projects/palava/bw.jpg), url(projects/welspun/bw.jpg), url(projects/spun/bw.jpg), url(projects/aegon/bw.jpg), url(projects/golf/bw.jpg), url(projects/greens/bw.jpg), url(projects/prius/bw.jpg); 
}

#grid_bg.spykar { background:url(projects/spykar/bw.jpg); }
#grid_bg.indiabulls { background:url(projects/indiabulls/bw.jpg); }
#grid_bg.sky { background:url(projects/sky/bw.jpg); }
#grid_bg.palava { background:url(projects/palava/bw.jpg); }
#grid_bg.welspun { background:url(projects/welspun/bw.jpg); }
#grid_bg.spun { background:url(projects/spun/bw.jpg); }
#grid_bg.aegon { background:url(projects/aegon/bw.jpg); }
#grid_bg.golf { background:url(projects/golf/bw.jpg); }
#grid_bg.greens { background:url(projects/greens/bw.jpg); }
#grid_bg.prius { background:url(projects/prius/bw.jpg); }

#grid>.content>div {
	position:relative;
	padding:0;
	margin:0;
}

.item1 img, .item2 img, .item3 img {
	position:relative;
	z-index:0;
	opacity:1;
	width:100%;	
	height:auto;
	display:block;
	transition:opacity 0.3s linear;
	-webkit-transition:opacity 0.3s linear;
}

.item, .roll {
	cursor:pointer;
}

.item1 {
	width:50%;
	height:auto;
	float:left;	
}

.item2 {
	width:60%;
	height:auto;
	float:left;	
}

.item3 {
	width:40%;
	height:auto;
	float:left;	
}

.item .roll {
	position:absolute;
	width:86%;
	left:7%;
	height:100%;
	top:0;
	z-index:1;
	transition:all 0s 0.4s linear;
	-webkit-transition:all 0s 0.4s linear;
}

.item:hover .roll {
	height:120%;
	top:-10%;
	transition:all 0s linear;
	-webkit-transition:all 0s linear;
}

.roll .left {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	opacity:0;
	perspective:1000px;
	-webkit-perspective:1000px;
	transition:opacity 0s 0.4s linear;
	-webkit-transition:opacity 0s 0.4s linear;
}

.roll .right {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	opacity:0;
	perspective:1000px;
	perspective-origin:right;
	-webkit-perspective:1000px;
	-webkit-perspective-origin:right;
	transition:opacity 0s 0.4s linear;
	-webkit-transition:opacity 0s 0.4s linear;
}

.item:hover .roll .left, .item:hover .roll .right {
	opacity:1;	
	transition:opacity 0s 0.3s linear;
	-webkit-transition:opacity 0s 0.3s linear;
}

.roll .left div, .roll .right div {
	width:50%;
	height:100%;
	top:0;
	position:absolute;	
	background-color:#774021;
}

.roll .left div {
	left:0;
	-webkit-transform: rotateY(90deg);
	-webkit-transform-origin: right center;
    transform: rotateY(90deg);
	transform-origin: right center;
	transition:all 0.3s 0.2s ease-out;
	-webkit-transition:all 0.3s 0.2s ease-out;
}

.roll .right div {
	right:0;
	opacity:0.9;
	-webkit-transform: rotateY(75deg);
	-webkit-transform-origin: left center;
    transform: rotateY(-75deg);
	transform-origin: left center;
	transition:all 0.3s 0.2s ease-out;
	-webkit-transition:all 0.3s 0.2s ease-out;
}

.item:hover .roll .left div, .item:hover .roll .right div {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	transition:all 0.3s 0.3s linear;
	-webkit-transition:all 0.3s 0.3s linear;
}

.item1:hover img, .item2:hover img, .item3:hover img {
	transition:opacity 0.3s 0.3s linear;
	-webkit-transition:opacity 0.3s 0.3s linear;
}

.item:hover img {
	opacity:0;	
}

.item .info_container { 
	display: table;
	height: 100%;
	width: 100%;
}

.item .info {
	position:relative;
	display: table-cell;
  	vertical-align: middle;
	width:100%;
	/*top:18%*/;	
}

.item h2 {
	position:relative;
	margin:0 auto;
	opacity:0;
	width:80%;
	text-align:center;
	font-family:Prata, Georgia, sans-serif;
	font-size:50px;
	line-height:60px;
	letter-spacing:4px;
	font-weight:normal;
	color:#FFF;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:opacity 0.2s ease-out, margin-top 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out, margin-top 0.2s ease-out;
}

.item:hover h2 {
	opacity:1;
	transition:opacity 0.5s 0.6s ease-in;
	-webkit-transition:opacity 0.5s 0.6s ease-in;
}

@media screen and (min-width: 1700px) {
	.item h2 {
		font-size: 60px;
  		line-height: 70px;
  		letter-spacing: 4px;
  	}
}

@media screen and (max-width: 1400px) {
	.item h2 {
		font-size: 46px;
  		line-height: 54px;
  		letter-spacing: 3px;
  	}
}

@media screen and (max-width: 1280px) {
	.item h2 {
		font-size: 38px;
  		line-height: 46px;
  		letter-spacing: 2px;
	}
	
}

@media screen and (max-width: 1150px) {
	.item h2 {
		font-size: 36px;
  		line-height: 43px;
  		letter-spacing: 2px;
	}
}

.item .line {
	position:relative;
	width:100%;
	height:70px;
	margin-top:40px;
	margin-bottom:40px;
	background: linear-gradient(to top, rgba(255,233,191,0) 50%, rgba(255,233,191,1) 50%);
	background-position:center bottom;
	background-size:4px 200%;
	background-repeat:no-repeat;
	transition:background-position 0.2s ease-out;
	-webkit-transition:background-position 0.2s ease-out;
}

.item:hover .line {
	background-position:center top;
	transition:background-position 0.2s 1s ease-out;
	-webkit-transition:background-position 0.2s 1s ease-out;
}

.item .role {
	position:relative;
	width:80%;
	margin:0 auto;
	text-align:center;
	font-family:Prata, Georgia, sans-serif;
	font-size:15px;
	line-height:20px;
	letter-spacing:1px;
	color:#ffe9bf;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.item .role span {
	opacity:0;	
	transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

.item:hover .role span.role1 {
	opacity:1;	
	transition:opacity 0.5s 1.3s ease-out;
	-webkit-transition:opacity 0.5s 1.3s ease-out;
}


.item:hover .role span.role2 {
	opacity:1;	
	transition:opacity 0.5s 1.5s ease-out;
	-webkit-transition:opacity 0.5s 1.5s ease-out;
}

.item:hover .role span.role3 {
	opacity:1;	
	transition:opacity 0.5s 1.7s ease-out;
	-webkit-transition:opacity 0.5s 1.7s ease-out;
}

.item:hover .role span.role4 {
	opacity:1;	
	transition:opacity 0.5s 1.9s ease-out;
	-webkit-transition:opacity 0.5s 1.9s ease-out;
}



/* PROJET *****************************************/

#projet {
	position:absolute;
	z-index:3;
	top:0;
	width:100%;	
	height:0;
	opacity:0;
	transition:opacity 0s 1s linear, height 0s 1s linear;
	-webkit-transition:opacity 0s 1s linear, height 0s 1s linear;
}

body.projet #projet {
	height:auto;
	min-height:100%;
	opacity:1;	
	transition:opacity 1s linear;
	-webkit-transition:opacity 1s linear;
}


body.about #projet {
	height:0;
	overflow:hidden;
	transition:height 0s 0.5s linear;	
	-webkit-transition:height 0s 0.5s linear;
}


#projet_bg {
	position:fixed;
	z-index:0;
	width:100%;
	height:0;
	opacity:0;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-size:cover !important;	
}


#projet_bg:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(projects/spykar/color.jpg), url(projects/indiabulls/color.jpg), url(projects/sky/color.jpg), url(projects/palava/color.jpg), url(projects/welspun/color.jpg), url(projects/spun/color.jpg), url(projects/aegon/color.jpg), url(projects/golf/color.jpg), url(projects/greens/color.jpg), url(projects/prius/color.jpg); 
}

body.spykar #projet_bg, body.indiabulls #projet_bg, body.sky #projet_bg, body.palava #projet_bg, body.welspun #projet_bg, body.spun #projet_bg, body.aegon #projet_bg, body.golf #projet_bg, body.greens #projet_bg, body.prius #projet_bg, body.lerecyclagepasapas #projet_bg, body.inlogia #projet_bg, body.witchatt #projet_bg, body.antro #projet_bg, body.origami #projet_bg, body.legrandbal #projet_bg {
	height:100%;
	opacity:1;
	transition:opacity 1s 0.3s linear, background 0s linear;
	-webkit-transition:opacity 1s 0.3s linear, background 0s linear;
}

body.spykar #projet_bg { background:url(projects/spykar/color.jpg); }
body.indiabulls #projet_bg { background:url(projects/indiabulls/color.jpg); }
body.sky #projet_bg { background:url(projects/sky/color.jpg); }
body.palava #projet_bg { background:url(projects/palava/color.jpg); }
body.welspun #projet_bg { background:url(projects/welspun/color.jpg); }
body.spun #projet_bg { background:url(projects/spun/color.jpg); }
body.aegon #projet_bg { background:url(projects/aegon/color.jpg); }
body.golf #projet_bg { background:url(projects/golf/color.jpg); }
body.greens #projet_bg { background:url(projects/greens/color.jpg); }
body.prius #projet_bg { background:url(projects/prius/color.jpg); }

body.closing #projet_bg {
	opacity:0 !important;
	transition:opacity 1s 2s linear, height 0s 3s linear, background 0s 3s linear;
	-webkit-transition:opacity 1s 2s linear, height 0s 3s linear, background 0s 3s linear;
}

#projet_intro {
	position:fixed;
	z-index:0;
	width:100%;
	height:0;
	opacity:1;
	display:table;
	transition:height 0s 1s linear;
	-webkit-transition:height 0s 1s linear;
}

body.projet #projet #projet_intro, #projet_intro.transition {
	height:100%;
}

/* .title {
	position:absolute;
	width:80%;
	left:10%;
	top:35%;
	height:auto;
}*/

.title {
	position:relative;
	width:80%;
	left:10%;
	display:table-cell;
	vertical-align:middle;
	height:auto;
}

h1 {
	position:relative;
	margin:0 auto;
	opacity:0;
	width:80%;
	text-align:center;
	font-family:Prata, Georgia, sans-serif;
	font-size:90px;
	line-height:100px;
	letter-spacing:4px;
	font-weight:normal;
	color:#FFF;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:opacity 0.2s 0.6s ease-out, margin-top 0.2s 1s ease-out;
	-webkit-transition:opacity 0.2s 0.6s ease-out, margin-top 0.2s 1s ease-out;
}

body.projet #projet h1 {
	opacity:1;
	transition:opacity 0.5s 1s ease-in;
	-webkit-transition:opacity 0.5s 1s ease-in;
}

#projet .line {
	position:relative;
	width:100%;
	height:70px;
	margin-top:50px;
	margin-bottom:50px;
	background: linear-gradient(to top, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%);
	background-position:center bottom;
	background-size:4px 200%;
	background-repeat:no-repeat;
	transition:background-position 0.2s 0.4s ease-out;
	-webkit-transition:background-position 0.2s 0.4s ease-out;
}

body.projet #projet .line {
	background-position:center top;
	transition:background-position 0.2s 1.4s ease-out;
	-webkit-transition:background-position 0.2s 1.4s ease-out;
}

#projet .role {
	position:relative;
	width:80%;
	margin:0 auto;
	text-align:center;
	font-family:Prata, Georgia, sans-serif;
	font-size:15px;
	line-height:20px;
	letter-spacing:1px;
	color:#FFFFFF;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.projet #projet .role span {
	opacity:0;	
	transition:opacity 0.2s 1.8s ease-out;
	-webkit-transition:opacity 0.2s 1.8s ease-out;
}

#projet .role span.role1, #projet .role span.role2, #projet .role span.role3, #projet .role span.role4 {
	opacity:0;	
	transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

body.projet #projet .role span.role1 {
	opacity:1;	
	transition:opacity 0.5s 1.8s ease-out;
	-webkit-transition:opacity 0.5s 1.8s ease-out;
}


body.projet #projet .role span.role2 {
	opacity:1;	
	transition:opacity 0.5s 2.3s ease-out;
	-webkit-transition:opacity 0.5s 2.3s ease-out;
}

body.projet #projet .role span.role3 {
	opacity:1;	
	transition:opacity 0.5s 2.5s ease-out;
	-webkit-transition:opacity 0.5s 2.5s ease-out;
}

body.projet #projet .role span.role4 {
	opacity:1;	
	transition:opacity 0.5s 2.7s ease-out;
	-webkit-transition:opacity 0.5s 2.7s ease-out;
}


#projet .mousescroll {
	position:absolute;
	bottom:8%;
	left:50%;
	margin-left:-10px;
	width:21px;
	height:37px;
	opacity:0;
	background:url(design/mousescroll.png) no-repeat;
	transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

body.projet #projet .mousescroll {
	opacity:1;	
	transition:opacity 0.5s 2.3s ease-out;
	-webkit-transition:opacity 0.5s 2.3s ease-out;
}

#projet_content {
	position:absolute;
	top:100%;
	z-index:6;
	width:100%;
	height:auto;
	background:#FFF;
	display:none;
	padding-bottom:300px;
}

body.nav #projet_content {
	display:block;
}

body.nav #projet_content.transition {
	display:none;
}

#projet_info {
	position:relative;
	width:84%;
	max-width:1500px;
	height:auto;
	margin:100px auto;
	padding:110px 150px;
	-webkit-box-sizing: border-box; 
  	-moz-box-sizing: border-box;   
  	box-sizing: border-box;   
}

body.spykar #projet_info { background:#b1927a; }
body.origami #projet_info { background:#b1927a; }
body.antro #projet_info { background:#b1927a; }
body.palava #projet_info { background:#b1927a; }
body.sky #projet_info { background:#b1927a; }
body.legrandbal #projet_info { background:#b1927a; }
body.golf #projet_info { background:#b1927a; }
body.greens #projet_info { background:#b1927a; }
body.inlogia #projet_info { background:#b1927a; }
body.prius #projet_info { background:#b1927a; }
body.aegon #projet_info { background:#b1927a; }
body.lerecyclagepasapas #projet_info { background:#b1927a; }
body.witchatt #projet_info { background:#b1927a; }
body.spun #projet_info { background:#b1927a; }
body.welspun #projet_info { background:#b1927a; }
body.indiabulls #projet_info { background:#b1927a; }

#projet_info p {
	font-family:"Futura W01 Book", Arial, sans-serif;
	font-size:14px;
	line-height:26px;
	color:#FFF;
	width:460px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#projet_info ul, #projet_info li {
	margin:0;
	padding:0;
	list-style:none;
	font-family:"Futura W01 Book", Arial, sans-serif;
	font-size:12px;
	line-height:20px;
	letter-spacing:1px;
	color:#FFF;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.palava #projet_info ul, body.palava  #projet_info li, body.palava  #projet_info p {
	color:#ffffff;
}

#projet_info ul {
	margin-top:30px;
}

#projet_info span {
	text-transform:uppercase;
	font-family:"Futura W01 Heavy", Arial, sans-serif;
}

#viewcasestudy {
	position: absolute;
	display:block;
	bottom: 90px;
	right: 0;
	font-family: "Futura W01 Heavy", Arial, sans-serif;
	font-size: 10px;
	line-height: 20px;
	letter-spacing: 2px;
	padding-left: 50px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	background: linear-gradient(to right, #FFF 50%, #FFF 50%) no-repeat left center;
	background-size:2px 30px;
	cursor:pointer;
}

#icone_fb, #icone_voir {
	margin-top:25px;
	display:inline-block;
	cursor:pointer;
}

#backtotop {
	margin:60px auto 0 auto;
	width:60px;
	height:60px;
	border-radius:50%;
	border:1px solid #000;
	cursor:pointer;
	background-image: linear-gradient(to top, #000 50%, #FFF 50%);
	background-position:top center;
	background-repeat:repeat;
	background-size:100% 200%;
	transition:all 0.2s ease-out;
}

#backtotop:hover {
	background-position:bottom center;
}

#backtotop svg polygon {
	fill:#000;
	transition:all 0.2s ease-out;
}

#backtotop:hover svg polygon {
	fill:#FFF !important;
}

body.spykar #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.origami #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.antro #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.palava #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.sky #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.legrandbal #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.golf #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.greens #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.inlogia #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.prius #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.aegon #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.lerecyclagepasapas #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.witchatt #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.spun #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.welspun #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }
body.indiabulls #backtotop { background-image: linear-gradient(to top, #774021 50%, #FFF 50%); }

body.spykar #backtotop { border:1px solid #774021; }
body.origami #backtotop { border:1px solid #774021; }
body.antro #backtotop { border:1px solid #774021; }
body.palava #backtotop { border:1px solid #774021; }
body.sky #backtotop { border:1px solid #774021; }
body.legrandbal #backtotop { border:1px solid #774021; }
body.golf #backtotop { border:1px solid #774021; }
body.greens #backtotop { border:1px solid #774021; }
body.inlogia #backtotop { border:1px solid #774021; }
body.prius #backtotop { border:1px solid #774021; }
body.aegon #backtotop { border:1px solid #774021; }
body.lerecyclagepasapas #backtotop { border:1px solid #774021; }
body.witchatt #backtotop { border:1px solid #774021; }
body.spun #backtotop  { border:1px solid #774021; }
body.welspun #backtotop { border:1px solid #774021; }
body.indiabulls #backtotop { border:1px solid #774021; }

body.spykar #backtotop svg polygon { fill:#774021; }
body.origami #backtotop svg polygon { fill:#774021; }
body.antro #backtotop svg polygon { fill:#774021; }
body.palava #backtotop svg polygon { fill:#774021; }
body.sky #backtotop svg polygon { fill:#774021; }
body.legrandbal #backtotop svg polygon { fill:#774021; }
body.golf #backtotop svg polygon { fill:#774021; }
body.greens #backtotop svg polygon { fill:#774021; }
body.inlogia #backtotop svg polygon { fill:#774021; }
body.prius #backtotop svg polygon { fill:#774021; }
body.aegon #backtotop svg polygon { fill:#774021; }
body.lerecyclagepasapas #backtotop svg polygon { fill:#774021; }
body.witchatt #backtotop svg polygon { fill:#774021; }
body.spun #backtotop svg polygon { fill:#774021; }
body.welspun #backtotop svg polygon { fill:#774021; }
body.indiabulls #backtotop svg polygon { fill:#774021; }

svg circle, svg path {
	transition:all 0.4s ease-out !important;
	-webkit-transition:all 0.4s ease-out !important;
}

body.antro svg circle { stroke:#608484; }
body.antro svg path, body.antro svg:hover circle { fill:#608484; }
body.antro svg:hover path { fill:#FFF; }
body.palava svg circle { stroke:#426b29; }
body.palava svg path, body.palava svg:hover circle { fill:#426b29; }
body.palava svg:hover path { fill:#FFF; }
body.golf svg circle { stroke:#787d78; }
body.golf svg path, body.golf svg:hover circle { fill:#787d78; }
body.golf svg:hover path { fill:#FFF; }
body.greens svg circle { stroke:#a1366e; }
body.greens svg path, body.greens svg:hover circle { fill:#a1366e; }
body.greens svg:hover path { fill:#FFF; }
body.inlogia svg circle { stroke:#726b6c; }
body.inlogia svg path, body.inlogia svg:hover circle { fill:#726b6c; }
body.inlogia svg:hover path { fill:#FFF; }
body.aegon svg circle { stroke:#1f7271; }
body.aegon svg path, body.aegon svg:hover circle { fill:#1f7271; }
body.aegon svg:hover path { fill:#FFF; }


body.spykar #projet_info span { color:#ffffff; font-weight:bold; }
body.origami #projet_info span { color:#ffffff; font-weight:bold; }
body.antro #projet_info span { color:#ffffff;  font-weight:bold;}
body.palava #projet_info span { color:#ffffff; font-weight:bold; }
body.sky #projet_info span { color:#ffffff;  font-weight:bold;}
body.legrandbal #projet_info span { color:#ffffff; font-weight:bold; }
body.golf #projet_info span { color:#ffffff; font-weight:bold; }
body.greens #projet_info span { color:#ffffff;  font-weight:bold;}
body.inlogia #projet_info span { color:#ffffff; font-weight:bold; }
body.prius #projet_info span { color:#ffffff; font-weight:bold; }
body.aegon #projet_info span { color:#ffffff; font-weight:bold; }
body.lerecyclagepasapas #projet_info span { color:#ffffff; font-weight:bold; }
body.witchatt #projet_info span { color:#ffffff;  font-weight:bold;}
body.spun #projet_info span { color:#ffffff; font-weight:bold; }
body.welspun #projet_info span { color:#ffffff; font-weight:bold; }
body.indiabulls #projet_info span { color:#ffffff;  font-weight:bold;}

body.spykar #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.origami #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.antro #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.palava #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.sky #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.legrandbal #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.golf #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.greens #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.inlogia #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.prius #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.aegon #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.lerecyclagepasapas #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.witchatt #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.spun #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.welspun #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }
body.indiabulls #viewcasestudy { background: linear-gradient(to right, #47291f 50%, #47291f 50%) no-repeat left center;background-size: 30px 2px; }

#screenshots {
	position: relative;
 	width: 84%;
	max-width:1500px;
	margin:0 auto;
 	height: auto;
}

.demi {
	width:50%;
	height:auto;
	float:left;	
	perspective:600px;
	-webkit-perspective:600px;
}

.full {
	width:100%;
	height:auto;
	clear:both;	
	perspective:600px;
	-webkit-perspective:600px;
}

.demi img, .full img {
	width:100%;	
	height:auto;
	display:block;
}

#screenshots img {
	opacity:0.7;
	transform:rotateX(12deg);
	-webkit-transform:rotateX(12deg);
}

#screenshots .display img {
	opacity:1;
	transform:rotateX(0deg);
	-webkit-transform:rotateX(0deg);
	transition:all 0.4s ease-out;
	-webkit-transition:all 0.4s ease-out;	
}

#screenshots p {
	font-size:15px;
	font-family:"Prata", Georgia, serif;
	color:#4c4c4c;
	margin:30px 0 70px 0;
	letter-spacing:1px;
}

#screenshots span {
	font-size:15px;
	font-family:"Futura W01 Book", Arial, sans-serif;
	color:#a0a0a0;
	display:inline-block;
	margin:0 0 5px 20px;
	padding-left:20px;
	border-left:1px solid #4C4C4C;
	letter-spacing:0;
}

#screenshots p a {
	font-family:"Futura W01 Book", Arial, sans-serif;
	color:#cdb586;
	text-decoration:none;
	text-transform:uppercase;
	line-height:21px;
	letter-spacing:0;
	background: linear-gradient(to right, #cdb586 50%, rgba(255,255,255,1) 50%);
	background-position:left bottom;
	background-size:200% 1px;
	background-repeat:no-repeat;
	transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
}


#screenshots p a:hover {
	font-family:"Futura W01 Book", Arial, sans-serif;
	color:#cdb586;
	text-decoration:none;
	text-transform:uppercase;
	line-height:21px;
	letter-spacing:0;
	background-position:right bottom;
}

/* NAVIGATION PROJET *****************************************/

.previous {
	position:fixed;
	z-index:4;
	overflow:hidden;
	width:140px;
	height:100%;
	top:0;
	left:-140px;
	opacity:0;
	cursor:pointer;
	background:url(design/transparent.png);
	background-repeat:no-repeat;
	background-size:cover;
}

body.nav .previous {
	left:0;
	opacity:1;
	transition:opacity 0.5s 2.3s ease-out, left 0.5s 2.3s ease-out, width 0s;	
	-webkit-transition:opacity 0.5s 2.3s ease-out, left 0.5s 2.3s ease-out, width 0s;	
}

body.nav .previous.transition {
	width:100%;
	transition:background 0.5s ease-out, width 1s 0.8s ease-in-out;
	-webkit-transition:background 0.5s ease-out, width 1s 0.8s ease-in-out;
}

body.nav .previous span {
	position: absolute;
	display: block;
	top: 50%;
	left: -20px;
	height: 60px;
	padding-top: 80px;
	text-align: center;
	width: 200px;
	font-family: "Futura W01 Heavy", Arial, sans-serif;
	font-size: 15px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: url(design/fleche_prev.png);
	background-repeat: no-repeat;
	background-position: center 35px;
	background-size: 11px 7px;
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	transition: left 0.2s ease-out, background-position 0.2s ease-out;
	-webkit-transition: left 0.2s ease-out, background-position 0.2s ease-out;
}

body.nav .previous:hover span {
	left:-50px;
	background-position: center 0;
}

.next {
	position:fixed;
	z-index:4;
	overflow:hidden;
	width:140px;
	height:100%;
	top:0;
	right:-140px;
	background-size:7px 11px;
	opacity:0;
	cursor:pointer;
	background:url(design/transparent.png);
	background-repeat:no-repeat;
	background-size:cover;
}

body.nav .next {
	right:0;
	opacity:1;	
	transition:opacity 0.5s 2.3s ease-out, right 0.5s 2.3s ease-out, width 0s;
	-webkit-transition:opacity 0.5s 2.3s ease-out, right 0.5s 2.3s ease-out, width 0s;
}

body.nav .next.transition {
	width:100%;
	transition:background 0.5s ease-out, width 1s 0.8s ease-in-out;
	-webkit-transition:background 0.5s ease-out, width 1s 0.8s ease-in-out;
}

body.nav .next span {
	position: absolute;
	display: block;
	top: 50%;
	right: -20px;
	height: 20px;
	padding-bottom: 80px;
	padding-top: 40px;
	margin-top: -10px;
	text-align: center;
	width: 200px;
	font-family: "Futura W01 Heavy", Arial, sans-serif;
	font-size: 15px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-top: -10px;
	background: url(design/fleche_next.png);
	background-repeat: no-repeat;
	background-position: center 90px;
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	transition: right 0.2s ease-out;
	-webkit-transition: right 0.2s ease-out;
}

body.nav .next:hover span {
	right:-60px;
	background-position: center 110px;
}

body.nav .previous .previous_bg {
	/*background:url(background/general.jpg);*/
	background-repeat:no-repeat !important;
	background-size:cover !important;
	background-position:center center !important;
	width:100%;
	height:100%;
	left:0;
	position:absolute;
	opacity:0;
	transition:background 0.5s ease-out;
	-webkit-transition:background 0.5s ease-out;
}

body.nav .previous:hover .previous_bg, body.nav .next:hover .next_bg, body.nav .previous.transition .previous_bg, body.nav .next.transition .next_bg {
	opacity:1;
	transition:opacity 0.5s ease-out;	
	-webkit-transition:opacity 0.5s ease-out;	
}

body.nav .next .next_bg {
	/*background:url(background/general.jpg);*/
	background-repeat:no-repeat !important;
	background-size:cover !important;
	background-position:center center !important;
	width:100%;
	height:100%;
	right:0;
	position:absolute;
	opacity:0;
	transition:background 0.5s ease-out;
	-webkit-transition:background 0.5s ease-out;
}

body.nav.spykar .previous .previous_bg { background:url(projects/prius/color.jpg); }
body.nav.indiabulls .previous .previous_bg { background:url(projects/spykar/color.jpg); }
body.nav.sky .previous .previous_bg { background:url(projects/indiabulls/color.jpg); }
body.nav.palava .previous .previous_bg { background:url(projects/sky/color.jpg); }
body.nav.welspun .previous .previous_bg { background:url(projects/palava/color.jpg); }
body.nav.spun .previous .previous_bg { background:url(projects/welspun/color.jpg); }
body.nav.aegon .previous .previous_bg { background:url(projects/spun/color.jpg); }
body.nav.golf .previous .previous_bg { background:url(projects/aegon/color.jpg); }
body.nav.greens .previous .previous_bg { background:url(projects/golf/color.jpg); }
body.nav.prius .previous .previous_bg { background:url(projects/greens/color.jpg); }


body.nav.spykar .next .next_bg { background:url(projects/indiabulls/color.jpg); }
body.nav.indiabulls .next .next_bg { background:url(projects/sky/color.jpg); }
body.nav.sky .next .next_bg { background:url(projects/palava/color.jpg); }
body.nav.palava .next .next_bg { background:url(projects/welspun/color.jpg); }
body.nav.welspun .next .next_bg{ background:url(projects/spun/color.jpg); }
body.nav.spun .next .next_bg { background:url(projects/aegon/color.jpg); }
body.nav.aegon .next .next_bg { background:url(projects/golf/color.jpg); }
body.nav.golf .next .next_bg { background:url(projects/greens/color.jpg); }
body.nav.greens .next .next_bg { background:url(projects/prius/color.jpg); }
body.nav.prius .next .next_bg { background:url(projects/spykar/color.jpg); }


/* ABOUT *****************************************/

#about {
	position:absolute;
	width:100%;
	top:100%;
	background:#FFF;
	z-index:9;
	padding:250px 0 300px 0;
	opacity:1;
	height:0;
	min-height:100%;
	transition:all 1s ease-out;
	-webkit-transition:all 1s ease-out;
}

.masqueblanc {
	z-index:8;
	background:#FFF;
	position:fixed;
	width:100%;
	height:0;
	opacity:0;
	transition:opacity 0.5s 2s ease-out, height 0s 2.5s ease-out;;
	-webkit-transition:opacity 0.5s 2s ease-out, height 0s 2.5s ease-out;;;
}

body.about .masqueblanc, body.contact .masqueblanc {
	opacity:1;
	height:100%;
	transition:opacity 0s 0.5s ease-out, height 0s 0.5s ease-out;
	-webkit-transition:opacity 0s 0.5s ease-out, height 0s 0.5s ease-out;
}

#about.pfix {
	position:fixed;
	min-height:0;
	opacity:0;
}

body.about #about {
	position:absolute;
	opacity:1;
	height:auto;
	top:0;
	min-height:1000px;
	transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
}

#about_info, #contact_info {
	position:relative;
	display:table;
	width:84%;
	margin:0 auto;
	opacity:0;
	height:0;
	transition:height 1s 0.5s ease-in-out, opacity 1.5s;
	-webkit-transition:height 1s 0.5s ease-in-out, opacity 1.5s;
}

body.about #about_info, body.contact #contact_info {
	height:480px;	
	opacity:1;
	transition:opacity 1s 1s ease-in-out, height 1s 1s ease-in-out;
	-webkit-transition:opacity 1s 1s ease-in-out, height 1s 1s ease-in-out;
}


@media screen and (max-width: 1400px) {
	body.about #about_info, body.contact #contact_info {
		height:400px;	
	}
}

@media screen and (max-width: 1160px) {
	body.about #about_info, body.contact #contact_info {
		height:360px;	
	}
}

#about_info .image, #contact_info .image {
	position:absolute;
	z-index:0;
	width:100%;
	height:100%;
	overflow:hidden;	
}

#about_info img, #contact_info img {
	position:absolute;
	z-index:0;
	width:100%;
	height:auto;
	top:0;
	left:0;
	margin-top:0;	
}

#about_info p {
	position:relative;
	display:table-cell;
	vertical-align:middle;
	z-index:1;
	width:46%;
	padding-right:100px;
	font-family:"Futura W01 Book", Arial, sans-serif;
	font-size:14px;
	line-height:30px;
	color:#cdb586;
	letter-spacing:1px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#about_info p span {
	color:#bdbdbd;
}

.a, .b, .o, .u, .t, .contactC, .contactO, .contactN, .contactT, .contactA, .contactCC, .contactTT, .contactM, .contactE {
	z-index:1;
	display:block;
	position:absolute;
	color:#cdb586;
	font-size:90px;
	line-height:90px;
	font-family:Prata, Georgia, sans-serif;
	-webkit-font-smoothong:antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity:0;
	transition:all 1s ease-in-out;
	-webkit-transition:all 1s ease-in-out;
}

.a {
	left:10%;
	top:-30px;
}

.b {
	left:35%;
	top:-30px;
}

.o {
	left:10%;
	top:50%;
	margin-top:-40px;
}

.u {
	left:35%;
	top:50%;
	margin-top:-40px;
}

.t {
	left:10%;
	bottom:-40px;
}

body.about .a {
	opacity:1;
	transition:all 1s 1.5s ease-in-out;
	-webkit-transition:all 1s 1.5s ease-in-out;
}

body.about .b {
	opacity:1;
	transition:all 1s 1.65s ease-in-out;
	-webkit-transition:all 1s 1.65s ease-in-out;
}

body.about .o {
	opacity:1;
	transition:all 1s 1.8s ease-in-out;
	-webkit-transition:all 1s 1.8s ease-in-out;
}

body.about .u {
	opacity:1;
	transition:all 1s 1.95s ease-in-out;
	-webkit-transition:all 1s 1.95s ease-in-out;
}

body.about .t {
	opacity:1;
	transition:all 1s 2.1s ease-in-out;
	-webkit-transition:all 1s 2.1s ease-in-out;
}

body.about .underscore {
	opacity:1;
	transition:all 1s 2.25s ease-in-out;
	-webkit-transition:all 1s 2.25s ease-in-out;
}

.underscore  {
	position:absolute;
	z-index:1;
	left:35%;
	bottom:-35px;
	width:70px;
	height:4px;
	background:#cdb586;
}
 
#city_grid {
	 position:relative;
	 width:84%;
	 margin:1000px auto 100px auto;
	 opacity:0;
	 transition:margin 0.5s 1.5s ease-in-out,opacity 0.5s 1.5s ease-in-out;
	 -webkit-transition:margin 0.5s 1.5s ease-in-out,opacity 0.5s 1.5s ease-in-out;
}

body.about #city_grid {
	 margin:100px auto 100px auto;
	 opacity:1;
	 transition:margin 0.5s 1.5s ease-in-out,opacity 0.5s 1.5s ease-in-out;
	 -webkit-transition:margin 0.5s 1.5s ease-in-out,opacity 0.5s 1.5s ease-in-out;
}

#city_grid .perspective {
	perspective:600px;
	-webkit-perspective:600px;
	position:relative;
	width:50%; 
	height:550px;
	float:left;
}
 
.city {
	position:relative;
	width:100%; 
	height:100%;
	padding:50px;
	-webkit-box-sizing: border-box; 
  	-moz-box-sizing: border-box;   
  	box-sizing: border-box;   
	transition:background 0.6s ease-out;
	-webkit-transition:background 0.6s ease-out;
	opacity:0.7;
	transform:rotateX(12deg);
	-webkit-transform:rotateX(12deg);
}

.city.display {
	opacity:1;
	transform:rotateX(0deg);
	-webkit-transform:rotateX(0deg);
	transition:all 0.4s ease-out;
	-webkit-transition:all 0.4s ease-out;	
}
 
.lyon {
	z-index:1;
	background:url(design/ab4-roll.jpg) no-repeat center center;
	background-size:cover;
}

.lyon:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(design/ab4.jpg) center center no-repeat;	
}
 
.lyon:hover {
	background:url(design/ab4.jpg) no-repeat center center;
	background-size:cover;
}

.montreal {
	z-index:2;
	background:url(design/ab3-roll.jpg) no-repeat center center;
	background-size:cover;
}

.montreal:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(design/ab3.jpg) center center no-repeat;	
}

 
.montreal:hover {
	background:url(design/ab3.jpg) no-repeat center center;
	background-size:cover;
}

.paris {
	z-index:3;
	background:url(design/ab3-roll.jpg) no-repeat center center;
	background-size:cover;
}

.paris:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(design/ab3.jpg) center center no-repeat;	
}
 
.paris:hover {
	background:url(design/ab3.jpg) no-repeat center center;
	background-size:cover;
}

.sunderland {
	z-index:4;
	background:url(design/ab4-roll.jpg) no-repeat center center;
	background-size:cover;
}

.sunderland:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(design/ab4.jpg) center center no-repeat;	
}
 
.sunderland:hover {
	background:url(design/ab4.jpg) no-repeat center center;
	background-size:cover;
}
 
.city_info {
	position:relative;
	width:100%;
	height:100%;
	background:rgba(169,78,74,0.9);
	text-align:center;
	transition:background 0.5s 0.6s ease-out;
	-webkit-transition:background 0.5s 0.6s ease-out;
}

.city:hover .city_info {
	transition:background 0.5s ease-out;
	-webkit-transition:background 0.5s ease-out;
}

.degrade {
	position:absolute;
	width:100%;
	height:200px;
	bottom:0;
	opacity:1;
}


.lyon .city_info { background:rgba(169,78,74,0.9); }
.lyon:hover .city_info { background:rgba(169,78,74,0.6); }
/*.lyon .degrade { background: linear-gradient(to top, rgba(169,78,74,1) 0%, rgba(169,78,74,0) 100%); }*/
.montreal .city_info { background:rgba(19,71,110,0.9); }
.montreal:hover .city_info { background:rgba(19,71,110,0.6); }
/*.montreal .degrade { background: linear-gradient(to top, rgba(19,71,110,1) 0%, rgba(19,71,110,0) 100%); }*/
.paris .city_info { background:rgba(120,155,144,0.9); }
.paris:hover .city_info { background:rgba(120,155,144,0.6); }
/*.paris .degrade { background: linear-gradient(to top, rgba(120,155,144,1) 0%, rgba(120,155,144,0) 100%); }*/
.sunderland .city_info { background:rgba(203,207,174,0.9); }
.sunderland:hover .city_info { background:rgba(203,207,174,0.6); }
/*.sunderland .degrade { background: linear-gradient(to top, rgba(203,207,174,1) 0%, rgba(203,207,174,0) 100%); }*/

h3 {
	position:absolute;
	top:50%;
	width:100%;
	margin-top:-30px;
	font-family:Prata, Georgia, sans-serif;
	font-size:65px;
	line-height:65px;
	color:#FFF;
	text-align:center;
	letter-spacing:8px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:margin-top 0.2s 0.6s ease-out;
	-webkit-transition:margin-top 0.2s 0.6s ease-out;
}
 
.city:hover h3 {
	margin-top:-110px;
	transition:margin-top 0.2s ease-out;
	-webkit-transition:margin-top 0.2s ease-out;
}

@media screen and (max-width: 1400px) {
	h3 {
		margin-top:-24px;
		font-size:50px;
		line-height:50px;
	}
	 
	.city:hover h3 {
		margin-top:-100px;
	}
	
	.city_info .position {
		margin-top:80px;
	}

}

@media screen and (max-width: 1160px) {
	h3 {
		margin-top:-20px;
		font-size:42px;
		line-height:42px;
	}
	 
	.city:hover h3 {
		margin-top:-90px;
	}
	
	.city_info .position {
		margin-top:50px;
	}
}
 
.city_info .line {
	position:absolute;
	top:50%;
	width:100%;
	height:70px;
	margin-top:20px;
	background: linear-gradient(to top, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%);
	background-position:center bottom;
	background-size:4px 200%;
	background-repeat:no-repeat;
	transition:background-position 0.2s 0.4s ease-out;
	-webkit-transition:background-position 0.2s 0.4s ease-out;
}

.city:hover .city_info .line {
	background-position:center top;
	transition:background-position 0.2s 0.4s ease-out;
	-webkit-transition:background-position 0.2s 0.4s ease-out;
}

.city_info .position {
	position:absolute;
	top:50%;
	width:100%;
	margin-top:100px;
	opacity:0;
	font-family:"Futura W01 Book", arial, sans-serif;
	font-size:14px;
	line-height:14px;
	color:#FFF;
	text-align:center;
	letter-spacing:2px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition:opacity 0.2s 0.2s ease-out;
	-webkit-transition:opacity 0.2s 0.2s ease-out;
}

.city:hover .city_info .position {
	opacity:1;
	transition:opacity 0.2s 0.7s ease-out;
	-webkit-transition:opacity 0.2s 0.7s ease-out;
}

.year1, .year2 {
	position:absolute;
	bottom:20px;	
	font-family:"Futura W01 Book", arial, sans-serif;
	font-size:10px;
	line-height:10px;
	color:#FFF;
	text-transform:uppercase;
	letter-spacing:2px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity:0;
	transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

.year1 {
	text-align:left;
	left:20px;
}

.year2 {
	text-align:right;
	right:20px;
}

.city:hover .year1, .city:hover .year2 {
	opacity:1;
	transition:opacity 0.2s 0.9s ease-out;
	-webkit-transition:opacity 0.2s 0.9s ease-out;
}


/* CONTACT *****************************************/

#contact {
	position:absolute;
	width:100%;
	top:100%;
	background:#FFF;
	z-index:9;
	padding:250px 0 300px 0;
	opacity:1;
	height:0;
	min-height:100%;
	transition:all 1s ease-out;
	-webkit-transition:all 1s ease-out;
}

#contact.pfix {
	position:fixed;
	min-height:0;
	opacity:0;
}

body.contact #contact {
	position:absolute;
	opacity:1;
	height:auto;
	top:0;
	min-height:1000px;
	transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
}

.contactC, .contactO, .contactN, .contactT, .contactA, .contactCC, .contactTT, .contactM, .contactE {
  width: 80px;
  text-align: center;
}


.contactC {
	left:23%;
	top:-30px;
}

.contactO {
	left:50%;
	margin-left:-40px;
	top:-30px;
}

.contactN {
	right:23%;
	top:-30px;
}

.contactT {
	left:23%;
	top:50%;
	margin-top:-30px;
}


.contactA {
	left:50%;
	margin-left:-40px;
	top:50%;
	margin-top:-30px;
}


.contactCC {
	right:23%;
	top:50%;
	margin-top:-30px;
}

.contactTT {
	left:23%;
	bottom:-45px;
}

.contactM {
	left:50%;
	margin-left:-40px;
	bottom:-45px;
	color:#cdcdcd;
}


.contactE {
	right:23%;
	bottom:-45px;
	color:#cdcdcd;
}

body.contact .contactC {
	opacity:1;
	transition:all 1s 1.5s ease-in-out;
	-webkit-transition:all 1s 1.5s ease-in-out;
}

body.contact .contactO {
	opacity:1;
	transition:all 1s 1.65s ease-in-out;
	-webkit-transition:all 1s 1.65s ease-in-out;
}

body.contact .contactN {
	opacity:1;
	transition:all 1s 1.8s ease-in-out;
	-webkit-transition:all 1s 1.8s ease-in-out;
}

body.contact .contactT {
	opacity:1;
	transition:all 1s 1.95s ease-in-out;
	-webkit-transition:all 1s 1.95s ease-in-out;
}

body.contact .contactA {
	opacity:1;
	transition:all 1s 2.1s ease-in-out;
	-webkit-transition:all 1s 2.1s ease-in-out;
}

body.contact .contactCC {
	opacity:1;
	transition:all 1s 2.25s ease-in-out;
	-webkit-transition:all 1s 2.25s ease-in-out;
}

body.contact .contactTT {
	opacity:1;
	transition:all 1s 2.4s ease-in-out;
	-webkit-transition:all 1s 2.4s ease-in-out;
}

body.contact .contactM {
	opacity:1;
	transition:all 1s 2.45s ease-in-out;
	-webkit-transition:all 1s 2.45s ease-in-out;
}

body.contact .contactE {
	opacity:1;
	transition:all 1s 2.6s ease-in-out;
	-webkit-transition:all 1s 2.6s ease-in-out;
}

#form {
	width:84%;
	margin:170px auto 100px auto;
	opacity:0;
	transition:opacity 1s ease-in-out;
	-webkit-transition:opacity 1s ease-in-out;
}

body.contact #form {
	opacity:1;
	transition:opacity 0.5s 2.6s ease-in-out;
	-webkit-transition:opacity 0.5s 2.6s ease-in-out;
}

#contactleft, #contactright {
	position:relative;
	width:45%;
	font-family:"Futura W01 Book", Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#978156;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
}

#contactleft {
	float:left;
}

#contactright {
	float:right;
}

textarea {
	width:100%;
	border:none;
	padding:-15px 0 15px 0;
	margin-top:0px;
	margin-bottom:25px;
	color:#929292;
	background:url(design/line.png);
	background-repeat:repeat;
	background-position:0 0px;
	font-family:"Futura W01 Book", Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size:14px;
	line-height:50px;
	outline: none;
	opacity:1;
	resize: none;
}

input {
	opacity:1;
	border:none;
	border-bottom:3px solid #cdcdcd;
	padding:15px 0px;
	margin-top:0px;
	margin-bottom:47px;
	background:none;
	color:#929292;
	font-family:'Futura W01 Book', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size:14px;
	outline: none;
}

label {
	text-transform:uppercase;
	letter-spacing:4px;
}

#contactleft input {
	width:100%;
}
	
#contactright textarea {
	width:100%;
	height:400px;
}

#contactright legend {
	margin-top:0px;
}
	
.error {
	position: relative;
	color: #929292;
	text-align: center;
	width: 100%;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input.envoyer {
	position: relative;
	display: block;
	padding: 0;
	border: 3px solid #978156;
	font-family: "Futura W01 Heavy", Arial, sans-serif;
	font-weight:bold;
	color: #978156;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-transform: uppercase;
	width: 100%;
	height: 100px;
	font-size: 18px;
	line-height: 100px;
	letter-spacing: 5px;
	text-align: center;
	cursor: pointer;
	margin-top:50px;
	font-weight: normal;
	-webkit-box-sizing: border-box; 
  	-moz-box-sizing: border-box;   
  	box-sizing: border-box;   
	opacity: 1;
	background: linear-gradient(to bottom, #978156 50%, #FFF 50%);
	background-position:0 -100px;
	background-size:100% 200px;
	background-repeat:no-repeat;
	transition:all 0.3s ease-in-out;
}

input.envoyer:hover {
	color:#FFF;
	background-position:0 0;
}

#social {
	width:84%;
	margin:100px auto;
	opacity:0;
	transition:opacity 1s ease-in-out;
	-webkit-transition:opacity 1s ease-in-out;
}

body.contact #social {
	opacity:1;
	transition:opacity 0.5s 2.6s ease-in-out;
	-webkit-transition:opacity 0.5s 2.6s ease-in-out;
}

#social a {
	display:block;
	width:25%;
	float:left;
	height:0;
	padding-bottom:25%;
	background-color:#ccc;
	opacity:1;
	transition:background-color 0.3s linear, background 0.3s linear;
	-webkit-transition:background-color 0.3s linear, background 0.3s linear;
}

#social a:nth-child(2n+0) {
	background-color:#ddd;
}

.pinterest {
	background:url(design/social_pinterest.png) center center no-repeat;	
}

#social a.pinterest:hover {
	background-color:#bd1e23;
}

.linkedin {
	background:url(design/social_linkedin.png) center center no-repeat;	
}

#social a.linkedin:hover {
	background-color:#007bb6;
}

.society6 {
	background:url(design/social_society6.png) center center no-repeat;	
}

.society6:before {
	content: '';
	width:0;
	height:0;
	visibility:hidden;
	background:url(design/social_society6noir.png) center center no-repeat;	
}

#social a.society6:hover {
	background:url(design/social_society6noir.png) center center no-repeat;	
	background-color:#000;
}

.behance {
	background:url(design/social_behance.png) center center no-repeat;	
}

#social a.behance:hover {
	background-color:#0272f9;
}


/* FOOTER *****************************************/

footer {
	position:fixed;
	z-index:20;
	bottom:-200px;
	width:100%;
	height:200px;
	padding-top:50px;
	background:#222;
	font-size:15px;
	color:#777;
	font-family:'Futura W01 Book', Arial, sans-serif;
	font-weight:normal;	
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	transition:bottom 0.5s ease-out;
}

footer.visible {
	bottom:0;
}

footer .content {
	position:relative;
	width:84%;
	margin:0 auto;
	left:0;
}

#footerleft {
	width:50%;
	float:left;
	padding-right:50px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
 	box-sizing: border-box;
}

#footerright {
	width:50%;
	float:right;
	padding-left:50px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
 	box-sizing: border-box;
}

footer span { 
	display:block;
	margin-bottom:20px;
	font-size:20px;
	letter-spacing:2px;
	font-family:Prata, Arial, sans-serif;
	color:#FFF;
}

footer span.contactme {
	color:#FFF;
	text-decoration:none;
	display:inline;
	font-size:15px;
	letter-spacing:0;
	font-family:'Futura W01 Book', Arial, sans-serif;
	cursor:pointer;
}

footer a {
	color:#FFF;
	text-decoration:none;
}