/* Anti-FOUC. These should come first for best effect. */
.no-js {  visibility: hidden;  opacity: 0; }
.js {  visibility: visible;  opacity: 1; }


/* General element-level styles. */
html { height: 100%; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body { height: 100%; text-align: center; font-family: 'Open Sans', sans-serif; background-color: #000; color: #fff; margin: 0; font-size: 24px; display: flex; flex-direction: column; }
sup { font-size: 0.7em; opacity: 0.8; }
table, th, td { border: none; }
table { border-collapse: collapse; width: 100%; margin: 1em 0; }
th { font-weight: normal; border-bottom: 2px solid #aaa; }
th, td { padding: .5em .5em; }
p { margin: 0; }

/* Forms */
form { width: auto; display: inline-block; text-align: left; }
label {font-size: .9em; }
dd { margin: 0 0 0.5em 1.5em; }
input { padding: 0.5em; margin: 0.5em; }
textarea { width: 95%; }
input[type=button], input[type=submit] { cursor: pointer; color: inherit; font-weight: bold; color: #fff; }
input[type=button], input[type=submit] { display: inline-block; font-family: "Muli","Century Gothic",sans-serif; letter-spacing: 0.1em; text-align: center; padding: 0.5em 0.5em; margin: 0.1em 0.4em; background-color: #ffa900; border: none; line-height: 1; }
input[type=button]:hover, input[type=submit]:hover { background-color: #fff; color: #fff; }

a:link, a:visited { color: inherit; font-weight: bold; text-decoration: none; }
a:hover, a:active { color: #fff; }

span.dim { color: #aaa; font-weight: normal; font-size: 0.9em; }
div.message { background-color: #101010; color: #fff; font-weight: bold; padding: 1em; margin-bottom: 1em; }

/* Nav */
body > header > nav { font-size: .75em; padding: 2em 0; background-color: #000; display: block; }
body > header > nav .toggle { display: none; }
body > header > nav .header-logo { padding: 0 1.5em; display: flex; flex-direction: column; justify-content: space-around; }
body > header > nav .header-logo img { width: 20em; max-width: 90%; margin: auto; }
body > header > nav ul { list-style-type: none; padding: 0 0; vertical-align: middle; text-align: center; margin: 1.35em auto .5em; }
body > header > nav.expanded ul { text-align: center; }
body > header > nav li { display: inline-block; }
body > header > nav ul a { display: inline-block; font-family: "Muli","Century Gothic",sans-serif; letter-spacing: 0.05em; padding: 0 0.25em; margin: 0 1em; line-height: 1; }
body > header > nav ul a:link, body > header > nav ul a:visited { text-decoration: none; border: 1px solid transparent; font-weight: normal; text-transform: uppercase; }
body > header > nav ul a.active:hover, body > header > nav ul a.active:active { color: #fff; }
body > header > nav ul a.active { font-weight: bold; text-decoration: underline; }
body > header > nav > .toggle { display: none; }

/* Body */
main { flex-grow: 1; background-color: #000; }
.page-vr-tour main { display: flex; flex-direction: column; }
.page-details main h1:nth-of-type(even), .page-details main ul:nth-of-type(even) { text-align: right; }
.page-details main h1:nth-of-type(odd), .page-details main ul:nth-of-type(odd) { text-align: left; }
.page-details main > * { max-width: 90%; margin: auto; }
main p { margin: 1rem 2rem 3rem; line-height: 1.5; }
main h1, main h2, main h3, main h4, main h5, main h6 { margin: .5rem 1rem; font-weight: normal; text-transform: uppercase;}
main p:first-child { margin-top: 0; }
main img { max-width: 90%; }
main img.inline { max-width: 50%; max-height: 20em; float: right; margin: 0 1.5em 1em; }
main ul { list-style-type: none; padding: 0; margin: .5rem 1rem; }
main ul li { margin: 1em 0; }
main iframe { width: 100%; height: 100%; border: 0; }

/* Footer */
footer { flex-shrink: 0; bottom: 0; width: 100%; margin: 0; padding: 1em 0; color: #fff; background: #000; font-size: .5em; }
footer p { display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;}
footer p, footer p.first-child { margin-top: 3em }
footer img { flex: 0 0 auto; height: 5rem; margin: 0.25rem; vertical-align: middle; }
footer img.small { height: 2.5rem; max-width: 80%; }
footer img.small + img.small { margin-left: 0; }


/* Homepage */
.home-hero { max-width: 100%; width: 100%; flex: 1 1 20em; }
.home-hero .swiper-slide { max-width: 100%; width: auto; height: auto; margin: 0 1em;  }
.home-hero .swiper-slide:not(.swiper-slide-active) { opacity: 0.5; transition: opacity 0.3s ease;  }
.home-hero img { max-width: 100%; }
.home-logo { z-index: 10; width: 30%; max-width: 15em; margin: 1.5em 0 1em; }
.home-cta { z-index: 100; margin-bottom: 2em; font-size: 1.5em; display: block; }
.home-logo-container { z-index: 10; min-height: 10em; position: relative; }

/*Slideshow */
.banner-hero { max-width: 100%; width: 100%; flex: 0 1 10em; }
.banner-hero .swiper-slide { max-width: 100%; width: auto; margin: 0 1em;  }
.banner-hero .swiper-slide:not(.swiper-slide-active) { opacity: 0.5; transition: opacity 0.3s ease;  }
.banner-hero img { max-width: 100%; max-height: 10em; }

/* File type indicators */
a[href$='.pdf']::after { padding-left: .5em; content: '\f1c1'; font-family: 'FontAwesome' }

/* Utility Classes */
.text-left { text-align: left; }
.text-center { text-align: center; }
.centered-60 { width: 60%; margin: 1em auto; }
.align-center { margin-left: auto; margin-right: auto; }
ul.no-bullets { list-style: none; }

#page-title { font-size: 1.1em; font-weight: bold; }
#page-title a { text-decoration: none; }

/* Contact */
img#realtor { height: 150px; }
a:hover img#realtor { height: 150px; box-shadow: 0 0 2px #38475b; }
div.contact { width: 100%; text-align: center; margin: 1.25em auto; }
div.contact div { display: inline-block; vertical-align: top; padding: 0.5%; box-sizing: border-box; }
div.contact div:first-child { width: 38%; }
div.contact div:last-child { width: 58%; text-align: left; }

/* Neighborhood */
#map { width: 100%; height: 92em; margin: 1.5em auto 0; text-align: left; }
#map .mapboxgl-popup-content { font-size: 3em; line-height: .8; color: #fff; background: #000; border-radius: 0; padding: .5em; }
#map .mapboxgl-popup-tip { border-top-color: #000; }
#map .mapboxgl-marker { color: #000; }

/* Photos */
a.photo img { border: 1px solid rgba(200,200,200,.55); }
a.photo.hero:hover, a.photo.hero:active { color: inherit; text-shadow: none; }
a.photo.hero { position: relative; width: 100%; margin: 0 auto; display: block; }
a.photo.hero h1 { position: absolute; top: 24px; left; 0; width: 100%; margin: 0; }
a.photo.hero img { width: 100%; min-height: 8em; object-fit: cover; }

/* Responsive - shrinking height-wise */
@media screen and (max-height: 100em) {
    .home-hero img { max-height: 60em; }
    body > header > nav { padding: 1.5em 0; }
}
@media screen and (max-height: 80em) {
    .home-hero img { max-height: 40em; }
    body > header > nav { padding: 1em 0; }
}
@media screen and (max-height: 60em) {
    .home-hero img { max-height: 30em; }
    body > header > nav { padding: 0.75em 0; }
}
@media screen and (max-height: 40em) {
    .home-hero img { max-height: 20em; }
    body > header > nav { padding: 0.5em 0; }
}

/* Responsive - shrinking width-wise */
@media screen and (max-width: 1200px) {
    body > header > nav ul a { margin: 0 .75em; }
    .home-logo-container { min-height: 8em; }
}
@media screen and (max-width: 1020px) {
    .home-logo-container { min-height: 8em; }
}
@media screen and (max-width: 920px) {
    body > header > nav ul a { margin: 0 .65em; }
    .home-logo-container { min-height: 7em; }
    footer img { height: 2.5rem; }
    footer img.small { height: 1.25rem; }
}
@media screen and (max-width: 820px) {
    body > header > nav ul a { margin: 0 .5em; }
    .home-logo-container { min-height: 6em; }
    .home-cta { font-size: 1.25em; }
}
@media screen and (max-width: 420px) {
    .home-logo-container { min-height: 4em; }
    table { font-size: .8em; }
}

/* Mobile (Responsive) Nav */
@media screen and (max-width: 600px) {
    body > header > nav li { display: block; }
    body > header > nav { padding: .66em 0; }
    body > header > nav ul:not(:last-child) { margin-bottom: .5em; }
    body > header > nav li:not(:last-child) { margin-bottom: .25em; }
    body > header > nav.expanded ul, body > header > nav.expanded header { display: block; }
    body > header > nav.collapsed ul, body > header > nav.collapsed header { display: none; }

    /* Hamburger menu (based on jonsuh/hamburgers) */
    body > header > nav > .toggle {
        padding: 15px 5px;
        display: inline-block;
        cursor: pointer;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0 1.5em;
        overflow: visible;
    }
    body > header > nav .toggle:hover {
        opacity: 0.7;
    }
    body > header > nav .toggle-box {
        width: 30px;
        height: 10px;
        display: inline-block;
        position: relative;
    }
    body > header > nav .toggle-inner,
    body > header > nav .toggle-inner::before,
    body > header > nav .toggle-inner::after {
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
        display: block;
        width: 30px;
        height: 3px;
        background-color: #fff;
        border-radius: 0px;
        position: absolute;
    }
    body > header > nav .toggle-inner {
        top: 50%;
        margin-top: -2px;
        transition-duration: 0.3s;
    }
    body > header > nav .toggle-inner::before,
    body > header > nav .toggle-inner::after {
        transition-property: top, opacity, bottom, transform;
        content: "";
        display: block;
    }
    body > header > nav .toggle-inner::before {
        top: -8px;
    }
    body > header > nav .toggle-inner::after {
        bottom: -8px;
    }
    body > header > nav.expanded .toggle-inner {
        transform: rotate(315deg);
    }
    body > header > nav.expanded .toggle-inner::before {
        opacity: 0;
    }
    body > header > nav.expanded .toggle-inner::after {
        bottom: 0;
        transform: rotate(90deg);
    }

    /* Other mobile */
    main { font-size: .85em; }
    main img.inline { float: none; width: 100%; max-width: none; margin: 1em 0; }
    th, td { padding: .25em .15em; }
}