* {
	border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}



ul, ol, li {
	list-style-type: none;
}

body {
	color: #f5f5f5;
    font: 14px/1.5 "Trebuchet MS",Arial,Helvetica,"Liberation Sans",FreeSans,sans-serif;
	background-color: #222;
	margin:0px;
	padding:0px;
	height:100%;
}

p a{
  text-decoration: none;
  font-style: italic;
  color:#ffffff;
  
 }
 
p a:hover{
	color:#58d492;
}

 
h1 {
	font-family: 'oswaldbold';
	font-size:36px;
	color:#222;

}
h2 {
	font-size : 28px;
	font-family:'oswaldbold';
	line-height:28px;
}

/*** CONTAINER ***/
#container {
width:100%;
height:100%;

}



/*** HEADER ***/
header {
	height: 100px;
	width:100%;
	font-weight: normal;
	background-color: #111;
	background-image: url("header_background.png");
	background-repeat: no-repeat;
	background-position: left;
	font-family:'oswaldregular';
	font-size:16px;
	line-height:18px;
	color:#222; 
	box-shadow: 0px 0px 8px 0px #111;
}

header a{
	color:#444;
}

header a:hover{
	color:#58d492;
}


#logo{
	float:left;
	margin:0 15px;
	height:100px;
	width:270px;
	display:block;
}




#icon{
	height:68px;
	width:68px;
	float:left;
	margin:15px 0px;
	/*position:absolute;
	top:15px;
	left:30px;*/
}

#name{
	float:left;
	text-align:left;
	line-height:36px;
	margin:14px 15px;
}

#profession{
	float:left;
	margin:30px 0px;
	text-align:left;
	color:#222;
}

#infocontainer{
	float:right;
	margin-right:5%;
	padding:40px 0px 40px 0px;
	height:20px;
	width:270px;
}

#info1{
	float:left;
	text-align:left;
}

#info2{
	float:right;
	text-align:right;
}

@media screen and (max-width:800px){
	#infocontainer{
	margin-right:2%;
	}
}

@media screen and (max-width: 600px){
	#infocontainer{
	margin:auto;
	padding:0 0 0 0;
	float:none;
	height:36px;
	width:270px;
	}
	
	
	header{
	height:150px;
	background-image: none;
	background-color:#71bc85;
	
	}
	
	#logo{
	margin:auto;
	float:none;
	}
	
}











/*** MENU ***/

#menu{
	margin:40px 8% 20px 8%;

}

.menublock{
	width:50%;
	float:left;
	min-width:320px;
	max-width:800px;
	
}

@media screen and (max-width:1280px){
	
	#menu{
	margin:40px 3% 20px 3%;
	}
	

}

@media screen and (max-width:800px){
	.menublock{
	width:100%;
	}
	
	#menu{
	margin:40px 0;
	}

}






.pageselect{
	height:220px;
	margin:20px;
	background-color:#dadada; 
	display:block;
	font-size:16px;
	line-height:20px;
	color:#FFF;
	font-family:'oswaldregular';
	font-weight:normal;
	position:relative;
	box-shadow: 0px 3px 4px 0px #141414;
}
	

.vertalign{
    position: absolute;
    top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding:0 5%;
}


#illustration{
	background: url("images/index/illustration_index.png");
	background-position: right center;
}

#cyberdash{
	background:url("images/index/cyberdash_index.png");
	background-position: right center;
}

#metaphora{
	background:url("images/index/metaphora_index.png");
	background-position: right center;
}

#toweronhill{
	background:url("images/index/toweronhill_index.png");
	background-position: right center;
}

#ubisoft{
	background: url("images/index/ubisoft_index.png");
	background-position: right center;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*#gradient{
	background: -webkit-linear-gradient(left,rgba(100,100,100,1)),rgba(100,100,100,0)); /*Safari 5.1-6*/
/*	background: -o-linear-gradient(right,rgba(100,100,100,1),rgba(100,100,100,0)); /*Opera 11.1-12*/
/*	background: -moz-linear-gradient(right,rgba(100,100,100,1),rgba(100,100,100,0)); /*Fx 3.6-15*/
/*	background: linear-gradient(to right, rgba(100,100,100,1), rgba(100,100,100,0)); /*Standard*/
/*}*/



/*** FOOTER ***/



footer{
	width:100%;
	clear:both;

}

/*** CONTENU ***/

.project{
	padding:40px 0;
}

.projectinfo{
	width:280px;
	padding:10px 0 0 0;
	float:left;
	margin:0 0 0 5%;
}

.projectinfo a{
	font-weight: bold;
}

.content {
	margin-left:280px;
	padding:0 5% 0 10%;
}

.imgcontainer{
	float:left;
}

.row{
	float:left;
}


.imgcontainer img{
	width:100%;
}

.imgborder{
	padding:10px;
	line-height:0;
}




@media screen and (max-width:1023px){
	.projectinfo{
		width:90%;
		padding:10px 10px 10px 10px;
		margin:0;
		float:none;
	}
	
	.content {
	margin-left:0px;
	padding:0;
	}
	
	.project {
	padding:20px 5%;
	}
}



.clearfix{
	clear:both;
	display:block;
}

.emptysizer{
	 z-index: -1;
}

.iframecont{
	position:relative;
}

.iframecont iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

@font-face {
    font-family: 'oswaldbold';
    src: url('font/oswald-bold-webfont.eot');
    src: url('font/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/oswald-bold-webfont.woff2') format('woff2'),
         url('font/oswald-bold-webfont.woff') format('woff'),
         url('font/oswald-bold-webfont.ttf') format('truetype'),
         url('font/oswald-bold-webfont.svg#oswaldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'oswaldlight';
    src: url('font/oswald-light-webfont.eot');
    src: url('font/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/oswald-light-webfont.woff2') format('woff2'),
         url('font/oswald-light-webfont.woff') format('woff'),
         url('font/oswald-light-webfont.ttf') format('truetype'),
         url('font/oswald-light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'oswaldregular';
    src: url('font/oswald-regular-webfont.eot');
    src: url('font/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/oswald-regular-webfont.woff2') format('woff2'),
         url('font/oswald-regular-webfont.woff') format('woff'),
         url('font/oswald-regular-webfont.ttf') format('truetype'),
         url('font/oswald-regular-webfont.svg#oswaldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}