html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { list-style-type:none; color:inherit; text-decoration:none; margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; vertical-align:baseline; outline:none; border-collapse:collapse; table-layout:fixed; }
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }
html { text-rendering:optimizeLegibility;}

/* Basics */
html { width:100%; height:100%; position:relative;overflow-y: scroll; }
body { width:100%; height:100%; position:relative; color: #131313; font-family:'Helvetica'; letter-spacing: 1px; font-size:15px; min-width: 320px; }


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

}

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

}

h1 {  font-size:12px; letter-spacing:1px; }
h2, h2 * {  font-family:'neuzeitgrotbold',Sans-Serif; font-size: 14px; letter-spacing: 3px; padding: 25px 0 15px 0px; margin-right: -1px;text-transform: uppercase; }
h3 { font-family:'neuzeitgrotbold',Sans-Serif; text-transform: uppercase; color: #83bbb8 !important; border-bottom: 2px solid #83bbb8; font-size: 16px;margin-bottom: 10px; padding-bottom: 3px; letter-spacing: 3px; line-height: 16px;}

p {margin-bottom: 16px;}
a, a:link, a:active, a:visited {color: #211b0d;}


.dev-badge{ position: absolute; top: 40px; right: 0px; }
	.geolove{ /* Rotate geo 360deg onmouseover and out */
		-moz-transition: all 2s ease-in-out;
		-webkit-transition: all 2s ease-in-out;
		-o-transition: all 2s ease-in-out;
		-ms-transition: all 2s ease-in-out;
		transition: all 2s ease-in-out;
	}
	.geolove:hover{
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}


#header { z-index:1; position:absolute; top:10px; left:13%; right:11%;  }

.u-strikethrough {
	text-decoration: line-through;
}

/* navigation */
.navigation { display:none; clear:both; width:100%; height:42px; text-align:left; font-size: 0px; }
.navigation .menu-item { display:inline-block; position: relative; margin: 0px 20px 0px 0px; border-bottom: 4px solid transparent;}
.navigation .menu-item h2 { white-space: nowrap;}
.navigation .menu-item a:hover{ color: #ff7176; }
.navigation .active { color: #ff7176;  border-bottom: 4px solid #ff7176;  }

#content {  min-height:100%; overflow:hidden; display:block; position:relative; }
#content .page { width:78%; min-height: 100%; padding-top: 150px; position:absolute; }
#content .active { position:relative; margin:0 4% 0 8%; left:5%; right:5%; }
#content .next, #content .previous { top:0; background-color: #eaeaea; cursor:pointer; }
#content .next { left:95%; }
#content .previous { right:95%; }

.view-project a{ color: tomato; font-size: 16px; }
.description { margin:30px auto 0px; width:360px; }
	.project-desc{ font-family: 'adobe_garamond_proregular'; font-size: 20px; padding-top: 10px;  }
	.extra{ margin-bottom: 50px;}
.work-item { text-align:center; width:100%; margin: 40px 0px 0px 0px; }
	.work-item h3{ color: #83bbb8 !important; border-bottom: 2px solid #83bbb8;}
.gallery img{ width: 100%; max-width: 735px; }

#about {padding-bottom: 60px; font-family: 'adobe_garamond_proregular'; float:left; display:inline-block; width: 50%; font-size: 20px; line-height: 26px; }
#about h1{ 
	text-align: center;
    color: #000;
    font-family:'adobe_garamond_proregular';
    font-weight: normal;
    font-size: 25px;
    line-height: 30px;
    margin: 0px 20px 43px 0px;
	padding: 0px 0px 20px 0px;
}
#about a{ color: tomato; }
.about-section { position:relative; width: 90%; text-align: center; margin-bottom: 60px;  }
	.about-section a{ color: #ff00c0;}


@media screen and (max-width: 600px) {
	#header { top: 0px; position: absolute;}

	.dev-badge{  display: none;}
	#content .page{ padding-top: 75px;}


	#about { padding-top: 120px !important;}

	#about h1{ width: 90%; text-align: center; margin-bottom: 20px;}
	#about img{ width: 40%; margin-bottom: 0px; }

	.next .work-item  img{ }
	.about-section { width: 42%; margin: 0px 0px 30px 0px; }
	.description{ width: 100%; }
	.project-desc{ font-size: 20px;  }
	
	.about-section { width: 78%; float: none;	margin-left: 5%; margin-right: 5%; }
}