﻿@import url('text-style.css');
html, body { margin:0; min-height:100%; }
iframe { display:block; margin-left:auto; margin-right:auto; max-width:100%; height:14in; }
* { box-sizing:border-box; position:relative; }
html { overflow-x:hidden; overflow-y:auto; }
body { display:flex; flex-direction:column; justify-content:flex-start; }
.layout { margin:0 auto; height:inherit; width:14in; }
.button { border-radius:0.5em; border-width:1px; border-style:solid; height:2.5em; font-size:110%; font-family:'Montserrat Alternates Bold'; display:flex; align-items:center; justify-content:center; text-decoration:none; line-height:1; padding:0 2em; }
.button:active { padding-top:2px; background:#000000 !important; color:#ffffff !important; text-shadow:0 0 1em #ffffff; box-shadow:0 1px 0.1em #000000 inset; }
.button.blue { color:#ffffff; background:#1f4364; border-color:#1f4364; background:#16606d; border-color:#16606d; }
.button.blue:hover, .button.blue:focus { background:#2f6394; }
.button.dark-blue { color:#ffffff; background:#1f4364; border-color:#1f4364; background:#16606d; border-color:#16606d; }
.button.dark-blue:hover, .button.dark-blue:focus { background:#081319; }
.button.clear { color:#000000; background:transparent; border-color:#000000; }
.button.clear:hover, .button.clear:focus { background:rgba(0,0,0,0.1); }
.project-logo { aspect-ratio:227/30; display:block; }
.project-logo img { display:block; width:100%; height:100%; }

#internal-main-layout { min-height:calc(100vh - 8em); padding-top:2em; padding-bottom:2em; }
#internal-main-layout > h1:first-child { color:#043a61; color:#16606d; /*padding-left:2em;*/ }
/*
#internal-main-layout > h1:first-child::before,
#internal-main-layout > h1:first-child::after { display:block; position:absolute; left:0.5em; top:0; height:1.45em; aspect-ratio:82/98; content:' '; background:center no-repeat; background-size:contain; }
#internal-main-layout > h1:first-child::before { background-image:url('../img/layout/page-header.bkg1.png'); }
#internal-main-layout > h1:first-child::after { background-image:url('../img/layout/page-header.bkg2.png'); }
*/
@media (max-width:14.5in) {
body { vp-width:'14.5in'; }

#footer-copyright, #footer-nav { font-size:90% !important; }
}

@media (max-width:12.5in) {
body { vp-width:'12.5in'; }
/*
body { padding-top:3.5em !important; }
*/
#amenities-list { columns:2 !important; width:fit-content !important; margin-left:auto !important; margin-right:auto !important; }
/*
header { height:3.5em !important; }
#header-logo { height:2em !important; }
#header-nav { font-size:80% !important; }
#footer-nav { order:2; }
*/
#footer-copyright { order:3; flex-basis:100%; text-align:right; margin-right:1em !important; }
#footer-layout { flex-wrap:wrap; }

#contact-layout { flex-direction:column-reverse; width:60%; min-width:4in; margin:0 auto; }
#contact-form button { margin-left:auto; margin-right:auto; }
#contact h1 { text-align:center; }
#contact-collage { width:100% !important; margin-bottom:1em; }

.solutions-card h2 { min-height:2.9em; }
}

@media (max-width:10.5in) {
body { vp-width:'10.5in'; }

body { padding-top:3.5em !important; }
p, td, th, li { font-size:90%; }
#intro-text { padding-left:0.5em !important; width:30% !important; min-width:24em !important; }
header { height:3.5em !important; }
#header-logo { height:2em !important; }
#header-nav { display:none; }
#header-layout { margin-left:0.125in; padding-right:0 !important; margin-right:0; }
}

@media (max-width:9.5in) {
body { vp-width:'9.5in'; }

#intro-layout { flex-direction:column-reverse; }
#intro-text { width:90% !important; padding:0 !important; margin:0 auto !important; min-width:unset !important; }
#intro-text h1 { text-align:center; }
#intro-collage { margin-top:-2em; margin-bottom:1em; width:30em !important; max-width:100%; }

#features-layout { flex-direction:column-reverse !important }
#features-text { width:90% !important; margin-left:auto; margin-right:auto; }
#features-collage { width:30em !important; max-width:100%; margin:0 auto; }
#features-text h1 { text-align:center; }

#solutions-container { flex-direction:column; width:30em; max-width:90%; margin-left:auto; margin-right:auto; }
.solutions-card h2 { min-height:unset; }
}

@media (max-width:8.5in) {
body { vp-width:'8.5in'; }

#amenities-list { columns:1 !important; }
/*
#facility-layout { margin:0 !important; }
*/
#solutions-layout { margin:0 !important; }

footer { height:auto !important; padding:1em 0; }
#footer-layout { justify-content:space-around !important; }
#footer-nav { flex-basis:100%; margin:1em 0; }
#footer-nav-root { justify-content:space-around !important; }
#footer-copyright { text-align:center; }
}

@media (max-width:7.5in) {
body { vp-width:'7.5in'; }

#features-text { width:90% !important; }
/*
#facility-layout { flex-direction:column; width:30em; max-width:90%; margin:0 auto !important; }
*/
#solutions-layout { flex-direction:column; width:30em; max-width:90%; margin:0 auto !important; }
#intro-buttons { flex-direction:column; }
#intro-buttons .button { width:100% !important; margin-top:0.5em; }
#contact-layout { width:70%; }
}

@media (max-width:6.5in) {
body { vp-width:'6.5in'; }

#footer-nav { margin:2em 0; }
#footer-nav-root { flex-direction:column; width:50% !important; min-width:3in; margin:0 auto !important; }
#footer-nav-root li { width:100%; }
#contact-layout { width:80%; }
}

html { overflow:auto; overflow-x:hidden; }
body { padding-top:4em; background:#ffffff; }
header { position:fixed; left:0; right:0; top:0; height:4em; background:rgba(255,255,255,0.95); backdrop-filter:blur(0.2em); z-index:1000; }
section { padding:3.5em 0; }
*:first-child { margin-top:0; }
*:first-child::first-line { line-height:1; }
*:last-child { margin-bottom:0; }
#header-layout { display:flex; justify-content:space-between; align-items:center; padding-right:1em; }
#header-logo { height:2.25em; }
#header-nav-root { display:flex; justify-content:flex-end; align-items:center; list-style-type:none; margin:0; padding:0; gap:1px; }
#header-nav li { display:block; margin:0; padding:0; }
#header-nav li ul,
#header-nav li ul li { display:block; list-style-type:none; padding:0; margin:0 }
#header-nav li ul { position:absolute; left:0; top:100%; min-width:calc(100% + 1em); background:#043a61; background:#16606d; border-radius:0 0.65em 0.65em 0.65em; max-height:0; overflow:hidden; transition:max-height 0.1s; }
#header-nav a, a.header-nav { display:flex; border-radius:0.65em; height:2.5em; padding:0 1em; justify-content:center; align-items:center; color:#000000; text-decoration:none; line-height:1; font-family:'Montserrat Alternates'; }
a.header-nav.highlight { width:fit-content; font-size:120%; margin:0 auto; font-family:'Montserrat Alternates'; border-radius:0.3em; padding-top:0.1em; height:2.2em; }
#header-nav-root > li:hover > a { border-radius:0.65em 0.65em 0 0; }
#header-nav-root > li > a:last-child { border-radius:0.65em !important; }
#header-nav li li a { border-radius:none; justify-content:flex-start; white-space:nowrap; color:#ffffff; border-radius:0 !important; }
#header-nav li li:hover > a, #header-nav li li a:focus { background:#000000; }
#header-nav li:hover > a, #header-nav a:focus { background:#043a61; background:#16606d; color:#ffffff; }
#header-nav li:hover > ul { max-height:100em; transition:max-height 0.4s; }
#header-nav a:active { background:#043a61; background:#16606d; color:#ffffff; text-shadow:0 0 1em #ffffff; box-shadow:0 1px 0.1em #000000 inset; padding-top:2px; }
a.button:active { text-shadow:0 0 1em #ffffff; box-shadow:0 1px 0.1em #000000 inset; padding-top:2px; }
/*
#header-nav 
*/
a.highlight { background:#043a61; background:#16606d; color:#ffffff !important; font-family:'Montserrat Alternates Bold'; font-size:88%; }
#header-nav a.highlight { margin-left:1em; }
/*
#header-nav
*/
a.highlight:hover, #header-nav a.highlight:focus { background:#000000; color:#ffffff !important; }

#intro { background:#f8f7f0; }
#intro-layout { display:flex; align-items:center; justify-content:space-around; gap:5%; }
#intro-text { width:40%; min-width:26em; padding-left:2em; }
#intro-collage { width:55%; }
#intro-buttons { display:flex; justify-content:space-between; margin-top:3em; }
#intro-buttons .button { padding-left:0; padding-right:0; text-align:center; width:49%; }


#amenities { background:#ffffff; }
#amenities h1 { text-align:center; color:#fc8715; }
#amenities-list { columns:3; display:block; list-style-type:none; margin:0 0 0 3%; padding:0; width:100%; font-size:110%; line-height:1; }
#amenities-list li { padding:0.5em 0 0.5em 2.5em; margin-bottom:1em; background-position:center left; background-repeat:no-repeat; background-size:contain; list-style-type:none; color:#393939; }
#amenities-list li::marker { /*color:transparent; */}
	li[icon="staff"] { background-image:url('../img/layout/icon.staff.png'); }
	li[icon="meeting-spaces"] { background-image:url('../img/layout/icon.meeting-spaces.png'); }
	li[icon="refreshments"] { background-image:url('../img/layout/icon.refreshments.png'); }
	li[icon="wifi"] { background-image:url('../img/layout/icon.wifi.png'); }
	li[icon="receptionist"] { background-image:url('../img/layout/icon.receptionist.png'); }
	li[icon="furnished"] { background-image:url('../img/layout/icon.furnished.png'); }
	li[icon="access"] { background-image:url('../img/layout/icon.access.png'); }
	li[icon="custom-spaces"] { background-image:url('../img/layout/icon.custom-spaces.png'); }
	li[icon="networking"] { background-image:url('../img/layout/icon.networking.png'); }
	
/*
#facility { background:#f1f7fa; }
#facility-layout { padding-left:1em; padding-right:1em; }
#facility-layout h1 { text-align:center; margin-top:0; }
#facility-container { display:flex; align-items:flex-start; justify-content:space-around; gap:1em; }
.facility-card { flex:1; border-radius:1em; }
.facility-card img { display:block; width:100%; height:auto; border-radius:1em; }
.facility-card p { margin-bottom:0; margin-left:0.5em; margin-right:0.5em; }
.facility-card p::first-line { font-family:'Montserrat Medium'; font-size:110%; }
*/
#solutions { background:#1f4364; background:#16606d; }
#solutions-layout { padding-left:1em; padding-right:1em; }
#solutions-layout h1 { text-align:center; margin-top:0; color:#ffffff; }
#solutions-container { display:flex; align-items:stretch; justify-content:space-around; gap:1em; }
.solutions-card { flex:1; border-radius:1em; background:#ffffff; display:flex; flex-direction:column; }
.solutions-card img { display:block; width:100%; height:auto; border-radius:1em 1em 0 0; }
.solutions-card p { margin:0 0.5em 1em; }
.solutions-card h2 { font-family:'Montserrat Medium'; font-size:110%; margin:0.5em 0.5em 0; }


#features { background:#ffffff; }
#features-layout { display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:flex-start; gap:2.5%; }
#features-text { width:47.5%; }
#features-collage { width:50%; }
#features ul { margin-bottom:-1em; }
#features li { margin-bottom:1em; }
#features li::first-line { font-family:'Montserrat Medium'; font-size:110%; }


#contact { background:#f8f3ed; }
#contact-layout { display:flex; justify-content:space-between; align-items:center; gap:3%; padding-left:1em; padding-right:1em; }
#contact h1, #contact p { }
#contact-collage { width:55%; border-radius:1em; }

form { display:flex; flex-wrap:wrap; justify-content:space-between; }
form input, form textarea { width:49%; background:#ffffff; border:none; border-radius:0.5em; line-height:1; height:3em; font-family:inherit; margin-bottom:1em; padding:0 1.5em; }
form input:last-of-type { width:100%; }
form textarea { width:100%; height:9em; line-height:1.2; overflow:auto; padding:1em 1.25em; }
form textarea::first-line { line-height:1; }
form button { width:55%; }


footer { background:#1f4364; background:#16606d; height:4em; justify-self:flex-end; }
#footer-copyright { color:#ffffff; line-height:1; margin:0 2em 0 auto; }
#footer-layout { display:flex; justify-content:space-between; align-items:center; }
#footer-logo { height:1.75em; }
#footer-nav-root { display:flex; justify-content:flex-end; align-items:center; list-style-type:none; margin:0; padding:0; gap:1px; }
#footer-nav li { display:block; margin:0; padding:0; }
#footer-nav a { display:flex; border-radius:0.65em; height:2.5em; padding:0 1em; justify-content:center; align-items:center; color:#ffffff; text-decoration:none; line-height:1; }
#footer-nav a:hover, #header-nav a:focus { background:#606d7f; background:rgba(255,255,255,0.2); color:#ffffff; }
#footer-nav a:active { background:#699ca4; color:#ffffff; text-shadow:0 0 1em #ffffff; box-shadow:0 1px 0.1em #000000 inset; padding-top:2px; }


#intro-collage { width:55%; aspect-ratio:1515/1273; }
#intro-collage img:nth-child(1) { aspect-ratio:1291/914; }
#intro-collage img:nth-child(2) { left:-15%; top:12%; width:100%; }
#intro-collage img:nth-child(3) { left:75%; top:120%; width:62%; }
#intro-collage-slider { width:62.5%; aspect-ratio:1291/914; margin-top:0; margin-left:0; }

#features-collage { width:50%; aspect-ratio:1332/1075; }
#features-collage img:nth-child(1) { aspect-ratio:1231/791; }
#features-collage img:nth-child(2) { left:-10%; top:80%; width:50%; }
#features-collage img:nth-child(3) { left:52%; top:43%; width:45%; }
#features-collage-slider { width:83%; aspect-ratio:1231/791; margin-top:0; margin-left:0; }


.collage.in-view .slider { opacity:1 !important; margin-top:0 !important; margin-left:0 !important; transition:opacity 0.5s, left 0.75s, margin-top 0.5s 0.75s, margin-left 0.5s 0.75s; }

/* SETUP CONFIGURATION */
#intro-collage .slider { left:100%; opacity:0; margin-top:20%; margin-left:20%; }
#intro-collage img:nth-child(2) { opacity:0; left:10%; }
#intro-collage img:nth-child(3) { opacity:0; top:85%; }

#features-collage .slider { left:-100%; opacity:0; top:10%; }
#features-collage img:nth-child(2) { opacity:0; left:85%; }
#features-collage img:nth-child(3) { opacity:0; top:-5%; }
/* TRANSITION DETAILS */
#intro-collage.in-view .slider { left:7.3%; }
#intro-collage.in-view img:nth-child(1) { left:14.6%; top:31%; width:136%; transition:all 0.5s 0.75s; }
#intro-collage.in-view img:nth-child(2) { opacity:1; left:-15%; transition:all 1s 1.3s; }
#intro-collage.in-view img:nth-child(3) { opacity:1; top:126%; transition:all 1.3s 1.7s; }

#features-collage.in-view .slider { left:15%; }
#features-collage.in-view img:nth-child(1) { left:-20%; top:-15%; width:110%; transition:all 0.5s 0.75s; }
#features-collage.in-view img:nth-child(2) { opacity:1; left:-10%; transition:all 1s 1.3s; }
#features-collage.in-view img:nth-child(3) { opacity:1; top:43%; transition:all 1.3s 1.7s; }
#features-collage.in-view .slider::before { left:2%; top:2%; transition:all 0.5s 0.75s; }
/*
947/1291
111
*/
.slider { display:block; position:absolute; border-radius:0.8em; }
.slider::before { display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#1f4364; background:#16606d; border-radius:0.8em; content:' '; } 
#intro-collage .slider::before { background:#fc8715; }
.collage img { position:absolute; border-radius:0.8em; }
.collage img:nth-child(1) { left:0; top:0; width:100%; }


@media (max-width:14.5in) {
	.layout { width:auto; margin-left:0.25in; margin-right:0.25in; }
}

#mobile-nav { display:none; height:100%; font-size:200%; }
#mobile-nav-controls { height:100%; }
#mobile-nav-controls a { display:flex; height:100%; aspect-ratio:1/1; text-align:center; justify-content:center; align-items:center; line-height:1; color:#000000; text-decoration:none; }
#mobile-nav-root { display:flex; flex-direction:column; position:fixed; top:100%; right:-100%; height:calc(100vh - 100%); list-style-type:none; padding:0; margin:0; z-index:1002; transition:right 0.5s; background:#385764; }
#mobile-nav-root a { display:flex; padding:0 1em; align-items:center; }
#mobile-nav-root li { display:block; margin:0; padding:0; }
#mobile-nav-root li ul { display:flex; flex-direction:column;padding:0; margin:0; list-style-type:none; }
#mobile-nav-root li li a { padding:0 1em 0 1.5em; }
#mobile-nav-root a { display:flex; text-decoration:none; font-family:'Montserrat Alternates'; color:#ffffff; }
#mobile-nav-shroud { position:fixed; left:0; right:0; top:100%; width:100%; height:calc(100vh - 100%); background:rgba(255,255,255,0.1); z-index:1001; display:none; transition:display 0s 0.5s, opacity 0.5s; opacity:0; }

@media (max-width:10.5in) {
#mobile-nav { display:block; }
.mobile-nav-expanded #mobile-nav-toggle { background:#385763; color:#ffffff; padding-top:0.1em; } 
.mobile-nav-expanded #mobile-nav-shroud { display:block; transition:display 0s, opacity 0.5s; opacity:1; }
.mobile-nav-expanded #mobile-nav-root { right:0; }
}

#options { background:#f4f5f6; }
#options p { text-align:center; }
#options-layout { padding-left:1em; padding-right:1em; }
#options-layout h1 { text-align:center; margin-top:0; }
#options-card-container { display:flex; align-items:flex-start; justify-content:space-around; gap:1em; }
.options-card { flex:1; align-self:stretch; border-radius:1em; background:#ffffff; display:flex; flex-direction:column; }
.options-card img { display:block; width:100%; height:auto; border-radius:1em 1em 0 0; }
.options-card p { margin:0.5em 0.5em 1em; text-align:left !important; }
.options-card h2 + p { margin-top:0; }
.options-card h2 { font-family:'Montserrat Medium'; font-size:110%; margin:0.5em 0.5em 0; min-height:2.9em; }
.options-card p:last-child { margin-top:auto; margin-bottom:0.5em; }
.options-card .button { width:fit-content; padding:0 1em; height:2.2em; font-size:100%; border-radius:1.1em; }

@media (max-width:14.5in) {
#options-card-container { flex-wrap:wrap; justify-content:space-around; }
.options-card { width:30%; flex:auto; }
.options-card h2 { min-height:unset; }
}

@media (max-width:9.5in) {
.options-card { width:47%; }
}

@media (max-width:7.5in) {
.options-card { width:90%; }
