@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&family=Montserrat:wght@400;500;700&display=swap');


body {font-size: 18px; font-family: 'Montserrat', sans-serif; color: #3A3B3D; font-weight: 500; margin: 0;  padding: 0;}

.cushycms {}

.social {padding: 5px; opacity:.8}
.social:hover {opacity: 1}

.lame {display: none; }
.hm .lame {float: left; display: inline; color:rgba(255,255,255,0.6); background: #053652; font-size: 17px; width: 100%; padding: 10px 0; margin: 12px 0 0 -1px; border-top:solid 1px #777; border-bottom:solid 1px #777; border-left: solid 1px #777;   position: relative; z-index: -1}
.lame:hover {background:#0f75bd; color:rgba(255,255,255,1) }

.lefyimg img {width: 100%!important; height: auto!important}
.esp {border-left: solid 3px #3A3B3D; border-top: solid 3px #3A3B3D; background: #fff; font-size: 15px; font-weight: 700; color: #3A3B3D; padding: 5px 8px; position: fixed; bottom: 0; right: 0; z-index: 999; box-shadow: 0 0 30px rgba(255,255,255,0.50); animation-name: esp; animation-duration: 2s; animation-iteration-count: 5 }

@keyframes esp {
0% 	{ box-shadow: 0 0 30px rgba(255,255,255,0.50); }
25% { box-shadow: 0 0 30px rgba(255,255,255,0.20); }
75% { box-shadow: 0 0 30px rgba(255,255,255,0.80); }
100% { box-shadow: 0 0 30px rgba(255,255,255,0.50); }
}


h1, h2, h3, h4 {line-height: normal!important}

h2 {font-family: 'Libre Bodoni', serif; text-transform: uppercase; letter-spacing: 1px; font-size: 27px}
h4 {font-size: 20px;}

a {text-decoration: none; transition: all .3s ease; color: #3A3B3D;  }

.clear {clear: both}

nav {background: #053652; color: #fff; width: 33vw; position: fixed;  left:0; top:0; z-index: 999; text-align: center; }
nav a img {width: 200px; height: auto; margin: 17px 0px 0px;}

.menu-toggle { cursor: pointer; padding: 36px 30px; float:right; margin-left: -80px; transition: opacity 0.5s ease-in-out; opacity: .3;}
.menu-toggle:hover {opacity: 1 }

.hm .nav {top: 170px; height: calc(100vh - 170px);}
.nav { position: fixed; z-index: 995; top: 96px; left: -110vw; width: 33vw; height: calc(100vh - 96px); transition: left 0.5s ease-in-out;}
.nav ul { list-style: none; padding: 0; margin: 0; height: 100%; background: #053652; }
.nav ul li { height: calc(11.1% - 1px); position: relative; border-top: solid 1px #777}
.nav ul li a {text-decoration: none; width: 100%; padding: 2% -20px 0;   position: absolute; left:0%; top:50%; transform: translateY(-50%); text-align: center; font-family: 'Libre Bodoni', serif; font-size: 19px; color: #FEC267;   }
.nav ul li a:hover {opacity: 1; color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.33);   }


#homemain {background: url("images/main-render.jpg") center top; background-size: cover; height: 75vh; overflow: hidden; position: relative; box-shadow: inset 0 0 100px 10px rgba(8,16,25,1.00) }
#homemain .ss {background: url("images/main-render2.jpg") center top; background-size: cover; height: 100%; width: 100%; animation-name: slideshow; animation-duration: 18s; animation-iteration-count: infinite;  opacity: 0; }
#homemain .copy {background: rgba(255,255,255,0.72); backdrop-filter: blur(4px); width: 33vw; position: absolute; left: 0; bottom:0; animation-name: homer; animation-duration: 2s; transition: all .4s ease; }
#homemain .copy div {margin: 40px; }
#homemain .copy h1 {font-size: 25px}
#homemain .copy ul {padding: 0 0 0 20px}
#homemain .copy li {font-size: 115%;  padding: 3px 0 10px }
#homemain .copy a {display: inline-block; padding: 8px 17px; font-size: 18px; color:#fff; background: #053652; border: solid 1px rgba(255,255,255,0.3)}
#homemain .copy a:hover {border: solid 1px rgba(255,255,255,1); box-shadow: 0 0 27px rgba(255,255,255,0.5); background: #0f75bd; }

@keyframes homer {
0% 	{left: -110vw; background: rgba(255,255,255,0.1);}
50% {left: -110vw; background: rgba(255,255,255,0.1);}
100% {left: 0px; background: rgba(255,255,255,0.72); }
}

@keyframes slideshow {
0% 	{opacity: 0}
40% {opacity: 0}
50% {opacity: 1}
90% {opacity: 1}
100% {opacity: 0}
}


.hlines {position: absolute; bottom:0; left:0; height: 1px; width: 100%; background: #fff; opacity: .4; z-index: 55}
.vlines {position: absolute; right:0; top:0; width: 1px; height: 100%; background: #fff; opacity: .4; z-index: 56}

.hometres {height: 25vh; background: #333;}
.hometres .right, .hometres .lefts {height: 100%; position: relative; opacity:0.86; transition: opacity .4s ease; box-shadow: inset 0 0 100px 10px rgba(12,21,31,1.00)}
.hometres .right:hover, .hometres .lefts:hover {opacity:1}
.hometres h3 {color:#053652; }
.lefts {float:left; width: 33%; }
.left {float:left; width: 66%; }
.right {float:right; width: 34%; }

.right img, .left img {width: 100%!important; height: auto!important; margin-bottom: 38px}

.right iframe {margin: -5px -25px; width: calc(100% + 50px)}

a.centering {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 15px 25px; background: rgba(255,255,255,0.70); backdrop-filter: blur(2px); border: solid 1px rgba(255,255,255,0)}
.hometres div:hover a.centering {background: rgba(255,255,255,0.8); backdrop-filter: blur(1px);   }
a.centering h3, div.centering p {margin: 7px 0}
a.centering:hover {border: solid 1px rgba(255,255,255,1.00)}

#Maps {background: url("images/maps.jpg"); background-size: cover; }
#Renderings {background: url("images/renderings-box.jpg"); background-size: cover; }
#Feedback {background: url("images/feedback-box.jpg"); background-size: cover; }


.heads {height: 50vh; overflow: hidden; position: relative; box-shadow: inset 0 0 100px 10px rgba(9,19,30,1.00) }
.heads h1 {font-size: 40px; text-align: center; width: 34vw; padding: 44px 0; position: absolute; right:0; bottom:0; margin: 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(2px); font-family: 'Libre Bodoni', serif; }
#overview {background: url("images/_overview.jpg") center center; background-size: cover;}
#issues {background: url("images/_issues.jpg") center center; background-size: cover;}
#renderings {background: url("images/_renderings.jpg") center center; background-size: cover;}
#updates {background: url("images/_updates.jpg") center center; background-size: cover;}
#feedback {background: url("images/_feedback.jpg") center center; background-size: cover;}
#maps {background: url("images/_maps.jpg") center center; background-size: cover;}



.wrap{position: relative; padding: 45px; line-height: 24px}
.wrap a {text-decoration: underline; padding: 0 2px; color: #0f75bd; }
.wrap a:hover {text-decoration: none; color: #053652}
.wrap ul {padding:0 0 0 18px}
.wrap ul ul {font-size: 15px; color:#535456; list-style: circle}
.wrap li {padding-bottom: 10px}
.wrap ul li li {padding-bottom: 0px}
.wrap h3 {font-family: 'Libre Bodoni', serif; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; border-top: solid 1px #999; margin-top: 35px; padding-top: 40px}


section {position: relative; width: 50%; float: left}
section img {width: 100%; height: auto; padding: 0; margin: 0 0 -5px; outline: none; position: relative; z-index: 1}
section h2 {position: absolute; left:50%; transform: translateX(-50%); bottom: 0; padding: 7px 30px; background: rgba(255,255,255,0.85); color: #4B4C4E; font-size: 17px; z-index: 2; font-weight: 400; margin: 0 ; text-align: center}


.modal { visibility: hidden; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(77, 77, 77, .7); transition: all .65s; backdrop-filter: blur(0px);}

.modal:target { visibility: visible; opacity: 1; backdrop-filter: blur(3px);}

.modal .content { border-radius: 8px; position: relative; width: 90%; height: 90vh;  box-shadow: inset 0 0 20 #fff; text-align: center}

.modal .content img {height: 100%; width: auto; border-radius: 8px; }

.modal .close { position: absolute; top: -8px; right: -8px;  color: #0f75bd; text-decoration: none; font-size: 30px; background: #fff; padding: 0px 9px; border-radius: 50%; border: solid 1px #999}

.modal .details { position: absolute; left:0; top:0; width: 100%; height: 30px }
.modal .details img {opacity:0; width: 1%; height: 1%; border-radius: 8px; transition: opacity .65s; }
.modal .details span {background: #fff; position: absolute; left: 50%; top:0; z-index: 9; transform: translateX(-50%); padding: 7px 0; width: 180px; cursor: pointer; font-weight: 700}
.modal .details:hover {height: 100% }
.modal .details:hover img {height: 100%; width: auto; opacity:1;}
.modal .details img:hover {opacity:0;}
.modal .panels {background: #fff; padding: 10px 30px; max-width: 700px; position: relative;}
.modal .panels iframe {margin: -10px -25px;}

.maps section {width: 50%}

aside {background: #fff; padding: 8px 16px; cursor: pointer; position:absolute ; top:0; right:0; z-index: 22; transition: all .65s;}
aside img {width:0px; }
aside:hover img {width:auto; max-width: 100%; max-height: 100%; }
aside:hover span {color:white; font-size: 1px; line-height: 1px}


.smallleft {width: 33%; float: left;}
.bigright {width: 67%; float: right;}

.accordion { background: #ccc; cursor: pointer; padding: 18px 48px 18px 18px;
  width: 100%; border: none; border-top: solid 2px #fff; text-align: left; outline: none; font-size: 17px;  transition: 0.4s; }
.accordion:before {content: "\25bc"; float:right; margin-right: -30px}
.active, .accordion:hover { background: #ddd; color: #333; }
.active:before {content: "\25b2"; float:right;}
.panel { padding: 0 18px; display: none; background: white; overflow: hidden;}

footer { background: #2C2C2D; padding: 20px; color:#BBB; text-align: center; display: block;  position: relative; z-index: 5; min-height:140px}



@media (max-width: 1920px) {
body {font-size: 16px;}
section {width: 100%;}
section .vlines {display: none}
}

@media (max-width: 1800px) {
#homemain .copy li {font-size: 107%; padding: 2px 0 8px }
#homemain .copy div {margin: 30px; }
a.centering {width: auto}
}

@media (max-width: 1400px) {
body {font-size: 15px;}
nav, .lefts, #homemain .copy, .nav, .smallleft, .bigright {width: 50%; }	
#homemain {height: 70vh; }
#homemain .copy h1 {font-size: 23px}
#homemain .copy li {font-size: 105%;  padding: 1px 0 8px }
#homemain .copy div {margin: 25px; }
.hometres {height: 30vh; }
.right {width: 100%; }
.heads h1 {font-size: 38px; width: 50%; padding: 40px 0px; margin: 0}
.left {float:none; width: 100%; }
.modal .content img {height: auto; width: 100%; }
.modal .details {display: none;}
}


@media (max-width: 1200px) {
#homemain .copy li {font-size: 100%; padding: 0px 0 7px }
#homemain {height: 100vh; }
.hometres {height: 40vh; }
.wrap{position: relative; padding: 40px; line-height: 23px}
.right .wrap {position: relative; padding: 0 40px 40px;}
.modal .close { position: absolute; top: 5px; right: 5px;}
}

@media (max-width: 780px) {
nav, .lefts, #homemain .copy, .nav, .smallleft, .bigright {width: 100%; }	
	nav { position:absolute; }
	.nav { top: 126px}
.menu-toggle {margin-right: -13px;}
#homemain {height: 100%; overflow: hidden; }
#homemain .copy {background: rgba(255,255,255,0.72); backdrop-filter: blur(5px); width: 100vw; position: relative; animation: none; margin: 270px auto -25px; padding: 20px 0 }
#homemain .copy h1 {font-size: 23px}
#homemain .copy li {font-size: 105%;  padding: 1px 0 8px }
#homemain .copy div {margin: 25px; }
.hometres {height: 40vh; }
.right {width: 100%; }
.vlines {display: none}
.heads h1 {font-size: 34px; width: 100vw; padding: 35px 0;}
.wrap {position: relative; padding: 35px 25px; line-height: 21px}
section h2 {position: relative; left:0; transform: none; bottom: 0; padding: 7px 4%; width: 92%; background: #ddd; font-size: 15px; }
.maps section {width: 100%}
nav a img {width: 220px; height: auto; margin: 19px 0px 0px;}
.hm .lame {width: 100%; }
.tbr {margin-top:0;}
}

@media (max-height: 850px) {
.modal {height: 200vh; 
  align-items:baseline; padding-top: 30px}

}