/*****************************************
	weo3 design css boink boink

1. HTML Elements
2. General
3. Foundation Tweaks
4. Navigation
5. Colors
6. Playing with webgl omgomgomgomg
7. Media Queries

*****************************************/

/*****************************************
	HTML Elements
*****************************************/

html, body {
	min-height: 98%;
	color: #898989;
}

body {
	overflow: hidden;
	background: #336699;
/*	background-image: linear-gradient(left top, rgb(173,193,214) 0%, rgb(51,102,153) 100%);
	background-image: -o-linear-gradient(left top, rgb(173,193,214) 0%, rgb(51,102,153) 100%);
	background-image: -moz-linear-gradient(left top, rgb(173,193,214) 0%, rgb(51,102,153) 100%);
	background-image: -webkit-linear-gradient(left top, rgb(173,193,214) 0%, rgb(51,102,153) 100%);
	background-image: -ms-linear-gradient(left top, rgb(173,193,214) 0%, rgb(51,102,153) 100%);

	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgb(173,193,214)),
		color-stop(1, rgb(51,102,153))
	);
	background-attachment: fixed;*/
}

h3 {
	font-size: 2em;
	font-weight: normal;
	font-family: 'Righteous', cursive;
	color: #898989;
	text-shadow: 1px 1px 0 #fff;
}

fieldset {
	border-radius: 1em;
	background: #FFF;
	background: rgba(255, 255, 255, 0.8);
}

blockquote {
	font-family: "Times New Roman", Times, serif;
	font-size: 3em;
	line-height: 1em;
	margin-top: 0.7em;
	font-weight: normal;
	font-style: italic;
	quotes: "\201c" "\201d";
	text-align: center;
	margin-left: 0em;
	padding: 0;
	color: #369;
	border: none;
	margin-bottom: 0.8em;
}

	blockquote a {
		color: #369;
		border: none;
	}

blockquote:first-of-type {
	text-indent: -10px;
}

blockquote::before {
	content: open-quote;
}

blockquote::after {
	content: close-quote;
}

p {
	font-size: 0.92em;
	line-height: 1.3em;
}

a {
	color: #FA0;
}

	a:hover {
		color: #F90;
		text-decoration: none;
	}

ul.aboutme {
	list-style-type: none;
}

	ul.aboutme li {
		list-style-type: none;
	}

	ul.aboutme li:before {
		content: "\27B3";
		padding-right: 0.5em;
	}

/*****************************************
	General
*****************************************/

#oh-yeah-main {
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.weo3-brand {
	position: fixed;
	z-index: 1;
	top: 1em;
}

	.weo3-brand img {
		max-height: 96%;
		max-width: 96%;
		opacity: 0.5;
		position: fixed;
		left: 1em;
		-webkit-transition: all 0.25s ease;
	    -moz-transition: all 0.25s ease;
	    -o-transition: all 0.25s ease;
	    -ms-transition: all 0.25s ease;
	    transition: all 0.25s ease;
		-webkit-filter: drop-shadow(rgba(0,0,0,0.1) 0 5px 5px);
		filter: drop-shadow(rgba(0,0,0,0.1) 0 5px 5px);
	}

.header {
	position: relative;
	z-index: 5;
	margin-top: 2.2em;
	padding: 0.5em 0 0.5em 0;
}

.segment {
	padding-bottom: 0.5em;
	box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
}

.work-content {
	position: relative;
	z-index: 10;
	margin-top: 1em;
	box-shadow: none;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.hire-content {
	position: relative;
	z-index: 20;
	background: #FFF;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 1em;
	margin-top: 1em;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.who-content {
	position: relative;
	z-index: 30;
	margin-top: 1em;
	background: #FFF;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 1em;
}

.resume-content {
	position: relative;
	z-index: 40;
	margin-top: 1em;
	background: #FFF;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 1em;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.hideous {
	display: none;
}

.portrait {
	float: left;
	padding: 0;
	max-height: 11.1em;
	border: 0.3em solid #FFF;
	border-radius: 1em;
	margin-right: 1em;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.reveal-modal {
	border-radius: 0.9em;
}

.reveal-modal img {
	float: left;
	max-width: 50%;
	margin-right: 2em;
	border-radius: 0.8em;
	box-shadow: -1px -1px 1px rgba(51, 51, 51, 0.7), 1px 1px 1px rgba(151, 151, 151, 0.7);
}

.exp-title {
	margin-bottom: 0;
}

/*****************************************
	Foundation Tweaks
*****************************************/
.row .large-2 {
	padding: 0;
}

[class*="column"] + [class*="column"]:last-child {
	float: left;
}

/*****************************************
	Navigation
*****************************************/

.header-navigation {
	list-style-type: none;
	margin-left: 0.5em;
}

.header-navigation li {
	float: left;
}

	.header-navigation li a {
		display: block;
		font-family: 'Righteous', cursive;
		background: #FFF;
		padding: 0em 1.8em;
		font-size: 1.1em;
		color: #AFAFAF;
		text-transform: uppercase;
		border: 2px solid #FFF;
		box-shadow: 0 0 0.75em rgba(0,0,0,0.2);
		-webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	.header-navigation li a.current {
		color: #FFF;
		background: #777;
	}

	.header-navigation li a:hover {
		color: #FFF;
		background: #999;
		cursor: pointer;
	}

	.header-navigation li a.current:hover {
		background: #777;
		cursor: default;
	}

		.header-navigation li a.bookend-left {
			border-radius: 2em 0 0 2em;
			box-shadow: -0.1em 0 0.5em rgba(0,0,0,0.2);
		}

		.header-navigation li a.bookend-right {
			border-radius: 0 2em 2em 0;
			box-shadow: 0.1em 0 0.5em rgba(0,0,0,0.2);
		}

.work-content {
	/*-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}

.portfolio-navigation {
	margin: 0 auto;
	list-style-type: none;
}

.portfolio-navigation li {
	float: left;
}

	.portfolio-navigation li a {
		display: block;
		width: 8em;
		height: 8em;
		padding: 0;
		margin: 1em;
		border: 0.2em solid #FFF;
		border-radius: 0.8em;
		overflow: hidden;
	}

	.portfolio-navigation li a {
		-webkit-transition: all 0.25s ease;
	    -moz-transition: all 0.25s ease;
	    -o-transition: all 0.25s ease;
	    -ms-transition: all 0.25s ease;
	    transition: all 0.25s ease;
	}

	.portfolio-navigation li a:hover {
		box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
		cursor: pointer;
	}

		.portfolio-navigation li a img {
			max-width: 300%; /* negate foundation's setting for imgs */
			margin-left: -3em;
			width: 170%;
		}


/*****************************************
	Navigation
*****************************************/

.ocean {
	background-color: rgba(51, 102, 204, 0.7);
	background-image: linear-gradient(right bottom, rgb(51,102,153) 8%, rgb(199,211,232) 100%);
	background-image: -o-linear-gradient(right bottom, rgb(51,102,153) 8%, rgb(199,211,232) 100%);
	background-image: -moz-linear-gradient(right bottom, rgb(51,102,153) 8%, rgb(199,211,232) 100%);
	background-image: -webkit-linear-gradient(right bottom, rgb(51,102,153) 8%, rgb(199,211,232) 100%);
	background-image: -ms-linear-gradient(right bottom, rgb(51,102,153) 8%, rgb(199,211,232) 100%);

	background-image: -webkit-gradient(
		linear,
		right bottom,
		left top,
		color-stop(0.08, rgb(51,102,153)),
		color-stop(1, rgb(199,211,232))
	);
}

.field {
	background-color: rgba(150, 139 , 19, 0.7);
	background-image: linear-gradient(left top, rgb(255,245,207) 0%, rgb(150,139,19) 100%);
	background-image: -o-linear-gradient(left top, rgb(255,245,207) 0%, rgb(150,139,19) 100%);
	background-image: -moz-linear-gradient(left top, rgb(255,245,207) 0%, rgb(150,139,19) 100%);
	background-image: -webkit-linear-gradient(left top, rgb(255,245,207) 0%, rgb(150,139,19) 100%);
	background-image: -ms-linear-gradient(left top, rgb(255,245,207) 0%, rgb(150,139,19) 100%);

	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgb(255,245,207)),
		color-stop(1, rgb(150,139,19))
	);
}


/*****************************************
	Playing with webgl omgomgomgomg
*****************************************/
#lando {
	position: absolute;
	top: 0;
}


/*****************************************
	Media Queries
*****************************************/

@media only screen and (min-width: 961px) {
	.weo3-brand img {
		opacity: 1;
	}
}

@media only screen and (max-width:960px) {
	#lando {
		display: none;
	}
}

@media only screen and (max-width: 775px) {

	.weo3-brand img {
		top: 0.6em;
		left: 0.6em;
	}

	.header-navigation li a {
		padding: 0.1em 1em;
		font-size: 0.75em;
	}

	.portfolio-navigation {
		margin-top: 0.5em;
	}

	.portfolio-navigation li a {
		width: 11em;
	}

	.reveal-modal img {
		max-width: 100%;
	}
}

@media only screen and (max-width: 450px) {

	html, body {
		overflow: auto;
	}

	h3 {
		font-size: 1.2em;
	}

	.weo3-brand img {
		top: 0.3em;
		left: 0.3em;
	}

	.reveal-modal {
		border-radius: 0.45em;
	}

		.reveal-modal img {
			border-radius: 0.4em;
		}

	.reveal-modal .close-reveal-modal {
		top: 0em;
		right: 0.1875em;
	}

	.header-navigation li a {
		padding: 0.2em 0.45em;
		font-size: 0.75em;
	}

	.portfolio {
		margin-top: 0.5em;
	}

	.portfolio-navigation li a {
		margin: 0.2em 0;
		width: 100%;
	}

	.portrait {
		max-height: 8em;
	}

	.who-content, .hire-content, .resume-content {
		border-radius: 0.5em;
	}
}