html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin-top: 0px;
 	margin-bottom: 0px;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 0;
	margin: 0 auto;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}



	html {
		max-width: 1000px;
  		margin: 0 auto;
		background-color: #f5f5f4;
    	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	} 
	.prevnextcontainer {
		width: 600px;
		max-width: 100%;
    	height: auto;
		text-align: inherit;
		position: relative;
		margin: 0 auto;
	}
	#prev_top {
		position: absolute;
		left: 0;
		text-align:left;
		margin-top: 86px;
		width: 30px;
		opacity: 0.8;
	}
	#next_top {
		position: absolute;
		right: 0;
		text-align:right;
		margin-top: 86px;
		width: 30px;
		opacity: 0.8;
	}
	#prev_bottom {
		position: absolute;
		left: 0;
		text-align:left;
		padding-top: 20px;
		padding-bottom: 70px;
		width: 30px;
		opacity: 0.8;
	}
	#next_bottom {
		position: absolute;
		right: 0;
		text-align:right;
		padding-top: 20px;
		padding-bottom: 70px;
		width: 30px;
		opacity: 0.8;
	}	
	.row {
		text-align: center;
		margin-top: 110px;
		margin-bottom: 50px;
		width: 100%;
	}
	#caption {
		width: 300px;
		padding-top: 74px;
		padding-bottom: 0px;
		margin: 0 auto;
	}
	#wrapper {
		width: 100%;
		text-align: center;
		margin-top: 40px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	#wrapper img {
		max-width: 100%;
    	height: auto;
		margin: 0 auto;
		margin-bottom: 1px;
		
		
		
	
	
	
	
	
	}
	[class*="box"] {
		display: inline-block;
		text-align: center;
		width: 300px;
		margin: 0 1px 1px 0;
		
	}
	.box1 {
		background-color: #e2d6dd;
	}
	.box2 {
		background-color: #cfe2e3;
	}
	.box3 {
		background-color: #dddccc;
	}
	.box4 {
		background-color: #e1ded7;
	}
	.box5 {
		background-color: #eeded7;
	}
	.box6 {
		background-color: #f0d8e0;
	}
	.box7 {
		background-color: #ddd9ea;
	}
	.box8 {
		background-color: #dfd0d0;
	}
	.box9 {
		background-color: #cbe1da;
	}
	.box10 {
		background-color: #d5dee2;
	}
	.box11 {
		background-color: #d5eae0;
	}
	.box12 {
		background-color: #ebd0d0;
	}
	.box13 {
		background-color: #dee4d2;
	}
	.box14 {
		background-color: #ded4e2;
	}
	.box15 {
		background-color: #edd7e5;
	}
	.box16 {
		background-color: #d7ded5;
	}
	.box17 {
		background-color: #cee6e1;
	}
	.box18 {
		background-color: #e3dcc9;
	}

	
	
	.box1:hover {
		background-color: #acacac;
	}
	.box2:hover {
    	background-color: #acacac;
	}
	.box3:hover {
    	background-color: #acacac;
	}
	.box4:hover {
    	background-color: #acacac;
	}
	.box5:hover {
    	background-color: #acacac;
	}
	.box6:hover {
    	background-color: #acacac;
	}
	.box7:hover {
    	background-color: #acacac;
	}
	.box8:hover {
    	background-color: #acacac;
	}
	.box9:hover {
    	background-color: #acacac;
	}
	.box10:hover {
    	background-color: #acacac;
	}
	.box11:hover {
    	background-color: #acacac;
	}
	.box12:hover {
    	background-color: #acacac;
	}
	.box13:hover {
    	background-color: #acacac;
	}
	.box14:hover {
    	background-color: #acacac;
	}
	.box15:hover {
    	background-color: #acacac;
	}	
	.box16:hover {
    	background-color: #acacac;
	}	
	.box17:hover {
    	background-color: #acacac;
	}	
	.box18:hover {
    	background-color: #acacac;
	}	
	
	
	.logobox {
		display: block;
		text-align: center;
		position: fixed;
		width: 100%;
		top:0;
		left: 0;
		right: 0;
		background-color: #f5f5f4;
		box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, .1);
		border-bottom: 0px;
		z-index: 1;
	}
	.logobox:hover {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	.aboutbox {
		display: block;
		text-align: center;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f5f4;
		box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, .1);
		border-top: 0;
		margin-bottom: 0;
	}
	.aboutbox:hover {
		opacity: 1;
		filter: alpha(opacity=100);		
	}
	
	
	
	h1 { /* logo */
		font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 12px;
		letter-spacing: 7px;
		line-height: 0;
		color: #808080;
		text-align: center;
		padding: 25px 0 25px;
		margin: 0 auto;
		}
	h2 { /* home page titles */
		font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 1;
		color: #808080;
		text-align: center;
		padding: 50px 0 50px;
		margin: 0 auto;
		}
	h3 { /* 'about' & 'download cv' */
		font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 12px;
		letter-spacing: 7px;
		line-height: 0;
		color: #808080;
		text-align: center;
		padding: 25px 0 25px;
		margin: 0 auto;
		}
	h4 { /* project page titles */
		font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 3.5;
		color: #808080;
		text-align: center;
		}
	h5 { /* about page headings */
		font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 1.5;
		color: #808080;
		text-align: center;
		padding-top: 80px;
		}
	
	
		
		
	ul#regular {
    	font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 13px;
		letter-spacing: 0.5px;
		line-height: 1.8;
		color: #808080;
		opacity: 1;
		text-align: center;
		}
	ul#regular_about {
    	font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 13px;
		letter-spacing: 0.5px;
		line-height: 1.8;
		color: #808080;
		opacity: 1;
		text-align: center;
		}
	strong { 
    	font-family: "Fedra Sans Screen";
		font-style: Normal;
		font-weight: 400;
		font-stretch: normal;
		}
	ul#arrow {
    	font-family: 'Fedra Sans Screen Regular', sans-serif;
		font-style: normal;
		font-weight: normal;
		font-stretch: normal;
		font-size: 26px; 
		line-height: 1;
		color: #808080;
		}
	br {
		line-height: 1;
		}
		
		
		
	
		
	h2:hover {
		color: #FFF;
		text-decoration:none;
		}
	h1:hover {
		color: #808080;
		text-decoration:none;
		}
	h3:hover {
		color: #808080;
		text-decoration:none;
		
	}	
	a {
		color: #808080;
		text-decoration:none;
	}	
	a:hover {
		color: #000;
		text-decoration:none;
		
	
	
		
		
	
		
		
		
	}

	/* Clearfix -- h5bp.com/q 
	-------------------------------- */
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }
	
	
	

	
@media (min-width: 1400px) {
		
	[class*="box"] {
		width: 380px;
	}
	html {
		max-width: 1200px;
	}
	h2 { /* home page titles */
		font-size: 14px;
		line-height: 4;
	}
	.logobox {
		width: 100%;
	}
	.aboutbox {
		width: 100%;
		margin-bottom: 0;
	}
	.row {
		margin-top: 156px;
	}
}	


@media (max-width: 1399px) {
		
	[class*="box"] {
		display: inline-block;
		display: -moz-inline-stack;
		*display: inline;
        vertical-align: top;
   		margin: 0 1px 1px 0;
		width: 300px;
	}
	html {
		max-width: 1200px;
	}
	.logobox {
		width: 100%;
	}
	.aboutbox {
		width: 100%;
		margin-bottom: 0;
	}
	

}

	
@media (max-width: 1023px) {
		
	[class*="box"] {
		display: block;
		width: 320px;
		margin-left: auto;
   		margin-right: auto;
	}
	html {
		max-width: 1200px;
	}
	.logobox {
		width: 100%;
	}
	.aboutbox {
		width: 100%;
		margin-bottom: 0;
	}
}	
	

@media (max-width: 640px) {
	
	[class*="box"] {
		width: 100%;
		display: block;
   		margin: 0 1px 1px 0;
	}
	h2 { /* home page titles */
		padding: 20px 0 20px;
	}
	#caption {
		padding-top: 59px;
		width: 200px;
	}
	.row {
		margin-top: 50px;
	}
	h4 { /* project page titles */
		padding-top: 30px;
		padding-bottom: 15px;
		line-height: 1.5;
		color: #808080;
		text-align: center;
	}
	#prev_top {
		position: absolute;
		left: 0%;
		margin-top: 88px;
		margin-left: 30px;
		width: 40px;
		opacity: 0.8;
		text-align: left;
	}
	#next_top {
		position: absolute;
		right: 0;
		margin-top: 88px;
		margin-right: 30px;
		width: 40px;
		opacity: 0.8;
		text-align: right;
	}
	#prev_bottom {
		position: absolute;
		left: 0;
		margin-left: 30px;
		width: 30px;
		opacity: 0.8;
	}
	#next_bottom {
		position: absolute;
		right: 0;
		margin-right: 30px;
		width: 30px;
		opacity: 0.8;
	}	
	.logobox {
		width: 100%;
	}
	.aboutbox {
		width: 100%;
		margin-bottom: 0;
	}	
}