/*   
CSS style shhet based upon HTML5 reset
*/

/* ------------------------------------------------------------------------------
  
																  RESET

-------------------------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}									
article, aside, figure, footer, header, hgroup, nav, section, img {display: block;}
html {overflow-y: scroll;} /* force a vertical scrollbar to prevent a jumpy page */
ul {list-style: none;}
a {text-decoration:none;}
a:hover, a:active {outline: none;}
.ie7 img {-ms-interpolation-mode: bicubic;} /* scale images in IE7 more attractively */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /* prevent BG image flicker upon hover */

/* ------------------------------------------------------------------------------
  
											BALISES & CLASSES & FONT-FACE

-------------------------------------------------------------------------------*/

html {overflow-x:hidden;}
.hide {
	display: none;
}
.superHide {
	display: none;
}
.logged-in .hide {
	display: block;
}
.cyan {
	color: #02abf1;
}
.magenta {
	color: #ee0481;
}
.black {
	color: #000;
}
.css-transition {
	/* Webkit */
	-webkit-transition-property: color background-color opacity;
	-webkit-transition-duration: 0.4s;
	/* Firefox */
	-moz-transition-property: color background-color opacity;
	-moz-transition-duration: 0.4s;
	/* Standard */
	transition-property: color background-color opacity;
	transition-duration: 0.4s;
}
.clearLeft {clear:left;}

@font-face {
	font-family: 'Bebas';
	src: url('_/typo/bebas/bebas.eot');
	src: url('_/typo/bebas/bebas.eot?#iefix') format('embedded-opentype'), 
	     url('_/typo/bebas/bebas.woff') format('woff'), 
	     url('_/typo/bebas/bebas.ttf')  format('truetype'),
	     url('_/typo/bebas/bebas.svg#bebas') format('svg');
	font-weight: normal;
  font-style: normal;
}

/* ------------------------------------------------------------------------------
  
														NAVIGATION

-------------------------------------------------------------------------------*/

nav {
	margin-top:30px;
	position:absolute;
	padding-bottom:50px;
}
nav h1 a, nav h2 a {
	font-family: Bebas,Lucida Grande,arial,sans-serif;
	font-weight:lighter;
	text-transform:uppercase;
	margin-left:30px;
	padding-top: 10px;
	display: inline-block;
}
nav h1 a {
	color:#FBD606;
	font-size:100px;
	line-height:67px;
}
nav h2 a {
	color:#fff;
	font-size:70px;
	line-height:43px;
}
.switchTitle {
	overflow: hidden;
	height: 55px;
}
.switchTitle a {
	position: relative;
	top: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#page-wrap:not(.mobile) .switchTitle a:hover  {
	top: -53px;
}
.switchTitle span {
	margin-top: 10px;
	display: block;
}
nav h3 {
	font-family: 'lato', sans-serif;
	text-transform:uppercase;
	font-size:18px;
	font-weight:400;
	margin:0 0 -6px 31px;
	line-height:27px;
}
nav h3, nav a:hover, nav h2 a.clicked {color:#ccc!important;}


/* ------------------------------------------------------------------------------
  
														THUMBNAILS

-------------------------------------------------------------------------------*/

#thumbs {
	padding-right: 200px;
}
.thumb-box {
	width:100%;
	margin: 2px 0 3px 0;
}
nav li:nth-child(5) .thumb-box {
	margin: 7px 0 0 0;
}
.thumb {
	font-family:Myriad Pro, arial, sans-serif;
	color:#fff;
	width:160px;
	height: 107px;
	overflow:hidden;
	float:left;
	display: block;
}
.thumb > a > div {
	width:160px;
	overflow: hidden;
	height: 107px;
}
.thumb-infos {
	padding:10px;
	background-color:#02ABF1;
	opacity: 0;
	width:140px;
	height:87px;
	top: 0;
	position: relative;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.thumb div:hover .thumb-infos, .thumb.clicked .thumb-infos {
	top: -107px;
	opacity: 1;
}

.thumb p {
	font-family: 'lato', sans-serif;
	color:#fff;
	position: relative;
	opacity: 0;
	top: 20px;
	margin-bottom: 6px;
}
.thumb p.thumb-title {
	font-weight:700;
	font-size:16px;
	line-height: 15px;
	-webkit-transition: all 0.2s ease-out 0.2s;
	-moz-transition: all 0.2s ease-out 0.2s;
	transition: all 0.2s ease-out 0.2s;
}
.thumb p.thumb-title + p {
	font-weight:400;
	font-size:14px;
	line-height: 12px;
}
.thumb p.thumb-title + p {
	-webkit-transition: all 0.2s ease-out 0.3s;
	-moz-transition: all 0.2s ease-out 0.3s;
	transition: all 0.2s ease-out 0.3s;
}
.thumb:hover p.thumb-title, .thumb.clicked p.thumb-title  {
	top: 0;
	opacity: 1;
}
.thumb:hover p.thumb-title + p, .thumb.clicked p.thumb-title + p {
	top: 0;
	opacity: 0.8;
}





/* ------------------------------------------------------------------------------
  
														SLIDE PANEL

-------------------------------------------------------------------------------*/

#content-wrap {
	overflow-x:hidden;
	position:absolute;
	right:0px;
	width:640px;
	min-height:100%;
	background:#fff;
	font-family:Bebas,sans-serif;
	text-transform:uppercase;
	color:#0C4354;
	font-size:38px;
	font-weight:lighter!important;
	box-shadow: -5px 0px 20px rgba(0,0,0,0.3);
}
#content {width:1280px;}
.content {
	position:relative;
	float:left;
}
#content-wrap .wp-post-image {
	margin-bottom:15px;
	width:100%;
	height:auto;
}
.contentInfos {
	margin:2px 0px 0px 14px;
}
#postNav {margin-top:-7px;}
#postNav a {
	color:#02ABF1;
	margin-right:-3px;
}
#postNav a:hover {color:#0C4354!important;}
.socialBt {color:#ccc!important;cursor: pointer;
}
.data-fb {
	display: none;
}
.projectGallery {
	margin-top:4px;
	width:640px;
}
.projectGallery p {margin:-7px 0px -6px 15px;}
.projectGallery a {float:left;}
#content-wrap h1, #content-wrap h1 + p, #content-wrap h1 + p + p {
	font-size:38px;
	line-height:30px;
	font-weight:lighter;
}
#content-wrap h1 + p + p {margin-top: 10px;}

.fineprint {margin:15px 0px 30px 15px;}
.fineprint p, .fineprint a {
	font-family: 'lato', sans-serif;
	font-weight:700;
	line-height:22px!important;
	font-size:18px!important;
	
}
.fineprint a {
	color:#289FCE;
	text-decoration:underline;
	word-wrap:break-word;
}
#videoInfos {display:none;}
#page-wrap.mobile .contentInfos {margin-top:15px!important;}

/* ------------------------------------------------------------------------------
  
																FOOTER

-------------------------------------------------------------------------------*/

#protector {
	width:100%;
	height:100%;
	z-index:999;
	position:fixed;
	display:none;
}

footer {
	display:block;
	position:fixed;
	left:30px;
	bottom:-100px;
}
footer > * {
	text-transform:uppercase;
	color:#000;
	font-family: 'lato', sans-serif;
	font-size:14px;
}
footer p {
	font-weight:400;
}
footer a {
	color:#000;
	text-decoration:underline;
	font-weight:700
}

/* ------------------------------------------------------------------------------
  
															MEDIA QUERIES

-------------------------------------------------------------------------------*/

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

	#content-wrap {width:100%;}
	#content {width:200%;}
	.content {width:50%;}
	.content > img {
		width:100%;
		height:auto;
	}
	.switchTitle {
		height: 37px;
	}
	.switchTitle a {
		top: -41px;
	}
	.thumb {
		width:25%;
		margin-bottom:-23px;
	}
	.thumb > a > div {
		width:100%;
	}
	.thumb div:hover .thumb-infos, .thumb.clicked .thumb-infos {margin-left:0px;}
	.thumb img {
		width:100%;
		height:auto;
	}
	.thumb-infos {
		width:100%;
		background:none;
		position:relative;
		top:-85px;
	}
	.thumb-infos p {
		width:90%;
		text-shadow:0px 0px 5px #000;
		opacity: 1;
		top: 0;
	}
	.thumb > a p{font-size:14px;}
	.thumb > a p.thumb-title{font-size:17px;}
	.thumb.clicked .thumb-infos {background:none}
	.thumb.clicked > a p {color:#fff!important;}
	
	.projectGallery {
		position:relative;
		width:100%;
	}
	.projectGallery a {
		width:25%;
	}
	.projectGallery img {
		width:100%;
		height:auto;
	}
	
	nav h1 a {
		font-size:60px;
		line-height:42px;
	}
	nav h2 a {
		font-size:40px;
		line-height:30px;
	}
	#content-wrap h1, #content-wrap h1 + p {
		font-size:34px;
		line-height:26px;
	}
	#content-wrap {font-size:34px;}

}

@media screen and (max-width:480px) {
	
	nav {margin-top:15px;}
	nav > ul > li {margin-top:5px;} 
	nav h1 a, nav h2 a, nav h3 {margin-left:12px;}

	.thumb {
		width:33.3%;
		height:auto;
	}
	.projectGallery a {
		width:33%;
	}

}

@media screen and (max-width:320px) {
	
	.thumb {
		width:50%;
		height:auto;
	}
	.projectGallery a {
		width:50%;
	}
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}