/*reset styles*/
html, body, div, span, applet, object, iframe, /*removed p*/
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1;}
ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/*clearfix*/
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/*site specific styles*/
html {-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */}
body {font-family: 'Source Sans Pro', sans-serif; font-size: 100%; color: #747474; background: #fff;}

a, a:link, a:visited, a:active{color: #3c63a3;text-decoration:none;}
a:hover, a:focus{color: #3c63a3;text-decoration:underline; -webkit-tap-highlight-color: rgba(0,0,0,0);}
	
img{max-width: 100%;}

h1{font-family: 'Source Sans Pro', sans-serif; font-weight:700; font-size: 250%; color: #fff; margin: 0px 0px 20px 0px; letter-spacing: 0.03em;}
h2{font-family: 'Source Sans Pro', sans-serif; font-size: 160%; color: #fff; letter-spacing: 0.00em;}

@media screen and (max-width: 520px) {
h1{ font-size: 200%;}	
}

#document{width: 100%;  text-align: left;margin-right: auto; margin-left: auto;  z-index:1;}
header{width: 100%; background-color:#fff; padding-left: 5%;  max-height: 123px; position: fixed; top: 0; left: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box; z-index: 99;}
#logo{padding: 2% 0 5% 0; float: left; width: 80%;}

#content{padding-top: 160px; background: #e7e7e7;}

#work{margin:0 auto 40px auto; width: 80%/*was 970px*/;}
#work .work-nav{float: right; margin: 10px 0px 0px 0px;  width: 60%;}
#work ul{overflow: hidden; margin: 0px; padding: 0px; text-align: right; }
#work li{display: inline-block; margin-left: 3%; font-family: 'Source Sans Pro', sans-serif; font-size: 116% ; color: #fff; letter-spacing: 0.04em; }
#work .work-nav a, a:link, a:visited, a:active{color: #7b7b7b;}
#work .work-nav a:hover, #work .work-nav .active a, #work .work-nav a:focus {color: #fff; text-decoration:none;}
#work h1 {font-family: 'Source Sans Pro', sans-serif;  font-weight:700; font-size: 250%; color: #fff; margin-bottom: 38px; letter-spacing: 0.03em; float: left;  }

@media screen and (max-width: 956px) {
	#work h1, #work .work-nav{float: none; margin-bottom: 2%;}
	#work .work-nav{width: 100%;}
	#work ul{text-align: left; }
	#work li{margin-left: 0%; margin-right: 3%; overflow: hidden; } 
	}
	
@media screen and (max-width: 768px) {
	#content{padding-top: 20%;}
}
	
@media screen and (max-width: 520px) {
#content{padding-top: 30%;}
#work h1, #work-example h1{ font-size: 200%;}	
#work li{font-size: 100%;}
}

@media screen and (max-width: 384px) {
#work li{font-size: 87.5%; margin-right: 2%;}
}

/*individual work pages*/

#work-example {max-width:727px; margin:2% auto 0 auto; padding-bottom: 40px;}
#work-example .description{ font-size: 100%; line-height: 1.4em; max-width:727px; margin:5% auto 40px auto; clear: both;}
#work-example h1{color: #fff; margin-bottom: 1.5%; letter-spacing: 0em; margin-left: 0;}
#work-example h4{margin-bottom: 6%; letter-spacing: 0em;  font-family: 'Source Sans Pro', sans-serif; margin-left: 2px; font-weight: 700; line-height:1.3em;}

#work-example .green-box{width: 100%; background-color:#abc03f; color:#fff; font-size: 92.5%; line-height: 1.5em; overflow: hidden;}
#work-example .green-box .left{float: left; width: 46%; margin: 2%;}
#work-example .green-box .right{float: right; width: 46%; text-align:right; margin: 2%;}
#work-example .green-box a{color:#fff;}
#work-example .green-box a:hover, #work-example .green-box a:focus{text-decoration: underline;}

@media screen and (max-width: 768px) {
#work-example{ width: 80%; margin-top: 3%;}	
}

@media screen and (max-width: 520px) {
#work-example h1{ font-size: 200%; margin-bottom: 5%;}
#work-example h4{margin-bottom: 10%;}
#work-example .description{ margin-top: 20%;}
#work-example .green-box{font-size: 85%;}	
}


.portfolio {width: 100%; margin-top:3%; clear: both;  overflow: hidden;}
.portfolio div.item{ float: left; width: 33%;/*width: 220px; height: 182px;*/ background-color:transparent; margin-bottom: 10px; padding-bottom: 10px;}
.portfolio div.item:hover, .portfolio div.item:focus, .portfolio div.item:active{background-color: #f4f4f3;}
.portfolio h3 {font-weight: bold;text-decoration:none; padding-left: 3%; font-family: 'Source Sans Pro', sans-serif; font-size: 112%; margin: 1% 0 2% 0;}
.portfolio a {text-decoration:none; color: #747474;}
.portfolio img{margin-bottom: 6px; padding: 3% 3% 1% 3%; width: 94%; }

@media screen and (max-width: 956px) {
.portfolio div.item{ float: left; width: 50%;}	
}

@media screen and (max-width: 520px) {
.portfolio div.item{ float: left; width: 100%;}	
}

/*contact section*/
#contact{ width: 100%;background-color:#f4f4f0;clear: both;overflow: hidden; }
#contact .info{margin: 5% auto 6% auto; width: 80%;}
#contact .info p{margin-top: 30px; line-height: 2em; line-height: 1.6em;font-size: 92%;}
#contact h1{color: #d0d0d0;}

/*footer section*/	
footer{width: 100%; background-color: #fff; font-size: 62.5%;clear: both;padding: 0px; text-align:left;}
footer div{width: 80%; margin: 0 auto; padding: 1% 0 2% 0; }	

/*company section*/
#company{width: 100%; }
#company .who{ width: 60%; margin: 3% auto 5% auto; padding-right: 20%; padding-bottom: 2%;}
#company .who p{margin-top: 36px; line-height: 1.5em;}

#company .green-box{width: 100%; background-color:#abc03f;}
#company .what{width: 60%; margin: 3% auto 0 auto; line-height: 1.75em; padding: 5% 20% 3% 0%; color: #fff;}
#company .what p{margin-top: 36px; -webkit-column-count: 2;-moz-column-count: 2; column-count: 2;}

@media screen and (max-width: 520px) {
#company .who, #company .what{width: 80%; padding-right: 0;}	
}

@media screen and (max-width: 479px) {
#company .what p{-webkit-column-count: 1;-moz-column-count: 1; column-count: 1;}	
}