/* -------------------------------------- utilities */
.clearFix:after{
	content: "";
	display: table;
	clear:both;
}
:root {
    --primary: #0f6073;
    --secondary: #10243c;
    --alt: #d39017;
    --background: #e4e1dc;
    /*
        #96c115 - green
        #c46b15 - dark orange
    */
}



/* ------------------------------------------------------------Typography */
html {
    font-family: 'Calibri', sans-serif;
    font-size: 125%;
    line-height: 1.5em;
    font-weight: normal;
}
  
body {
    color: var(--secondary);
    margin: 0;
}
  
h1, h2, h3, h4, h5, h6, ul, ol, li, p {
    margin: 0;
    padding: 0;
}
  
h1 {
    font-family: 'Calibri Light', sans-serif;
    font-weight: 900;
    font-size: 2em;
    line-height: 1.5;
    margin-bottom: 0.75em;
}
  
h2 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em;
}
  
p {
    margin-bottom: 1.5em;
}
  
p:last-child {
    margin-bottom: 0;
}

nav a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

nav ul, nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.banner h2 {
    text-transform: uppercase;
    font-family: "Calibri Light", sans-serif;
    letter-spacing: 0.1em;
}
a.btn, button.btn {
    text-transform: uppercase;
}

/* ------------------------------------------------------------ Layout */
header, article, footer  {
    padding: 0 1em;
}
  
@media (min-width: 80em) {
    header, article, footer {
        max-width: 64em;
        margin: 0 auto;
    }
}

.banner {
    /* height: 14em; */
    background: var(--primary);
    color: var(--background);
    margin-bottom: 1em;
}

header nav.primary {
    display:none;
}

/* ------------------------------------------------------------ General */
html {
    height: 100%;
    background: var(--background);
    /* background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center; */
}
a.btn, button.btn {
    text-decoration: none;
    border-radius: 2px;
    color: var(--secondary);
    background:var(--primary);
    padding: 0.5em 1em;
}
button.btn {
    border: none;
    font-size: 100%;
    font-family: 'Calibri Light', sans-serif;
}

a.btn:hover, button.btn:hover {
    background: var(--alt);
}
a, a:visited, nav a:visited {
    text-decoration: none;
    color: var(--primary);
}
a:hover, a:focus, nav a:hover, nav a:focus {
    color: var(--alt);
}
@media (min-width: 50em) {
    html {
        background-size: cover;
        /*background-position: 0 10em;*/
    }
}

/* ------------------------------------------------------------ Navigation */
.sidenav {
    height: 100%;
    position: absolute;
    top: 5em;
    bottom: 0;
    z-index: 10;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    background: var(--primary);
    width: 100%;
}
.sidenav .primary {
    display:block;
}
.sidenav {
    padding: 0;
}
.sidenav li a {
    padding: 0.5em 1em;
    color: var(--background);
    display: block;
    width: 100%;
    height: 100%;
}
.sidenav li a:hover, .sidenav li a:focus {
    color: var(--alt);
    background-color: var(--secondary);
}

.sidenav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: auto;
    margin: 0;
    margin-top: 0;
    padding: 0 1em 0 0;
    outline:none;
    z-index: 15;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    vertical-align: middle;
}
.bar {
    display: block;
    height: 0.25em;
    width: 2em;
    background-color: var(--primary);
    border-radius:1px;
    margin: 10px auto;

    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

.sidenav-toggle.active .top {
    -webkit-transform: translateY(14px) rotateZ(45deg);
    -moz-transform: translateY(14px) rotateZ(45deg);
    -ms-transform: translateY(14px) rotateZ(45deg);
    -o-transform: translateY(14px) rotateZ(45deg);
    transform: translateY(14px) rotateZ(45deg);
}
  
.sidenav-toggle.active .bottom {
    -webkit-transform: translateY(-13px) rotateZ(-45deg);
    -moz-transform: translateY(-13px) rotateZ(-45deg);
    -ms-transform: translateY(-13px) rotateZ(-45deg);
    -o-transform: translateY(-13px) rotateZ(-45deg);
    transform: translateY(-13px) rotateZ(-45deg);
}
  
.sidenav-toggle.active .middle {
    width: 0;
}

.content, .sidenav {
    -webkit-transition: transform .7s ease-in-out;
    -moz-transition: transform .7s ease-in-out;
    -ms-transition: transform .7s ease-in-out;
    -o-transition: transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
}

.menu-open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}


header nav {
    vertical-align: middle;
    float: right;
}
header nav.primary li {
    display: inline-block;
    padding: 1.75em 1em;
    text-transform: uppercase;
}

@media (min-width: 70em) {
    header nav.primary {
        display: inline-block;
    }
    .sidenav, .sidenav-toggle {
        display: none;
    }
}

/* ------------------------------------------------------------ Header */
header {
    height: 100px;
}
header h1 {
    display:inline-block;
    vertical-align: middle;
    margin: 0.4em 0;
}

/* ------------------------------------------------------------ Banner */
.banner {
    text-align: left;
}
.banner h2 {
    text-align: center;
}

.banner .banner__container {
    padding: 2em 0;
}
.banner .banner__text {
    padding: 0 1em;
}

.banner a.btn, button.btn {
    background: var(--secondary);
    color: var(--background);
}
.banner a.btn:hover, .banner button.btn:hover, 
.banner a.btn:focus, .banner button.btn:focus {
    background: var(--alt);
}

.banner--with-video .banner__container {
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
}
.banner--with-video video {
    width: 100% !important;
    max-width: 46em;
    height: auto !important;
    margin: 0 auto;
}
@media (min-width: 80em) {
    .banner {
        text-align: center;
    }
    .banner--with-video .banner__container {
        grid-template-columns: repeat(2, 1fr);
    }
    .banner--with-video h2 {
        grid-column-end: span 2;
    }
    .banner--with-video {
        padding: 0 1em;
    }
    .banner--with-video .banner__text {
        text-align: left;
    }
    .banner .banner__text {
        padding: 0;
    }
}



.banner.banner--video {
    margin-bottom: 1em;
    background: var(--alt);
}

.banner.banner--video video {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    max-width: 30em !important;
}
@media (min-width: 80em) {
    .banner.banner--video video {
        /* max-width: 64em !important; */
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------ Home Page */
.explore h3 {
    margin-bottom: 1em;
}
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.home-grid li {
    height: auto;
    margin: 0;
    padding: 0;
}

.home-grid a {
    display: block;
    height: 100%;
    width: 100%;
    color: var(--primary);
    text-decoration: none;
    overflow: hidden;
}

.home-grid .overlay {
    padding: 1em 0;
    box-sizing: border-box;
    height: auto;
}

.home-grid a:hover, .home-grid a:focus {
    color: var(--alt);
}

.home-grid .overlay h4, .home-grid .overlay p {
    padding: 0;
}

.home-grid .overlay h4 {
    margin-bottom: 1em;
}

.home-grid img {
    max-width: 100%;
    display: block;
}


@media screen and (min-width: 950px) {
    .home-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .home-grid li {
        height: 20vw;
    }

    .home-grid .overlay {
        padding: 1em;
        background: rgba(255, 255, 255, 0.75);
        height: 100%;
        transform:  translateY(-100%);
        transition: all .5s ease-in-out;
    }
    .home-grid a:hover, .home-grid a:focus {
        color: var(--primary);
    }
    .home-grid a:hover .overlay, .home-grid a:focus .overlay {
        transform: translateY(0%);
    }
    .home-grid img {
        display: none;
    }

    .home-grid .building {
        background-image: url(../images/exterior.png);
        background-size: cover;
        background-position: center;
    }
    
    .home-grid .interior {
        background-image: url(../images/interior.png);
        background-size: cover;
        background-position: center;
    }
    .home-grid .tech {
        background-image: url(../images/tech.jpg);
        background-size: cover;
        background-position: center;
    }
}

/* ------------------------------------------------------------ Building */
.building-gallery {
    display: grid;
    grid-template-columns: auto;
    justify-content: stretch;
    align-items: stretch;
    margin-bottom: 20px;
    gap: 1em;
}

.building-gallery figure {
    margin: 0;
    padding: 0;
    position: relative;
}

.building-gallery figcaption {
    padding: 0.5em;
    color: var(--background);
    background: var(--primary);
    width: calc(100% - 1em);
}

.building-gallery figure.full figcaption {
    background: var(--alt);
}

.building-gallery img {
    max-width: 100%;
    display: block;
}

@media screen and (min-width: 860px) {
    .building-gallery {
        grid-template-columns: repeat(6, 1fr);
    }
    .building-gallery figure.top-left {
        grid-column: 1 / span 2;
        grid-row-end: span 2;
    }
    .building-gallery figure.bottom-left {
        grid-column: 1 / span 2;
        grid-row-end: span 2;
    }
    .building-gallery figure.right {
        grid-column: 3 / span 4;
        grid-row-end: span 4;
    }
    .building-gallery figure.full {
        grid-column: 1 / span 6;
    }

    .building-gallery figure.small {
        background: var(--primary);
    }
    .building-gallery figure.small:hover, .building-gallery figure.small:focus {
        margin-bottom: 2.5em;
    }

    .building-gallery figure.bottom-left:nth-of-type(2) {
        grid-row-start: 3;
    }
    .building-gallery figure.bottom-left:nth-of-type(6) {
        grid-row-start: 8;
    }
    .building-gallery figure.right:nth-of-type(7) {
        grid-row-start: 6;
    }

    .building-gallery figure.small figcaption {
        /* position: absolute;
        height: 1.5em;
        max-height: 1.5em;
        bottom: -2.5em; */
        height: 1.5em;
        max-height: 1.5em;
        margin-bottom: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        -webkit-transition: max-height .7s ease;
        -moz-transition: max-height .7s ease;
        -ms-transition: max-height .7s ease;
        -o-transition: max-height .7s ease;
        transition: max-height .7s ease;
        border-top: 1px solid var(--primary);
    }
    .building-gallery figure.small:hover figcaption, .building-gallery figure.small:focus figcaption {
        height: auto;
        position: absolute;
        bottom: -2.5em;
        white-space: normal;
        max-height: calc(100% + 2.5em);
    }

    .building-gallery figure.full figcaption {
        position: absolute;
        top: 0;
    }
}



/* ------------------------------------------------------------ Interior */
.interior-gallery {
    display: grid;
    grid-template-columns: auto;
    justify-content: stretch;
    align-items: stretch;
    margin-bottom: 20px;
    gap: 0.5em;
}
@media screen and (min-width: 860px) {
    .interior-gallery {
        grid-template-columns: repeat(16, 1fr);
        gap: 1em;
    }
    .interior-gallery .img1 {
        grid-column: 1 / span 9;   
        height: auto;
        object-fit: cover;
    }
    .interior-gallery .img2 {
        grid-column: 10 / span 7;
    }
    .interior-gallery .img3 {
        grid-column: 1 / span 7;
    }
    .interior-gallery .img4 {
        grid-column: 8 / span 9;   
        height: auto;
        object-fit: cover;
    }
}

.interior-gallery img {
    max-width: 100%;
}


.interior-gallery figure {
    background: var(--alt);
    color: var(--background);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.interior-gallery figure.img3 {
    background: var(--primary);
}
.interior-gallery figcaption {
    padding: 0.5em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex: auto;
}


/* ------------------------------------------------------------ Floorplans */
.floorplans {
    display: grid;
    grid-template-columns: auto;
    justify-content: stretch;
    align-items: stretch;
    margin-bottom: 20px;
    gap: 0.5em;
}
@media screen and (min-width: 860px) {
    .floorplans {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
.floorplans figure, .floorplans figure {
    text-align: center;
    background: white;
    align-items: center;
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
}

.floorplans img {
    max-width: 100%;
    max-height: 100%;
}

.floorplans figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-family: 'Calibri Light', sans-serif;
    /* text-transform: uppercase; */
    color: var(--primary);
    font-size: 0.9em;
    background: white;
    padding: 0.5em;
    box-sizing: border-box;
}
.siteplan-details {
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-bottom: 1em;
}

.siteplan {
    max-width: 100%;
}
.siteplan-details li {
    background-color: var(--primary);
    color: var(--background);
    padding: 0.5em;
}
.siteplan-details li:nth-child(2n) {
    background-color: var(--alt)
}

@media screen and (min-width: 860px) {
    .siteplan-details {
        grid-template-columns: repeat(2, 1fr);
    }
    .siteplan-details li:nth-last-child(2), .siteplan-details li:last-child {
        grid-column-end: span 2;
    }
    .siteplan-details li:first-child {
        grid-row-end: span 3;
        background: initial;
        padding: 0;
    }

    .siteplan {
        height: 100%;
        width:100%;
        object-fit: cover;
    }
}
@media screen and (min-width: 1024px) {
    .siteplan-details li:nth-last-child(2) {
        grid-column-end: auto;
    }

    .siteplan-details li:first-child {
        grid-row-end: span 4;
    }
}

@media screen and (min-width: 1200px) {
    .siteplan-details li:last-child {
        grid-column-end: auto;
    }

    .siteplan-details li:first-child {
        grid-row-end: span 5;
    }
}

embed {
    width: 100%;
    height: 2850px;
    /* height: 628px; */
}

#map {
    height: 600px;
    margin-bottom: 1em;
}


.elevations {
    display: grid;
    gap: 1em;
    grid-template-columns: auto;
}
.elevations img {
    background: rgba(255, 255, 255, 0.75);
    max-width: 100%;
}

@media screen and (min-width: 860px) {
    .elevations {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ------------------------------------------------------------ Materials */
.materials-gallery {
    display: grid;
    gap: 1em;
    align-items: stretch;
}
.materials-gallery figure {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.materials-gallery figure figcaption {
    color: var(--primary);
    padding: 0.5em;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    top: -100%;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}
.materials-gallery figure:hover figcaption, .materials-gallery figure:focus figcaption {
    transform: translateY(100%);
}
.materials-gallery img {
    height: 100%;
    width: 100%;
}

@media screen and (min-width: 950px) {
    .materials-galley {
        grid-template-columns: repeat(16, 1fr);
    }
    /* Planed Walnut */
    .materials-gallery :nth-child(1) {
        grid-column: 1 / span 4;
        grid-row: 1 / span 4;
    }
    /* Canary Fabric */
    .materials-gallery :nth-child(2) {
        grid-column: 5 / span 2;
        grid-row: 1 / span 2;
    }
    /* Teal Carpet */
    .materials-gallery :nth-child(3) {
        grid-column: 7 / span 5;
        grid-row: 1 / span 5;
    }
    /* Feltworks MIST */
    .materials-gallery :nth-child(4) {
        grid-column: 12 / span 2;
        grid-row: 1 / span 2;
    }
    /* Terrazzo */
    .materials-gallery :nth-child(5) {
        grid-column: 14 / span 3;
        grid-row: 2 / span 4;
    }
    /* Red Fabric */
    .materials-gallery :nth-child(6) {
        grid-column: 5 / span 2;
        grid-row: 4 / span 2;
    }
    /* Walnut */
    .materials-gallery :nth-child(7) {
        grid-column: 1 / span 4;
        grid-row: 5 / span 6;
    }
    /* Concrete */
    .materials-gallery :nth-child(8) {
        /* grid-column: 5 / span 6;
        grid-row: 6 / span 5; */
        grid-column: 5 / span 8;
        grid-row: 9 / span 5;
    }
    /* Green Leather */
    .materials-gallery :nth-child(9) {
        grid-column: 12 / span 2;
        grid-row: 3 / span 2;
    }
    /* Green Carpet */
    .materials-gallery :nth-child(10) {
        grid-column: 11 / span 3;
        grid-row: 6 / span 3;
    }
    /* Cotton Fabric */
    .materials-gallery :nth-child(11) {
        grid-column: 1 / span 4;
        grid-row: 11 / span 3;
    }
    /* Buttercup Fabric */
    .materials-gallery :nth-child(12) {
        grid-column: 14 / span 3;
        grid-row: 6 / span 3;
    }
    /* White Oak */
    .materials-gallery :nth-child(13) {
        grid-column: 13 / span 4;
        grid-row: 11 / span 3;
    }
    /* Birch */
    .materials-gallery :nth-child(14) {
        grid-column: 8 / span 3;
        grid-row: 6 / span 3;
    }
    /* Blue Fabric */
    .materials-gallery :nth-child(15) {
        grid-column: 13 / span 2;
        grid-row: 9 / span 2;
    } 
    /* Feltworks Whisper Fabric */
    .materials-gallery :nth-child(16) {
        grid-column: 15 / span 2;
        grid-row: 9 / span 2;
    } 
    /* Black Fabric */
    .materials-gallery :nth-child(17) {
        grid-column: 5 / span 3;
        grid-row: 6 / span 3;
    } 
    .materials-gallery .small {
        font-size: 0.6em;
        line-height: 1em;
    }
}

/* ------------------------------------------------------------ Footer */
footer p {
    text-align: center;
}
footer {
    padding: 1.5em 0;
    margin-top: 1.5em;
}

footer nav {
    text-align: center;
}
footer nav ul {
    margin: 0 0 0.5em 0;
    padding: 0;
    list-style: none;
}
footer nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
footer nav ul li:not(:last-child) {
    margin-right: 1em;
}
footer nav ul li a, footer nav ul li a:visited {
    color: var(--primary);
}  
footer nav ul li a:hover, footer nav ul li a:focus {
    color: var(--alt);
}