/*   STYLESHEET FOR paulingford.com   */


/*

BACKGROUND COLORS:

blue:	#9EC5CA
rust:	#D45F1B
brown:	#89724A
grey:	#616A71

*/


/*   GENERAL   */

html {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

*, *:before, *:after {
	-webkit-box-sizing:inherit;
	-moz-box-sizing:inherit;
	box-sizing:inherit;
}

html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-weight:normal;
	color:#FFFFFF;
	font-size:1em;
	z-index:1;
}

a {
	text-decoration:none;
}

h1, h2, h3, h4, h5, h6, a {
	font-weight:bold;
}

.clearfix {
	clear:both;
	height:0;
	width:0;
}

.self-clear:after {
  content:"";
  display:table;
  clear:both;
}

.td3 {
	-webkit-transition-duration:0.3s;
	-moz-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	transition-duration:0.3s;
}

.smooth-text {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}


/*   GENERAL   */

#mega-wrap {
	position:relative;
	width:100%;
	min-height:100%;
	border:17px solid #FFFFFF;
	background-color:#9EC5CA;
	z-index:1;
}

#bg-texture {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	background:transparent url('images/bgtexture.png') left top/1250px repeat;
	opacity:0.22;
	z-index:0;
}

#large-screen-centering {
	position:relative;
	height:100%;
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding-bottom:144px;
}

.wu-link {
	border-bottom:1px solid transparent;
}

.wu-link:hover {
	border-bottom:1px solid white;
}


/*   HEADER   */

#head-wrap {
	margin:74px 0 74px;
	padding-left:363px;
}

#head-name, #subhead-role, #subhead-role-spacer {
	position:relative;
	font-weight:bold;
	font-size:2.5em;
	margin:0;
	padding:0;
	line-height:1.1em;
}

#subhead-role {
	display:inline;
	margin-left:-2px;
}

#subhead-role-spacer {
	display:inline;
	opacity:1;
	-webkit-transition:opacity 3s ease-in;
	-moz-transition:opacity 3s ease-in;
	-o-transition:opacity 3s ease-in;
	transition:opacity 3s ease-in;
}

@-webkit-keyframes sh-cursor {
	0%   {opacity:1;}
	100%  {opacity:0;}
}

@-moz-keyframes sh-cursor {
    0%   {opacity:1;}
	100%  {opacity:0;}
}

@-o-keyframes sh-cursor {
    0%   {opacity:1;}
	100%  {opacity:0;}
}

@keyframes sh-cursor {
    0%   {opacity:1;}
	100%  {opacity:0;}
}

#subhead-role-spacer:before {
	content:"";
	position:absolute;
	bottom:5px;
	left:5px;
	height:37px;
	width:4px;
	background-color:#FFFFFF;
	-webkit-animation:sh-cursor 0.4s ease-in 0s infinite alternate;
	-moz-animation:sh-cursor 0.4s ease-in 0s infinite alternate;
	-o-animation:sh-cursor 0.4s ease-in 0s infinite alternate;
	animation:sh-cursor 0.4s ease-in 0s infinite alternate;
}

#subhead-role-spacer.stopped {
	opacity:0;
}


/*   ABOUT   */

#asn-wrap {
	position:relative;
	float:left;
	width:363px;
	padding:73px 92px 0 75px;
	font-size:1em;
	line-height:1.5em;
	z-index:10;
}

#about-spotify-wrap {
	position:relative;
	width:100%;
	margin-bottom:30px;
}

.about-paragraph {
	margin:0;
}

#spotify-intro {
	margin:0.8em 0 0 0;
}

.spotify-link {
	color:#FFFFFF;
	font-weight:normal;
}

#spotify-track {
	margin:0;
}

.spacer {
	height:4px;
	width:24px;
	background-color:#FFFFFF;
}


/*   NAV   */

#nav-wrap {
	position:relative;
	width:100%;
	margin-top:39px;
}

#nav-spacer {
	display:none;
}

#nav-links-ul {
	list-style-type:none;
	padding:0;
	margin:0;
	text-align:left;
}

.nav-link-li {
	display:block;
	margin:0.75em 0;
}

.nav-link {
	padding:0;
	cursor:pointer;
	font-weight:normal;
	color:#FFFFFF;
}


/*   JOBS   */

#experience-wrap {
	position:relative;
	width:100%;
	padding:0 12px 0 363px;
	z-index:5;
}

.job-wrap {
	display:inline-block;
	vertical-align:top;
	width:25%;
	min-width:150px;
	max-width:270px;
	padding:0 20px 83px 0;
	margin:0;
	color:#000000;
	font-family:'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size:0.75em;
	line-height:1.67em;
}

.company-logo {
	display:block;
	margin-bottom:13px;
	width:86px;
	height:60px;
}

.company-name, .job-title, .job-years {
	padding:0;
	margin:0;
}

.company-name {
	font-weight:900;
}

.job-title, .job-years {
	font-weight:400;
}


/*   MEDIA QUERIES   */

@media (max-width: 1120px) and (min-width: 1041px) {

	#head-wrap {
		padding-left:331px;
	}

	#asn-wrap {
		width:331px;
		padding:73px 76px 0 59px;
	}

	#experience-wrap {
		padding-left:331px;
	}
}

@media (max-width: 1040px) {

	#mega-wrap {
		background-color:#D45F1B;
		border-width:16px;
	}

	#bg-texture {
		opacity:0.13;
	}

	#head-wrap {
		margin:63px 0 75px;
		padding-left:308px;
	}

	#asn-wrap {
		width:308px;
		padding:73px 67px 0 49px;
	}

	#experience-wrap {
		padding:0 16px 0 308px;
	}

	.job-wrap {
		width:33%;
	}
}

@media (max-width: 900px) {

	#mega-wrap {
		background-color:#89724A;
	}

	#bg-texture {
		opacity:0.10;
	}

	#large-screen-centering {
		padding-bottom:346px;
	}

	#head-wrap {
		margin:52px 0 50px;
		padding:0 56px;
	}

	#asn-wrap {
		position:static;
		float:none;
		width:100%;
		padding:0 56px;
	}

	#nav-wrap {
		position:absolute;
		bottom:0;
		left:0;
		padding:0 28px;
		margin:0 0 176px 0;
	}

	#nav-spacer {
		display:block;
		margin:0 28px 44px;
	}

	.nav-link-li {
		float:left;
		width:33%;
		padding:0 28px;
	}

	#experience-wrap {
		padding:56px 28px 0;
	}

	.job-wrap {
		width:33%;
		min-width:initial;
		max-width:initial;
		padding:0 28px 31px;
	}
}

@media (max-width: 900px) and (min-width: 810px) {

	#large-screen-centering {
		padding-bottom:392px;
	}
	
	.nav-link-li {
		width:50%;
	}

	.job-wrap {
		width:25%;
	}
}

@media (max-width: 900px) and (min-width: 551px) {

	#about-spotify-wrap {
		margin-bottom:56px;
	}
}

@media (max-width: 550px) {

	#mega-wrap {
		background-color:#616A71;
		border-width:8px;
	}

	#large-screen-centering {
		padding-bottom:310px;
	}

	#head-wrap {
		padding:18px 24px;
		margin:0;
	}

	#head-name, #subhead-role, #subhead-role-spacer {
		font-size:1.8em;
		line-height:1.2em;
	}

	#subhead-role-spacer:before {
		bottom:4px;
		left:4px;
		height:29px;
		width:3px;
	}

	#asn-wrap {
		padding:6px 24px 0;
		font-size:0.875em;
		line-height:1.5em;
	}

	#nav-wrap {
		padding:0 16px;
	}

	#nav-spacer {
		margin:0 8px 26px;
	}

	.nav-link-li {
		width:50%;
		padding:0 8px;
		margin:6px 0;
	}

	#experience-wrap {
		padding:32px 16px 0;
	}

	.job-wrap {
		width:50%;
		padding:0 8px 31px;
	}
}