@font-face {
	font-family: Satisfy;
	src: url(../fonts/Satisfy-Regular.ttf);
 }
 
@font-face {
	font-family: Poppins;
	font-weight: normal;
	font-style: normal;
	src: url(../fonts/Poppins-Regular.ttf);
 }
 
@font-face {
	font-family: Poppins;
	font-weight: bold;
	font-style: normal;
	src: url(../fonts/Poppins-Bold.ttf);
 }
 
@font-face {
	font-family: PoppinsLight;
	src: url(../fonts/Poppins-Light.ttf);
 }
 
@font-face {
	font-family: PoppinsMedium;
	font-weight: normal;
	font-style: normal;
	src: url(../fonts/Poppins-Medium.ttf);
 }
 
@font-face {
	font-family: PoppinsSemiBold;
	font-weight: normal;
	src: url(../fonts/PoppinsSemiBold.ttf);
 }
 
@font-face {
	font-family: Icons;
	src: url(../fonts/ios7-style-font-icons.ttf);
 }
 
@keyframes animatedBackground {
	from { background-position: 0px 0px; }
 	to { background-position: center center; }
}
 
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
 
@-webkit-keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes anim {
  0% {
    transform: translateX(100%);
  }
  14.28% {
    transform: translateX(0);
  }
  85.71% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.fixed-bg-ios-workaround {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: -1;
	padding: 0;
	margin: 0;
  background: url(../img/bixby-bridge.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	animation: animatedBackground 2s ease;
}
 
body {background: none;}

header {
	position: fixed;
	background: #fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	display: block;
	width: 100%;
	height: 75px;
	z-index: 10;
	padding-top: 0.46875rem;
	padding-bottom: 0.46875rem;
	animation: headerAnimation 2s ease;
	z-index: 30;
}

	.overlay header svg {
		height: 25px;
		width: auto;
		margin-top: 1rem
	}
	
	header g {
		fill: #FF3D2E;
	}
	
	header svg:focus g {
		fill: #f11100;
	}
	
	header .show-for-small-only svg {
		margin-top: 0;
		height: 16px;
	}
	
	header .show-for-small-only g {
		fill: #ffffff;
	}
	
footer {
	position: fixed;
	bottom: 0;
	background: rgba(255,255,255,0.96);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	display: block;
	width: 100%;
	height: 60px;
	z-index: 10;
	box-shadow: 10px 10px 20px 10px #ccc;
}
 
h3 {
	font-family: PoppinsSemiBold;
	font-weight: normal;
	line-height: 1.2;
 }
 	
 	.overlay h3 {margin-top: 1.3rem;}

 	 	.overlay-content p:first-child {
 	 	 	 margin-top: 1.3rem;
 	 	}
 	
 	@media print, screen and (min-width: 40em) {
 	 	.overlay h3 {	
 	 		margin-top: 3rem;
 	 	}
 	 	.overlay-content p:first-child {
 	 	 	 margin-top: 3rem;
 	 	}
 	}
 
h4 {
	font-family: PoppinsSemiBold;
	font-size: 18px;
	font-weight: normal;
	padding: 2rem 0.9375rem 0 0;
 }
 
 .sidebar h4 {
 	padding-left: 0.9375rem;
 	padding-top: 0.9375rem;
 }
 
p, ul li {
	font-family: Poppins;
	font-size: 0.875rem;
	line-height: 1.39;
	color: #272f32;
	margin-bottom: 0.9375rem;
 }
 
 @media print, screen and (min-width: 40em) {
 	p, ul li {
 		font-size: 1rem;
 	}
 }

 @media print, screen and (min-width: 64em) {
 }
 
  
	.logo h1, .overlay .logo h1 {
		font-family: PoppinsSemiBold;
		font-size: 20px;
		text-align: center;
		color: #272f32;
		margin-bottom: 3px;
		letter-spacing: 1px;
	 }
 
		.logo h1 a {color: #272f32;}
 
	.logo h2, .overlay .logo h2 {
		font-family: Poppins;
		font-size: 14px;
		text-align: center;
		text-transform: uppercase;
		color: #272f32;
		line-height: 1.4;
    	margin-top: 0;
    	margin-bottom: 0;
    	padding-top: 0;
    	letter-spacing: 2px;
	 }
 
	.logo hr {
		margin: 3px auto;
		border-bottom: 1px solid #DAEAEF;
	 }
	 
	 .branding {
	 	width: 240px;
	 }
 
section {
	background: rgb(255,255,255);
	padding-bottom: 2rem;
	width: 100%;
	padding-top: 70px;
 }
 
 .overlay section {
 	padding-top: 0;
 }
 
 section:focus {
 	outline: none;
 }
 
	section.hero {
		background: none;
		height: 60vh;
		-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
		-moz-animation: fadein 3s; /* Firefox < 16 */
		-ms-animation: fadein 3s; /* Internet Explorer */
		-o-animation: fadein 3s; /* Opera < 12.1 */
		animation: fadein 3s;
	 }
	 
	 @media print, screen and (min-width: 40em) {
		section.hero { 
			height: 60vh;
		}
	}

	@media print, screen and (min-width: 64em) {
		section.hero { 
			height: 100vh;
		}
	}

	 
	 section#contact {
	 	background: url(../img/half-dome.jpg) no-repeat center center;
	 	-webkit-background-size: cover;
	 	-moz-background-size: cover;
	 	-o-background-size: cover;
	 	background-size: cover;
	 	height: auto;
	 	position: relative;
	 	margin-bottom: 60px;
	 }
 
	section#contact:after {
		content: '';
		background: rgba(255,255,255,0.7);
		position: absolute;
		z-index: 1;
		height: 100%;
		width: 100%;
		display: block;
		top: 0;
	 }
 
	section#contact > * {
		position: relative;
		z-index: 10;
	 }
 
.hero-block {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
 }
 
section h2, .overlay h2 {
	font-family: PoppinsLight;
	font-size: 24px;
	line-height: 28px;
	text-transform: uppercase;
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 0.4375rem;
 }
 
 	 @media print, screen and (min-width: 40em) {
 	 	section h2, .overlay h2 {
 	 		font-size: 30px;
 	 		line-height: 37px;
 	 		padding-top: 1.5rem;
 	 		padding-bottom: 0.7375rem;
 	 	} 	 
 	 }

 	 @media print, screen and (min-width: 64em) {
 	 	section h2, .overlay h2 {
 	 		font-size: 36px;
 	 		line-height: 44px;
 	 		padding-top: 2rem;
 	 		padding-bottom: 0.9375rem;
 	 	}
 	 }

 
.overlay h2 {padding-top: 1rem;}
 
.overlay > .grid-x {background: #fff;}

section.hero h2 {
	font-size: 18px;
	line-height: 24px;
 }
 
	section.hero h2 span {
		font-family: Poppins;
		font-weight: bold;
		font-size: 24px;
		line-height: 28px;
		display: block;
		clear: both;
	 }

@media print, screen and (min-width: 40em) {
section.hero h2 {
	font-size: 28px;
	line-height: 35px;
 }
 
	section.hero h2 span {
		font-size: 60px;
		line-height: 70px;
	 }
}

@media print, screen and (min-width: 64em) {
section.hero h2 {
	font-size: 48px;
	line-height: 55px;
 }
 
	section.hero h2 span {
		font-size: 100px;
		line-height: 130px;
	 } 

}
 
nav {float: right;}
 
	nav ul {margin: 0;}
 
	nav li {
		font-family: PoppinsLight;
		text-transform: uppercase;
		list-style: none;
		display: inline-block;
		height: 70px;
		line-height: 70px;
	 }
	 
	 @media print, screen and (min-width: 40em) {
	 	nav li {
	 		font-size: 16px;
			margin-left: 0.9375rem;
			margin-right: 0.9375rem;
	 	}
	 }

	 @media print, screen and (min-width: 64em) {
	 	nav li {
	 		font-size: 20px;
	 	}
	 }
 
.overlay nav li {
	height: 50px;
	line-height: 50px;
 }
 
nav li a {color: rgb(10,10,10);}
 
	nav li a:hover {color: #FF3D2E;}
 
nav li.active a {color: #FF3D2E;}

.menu .active > a {
	color: #FF3D2E;
	background: none;
}
 
nav li.active g {fill: #FF3D2E;}
 
nav li:last-of-type {margin-right: 0;}
 
.button {
	color: #fff;
	font-family: PoppinsSemiBold;
	text-transform: uppercase;
 }
 
.overlay header .button {
	margin-top: 0.5rem;
	margin-left: 0.9375rem;
}

@media print, screen and (min-width: 40em) {
	.overlay header .button {
		margin-top: 1rem;
	}
}

.overlay .button {margin-top: 1rem;}
 
.button.primary {color: #fff;}
 
	.button.primary:hover, .button.primary:focus {color: #fff;}
 
.hero .button {
	clear: both;
	width: auto;
	margin-top: 0.9375rem;
 }
 
.icon-font {
	font-family: Icons;
	font-weight: normal;
 }
  
#work figure {
	position: relative;
	margin: 0 0 1.875rem 0;
	max-height: 250px;
	overflow: hidden; }
	
	@media print, screen and (min-width: 64em) {
		#work figure {
			max-height: none;
			overflow: auto;
		}
	}
 
#work figcaption a {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
	background: rgba(218,234,239,0.8);
 }
 
 @media print, screen and (min-width: 40em) {
 	#work .grid-padding-x > .cell:nth-of-type(even) {
 		;
 	}
 }
 
@media print, screen and (min-width: 64em) {
	#work figcaption a {
		opacity: 0;
		background: rgba(218,234,239,0.96); 
	}
 
	#work figcaption a:hover {
		opacity: 1;
		transition: opacity .3s ease-out;
		-moz-transition: opacity .3s ease-out;
		-webkit-transition: opacity .3s ease-out;
		-o-transition: opacity .3s ease-out;
		margin: 0;
	 }	
}
 
.figcaption-copy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
 }
 
	.figcaption-copy h3 {
		font-family: PoppinsSemiBold;
		font-weight: normal;
		font-size: 20px;
		line-height: 24px;
		text-transform: uppercase;
		color: #272f32;
		margin-bottom: 0;
	 }
 
figcaption-copy p {
	font-family: Poppins;
	font-size: 1em;
	font-weight: normal;
	text-align: center;
	color: #272f32;
 }
 
a.grid-images {color: #272f32;}
 
.centered {
	text-align: center;
	padding-top: 0.9375rem; 
}
 

.portfolio-piece {
	height: 100%;
	width: 100%;
	z-index: 20;
	position: absolute;
	top: 70px;
	right: 0;
	bottom: 0;
	left: 0;
	background: white;
	display: none;
 }
 
.portfolio-subheader {
	width: 100%;
	height: 70px;
	background: #fff;
 }
 
/* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
    top: 150px;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }
 @media print, screen and (min-width: 40em) {
 	.parallax__layer--base {
 		top: 250px;
 	}
 }
 
 @media print, screen and (min-width: 64em) {
 	.parallax__layer--base {
 		top: 400px;
 	}
 }
 
	.parallax__layer--base > .grid-x {background: #fff;}
 
.parallax__layer--back {
	-webkit-transform: translateZ(-300px) scale(2);
	transform: translateZ(-300px) scale(2);
	z-index: 3;
 }
 
 .parallax__layer--back img {
 	width: 100%;
 	height: auto;
 }
 
.parallax__layer--deep {
	-webkit-transform: translateZ(-600px) scale(3);
	transform: translateZ(-600px) scale(3);
	z-index: 2;
 }
 
.sidebar {
	margin-top: 0.9375rem;
	background: rgba(218,234,239,0.3);
	border-radius: 3px;
	padding-bottom: 0.9375rem;
 }
 
 @media print, screen and (min-width: 40em) {
 	.sidebar {
 		margin-top: 3rem;
 	}
 }
 
	.sidebar p {
		padding: 0 0.9375rem 0 0.9375rem;
		margin-top: 0;
	 }
 
	.sidebar .sidebar-link p, .sidebar .sidebar-link svg {
		display: inline-block;
		height: 1rem;
		line-height: 1rem;
		margin-bottom: 0.9375rem;
		padding: 0.9375rem;
	}
 
	.sidebar .sidebar-link svg {
		float: right;
		margin: 0 0.9375rem;
	 }
 
	.sidebar .sidebar-link g {fill: #ff3d2e;}
	
	 @media print, screen and (min-width: 40em) {
 	.sidebar .sidebar-link p {
 		max-width: calc(100% - 30px);
 	}
 	.sidebar .sidebar-link svg {
 		padding-left: 0;
		margin: 0 0.9375rem 0 0;
 	}
 	.sidebar-link a {
 		display: block;
 		width: 100%;
 		height: 100%;
 		padding-bottom: 0.9375rem;
 	}
 }

 
/* style the groups
  --------------------------------------------- */
#group1 {z-index: 5; /* slide over group 2 */}
 
	#group1 .parallax__layer--base {background: #fff;}
 
#group2 {z-index: 3; /* slide under groups 1 and 3 */}
 
	#group2 .parallax__layer--back {background: #DAEAEF;}
 
#group3 {z-index: 4; /* slide over group 2 and 4 */}
 
	#group3 .parallax__layer--base {background: #fff;}
 
#group4 {z-index: 2; /* slide under group 3 and 5 */}
 
	#group4 .parallax__layer--deep {background: #fff;}
 
#group5 {z-index: 3; /* slide over group 4 and 6 */}
 
	#group5 .parallax__layer--base {background: #fff;}
 
#group6 {z-index: 2; /* slide under group 5 and 7 */}
 
	#group6 .parallax__layer--back {background: #fff;}
 
#group7 {z-index: 3; /* slide over group 7 */}
 
	#group7 .parallax__layer--base {background: #fff;}
 
.one-page > .grid-container {
	background: rgba(255,255,255,0.7);
}

.overlay > .grid-container {
	background: rgba(255,255,255,0.9);
}
 
.grid-container-inner {
	max-width: 80rem;
	margin: 0 auto;
 }
 
footer svg {margin: 10px 10px 10px 0;}
 
g#Footer {fill: #9DBDC6;}
 
	g#Footer:hover {fill: #FF3D2E;}
 
.sidebar-link {
	background: #daeaef;
	margin-bottom: 0.9375rem;
 }
 
footer figure {
	max-height: 100%;
	padding: 10px 10px 10px 0;
	height: 60px;
	width: auto;
	display: inline-block;
 }
 
	footer figure img {
		max-height: 100%;
    	position: relative;
    	opacity: 1;
    	border: 1px solid #9dbdc6;
	 }
 
		footer figure img.active {opacity: 1;}
		
		footer .centered {
			padding-top: 0;
		}
 
.modal-detail {
	background: #DAEAEF;
	position: fixed;
	top: 70px;
	width: 100%;
	overflow: hidden;
	bottom: 50px;
	z-index: 5;
 }
 
	.modal-detail h4 {padding-left: 0;}
 
	.modal-detail svg {margin: 0.9375rem 0.46875rem;}
 
.row > .column {padding: 0 8px;}
 
.row:after {
	content: "";
	display: table;
	clear: both;
 }
 
.column {
	float: left;
	width: 25%;
 }
 
/* The Modal (background) */
.modal {
	display: none;
	z-index: 1;
 }
 
/* Modal Content */
.modal-content {
	position: relative;
	margin: auto;
	padding: 0;
 }
 
/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
	z-index: 10;
 }
 
	.close:hover,
.close:focus {
		color: #999;
		text-decoration: none;
		cursor: pointer;
	 }
 
.mySlides {display: none;}
 
/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
 }
 
/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
 }
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8);}
 
img.demo {opacity: 0.6;}
 
.active,
.demo:hover {opacity: 1;}
 
img.hover-shadow {transition: 0.3s}
 
.hover-shadow:hover {opacity: 0.65;}
 
.numbertext {margin-top: 5rem;}
 
.slide-left {animation: anim 3.5s 1;}
 
.slide-right {animation: animRight 3.5s 1;}
 
 
/* Mobile Menu  */

.mobile-nav.show-for-small-only {
	float: right;
	display: inline-block;
	width: auto;
}

.menu-btn {
}
.menu-btn div {
	position: absolute;
	left: 100%;
	top: 64%;
	padding-right: 8px;
	margin-top: -0.50em;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
}
 
.menu-btn span {
	display: block;
    width: 28px;
    height: 4px;
    margin: 5px 0;
    background: #ff3d2e;
    z-index: 99;
}
 
.responsive-menu{
	display: none;
}

 
.expand {
	display: block !important;
    position: absolute;
    top: 40px;
    padding: 10px 0.9375rem 0.9375rem 0.9375rem;
    background: rgba(255,255,255,0.96);
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
}

.expand li {
	list-style: none;
	font-family: PoppinsLight;
	text-transform: uppercase;
	font-size: 26px;
	clear: both;
	width: 100%;
	text-align: center;
}

.expand li a {
	color: inherit;
}

.expanded-about {
	margin-top: 2rem;
}

.portfolio2, .portfolio3 {
	display: none;
}

#showportfolio3 {
	display: none;
}

.grid-container.scrolling-content {
    position: absolute;
    top: 75px;
    bottom: 60px;
    left: 0;
    right: 0;
    max-height: calc(100% - 50px);
}

.align-right {
	text-align: right;
}

.parallax-inline {
    /* The image used */
    background-image: url("img/parallax/reader-stat-wireframes.jpg") no-repeat bottom center;
    width: 100%;

    /* Full height */
    height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-size: cover;
}

.inline-parallax {
	height: 120px;
	width: 100%;
	overflow: hidden;
	margin-top: 3rem;
	position: relative;
}

 @media print, screen and (min-width: 40em) {
	.inline-parallax {
		height: 180px;
	}
}

 @media print, screen and (min-width: 64em) {
	.inline-parallax {
		height: 280px;
	}
}

.inline-parallax::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	left:0;
	background: rgba(218,234,239,0.6);
}

.portfolio-content p:last-of-type {
	margin-bottom: 100px;
}

.clear-60 {
	display: block;
	clear: both;
	margin-top: 60px;
	width: 100%;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

blockquote, blockquote p {
	color: #272f32;
}