/*
 * Dark blue: #303F9F
 * Light blue: #3F51B5
 * Accent blue: #448AFF
 * 
 * Logo blue: #3A87B1
 * Dark blue, closer to logo: #00659c
 * 
 * Dark grey: #212121;
 * Med grey: #757575;
 * Light grey: #BDBDBD;
 * 
 * Blue overlay: #303F9F
 * Green overlay: #388E3C
 * 
    font-family: 'Quattrocento', serif;
    font-family: 'Quattrocento Sans', sans-serif;
 * 
 * 
 * */
* {
    margin: 0px; 
    padding: 0px;
    transition: 0.2s;
}
html, body {height: 100%;}
body {
    /*font-family: 'Open Sans', sans-serif;*/
    font-family: 'Lato', sans-serif;
    font-size: medium;
    color: #212121;
    background: #f7f7f7;
}
a {
    color: #808080;
    /*text-decoration: none;*/
}
a:hover {color: #00659c;}
a[target="_blank"]:after {
    content: url(images/external-link.png);
    padding: 0 0 3px 7px;
}
a.button[target="_blank"]:after, a.icon[target="_blank"]:after {
    content: '';
}
td {padding: 5px;}
h1, h2, h3, h4 {
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Lora', serif;
    font-weight: normal;
}
h1 {
    /*padding: 0px 0px 30px;*/
    padding: 0px;
    font-size: 220%;
    color: #fff;
}
h2 {
    padding: 10px 0px;
    font-size: 175%;
    /*color: #303F9F;*/
    color: #00659c;
}
h3 {
    font-size: 150%;
    padding: 10px 0px 20px;
}
h4 {
    padding: 20px 0px;
}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
hr {
    clear: both;
    margin: 60px auto;
    width: 80%;
    height: 0px;
    border: none;
    border-bottom: 1px solid #BDBDBD;
}
iframe {
    width: 100%;
    height: 100%;
}
img, video {
    border: none;
    max-width: 100%;
}
img.float {
    max-width: 40%;
    margin: 10px;
    /*border-top: 5px solid #303F9F;*/
    /*border-bottom: 5px solid #303F9F;*/
}
li {
    padding-bottom: 10px;
    margin-left: 50px;
}
li ul li:nth-child(1) {padding-top: 10px;}
input, select, textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 10px;
    font-family: inherit;
    font-size: 90%;
    background: #BDBDBD;
    border: 1px solid #BDBDBD;
    /*border: none;*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
input[type=submit], input[type=radio], input[type=checkbox] {
    width: auto;
    /*border: none;*/
}
input[type=radio], input[type=checkbox] {
    margin-right: 15px;
    border:1px solid black;
}
input:focus, select:focus, textarea:focus {
    background: #fff;
    border: 1px solid #BDBDBD;
}

input[type=submit]:focus {
    border: none;
    background: #757575;
}
.input-error {
    background: #ffd7d7;
    border: 1px solid red;
}
#contact-form .button:hover {background: #757575;}
p {padding: 10px 0;}
textarea {
    height: 150px;
    font-size: 80%;
}

.full-display {display: block;}
.mobile-display {display: none;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.l-float {float: left;}
.r-float {float: right;}
.clear {clear: both;}
.rel {position: relative;}
.spacer {padding-top: 30px;}
.spacer-bottom {padding-bottom: 30px;}
.spacer-around {padding: 30px;}
.indent {margin-left: 50px;}
.x-large {font-size: 120%;}
.large {font-size: 110%;}
.small {font-size: 90%;}
.x-small {font-size: 80%;}
.italic {font-style: italic;}
.overflow {overflow: visible;}
.link {cursor: pointer;}
.no-wrap {white-space: nowrap;}
.no-pointer {cursor: default;}
.no-border {border: none;}
.no-display {display: none;}
.flex {display: flex;}
.flex.equal, .flex-persist {flex-direction: row;}
.flex.equal > div, .flex-persist > div {flex: 1;}
.landscape {display: block;}
.portrait {display: none;}
.label {
    color: #757575;
    font-size: 75%;
}
a.icon img, .svg-icon {
   width: 40px;
}
.svg-icon.facebook {fill: #4267B2;}
.svg-icon.instagram {fill: #E80B1F;}
.svg-icon:hover {fill: #00659c;}
ul.checkbox {list-style: none;}
ul.checkbox li:before {
    content: "□";
    margin-left: -30px;
    padding-right: 10px;
    font-size: 130%;
}
ul.checkbox a {text-decoration: none;}
.no_bullet {list-style: none;}
.arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.content-section {
    clear: both;
    padding: 75px 0;
    padding: 6vw 0;
    border-top: 1px solid grey;
}
.blue-content {
    clear: both;
    padding: 50px 0;
    padding: 4vw 0;
    background: #00659C;
    color: #fff;
}
.content {
    position: relative;
    clear: both;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 10px;
}
.content-narrow {
    max-width: 1200px;
}
.content-x-narrow {
    max-width: 1000px;
}
.content-xx-narrow {
    max-width: 800px;
}
.staggered-content {
    display: flex;
    flex-direction: column;
}
.staggered-content .staggered {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.content-transition {transition: 1s;}
.content-offscreen {
    margin-top: 100px;
    opacity: 0;
}
.img-div {
    flex: 1;
}
.staggered-content .staggered .img-div img {
    position: absolute;
    right: -100px;
    z-index: -1;
    min-width: 150px;
}
.text-div {
    flex: 3;
}
.staggered-content .staggered:nth-child(even) {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.staggered-content .staggered:nth-child(even) .img-div img {right: 100px;}
/*Fixes weird shrinking issue with second one*/
.staggered-content .staggered:nth-child(2) {
    width: 90%;
}
.card {
    margin: 30px;
    padding: 50px;
    min-width: 250px;
    box-shadow: 0 2px 5px #999999;
    /*background: #fff;*/
    /*font-size: 90%;*/
    background: url(images/white-trans.png);
    backdrop-filter: blur(5px);
}
.dark-overlay {
    padding: 50px 0;
    background: url(images/black-trans.png);
    color: #f7f7f7;
    border-top: 5px solid #00659c;
    border-bottom: 5px solid #00659c;
    /*font-family: 'Quattrocento Sans', sans-serif;*/
    text-align: center;
}
.dark-overlay h2 {
    color: inherit; 
    /*font-family: 'Quattrocento Sans', sans-serif;*/
}
.blockquote {
    padding: 30px;
    border-top: 2px solid #ff5c03;
    border-bottom: 2px solid #ff5c03;
}
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    /*background: #303F9F;*/
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: #00659c;
    border: 2px solid #00659c;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 80%;
}
.button.white-button {
    min-width: 40%;
    color: #fff;
    border: 2px solid #fff;
}
a.button {text-decoration: none;}
.button:hover, input[type=submit]:focus {
    background: #fff;
    color: #448AFF;
    border: 2px solid #448AFF;
}
.info-table {
    margin: 20px auto;
    min-width: 50%;
    border-collapse: collapse;
}
.info-table tr:nth-child(odd) {background: #f2f2f2;}
.info-table tr.no-background {background: none;}
.info-table tr:hover {background: #cfd6ff;}
.info-table tr.no-background:hover {background: none;}
.info-table th {
    padding: 5px 10px;
    background: #e6e6e6;
    font-weight: bold;
    text-align: center;
}
.info-table td {
    padding: 5px 10px;
    text-align: center;
}
.info-table td.main-table-col {
    font-weight: bold;
    text-align: left;
}

.border-top {border-top: 5px solid #00659c;}
.accordion {
    padding: 0 20px;
    /*border: 1px solid #b8b8b8;*/
    /*border-top: none;*/
}
.accordion-indent > * {padding-left: 30px;}
/*.accordion:nth-child(1) {border-top: 1px solid #b8b8b8;}*/
.accordion h3 {position: relative; cursor: pointer;}
.accordion h3:hover {color: #00659c;}
.accordion-arrow {
    content: " ";
    margin-bottom: 7px;
    margin-right: 15px;
    border: solid #2D282A;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.accordion-arrow-close {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}
.expand-accordion-container {
    overflow: hidden;
    transition: .5s;
}
.expand-accordion {padding: 0 0 30px 30px;}
.expand-accordion .flex {font-size: 85%;}
.big-text {
    font-size: 300%;
    color: #448AFF;
    font-weight: bold;
}
.video-div {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.video-div iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

#container {
    height: 100%;
}
#nav {
    position: fixed;
    width: 100%;
    font-weight: bold;
    background: #fff;
    /*background: url(images/white-trans.png);*/
    color: #757575;
    /*backdrop-filter: blur(5px);*/
    box-shadow: 0 0 10px;
    z-index: 1;
    animation-name: nav-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /*animation-timing-function: linear;*/
}
#nav a, #expand-menu  {
    display: inline-block;
    position: relative;
    padding: 30px 20px;
    text-decoration: none;
    color: #00659c;
}
#nav #logo-div {background: #fff;}
#nav #logo-div a {padding: 5px 20px;}
#nav #logo-div img {height: 80px;}
body.home #nav a.home, body.about #nav a.about, body.services #nav a.services, body.gallery #nav a.gallery, body.design #nav a.design, body.homeowners #nav a.homeowners, body.contact #nav a.contact {
    color: #212121;
}
#nav a:hover, #expand-menu:hover {color: #212121;}
#nav .content {
    display: flex;
    justify-content: space-between;
    text-align: right;
}
#nav-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#nav-content .nav-cta {
    padding: 13px 20px;
    
}
#nav-content .button {
    margin-top: 0;
}



#nav-content #big-menu {display: block;}
#nav-content #small-menu {display: none;}
#expand-menu {
    position: relative;
    cursor: pointer;
    background: #fff;
}
#expand-menu .accordion-arrow {
    border: solid #212121;
    border-width: 0 1px 1px 0;    
}
#expand-menu:hover .accordion-arrow {
    border: solid #212121;
    border-width: 0 1px 1px 0;    
}
.menu-open .accordion-arrow , .expand-menu:hover .accordion-arrow {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}
#expanded-menu {
    display: block;
    position: absolute;
    top: -15em;
    right: 0;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20vw;
    background: #fff;
    opacity: 0;
    z-index: -1;
}
#expanded-menu a {
    display: block;
    position: relative;
    right:0;
    left:0;
    white-space: nowrap;
}
.menu-open #expanded-menu, .expand-menu:hover #expanded-menu {
    top: 100%;
    opacity: 1;
}



.hero {
    position: relative;
    display: flex;
    /*space for menu*/
    padding-top: 95px;
    color: #fff;
    background: #004a80;
    overflow: hidden;
}
.hero-image {
    flex: 2;
    position: relative;
}
.hero-image img, .hero-image video {
    width: 100%;
    height: 100%;
    /*line-height: -5px;*/
    overflow: hidden;
    object-fit: cover;
}
.home-slideshow img {
    position: absolute;
    /*width: 100%;*/
    /*height: 100%;*/
    animation-name: slides;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;
    -webkit-animation-name: slides;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
}

.home-slideshow img:nth-child(1) {
    opacity: 1;
    z-index: 1;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.home-slideshow img:nth-child(2) {
    opacity: 0;
    z-index: 0;
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}
.home-slideshow img:nth-child(3) {
    opacity: 0;
    z-index: 0;
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
}
@keyframes slides {
    0% {opacity: 0; z-index: 0;}
    6% {opacity: 1; z-index: 0;}
    33.33% {opacity: 1; z-index: 0;}
    39.33% {opacity: 0; z-index: 0;}
    100% {opacity: 0; z-index: 0;}
}
@-webkit-keyframes slides {
    0% {opacity: 0; z-index: 0;}
    6% {opacity: 1; z-index: 0;}
    33.33% {opacity: 1; z-index: 0;}
    39.33% {opacity: 0; z-index: 0;}
    100% {opacity: 0; z-index: 0;}
}
.page-value-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #004a80;
    text-align: center;
    animation-name: page-value-animation;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
.page-value-description {
    margin: 30px 50px;
    max-width: 500px;
}
.channel-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: inherit;
    border: 1px solid #BDBDBD;
}
a.channel-links{
    text-decoration: none;
}
.channel-links:not(.active-channel):hover{
    color: inherit;
}
.channel-links.active-channel:hover {
    box-shadow: 0 2px 5px #999999;
}
.text-div {
    padding: 10px 20px;
    
}
.arrow-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background: #BDBDBD;
}
.active-channel .arrow-div {
    background: #00659C;
}
#the-stakes {
    background: #803600;
    color: #fff;
    font-size: 120%;
}
#the-stakes h2 {color: inherit;}
/*#the-stakes p {padding: 20px, 0;}*/
/*.ol {
    list-style-position: outside;
}*/
#the-plan {
    font-size: 125%;
}
#the-plan .flex.equal {flex-direction: row;}
#the-plan h3 {font-size: 150%;}
#the-plan p {
    font-weight: bold;
    color: #757575;
}
.channels {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.channels .small-div {
    flex: 1;
}
.channels .big-div {
    flex: 3;
}
/*ABOUT PAGE*/
.bio {
    display: flex;
    flex-direction: row;
    margin-top: 60px;
}

.bio:nth-child(1) {margin-top: 0;}
.bio-image {
    /*width: 200px;*/
    padding: 20px 40px 0px 0px;
    flex-basis: 20%;
    flex-shrink: 0;
}
.bio-image img {
    border-radius: 1000px;
    /*border: 1px solid #BDBDBD;*/
}
.plan-cols, .gallery-cols {
    column-count: 3;
}
.gallery-img-div {
    padding: 4%;
}
.gallery-img-div img {
    width: 100%;
    cursor: pointer;
}
.gallery-img-div img:hover {box-shadow: 0 0 10px #00659C;}
/* The Modal (background) */
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 10vh;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background: url(images/black-trans.png);*/
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: .5s;
}
.show-modal {
    top: 0;
    /*display: block;*/
    opacity: 1;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  max-height: 80%;
  overflow: hidden;
  /*height: 90%;*/
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
  border: 5vh solid #fff;
  text-align: center;
  /*max-height: 80vw;*/
}
.mySlides img {
  max-width: 100%;
  height: 70vh;
  object-fit: cover;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: #3A87B1;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}


#footer {
    padding: 20px;
    background: #212121;
    color: #bdbdbd;
    font-size: 90%;
}
#footer h2 {color: inherit;}
#footer a {text-decoration: none;}
#footer a:hover, #footer a:focus {color: #fff;}
#footer p {padding: 0 0 5px;}

@media only screen and (max-width: 1200px) {
    #nav a, #expand-menu  {
        padding: 20px 10px;
    }
    #nav #logo-div a {padding: 5px 10px;}
    #nav #logo-div img {height: 60px;}
    .hero {
        /*space for menu*/
        padding-top: 75px;
    }
    .hero-image {
        flex: 1;
    }
}

@media only screen and (max-width: 900px) {
    h1 {font-size: 175%;}
    h2 {font-size: 150%;}
    h3 {font-size: 115%;}
    .spacer {padding-top: 20px;}
    .spacer-bottom {padding-bottom: 20px;}
    .spacer-around {padding: 20px;}
    #nav a, #expand-menu  {
        padding: 10px 5px;
        font-weight: normal;
    }
    #nav #logo-div a {padding: 5px 5px;}
    #nav #logo-div img {height: 40px;}
    #nav-content .nav-cta {
        padding: 3px 0px;
    }
    .hero {
        /*space for menu*/
        padding-top: 55px;
    }
}

@media only screen and (max-width: 700px) {
    h1 {font-size: 150%;}
    h2 {font-size: 130%;}
    h3 {font-size: 115%;}
    #nav-content #big-menu {display: none;}
    #nav-content #small-menu {display: block;}
    #nav a, #expand-menu  {
        padding: 20px;
        font-weight: normal;
    }
    #nav .button {
        padding: 15px 20px;
    }
    .hero, .flex.equal {
        flex-direction: column;
    }
    .staggered-content .staggered, .staggered-content .staggered:nth-child(even) {
        flex-direction: column;
    }  
    .staggered-content .staggered:nth-child(even) .img-div img {right: 50px;}
    .card {
        margin: 10px;
        padding: 20px;
    }
    #the-stakes {
        background: #803600;
        color: #fff;
        font-size: 100%;
    }
    #the-plan {
        font-size: 110%;
    }
    .models {
        flex-direction: column;
    }
    .plan-cols {
        column-count: 1;
        text-align: center;
    }
    .plan-cols img {max-width: 300px;}
    .gallery-cols {
        column-count: 2;
    }
}

@media only screen and (max-width: 600px) {
    #the-plan, #the-plan h3{
        font-size: 100%;
    }
    
}

@media screen and (max-width: 700px) and (min-aspect-ratio: 1/1) {		/*mobile landscape*/
}