@charset "UTF-8";
/*-----------------------------------------------------------------------------------
	GENERAL VARIABLES
-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------
	MIXINS
-----------------------------------------------------------------------------------*/
/*
@mixin hero-title {
	
}

@mixin hero-sub-title {
	
}
*/
/*-----------------------------------------------------------------------------------*/
/*	FONTS
/*-----------------------------------------------------------------------------------*/
@font-face { font-family: "willclark"; src: url("/fonts/willclark.eot"); src: url("/fonts/willclark.eot?#iefix") format("embedded-opentype"), url("/fonts/willclark.woff") format("woff"), url("/fonts/willclark.ttf") format("truetype"), url("/fonts/willclark.svg#willclark") format("svg"); font-weight: normal; font-style: normal; }

[data-icon]:before { font-family: "willclark" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "willclark" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-down:before { content: "\67"; }

.icon-left:before { content: "\68"; }

.icon-right:before { content: "\69"; }

.icon-up:before { content: "\6a"; }

.icon-pinterest:before { content: "\63"; }

.icon-twitter:before { content: "\65"; }

.icon-linkedin:before { content: "\6b"; }

.icon-facebook:before { content: "\61"; }

.icon-play:before { content: "\6c"; }

.icon-mail:before { content: "\71"; }

.icon-at:before { content: "\72"; }

.icon-ios-email-outline:before { content: "\73"; }

.icon-ios-play-outline:before { content: "\74"; }

.icon-ios-telephone-outline:before { content: "\75"; }

.icon-ios-telephone:before { content: "\76"; }

.icon-ios-email:before { content: "\77"; }

.icon-torso:before { content: "\41"; }

.icon-call-phone:before { content: "\42"; }

.icon-right-circled:before { content: "\44"; }

.icon-upload:before { content: "\45"; }

.icon-person:before { content: "\66"; }

.icon-person-circled:before { content: "\6d"; }

/*-----------------------------------------------------------------------------------*/
/*	BASE
/*-----------------------------------------------------------------------------------*/
* { outline: 0 none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

*:focus { outline: none; }

html { width: 100%; height: 100%; overflow-x: hidden; background: white; }

body { width: 100%; min-height: 100%; margin: 0; padding: 0; color: #333; font-size: 15px; font-weight: 400; overflow-x: hidden; }

p { font-family: "kepler-std", Georgia, serif; font-weight: 300; font-size: 14px; line-height: 1.8em; margin: 0 0 20px; }
@media (min-width: 480px) { p { font-size: 15px; } }
@media (min-width: 768px) { p { font-size: 16px; margin: 0 0 25px; } }
@media (min-width: 1200px) { p { margin: 0 0 30px; } }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; margin: 20px auto; padding: 0; color: #282828; }
@media (min-width: 768px) { h1, h2, h3, h4 { margin: 0 0 25px; } }
@media (min-width: 1200px) { h1, h2, h3, h4 { margin: 0 0 30px; } }

h1 { font-size: 32px; font-weight: 700; line-height: 1em; letter-spacing: 0; }
h1.serif { font-weight: 400; letter-spacing: 0; word-spacing: 0; }
@media (min-width: 480px) { h1 { font-size: 40px; } }
@media (min-width: 640px) { h1 { font-size: 48px; } }
@media (min-width: 768px) { h1 { font-size: 56px; } }
@media (min-width: 992px) { h1 { font-size: 70px; } }
@media (min-width: 1200px) { h1 { font-size: 90px; } }
@media (min-width: 1600px) { h1 { font-size: 110px; } }

h2 { font-size: 14px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; }
@media (min-width: 1200px) { h2 { font-size: 18px; } }

h3 { font-size: 12px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; }
@media (min-width: 992px) { h3 { font-size: 13px; } }
@media (min-width: 1200px) { h3 { font-size: 14px; } }

h4 { font-size: 10px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; }
@media (min-width: 992px) { h4 { font-size: 11px; } }
@media (min-width: 1200px) { h4 { font-size: 12px; } }

ul, ol { list-style: none; margin: 0 0 20px; padding: 0; list-style: none; }
@media (min-width: 768px) { ul, ol { fmargin: 0 0 25px; } }
@media (min-width: 1200px) { ul, ol { margin: 0 0 30px; } }

li { font-family: "kepler-std", Georgia, serif; font-weight: 300; font-size: 14px; line-height: 1.8em; margin: 0; padding: 0; }
@media (min-width: 480px) { li { font-size: 15px; } }
@media (min-width: 768px) { li { font-size: 16px; } }

hr { margin: 20px auto; border-top: 1px solid #202020; }
hr.sm { width: 20px; }
hr.md { width: 20px; }
@media (min-width: 768px) { hr { margin: 25px auto; } }
@media (min-width: 1200px) { hr { margin: 30px auto; } }

a { color: #b0b0b0; color: #bc8420; text-decoration: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
a:hover, a:active { color: #333; text-decoration: none; }
a:focus { color: #bc8420; text-decoration: none; }

.container, .container-fluid { padding-left: 30px; padding-right: 30px; }

.row { margin-left: -30px; margin-right: -30px; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 30px; padding-right: 30px; }

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg { text-align: left; }

.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg { text-align: center; }

.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg { text-align: right; }

.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg { text-align: justify; }

@media (max-width: 767px) { .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { text-align: inherit; }
  .text-left-xs { text-align: left; }
  .text-center-xs { text-align: center; }
  .text-right-xs { text-align: right; }
  .text-justify-xs { text-align: justify; } }
@media (min-width: 768px) and (max-width: 991px) { .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { text-align: inherit; }
  .text-left-sm { text-align: left; }
  .text-center-sm { text-align: center; }
  .text-right-sm { text-align: right; }
  .text-justify-sm { text-align: justify; } }
@media (min-width: 992px) and (max-width: 1199px) { .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { text-align: inherit; }
  .text-left-md { text-align: left; }
  .text-center-md { text-align: center; }
  .text-right-md { text-align: right; }
  .text-justify-md { text-align: justify; } }
@media (min-width: 1200px) { .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { text-align: inherit; }
  .text-left-lg { text-align: left; }
  .text-center-lg { text-align: center; }
  .text-right-lg { text-align: right; }
  .text-justify-lg { text-align: justify; } }
/*-----------------------------------------------------------------------------------
	HELPER CLASSES
-----------------------------------------------------------------------------------*/
.block { position: relative; width: 100%; }
.block:before, .block:after { content: ""; display: table; }
.block:after { clear: both; }

.pad-10 { padding-top: 10vh; padding-bottom: 10vh; }

.pad-top-10 { padding-top: 10vh; }

.pad-bottom-10 { padding-bottom: 10vh; }

.pad-15 { padding-top: 15vh; padding-bottom: 15vh; }

.pad-top-15 { padding-top: 15vh; }

.pad-bottom-15 { padding-bottom: 15vh; }

.pad-20 { padding-top: 20vh; padding-bottom: 20vh; }

.pad-top-20 { padding-top: 20vh; }

.pad-bottom-20 { padding-bottom: 20vh; }

.button { display: inline-block; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; padding: 12px 24px; background: #282828; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-transition: all 0.55s ease-in-out; -moz-transition: all 0.55s ease-in-out; -o-transition: all 0.55s ease-in-out; transition: all 0.55s ease-in-out; }
.button:hover, .button:active, .button:focus { color: #fff; background: #bc8420; }

img { max-width: 100%; }

section { position: relative; }

.cover-image { display: block; width: 100%; height: 100%; background: no-repeat center; background-size: cover; }

/*
figure { // class needed... conflicted with new home page grid code
	text-align: center;
	
	img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: auto;
		//vertical-align: bottom; // hack... don't like it!!!
	}
}
*/
figure { text-align: center; }

.img-full { display: block; width: 100%; height: auto; }

.browser-image { border: 1px solid #f0f0f0; }

.dark { color: #d0d0d0; }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p { color: #d0d0d0; }
.dark a { color: #8a8a8a; }
.dark a:hover, .dark a:active { color: #fff; }

.serif { font-family: 'kepler-std', Georgia, serif; font-family: "kepler-std", Georgia, serif; text-transform: none; letter-spacing: 0; }

/*-----------------------------------------------------------------------------------
	PULSE ANIMATION
-----------------------------------------------------------------------------------*/
.pulse-box { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; }

.pulse-css { width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: rgba(40, 40, 40, 0); position: relative; transform: scale(0.25); }
.pulse-css:before, .pulse-css:after { content: ''; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: #808080; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transform: scale(0.5); transform-origin: center center; }

@keyframes pulse { 0% { transform: scale(0.5); opacity: 0; }
  50% { opacity: 0.1; }
  70% { opacity: 0.09; }
  100% { transform: scale(5); opacity: 0; } }

/*-----------------------------------------------------------------------------------
	DEFAULT OVERLAY
-----------------------------------------------------------------------------------*/
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #181818; visibility: hidden; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.overlay.hide { visibility: hidden; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.overlay.show-me { visibility: visible; /* May not really need anymore? */ filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
.overlay.fade-in-out { -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
.overlay .message-box { position: absolute; display: table; width: 100%; height: 100%; text-align: center; }
.overlay .message-box .message { display: table-cell; vertical-align: middle; color: #fff; padding: 160px 160px 0; }
.overlay.pulse-me .pulse-box { width: 160px; height: 160px; margin-left: -80px; margin-top: -80px; }
.overlay.pulse-me .pulse-css { transform: scale(0.5); background: #cccccc; -webkit-transition: background 1s ease-out, -webkit-transform 2s ease-out; -moz-transition: background 1s ease-out, -moz-transform 2s ease-out; -o-transition: background 1s ease-out, -o-transform 2s ease-out; transition: background 1s ease-out, transform 2s ease-out; }
.overlay.pulse-me .pulse-css:before, .overlay.pulse-me .pulse-css:after { background: #b8b8b8; animation: pulse 2s linear infinite; }
.overlay.pulse-me .pulse-css:after { animation-delay: 0.5s; }

/*-----------------------------------------------------------------------------------
	LOADERS
-----------------------------------------------------------------------------------*/
#loader { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: white; overflow: hidden; z-index: 9000; -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.app-loading #loader .pulse-css { transform: scale(0.5); background: #333333; -webkit-transition: background 1s ease-out, -webkit-transform 2s ease-out; -moz-transition: background 1s ease-out, -moz-transform 2s ease-out; -o-transition: background 1s ease-out, -o-transform 2s ease-out; transition: background 1s ease-out, transform 2s ease-out; }
.app-loading #loader .pulse-css:before, .app-loading #loader .pulse-css:after { animation: pulse 2s linear infinite; }
.app-loading #loader .pulse-css:after { animation-delay: 0.5s; }

/*-----------------------------------------------------------------------------------
	HEADER
-----------------------------------------------------------------------------------*/
#header { position: fixed; width: 100%; padding: 5px; pointer-events: none; will-change: all; -webkit-transform: translate3d(0, -150px, 0); -moz-transform: translate3d(0, -150px, 0); -ms-transform: translate3d(0, -150px, 0); -o-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 8000; }
#header #header-content { position: relative; width: 100%; height: 50px; text-align: center; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#header #logomark { position: absolute; display: block; top: 0; left: 0; width: 50px; height: 50px; padding: 12px; pointer-events: auto; }
#header #logomark svg { width: 100%; height: 100%; }
#header #logomark svg .arc { fill: #fff; -webkit-transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; }
#header #logomark svg .arc-1 { /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
#header #logomark svg .arc-2 { /* May not really need anymore? */ filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }
#header #wordmark { position: relative; display: inline-block; top: 0; height: 50px; font-size: 12px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; line-height: 50px; pointer-events: auto; }
@media (min-width: 992px) { #header #wordmark { font-size: 13px; } }
@media (min-width: 1200px) { #header #wordmark { font-size: 14px; } }
#header .nav-btn { position: relative; display: inline-block; width: 50px; height: 50px; cursor: pointer; pointer-events: auto; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#header #menu-btn { position: absolute; top: 0; right: 0; }
#header #menu-btn span { position: absolute; display: block; height: 2px; width: 40%; left: 30%; top: 50%; background: #fff; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.25s ease-in-out; -moz-transition: -moz-transform 0.25s ease-in-out; -o-transition: -o-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; -webkit-backface-visibility: visible; }
#header #menu-btn span:nth-child(1) { margin-top: -8px; }
#header #menu-btn span:nth-child(2), #header #menu-btn span:nth-child(3) { margin-top: -1px; }
#header #menu-btn span:nth-child(4) { margin-top: 6px; }
.menu-open #header #menu-btn span:nth-child(1), .menu-open #header #menu-btn span:nth-child(4) { margin-top: -1px; width: 0%; left: 50%; }
.menu-open #header #menu-btn span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.menu-open #header #menu-btn span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#header #work-nav { position: absolute; display: none; top: 0; left: 0; }
#header #work-nav #work-btn { padding: 14px 13px; }
#header #work-nav #work-btn span { display: block; position: relative; float: left; width: 4px; height: 3px; margin: 2px; background: #fff; }
#header #work-nav #work-btn span:nth-child(3n+1) { clear: both; }
#header #work-nav #prev-btn span, #header #work-nav #next-btn span { position: absolute; display: block; top: 5px; left: 5px; width: 40px; height: 40px; -webkit-transition: -webkit-transform 0.25s ease-in-out; -moz-transition: -moz-transform 0.25s ease-in-out; -o-transition: -o-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; }
#header #work-nav #prev-btn span:before, #header #work-nav #prev-btn span:after, #header #work-nav #next-btn span:before, #header #work-nav #next-btn span:after { position: absolute; top: 50%; left: 40%; width: 2px; height: 30%; background: #fff; content: ''; outline: 1px solid transparent; backface-visibility: hidden; }
#header #work-nav #prev-btn span:before, #header #work-nav #next-btn span:before { -webkit-transform: translateX(-50%) rotate(-135deg); -moz-transform: translateX(-50%) rotate(-135deg); -ms-transform: translateX(-50%) rotate(-135deg); -o-transform: translateX(-50%) rotate(-135deg); transform: translateX(-50%) rotate(-135deg); transform-origin: 50% 0%; }
#header #work-nav #prev-btn span:after, #header #work-nav #next-btn span:after { -webkit-transform: translateX(-50%) rotate(-45deg); -moz-transform: translateX(-50%) rotate(-45deg); -ms-transform: translateX(-50%) rotate(-45deg); -o-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); transform-origin: 0 0; }
#header #work-nav #next-btn { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
@media (min-width: 480px) { #header { padding: 10px; }
  #header #menu-btn span { width: 44%; left: 28%; } }
@media (min-width: 768px) { #header { padding: 20px; }
  .single-work #header #work-nav { display: inline-block; }
  #header #work-nav { left: auto; right: 50px; } }
@media (min-width: 992px) and (min-height: 540px) { #header { padding: 30px; }
  #header #work-nav { left: auto; right: 50px; } }
@media (min-width: 1200px) and (min-height: 640px) { #header { padding: 40px; }
  #header #work-nav { left: auto; right: 50px; } }
#header.loaded { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#header.scrolling { padding: 5px; background: #fbfbfb; }
.menu-open #header.scrolling { background: white; }
.menu-open #header, #header.scrolling { /*
#back-btn span:before,
#back-btn span:after,
#menu-btn span {
	background: #333;
}*/ }
.menu-open #header #wordmark, #header.scrolling #wordmark { color: #282828; }
.menu-open #header #logomark svg .arc, #header.scrolling #logomark svg .arc { fill: #333; }
.menu-open #header #logomark svg .arc.arc-2, #header.scrolling #logomark svg .arc.arc-2 { /* May not really need anymore? */ filter: alpha(opacity=20); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; }
.menu-open #header #work-nav #work-btn span, .menu-open #header #work-nav #prev-btn span:before, .menu-open #header #work-nav #prev-btn span:after, .menu-open #header #work-nav #next-btn span:before, .menu-open #header #work-nav #next-btn span:after, #header.scrolling #work-nav #work-btn span, #header.scrolling #work-nav #prev-btn span:before, #header.scrolling #work-nav #prev-btn span:after, #header.scrolling #work-nav #next-btn span:before, #header.scrolling #work-nav #next-btn span:after { background: #333; }
.menu-open #header #menu-btn span, #header.scrolling #menu-btn span { background: #333; }

/*-----------------------------------------------------------------------------------
	MAIN MENU
-----------------------------------------------------------------------------------*/
#main-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: white; visibility: hidden; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; z-index: 7000; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
#main-menu .menu-wrap { display: table; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#main-menu .menu-content { display: table-cell; vertical-align: middle; text-align: center; }
#main-menu .menu-list { display: block; list-style: none; margin: 0; padding: 0; }
#main-menu .menu-list li { position: relative; list-style-position: inside; margin: 5px 0; padding: 0; font-family: 'kepler-std', Georgia, serif; font-size: 28px; font-size: 7vh; font-weight: 500; line-height: 1.2em; letter-spacing: -0.02em; text-transform: lowercase; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; will-change: transform, opacity; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
#main-menu a:link, #main-menu a:visited { color: #333; }
#main-menu a:hover, #main-menu a:active { color: #ddd; }
.menu-open #main-menu { visibility: visible; /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
@media (min-height: 480px) { #main-menu .menu-list li { font-size: 32px; font-size: 7vh; } }
@media (min-height: 768px) { #main-menu .menu-list li { font-size: 48px; font-size: 7vh; } }
@media (min-height: 992px) { #main-menu .menu-list li { font-size: 56px; font-size: 7vh; } }

label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; }

input, textarea { width: 100%; height: 50px; background: #eee; font-weight: 500; line-height: 1.3em; margin: 0 0 20px 0; padding: 15px 55px 15px 25px; border: none; border-radius: 25px; resize: none; -webkit-transition: background 1s ease; -moz-transition: background 1s ease; -o-transition: background 1s ease; transition: background 1s ease; }

::-webkit-input-placeholder { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 1; }

::-moz-placeholder { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 1; }

:-ms-input-placeholder { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 1; }

:-moz-placeholder { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 1; }

.form-field-wrap { position: relative; }

.form-icon { position: absolute; top: 0; right: 5px; width: 50px; height: 50px; text-align: center; margin: 0; padding: 0; background: transparent; border: 0 none; }
.form-icon:before { font-size: 22px; line-height: 50px; }

button.form-icon { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

#section-contact-form { background: #c2c2c2; text-align: center; }
#section-contact-form label { display: none !important; }
#section-contact-form input, #section-contact-form textarea { background: #a0a0a0; color: #fff; }
#section-contact-form input.error, #section-contact-form textarea.error { border: 1px solid #fff; }
#section-contact-form input:focus, #section-contact-form textarea:focus { background: #8a8a8a; }
#section-contact-form textarea { margin-bottom: 0; overflow: hidden; }
#section-contact-form ::-webkit-input-placeholder { color: #ccc; }
#section-contact-form ::-moz-placeholder { color: #ccc; }
#section-contact-form :-ms-input-placeholder { color: #ccc; }
#section-contact-form :-moz-placeholder { color: #ccc; }
#section-contact-form .form-icon { color: #ccc; }
#section-contact-form button.form-icon:hover { color: #fff; }
#section-contact-form h2, #section-contact-form p { color: #fff; }

#section-contact-info { text-align: center; }
#section-contact-info .heading-phone { margin-top: 60px; }
#section-contact-info p { font-size: 18px; }
#section-contact-info a { pointer-events: auto; }

body.page-contact #section-contact-info { text-align: center; }
body.page-contact #section-contact-form { text-align: center; }
body.page-contact #section-contact-form .contact-form-wrap { max-width: 480px; }
body.page-contact #section-contact-form .message { font-size: 10px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; }
@media (min-width: 992px) { body.page-contact #section-contact-form .message { font-size: 11px; } }
@media (min-width: 1200px) { body.page-contact #section-contact-form .message { font-size: 12px; } }
body.page-contact #section-contact-form .overlay.fade-in-out.show { /* May not really need anymore? */ filter: alpha(opacity=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
@media (min-width: 768px) { body.page-contact #contact-block { display: table; }
  body.page-contact #contact-block #contact-block-wrap { display: table-row; }
  body.page-contact #contact-block section { width: 50%; vertical-align: middle; display: table-cell; float: none; } }

ul.social { margin: 70px 0 0 0; }
ul.social li { display: inline-block; margin: 8px; }
ul.social li a { position: relative; display: block; font-size: 13px; text-align: center; color: #fff; border: 1px solid #505050; width: 44px; height: 44px; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; -webkit-transition: all 0.4s ease-in-out, color 0.4s ease-out; -moz-transition: all 0.4s ease-in-out, color 0.4s ease-out; -o-transition: all 0.4s ease-in-out, color 0.4s ease-out; transition: all 0.4s ease-in-out, color 0.4s ease-out; z-index: 1; }
ul.social li a:before { font-size: 13px; line-height: 44px; }
ul.social li a:after { content: ''; display: block; position: absolute; top: 0; left: 0; background: #fff; width: 42px; height: 42px; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; pointer-events: none; }
ul.social li a:hover { color: #000; border: 1px solid #fff; background: #fff; -webkit-transition: all 1s ease-in-out, color 0.2s ease-in; -moz-transition: all 1s ease-in-out, color 0.2s ease-in; -o-transition: all 1s ease-in-out, color 0.2s ease-in; transition: all 1s ease-in-out, color 0.2s ease-in; }
ul.social li a:hover:after { /* May not really need anymore? */ filter: alpha(opacity=10); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -moz-opacity: 0.1; -khtml-opacity: 0.1; opacity: 0.1; -webkit-transform: scale(8); -moz-transform: scale(8); -ms-transform: scale(8); -o-transform: scale(8); transform: scale(8); -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; }

/*-----------------------------------------------------------------------------------
	PAGE LAYOUT
-----------------------------------------------------------------------------------*/
#background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; /*width: auto;
height: auto;*/ width: 100%; height: 100vh; background: #101010; overflow: hidden; z-index: 10; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
#background .cover-image { will-change: transform, opacity; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#background .overlay { will-change: opacity; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#background.fixed { position: fixed; }

#content { position: relative; width: 100%; z-index: 50; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); zoom: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; background: transparent; }

/*
.ie-min-height-bug-fix {
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	
}
*/
/*
.button-pulse {
	display: block;
	text-align: center;
	@include circle(44px);
	border: 1px solid #fff;
	cursor: pointer;
	
}
*/
#hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; }
#hero #hero-buttons-wrap { position: absolute; display: none; left: 0; bottom: 20px; width: 100%; text-align: center; z-index: 40; }
.app-loading #hero #hero-buttons-wrap { /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
#hero #hero-buttons-wrap .button-down { position: relative; display: inline-block; color: #fff; cursor: pointer; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.3); -webkit-transition: all 0.4s ease-in-out, color 0.4s ease-out; -moz-transition: all 0.4s ease-in-out, color 0.4s ease-out; -o-transition: all 0.4s ease-in-out, color 0.4s ease-out; transition: all 0.4s ease-in-out, color 0.4s ease-out; z-index: 1; }
#hero #hero-buttons-wrap .button-down:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; background-clip: padding-box; /* stops bg color from leaking outside the border: */ /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; pointer-events: none; }
#hero #hero-buttons-wrap .button-down span { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid transparent; transform: rotate(-90deg); -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }
#hero #hero-buttons-wrap .button-down span:before, #hero #hero-buttons-wrap .button-down span:after { position: absolute; left: 38%; width: 2px; height: 30%; background: #fff; content: ''; outline: 1px solid transparent; backface-visibility: hidden; }
#hero #hero-buttons-wrap .button-down span:before { top: 50%; -webkit-transform: translateX(-50%) rotate(-135deg); -moz-transform: translateX(-50%) rotate(-135deg); -ms-transform: translateX(-50%) rotate(-135deg); -o-transform: translateX(-50%) rotate(-135deg); transform: translateX(-50%) rotate(-135deg); transform-origin: 50% 0; }
#hero #hero-buttons-wrap .button-down span:after { top: 50%; -webkit-transform: translateX(-50%) rotate(-45deg); -moz-transform: translateX(-50%) rotate(-45deg); -ms-transform: translateX(-50%) rotate(-45deg); -o-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); transform-origin: 0 0; }
#hero #hero-buttons-wrap .button-down:hover { color: #000; border: 1px solid white; background: #fff; -webkit-transition: all 1s ease-in-out, color 0.2s ease-in; -moz-transition: all 1s ease-in-out, color 0.2s ease-in; -o-transition: all 1s ease-in-out, color 0.2s ease-in; transition: all 1s ease-in-out, color 0.2s ease-in; }
#hero #hero-buttons-wrap .button-down:hover:after { /* May not really need anymore? */ filter: alpha(opacity=10); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -moz-opacity: 0.1; -khtml-opacity: 0.1; opacity: 0.1; -webkit-transform: scale(6); -moz-transform: scale(6); -ms-transform: scale(6); -o-transform: scale(6); transform: scale(6); -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; }
#hero #hero-buttons-wrap .button-down:hover span:before, #hero #hero-buttons-wrap .button-down:hover span:after { background: #404040; }
@media (min-height: 480px) { #hero #hero-buttons-wrap { display: block; } }
@media (min-width: 768px) { #hero #hero-buttons-wrap { bottom: 30px; } }
@media (min-width: 992px) and (min-height: 540px) { #hero #hero-buttons-wrap { bottom: 40px; } }
@media (min-width: 1200px) and (min-height: 640px) { #hero #hero-buttons-wrap { bottom: 50px; }
  #hero #hero-buttons-wrap .button-down { width: 60px; height: 60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } }
#hero #hero-background-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 10; }
#hero #hero-overlay-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 20; }
#hero #hero-background { position: relative; width: 100%; height: 100%; will-change: transform; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
#hero #hero-background img { position: absolute; max-width: none; will-change: transform; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1); transition: all 2s cubic-bezier(0.23, 1, 0.32, 1); }
#hero #hero-overlay { width: 100%; height: 100%; background-color: #000; background-color: #181818; /* May not really need anymore? */ filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; will-change: opacity; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hero #hero-content-wrap { position: relative; width: 100%; min-height: 100vh; background: transparent; overflow: hidden; text-align: center; z-index: 30; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
#hero #hero-content-wrap .hero-content { position: relative; padding: 100px 0; height: 100vh; display: table; }
#hero #hero-content-wrap .hero-content > .row { display: table-cell; float: none; vertical-align: middle; }
#hero #hero-content-wrap .hero-title, #hero #hero-content-wrap .hero-sub-title { margin: 0; will-change: transform, opacity; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hero #hero-content-wrap .hero-sub-title { margin-top: 20px; }
#hero #hero-content-wrap blockquote { padding: 0; border: 0 none; }
#hero #hero-content-wrap blockquote p, #hero #hero-content-wrap blockquote cite { display: inline; font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; }
@media (min-width: 992px) { #hero #hero-content-wrap blockquote p, #hero #hero-content-wrap blockquote cite { font-size: 13px; } }
@media (min-width: 1200px) { #hero #hero-content-wrap blockquote p, #hero #hero-content-wrap blockquote cite { font-size: 14px; } }
#hero #hero-content-wrap blockquote cite { display: inline; color: #b8b8b8; font-style: normal; white-space: nowrap; }

#intro { position: relative; width: 100%; min-height: 100vh; padding: 110px 0; background: transparent; overflow: hidden; text-align: center; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
#intro #intro-title, #intro #intro-sub-title { margin: 0; will-change: transform, opacity; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#intro #intro-sub-title { margin-top: 20px; }

/*-----------------------------------------------------------------------------------
	PROJECT GRID
-----------------------------------------------------------------------------------*/
.grid .grid-item { position: relative; display: block; width: 100%; padding-bottom: 75%; float: left; overflow: hidden; }
.grid .grid-item a { position: absolute; display: block; top: -10px; left: -10px; bottom: -10px; right: -10px; background: transparent; }
.grid .grid-item img { position: absolute; width: 100%; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: -webkit-transform 2s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: -moz-transform 2s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: -o-transform 2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1); }
.grid .grid-item .caption { position: absolute; width: 100%; height: 100%; /*top: 0;
left: 0;
bottom: 0;
right: 0;*/ padding: 40px; }
.grid .grid-item h2 { font-size: 16px; line-height: 1.3em; letter-spacing: 0.1em; margin: 0 0 15px 0; opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: all 0.35s cubic-bezier(0.835, 0, 0.19, 1); -moz-transition: all 0.35s cubic-bezier(0.835, 0, 0.19, 1); -o-transition: all 0.35s cubic-bezier(0.835, 0, 0.19, 1); transition: all 0.35s cubic-bezier(0.835, 0, 0.19, 1); }
.grid .grid-item h4 { margin: 0 0 15px 0; opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: all 0.5s cubic-bezier(0.835, 0, 0.19, 1); -moz-transition: all 0.5s cubic-bezier(0.835, 0, 0.19, 1); -o-transition: all 0.5s cubic-bezier(0.835, 0, 0.19, 1); transition: all 0.5s cubic-bezier(0.835, 0, 0.19, 1); }
.grid .grid-item:hover a, .grid .grid-item.hover a { background: rgba(24, 24, 24, 0.8); }
.grid .grid-item:hover img, .grid .grid-item.hover img { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); }
.grid .grid-item:hover h2, .grid .grid-item.hover h2 { /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
.grid .grid-item:hover h4, .grid .grid-item.hover h4 { /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
@media (min-width: 480px) { .grid .grid-item { width: 50%; padding-bottom: 37.5%; } }
@media (min-width: 768px) { .grid .grid-item h2 { font-size: 20px; } }
@media (min-width: 992px) { .grid .grid-item .caption { padding: 50px; }
  .grid .grid-item h2 { font-size: 20px; } }
@media (min-width: 1200px) and (min-height: 640px) { .grid .grid-item .caption { padding: 60px; }
  .grid .grid-item h2 { font-size: 30px; } }

/*-----------------------------------------------------------------------------------
	WORK PAGE GRID GRID
-----------------------------------------------------------------------------------*/
body.page-work #hero #hero-background > img { left: auto !important; right: 0 !important; }
body.page-work #hero .stats h2 { font-size: 32px; font-weight: 700; line-height: 1em; letter-spacing: 0; }
body.page-work #hero .stats h2.serif { font-weight: 400; letter-spacing: 0; word-spacing: 0; }
@media (min-width: 480px) { body.page-work #hero .stats h2 { font-size: 40px; } }
@media (min-width: 640px) { body.page-work #hero .stats h2 { font-size: 48px; } }
@media (min-width: 768px) { body.page-work #hero .stats h2 { font-size: 56px; } }
@media (min-width: 992px) { body.page-work #hero .stats h2 { font-size: 70px; } }
@media (min-width: 1200px) { body.page-work #hero .stats h2 { font-size: 90px; } }
@media (min-width: 1600px) { body.page-work #hero .stats h2 { font-size: 110px; } }
@media (min-width: 992px) { body.page-work .grid .grid-item { width: 33.3333333%; padding-bottom: 25%; } }

/*-----------------------------------------------------------------------------------
	PROJECT FOOTER GRID
-----------------------------------------------------------------------------------*/
#project-footer.grid .grid-item { width: 50%; padding-bottom: 37.5%; }
#project-footer.grid .grid-item a { background: rgba(24, 24, 24, 0.8); }
#project-footer.grid .grid-item img { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); }
#project-footer.grid .grid-item h2 { /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); display: none; }
#project-footer.grid .grid-item h4 { /* May not really need anymore? */ filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
#project-footer.grid .grid-item:last-of-type .caption { text-align: right; }
#project-footer.grid .grid-item:last-of-type:hover h2, #project-footer.grid .grid-item:last-of-type:hover h4 { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
#project-footer.grid .grid-item:hover a { background: transparent; }
#project-footer.grid .grid-item:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
#project-footer.grid .grid-item:hover h2 { /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
#project-footer.grid .grid-item:hover h4 { /* May not really need anymore? */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
@media (min-width: 640px) { #project-footer.grid .grid-item { /*
width: 50%;

&:last-of-type {
	text-align: right;
	
	&:hover {
		
		h2, h4 {
			@include transform(translateX(100px));
		}
	}
}*/ }
  #project-footer.grid .grid-item h2 { display: block; }
  #project-footer.grid .grid-item h4 { color: #a0a0a0; } }

body.page-home #hero { background: #f8f8fb; }
body.page-home #section-about h2 { font-family: "kepler-std", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2em; letter-spacing: 0; text-transform: none; }
@media (min-width: 480px) { body.page-home #section-about h2 { font-size: 36px; } }
@media (min-width: 768px) { body.page-home #section-about h2 { font-size: 42px; } }
@media (min-width: 1200px) { body.page-home #section-about h2 { font-size: 48px; } }
@media (min-width: 1200px) { body.page-home #section-about h2 { font-size: 54px; } }

#section-clients { 	/*@media (min-width: 768px) {

		ul.client-list li {
			width: 25%;
			margin-bottom: 30px;
			
			img {
				max-width: 120px;
			}
		}
	}*/ }
#section-clients h2 { font-family: "kepler-std", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2em; letter-spacing: 0; text-transform: none; margin: 0 0 100px; }
@media (min-width: 480px) { #section-clients h2 { font-size: 36px; } }
@media (min-width: 768px) { #section-clients h2 { font-size: 42px; } }
@media (min-width: 1200px) { #section-clients h2 { font-size: 48px; } }
@media (min-width: 1200px) { #section-clients h2 { font-size: 54px; } }
#section-clients .view-work { margin: 40px 0 0 0; }
#section-clients ul.client-list { display: inline-block; }
#section-clients ul.client-list li { float: left; text-align: center; width: 50%; margin-bottom: 20px; }
#section-clients ul.client-list li img { max-width: 100px; height: auto; }
@media (min-width: 480px) { #section-clients ul.client-list li img { max-width: 110px; } }
@media (min-width: 640px) { #section-clients ul.client-list li { width: 25%; margin-bottom: 20px; } }
@media (min-width: 768px) { #section-clients ul.client-list li { margin-bottom: 30px; }
  #section-clients ul.client-list li img { max-width: 120px; } }
@media (min-width: 992px) { #section-clients ul.client-list li { width: 20%; margin-bottom: 40px; }
  #section-clients ul.client-list li img { max-width: 120px; } }
@media (min-width: 1200px) { #section-clients ul.client-list li { margin-bottom: 50px; }
  #section-clients ul.client-list li img { max-width: 140px; } }
@media (min-width: 1600px) { #section-clients ul.client-list li { margin-bottom: 60px; }
  #section-clients ul.client-list li img { max-width: 150px; } }

.wordmark { letter-spacing: 0.3em; }

#footer { text-align: center; background: #404040; background: #282828; }
#footer h4 { color: #8a8a8a; }
#footer .footer-two { padding-bottom: 20px; color: #8a8a8a; font-size: 12px; font-weight: 500; }
#footer .footer-two > div { padding-bottom: 20px; }
#footer .footer-two li { display: inline-block; margin: 0 8px; }
#footer .footer-two li:first-of-type { margin-left: 0; }
#footer .footer-two li:last-of-type { margin-right: 0; }
@media (min-width: 768px) { #footer .footer-two { font-size: 13px; }
  #footer .footer-two > div:first-of-type { text-align: right; }
  #footer .footer-two > div:last-of-type { text-align: left; } }

/*-----------------------------------------------------------------------------------
	TYPO EFFECT
-----------------------------------------------------------------------------------*/
.typo-text { display: block; float: left; text-align: center; /*
font-size: 24px;
line-height: 95px;

-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
min-width: 10%;*/ }
.typo-text .hide { display: none; }

#section-stats { text-align: center; }
#section-stats .stat { font-size: 10px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 60px; }
@media (min-width: 992px) { #section-stats .stat { font-size: 11px; } }
@media (min-width: 1200px) { #section-stats .stat { font-size: 12px; } }
#section-stats .stat > span:first-of-type { display: block; font-family: "kepler-std", Georgia, serif; font-weight: 400; font-size: 42px; line-height: 1.2em; letter-spacing: 0; text-transform: none; }
@media (min-width: 480px) { #section-stats .stat > span:first-of-type { font-size: 48px; } }
@media (min-width: 768px) { #section-stats .stat > span:first-of-type { font-size: 54px; } }
@media (min-width: 992px) { #section-stats .stat > span:first-of-type { font-size: 60px; } }
@media (min-width: 1200px) { #section-stats .stat > span:first-of-type { font-size: 66px; } }

#section-profile h1 { font-size: 12px; font-weight: 500; line-height: 1.8em; letter-spacing: 0.3em; text-transform: uppercase; }
@media (min-width: 992px) { #section-profile h1 { font-size: 13px; } }
@media (min-width: 1200px) { #section-profile h1 { font-size: 14px; } }
#section-profile hr { margin: 80px auto; }

/*-----------------------------------------------------------------------------------
	ABOUT PAGE
-----------------------------------------------------------------------------------*/
body.page-about { 	/* good for fixed...

	section {
		background: transparent;
	}
	
	#hero {
		position: fixed;
		overflow: auto;
	}
	
	#content {
		position: absolute;
		top: 100vh;
		
	}
	
	*/ }
body.page-about #hero-background > img { top: auto !important; bottom: 0 !important; }
body.page-about #hero { background: #f0f0f0; }
body.page-about #hero h2 { width: 100%; }
body.page-about #hero h2:last-of-type { margin-bottom: 0; }
body.page-about #hero .typo-text { font-size: 13px; line-height: 38px; min-width: 10%; }
body.page-about #hero .typo-text.even { color: #a0a0a0; }
@media (min-width: 640px) and (min-height: 480px) { body.page-about #hero .typo-text { font-size: 14px; line-height: 52px; } }
@media (min-width: 992px) and (min-height: 640px) { body.page-about #hero .typo-text { font-size: 15px; line-height: 70px; } }
@media (min-width: 1200px) and (min-height: 768px) { body.page-about #hero .typo-text { font-size: 17px; line-height: 95px; } }
@media (min-width: 1600px) and (min-height: 1024px) { body.page-about #hero .typo-text { font-size: 19px; line-height: 95px; } }

#video { position: absolute; left: 0; top: 0; bottom: 0; right: 0; min-width: 100%; min-height: 100%; width: auto; overflow: hidden; }
#video video { position: absolute; bottom: 0px; left: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; /* opacity: 0.8;*/ }

.work-detail h2 { font-family: "kepler-std", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2em; letter-spacing: 0; text-transform: none; }
@media (min-width: 480px) { .work-detail h2 { font-size: 36px; } }
@media (min-width: 768px) { .work-detail h2 { font-size: 42px; } }
@media (min-width: 1200px) { .work-detail h2 { font-size: 48px; } }
@media (min-width: 1200px) { .work-detail h2 { font-size: 54px; } }
.work-detail ul { margin: 0 0 15px 0; }
.work-detail ul li { display: inline-block; font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; line-height: 1.8em; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 20px 5px 0; }
.work-detail ul li:last-of-type { margin-right: 0; }
.work-detail ul li span { color: #b8b8b8; margin-right: 5px; }
@media (min-width: 768px) { .work-detail ul { margin: 0 0 20px 0; }
  .work-detail ul li { font-size: 11px; } }
@media (min-width: 1200px) { .work-detail ul { margin: 0 0 25px 0; }
  .work-detail ul li { font-size: 12px; } }

/***************************************\

	jquery.kyco.preloader
	=====================

	Version 1.2.2

	Brought to you by
	http://www.kycosoftware.com

	Copyright 2014 Cornelius Weidmann

	Distributed under the GPL

\***************************************/
#kyco_preloader { top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }

#kyco_preloader .kyco_loader_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#kyco_preloader .kyco_loader { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

#kyco_preloader .kyco_progress_notification { position: absolute; right: 4vw; bottom: 4vw; color: #444; color: #fff; color: white; color: #505050; color: #d0d0d0; color: #fff; color: #333; font-family: 'kepler-std', serif; font-size: 64px; text-align: right; line-height: 64px; }
.home #kyco_preloader .kyco_progress_notification { color: #b2769f; color: #fff; color: #202020; color: #d0d0d0; color: #fff; color: #333; }

#kyco_preloader .kyco_progress_percentage { /*
**	This rule is only necessary if a global
**	style is applied to all span tags.
*/ position: relative; float: none; }

#kyco_preloader .kyco_progress_bar { position: absolute; top: 0; left: 0; width: 100%; height: 4px; visibility: hidden; }

#kyco_preloader .kyco_progress_loaded { position: relative; width: 0; height: 100%; background: white; will-change: all; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.home #kyco_preloader .kyco_progress_loaded { background: white; background: #202020; }

#kyco_preloader .kyco_progress_notification.error { position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px 0; background: #fff; border-top: 5px solid #f00; }

#kyco_preloader .kyco_progress_bar.error { display: none; }

.kyco_preloader_not_found_error { /*
**	Change image path to match your setup.
*/ position: relative; background: white url(loading-error.png) no-repeat center; box-shadow: inset 0 0 0 1px #aaa; }