/*! Custom styles for portfolio website based on TACHYONS v4.7.3 | http://themai.li */

@import url(https://fonts.googleapis.com/css?family=Work+Sans:200,300,400,500,700,900);

html, body {
	height: 100%;
}
body {
    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #5A6268;
    background: #ffffff/*linear-gradient(to bottom, #EEEFF0, #AAB1B5)*/;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility !important;
    display: flex;
	flex-direction: column;
}
	.wrapper {
flex: 1 0 auto;
}
.serif {
	font-family: 'Alegreya', "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
/*
 * Color and text styles
 */
a{
	text-decoration: none;
    color: #5A6268;
}
p a {
	padding-bottom: 0em;
	box-shadow: inset 0 -2px 0 0 #ECE82F;
}
footer a {
	padding-bottom: 0em;
	box-shadow: inset 0 -2px 0 0 #ECE82F;
}
p a:hover {
    color: #1C2D39;	
	box-shadow: inset 0 -24px 0 0 #ECE82F;
	transition:box-shadow .1s;
}

::-moz-selection { /* Code for Firefox */
    background-color: #ECE82F;
    color: #1C2D39;
}
::selection {
    background-color: #CFEDD2;
    color: #1C2D39;
}
strong {
    font-weight: 400;
    color: #1C2D39;
}
.shadow-1 {
    box-shadow: 0px 0px 2px 2px rgba( 28, 45, 57, 0.1);
    border: 0px solid #EEEFF0;
}
.dark-gray {
    color: #1C2D39;
}
.light-gray {
    color: #A1A5A6;
}
.grad-text {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    background-image: linear-gradient(to right, #CFEDD2, #C0D827, #ECE82F);
}
.grad-text:hover {
    background-image: linear-gradient(to right, #A8DCAD, #B4D425, #DAD309);
}

.button {
	border-color: #ECE82F;
}

.button:hover {
	background-color: #ECE82F;
}
/*
 * Header styles
 */
header a {
	color: #5A6268;
	padding-bottom: .33em;
}
header .active {
	box-shadow: inset 0 -1.5px 0 0 #ECE82F;
}
header a:hover {
    color: #15222B;	
}
header .logo {
    margin: 0;
    position: relative;
    outline: none;
    display: block;
    width: 42px;
    height: 24px;
    background: url("../img/logo.svg") 0 0 no-repeat;
    background-size: 160px 48px;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
    z-index: 0;
}
header .logo:hover {
    background-position: 0 -24px;
}
/*
 * Headspace.js https://github.com/gdub22/headspace
 */
.headspace {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transition: transform 0.3s;
	height: 3rem;
	z-index:100;
}
.headspace--hidden {
	transform: translate3d(0, -6rem, 0); /* y value should be -1 * height */
}
.headspace--fixed {
	position: fixed;
	background-color: #ffffff;
	box-shadow: 0 18px 37px -7px rgba(39,60,77,.2);
	padding-bottom: 1rem;
}
@media screen and (min-width:30em) {
    header .logo {
        margin: 0;
        position: relative;
        outline: none;
        display: block;
        width: 52px;
        height: 30px;
        background: url("../img/logo.svg") 0 0 no-repeat;
        background-size: 199px 60px;
        color: transparent;
        overflow: hidden;
        cursor: pointer;
    }
    header .logo:hover {
        background-position: 0 -30px;
    }
    .headspace--hidden {
		transform: translate3d(0, -8rem, 0); /* y value should be -1 * height */
	}
	.headspace--fixed {
		position: fixed;
		background-color: #ffffff;
		box-shadow: 0px 10px 25px -5px rgba( 28, 45, 57, 0.15);
		padding-bottom: 2rem;
	}
}
/*
 * Project Thumbnail Hover Behavior
 */
.thumb {
    text-align: center;
    position: relative;
    float: left;
}

.thumb img {
	display: block;
    float: left;
}
.thumb h1 {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    color: #ffffff;
}
.thumb:hover div {
    opacity: 1;
}
.thumb > .knack {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgb(152,42,134,.25), rgb(152,42,134,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}

.thumb > .uni {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgba(255,102,0,.25), rgba(255,102,0,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
.thumb > .syn {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgba(0,150,255,.25), rgba(0,150,255,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
.thumb > .talu {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgba(61,162,195,.25), rgba(61,162,195,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
.thumb > .rh {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgba(158,72,155,.25), rgba(158,72,155,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
.thumb > .parchment {
    position: absolute;
    height: 100%; width: 100%;
    background-image: linear-gradient(180deg, rgba(240,203,36,.25), rgba(240,203,36,.95));
    opacity: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
}
/*
 * Uniquest
 */
#uni .hero {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f8ff+0,e3ecff+100 */
    background: url("../img/work/uniquest/uniquest-hero.svg") top left repeat, rgb(245, 248, 255);
    /* Old browsers */
    background: url("../img/work/uniquest/uniquest-hero.svg") top left repeat, -moz-linear-gradient(-45deg, rgba(245, 248, 255, 1) 0%, rgba(227, 236, 255, 1) 100%);
    /* FF3.6-15 */
    background: url("../img/work/uniquest/uniquest-hero.svg") top left repeat, -webkit-linear-gradient(-45deg, rgba(245, 248, 255, 1) 0%, rgba(227, 236, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: url("../img/work/uniquest/uniquest-hero.svg") top left repeat, linear-gradient(135deg, rgba(245, 248, 255, 1) 0%, rgba(227, 236, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f8ff', endColorstr='#e3ecff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
#uni h1, #uni h2 {
    color: #FF6600;
}
#uni .bg-text {
    background-image: linear-gradient(to bottom, #F2F6FF, #FFFFFF);
}
#uni .bg-grad {
    background-image: linear-gradient(to bottom, #6093F4, #3A75E5);
}

/*
 * Synlio
 */
#syn .hero {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f8ff+0,e3ecff+100 */
    background: url("../img/work/synlio/synlio-hero.png") top left repeat, rgba(234, 246, 255);
    /* Old browsers */
    background: url("../img/work/synlio/synlio-hero.png") top left repeat, -moz-linear-gradient(-135deg, rgba(246, 234, 255, 1) 0%, rgba(234, 246, 255, 1) 100%);
    /* FF3.6-15 */
    background: url("../img/work/synlio/synlio-hero.png") top left repeat, -webkit-linear-gradient(-135deg, rgba(246, 234, 255, 1) 0%, rgba(234, 246, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: url("../img/work/synlio/synlio-hero.png") top left repeat, linear-gradient(-135deg, rgba(246, 234, 255, 1) 0%, rgba(234, 246, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#F6EAFF', endColorstr='#E8F6FF', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
#syn h1, #syn h2 {
    color: #9B1AFF;
}
#syn .bg-text {
    background-image: linear-gradient(to bottom, #F8F8F9, #FFFFFF);
}
#syn .bg-grad {
    background-image: linear-gradient(to bottom, #1C2D39, #0E171D);
}
/*
 * Talu
 */
#talu .hero {
    background: url("../img/work/talu/knack-hero.svg") center no-repeat #FFFFFF;
    background-size: 100%;
}
#talu h1, #talu h2 {
    color: #52CD8F;
}
#talu .bg-text {
    background-image: linear-gradient(to bottom, #EEF5F7, #FFFFFF);
}
#talu .bg-grad {
    background-image: linear-gradient(to bottom, #2E7A92, #112E37);
}
/*
 * Ryan House
 */
#rh .hero {
    background: url("../img/work/ryanhouse/rh-hero.svg") center no-repeat #EEF2F5;
    background-size: 80%;
}
#rh h1, #rh h2 {
    color: #9E489B;
}
#rh .bg-text {
    background-image: linear-gradient(to bottom, #EEF2F5, #FFFFFF);
}
#rh .bg-grad {
    background-image: linear-gradient(to bottom, #1D3F74, #10143E);
}
/*
 * Parchment
 */
#parchment .hero {
    background: url("../img/work/parchment/parchment-hero.png") top left repeat #FFFFFF;
}
#parchment h1, #parchment h2 {
    color: #2CB2BB;
}
#parchment .bg-text {
    background-image: linear-gradient(to bottom, #EEF5F7, #FFFFFF);
}
#parchment .bg-grad {
    background-image: linear-gradient(to bottom, #F0CB24, #EA504E);
}
/*
 * Knack
 */
#kn header a {
    color: rgba(255, 255, 255, 0.75);
}

#kn header a:hover {
    color: rgba(255, 255, 255, 1.0);
}
#kn .hero {
    background: linear-gradient(90.66deg, #973F8C -76.89%, #3A0F33 100%);
}
#kn h1, #kn h2 {
    color: #9E489B;
}
#kn .bg-text {
    background-image: linear-gradient(to bottom, #EEF2F5, #FFFFFF);
}
#kn .bg-grad {
    background-image: linear-gradient(to bottom, #1D3F74, #10143E);
}
/*
 * Project nav
 */
.grad-line {
    background: url(../img/line-dark.png) top left repeat-x;
}
/*
 * Footer
 */
footer {
    background-image: linear-gradient(to bottom, #F6F7F8, #FFFFFF);
}