@font-face {

    font-family: 'sinkin_sans400_regular';

    src: url('../fonts/SinkinSans-400Regular-webfont.eot');

    src: url('../css/fonts/SinkinSans-400Regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('../css/fonts/SinkinSans-400Regular-webfont.woff') format('woff'),

         url('../css/fonts/SinkinSans-400Regular-webfont.ttf') format('truetype'),

         url('../css/fonts/SinkinSans-400Regular-webfont.svg#sinkin_sans400_regular') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'sinkin_sans600_semibold';

    src: url('../css/fonts/SinkinSans-600SemiBold-webfont.eot');

    src: url('../css/fonts/SinkinSans-600SemiBold-webfont.eot?#iefix') format('embedded-opentype'),

         url('../css/fonts/SinkinSans-600SemiBold-webfont.woff') format('woff'),

         url('../css/fonts/SinkinSans-600SemiBold-webfont.ttf') format('truetype'),

         url('../css/fonts/SinkinSans-600SemiBold-webfont.svg#sinkin_sans600_semibold') format('svg');

    font-weight: normal;

    font-style: normal;



}



body {

	font-family: 'sinkin_sans400_regular', Avenir, Helvetica, Arial, sans-serif;

	font-size: 100%;

	line-height: 1.5em;

	color: #999;

	background: white;

	/* background-image: url('../images/vr24.gif');  */

}



.container {

	width: 90%;

	min-width: 240px;

	max-width: 480px;

	margin: 1.5em auto;

	padding: 0 1em;



	

}



header, section {

	margin-bottom: 1.5em;

	padding-top: 1.5em;

	

/* background: rgba(128, 128, 128, 0.1);  */

}



.nav {

	margin-bottom: 1.5em;

	padding: 0.01em;

	overflow: hidden;	

	}



header, #about, #work h2, #services h2, #contact h2, footer{text-align: center;}



#about p {

	background-image: url('../images/separator.png');

	background-repeat: no-repeat;

	background-position: bottom center;

	padding-bottom: 3em;

	}

	

h1 img {

	max-width: 100%;

	height: auto;

}



.work img {

	margin: 0 0.5em 0 0.2em;

	max-width: 100%;

	height: auto;

	

}



.work {

	overflow: hidden;

	margin-bottom: 1.5em;

	clear: both;}

	

.thumb {

	width: 99%;

	max-height: 60px;

	overflow: hidden;

	border: solid 1px #999;

	}

	



.details {

	margin: 0 0 2.5em 0;

}



/* typography */



h1 {

	font-size: 3em; 

	line-height: 0.5em; 

	margin-bottom: 0.5em;

}



h2 {

	font-family: 'sinkin_sans600_semibold';

	font-size: 2em; /* 32px ÷ 16px */

	line-height: 0.75em; /* 24px ÷ 32px */

	margin-bottom: 1.5em;

	color: rgb(68, 115, 183);

}



h3 {

	font-family: 'sinkin_sans600_semibold';

	font-size: 1em; /* 16px */

	line-height: 1.5em; /* 24px ÷ 16px */

	margin-bottom: 0.5em;

	color: rgb(113, 135, 169);

}



.work h3 {margin-bottom: 1em;}



.work p, .work a {

	font-size: 75%;	

}



p, label, ul {

	font-size: 1em; /*  16px */

	line-height: 1.5em; /* 24px ÷ 16px */

	margin-bottom: 1.5em;

}



a:link {

	color: #999;

	text-decoration: none;

	border-bottom: solid 1px #999;

	padding-bottom: 0.2em;

}



a:visited {

	color: #999;

}



a:hover {

	color: rgb(113, 135, 169);

	border-bottom: none;

}





a:active{

	color: rgb(113, 135, 169);

}







form {width: 90%; margin: 0 auto;}



input, textarea, select {

	width: 100%;

	max-width: 400px;

	margin-top: 0.2em;

	}

	



	

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

	.container {

	width: 95%;

	min-width: 640px;

	max-width: 800px;

	margin: 2em auto;

	padding: 0 1.5em;

	}

	

	header {

		margin-bottom: 0;

	}

	

	

	#about, #work h2, #services h2, #contact h2, footer{text-align: left;}

	

	#about {

	clear: both;

	}

	

	.work img {

	margin: 0;

	float: none;

	}

	

	.thumb {

	max-height: 80px;

	}

	

	.contact{

	margin-left: 0;

	}

	



	

	

}

	

@media screen and (min-width: 960px){





	.container {

	width: 90%;

	min-width: 640px;

	max-width: 960px;

	margin: 1.5em auto;

	padding: 0 1em;

	}

	

	section {

	overflow: hidden;

	clear: both;

	}

	

	header, #about {text-align: left;}

	

	#about p, #work .work, #services .services {

	background-image: none;

	width: 29%;

	margin-right: 3%;

	float: left;

	clear: none;

	}

	



	#work .thumb {

	width: 99%;

	float: none;

	max-height: 460px;

	overflow: hidden;

	}

	

	form {width: 100%;}

	

	.col {

		float: left;

		width: 46%;

		margin-right: 4%;

		

	}

	

	.nav {

    float: left; 

	}

	

}