* { box-sizing: border-box; }

/* Grow */
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
color: #111;
}

#load {
position: fixed;
width: 100vw;
height: 100vh;
top:0;
left:0;
right:0;
bottom:0;
background: #fff;
z-index: 90;
}

a,
a:hover,
a:active,
a:visited {
color: #111;
text-decoration: none;
}

.ghost {
width: 100%;
height: 100%;
display: table;
}

.valign {
display: table-cell;
vertical-align: middle;
}

.clearfix {
position: relative;
width: 100%;
height: 160px;
}

.clearboth {
clear: both;
}

#header {
width: 80vw;
height: 175px;
position: fixed;
top:0;
left:0;
right:0;
z-index: 100;
margin: 0 auto;
z-index: 300;
}

#logo {
fill: #111;
position: absolute;
width: 204px;
top: 60px;
left: -12px;
padding: 0;
transition: 150ms ease-in-out;
transition-delay: 600ms;
}

/*
#info,
#hamburger {
fill: #111;
width: 31px;
position: absolute;
top: 72px;
right: -31px;	
transition: 150ms ease-in-out;
}

#hamburger {
right: -75px;	
}

#hamburger .h1 {
opacity: 1;	
transition: 150ms ease-in-out;
}

#hamburger.close .h1 {
opacity: 0;	
transition: 150ms ease-in-out;
}



#info polygon {
opacity: 0;
transition: 150ms ease-in-out;
}

#info g#i {
opacity: 1;
transition: 150ms ease-in-out;	
transition-delay: 150ms;
}

#info.close polygon {
opacity: 1;
transition: 150ms ease-in-out;
transition-delay: 150ms;
}

#info.close g#i {
opacity: 0;
transition: 150ms ease-in-out;	
}
*/

#logo.dark,
#info.dark {
/*
fill: #fff;
transition: 150ms ease-in-out;
*/
}


#info:hover,
#hamburger:hover {
cursor: pointer;
border-bottom: 2px solid #111;
}

#info.close,
#hamburger.close {
border-bottom: 2px solid #111;	
}


#about,
#nav {
position: fixed;
width: 100vw;
height: 100vh;
overflow-y:scroll;
top:-100vh;
left:0;
right:0;
bottom:0;
z-index: 200;
transition: 300ms ease-in-out;
transition-delay: 600ms;
}

#nav {
width: auto;
max-width: 50vw;
height: auto;
min-height: 50vh;
top: 0;
left: auto;
bottom: auto;
right: -50vw;
padding: 170px 75px 75px 75px;
border-bottom-left-radius: 25px;
}

#about.open,
#nav.open {
top:0;
transition: 300ms ease-in-out;
}

#nav.open {
right: 0;
transition: 500ms ease-in-out;
}

.grid {
height: 100%;
width: 80vw;
margin: 0 auto;
padding: 0;
}

.grid-sizer,
.grid-item,
.grid-col { 
width: 33.33%;
}

.grid-col-2 {
width: 66.66%;
}

.grid-item,
.grid-col,
.grid-col-2 {
float: left;
margin:0;
padding: 15px;
}

#about .grid-col {
opacity: 0;
transition: 300ms ease-in-out;
}

#about.open .grid-col {
opacity: 1;
transition: 300ms ease-in-out;
transition-delay: 600ms;	
}

.project-background {
position: absolute;
top:15px; left:15px; right:15px; bottom:15px;
background: #eee;
opacity: 0;
z-index: -1;
transition: 600ms ease-in-out;

}

.container {
display: table;
width: 100%;
height:100%;
}

.project-title {
opacity: 0;
display: table-cell;
vertical-align: middle;	
transition: 300ms ease-in-out;
}

.image {
width: 100%;
opacity: 0;
transform: translateY(50vh);
transition: 150ms ease-in-out;
}

.preLoad {
opacity: 1;
transform: translateY(0);
transition: 150ms ease-in-out;
}

.image.visible,
.preLoad.visible {
opacity: 1;
transform: translateY(0);
transition: 1000ms ease-in-out;
}



.project-img {
width: 100%;
margin: 0 0 15px;
}

.grid-item:hover .image {
opacity: 0;
transition: 150ms ease-in-out;
transition-delay: 50ms;
}

.grid-item:hover .project-background {
opacity: 1;
transition: 150ms ease-in-out;
}
.grid-item:hover .project-title {
opacity: 1;
transition: 300ms ease-in-out;
transition-delay: 300ms;
}

#pin {
margin:0;
padding:0;
opacity: 0;
transition: opacity 300ms ease-in-out;
}

#pin.visible {
opacity: 1;
transition: opacity 300ms ease-in-out;
}

.project-description {
width: 75%;
}

h1, h2, h3, h4, h5, h6, p, ul {
font-family: proxima-nova, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.33;
color: #111;
margin:0;
padding:0;
}


h1,
h2,
h3,
h4,
h5,
h6,
#nav ul,
ul#navigation {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 30px 0;
}

#nav ul,
ul#navigation {
font-size: 15px;
line-height: 1.33;
letter-spacing: 0.5px;
text-transform: uppercase;
text-align: right;
}

ul#navigation {
margin: 80px 0 0;	
}


h1,
h2 {
letter-spacing: 0;
text-transform: none;
font-weight: 400;
margin:0;
}





h2 {
padding:0 30px 10px;
}

h3 {
font-size: 15px;
margin:0;	
padding:0 30px;
}

h3.single {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #a7a9ac;
padding:10px 0 0 0;
}

h5 {
font-size: 14px;
margin: 15px 0;	
}

h6 {
margin:0;	
}

p {
line-height: 1.5;
margin: 24px 0 0 0;
}

.testimonial p {
margin: 0;
}

#about h1,
#about h2, 
#about h3, 
#about h4, 
#about h5, 
#about h6, 
#about p, 
#about ul {
/* color: #fff; */
}

#about a,
#about a:visited {
border-bottom: 1px solid #000;
padding: 0 0 1px;
}

#about a:hover,
#about a:active {	
}

#about a.none,
#about a.none:visited {
border-bottom: 0 none;
padding: 0;
}

.project-title h2,
.project-title h3 {
text-align: center;
}

ul {
margin: 30px 0;
}

ul li {
width: 30px;
list-style: none;
display: inline-block;	
margin: 0 15px 0 0;
padding:0;
}

#nav ul {
margin: 0;
text-align: right;
}

#nav ul li {
width: auto;
list-style: none;
display: block;	
margin: 0;
padding:0;
}

ul#navigation {
position: absolute;
right: -28px;
top: 79px;		
margin: 0;
padding:0;
}

ul#navigation li {
display: inline;
margin: 0 0 0 30px;	
}



.slick-dots {
bottom: -15px;
}
.slick-dots li {
float: left;
width: 10px;
height: 10px;
margin: 0 5px 0 0;
}

.slick-dots li.slick-active button:before {
opacity: 1;
color: #000;
}

.slick-dots li button:before {
opacity: 0.5;
color: #000;
}

.slick-dots li button:before {
text-align: left;	
}


@media screen and (max-width: 74.9375em) {

.grid-sizer,
.grid-item,
.grid-col,
.grid-col-2 { 
width: 50%;
}

.image.visible,
.preLoad.visible {
transition: 500ms ease-in-out;
}

.project-background {
opacity: 1;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: none;
z-index: -1;
background: transparent!important;
}

.project-title {
opacity: 1;
display: block;
margin: 10px 0 0;
}

.project-title h2,
.project-title h3 {
padding-left: 0;
text-align: left;	
}

.grid-item:hover .image {
opacity: 1;
transition-delay: 0;
}

.grid-item:hover .project-title {
opacity: 1;
transition-delay: 0;
}




h4 {
margin: 10px 0 15px;
}

ul {
margin: 30px 0 0 0;
}


h6.tag-title {
width: 50%;
position: absolute;
top:0;
left:0;
right:0;
text-align: center;
}


} @media screen and (max-width: 39.9375em) {

#header {
background: rgb(255, 255, 255, 0.5);
transition: 0ms ease-in-out;	
transition-delay: 1000ms;
}

#header.transparent {
background: rgb(255, 255, 255, 0);	
transition: 0ms ease-in-out;	
transition-delay: 0ms;
}

#nav {
max-width: 90vw;
width: auto;
height: auto;
right: -90vw;
padding-right: 30px;
padding-left: 60px;
}



svg#logo {
width: 175px;
}


ul#navigation {
font-size: 13px;
top: 76px;		
}

ul#navigation li {
margin: 0 10px 0 0;	
}

.grid {
padding: 0;
}

.grid-sizer,
.grid-item,
.grid-col,
.grid-col-2 { 
width: 100%;
}

.grid-item,
.grid-col,
.grid-col-2 {
padding: 2.5vw 15px;	
}

.project-description {
width: 100%;
}

.project-background {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: none;
z-index: -1;
}


#pin {
margin:0 0 15px;
padding:0;
}



} /* LEAVE */