/* ------------------------------------------------
BASE
------------------------------------------------ */

body, 
html {
	color: #222;
	font-family: "Univers Next W01";
	font-size: 1rem;
	font-weight: 300;
	height: 100%; }
	
/*
font-family: "Univers Next W01";
font-family: "Aktiv Grotesk W01";
font-family: "Neuzeit S W01";
font-family: "Whitney A", "Whitney B";
*/

/* ------------------------------------------------
PRELOADER
------------------------------------------------ */

#status {
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 0.75s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 0.75s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}

/* ------------------------------------------------
HEADER
------------------------------------------------ */
	
header {
	background: #fff;
    height: 4em;
	padding: 0 2em;
    position: fixed;
    top: 0;
    transition: top 0.3s ease-in-out;
    width: 100%;
	z-index: 9999; }
	
.logo-tag {
	position: absolute;
	line-height: 4em;
	margin: 0 auto;
	text-align: center;
	width: 50%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999; }

.logo {
	color: #222;
	line-height: 4em;
	position: relative;
	z-index: 9999; }

/* ---------------------------------------------
MENU NAVICON
----------------------------------------------*/ 
	
#right-menu {
 	float: right;
	position: relative;
	right: 0;
	top: 0;
	line-height: 4em;
	z-index: 9999; }
	
.menu {
	color: #222;
	float: left; }
	
.c-hamburger {
    float: left;
    position: relative;
	right: 0;
	top: 12px;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.3s; }

.c-hamburger:focus {
    outline: none; }

.c-hamburger span {
	border-radius: 0;
    display: block;
    position: absolute;
    top: 20px;
    left: 10px;
    right: 0;
    height: 1px;
    background: #2b3139; }

.c-hamburger span::before,
.c-hamburger span::after {
	position: absolute;
    display: block;
	border-radius: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #2b3139;
    content: ""; }

/* for hero banners */
#project-page .c-hamburger span::before,
#project-page .c-hamburger span::after,
#project-page .c-hamburger span {
	background-color: #fff; }

.c-hamburger span::before {
	top: -6px; }

.c-hamburger span::after {
	bottom: -6px; }

.c-hamburger--htx {
	background-color: transparent; }

.c-hamburger--htx span {
	transition: background 0s 0.3s; }

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s; }

.c-hamburger--htx span::before {
    transition-property: top, transform; }

.c-hamburger--htx span::after {
    transition-property: bottom, transform; }

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
	background-color: none; }

.c-hamburger--htx.is-active span {
	background: none; }

#project-page .c-hamburger--htx.is-active span {
	background: none; }

.c-hamburger--htx.is-active span::before {
    background: #2b3139;
    top: 0;
    transform: rotate(45deg); }

.c-hamburger--htx.is-active span::after {
	background: #2b3139;
	bottom: 0;
	transform: rotate(-45deg); }

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
	transition-delay: 0s, 0.3s; }

/* ------------------------------------------------
SIDR NAV
------------------------------------------------ */

.nav-wrap {
	width: 100%;
	height: 100%;
	display: table; }
	
ul#nav {		
	background: #fff;
	display: table-cell;
	vertical-align: middle;
    list-style: outside none none;
    margin: auto;
	padding: 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
	z-index: 9000; }
	
ul#nav li {
    display: block;
	line-height: 5em;
    margin: 0;
	padding: 0; }
	
ul#nav li a {
	color: #2b3139;
	display: inline-block;
    font-size: 4em;
    font-weight: 400;
	padding: 0;
	margin: 0;
	outline: none;
    position: relative;
    text-align: center; }
	
ul#nav li a::after {
	border-bottom: 0.25em solid rgba(34, 34, 34, 0.8);
    border-color: rgba(34, 34, 34, 0.8);
    content: "";
    left: 0;;
	top: 46%;
    position: absolute;
	margin: 0 auto;
    transition: all 0.3s;
    width: 100%; }
	
ul#nav li a:hover::after {
    left: 100%;
    width: 0; }
	
ul#nav li a:hover { 
	color: #222;}
	
ul#nav li a.icon {
	color: #c9c9c9;
	font-size: 3em;
	margin-top: 2em;
	padding: 0 0.5em;
	transition: all 0.3s;
	position: relative; }
	
ul#nav li a.icon:hover {
	color: #222; }
	
ul#nav li a.icon::after {
	display: none;
	visibility: hidden; }
	
/*ul#nav li a.icon.dribbble:hover {
	color: #EC6197; }
	
ul#nav li a.icon.linkedin:hover {
	color: #1384C6; }
	
ul#nav li a.icon.twitter:hover {
	color: #78CAEE; }
	
ul#nav li a.icon.instagram:hover {
	color: #537ABB; }*/

/* ------------------------------------------------
TYPOGRAPHY
------------------------------------------------ */


h1,
h2,
h3,
h4,
h5,
h6 {
	color: #222; }

h1 {
	font-size: 3.5em;
	font-weight: 700;
	line-height: 1.1;
	position: relative; }

h2 {
	font-size: 1.5em;
	font-weight: 300;
	line-height: 1.4;
	margin: auto;
	max-width: 70%; }
	
h3 {
	font-size: 1.25em;
	font-weight: 300;
	letter-spacing: -0.03em;
	margin: auto; }
	
h4 {
	font-size: 2.5em;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: auto;
	padding: 0.5em 0; }
	
h5 {
	font-size: 1.75em;
	font-weight: 300;
	line-height: 1.4;
	margin: 1em 0; }

p {
	font-size: 1.75em;
	font-weight: 300;
	margin: 1em auto; }
	
p.larger {
	font-weight: 400;
	font-size: 2em; }

/* ------------------------------------------------
BUTTONS
------------------------------------------------ */

a {
	transition: all 0.3s;
	text-decoration: none; }

a:hover, 
a:focus {
	color: inherit;
	text-decoration: none; }
	
a.primary-link {
	color: inherit;
	position: relative; }
	
a.primary-link::after {
	border-bottom: 8px solid rgba(124, 202, 188, 0.4);
    border-color: rgba(124, 202, 188, 0.7);
    content: "";
    left: 0;
	right: 5px;
	top: 46%;
    position: absolute;
	margin: 0 auto;
    transition: all 0.3s;
    width: 100%; }
	
a.primary-link:hover::after {
    left: 100%;
    width: 0; }
	
.btn {
	border: none;
	border-radius: 0;
	font-size: 1em;
	color: inherit;
	background: transparent;
	cursor: pointer;
	padding: 0.875em 2.5em;
	display: inline-block;
	margin: 2em 0;
	font-weight: 300;
	outline: none;
	position: relative;
	transition: all 0.3s; }

.btn:after {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; }

.btn-1 {
	border: 1px solid #222;
	color: #222; }

.btn-1c:after {
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #222; }

.btn-1c:hover,
.btn-1c:active {
	color: #fff; }

.btn-1c:hover:after,
.btn-1c:active:after {
	height: 100%; }

/* ------------------------------------------------
PROJECT GRID LISTING
------------------------------------------------ */

.grid {
	display: block;
	position: relative;
	top: 4em; }
	
.promo {
	float: left;
	width: 100%;
	margin-top: 8em; }
	
.project {
    float: left;
	width: 25%;
	overflow: hidden;
	position: relative; }
	
.project a {
	outline: none; }
	
.grid-sizer,
.project { width: 25%; }
	
.project--width-1 {
	width: 25%; }
	
.project--width-2 {
	width: 50%; }

.project--width-3 {
	width: 75%; }
	
.project--width-4 {
	width: 100%; }
	
.project--height-2 {
	height: 480px; }
	
.valign {
	display: table;
	height: 100%;
	width: 100%; }

.project img {
    display: block;
    width: 100%;
	border: 0 none;
	transition: all 1.25s;
	z-index: 200; }
	
.project:hover img {
	transform: scale(1.1); }
	
.vert-center {
    display: table-cell;
    vertical-align: middle;
	width: 100%;
	text-align: center; }
	
.overlay {
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
	width: 100%;
    left: 0;
	top: 0;
	bottom: 0;
    opacity: 0;
    position: absolute;
    transition-delay: 0.2s;
    transition: all 0.3s;
	z-index: 250; }

.project:hover .overlay {
	background: #181818;
	opacity: 1; }
	
.project-title {
    color: #ddd;
	font-size: 1.125em;
    font-weight: 300;
	letter-spacing: -0.015em;
	padding-bottom: 0.5em;
    margin: 0;
    opacity: 0;
    position: relative;
	transform: translateY(-1em);
    transition-delay: 0.1s;
    transition: all 0.3s; }
	
.project p {
	color: #848484;
	font-size: 0.875em;
	font-weight: 300;
	margin: 0.5em auto; }
		
.project .project-info {
    backface-visibility: hidden;
    line-height: 1;
    margin: 0 auto;
	opacity: 0;
	transition-delay: 0.5s;
    transition: all 0.3s;
	visibility: hidden; }
	
.project:hover .overlay .project-title {
    transform: translateY(0);
	opacity: 1; }
	
.project:hover .overlay .project-info {
    transform: translateY(-0.5em);
	opacity: 1;
	visibility: visible; }
	
/* ------------------------------------------------
HERO BANNER
------------------------------------------------ */	
	
.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
    opacity: 1;
	overflow: hidden;
	top: 0; }
	
.hero-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2500;
    color: #fff;
	overflow: hidden;
    text-align: center;
	width: 100%;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0); }
			
.hero-banner .container {
	max-width: 1000px; }
	
.hero-caption hgroup {
	color: #fff;
	display: block;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	z-index: 500; }
	
.hero-caption hgroup h1 {
    color: #fff;
    margin: 0.5em auto;
    padding: 0;
	max-width: 70%;
	z-index: 500; }
	
.hero-caption hgroup h1::after {
	display: none; }
	
.hero-banner {
	overflow: hidden; }
	
.hero-profile {
	/*background: url("../img/biltmore.jpg") no-repeat fixed 50% 0;*/
	background: #6ba1c4;
	background-size: cover;
    height: 60vh;
    margin: 0 auto;
    padding: 5em 0;
    position: relative;
    width: 100%;
    z-index: 1; }
	

/* ------------------------------------------------
WRAPPERS
------------------------------------------------ */

#main-wrapper {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0 3em;
	position: relative; }
	
.project-toggle {
	dispaly: block;
	width: 100%;
	margin: 30px auto;
	padding: 0;
	position: relative;
	text-align: center;
	transition: all 0.3s; }
	
.project-toggle-next, .project-toggle-prev {
	 /*background: rgba(60,70,88,0.2);*/
	 float: left;
	 min-height: 130px;
	 padding: 40px;
	 width: 98%;
	 transition: all 0.3s; }
	 
.project-toggle cite {
	color: #939DAC;
	display: block;
	font-size: 12px;
	font-style: normal;
	letter-spacing: 3px;
	position: relative;
	text-transform: uppercase;
	transition: all 0.3s; }
	
.project-toggle a {
	display: block;
	position: relative; }

.project-toggle h3 {
	color: #939DAC; 
	font-size: 24px;
	font-weight: 400;
	margin-top: 10px !important;
	transition: all 0.3s; }
	
.project-toggle-next:hover, 
.project-toggle-prev:hover { 
	background: none;
	transition: all 0.25s; }
	
.project-toggle-next:hover a h3, 
.project-toggle-prev:hover a h3 {
	color: #3D4956;
	transition: all 0.25s;
	/*transform: translate(0px,-10px);*/ }
	
.project-toggle-next:hover cite , 
.project-toggle-prev:hover cite {
	color: #3D4956; }
	
.prev-arw, .next-arw {
	background: #3D4956;
	display: block;
	position: relative;
	height: 2px;
	width: 50px;
	margin: 40px auto 0 auto;
	text-align: center;
	transition: all 0.3s; }
	
.prev-arw:before {
	background: #3D4956;
	content: '';
	float: left;
	height: 2px;
	width: 20px;
	position: absolute;
	top: -7px;
	left: -3px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg); }
	
.prev-arw:after {
	background: #3D4956;
	content: '';
	float: left;
	height: 2px;
	width: 20px;
	position: absolute;
	top: 7px;
	left: -3px;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg); }
	
.next-arw:before {
	background: #3D4956;
	content: '';
	float: left;
	height: 2px;
	width: 20px;
	position: absolute;
	top: -7px;
	right: -3px;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg); }
	
.next-arw:after {
	background: #3D4956;
	content: '';
	float: left;
	height: 2px;
	width: 20px;
	position: absolute;
	top: 7px;
	right: -3px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg); }
	
.img-listing { padding: 40px 0; margin: 0 auto; }


/* ------------------------------------------------
PROJECT PAGE STYLING
------------------------------------------------ */

.project-image-snowbird {
    margin-bottom: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center; }

.project-image-snowbird img { 
	min-width: 40%;
	max-width: 100%;
	text-align: center; }


/* ------------------------------------------------
FOOTER
------------------------------------------------ */

footer {
	display: block;
	margin: 0;
	padding: 3em 2em 5em; }
	
footer p { 
	font-size: 1em; 
	margin: 0; }

.footer-icon {
	color: #222;
	display: inline-block;
	margin: 0 0.5em;
	font-size: 1.25em;
	position: relative;
	text-align: center;
	transition: all 0.25s;
	top: 0; }

.footer-icon:hover { 
	opacity: 1;
	top: -0.35em; }
	
.footer-icon.dribbble:hover {
	color: #EC6197; }
	
.footer-icon.linkedin:hover {
	color: #1384C6; }
	
.footer-icon.twitter:hover {
	color: #78CAEE; }
	
.footer-icon.instagram:hover {
	color: #537ABB; }
	
.footer-icon:last-child {
	padding-right: 0;
	margin-right: 0; }
	
@media only screen and (min-width : 320px) and (max-width : 768px) {
	
header {
	background: #fff;
	border-bottom: 1px solid #ddd;
	height: 5em; }
	
footer {
	display: block;
	margin: 2em 0 0;
	height: 100px; }
		
.footer-left, .footer-right { 
	float: none;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0; }
		
footer p { 
	padding-top: 0; }
	
.footer-icons { 
	padding-top: 0; }
	
.footer-icon { 
	margin: 0.75em; }
	
#intro h1 {
	font-size: 2em;
	max-width: 90%; }
	
#intro h2 {
	max-width: 90%; }
	
h2 {
	max-width: 80%; }
	
h3 {
	max-width: 100%; }
	
#intro {
	padding-top: 8em; }
	
#main-wrapper {
	width: 100%;
	padding: 0 2.4em; }
	
}


@media screen and (min-width: 800px) and (max-width: 1390px){
#main-wrapper { width: 82%; }
.project--width-1 { width: 50%; }
.project--width-2 { width: 100%; }
.project--width-3 { width: 50%; }
}

@media screen and (min-width: 1400px) and (max-width: 1600px){
#intro h1 { max-width: 90%; }
#main-wrapper { width: 85%; }
.project--width-1 { width: 50%; }
.project--width-2 { width: 50%; }
.project:nth-child(5) { width: 100%; max-height: 70vh; }
.project:last-child{ width: 100%; max-height: 70vh; }
}