@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
html { box-sizing: border-box; }

*, *::after, *::before { box-sizing: inherit; }

html, body, header .nav-inner, .sc-player ol.sc-trackslist li.active:hover, .sc-scrubber:hover, .sc-scrubber .sc-time-span:hover, .sc-scrubber .sc-time-span img:hover, .sc-scrubber .sc-buffer:hover, .sc-scrubber .sc-played:hover { cursor: url(../img/cursor.svg), auto; }

header, .about-wrap figure .details, .about-wrap figure:hover .details h3, .about-wrap figure:hover .details p { cursor: url(../img/cursor-wt.svg), auto; }

button[type="submit"]:hover, header h1 a:hover, .menu:hover, .menu .toggle:hover, .sc-player .sc-controls a:hover, .project-detail-wrap aside a:hover { cursor: url(../img/cursor-pointer.svg), auto; }

a:hover, .sc-player ol.sc-trackslist li:hover { cursor: url(../img/cursor-pointer-wt.svg), auto; }

/* LAYOUT */
/* COLOR */
/* TYPOGRAPHY */
/* ========================= Author: Mason Brown  Adapted from: Soundcloud Custom Player  API docs: http://developers.soundcloud.com/docs/custom-player ========================= */
.player-spacer { float: left; width: 100%; height: 100px; }

.spinner { position: relative; margin: 200px auto 0; width: 70px; text-align: center; z-index: 0; }

.spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }

.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }
@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1); -webkit-transform: scale(1); } }
/*STRUCTURE*/
.sc-player { width: 100%; height: 100%; position: relative; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

.sc-player ol, .sc-player li { margin: 0; padding: 0; list-style-position: inside; }

/* Artworks */
.sc-player .sc-artwork-list { width: 100%; height: 100%; list-style-type: none; position: relative; top: 100px; line-height: 0; }

.sc-player .sc-artwork-list li { list-style-type: none; float: left; width: 20%; height: 200px; padding: 0; margin: 0; overflow: hidden; }

.sc-player .sc-artwork-list li.active { list-style-type: none; display: block; }

.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div { list-style-type: none; width: 100%; height: auto; }

.sc-player .sc-artwork-list li .sc-no-artwork { text-align: center; line-height: 1em; background: url("../img/fallback.jpg") no-repeat; width: 100%; height: 100%; color: transparent; }

/* controls */
.sc-player .sc-controls { position: absolute; width: 100px; height: 100px; top: 0; left: 0; background: #2bce7f; z-index: 500; }

.sc-player .sc-controls a { display: block; width: 40px; height: 40px; }

.sc-player .sc-controls a.sc-pause { display: none; }

.sc-player.playing .sc-controls a.sc-play { display: none; }

.sc-player.playing .sc-controls a.sc-pause { display: block; }

/* scrubber */
.sc-scrubber { position: absolute; top: 0; left: 100px; width: 94%; display: block; z-index: 1; background-color: transparent; border: none; }

@-moz-document url-prefix() { .sc-scrubber { width: 95%; } }
.player-header { position: absolute; top: 0; left: 0; float: left; width: 100%; height: 100px; background: #eee; z-index: 0; -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); }

.sc-scrubber .sc-time-span { background-color: #efefef; }

.sc-scrubber .sc-time-span img { background-color: #004e4b; }

.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { background-color: transparent; opacity: 0.4; cursor: pointer; }

.sc-scrubber .sc-played { background-color: rgba(0, 135, 64, 0.5); }

.sc-scrubber, .sc-scrubber .sc-time-span, .sc-scrubber .sc-time-span img, .sc-scrubber .sc-buffer, .sc-scrubber .sc-played { height: 100px; }

.sc-scrubber .sc-time-span { position: relative; }

.sc-scrubber .sc-time-span img { width: 100%; }

.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { position: absolute; top: 0; }

.sc-scrubber .sc-time-indicators { position: absolute; right: 0; top: -30px; display: none; }

/* Tracks */
/* Track listings*/
.sc-player .sc-artwork-list, .sc-player ol.sc-trackslist { top: 100px; }

.sc-player ol.sc-trackslist { position: absolute; float: left; width: 100%; background: transparent; }

.sc-player ol.sc-trackslist li { float: left; width: 20%; height: 200px; cursor: pointer; margin: 0px; padding: 0; list-style: none; }

/* Track info*/
.sc-player .sc-info { position: absolute; top: 0; right: -200px; width: 40%; padding: 0; height: auto; z-index: 500; color: #fff; background: transparent; float: left; opacity: 0; display: none; }

.sc-player .sc-info.active { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; width: 40%; right: 0; opacity: 1; display: block; }

.sc-player .sc-info h3, .sc-player .sc-info h4 { padding: 5px 10px; margin: 0; }

.sc-player .sc-info h4, .sc-player .sc-info a { width: 40%; text-align: left; color: rgba(255, 255, 255, 0.9); font-weight: normal; }

.sc-player .sc-info h3 { margin-top: 30px; width: 100%; }

.sc-player .sc-info p { display: none; height: 0; }

.sc-player .sc-info h3 a { padding: 15px 10px; background: rgba(0, 165, 212, 0.3); /*#00a5d4;*/ white-space: nowrap; font-size: 0.8em; }

.sc-player .sc-info h3 a:hover { background: rgba(0, 165, 212, 0.7); }

.sc-player .sc-info h4 a:hover { color: #00fff6; }

.sc-player .sc-info-toggle:before { content: '\2190'; /* plus icon */ opacity: .5; text-align: center; }

.sc-player .sc-info-toggle { position: absolute; top: 0; right: 0; width: 6%; min-width: 54px; height: 100px; z-index: 2; background: #00a5d4; opacity: .6; color: #fff; padding: 34px 4px 0 4px; font-size: 34px; line-height: .85em; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }

.sc-player .sc-info a.sc-info-close { color: transparent; }

.sc-player .sc-info-close { background: transparent; color: transparent; padding: 50px 0; font-weight: bold; width: 100%; }

.sc-player .sc-info-toggle.active:before { float: right; padding-right: 20px; content: '\2192'; /* close icon */ }

.sc-player .sc-info-toggle.active { width: 41%; height: 100px; right: 0; top: 0; background: rgba(0, 0, 0, 0.8); }

.sc-player .sc-info-close { position: absolute; top: 0; right: 0; color: transparent; }

/* utilities */
.sc-player .hidden { display: none; }

.sc-volume-slider { display: none; }

.sc-player-engine-container { width: 1px; height: 1px; position: absolute; top: 2px; left: 2px; }

.artwork-img, .playlist-item { float: left; width: auto; height: auto; }

/* COLORS */
/* TODO: REFACTOR COLORS INTO DECLARATIONS ABOVE*/
.sc-player { font: 12px Arial, sans-serif; color: #000; font-size: 0.8em; font-weight: bold; line-height: 1.6em; }

.sc-player a { text-decoration: none; color: #000; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.sc-player a:hover { -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }

/* COLORS: controls */
.sc-player .sc-controls a { color: transparent; float: left; width: 100px; height: 100px; background: url("../img/play.svg") no-repeat 70% center; background-size: 80%; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.sc-player .sc-controls a:hover { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; background-color: #00a5d4; }

.sc-player .sc-controls a.sc-pause { background: url("../img/play.svg"); opacity: .8; }

.sc-player.playing .sc-controls a.sc-pause:hover { background-color: #00a5d4; }

.sc-waveform-container { opacity: .5; }

.sc-player.playing .sc-controls a.sc-pause { color: transparent; float: left; width: 100px; height: 100px; background: url("../img/pause.svg"); background-size: 100%; }

.sc-scrubber .sc-time-indicators { color: #000; font-size: 0.8em; }

/* COLORS: Track listings*/
.sc-player ol.sc-trackslist li, .sc-player ol.sc-trackslist a { color: transparent; }

.sc-player ol.sc-trackslist li { -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }

.sc-player ol.sc-trackslist li:hover { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }

.sc-player ol.sc-trackslist li.active { opacity: 1; color: transparent; background: transparent; box-sizing: border-box; -moz-box-sizing: border-box; border: 8px solid rgba(0, 255, 246, 0.5); -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4); }

.sc-player ol.sc-trackslist li.active:hover { background: rgba(0, 255, 246, 0.5); background: rgba(255, 255, 255, 0); cursor: default; box-sizing: border-box; -moz-box-sizing: border-box; border: 8px solid #00fff6; }

.sc-player ol.sc-trackslist li:hover { background-color: transparent; opacity: 1; color: transparent; box-sizing: border-box; -moz-box-sizing: border-box; border: 8px solid rgba(0, 51, 49, 0.5); -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.2); }

.sc-artwork-list li img:hover, .sc-artwork-list li.active img { opacity: 1; }

.sc-player ol.sc-trackslist li.active a, .sc-player ol.sc-trackslist li:hover a { color: #000; }

.sc-player ol.sc-trackslist li.playlist-item a { opacity: 0; }

.sc-track-duration { text-align: right; float: right; padding: 0; margin: 0; display: none; }

/*BEGIN MEDIA QUERIES*/
@media only screen and (min-width: 0px) { .sc-info-toggle { display: none; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 50%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 60px; }
  .sc-player .sc-info, .sc-player .sc-info h4 { width: 100%; margin-right: -100px; }
  .sc-player .sc-info.active { right: auto; left: 100px; width: calc(100% - 100px); }
  .sc-player .sc-info-toggle.active { width: 100%; }
  .sc-player .sc-info a.sc-info-close { width: 6.4%; min-width: 54px; background: #00a5d4; opacity: 0.6; }
  .sc-player .sc-info-toggle.active:before { padding-right: 0 10px; }
  .sc-player .sc-info h3, .sc-player .sc-info h4 { float: left; overflow: visible; text-overflow: ellipsis; display: block; width: 20%; }
  .sc-player .sc-info h4 { display: none; } }
@media only screen and (min-width: 320px) { .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 160px; }
  .sc-player .sc-info h3, .sc-player .sc-info h4 { width: 50%; } }
@media only screen and (min-width: 480px) { .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 33.333333333333336%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 160px; }
  .sc-player .sc-info h3, .sc-player .sc-info h4 { width: auto; } }
@media only screen and (min-width: 768px) { .sc-info-toggle { display: block; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 25%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 192px; } }
@media only screen and (min-width: 1024px) { .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 20%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 205px; }
  .sc-player .sc-info h3 a { font-size: 1.1em; } }
@media only screen and (min-width: 1200px) { .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 16.666666666666668%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 200px; } }
@media only screen and (min-width: 1440px) { .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { width: 12.5%; }
  .sc-player .sc-artwork-list li, .sc-player ol.sc-trackslist li { height: 180px; } }
/* Description: 	PHP Ajax Forms Author: 		InsideLab Version: 		1.0
*/
/*LOADER*/
/* #loader { background-image:url(../img/loader.gif); background-repeat:no-repeat;
	background-position: center;
	margin: 0 auto; width:16px; height:16px; display:none;		
} */
#loader { position: relative; margin: 200px auto 0; width: 70px; text-align: center; z-index: 0; display: none; }

#loader > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }

#loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }

#loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }
@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1); -webkit-transform: scale(1); } }
/*	--------------------------------------------------
	:: Tooltip Default
	-------------------------------------------------- */
.tooltipster-default { background-color: #2bce7f; color: #fff; text-align: center; }

.tooltipster-default .tooltipster-content { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; padding: 6px 8px; overflow: hidden; }

.tooltipster-icon { cursor: help; margin-left: 4px; }

.tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; }

.tooltipster-base .tooltipster-content { overflow: hidden; }

.tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }

.tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; }

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { /* border-left:5px solid transparent !important;
border-right:5px solid transparent !important;
border-top:5px solid;
bottom:-5px; */ border-left: 5px solid transparent !important; border-top: 5px solid transparent !important; border-bottom: 5px solid transparent !important; border-right: 5px solid transparent !important; bottom: 10px !important; left: -10px !important; }

.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -5px; }

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -5px; }

.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -5px; }

.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; }

.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; }

.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; }

.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { left: 6px; }

.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; }

.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -5px; }

.tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; }

.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -8px; left: -3px; }

.tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; }

.tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; }

.tooltipster-fade-show { opacity: 1; }

.tooltipster-grow { -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; }

.tooltipster-grow-show { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; }

.tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); }

.tooltipster-fall { top: 0; -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; }

.tooltipster-slide { left: -40px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; }

.tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }

@media only screen and (min-width: 768px) { .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 5px solid transparent !important; border-top: 5px solid transparent !important; border-bottom: 5px solid transparent !important; border-right: 5px solid #2bce7f !important; bottom: 10px !important; left: -10px !important; 	/* border-left:5px solid transparent !important; border-right:5px solid transparent !important; border-top:5px solid $color-green !important; bottom: -10px !important;
	left: 14px !important; */ } }
/*=========================*/
/*      END MIXINS         */
/*=========================*/
/*root html*/
html, body { position: relative; float: left; width: 100%; height: 100%; background: #efefef; color: #000; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

::selection { background: #2bce7f; color: #fff; }

::-moz-selection { background: #2bce7f; color: #fff; }

.page-wrap { float: left; position: relative; width: 100%; margin: 0; z-index: 0; overflow: hidden; background: #efefef; }

.header-wrap { float: left; width: 100%; height: auto; background: #222; overflow: hidden; }

header { z-index: 1; position: relative; float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 10px; overflow: hidden; }
header h1 a { color: #fff; text-decoration: none; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
header h1 a:hover { color: #fff !important; }
header .menu { position: absolute; right: 0; top: 0; text-align: center; width: 8%; min-width: 54px; height: 64px; cursor: pointer; background: #2bce7f; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: background 0.15s ease; -moz-transition: background 0.15s ease; transition: background 0.15s ease; }
header .menu.hidden { height: 0; }
header .menu .toggle { position: relative; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; cursor: pointer; will-change: opacity; opacity: 1; -webkit-transition: opacity 0.15s ease; -moz-transition: opacity 0.15s ease; transition: opacity 0.15s ease; }
header .menu.hidden .toggle { right: 0; }
header .menu .toggle div { margin-top: 14px; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }
header .menu .toggle div:after, header .menu .toggle div:before { content: ""; position: absolute; }
header .menu .toggle div, header .menu .toggle div:after, header .menu .toggle div:before { display: block; width: 30px; height: 3px; background-color: #fff; }
header .menu .toggle div:before { margin-top: -10px; }
header .menu .toggle div:after { margin-top: 10px; }
header .menu.visible .toggle { opacity: 1; }
header .menu.visible .toggle div { background-color: transparent; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; }
header .menu .toggle div:before { -webkit-transition-property: margin, -webkit-transform; -moz-transition-property: margin, -moz-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0; -moz-transition-delay: 0.2s, 0; transition-delay: 0.2s, 0; }
header .menu.visible .toggle div:before { margin-top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0, 0.2s; -moz-transition-delay: 0, 0.2s; transition-delay: 0, 0.2s; }
header .menu .toggle div:after { -webkit-transition-property: margin, -webkit-transform; -moz-transition-property: margin, -moz-transform; transition-property: margin, transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0; -moz-transition-delay: 0.2s, 0; transition-delay: 0.2s, 0; }
header .menu.visible .toggle div:after { margin-top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0, 0.2s; -moz-transition-delay: 0, 0.2s; transition-delay: 0, 0.2s; }
header .nav-inner { float: left; width: 100%; height: 0; overflow: hidden; text-align: center; padding: 0; background: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
header .nav-inner span { display: none; visibility: hidden; opacity: .6; }
header .nav-inner a { opacity: 1; float: left; width: 100%; text-decoration: none; color: transparent; font-family: "Abril Fatface", Georgia, serif; font-size: 1.49em; font-weight: normal; text-transform: capitalize; padding: 4px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.8); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
header .nav-inner a:last-child { border: none; }
header .nav-inner.nav-active { width: 100%; height: 215px; background: white; -webkit-transition: height 0.2s ease; -moz-transition: height 0.2s ease; transition: height 0.2s ease; }
header .nav-inner.nav-active a { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; opacity: 1; color: #000; border-bottom: 1px solid #ddd; }
header .nav-inner.nav-active a.selected { -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; color: #fff; background: #2bce7f; }

h1, h2, h3 { float: left; width: 100%; height: auto; font-family: "Abril Fatface"; font-weight: 400; font-size: 2.5em; line-height: 1em; background: transparent; text-align: left; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

h1 { width: 100%; margin: 0 3%; color: #000; padding-bottom: 14px; /*background: #222;*/ }

h2 { font-size: 1.7em; text-align: left; margin: 0; padding: 6px 0 4px; }

h3 { font-size: 1.5em; text-align: center; padding: 7px 0 14px; border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin: 20px 0; }

p { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.1em; line-height: 1.55em; }

h2.grid-title { float: left; width: 96%; height: auto; margin: 0 2%; padding-bottom: 24px; border-bottom: 1px solid #999; }

.project-grid-wrap { float: left; width: 100%; margin: 0; background: #efefef; }

.grid { max-width: 100%; list-style: none; margin: 20px auto; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; /* -webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px; */ }

/*  .grid li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	-moz-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	-moz-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
} */
/* @-webkit-keyframes flip {
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
	100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	100% { transform: rotateX(0deg); opacity: 1; }
} */
.grid li { display: block; float: left; padding: 7px; width: 100%; opacity: 1; }

.grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1; }

.grid li a { outline: none; padding: 3px; margin-bottom: 14px; display: block; max-width: 100%; height: auto; text-decoration: none; color: #000; border-bottom: 1px solid #999; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.grid li a:hover { -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }

.grid li img { outline: none; border: none; display: block; width: 100%; }

.grid li a .txt-wrap { width: 100%; height: 100%; padding: 5px; }

.grid li a p { font-size: 1em; }

/*PROJECT DETAILS*/
.project-detail-wrap { float: left; width: 100%; margin: 0; height: auto; padding: 50px 3% 0; }
.project-detail-wrap aside { float: left; width: 100%; padding-right: 1.587301587302%; }
.project-detail-wrap aside h2 { font-size: 1.8em; margin: 14px 0 10px; }
.project-detail-wrap aside p { float: left; width: 100%; font-size: 1.1em; line-height: 1.5; margin: 0 0 14px; }
.project-detail-wrap aside p span { width: auto; }
.project-detail-wrap aside p span::after { content: ", \00A0"; }
.project-detail-wrap aside br { display: none; }
.project-detail-wrap aside a { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; color: rgba(29, 29, 29, 0.85); font-weight: bold; text-decoration: none; letter-spacing: -1px; border-bottom: 1px dotted rgba(147, 147, 147, 0.7); text-shadow: none; padding: 0 3px; }
.project-detail-wrap aside a:hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background: #2bce7f; color: #fff; border-bottom: 1px dotted rgba(147, 147, 147, 0); }
.project-detail-wrap aside a.button { float: left; width: auto; border: 0; border-radius: 5px; padding: 14px; margin: 20px 0; background: #000; color: #fff; text-transform: uppercase; font-style: normal; font-size: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1em; letter-spacing: -1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.project-detail-wrap aside a.button:hover { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; background: #00a5d4; }
.project-detail-wrap .project-detail-images { float: right; width: 100%; height: auto; margin: 10px 0 0 0; }
.project-detail-wrap .project-detail-images img { float: left; width: 100%; height: auto; margin-bottom: 20px; }
.project-detail-wrap .project-detail-images.shadowed img { -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; }
.project-detail-wrap .project-detail-images.shadowed img.no-shadow { -webkit-box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 transparent; border-radius: 0; }

.fixed { position: fixed !important; top: 0; right: 0; }

.project-detail-trigger, .project-grid-trigger { float: left; width: 100%; height: 10px; background: transparent; }

.project-grid-trigger { height: 30px; }

.btn-top { z-index: 3; position: fixed; bottom: -100px; left: auto; right: 10px; width: 54px; height: 54px; border-radius: 5px; background: url(../img/btn-top.svg) no-repeat #000 center; background-size: 50%; opacity: .4; color: transparent; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: .85em; text-align: center; padding-top: 34px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1em; letter-spacing: -1px; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.btn-top:hover { opacity: 1; height: 74px; background-position: center 14px; color: #fff; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }

.btn-top-slide { bottom: 20px; }

.btn-pagination { z-index: 3; position: absolute; top: 0; right: 0; width: 100%; height: 98px; background: transparent; border-top: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
.btn-pagination a.btn-prev, .btn-pagination a.btn-next { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1em; letter-spacing: -1px; float: left; width: 50%; height: 48px; padding: 14px 0; background-color: black; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 1em; overflow: hidden; backface-visibility: none; }
.btn-pagination a.btn-prev { background: url(../img/btn-prev.svg) no-repeat #000 left 8% center; background-size: 8%; text-align: left; text-indent: 12%; margin-bottom: 1px; border-right: 1px solid #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn-pagination a.btn-next { background: url(../img/btn-next.svg) no-repeat #000 right 8% center; background-size: 8%; text-align: left; text-indent: 26%; }
.btn-pagination a.btn-prev, .btn-pagination a.btn-next { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; position: relative; width: 50%; right: 0; background-color: #1d1d1d; overflow: hidden; -moz-box-sizing: content-box; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn-pagination a.btn-prev:hover, .btn-pagination a.btn-next:hover { background-color: #00a5d4; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }

/* ABOUT PAGE */
.about-wrap { padding: 0 3%; }
.about-wrap section { float: left; width: 100%; }
.about-wrap h2 { text-align: center; margin: 20px 0 5px; }
.about-wrap p.overview { width: 90%; max-width: 700px; margin: 0 5% 20px; text-align: center; }
.about-wrap p.overview br { display: none; }
.about-wrap .bio-photo { float: left; width: 100%; height: 180px; margin: 0 auto; overflow: hidden; background-image: url(../img/about-mason-brown-3.jpg); background-repeat: no-repeat; background-position: top center; background-size: 120%; }
.about-wrap figure { float: left; width: 100%; height: 300px; margin: 0 0 20px 0; padding: 0; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; }
.about-wrap figure .details { float: left; width: 100%; height: 100%; background: rgba(0, 51, 51, 0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.about-wrap figure .details .text { margin: auto; }
.about-wrap figure .details h3, .about-wrap figure .details p { float: left; width: 90%; margin: 0 5%; opacity: 0; color: #fff; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; border: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.about-wrap figure .details h3 { margin-bottom: 30px; padding: 0; text-align: center; font-size: 2.5em; }
.about-wrap figure .details h3::after { position: relative; left: calc(50% + 25px); top: 65px; margin: 0 0 0 -50px; float: left; width: 50px; height: 2px; background: #fff; content: ' '; }
.about-wrap figure .details p { padding: 20px 0 0 0; }
.about-wrap figure:hover .details { background: rgba(0, 51, 51, 0.77); -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }
.about-wrap figure:hover .details h3, .about-wrap figure:hover .details p { opacity: 1; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }

/* CONTACT PAGE */
.contact-wrap { float: left; width: 100%; padding: 0 2%; margin: 0; /* Display correctly filled-in fields with a green background */ /* FORM ELEMENTS */ }
.contact-wrap fieldset { position: relative; border: none; padding: 0; margin: 0; }
.contact-wrap input:valid, .contact-wrap textarea:valid { /*background: #dfd;*/ }
.contact-wrap form { position: relative; float: left; width: 100%; margin: 15px 0 0; }
.contact-wrap input[type="text"], .contact-wrap select, .contact-wrap textarea { color: #999; }
.contact-wrap ::-webkit-input-placeholder { color: #999; }
.contact-wrap input:hover::-webkit-input-placeholder { color: #393939; }
.contact-wrap :-moz-placeholder { color: #999; }
.contact-wrap input:hover::-moz-placeholder { color: #393939; }
.contact-wrap ::-moz-placeholder { color: #999; }
.contact-wrap input:hover:-moz-placeholder { color: #393939; }
.contact-wrap ::-ms-placeholder { color: #999; }
.contact-wrap input:hover::-ms-placeholder { color: #393939; }
.contact-wrap input, .contact-wrap select, .contact-wrap textarea, .contact-wrap button { position: relative; float: left; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; border: 3px solid #999; padding: 10px; -webkit-appearance: none; border-radius: 0; font-size: 1.5em; font-family: "Playfair Display", Georgia, serif; background: #fff; margin: 0 0 16px 0; box-sizing: border-box; -moz-box-sizing: border-box; }
.contact-wrap input:hover, .contact-wrap select:hover, .contact-wrap textarea:hover, .contact-wrap button:hover { border: 3px solid #393939; color: #393939; }
.contact-wrap input:focus, .contact-wrap select:focus, .contact-wrap textarea:focus, .contact-wrap button:focus { outline: none !important; border: 4px solid #00a5d4; padding: 9px 14px; color: #393939; box-sizing: border-box; -moz-box-sizing: border-box; }
.contact-wrap input.name { width: 100%; }
.contact-wrap input.email { width: 100%; }
.contact-wrap textarea { height: auto; min-height: 150px; }
.contact-wrap button[type="submit"] { position: relative; background: #000; font-size: 2em; font-family: "Abril Fatface", Georgia, serif; color: #fff; border: none; cursor: pointer; padding-bottom: 14px; border-radius: 4px; height: 88px; cursor: url(../img/cursor-pointer.svg), auto; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
.contact-wrap button[type="submit"]:focus { border: none; }
.contact-wrap button[type="submit"]:hover { background: #00a5d4; width: 100%; margin-left: 0; left: 0; cursor: url(../img/cursor-pointer.svg), auto; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; transition: all 0.1s ease; }
.contact-wrap #contact-message { float: left; width: 100%; text-align: center; font-family: "Abril Fatface", Georgia, serif; font-size: 2.5em; margin: 0 0 30px 0; }

/* SOCIAL STUFF */
.social-wrap { float: left; width: 100%; margin: 30px 0 100px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

.social { float: left; width: auto; margin: 0 auto; }
.social a { float: left; width: 54px; height: 54px; background-size: 60%; background-color: #2b3237; padding: 10px; text-indent: -9999px; overflow: hidden; background-position: center; background-repeat: no-repeat; margin-right: 1px; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
.social a:hover { -webkit-transition: background-color 0.1s ease; -moz-transition: background-color 0.1s ease; transition: background-color 0.1s ease; }
.social a:first-child { border-radius: 4px 0 0 4px; }
.social a:last-child { border-radius: 0 4px 4px 0; margin-right: 0; }
.social a.icon-tw { background-image: url(../img/icon-tw.svg); background-size: 58%; }
.social a.icon-tw:hover { background-color: #00d5ff; }
.social a.icon-dr { background-image: url(../img/icon-dr.svg); background-size: 55%; }
.social a.icon-dr:hover { background-color: #ff679c; }
.social a.icon-sc { background-image: url(../img/icon-sc.svg); background-size: 64%; }
.social a.icon-sc:hover { background-color: #ff7700; }
.social a.icon-li { background-image: url(../img/icon-li.svg); background-size: 55%; }
.social a.icon-li:hover { background-color: #0079bb; }
.social a.icon-em { background-image: url(../img/icon-em.svg); }
.social a.icon-em:hover { background-color: #2bce7f; }

/* INSPIRATION PAGE */
.inspire-wrap { float: left; width: 100%; padding: 0 2%; margin-top: 30px; }
.inspire-wrap h2 { float: left; width: 100%; text-align: center; font-size: 2em; line-height: 1.2em; color: #fff; }
.inspire-wrap p { float: left; width: 100%; text-align: center; margin-bottom: 0; color: #fff; font-size: 1.3em; opacity: .7; }
.inspire-wrap span { color: #fff; opacity: .7; }
.inspire-wrap .quote-two-way-wrap, .inspire-wrap .quote-three-way-wrap { float: left; width: 100%; height: auto; }
.inspire-wrap .quote-two-way-wrap .spacer, .inspire-wrap .quote-three-way-wrap .spacer { display: none; }
.inspire-wrap .quote-two-way-wrap .quote, .inspire-wrap .quote-three-way-wrap .quote { float: left; width: 100%; background: #262a2d; padding: 5%; margin-bottom: 30px; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.inspire-wrap .quote-two-way-wrap .quote .quote-inner, .inspire-wrap .quote-three-way-wrap .quote .quote-inner { float: left; width: 100%; margin: auto; }
.inspire-wrap .quote-two-way-wrap .quote:hover, .inspire-wrap .quote-three-way-wrap .quote:hover { background-color: #00a5d4; -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; transition: all 0.15s ease-in; }
.inspire-wrap .quote-two-way-wrap .quote:hover p, .inspire-wrap .quote-three-way-wrap .quote:hover p { color: #000; }
.inspire-wrap .quote-two-way-wrap .quote.blue:hover, .inspire-wrap .quote-three-way-wrap .quote.blue:hover { background: #00a5d4; }
.inspire-wrap .quote-two-way-wrap .quote.green:hover, .inspire-wrap .quote-three-way-wrap .quote.green:hover { background: #2bce7f; }
.inspire-wrap .quote-two-way-wrap .quote.orange:hover, .inspire-wrap .quote-three-way-wrap .quote.orange:hover { background: #ff7700; }
.inspire-wrap .quote-two-way-wrap .quote.purp:hover, .inspire-wrap .quote-three-way-wrap .quote.purp:hover { background: #9d5ccb; }
.inspire-wrap .quote-two-way-wrap .quote.pink:hover, .inspire-wrap .quote-three-way-wrap .quote.pink:hover { background: #ff679c; }
.inspire-wrap .quote-two-way-wrap .quote.red:hover, .inspire-wrap .quote-three-way-wrap .quote.red:hover { background: #eb3a3a; }
.inspire-wrap .quote-three-way-wrap .spacer { display: none; width: 2%; }
.inspire-wrap .quote-three-way-wrap .quote { width: 100%; }
.inspire-wrap .quote-full-wrap { float: left; width: 100%; display: block; background: #262a2d; margin-bottom: 30px; padding: 5%; }
.inspire-wrap .quote-full-wrap .quote-inner { float: left; width: 100%; }
.inspire-wrap .quote-full-wrap:hover { background-color: #00a5d4; }
.inspire-wrap .quote-full-wrap:hover p { color: #000; }

@media only screen and (min-width: 480px) { header { position: relative; overflow: visible; }
  header .menu { height: 64px; }
  header .nav-inner { text-align: center; }
  header .nav-inner a { width: auto; float: none; border: none; font-size: 1.2em; letter-spacing: 0px; padding: 5% 1%; }
  header .nav-inner span { display: inline-block; visibility: visible; position: relative; top: -6px; color: #000; font-size: 2em; line-height: 1em; }
  header .nav-inner.nav-active { height: 54px; padding: 0 3%; padding: 6px 3% 0 2%; border-bottom: 1px solid #CFCFCF; }
  header .nav-inner.nav-active a { border: none; padding-bottom: 2px; }
  header .nav-inner.nav-active a:last-child { padding-bottom: 1%; }
  header .nav-inner.nav-active a:last-child:hover { padding-bottom: 3%; }
  header .nav-inner.nav-active a:hover { color: #fff; padding-bottom: 3%; background: #2bce7f; -webkit-transition: color 0.3s, background 0.5s, padding 0.2s; -moz-transition: color 0.3s, background 0.5s, padding 0.2s; transition: color 0.3s, background 0.5s, padding 0.2s; }
  header .nav-inner.nav-active a.selected { padding-bottom: 3%; position: relative; }
  /* WORK PAGE */
  .project-grid-wrap .grid li { width: 50%; }
  /* ABOUT PAGE */
  .about-wrap .bio-photo { height: 700px; background-size: cover; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; /* &:hover {
	background-position: bottom center;
} */ }
  /* CONTACT PAGE */
  .contact-wrap input, .contact-wrap select, .contact-wrap textarea, .contact-wrap button { padding: 10px 15px; }
  .contact-wrap input.name { width: 49%; margin-right: 2%; }
  .contact-wrap input.email { width: 49%; }
  .contact-wrap button[type="submit"] { width: 444px; margin-left: -222px; left: 50%; }
  /* SOCIAL */
  .social a { width: 88px; height: 88px; } }
@media only screen and (min-width: 550px) { .btn-pagination { width: 57px; top: 35px; border: none; }
  .btn-pagination a.btn-prev { background: url(../img/btn-prev.svg) no-repeat #000 8% center; background-size: 12%; border-radius: 5px 0 0 0; }
  .btn-pagination a.btn-next { background: url(../img/btn-next.svg) no-repeat #000 right 8% center; background-size: 12%; border-radius: 0 0 0 5px; }
  .btn-pagination a.btn-prev, .btn-pagination a.btn-next { width: 142px; height: auto; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1em; letter-spacing: -1px; color: transparent; text-indent: 0; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: .85em; padding: 16px 0; text-indent: 60px; border: 0; background-position: left 22px center; }
  .btn-pagination a.btn-prev:hover, .btn-pagination a.btn-next:hover { right: 52px; text-indent: 36px; color: #fff; border-radius: 5px 0 0 5px; background-position: left 10px center; }
  .project-detail-wrap { padding: 0 3%; }
  .project-detail-wrap aside { width: 90%; } }
/* MID */
@media only screen and (min-width: 768px) { h2 { font-size: 2.2em; }
  header { position: relative; }
  header h1 { text-align: center; font-size: 3.6em; }
  header .menu { height: 81px; top: 0; width: 6%; }
  header .nav-inner { text-align: center; }
  header .nav-inner a { width: auto; float: none; font-size: 1.45em; letter-spacing: 1px; padding: 3% 2%; opacity: .9; }
  header .nav-inner.nav-active { height: 70px; padding: 15px 3% 0 2%; }
  .btn-top { left: 2%; right: auto; bottom: -60px; }
  .btn-top-slide { bottom: 20px; }
  .project-grid-wrap .grid li { width: 33.33333333333333%; }
  .project-grid-wrap .grid li a { border: none; margin-bottom: 0; }
  .project-grid-wrap .grid li a:hover { background: #000; color: #fff; }
  .project-detail-wrap img { margin-bottom: 40px; }
  .project-detail-wrap .project-detail-images.shadowed img { border-radius: 8px; }
  /* CONTACT PAGE */
  .contact-wrap form { width: 70%; margin: 40px 15% 0; }
  .contact-wrap input, .contact-wrap select, .contact-wrap textarea { font-size: 1.5em; font-family: "Playfair Display", Georgia, serif; }
  /* SOCIAL STUFF */
  .social-wrap { margin: 30px 0 20px; }
  /* ABOUT PAGE */
  .about-wrap { padding: 0 2%; }
  .about-wrap p.overview { position: relative; width: 700px; left: 50%; margin-left: -330px; }
  .about-wrap p.overview br { display: block; }
  .about-wrap figure.main { height: 450px; }
  .about-wrap figure h3::after { top: 55px; }
  .about-wrap figure .details.tiny h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: 0; }
  .about-wrap figure .details.tiny h3::after { display: none; }
  .about-wrap figure .details.tiny-tall h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: 0; }
  .about-wrap figure .details.tiny-tall h3::after { display: none; }
  .about-wrap figure .details.tiny-tall p { font-size: 1em; padding: 0; }
  .about-wrap figure .details.small h3 { margin-bottom: 0; }
  .about-wrap figure .details.small h3::after { display: none; }
  .about-wrap figure .details.small-tall h3 { font-size: 1.5em; line-height: 1.2em; }
  .about-wrap figure .details.small-tall h3::after { top: 44px; }
  .about-wrap figure .details.small-tall p { font-size: 1em; padding: 0; }
  .about-wrap figure .details.small-wide h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: 18px; }
  .about-wrap figure .details.small-wide h3::after { top: 38px; }
  .about-wrap figure .details.small-wide p { font-size: 1em; padding: 0; }
  .about-wrap section.bio .side-1 { float: left; width: 23.809523809524%; }
  .about-wrap section.bio .side-1 figure:first-child { height: 140px; }
  .about-wrap section.bio .side-1 figure:last-child { height: 460px; }
  .about-wrap section.bio .side-2 { float: left; width: 23.809523809524%; }
  .about-wrap section.bio .side-2 figure:first-child { height: 460px; }
  .about-wrap section.bio .side-2 figure:last-child { height: 140px; }
  .about-wrap section.bio .middle { float: left; width: 49.206349206349%; margin: 0 1.5873015873015%; }
  .about-wrap section.bio .middle .col-2 figure { float: left; width: 48.387096774194%; }
  .about-wrap section.bio .middle .col-2 figure:first-child { margin-right: 3.225806451612%; }
  .about-wrap section.city .left { float: left; width: 74.603174603175%; margin-right: 1.587301587301%; }
  .about-wrap section.city .left .left-1 { float: left; width: 31.914893617021%; height: 600px; margin-right: 2.127659574468%; }
  .about-wrap section.city .left .left-2 { float: left; width: 65.957446808511%; height: 380px; }
  .about-wrap section.city .left .left-3 { float: left; width: 40.425531914894%; height: 200px; margin-right: 2.127659574468%; }
  .about-wrap section.city .left .left-4 { float: left; width: 23.404255319149%; height: 200px; }
  .about-wrap section.city .left .left-5 { float: left; width: 40.425531914894%; height: 200px; margin-right: 2.127659574468%; }
  .about-wrap section.city .left .left-6 { float: left; width: 14.893617021277%; height: 200px; margin-right: 2.127659574468%; }
  .about-wrap section.city .left .left-7 { float: left; width: 40.425531914894%; height: 200px; }
  .about-wrap section.city .right { float: left; width: 23.809523809524%; }
  .about-wrap section.city .right .right-1 { float: left; width: 100%; height: 140px; }
  .about-wrap section.city .right .right-2 { float: left; width: 100%; height: 660px; }
  .about-wrap section.workspaces .side-left { float: left; width: 36.507936507937%; }
  .about-wrap section.workspaces .side-left .left-1 { float: left; width: 30.434782608696%; margin-right: 4.347826086956%; }
  .about-wrap section.workspaces .side-left .left-1 figure { height: 140px; }
  .about-wrap section.workspaces .side-left .left-3 { width: 65.217391304348%; height: 300px; }
  .about-wrap section.workspaces .side-left .left-4 { width: 65.217391304348%; height: 300px; margin-right: 4.347826086956%; }
  .about-wrap section.workspaces .side-left .left-5 { width: 30.434782608696%; height: 300px; }
  .about-wrap section.workspaces .side-left .left-6 { width: 65.217391304348%; height: 140px; margin-right: 4.347826086956%; }
  .about-wrap section.workspaces .side-left .left-7 { width: 30.434782608696%; height: 140px; }
  .about-wrap section.workspaces .side-left .left-8 { width: 30.434782608696%; height: 140px; margin-right: 4.347826086956%; }
  .about-wrap section.workspaces .side-left .left-9 { width: 65.217391304348%; height: 140px; }
  .about-wrap section.workspaces .side-right { float: left; width: 36.507936507937%; }
  .about-wrap section.workspaces .side-right .right-1 { width: 30.434782608696%; margin-right: 4.347826086956%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-2 { width: 65.217391304348%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-3 { width: 65.217391304348%; margin-right: 4.347826086956%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-4 { width: 30.434782608696%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-5 { width: 100%; height: 300px; }
  .about-wrap section.workspaces .side-right .right-6 { width: 65.217391304348%; margin-right: 4.347826086956%; height: 300px; }
  .about-wrap section.workspaces .side-right .right-7 { width: 30.434782608696%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-8 { width: 30.434782608696%; height: 140px; }
  .about-wrap section.workspaces .side-right .right-9 { width: 30.434782608696%; margin-right: 4.347826086956%; height: 300px; }
  .about-wrap section.workspaces .side-right .right-10 { width: 65.217391304348%; height: 300px; }
  .about-wrap section.workspaces .mid { float: left; width: 23.809523809524%; margin: 0 1.587301587301%; }
  .about-wrap section.workspaces .mid .mid-1 { height: 140px; }
  .about-wrap section.workspaces .mid .mid-2 { height: 460px; }
  .about-wrap section.interests .side-left { float: left; width: 23.809523809524%; }
  .about-wrap section.interests .side-left .left-1 { height: 188px; }
  .about-wrap section.interests .side-left .left-2 { height: 460px; }
  .about-wrap section.interests .mid { float: left; width: 49.206349206349%; margin: 0 1.5873015873015%; }
  .about-wrap section.interests .mid .mid-1 { height: 348px; }
  .about-wrap section.interests .mid .mid-2 { width: 48.387096774194%; margin-right: 3.225806451612%; height: 300px; }
  .about-wrap section.interests .mid .mid-3 { width: 48.387096774194%; height: 300px; }
  .about-wrap section.interests .side-right { float: left; width: 23.809523809524%; }
  .about-wrap section.interests .side-right .right-1 { height: 460px; }
  .about-wrap section.interests .side-right .right-2 { height: 188px; }
  .about-wrap section.interests .fourth-1 { width: 11.111111111111%; height: 240px; margin-right: 1.587301587302%; }
  .about-wrap section.interests .fourth-2 { width: 36.507936507937%; height: 240px; margin-right: 1.587301587302%; }
  .about-wrap section.interests .fourth-3 { width: 36.507936507937%; height: 240px; margin-right: 1.587301587302%; }
  .about-wrap section.interests .fourth-4 { width: 11.111111111111%; height: 240px; }
  .about-wrap section.interests .full { width: 100%; height: 200px; }
  /* INSPIRATION PAGE */
  .inspire-wrap h2 { font-size: 2em; line-height: 1.2em; }
  .inspire-wrap .quote-two-way-wrap, .inspire-wrap .quote-three-way-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; flex-flow: row nowrap; }
  .inspire-wrap .quote-two-way-wrap .spacer, .inspire-wrap .quote-three-way-wrap .spacer { display: block; float: left; width: 2%; }
  .inspire-wrap .quote-two-way-wrap .quote, .inspire-wrap .quote-three-way-wrap .quote { width: 49%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex: 1 0 auto; -moz-flex: 1 0 auto; flex: 1 0 auto; }
  .inspire-wrap .quote-two-way-wrap .quote .quote-inner, .inspire-wrap .quote-three-way-wrap .quote .quote-inner { align-self: center; }
  .inspire-wrap .quote-three-way-wrap .spacer { display: block; width: 2%; }
  .inspire-wrap .quote-three-way-wrap .quote { width: 32%; } }
/* LARGE */
@media only screen and (min-width: 1024px) { header .menu { height: 99px; }
  header .menu:hover { background: #00a5d4; -webkit-transition: background 0.15s ease; -moz-transition: background 0.15s ease; transition: background 0.15s ease; }
  header h1 { font-size: 5.325em; text-align: center; margin: -10px 0 0 0; }
  .page-wrap { width: 100%; padding: 0; margin: 0; }
  /* WORK PAGE */
  .project-grid-wrap { width: 100%; padding: 0 2%; margin: 0; }
  .project-grid-wrap .grid li { width: 25%; }
  /*PROJECT DETAILS*/
  .project-detail-wrap { width: 100%; padding: 0 2%; margin: 0; /* .aside-fixed {
	position: fixed;
	top: 30px;
} */ }
  .project-detail-wrap aside { width: 23.809523809524%; padding-right: 1.587301587302%; }
  .project-detail-wrap aside h2 { font-size: 2.5em; margin: 30px 0 0 0; }
  .project-detail-wrap aside p { float: left; font-size: 1.1em; line-height: 1.55; margin-top: 10px; }
  .project-detail-wrap aside p span { display: none; }
  .project-detail-wrap aside br { display: block; }
  .project-detail-wrap .project-detail-images { float: right; width: 74.553968%; padding-right: 6.349206349206%; margin: 30px 0 60px 0; }
  .project-detail-wrap .project-detail-images img { margin-bottom: 50px; }
  .about-wrap figure .details h3 { font-size: 2.5em; }
  .about-wrap figure .details h3::after { top: 65px; }
  /* INSPIRATION PAGE */
  .inspire-wrap h2 { font-size: 2.5em; line-height: 1.2em; } }
/* X-LARGE */
@media only screen and (min-width: 1600px) { /* WORK PAGE */
  .project-grid-wrap .grid li { width: 20%; } }
@media screen and (min-width: 0\0) { .about-wrap figure:hover .details { opacity: 0; background: rgba(0, 51, 51, 0); }
  .about-wrap figure:hover .details h3, .about-wrap figure:hover .details p { opacity: 0; } }
@-moz-document url-prefix() { .inspire-wrap .quote-two-way-wrap .quote .quote-inner, .inspire-wrap .quote-three-way-wrap .quote .quote-inner { margin: 60px auto; } }
.js-video { float: left; width: 100%; height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden; }

.js-video.widescreen { padding-bottom: 56.34%; }

.js-video.vimeo { padding-top: 0; }

.js-video embed, .js-video iframe, .js-video object, .js-video video { top: 0; left: 0; width: 100%; height: 100%; position: absolute; }