/* ============================================================================== */
/* General Styles
/* ============================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,
address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,
b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video {font: inherit; font-size: 100%; margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display: block; position: relative;}
ol,ul {list-style: none;}

html {overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html,body {font: normal 100% helvetica, arial, sans-serif;  background: #FFF;}
body {
    transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

h1, h2, h3 {display: inline-block; text-transform: uppercase;}
p, li, dt, dd, .details h2, .details h3, .dateRange {font: normal 0.875em/1.3em 'archerMedium', Helvetica, Arial, Serif; color: #333;}
dl, dt, dd {float: left; color: #888888;}
dt, dd {width: 50%; padding-bottom: 5px;}
dd, .dateRange {text-align: right;}

a {color: #6EA6C5;}
a:visited {}
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}

#container {
	width: 100%; max-width: 890px; position: relative; 
	margin: 0 auto; padding: 0 10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
	/* ^ tells the padding to push the content innword, and not add to the overall box height */
}
[role="main"] {width: 100%; float: left;}/*780/800*/
.innerWrap {float: left; position: relative;}
#headshot {width: 10.9%; position: absolute; left: -15%; top: 36px;}
#headshot img {
	width: 100%; height: auto;
	opacity: 1; display: block;
	-webkit-border-radius: 50px; 
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px; 
	border-radius: 50px;
}

section {width: 100%; position: relative; float: left;}/*780/800*/
section:after, article:after, .degree:after {height: 0; content: "."; display: block; clear: both; text-indent: -9999em;}
section:nth-child(n+2) {padding-top: 30px;}

/*Define Constants*/
.sectionTitle {float: left;}
#intro h2, 
.sectionContent {float: right;}
#intro h2, 
.sectionContent {width: 78.2%;}/*610/780*/
.sectionTitle, 
#intro h1 {width: 15.3%;}/*w120/780*/
.sectionTitle {font: normal 1em/1em 'dinProRegular', Helvetica, Arial, Serif; color: #333; line-height: 1em; padding-top: 2px;}
ul {list-style: none;}
ul li {position: relative; padding: 0 0 10px 10px;}
ul li:before {content: "."; position: absolute; top: 4px; left: 0; font-size: 1.5em; line-height: 0;}
.details {width: 75%; float: left;}
.dateRange {width: 25%; float: left;}

/*Top/Bottom Borders*/
.border-fixed-left {
	width: 6px; height: 100%; 
	content: "";
	display: block;
	position: fixed; left: 0;
	background: rgba(88, 195, 240, 1);
}
/*#intro header:before, 
#contact:after {width: 78.2%; height: 4px; position: absolute; content: "."; display: block; clear: both; text-indent: -9999em; background: #58C3F0;}
#intro header:before {top: 0; right: 0;}
#contact:after {right: 0; bottom: 0;}*/

#intro header {padding-top: 40px;}
#intro h1 {font: normal 1.125em/1em 'dinProMedium', Helvetica, Arial, Serif; color: rgba(51, 57, 58, 1);/*color: #222;*/}/*font eq: 18px*/
#intro h2 {font: normal 1.125em/1em 'archerMedium', Helvetica, Arial, Serif; color: rgba(76, 76, 77, 1); /*color: #999;*/}

#experience article {margin-bottom: 20px;}
#experience .jobTitle {color: #191919;}
#experience .companyName {text-transform: capitalize;}
#experience .companyName span {text-transform: none;} 

#education .school, #education .degree {display: block;}
#education .degree {text-transform: capitalize;}

#contact {padding-bottom: 40px;}
#contact .sectionContent {border: none;}
#contact .details, #contact dl {width: 100%;}

/* Add Border Styles */
#intro h1, #intro h2, .sectionContent {border-bottom: solid 2px #DFDFDE; padding-bottom: 20px;}


@media all and (max-width: 1170px) {
	#headshot {display: none;}
	#headshot img {opacity: 0;}
}

@media all and (max-width: 790px) {
	#intro h2 {padding-top: 18px;}
}

@media all and (max-width: 500px) {

	#intro header:before, 
	#contact:after {width: 100%;}
	#intro h2 {padding-top: 0;}
	h1, h2, h3 {display: block;}
	p, li, dt, dd, 
	.details h2, 
	.details h3, 
	.dateRange {font-size: 0.750em;}
	#intro h1 {border-bottom: 0; padding-bottom: 4px;}
	.sectionTitle {padding-bottom: 10px;}
	.sectionTitle, 
	.sectionContent, 
	#intro h1, 
	#intro h2 {width: 100%;}
	#intro h2 {padding-top: 0;}
	#contact .details {width: 100%;}
	.innerWrap {padding-left: 4px;}
}
.fade {
	-moz-transition: all 250ms linear;
	-webkit-transition: all 250ms linear;
	-ms-transition: all 250ms linear;
	-o-transition: all 250ms linear;
	transition: all 250ms linear;
}