@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 960px)  {

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

	#logo {
		margin-left: -44%;
		margin-top: -30%;
		width: 88%;
	}
	
	.item1, .item2, .item3, #grid>.content>div {
		width:100%;	
		margin-bottom:30px;
		clear:both;
	}
	
	#openmenu {
		position:fixed;
		display:block;
		z-index:20;
		width:40px;
		height:40px;
		top:40px;
		left:50%;
		margin-left:-20px;
		border:2px solid #888;
		border-radius:50%;
		text-align:center;
		font-family:"Futura Std", arial, sans-serif;
		font-size:16px;
		color:#888;
		letter-spacing:2px;
		text-transform:uppercase;
		background:url(design/menu.png) no-repeat center center;
		background-size:15px 14px;
	}
	
	nav {
		top:0;
		width:100%;
		height:100%;
		background:#666;	
		display:none;
		z-index:21;
	}

	nav.navtop {
		top:0 !important;
	}
	
	nav.visible {
		display:block;	
	}
	
	nav.closing {
		opacity:0;
		transition:opacity 0.6s ease-out;	
	}
	
	.menuworks, .menuabout, .menublog, .menucontact, .menu:hover, .menu.actif, nav.enter .menu, nav.enter .menuworks, nav.enter .menuabout, nav.enter .menublog, nav.enter .menucontact, nav.enter .menu:hover, nav.enter .menu.actif {
		position:relative;	
		top:auto;
		left:auto;
		right:0;
		margin:0;
		width:50%;
		height:50%;
		float:left;
		background: linear-gradient(to right, #cdb586  50%, rgba(152,152,152,0.8) 50%) !important;
		background-position: center center !important;
		background-size: 60% 3px !important;
		background-repeat: no-repeat !important;
		-webkit-box-sizing: border-box; 
  		-moz-box-sizing: border-box;   
  		box-sizing: border-box;   
	}
	
	.menuworks, .menublog {
		border-right:1px solid #444;
	}
	
	.menuworks, .menuabout {
		border-bottom:1px solid #444;
	}
	
	nav .menu.actif {
		background: linear-gradient(to right, #cdb586 50%, #cdb586 50%) !important;
		background-position: center center !important;
		background-size: 60% 3px !important;
		background-repeat: no-repeat !important;
	}

	body.spykar nav .menu.actif { background-image: linear-gradient(to right, #ae9a9a 50%, #ae9a9a 50% 50%) !important; }
	body.indiabulls nav .menu.actif { background-image: linear-gradient(to right, #9f9d96 50%, #9f9d96 50%) !important; }
	body.sky nav .menu.actif { background-image: linear-gradient(to right, #901325 50%, #901325 50%) !important; }
	body.palava nav .menu.actif { background-image: linear-gradient(to right, #426b29 50%, #426b29 50%) !important; }
	body.welspun nav .menu.actif { background-image: linear-gradient(to right, #862500 50%, #862500 50%) !important; }
	body.spun nav .menu.actif { background-image: linear-gradient(to right, #867e7b 50%, #867e7b 50%) !important; }
	body.aegon nav .menu.actif { background-image: linear-gradient(to right, #1f7271 50%, #1f7271 50%) !important; }
	body.golf nav .menu.actif { background-image: linear-gradient(to right, #787d78 50%, #787d78 50%) !important; }
	body.greens nav .menu.actif { background-image: linear-gradient(to right, #a1366e 50%, r#a1366e 50%) !important; }
	body.prius nav .menu.actif { background-image: linear-gradient(to right, #948c81 50%, #948c81 50%) !important; }
	
	.menu span.label {
		bottom: 50%;
		margin-bottom: -40px;
		left: 50%;
		width: 60%;
		margin-left: -30%;
		text-align: center;
	}
	
	.menu span.number {
		position:absolute;
		top: 50%;
		margin-top: -65px;
		left: 50%;
		width: 60%;
		margin-left: -30%;
		text-align: center;
	}
	
	#logosmall {
		display:none;	
	}
	
	#close {
		position:absolute;
		display:block;
		top:50%;
		left:50%;
		width:40px;
		height:40px;
		margin-left:-20px;
		margin-top:-20px;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		background-color:#cdb586;
		background-image:url(design/close_menu.png);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:16px 16px;
		z-index:2;	
		opacity:1;
		transform: none;
		-ms-transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
	
	#grid_bg {
		display:none;
	}
	
	#grid {
		background:#FFF;
	}

	#grid.fade {
		-webkit-transition: opacity 1s 1s ease-in-out, height 0s 2s linear;
		transition: opacity 1s 1s ease-in-out, height 0s 2s linear;
	}
	
	#grid .content {
		top:40px;
	}
	
	.roll .left, .roll .right, .item:hover .roll .left, .item:hover .roll .right {
		display:none;
	}
	
	.item h2, .item .role {
		opacity:1;	
	}
	
	.item h2 {
		font-size:20px;
		line-height:30px;	
		letter-spacing:3px;
	}
	
	.item h2 br {
		display:none;
	}
	
	.item .roll {
		position:relative;
		width:100%;
		left:auto;
		top:0;
		min-height:80px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		padding:12px 15px 15px 15px;
		height:auto;
		background:#774021;	
	}
	
	.item .line {
		display:none;
	}
	
	.item .roll span {
		opacity:1;	
	}
	
	.item .info {
		top:0;	
		position:relative;
	}

	.item:hover img {
	  opacity: 1;
	}
		
	.next, .previous {
		width:70px;
	}
	
	body.nav .next span {
		width:70px;
		height:40px;
		text-indent:10000px;
		background:url(design/fleche_next_mobile.png) no-repeat;
		background-size:30px 30px;
		background-position: center left;
		margin:0;
		padding:0;
		right:0;
		top:40px;
		-ms-transform: none;
		-webkit-transform: none;
		transform: none;
	}
	
	body.nav .previous span {
		width:70px;
		height:40px;
		text-indent:10000px;
		background:url(design/fleche_prev_mobile.png) no-repeat;
		background-size:30px 30px;
		background-position: center right;
		margin:0;
		padding:0;
		left:0;
		top:40px;
		-ms-transform: none;
		-webkit-transform: none;
		transform: none;
	}
	
	body.nav .previous:hover span {
		left:0;
		background-position: center right;
	}
	
	body.nav .next:hover span {
		right:0;
		background-position: center left;
	}
	
	h1 {
		width:100%;
		font-size:40px;
		line-height:50px;
	}
	
	#artdirector, #illustrator {
		top:auto;
		bottom:40px;	
	}

	.title {
		left:0;
	}
	
	.mousescroll {
		display:none;
	}

	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 0.6s linear, background 0s linear;
		-webkit-transition: opacity 0.6s linear, background 0s linear;
	}

	#projet_info {
		padding:50px;
	}
	
	#projet_info p {
		width:100%;	
	}

	#projet_content {
		padding-bottom:440px;
	}

	#screenshots span {
		display: block;
 	 	margin: 0;
  		border-left: 0;
  		padding: 0;
	}
	
	#viewcasestudy {
		position: relative;
		display: block;
		bottom:auto;
		padding-:0;
		margin-top:30px;
		-ms-transform: none;
		-webkit-transform: none;
		transform: none;
		background: linear-gradient(to right, #FFF 50%, #FFF 50%) no-repeat left center;
		background-size: 2px 30px;
	}
	
	#about, #contact {
		padding:180px 0 450px 0;	
	}
	
	body.about #about{
		min-height:600px;
	}
	
	#about_info img, #contact_info img {
		height:100%;
		width:auto;
	}
	
	body.about #city_grid {
		margin: 60px auto 0 auto;
	}
	
	#about_info p {
		position: relative;
		display: table-cell;
		vertical-align: middle;
		z-index: 1;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding:40px;
	}
	
	.a, .b, .o, .u, .t {
		font-size:60px;
		line-height:60px;
		margin:0;
	}
	
	.contactC, .contactO, .contactN, .contactT, .contactA, .contactCC, .contactTT, .contactM, .contactE {
		font-size:60px;
		line-height:60px;
	}
	
	.contactTT, .contactM, .contactE {
		bottom:-28px;
	}

	.a {
		left:16%;
		top:-33px;
	}
	
	.b {
		left:31%;
		top:-33px;
	}
	
	.o {
		left:44%;
		top:-33px;
	}
	
	.u {
		left:59%;
		top:-33px;
	}
	
	.t {
		left:75%;
		top:-33px;
	}
	
	.underscore {
		display:none;
	}
	
	#city_grid .perspective {
		width:100%;
		float:none;
	}
	
	.city h3, .city:hover h3 {
		top:20%;
		margin-top:0;
		font-size: 25px;
		line-height: 25px;
		letter-spacing:3px;
	}
	
	.city_info .position {
		opacity:1;
		top:50%;
		margin-top:0;
		font-size:12px;
		width: 80%;
		left: 10%;
	}
	
	.city .city_info .line {
		background-position:center top;
		height:30px;
		display:none;
	}

	
	.year1, .year2 {
		opacity:1;
	}
	
	.lyon .city_info, .lyon:hover .city_info { background:rgba(169,78,74,0.6); }
	.montreal .city_info , .montreal:hover .city_info { background:rgba(19,71,110,0.6); }
	.paris .city_info, .paris:hover .city_info { background:rgba(120,155,144,0.6); }
	.sunderland .city_info, .sunderland:hover .city_info { background:rgba(203,207,174,0.6); }
	
	
	.lyon, .lyon:hover {
		background:url(design/lyon.jpg) no-repeat center center;
		background-size:cover;
	}
	 
	.montreal, .montreal:hover {
		background:url(design/montreal.jpg) no-repeat center center;
		background-size:cover;
	}
	 
	.paris, .paris:hover {
		background:url(design/paris.jpg) no-repeat center center;
		background-size:cover;
	}
	 
	.sunderland, .sunderland:hover {
		background:url(design/sunderland.jpg) no-repeat center center;
		background-size:cover;
	}
	
	#social a {
		width:50%;
		padding-bottom:50%;
		background-size:50%;
	} 

	footer {
		bottom:-340px;
		width:100%;
		height:340px;
		padding-top:50px;
	}

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

	#footerleft {
		width:100%;
		float:none;
		padding-right:0;
	}

	#footerright {
		width:100%;
		float:none;
		padding-left:0;
		margin-top:50px;
	}
	
}

@media screen and (max-width: 960px) and (orientation : portrait)  {
	#artdirector {
		bottom:80px;
		margin-left:0px;
		border-bottom:0px solid rgba(255,255,255,0.5);
		border-right:none;
		text-align:center;
	}
	
	#illustrator {
		bottom:40px;
		margin-left:-90px;
		text-align:center;
	}
	
	body #artdirector span, body #illustrator span {
		margin:0;
		text-align:center;
	}
	
	#projet_info {
		margin:50px auto;
	}
	
	body.contact #contact_info {
		height: 250px;
	}
	
	#form {
		margin: 110px auto 100px auto;
	}
	
	.contactC, .contactT, .contactTT {
		left: 8%;
	}
	
	.contactN, .contactCC, .contactE {
		right: 8%;
	}
	
	#contactleft, #contactright {
		float:none;
		width:100%;
	}
	
	#social a:nth-child(2) {
		background-color:#ddd;
	}
	
	#social a:nth-child(3) {
		background-color:#ddd;
	}
	
	#social a:nth-child(4) {
		background-color:#ccc;
	}
	
}

@media screen and (max-width: 960px) and (orientation : landscape)  {
	#logo {
		margin-left: -25%;
		margin-top: 0;
		top:10%;
		width: 50%;
	}
	
	#openmenu {
		top:25px;
		left:auto;
		right:25px;
	}
	
	#artdirector, #illustrator {
		bottom:25px;
	}
	
	.item1 img, .item2 img, .item3 img {
		width:50%;
		float:left;
	}
	
	.item1, .item2, .item3, #grid>.content>div {
		width: 100%;
		background:#000;
		margin-bottom: 30px;
		clear:none;
	}
	
	.item .roll {
		width:50%;
		float:left;
		margin-top:8%;
	}
	
	.item h2 {
		font-size:18px;
		letter-spacing:2px;
		line-height:21px;
		margin-bottom:5px;
	}
	
	body.nav .previous span {
		top: 40%;
	}
	
	body.nav .next span {
		top: 40%;
	}
	
	#projet .line {
		height:50px;
		margin-top:20px;
		margin-bottom:25px;
	}
	
	#projet_info {
		margin:50px auto;
	}
	
	#screenshots img {
		opacity:1;
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
	
	#about, #contact {
		padding: 80px 0 450px 0;
	}
	
	body.about #about_info, body.contact #contact_info {
		height: 200px;
	}
	
	#about_info img, #contact_info img {
		width: 100%;
		height: auto;
	}

	#image img {
		width:100%;
		height:auto;
		top:-30px;
	}
	
	#city_grid .perspective {
		width:50%;
		float:left;
		perspective: 600px;
		-webkit-perspective: 0;
	}
	
	.degrade {
		height:70%;	
	}
	
	.city {
		opacity:1;
	}
	
	.city h3, .city:hover h3 {
		top: 20%;
		margin-top: 0;
		font-size: 22px;
		line-height: 22px;
		letter-spacing: 2px;
	}
	
	.contactT, .contactA, .contactCC {
		margin-top: -40px;
	}
	
	#form {
		margin: 120px auto 100px auto;
	}
	
	input.envoyer {
		margin-top:20px;
	}
	
	#social a {
		width:25%;
		padding-bottom:25%;
		background-size:40%;
	} 
}