@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import "reset.css";
@import "960.css";

*						{ -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; }

body					{ font-family: "Lato",sans-serif; font-weight: 400; line-height: normal; background-color: #fafafa; color: #222; -webkit-text-size-adjust: none; }

a						{ color: #c00; text-decoration: none; }
a:hover					{ color: #f00; text-decoration: underline; }
strong					{ font-weight: 700; }

/* Header */
#header					{ height: 40px; margin: 0 0 20px; background-color: #000; overflow: hidden; }

/* About me */
#about-me				{ color: #fff; font-size: 13px; float: left; position: relative; top: 13px; }

/* Contact info */
#contact-info			{ color: #fff; font-size: 13px; float: right; position: relative; top: 13px; }
#contact-info li		{ list-style: none; display: inline; padding-left: 10px; }

/* Introduction */
#introduction			{ margin: 0 0 20px; padding-bottom: 20px; border-bottom: 2px dashed #ccc; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
#introduction h2		{ font-size: 48px; font-weight: 300; margin-bottom: 10px; }
#introduction h2 span	{ display: inline-block; padding: 0 10px; font-weight: 400; background-color: #c00; color: #fff; }
#introduction p			{ font-size: 24px; color: #222; font-weight: 300; }

/* Slideshow */
#slideshow				{ display: none; }
/* #slideshow			{ height: 350px; margin: 0 0 20px; background-color: #222; -moz-box-shadow: 0 0 50px #000 inset; -webkit-box-shadow: 0 0 50px #000 inset; box-shadow: 0 0 50px #000 inset; border: 1px solid #333; border-bottom: 1px solid #444; } */

/* Works */
#work-list				{ overflow: hidden; padding: 10px 0; }
.work-item				{ width: 300px; height: 200px; overflow: hidden; margin-bottom: 10px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.5); outline: 1px solid #fff; }
.work-img				{ position: absolute; top: -200px; left: 0; display: block; background-color: #222; margin: 0 0 15px; }
.work-item:hover .work-img	{ top: 0; }
.work-content			{ position: absolute; bottom: 0; width: 280px; padding: 10px; background-color: rgba(0,0,0,0.75); }
.work-item:hover .work-content	{ background-color: rgba(0,0,0,1); }
.work-content a			{ color: #ccc; }
.work-item:hover a		{ color: #c00; }
.work-content a:hover	{ color: #c00; text-decoration: underline; }
.work-title				{ font-size: 14px; line-height: 18px; margin-bottom: 5px; color: #fff; text-transform: uppercase; }
.work-description		{ font-size: 11px; }
.work-description li	{ color: #fff; padding: 0 5px; border-left: 1px solid #999; display: inline; text-transform: lowercase; }
.work-description li:first-child	{ border: none; padding-left: 0; }

/* Sidebar */
#sidebar				{ display: none; }
#sidebar h2				{ font-size: 18px; color: #ccc; margin-bottom: 10px; border-left: 2px solid #666; padding-left: 10px; }
#sidebar p,
#sidebar ul				{ font-size: 13px; margin: 10px 0; }
#sidebar ul				{ margin-left: 20px; }
#sidebar li				{ list-style: outside disc; }
.section				{ margin: 0 0 40px; }

/* Footer */
#footer					{ padding: 20px 0 40px; border-top: 2px dashed #ccc; font-size: 13px; overflow: hidden; }
#social-network-list	{ float: right; }
#social-network-list ul	{ display: inline; margin-left: 5px; }
#social-network-list li	{ list-style: none; display: inline; padding: 0 5px; border-left: 1px solid #0f0f0f; }
#social-network-list li:first-child	{ border: none; }
#copyright				{ float: left; }

#footer iframe			{ margin: 10px 0; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
	.container_12,
	.grid_4				{ width: auto; margin: 0 0 10px; }
	body				{ background-color: #eee; }
	#header				{ height: auto; padding: 10px; margin-bottom: 10px; }
	#about-me,
	#contact-info		{ position: static; float: none; }
	#contact-info li	{ padding: 0; display: block; }
	#content			{ padding: 10px; }
	#introduction h2	{ font-size: 32px; }
	#footer				{ padding: 10px 10px 20px; height: auto; }
	#social-network-list,
	#copyright			{ float: none; }
	#social-network-list ul	{ margin: 0; }
	
	#work-list			{ padding: 0; }
	.work-item			{ height: auto; width: auto; display: block; float: none; box-shadow: none; outline: none; background-color: #fff; }
	.work-item > a		{ display: block; overflow: hidden; width: 300px; height: 200px; }
	.work-content		{ position: static; background: none; border-top: 1px dashed #ccc; width: auto; }
	.work-title,
	.work-description li		{ color: #222; }
	.work-description	{ font-size: 12px; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
	.container_12,
	.grid_4				{ width: auto; margin: 0 0 10px; }
	body				{ background-color: #eee; }
	#header				{ height: auto; padding: 10px; margin-bottom: 10px; }
	#about-me,
	#contact-info		{ position: static; float: none; }
	#contact-info li	{ padding: 0; display: block; }
	#content			{ padding: 10px; }
	#introduction h2	{ font-size: 32px; }
	#footer				{ padding: 10px 10px 20px; height: auto; }
	#social-network-list,
	#copyright			{ float: none; }
	#social-network-list ul	{ margin: 0; }
	
	#work-list			{ padding: 0; }
	.work-item			{ height: auto; width: auto !important; display: block; float: none; box-shadow: none; outline: none; background-color: #fff; padding: 10px; overflow: hidden; }
	.work-item > a		{ display: inline; float: left; width: 150px; height: 100px; overflow: hidden; margin-right: 10px; }
	.work-img			{ width: 150px; position: relative; top: -100px; }
	.work-content		{ position: static; background: none; width: auto; overflow: hidden; }
	.work-title,
	.work-description li		{ color: #222; }
	
	.work-title			{ font-size: 16px; }
	.work-description	{ font-size: 12px; }
	
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.container_12,
	.grid_4				{ width: auto; margin: 0 10px; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.work-item			{ width: 225px !important; height: 150px !important; margin-bottom: 10px; }
	.work-img			{ width: 225px; position: relative; top: -150px; }
	.work-content		{ width: 205px; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.work-item			{ margin-bottom: 20px; }
}