html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

body {
	color: #fff;
	font: 10px "Source Sans Pro", "Open Sans", Helvetica, Arial, sans-serif;
}
html,body {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	height: 100%;
}

:focus {
	outline: 0;
}

::selection {
	background: #f00288;
	color: #fff;
}
::-moz-selection {
	background: #f00288;
	color: #fff;
}

.jumbo {
	background: #313234 url('/bg.jpg') no-repeat top center;
	background-size: cover;
}
.page-cocktails .jumbo, .page-cocktail .jumbo {
	background-image: url('/bg-cocktails.jpg');
	background-position: left bottom;
}
.page-blog .jumbo, .page-post .jumbo {
	background-image: url('/bg-blog.jpg');
	background-position: right bottom;
}
.page-code .jumbo {
	background-image: url('/bg-code.jpg');
	background-position: right bottom;
}
body:not(.ios) .jumbo {
	background-attachment: fixed;
}

.jumbo-black {
	padding-top: 15em;
	color: #fff;
	padding-bottom: 6em;
}
.jumbo-white {
	padding-bottom: 10em;
	padding-top: 15em;
}
@media (max-width: 1023px) {
	.jumbo-black, .jumbo-white {
		height: auto;
		padding-bottom: 6em;
	}
}




@media (max-width: 1024px) {
	body {
		font-size: 9px;
	}
}
@media (max-width: 600px) {
	body {
		font-size: 8px;
	}
}
@media (max-width: 400px) {
	body {
		font-size: 7px;
	}
}


.wrap {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 1150px;
  margin-top: 3em;
}

@media (max-width: 1160px) {
	.jumbo, .jumbo-white, .wrap {
		padding-right: 2.4em;
		padding-left: 2.4em;
	}
}
@media (min-width: 721px) {
	.items {
		margin-top: 6em;
	}
	.itemlist .item {
		width: 49%;
		display: inline-block;
		box-sizing: border-box;
		vertical-align: top;
	}
	.itemlist .item:nth-child(2n) {
		padding-left: 2em;
	}
	.itemlist .item:nth-child(1n) {
		padding-right: 2em;
	}
}


.page-code .wrap, .page-resume .wrap {
	max-width: 900px;
}
.jumbo .wrap {
	max-width: 800px;
	text-align: center;
	font-weight: 300;
}


@media (min-width: 1024px) {
	main .content-div {
		margin-top: 6em;
	}
}
@media (max-width: 1023px) {
	main .content-div {
		margin-top: 4em;
	}
}

.welcome {
	height: 100vh;
	text-align: center;
}

.welcome h1 {
	font-size: 12vh;
	font-weight: 100;
	margin-top: 12vh;
}
.welcome h2 {
	color: #999999;
	font-weight: 100;
	font-size: 5vh;
	line-height: 1.4em;
}

.welcome h2 a {
	text-decoration: none;
	border-bottom: 1px solid #5ac486;
	transition: all ease-in-out .2s;
}

body:not(.touch) .welcome h2 a:hover {
	border-color: #ee3286;
}

body:not(.touch) .devin:hover,
body:not(.touch) .devin-small:hover,
body.touch .devin.hover,
body.touch .devin-small.hover {
	ztransform: rotate(0deg) rotate(-90deg) rotate(-180deg) rotate(-270deg) rotate(-360deg);
	-webkit-animation: spin .5s linear;
	-webkit-animation-iteration-count: infinite;
}

.devin {
	background: url(/devin.png) no-repeat center center;
	background-size:contain;
	height: 28vh;
	width: 28vh;
	margin: 0 auto;
	margin-top: 10vh;
	margin-bottom: 10vh;
}
.devin-small {
	background: url(/devin.png) no-repeat center center;
	background-size:contain;
	height: 3em;
	width: 3em;
	display: inline-block;
}
.devin-small-placeholder {
	height: 3.3em;
	width: 3em;
	display: inline-block;
}
@media (max-width: 768px) {
	.welcome h1 {
		font-size: 6vh;
	}
	.welcome h2 {
		font-size: 3vh;
	}

}




header {
	padding: 1.5em 0 1.3em 0;
	position: absolute;
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
header nav {
	display: table;
	width: 100%;
}
header a {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 3.1em;
	width: 1%;
}

nav a {
	color: #333;
	font-size: 1.8em;
	font-weight: 300;
	text-decoration: none;
	transition: color ease-in-out .2s;
}

.page-home nav a, .page-code nav a, .page-blog nav a, .page-cocktails nav a, .page-tagged nav a, .page-cocktail nav a {
	color: #fff;
}
.page-home header, .page-code header, .page-blog header, .page-cocktails header, .page-tagged header, .page-cocktail header {
	border-bottom: 1px solid rgba(255,255,255,.2);
}

body:not(.touch) nav a:hover {
	color: #5ac486;
}

nav a.active {
	zfont-weight: 600;
}

@media (max-width: 1023px) {
	.home-nav-node-top {
	}
	.home-nav-node-center {
		display: none;
	}
	.home-nav-home {
		display: none;
	}
	.devin-small-placeholder {
		background: url(/node.svg) no-repeat center center;
		background-size:contain;
		opacity: .1;
	}
}
@media (min-width: 1024px) {
	.home-nav-node-top {
		display: none;
	}
	.home-nav-node-center {
	}
	.home-nav-home {
	}
}

@media (max-width: 600px) {
	header {
		padding: .6em 0 .6em 0;
	}
	.jumbo-black {
		padding-top: 9em;
	}
	.jumbo-white {
		padding-top: 12em;
		padding-bottom: 2em;
	}
}

.divider {
	clear: both;
}

a {
	color: #5ac486;
	transition: color ease-in-out .2s;
}
body:not(.touch) main a:hover {
	color: #ee3286;
}

main {
	min-height: 78%;
	padding-bottom: 4em;
	box-sizing: border-box;
}

@-webkit-keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
footer {
	text-align: center;
	background: #fff;
	padding-bottom: 5em;
	padding-top: 10em;
}
footer .social a {
	display: inline-block;
	background: url(/node.svg) no-repeat;
	background-size:contain;
	height: 6em;
	width: 6em;
	padding-top: 1.8em;
	text-decoration: none;
	color: #9ba2a7;
	margin: .1em;
}
footer .social .fa {
	vertical-align: baseline;
	font-size: 2.6em;
	transition: transform .25s cubic-bezier(.21,.82,.34,1.67);
}
body:not(.touch) footer .social a:hover .fa {
	transform: translateY(-.3em);
}
footer .social .fa-stack-overflow {
	transform: translateY(-7%);
}
footer .info  {
	text-transform: uppercase;
	color: #9ba2a7;
	font-size: 2em;
	font-weight: 900;
	margin-bottom: 1.6em;
}

.page-home footer .info {
	display: none;
}
.page-home footer .social a {
	background: none;
	height: 12em;
	width: 12em;
	color: #000;
}
.page-home footer .social .fa {
	font-size: 7em;
}
.page-home footer {
	padding-top: 0;
	padding-bottom: 10em;
}

@media (max-width: 600px) {
	footer .social a {
		height: 4em;
		width: 4em;
		padding-top: 1em;
	}
	footer .social .fa {
		font-size: 2em;
	}
	footer .info  {
		margin-bottom: 1em;
	}
}

@media (max-width: 700px) {
	.page-home footer .social a {
		height: 6em;
		width: 6em;
	}
	.page-home footer .social .fa {
		font-size: 4em;
	}
}


pre code {
	font-size: .7em;
	line-height: 1.3em;
	font-family: Consolas, Courier New, monospace;
	padding: 1em !important;
	border-radius: 4px;
	margin-bottom: 1em;
  font-weight: 500;
}

b, strong {
	font-weight: bold;
}
i {
	font-style: italic;
}


.date {
	font-size: 2em;
	margin-bottom: 1em;
	color: #999999;
	float: right;
	font-style: italic;
}

.middletitle {
	margin-bottom: .4em;
	font-size: 2.8em;
	color: #4d4d4d;
	margin-top: -.3em;
	font-weight: 600;
}

.subtitle {
	margin-bottom: .4em;
	font-size: 2.5em;
	color: #4d4d4d;
	margin-top: -.3em;
}

.title {
	margin-bottom: .5em;
	font-size: 4.4em;
	color: #4d4d4d;
	line-height: 1.4em;
	font-weight: 100;
}
.title a {
	text-decoration: none;
	color: #4d4d4d;
}
.jumbo-black .title, .jumbo-black .body {
	color: #fff;
}
.body {
	font-size: 2.18em;
	line-height: 1.6em;
	color: #808080;
}
.item .tags {
	float: left;
	margin-top: 1em;
	font-size: 1.5em;
}
.item .tags .tag {
	margin-right: 1em;
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border ease-in-out .25s;
	display: inline-block;
}
body:not(.touch) .item .tags .tag:hover {
	border-bottom: 1px solid #000;
}

.item .post-photo, .item img {
	transition: opacity .2s ease-in-out;
	transform: translateZ(0);
}

body:not(.touch) .post-photo:hover {
	opacity: .8;
}

.item {
	margin-bottom: 12em;
}
.page-portfolio .item, .page-store .item {
	margin-bottom: 5em;
}
.page-code .item {
	margin-bottom: 5em;
}
.item p {
	margin-bottom: .8em;
}
.skill:not(:last-child):after {
	content: ",";
	margin-right: .2em;
}


.home-div-title {
	margin-top: 7vh;
}

@media (max-width: 768px) {
	.home-div-title {
		margin-top: 4vh;
	}
	.page-post .title {
	}
	.title {
		font-size: 3em;
	}

}

.showcases {
	max-width: 900px;
	margin: 0 auto;
	margin-top: 14vh;
	text-align: center;
}
.showcase-item-size {
	width: 220px;
	height: 220px;
}

.showcase-item {
	margin-top: -46px;
	display: inline-block;
	margin-bottom: 1.5em;
	box-sizing: border-box;
	overflow: hidden;
	background: url(/mask2.svg) no-repeat center center; /* for ie, in case u were wondering */
	background-size: 88px;
	-webkit-mask: url(/node.svg) 0 0 /220px 220px;
	mask: url(/node.svg) 0 0 /220px 220px;
}
.showcase-photo {
	width: 100%;
	height: 100%;
	background-repeat: none;
	background-size: cover;
	background-position: center center;
}

@media (min-width: 1024px) {
	.showcase-item:nth-child(1) {
		margin-left: 90px;
	}
	.showcase-item:nth-child(3) {
		margin-right: 90px;
	}
}

@media (min-width: 835px) and (max-width: 1023px) {
	.showcase-item:nth-child(1) {
		margin-left: 190px;
	}
	.showcase-item:nth-child(2) {
		margin-right: 190px;
	}
	.showcase-item:nth-child(6) {
		margin-left: 190px;
	}
	.showcase-item:nth-child(7) {
		margin-right: 190px;
	}
}

@media (min-width: 731px) and (max-width: 834px) {
	.showcase-item:nth-child(1) {
		margin-left: 90px;
	}
	.showcase-item:nth-child(2) {
		margin-right: 90px;
	}
	.showcase-item:nth-child(6) {
		margin-left: 90px;
	}
	.showcase-item:nth-child(7) {
		margin-right: 90px;
	}
}

@media (min-width: 649px) and (max-width: 730px) {
	.showcase-item:nth-child(3n+1) {
		margin-right: 177px;
		margin-left: 177px;
	}
}

@media (min-width: 460px) and (max-width: 648px) {
	.showcase-item:nth-child(3n+1) {
		margin-right: 107px;
		margin-left: 107px;
	}
}
@media (min-width: 320px) and (max-width: 459px) {
	.showcase-item:nth-child(3n+1) {
		margin-right: 80px;
		margin-left: 80px;
	}
	.showcase-item-size {
		margin-top: -33px;
		width: 150px;
		height: 150px;
		-webkit-mask: url(/node.svg) 0 0 /150px 150px;
		mask: url(/node.svg) 0 0 /150px 150px;
	}
}

@media (max-width: 319px) {
	.showcase-item-size {
		margin-top: 0;
	}
}

body:not(.ie) .showcase-item-svg, body:not(.ie) .code-node-icon {
	display: none;
}
body.ie .showcase-item-mask, body.ie .code-node-mask {
	display: none;
}


.grow .showcase-photo {
	transition: all .2s ease-in-out;
	transform: translateZ(0);
}
.grow:hover .showcase-photo {
	transform: scale(1.2) rotate(4deg);
	transform-origin: center center;
}

.item img {
	font-size: 2.18em;
}

.item p img {
	font-size: 1em;
}

hr {
	opacity: .2;
	margin: 3em 0;
}

.page-blog .more, .page-portfolio .more, .page-store .more {
	display: none;
}

@media (min-width: 500px) {
	.item .post-photo, .item img {
		width: 21em;
		margin-left: 4em;
		float: right;
		margin-bottom: 1em;
	}
	.item .portfolio-photo {
		float: left;
		margin-left: 0;
		margin-right: 4em;
	}

	.item img.full {
		width: 100%;
	}
}

@media (max-width: 920px) {
	.item .post-photo, .item img {
		width: 17em;
		margin-left: 2em;
	}
	.item .portfolio-photo {
		margin-left: 0;
		margin-right: 2em;
	}
}

@media (max-width: 626px) {
	.item .post-photo, .item img {
		width: 100%;
		margin-bottom: 1em;
		margin-top: 2em;
		margin-right: 0;
		margin-left: 0;
	}
}

@media (min-width: 627px) and (max-width: 768px) {
	.item .post-photo, .item img {
		width: 14em;
	}
}

@media (min-width: 627px) {
	.portfolio-item .post-wrap {
		display: table;
	}

	.portfolio-item .post-wrap .post-col {
		display: table-cell;
		margin: 0;
		vertical-align: top;
	}

	.portfolio-item .post-wrap .post-col:first-child {
		width: 40%;
	}
	.portfolio-item .post-wrap .post-col:last-child {
		width: 100%;
	}

	.portfolio-item .portfolio-photo {
		float: none;
	}
}



.item img[alt="small"] {
	width: 23%;
	border-radius: 2px;
	margin-bottom: .5em;
	margin-right: .5em;
	box-sizing: border-box;
	cursor: pointer;
}

.link-portfolio {
	font-size: 3em;
	margin-bottom: 5em;
	font-weight: 300;
	margin-top: 2.8em;
}
.link-portfolio a {
	text-decoration: none;
	border-bottom: 1px solid #5ac486;
	transition: all ease-in-out .2s;
}

body:not(.touch) .link-portfolio a:hover {
	border-color: #ee3286;
}

.controls .next {
	float: right;
	margin-right: 1em;
}
.controls .prev {
	float: left;
}

ul, ol {
	margin-bottom: 1em;
	padding-left: 1.11em;
	width: auto;
	overflow: hidden;
}
ul li {
	list-style: disc;
}
ol li {
	list-style: decimal;
}

.thumbs {
	margin-top: 1em;
	margin-bottom: 20em;
	display: block;
	background: red;
}

.post-date {
	font-size: 1.5em;
	font-style: italic;
}

.jumbo .post-date {
	font-size: 1em;
	margin-top: 0;
}

.loggedout .secret {
	display: none;
}

.skill, .skill-wrap {
	display: inline-block;
}

.page-cocktails .post-body img {
	display: none;
}

.page-post .title {
	font-size: 3em;
	margin-bottm: .4em;
	margin-top: .5em;
}

.page-post .post-date {
	font-size: 1em;
	margin-bottom: 2em;
}

.repo-language {
	text-decoration: none;
	display: block;
	float: left;
	width: 3.3em;
	height: 3.3em;
	margin-right: 1.5em;
	color: #fff;
	background: #333 url(/mask2.svg) no-repeat center center; /* for ie, in case u were wondering */
	background-size: 8.8em;
	text-align: center;
	line-height: 3.3em;
	font-size: 2.3em;
	font-weight: bold;
	-webkit-mask: url(/node.svg) 0 0 /3.3em 3.3em;
	mask: url(/node.svg) 0 0 /3.3em 3.3em;
}

.repo-language-php {
	background-color: #c88afc;
	fill: #c88afc;
}
.repo-language-js {
	background-color: #fb7a95;
	fill: #fb7a95;
}
.repo-language-html {
	background-color: #79e5f8;
	fill: #79e5f8;
}
.repo-language-css {
	background-color: #fece90;
	fill: #fece90;
}
.repo-language-shell {
	background-color: #f479d0;
	fill: #f479d0;
}
.repo-language-c {
	background-color: #7afb8f;
	fill: #7afb8f;
}
.repo-language-objc {
	background-color: #d8f479;
	fill: #d8f479;
}
.repo-language-py {
	background-color: #89a2ff;
	fill: #89a2ff;
}

.repo-language:hover {
	color: #fff;
}

.page-title {
	text-align: center;
	margin-bottom: .2em;
}

.post-title {
	font-weight: 600;
	line-height: 1.1em;
	margin-bottom: .5em;
}

.results {
	background: #e7ecf0;
}

.results .items {
	padding-top: 10em;
	padding-bottom: 10em;
}

.resume-col .item {
	margin-bottom: 6em;
}

.resume-col .item:last-child {
	margin-bottom: 0;
}

.results .wrap {
	max-width: 800px;
}

.result-icon {
	height: 23em;
	width: 23em;
	background: url(/node-white.svg) no-repeat center center;
	background-size: contain;
	float: left;
	text-align: center;
}

.result-content {
	width: 480px;
	float: right;
}

.result-icon > div {
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center center;
	height: 10em;
	width: 10em;
	margin-top: 6.6em;
	display: inline-block;
}

body:not(.touch) .result-icon:hover > div,
body.touch .result-icon.hover > div {
	animation: 1s ease-in-out 0s normal none infinite swing;
	transform-origin: center bottom;
}

@keyframes swing {
	0% {
		transform: rotate(7deg) scale3d(1.11, .8, 1) translate3d(10px, 10px, 0);
	}
	25% {
		transform: scale3d(1, 1, 1) translate3d(0, -10px, 0);
	}
	50% {
		transform: rotate(-7deg) scale3d(1.11, .8, 1)  translate3d(-10px, 10px, 0);
	}
	75% {
		transform: scale3d(1, 1, 1) translate3d(0, -10px, 0);
	}
	100%{
		transform: rotate(7deg) scale3d(1.11, .8, 1) translate3d(10px, 10px, 0);
	}
}

@media (max-width: 766px) {
	.result-content {
		width: 100%;
		float: none;
		text-align: center;
	}
	.result-icon {
		float: none;
		margin: 0 auto;
		margin-bottom: 4em;
	}
	.result-icon > div {
	}
	.results .items {
		padding-top: 5em;
		padding-bottom: .5em;
	}
}


.result-icon-mobile {
	background-image:url(./smartphone.svg);
}
.result-icon-desktop {
	background-image:url(./analytics.svg);
}
.result-icon-web {
	background-image:url(./internet.svg);
}
.result-icon-design {
	background-image:url(./lover.svg);
}

.cocktails {
}

.cocktail-icon {
	height: 7.7em;
	width: 7.7em;
	background: url(/node.svg) no-repeat center center;
	background-size: contain;
	float: left;
	margin-right: 3em;
	margin-bottom: 10em;
	text-align: center;
}

.cocktail-icon > div {
	margin-top: 1.9em;
	height: 4em;
	width: 4em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
}

.cocktail-icon-default {
	background-image: url(/scocktail.svg);
}
.cocktail-icon-whiskey {
	background-image: url(/whiskey.svg);
}
.cocktail-icon-maitai {
	background-image: url(/maitai.svg);
}
.cocktail-icon-tequila {
	background-image: url(/tequila.svg);
}
.cocktail-icon-coffee {
	background-image: url(/coffee.svg);
}
.cocktail-icon-rum {
	background-image: url(/rum.svg);
}
.cocktail-icon-vodka {
	background-image: url(/vodka.svg);
}
.cocktail-icon-gin {
	background-image: url(/gin.svg);
}
.cocktail-icon-mixer {
	background-image: url(/mixer.svg);
}

.resume-col:first-child {
	float: left;
	width: 20%;
}
.resume-col:last-child {
	float: right;
	width: 70%
}

@media (max-width: 680px) {
	.resume-col:first-child, .resume-col:last-child {
		float: none;
		width: 100%;
	}
}

@media (max-width: 450px) {
	.page-home footer .social a {
		height: 5em;
		width: 5em;
	}
	.page-home footer .social .fa {
		font-size: 3em;
	}
	.home-get-hold {
		font-size: 2em;
		margin-top: 2vh;
	}
}

.post-date {
	font-style: italic;
	margin-top: 2em;
}

.node-svg-wrap {
	height: 20px;
}

.code-node-icon {
	height: 7.3em;
	width: 7.3em;
	margin-right: 2.5em;
	float: left;
}

.code-node-icon rect {

}

.code-node-icon .text {
	text-anchor: middle;
	font-size: 2.3em;
	fill: #fff;
	font-weight: bold;
}

.page-post .items.item, .page-cocktail .items.item {
	max-width: 90em;
	margin-top: 9em;
}

.read-more .fa {
	padding-left: .5em;
	transition: all ease-in-out 3.3s;
	white-space: nowrap;
}

body:not(.touch) .read-more a:hover .fa {
	padding-left: 75%;
}

.read-more {
	margin-top: 2em;
	height: 2em;
	overflow: hidden;
}

button {
	background: #5ac486;
	border-radius: 8px;
	padding: .8em 2em;
	font-size: 1.8em;
	border: none;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	transition: .2s all ease;
}
button:hover {
	color: #5ac486;
	border: 1px solid #5ac486;
	background: transparent;
}

.purchase-wrap {
	height: 8em;
}

.purchase {
	float: right;
}