/*------------------ @reset ------------------*/
body,html { margin:0; padding: 0; width: 100%; /*height:100%;*/ }
body,h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,legend,
input,button,select,textarea,dl,dd,dt,hr,table,thead,tbody,tfoot,tr,th,td
{ margin:0; padding:0 }
img,a img,:link img,:visited img { border:0;padding:0;margin:0; }
address,cite,caption { font-style: normal }
caption,th { text-align: left }
ol,ul { margin:0; margin-left: 25px; }
a,button { outline: 0; }
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: 0px; }

@font-face{
	font-family:ProximaNovaLight;
	font-weight:normal;
	src:url("fonts/Proxima-Nova-Light.otf") format("opentype");
}

@font-face{
	font-family:ProximaNovaBold;
	font-weight:bold;
	src:url("fonts/Proxima-Nova-Bold.otf") format("opentype");
}

@font-face{
	font-family:ProximaNovaSemibold;
	font-weight:normal;
	src:url("fonts/Proxima-Nova-Semibold.otf") format("opentype");
}

@font-face{
	font-family:ProximaNovaBlack;
	font-weight:900;
	src:url("fonts/Proxima-Nova-Black.otf") format("opentype");
}

::-moz-selection {
	background:rgba(0,0,0,0.9);
	color:#fff;
}
::selection {
	background:rgba(0,0,0,0.9);
	color:#fff;
}

/*------------------ @body ------------------*/
body {
	/* twofishillustration.com created this header. Isn't it dope? */
	background: #f4f3f3 url("https://www.google.com/drive/static/images/home/intro-1600.jpg") repeat-x center top fixed;
	color: #444948;
	font: normal 16px/24px "ProximaNovaLight", "Helvetica Neue", Helvetica, sans-serif;
	background-size: 100% 100%;
}

a {
	text-decoration: none;
	color: #214a64;
}

p strong {
	font-family: ProximaNovaSemiBold;
}

	h1 {
		margin: 0 auto;
	}

	h1, h1 a {
		width: 333px;
		height: 242px;
		display: block;
	}

		h1 a {
			text-indent: -9999px;
			background: url(images/logo.png) no-repeat 0 0;
			border: 0;
		}

	header {
		height: 526px;
		position: fixed;
		top: 0;
		width: 100%;
	}

	header .ryan {
		padding-top: 150px;
	}

	header .avatar {
		display: block;
		border-radius: 50%;
		width: 70px;
		height: 70px;
		margin: 0 auto;
	}

	header h2 {
		color: #fff;
		text-align: center;
		display: block;
		font-size: 3em;
		line-height: 1em;
		padding-top: 20px;
	}

	header h2 span {
		display: block;
		font-size: 14px;
		padding-top: 15px;
		font-weight: normal;
		color: rgba(255,255,255,0.6);
		font-family: ProximaNovaLight;
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}

	header .social {
		text-align: center;
		padding-top: 0;
	}

		header .social a {
			width: 50px;
			height: 50px;
			display: inline-block;
			text-indent: -999em;
			-webkit-transform: scale(0.5, 0.5);
			transform: scale(0.5, 0.5);
			background-position: center center;
			background-repeat: no-repeat;
			text-align: center;
			border: 0;
			color: #fff;
			-webkit-transition: all .2s ease-in-out; /* For Safari 3.1 to 6.0 */
    	transition: all .2s ease-in-out;
		}

			header .social a.twitter  { background-image: url(images/twitter.png); }
			header .social a.devRant { background-image: url(images/devRant.png); }
			header .social a.linkedin { background-image: url(images/linkedin.png); }
			header .social a.medium   { background-image: url(images/medium.png); }
			header .social a.email    { background-image: url(images/email.png); }
			header .social a.github   { background-image: url(images/github.png); }
			header .social a.resume   { background-image: url(images/img2.jpg); }


#top {

}

#logo {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 20px;
}

.skills {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	height: 60px;
	display: none;
}
	.skills li {
		border-top-style: solid;
		display:inline-block;
		width: 20%;
		position: absolute;
		bottom: 0;
		text-align: center;
	}
	.skills li.html  { border-top-color: rgba(33,74,100, 1.0); border-top-width: 10px; }
	.skills li.scss  { border-top-color: rgba(33,74,100, 0.8); border-top-width: 10px; left: 20%; }
	.skills li.js 	 { border-top-color: rgba(33,74,100, 0.6); border-top-width: 7px;  left: 40%; }
	.skills li.rails { border-top-color: rgba(33,74,100, 0.4); border-top-width: 4px;  left: 60%; }
	.skills li.ios   { border-top-color: rgba(33,74,100, 0.2); border-top-width: 4px;  left: 80%; }

#container {
	margin: 526px auto 0 auto;
	width: 100%;
	background: #fff;
	position: relative;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	z-index: 3;
	padding-top: 20px;
}

#container h2 {
	border-bottom: 1px solid #f4f3f3;
	display: block;
	width: 100%;
	font-size: 0.8em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	font-family: ProximaNovaSemiBold;
	height: 50px;
}

	#container h2 span {
		margin: 0;
		display: block;
		width: 780px;
		margin: 0 auto;
	}

	#container h2 span em {
		border-bottom: 1px solid #444948;
		font-style: normal;
		display: inline-block;
		padding: 20px 0;
		height: 10px;
	}

		#container h2 span em.lefty { float: left; }
		#container h2 span em.righty { float: left; margin-left: 380px; }

.portfolio {
	width: 780px;
	padding: 20px 20px 40px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
}

	.portfolio img {
		max-width: 100%;
	}

	.portfolio section.thirds {
		width: 240px;
		float: left;
	}

		.portfolio section.thirds:nth-child(2) {
			padding-left: 30px;
			padding-right: 30px;
		}

		.portfolio .item {
			box-shadow: 0 0 5px rgba(0,0,0,0.2);
			margin-bottom: 30px;
		}

		.portfolio section.thirds .item {
			width: 100%;
			margin-bottom: 30px;
			display: block;
		}

		.portfolio section.thirds img {
			width: 100%;
			height: auto;
			display: block;
		}

	.portfolio section.column {
		width: 375px;
		float: left;
	}

	.portfolio section.column:last-child {
		padding-left: 30px;
	}

		.portfolio section a { font-family: ProximaNovaSemiBold; }

		.portfolio section a.item {
			position: relative;
			display: block;
			width: 375px;
			overflow: hidden;
			margin-bottom: 30px;
			border: 0;
		}

		.portfolio section .icon {
			margin-bottom: 30px;
		}

			.portfolio section a img {
				display: block;
			}

#contact {
	clear: both;
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 60px 0;
	text-align: center;
}

#contact form {
	display: block;
	overflow:hidden;
	width: 500px;
	margin: 0 auto;
	display: none;
}

#contact h2 {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 5px;
	color: #130E08;
	border-bottom: 0;
	height: auto;
}

#contact h3 {
	text-align: center;
	opacity: 0.7;
	display: block;
	padding-bottom: 20px;
}

.email-button {
	border-radius: 20px;
	border: 2px solid #444948;
	display: inline-block;
	text-align: center;
	color: #444948;
	padding: 30px 60px;
	font-size: 1.3em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: "ProximaNovaSemibold";
	margin-bottom: 20px;
}

.email-button:hover {
	background: #444948;
	color: #fff;
}

#contact p span {
	opacity: 0.7;
}

form p {
	padding-top: 20px;
	margin-bottom: 40px;
	display: block;
	margin: 0 auto;
	border-bottom: 1px solid #444948;
}

input, textarea, select {
	border: 0;
	font: normal 14px/21px ProximaNovaSemiBold, "Helvetica Neue", Helvetica, sans-serif;
	padding: 10px 0;
	background: none;
	color: #444948;
	border-radius: 0;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
}

textarea {
}

select {
	font-size: 12px;
}

input:focus, textarea:focus, select:focus {
	outline: none;
}

	input {
		resize:none;
	}

	input, textarea {
		padding-left: 0.7em;
	}

	::-webkit-input-placeholder { color: #444948 !important; text-transform: uppercase; font-size: 12px; }
	:-moz-placeholder { color: #444948 !important; text-transform: uppercase; font-size: 12px; }

	div.button {
		padding-top: 60px;
	}

	#submit {
		display: block;
		border: 0;
		cursor: pointer;
		margin: 0 auto;
		color: #444948;
		border: 1px solid #444948;
		box-sizing: border-box;
		width: 100%;
		font-weight: bold;
		text-transform: uppercase;
		padding: 20px 0;
		font-size: 1.3em;
		background: none;
		font: normal 14px ProximaNovaBold, "Helvetica Neue", Helvetica, sans-serif;
		text-align: center;
	}

		#submit:hover {
			background: #444948;
			color: #fff;
		}

	.error {
		border: 1px solid red;
	}

	select {
	}

	label {
		display: none;
	}

	.message {
		height: 29px;
		font-size: 11px;
		line-height: 11px;
		padding: 17px 15px 0 15px;
		text-align: center;
		background: none;
		font: normal 14px ProximaNovaBold, "Helvetica Neue", Helvetica, sans-serif;
		text-transform: uppercase;
	}

	#success {
		border: 1px solid #5bbd72;
		color: #5bbd72;
	}

	#error {
		border: 1px solid red;
		color: red;
	}

footer {
	width: 780px;
	display: block;
	margin: 0 auto;
	padding-top: 30px;
	text-align: center;
	font-size: 11px;
	color: #3F372F;
	padding-bottom: 60px;
	position: relative;
	font-family: ProximaNovaSemibold;
	text-align: right;
}

	footer p {
		padding-bottom: 0;
		margin: 0 auto;
		display: block;
		clear: both;
		text-align: center;
	}

	footer a {
		color: #4F4740;
		text-decoration: none;
	}

		footer a:hover {
			color: #fff;
			border-bottom-color: #fff;
		}

@media only screen and (max-width: 640px) {
	.portfolio,
	.portfolio .column,
	footer,
	#contact form,
	#container,
	#container h2 span { width: 100%; box-sizing: border-box; }

	#container { margin-bottom: 0; }

	footer { padding-top: 0; padding-bottom: 10px; }

	.portfolio section a.item,
	.portfolio section a.item img,
	.portfolio section.thirds,
	.portfolio section.thirds:nth-child(2),
	.portfolio section.column:nth-child(2),
	.portfolio section.column { padding: 0; margin: 0; float: none; width: 100%; }

	.portfolio section a.item,
	.portfolio section.thirds .icon,
	.portfolio section.thirds .item { margin-bottom: 10px; }

	#container,
	#contact form {
		padding-left: 10px;
		padding-right: 10px;
	}

	section.ethos,
	#totop,
	#container h2 span em.righty { display: none; }

	div.button { padding-top: 10px; }

	header .ryan { padding-top: 120px; }

	header h2 span { padding-top: 0; padding-bottom: 20px; }
}