body{margin: 0; font-family: Helvetica, sans-serif; color: #333; background: #222;}
	li{line-height: 24px; list-style: none; font-size: 14px; color: #333; padding-left: 26px;}
	a{text-decoration: none; color: #277cab;}
	p{line-height: 25px; font-size: 15px;}
	
	h2{color: #545454; font-size: 20px; font-weight: normal; margin-top: 0; padding-bottom: 14px; padding-left: 5px; float: left;}
	h2 span{color: #888; margin-left: 4px;}
	h3{font-size: 18px; font-weight: normal; margin-bottom: 17px;}
	h4{font-size: 16px; margin-bottom: 9px; margin-top: 30px; font-weight: normal;}	
		
	header.primary{border-top: 10px solid #11405b; padding: 35px 30px 38px; overflow: hidden; background: #FFF; display: block;}
	header.secondary{float: left; width: 100%;}
	header.secondary img{float: right;}
	header.secondary.freelance{padding-bottom: 14px;}	

	#content{width: 1280px; margin: 0 auto;}
	section{border: 5px solid #e6e5e1; float: left; border-radius: 4px; background: white;}	
	article{clear: both; padding: 29px 40px 110px; border-top: 5px solid #c4c3bc; background: #f2f1ed; float: left;}
	article .project-details{width: 33.5%; float: right; margin-top: 34px;}
		
	.contact-info{width: 310px; float: left; margin-left: 20px;}
	.contact-info img{margin-top: 3px; width: 118px;}
	.contact-info ul{float: right; padding: 0; margin-top: 30px;}	
	/* .contact-info li{background: url("img/icons.png") no-repeat;} */
	li.email{background: url("img/mail.png") no-repeat; background-size: 11%; background-position-y: 6px; background-position-x: 1px;}
	li.mobile{background-position: 0 -22px;}
	li.location{background: url("img/location.png") no-repeat; background-size: 8%; background-position-y: 3px; background-position-x: 3px;}
	li.linkedin{background: url("img/linkedin.png") no-repeat; background-size: 13%; background-position-y: 2px;}
	.intro{margin-top: 10px; background: #17567a; width: 48%; float: left; margin-left: 60px; color: #FFF;  padding: 20px 20px 22px 30px; border-radius: 8px; font-family: Verdana, sans-serif; font-size: 20px; line-height: 34px;}
	.intro a{font-size: 12px; color: #FFF; background: #f99c00; padding: 8px 13px; border-radius: 3px; margin-left: 5px;}	
	
	.chart div{float: left; color: white; text-transform: uppercase; padding: 7px 0 5px 10px; font-size: 10px;}
	.chart span{font-weight: 900; position: relative; top: 21px;}
	.ui-design{background: #ee3b66;}
	.ui-design span{color: #ee3b66; left: -92px;}
	.ux-research{background: #1668cd;}
	.ux-research span{color: #1668cd; left: -52px;}
	.html-css{background: #66a11a; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
	.html-css span{color: #66a11a; left: -51px;}
	.first-task{border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
	
	.project{background: #e9e8e3; float: left; margin-right: 49px; margin-bottom: 35px;}
	.project strong{display: block; padding: 12px 15px 10px; color: #444; font-weight: normal;}
	.project img{width: 347px; border-left: 1px solid #DDD; border-right: 1px solid #DDD;}
	
	footer{background: #11405B; color: white; float: left; width: 100%; height: 60px;}
	footer p{margin: 18px 0 20px 38px; float: left;}
	footer a{float:right; background: #CCC; padding: 8px 12px; border-radius: 3px; margin-top: 15px; margin-right: 30px; color: #666;}	
		
	/* Responsive narrow layout */	
	@media screen and (max-width:930px) {
	    #content {
	      width: 830px;
	    }
	    article .project-details{float: left; width: 80%; margin-left: 6px;}
	    .chart{width: 400px;}
	    .intro{width: 39%; font-size: 19px; margin-right: 10px; float: right; margin-left: 0px;} 
	    .intro a{display: inline-block; padding-top: 0; padding-bottom: 0; margin-left: 0; margin-top: 12px;}
	    header.secondary img {max-height: 30px;}
	    h2{padding-top: 3px;}
	    .project{margin-right: 25px;}
	}