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

/* Medium desktop */
@media screen and (min-width:980px) and (max-width:1199px){
	/* Nav */
	#header li{
		margin:0 10px;
	}
	
	/* Featured Work */	
	.web, .design, .video{
		margin-left:0px;	
	}
	
	#design, #video{
		margin-top:10px;
	}
	
	#work .web .span3, #work .design .span3, #work .video .span3{
		margin-bottom:25px;
	}
	
	#work .web .span3:nth-child(1), #work .design .span3:nth-child(1), #work .video .span3:nth-child(1), #work .web .span3:nth-child(4), #work .design .span3:nth-child(4), #work .video .span3:nth-child(4), #work .web .span3:nth-child(7){
		margin-left:0;
	}
	
	#work .web .span3:nth-child(2), #work .web .span3:nth-child(3), #work .design .span3:nth-child(2), #work .design .span3:nth-child(3), #work .video .span3:nth-child(2), #work .video .span3:nth-child(3), #work .web .span3:nth-child(5), #work .web .span3:nth-child(6), #work .design .span3:nth-child(5), #work .design .span3:nth-child(6), #work .video .span3:nth-child(5), #work .video .span3:nth-child(6), #work .web .span3:nth-child(8), #work .web .span3:nth-child(9){
		margin-left:15px;	
	}
	
	/* About Me */
	#about .span4 h3{
		margin:0 0 10px 0px;
		text-align:center;
	}
	
	#about #design_skills h3{
		padding-top:5px;	
	}
	
	.circle{
		float:left;
		width:120px;
		margin-bottom:5px;
	}
	
	.circle:nth-child(even){
		margin-left:30px;
	}
	
	#development_skills .circle:nth-child(3), #development_skills .circle:nth-child(6), #design_skills .circle:nth-child(3), #design_skills .circle:nth-child(6){
		padding:0;
	}
	
	/* Contact */
	#contact form li:nth-child(2), #contact form li:nth-child(4){
		margin-left:15px;
	}
	
	#contact .span4 a#email_icon{
		left:60px;
	}
	
	#contact #social_media ul{
		left:55px;
	}
}
 
/* Portrait tablet to landscape and desktop */
@media screen and (min-width:768px) and (max-width:979px){
	.span12{
		padding-left:20px !important;
	}
	
	.section_header p{
		padding:10px 15%;
	}
	
	/* Header */
	#header ul{
		text-align:right;
	}
	
	#header li{
		margin:0 0 0 15px;
	}
	
	#header li a{
		padding:0 0;
	}
	
	/* Featured Work */	
	#work h3{
		margin-bottom:10px;
		margin-left:25px;
	}
	
	#web_article, #design_article, #video_article{
		margin-left:5px;	
	}
	
	.web, .design, .video{
		margin-left:25px;	
	}
	
	#work .web .span3, #work .design .span3, #work .video .span3{
		margin-bottom:25px;
	}
	
	#work .web .span3:nth-child(1), #work .web .span3:nth-child(3), #work .web .span3:nth-child(5), #work .web .span3:nth-child(7), #work .web .span3:nth-child(9), #work .design .span3:nth-child(1), #work .design .span3:nth-child(3), #work .design .span3:nth-child(5), #work .video .span3:nth-child(1), #work .video .span3:nth-child(3), #work .video .span3:nth-child(5){
		margin-left:0;
	}
	
	#work .web .span3:nth-child(4), #work .web .span3:nth-child(8), #work .design .span3:nth-child(4), #work .video .span3:nth-child(4){
		margin-left:50px;	
	}
	
	#design, #video{
		margin-top:0px;
	}
	
	/* Menu */
	#work_menu #work_img_container{
		width:90%;
	}
	
	#work_menu #work_img{
		width:100%;
		margin-left:14px;	
	}
	
	#work_menu #work_text_container{
		width:90%;
		margin-top:15px;
	}
	
	#work_menu #work_text{
		width:100%;
		margin-left:14px;
	}
	
	/* About Me */
	#about .span4 h3{
		margin:0 0 15px 0;
		text-align:center;
	}

	.circle{
		width:114px;
	}
	
	#development_skills .circle:nth-child(3), #development_skills .circle:nth-child(6), #design_skills .circle:nth-child(3), #design_skills .circle:nth-child(6){
		padding:0;
	}
	
	/* Contact */
	#contact form li:nth-child(2), #contact form li:nth-child(4){
		margin-left:15px;
	}
	
	#contact .span4 img{
		display:block;
		margin:28px auto 0 auto;
	}

	#contact .span4 a#email_icon{
		top:95px;
		left:40px;
		height:120px;
		background-size:85%;
	}
	
	#contact .span4 a#email_icon:hover{
		background-position:0 -123px;
	}
	
	#contact .offset6{
		margin-left:186px;	
	}
	
	#contact #social_media ul{
		left:20px;
	}

	/* Footer */
	#footer p{
		font-size:.75em;
		line-height:1.25em;
	}

	#footer #testimonial p{
		margin-right:25px;
	}
	
	#footer #twitter_feed{
		margin-top:50px;
	}
	
	#footer #testimonial h6{
		font-size:1.125em;
		margin:0 25px 5px 0;
	}
	
	#footer #twitter_feed h6{
		font-size:1.125em;
		margin:0 0 5px 25px;
	}
	
	#footer #tweet{
		margin-left:25px;
	}
	
	#footer #follow{
		margin-left:25px;	
	}
	
	#footer #tweets{
		margin-left:25px;
	}
	
	#footer #copyright p{
		margin:30px 0 5px 0;
		font-size:.70em;
	}
}
 
/* Landscape phone to portrait tablet */
@media screen and (max-width:767px){
	body{
		top:0;
		padding-left:0;
		padding-right:0;
	}
	
	h2{
		margin-bottom:10px;
		line-height:1em;	
	}
	
	.section_header p{
		padding:10px 10%;
	}
	
	/* Main */	
	#header{
		position:static;
		height:auto;
		z-index:0;
	}

	#intro, #work, #about, #contact{
		padding:50px 0;
	}
	
	/* Header */
	#header .span12{
		padding-left:0;	
	}
	
	#header #logo{
		position:static;
		left:auto;
		margin-top:0px;
		z-index:0;
	}
	
	#header #logo img{
		display:block;
		margin:10px auto 15px auto;
	}
	
	#header ul{
		margin:0px auto;
		padding:0;
	}
	
	#header li{
		display:block;
		font-size:1.5em;
		margin:2px 0;
	}
	
	#header li a{
		display:block;
		height:100%;
		width:100%;
		padding:10px 0;
		background:#202128;
	}
	
	#header li a:active{
		background:#1a1a1a;	
	}
	
	/* Intro */
	#intro .span12{
		padding-left:10px;	
		padding-right:10px;
	}
	
	#intro img{
		display:block;
		margin:0 auto;	
	}

	/* Featured Work */
	#work .span12{
		padding-left:10px;	
		padding-right:10px;
	}
	
	#work h3{
		text-align:center;
	}

	.web, .design, .video{
		margin-left:0px;	
	}
	
	#work .web .span3, #work .design .span3, #work .video .span3{
		height:180px;
		width:250px;
		margin-left:auto;
		margin-right:auto;
		display:block;
	}
	
	#work .web .span3:nth-child(2), #work .web .span3:nth-child(3), #work .web .span3:nth-child(5), #work .web .span3:nth-child(6), #work .web .span3:nth-child(8), #work .web .span3:nth-child(9),  #work .design .span3:nth-child(2), #work .design .span3:nth-child(3), #work .design .span3:nth-child(5), #work .design .span3:nth-child(6), #work .video .span3:nth-child(2), #work .video .span3:nth-child(3), #work .video .span3:nth-child(5), #work .video .span3:nth-child(6){
		margin-left:auto;
		margin-right:auto;
	}
	
	#work .web .box img, #work .design .box img{
		-webkit-transition:none;
		-o-transition:none;		
		transition:none;		
	}
		
	/* Web */
	#work .web1 img:hover{
		bottom:0px;
	}
	
	#work .web2 img:hover{
		bottom:0px;	
	}
	
	#work .web3 img:hover{
		bottom:0px;	
	}
	
	#work .web4 img:hover{
		bottom:0px;	
	}
	
	#work .web5 img:hover{
		bottom:0px;	
	}

	#work .web6 img:hover{
		bottom:0px;	
	}
	
	#work .web7 img:hover{
		bottom:0px;	
	}

	#work .web8 img:hover{
		bottom:0px;	
	}

	#work .web9 img:hover{
		bottom:0px;
	}
	
	/* Design */
	#work .design1 img:hover{
		bottom:0px;
	}
	
	#work .design2 img:hover{
		bottom:0px;	
	}
	
	#work .design3 img:hover{
		bottom:0px;	
	}
	
	/* Video */
	#work .video .box img{
		-webkit-transition:none;
		-o-transition:none;		
		transition:none;
		opacity:1;
	}
	
	#work .video .box img:hover{
		opacity:1;
	}	
	
	/* Menu */
	#work_menu_container{
		width:100%;	
	}
	
	#work_menu{
		width:70%;
	}
	
	#work_menu #work_img_container{
		width:95%;
	}
	
	#work_menu #work_img{
		width:100%;
		margin-left:7px;	
	}
	
	#work_menu #work_img img{
		width:100%;	
	}
	
	#work_menu #work_text_container{
		width:95%;
		margin-top:15px;
	}
	
	#work_menu #work_text{
		width:100%;
		margin-left:7px;
	}
	
	/* About Me */
	#about .span12{
		padding-left:10px;	
		padding-right:10px;	
	}
	
	#about .span6 h3{
		margin:0 0 15px 0;
		text-align:left;	
	}

	#about .span6 img{
		float:left;
		margin:0 15px 0 0;
	}
	
	#about #development_skills, #about #design_skills{
		margin-left:15%;
		margin-right:15%;	
	}
	
	#about #development_skills h3, #about #design_skills h3{
		padding-top:15px;
	}
	
	#about .span4 h3{
		margin:0 0 15px 0;
		text-align:center;
	}
	
	.circle{
		float:left;
		width:33.33%;
		margin-bottom:10px;
	}
	
	#development_skills .circle:nth-child(3), #development_skills .circle:nth-child(6), #design_skills .circle:nth-child(3), #design_skills .circle:nth-child(6){
		padding:0;
	}
	
	/* Contact */
	#contact .span12{
		padding-left:10px;	
		padding-right:10px;
	}
	
	#contact form li:nth-child(1), #contact form li:nth-child(2), #contact form li:nth-child(3), #contact form li:nth-child(4), #contact form li:nth-child(5){
		width:48%;
	}
	
	#contact form li:nth-child(2), #contact form li:nth-child(4){
		margin-left:1.5%;
	}
	
	#contact label.span3{
		margin-left:0;
	}
	
	#contact form li:nth-child(6){
		width:98%;	
	}
	
	#contact .phone{
		display:none;	
	}
	
	#contact .form_button{
		margin-right:2%;
	}
	
	#contact #social_media ul{
		left:0;
		text-align:center;
	}

	#contact #social_media li{
		position:relative;
		bottom:3px;
		margin:0 10px 0 0;		
	}
		
	/* Footer */
	#footer .span12{
		padding-left:20px;	
		padding-right:20px;
	}

	#footer #testimonial p{
		margin-right:0;
	}
	
	#footer #twitter_feed, #footer #testimonial{
		margin-top:40px;
	}
	
	#footer #twitter_feed h6, #footer #testimonial h6{
		margin:0 0 5px 0;
	}

	#footer #tweet{
		margin-left:0;
	}
	
	#footer #follow{
		margin-left:0;	
	}
	
	#footer #tweets{
		margin-left:0;
	}
}

/* Large mobile landscape */
@media screen and (min-width:568px) and (max-width:767px){
	.section_header p{
		padding:10px 10%;
	}
	
	#work .span10{
		margin-left:auto;
		margin-right:auto;
		display:inline-block;	
	}
	
	section#work{
		margin-left:auto;
		margin-right:auto;
		display:inline-block;	
	}
	
	#work web{
		margin-left:auto;
		margin-right:auto;
		display:block;	
	}
	
	#work h3{
		text-align:left;
		clear:both;
	}
	
	.web, .design, .video{
		margin-left:0px;	
	}

	#work .web .span3, #work .design .span3, #work .video .span3{
		float:left;
		margin-bottom:30px;
	}
	
	#work .web .span3:nth-child(2), #work .design .span3:nth-child(2), #work .video .span3:nth-child(2), #work .web .span3:nth-child(4), #work .design .span3:nth-child(4), #work .video .span3:nth-child(4), #work .web .span3:nth-child(6), #work .design .span3:nth-child(6), #work .video .span3:nth-child(6), #work .web .span3:nth-child(8){
		margin-left:30px;
	}
	
	#work .web .span3:nth-child(1), #work .web .span3:nth-child(3), #work .web .span3:nth-child(5), #work .web .span3:nth-child(7), #work .web .span3:nth-child(9), #work .design .span3:nth-child(1), #work .design .span3:nth-child(3), #work .design .span3:nth-child(5), #work .video .span3:nth-child(1), #work .video .span3:nth-child(3), #work .video .span3:nth-child(5){
		margin-left:0;
	}
}

/* Landscape phones and down */
@media screen and (max-width:480px){
	.section_header p{
		padding:10px 0%;
	}
	
	/* Featured Work */	
	#work_menu .forward_button{
		right:-30px;
	}
	
	#work_menu .back_button{
		left:-30px;
	}
	
	/* Menu */
	#work_menu{
		width:62%;
	}
	
	#work .box{
		height:160px;
	}
	
	/* About Me */
	#about .span6 img{
		display:block;
		float:none;
		margin:0 auto 15px auto;
	}
	
	#about #development_skills, #about #design_skills{
		margin-left:0;
		margin-right:0;	
	}
	
	#about .span6 h3, #about .span4 h3{
		margin:0 0 15px 0;
		text-align:center;
	}
}