* {
			font-family: 'Roboto', sans-serif;
		}
		body {
			margin: 0 auto;
			max-width: 960px;
			width:100%;


		}
		.clear {clear: both;}
		.left{ float: left} .right {float: right;}
		.header {
			/*background-color: #ddd; */
			height: 50px;
			margin: 30px auto;
			font-size: 16px; 
		}
		.footer {
			height: 20px;
		}
		.logo {
			font-size: 30px; 
			font-weight: lighter;
			
		}
		.nav {
		margin-top:7px;
		margin-right: 20px;
		cursor: pointer;
		opacity: 0.8;
		color: #bfbfbf;
		transition: all 0.2s ease-in-out;
		}
		.nav:hover {
			color: black;
			opacity: 1;
		}
		.nav.active {
			font-weight: bold;
			color: black;
		}
		.content {
			width: 100%;
			font-size: 25px;
			/*background: #ccc;*/
			height: 100%;
			margin: 0 auto;
			padding-bottom: 50px;
		}
		a {
			transition: all 0.2s ease-in-out;
			color: #000080 /*#478fd9*/;
			text-decoration: underline;
			cursor: pointer;
		}
		a:hover {
			text-decoration: underline;
			color: #478fd9
		}
		.hidden {
			display: none;
		}
		.cont {
			
		}
		.projects {
			opacity: 1;
			position: relative;
		}
		.item.absolute {
			position: absolute;
			border: 1px #ccc solid;
		}
		.item {
			border: 1px transparent solid;
			transition: border 0.2s ease-in-out;
			width: 190px;
			height: 205px;
			font-size: 13px;
			padding: 10px;
			float: left;
			margin: 10px;
			cursor: pointer;
			border-radius: 2px;
		}
		.item:hover {
			border: 1px #ccc solid;
		}
		.item .image {
			width: 190px; height: 190px;
			/*background: url('1.jpg');*/
			background-size: 100%;
		}
		.heading.outside {
			line-height: 170%;
		}
		.heading{
			font-weight: bold;
			font-size: 15px;
			margin-bottom: -3px;
			
		}
		.year{
			font-weight: lighter;
			font-size: 12px;
			color: #9c9c9c;
			margin-bottom: 4px;
			line-height: 200%;
		}
		.meta.after {
			width: 100px;
			position: absolute;
		}
		.image {
			margin: 0 auto;
		}
		
		.work {
			/*display: none;*/
			opacity: 0;
			font-size: 12px;
			position: relative;
		}
		.work .meta {
			width: 14.6%;
			position: absolute;
			right: 0;
			top: 0;
		}
		.work .image {
			float: left;
			position: relative;
			width: 83%;

		}
		.mainimg { 
			max-width: 800px;
			width: 100%;
			margin: 0 auto;
			/*float: right;*/
			display: none;
			background-repeat:no-repeat;
			/*display: none;*/
		}
		.loader {
			/*background-image: url('loader.gif') center center no-repeat;*/
			position: absolute;
			opacity: 1;
			top: 200px;
			left: 350px;
		}
		.imgnav {
			opacity: 0;
			transition: opacity 0.2s ease-in-out;

		}
		.navigator {
			margin-bottom: 20px;
		}
		.prev {
			margin-right: 4px;
		}
		.nb {
			overflow: hidden;
			border: 1px #ddd solid;
			border-radius: 30px;
			width: 25px; height: 25px; 
			display: block;
			position: relative;
			float: left;
			margin-bottom: 20px;
			
		} .nb:hover {
			border: 1px #ccc solid;
			background: #f0f0f0;
		}
		
		#arrow-left {
			transition: all 0.2s ease-in-out;
			width: 0; 
			height: 0; 
			top: 5px; left: 7px;
			position: absolute;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent; 
			border-right:7px solid #8d8d8d;
		}
		#arrow-left-mask {
			transition: all 0.2s ease-in-out;
			width: 0; 
			height: 0; 
			top: 5px; left: 10px;
			position: absolute;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent; 
			border-right:7px solid white;
			z-index: 1;
		}

		#prev:hover > #arrow-left {
			border-right:7px solid #383a3c;
		}
		#prev:hover > #arrow-left-mask {
			border-right:7px solid #f0f0f0;
		}

		#arrow-right {
			transition: all 0.2s ease-in-out;
			width: 0; 
			height: 0; 
			top: 5px; left: 10px;
			position: absolute;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent; 
			border-left:7px solid #8d8d8d;
		}
		#arrow-right-mask {
			transition: all 0.2s ease-in-out;
			width: 0; 
			height: 0; 
			top: 5px; left: 7px;
			position: absolute;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent; 
			border-left:7px solid white;
			z-index: 1;
		}

		#next:hover > #arrow-right {
			border-left:7px solid #383a3c;
		}
		#next:hover > #arrow-right-mask {
			border-left:7px solid #f0f0f0;
		}


		.back {
			/*position: absolute;
			top: -19px;
			left: 0;*/
		}
		.about{
			display: none;
			opacity: 1;
			font-size: 15px;
		}
		td {
			width:50%;
			vertical-align: top;
		}
		.section.holder{
			float:none;
			margin-top: 30px;
		}
		.section {
			float: left;

			
		}
		.section.title {
			font-size: 22px;
			color: #bfbfbf;
			width: 160px;
			margin-right: 5px;
			vertical-align: top;
			font-weight: lighter;
			font-family: 'Merriweather', serif;
		}
		.section.text {
			width: 75%
		}
		.sec-year {
			float: left;
			width: 67px;
			font-size: 12px;
			font-weight: normal;
			font-family: 'Merriweather', serif;
			margin-top: 3px;
		}
		.sec-details{
			display: inline-block;
			margin-right: 5px;
			width: 340px;
			vertical-align:top;
			margin-bottom: 4px;
		}
		.sec-comment {
			display: inline-block;
		    margin-left: 5px;
		    padding-bottom: 10px;
		    width: 300px;
		    font-style: oblique;
		    vertical-align:top;
		    font-size: 14px;
		    color: #595959;
		}

@media all and (max-width: 640px) {
	.item {
		width: 230px;
		height: 250px;
	}
	.item .image {
		width: 230px;
		height: 230px;
	}
	.work .meta {
		position: relative;
		width:100%;
	}
	.work .image {
		float: none;
		width: 100%;
	
	}
	.nb {
		margin-bottom: 10px;
	}
	.loader {
		top: -100px;
		left: 0px;
	}
	.video {
		max-width: 300px;
	}
	.sec-details {
		width: 80%;
	}
}

@media all and (max-width: 370px) {
.nav.h-projects {
		margin-top: -10px;
	}
}