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

@import url(https://fonts.googleapis.com/css?family=Lobster|Raleway:400,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);

/* Fonts */
* {font-family: 'Raleway', sans-serif; line-height:150%;}
body {
	margin:auto; 
	background-color:#e9ecf2;
    background: -webkit-linear-gradient(left top, #9e9c9d, #e9ecf2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #9e9c9d, #e9ecf2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #9e9c9d, #e9ecf2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #9e9c9d, #e9ecf2); /* Standard syntax */
}
a.page:link {color:#2c2e55;}
a.page:hover {color:#4d5189;}
a.page:visited {color:#2c2e55;}

header {background-image:url(../images/minimal-min.jpg); background-repeat:no-repeat; background-size:cover; background-position:center; background-color: #CCC; padding-bottom:3em; padding:5em; box-shadow: 2px 2px 20px 0 #767475; margin-bottom:4em; border-bottom:5px double #4b4b50;}

h1 {/*font-family: 'Lobster', cursive;*/font-family: 'Oswald', sans-serif; font-weight:300; padding-top:0.5em; text-transform:uppercase; letter-spacing:4px; color:#FFF;}
h2, h3 {padding:1em 1em 0 0.6em; text-transform:uppercase; line-height:150%;}
p {padding:0 1.5em 1em 1em; font-size:16px;}

footer {background-color:#000; width:100%;}
.workIndent {margin:auto; width:80%;}
.lofiBlack {background-color:#000; min-height:10em;}
.plate {width:350px; margin:auto; background-color:#000; padding: 1em 3em 1em 3em; margin-top:7em;}
.nameplate {font-size:350%; text-align:center; margin:auto; padding-bottom:10px; line-height:100%;}
.titleplate {text-transform:uppercase; letter-spacing:2px; text-align:center; color:#FFF; margin:auto; padding-top:1em; border-top:1px solid #FFF; font-size:80%; padding-top:2em;}
.nameTracked {font-family:inherit; letter-spacing:12px;}
.outlined {border: 2px solid #333; background-color:#fff;}
.midtone {background-color:#54555e;}
.double {border-style:double; border-width:6px; border-color:#FFF; background-color:#02112b;}
.taller {min-height:25em;}
.exp {min-height:432px;}
.filled {background-color:#000;}
.centered {width:80%; margin:auto;}
.uppity {position:relative; top:-20px; left:15px; padding-right:2em; min-height:14.2em;}
.whiteText {color:#FFF; padding-right:0.5em;}
a.whiteText:link {text-decoration:none;}
a.whiteText:hover {color:#a3a9f2;}
.biggie {font-size: 5.9vw; padding: 0; margin-left:20px; font-weight:600; text-transform:uppercase; clear:both;}
.medi {font-size: 3vw; font-weight:600; color:#FFF; padding-bottom:0.5em;}
.indented {margin-left:2.5em;}
.down {line-height:150%;}
.smTxt {
	font-size:12px;
	border-top-color:#666666;
	border-top-style:solid;
	border-top-width:1px;
	padding-top:10px;
}
p.center {text-align:center;}
.portfolioFeature {width:30vw; margin:50px 10px 10px 30px;}


.container {width:95%; margin:auto;}
.shortline { max-width:50em; margin-left:2%;}
.iconLabel {width:100%; font-size:100%; text-align:center; font-weight:bold; text-decoration:none; color:#fff}
a.iconLabel:link {font-size:100%; text-align:center; font-weight:bold; text-decoration:none; color:#000;}
a.iconLabel:hover {color:#8ca8d9;}
a.iconLabel:visited {color:#fff;}
.iconRight {margin: 2em 4em 2em 2em; padding:1.5em;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #000;
	background-color:#1a325c;
}

/* Nav */

	#nav {
		background-color: #000;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10000;
		cursor: default;
		/*font-size: 110%;*/
		text-transform:uppercase;
		letter-spacing:1px;
		font-size:90%;
		font-weight:700;
	}

		#nav ul {
			margin-bottom: 0.5em;
			margin-top: 0.5em;
		}

		#nav li {
			display: inline-block;
			padding-right:3em;
			padding-top:0.5em;
			margin-bottom:0.5em;
		}

		#nav a {
			position: relative;
			display: block;
			color: #fff;
			text-decoration: none;
			outline: 0;
		}

			#nav a:hover {
				color: #CCC !important;
			}

			#nav a.active:before {
				content: '';
				display: block;
				position: absolute;
				bottom: -0.6em;
				left: 50%;
				margin-left: -0.75em;
				border-left: solid 0.75em transparent;
				border-right: solid 0.75em transparent;
				border-top: solid 0.6em #282828;
			}
			
/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}	
	
	
/* Icons */

	.icon {
		text-decoration: none;
		text-align:center;
	}

		.icon:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon > .label {
			display: none;
		}

		.icon.featured {
			color: #FFFFFF;
			display: block;
			margin: 0 1.5em 1.5em 0;
			cursor: default;
			padding:1em;
			padding-top:2em;
			font-size:5em;
		}
		
		.icon.featured2 {
			color: #ffffff;
			display: block;
			margin: auto;
			/*cursor: default;*/
			font-size: 5em;
		}
		.icon.featured2:hover {
			opacity:0.5;
			transition: all 0.5s ease-in-out 0s;
			-moz-transition: all 0.5s ease-in-out 0s;
			-webkit-transition: all 0.5s ease-in-out 0s;
			-o-transition: all 0.5s ease-in-out 0s;	
		}
		.icon.footie {
			color: #FFFFFF;
			margin: 0 1.5em 0 0;
			padding: 0.5em;
			font-size: 2em;
		}
		.icon.footie:hover {
			opacity:0.5;
			transition: all 0.5s ease-in-out 0s;
			-moz-transition: all 0.5s ease-in-out 0s;
			-webkit-transition: all 0.5s ease-in-out 0s;
			-o-transition: all 0.5s ease-in-out 0s;
		}

			.icon.featured:before {
				font-size: 4.5em;
			}			
			
/*  RESPONSIVE COLUMN CODE   */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}

/*  GRID OF EIGHT  */
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
  	width: 87.3%;
}

.span_6_of_8 {
  	width: 74.6%;
}

.span_5_of_8 {
  	width: 61.9%;
}

.span_4_of_8 {
  	width: 49.2%;
}

.span_3_of_8 {
  	width: 36.5%;
}

.span_2_of_8 {
  	width: 23.8%;
}

.span_1_of_8 {
  	width: 11.1%;
}

/*  MEDIA QUERIES */

@media only screen and (max-width: 1280px) {
	.taller {min-height:35em;}
	.portfolioFeature {width:60vw;}
	.span_5_of_8 {width:100%;}
}

@media only screen and (max-width: 980px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }	
	.biggie, .medi {font-size: 10vw;}
	.taller {min-height:15em;}
	.icon.featured {font-size:80%;}
	.portfolioFeature {width:60vw;}
	.uppity {top:-30px;}

}
@media only screen and (max-width: 480px) {
	.biggie {font-size: 15vw; line-height:100%; margin-top:1em;}
	.uppity {top:-10px;}
	.plate {margin-top:10em; width:90%;}
	.nameplate {padding:0; margin:auto; letter-spacing:normal;}
	.nameTracked {letter-spacing:3px;}
	.skills {margin-top:2em;}
	#nav li {
			padding:0 2em 0 0;
			margin-top:1em;
		}
	#nav {padding-bottom:1em; font-size:60%}	
	.icon.featured, icon.featured2 {font-size:60%;}
	.portfolioFeature {width:80vw; margin:0 0 1em 0;}
	header {padding:0 0 2em 0;}
}