html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: 'Work Sans', sans-serif; font-weight: 400; color: #00284B; font-size: 10px; text-align: center; overflow-x: hidden; background: #F2F2F2; overflow: hidden; }

/* Browser Style Resets */
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a:focus { outline: none; }
img { border: none; }

/* Global Link Styles */
a { text-decoration: none; color: #00529C; transition: color 0.2s ease; }

/* Hide Scrollbars */
body { -ms-overflow-style: none;  /* Internet Explorer 10+ */ scrollbar-width: none;  /* Firefox */ /* overflow: -moz-scrollbars-none; */ /* Older Firefox */ }
body::-webkit-scrollbar { display: none;  /* Safari and Chrome */ }

/* Image Preloader */
/* Once full-size is loaded, add class 'ld' to element */
.tn { filter: blur(5px); transition: filter 0.7s ease; }
.tn.ld { filter: blur(0); }

/* Icon Font */
/* Use <i class="bisicons icon-name"></i> */
@font-face { font-family: 'bisicons'; src: url('../resources/bisicons.woff2') format('woff2'); }
.bisicons::before { display: inline-block; font-family: 'bisicons'; font-style: normal; font-weight: normal; text-decoration: inherit; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.bisicons.icon-arrow-down:before { content: '\e800'; }
.bisicons.icon-arrow-left:before { content: '\e801'; }
.bisicons.icon-arrow-right:before { content: '\e802'; }
.bisicons.icon-arrow-up:before { content: '\e803'; }
.bisicons.icon-bath:before { content: '\e804'; }
.bisicons.icon-bed:before { content: '\e805'; }
.bisicons.icon-car:before { content: '\e806'; }
.bisicons.icon-map:before { content: '\e807'; }
.bisicons.icon-cross-circle:before { content: '\e808'; }
.bisicons.icon-fullscreen:before { content: '\e809'; }
.bisicons.icon-hand:before { content: '\e80a'; }
.bisicons.icon-home:before { content: '\e80b'; }
.bisicons.icon-minus:before { content: '\e80c'; }
.bisicons.icon-mute:before { content: '\e80d'; }
.bisicons.icon-next:before { content: '\e80e'; }
.bisicons.icon-pause:before { content: '\e80f'; }
.bisicons.icon-phone:before { content: '\e810'; }
.bisicons.icon-play:before { content: '\e811'; }
.bisicons.icon-plus:before { content: '\e812'; }
.bisicons.icon-plus-circle:before { content: '\e813'; }
.bisicons.icon-print:before { content: '\e814'; }
.bisicons.icon-search:before { content: '\e815'; }
.bisicons.icon-unfullscreen:before { content: '\e816'; }
.bisicons.icon-volume:before { content: '\e817'; }
.bisicons.icon-cross:before { content: '\e818'; }
.bisicons.icon-load:before { content: '\e830'; }

/* Loading Symbol */
/* Only becomes visible if content takes longer than 0.3 seconds to load, so it doesn't flicker for immediately loads */
body > div#loading { position: fixed; width: 100%; height: 100%; top: 0; left: -1000%; z-index: 1100; transition: left 0s 0.3s linear, opacity 0.3s 0s ease, background-color 0.3s 0s ease; opacity: 0; background-color: rgba(0,0,0,0); }
body > div#loading.active { left: 0; z-index: 1100; opacity: 1; background-color: rgba(0,0,0,0.8); transition: left 0s 0s linear, opacity 0.3s 0.3s ease, background-color 2s 0.3s ease; }
body > div#loading > i { font-size: 8em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1em; height: 1em; color: #FFFFFF; animation: spin 1s linear forwards infinite; }
@keyframes spin {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Main Navigation */
/* Add class 'active' to the anchor in which the currently displayed page belongs (but NOT the homepage) */
body > nav { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; left: 0; border-top-right-radius: 4em;  border-bottom-right-radius: 4em; background-color: #00284B; height: 100%; color: #FFFFFF; text-align: center; transform: translateX(-100%); transition: transform 0.5s 0s ease-in; z-index: 900; overflow: hidden; }
body > nav.initiated { transform: translateX(0); transition: transform 1s 1s ease-out; }
body > nav a { background-color: rgba(0,28,54,0); transition: background-color 0.4s ease; position: relative; }
body > nav a.active { background-color: rgba(0,28,54,1); }
body > nav a::before { position: absolute; content: ''; width: 0; height: calc(100% - 1em); top: 0.5em; left: 0; }
body > nav a.active::before { width: 1em; background-color: #7FBEF1; }

/* Hide nav when video is fullscreen so it doesn't cover it */
body.fullvideo > nav { display: none; }

body > nav > .logo > img { width: 10em; margin: 5em 8em 2em; }
body > nav > .pages { width: 100%; border-top: solid 1px rgba(127,190,241,0.2); }
body > nav > .pages > li { width: 100%; border-bottom: solid 1px rgba(127,190,241,0.2); }
body > nav > .pages > li > a { display: block; font-size: 1.6em; padding: 3em 2em; color: #FFFFFF; font-weight: 600; }
body > nav > .buttons { width: 100%; border-top: solid 1px rgba(127,190,241,0.2); display: flex; }
body > nav > .buttons > li { flex: 0 0 50%; }
body > nav > .buttons > li:nth-child(1) { border-right: solid 1px rgba(127,190,241,0.2); }
body > nav > .buttons > li > a { display: block; font-size: 1.6em; padding: 1em; color: #FFFFFF; }

/* Global Section Styles */
/* Add class 'active' to section to display. */
/* Remove class 'active' from previously active section */
/* Append new sections to body without 'active' class, then add 'active' class to trigger display transitions */
body > section { overflow-y: auto; position: absolute; padding-left: 34em; width: calc(100% - 34em); height: 100%; top: 0; left: -1000%; z-index: 700; transition: left 0s 1s linear, opacity 0.5s 0.5s ease; opacity: 0; background-color: #F2F2F2; text-align: left; }
body > section.active { left: 0; z-index: 800; opacity: 1; transition: left 0s 1s linear, opacity 0.5s 1s ease; }

/* Intro Screen/Screensaver */
body > section#intro { z-index: 1000; padding-left: 0; width: 100%; opacity: 0; left: -1000%; transition: left 0s 1s linear, opacity 0.5s 0.5s ease; overflow: hidden; }
body > section#intro.active { left: 0; opacity: 1; transition: left 0s linear, opacity 1s 0s ease; }
body > section#intro .background { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; }

/* Intro Video Preloader */
/* Once video is loaded, add class 'ld' to .video to display */
body > section#intro .video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: opacity 0.8s ease; }
body > section#intro .video.ld { opacity: 1; }
body > section#intro .video video { position: absolute; min-height: 100%; min-width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }

/* Intro Content Block */
body > section#intro .cn { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; left: 0; border-top-right-radius: 4em;  border-bottom-right-radius: 4em; background-color: rgba(0,40,75,0.9); padding: 8em; height: calc(100% - 16em); color: #FFFFFF; text-align: center; transform: translateX(-100%); transition: transform 0.5s 0s ease-in; }
body > section#intro.active .cn { transform: translateX(0); transition: transform 1s 1s ease-out; }

body > section#intro .cn > .logo > img { width: 16em; }
body > section#intro .cn > .text { margin: 2em 0; }
body > section#intro .cn > .text > p { margin: 0; font-size: 2em; line-height: 1.5em; font-weight: 500; }
body > section#intro .cn > .starttouch > p { font-size: 1.4em; color: #7FBEF1; font-weight: 600; line-height: 1.5em; margin: 2em 0 0; }

/* Touch Animation */
body > section#intro .cn > .starttouch > div { position: relative; width: 6em; height: 6em; margin: auto; }
body > section#intro .cn > .starttouch > div i.circle { width: 2em; height: 2em; border: 0.3em solid #7FBEF1; position: absolute; top: 0; top: -0.7em; left: calc(50% - 1.9em); border-radius: 2em; animation: pulse 3s forwards infinite; }
body > section#intro .cn > .starttouch > div i.icon-hand { font-size: 6em; position: absolute; top: 0; left: calc(50% - 0.5em); animation: press 3s forwards infinite; }

@keyframes pulse {
    0% { opacity: 0; transform: scale(0.3); }
    40% { opacity: 0; transform: scale(0.3); }
    45% { opacity: 1; }
    90% { opacity: 0;  transform: scale(1.8); }
    100% { opacity: 0;  transform: scale(1.8); }
}

@keyframes press {
    0% { transform: translateY(0.05em) scale(1.05); }
    30% { transform: translateY(0.05em) scale(1.05); }
    50% { transform: translateY(0) scale(1); }
    70% { transform: translateY(0.05em) scale(1.05); }
    100% { transform: translateY(0.05em) scale(1.05); }
}

/* Floating Action */
body > section > .action { display: block; position: fixed; bottom: 3em; font-size: 1.6em; color: #FFFFFF; background-color: #00284B; border-radius: 1.6em; overflow: hidden; right: -100%; transition: right 0.5s 0s ease; z-index: 850; }
body > section.active > .action { right: 2em; transition: right 1.5s 1s ease; }
body > section.active > .action.hide { right: -100%; transition: right 0.5s 0s ease; }

body > section > .action > button { position:relative; display: block; background-color: #0060AD; font-family: 'Work Sans', sans-serif; padding: 1em 10em 1em 2em; margin: 0; outline: none; border: none; color: #FFFFFF; width: 100%; font-size: 1em; font-weight: 600; }
body > section > .action > button > i { position: absolute; right: 1em; top: 0.65em; font-size: 1.4em; }
body > section > .action > button > i::before { transition: transform 0.3s ease; transform: rotate(0deg); }
body > section > .action.active > button > i::before { transition: transform 0.3s ease; transform: rotate(225deg); }

body > section > .action.signup { max-width: 225px; background: transparent; }
body > section > .action.signup > div { background-color: #0060AD; border-radius: 1.6em; max-height: 0; margin-bottom: 1em; overflow: hidden; transition: max-height 0.3s ease; }
body > section > .action.signup > div > p { margin: 0; font-size: .8em; text-align: center; padding: 2em 3em 0; }
body > section > .action.signup > div > img { display: block; margin: 1.5em auto; max-width: 100px; }
body > section > .action.signup > button { border-radius: 1.6em; text-align: left; padding: 1em 1em 1em 2em; }

body > section > .action.signup.active> div { max-height: 500px; }

body > section > .action > a { display: block; background-color: #00284B; font-family: 'Work Sans', sans-serif; padding: 1em 10em 1em 2em; margin: 0; outline: none; border: none; color: #FFFFFF; width: 100%; font-size: 1em; font-weight: 600; }
body > section > .action > a { display: block; background-color: #0060AD; font-family: 'Work Sans', sans-serif; padding: 1em 10em 1em 2em; margin: 0; outline: none; border: none; color: #FFFFFF; width: 100%; font-size: 1em; font-weight: 600; }
body > section > .action > a > i { position: absolute; right: 1em; top: 0.65em; font-size: 1.4em; }
body > section > .action > a > i::before { transition: transform 0.3s ease; transform: rotate(0deg); }

body > section#home > .action > button { background-color: #00284B; }

body > section > .action > ul { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
body > section > .action.active > ul { max-height: 30em; }
body > section > .action > ul > li { width: 100%; border-top: solid 1px #7FBEF1; }
body > section > .action > ul > li > a { display: block; padding: 1em; color: #FFFFFF; font-weight: 600; }

body > section#home > .action > button { background-color: #00284B; }


/* Home */
body > section#home { background-color: #0060AD; padding-left: 22em; width: calc(100% - 22em); }
body > section#home > #homemap {  width: 100%; height: 100%; }


/* Search */
body > section#search { background-color: #0060AD; color: #FFFFFF; display: flex; padding-left: 34em; padding-right: 8em; width: calc(100% - 42em); }
body > section#search > div { display: block; margin: auto; text-align: left; font-size: 1.6em; width: 100%; position: relative; padding-bottom: 57px; }
body > section#search > div > h1 { font-size: 4em; font-weight: 500; margin: 0 0 0.3em 0; display: flex; justify-content: space-between; align-items: center; }

body > section#search > div > h1 > .switch-type { display: flex; cursor: pointer;
font-size: .275em;
color: #FFFFFF;
background-color: #00284B;
border-radius: 1.6em;
padding: 1em 1.5em;
line-height: 1;
align-content: center;
margin: 1em 0; }
body > section#search > div > form { display: flex; flex-wrap: nowrap; position: absolute; left: 0; right: 0; }
body > section#search > div > form > div { display: block; padding-right: 1em; position: relative; flex: 1 0; }

body > section#search > div > form > div#searchestate { width: 14em; }
body > section#search > div > form > div#searchtype { width: 11em; }
body > section#search > div > form > div#searchsize { width: 17em; }
body > section#search > div > form > div#searchprice { width: 18em; }

body > section#search > div > form > div > .error { position: absolute; top: calc(100% + 1em); left: 2em; width: calc(100% - 7em); text-align: center; padding: 0.5em; border: solid 2px; border-radius: 2em; }

body > section#search > div > form > div > button { display: block; border: solid 2px #FFFFFF; padding: 1em 4em 1em 2em; outline: none; font-family: 'Work Sans', sans-serif; font-size: 1em; font-weight: 600; border-radius: 3em; background-color: transparent; color: #FFFFFF; position: relative; transition: color 0.3s ease, background-color 0.3s ease; width: 100%; text-align: left; white-space: nowrap; }
body > section#search > div > form > div > button:disabled { opacity: .5; }
body > section#search > div > form > div > button::after { font-family: 'bisicons'; content: '\e800'; position: absolute; right: 1em; top: 1em; font-size: 1em; padding-left: 0.7em; border-left: solid 1px rgba(127,190,241,0.4); }
body > section#search > div > form > div.active > button { color: #0060AD; background-color: #FFFFFF; }

body > section#search > div > form > div > ul { position: absolute; top: 100%; left: 0; max-height: 0; transition: max-height 0.4s ease; overflow: hidden; width: calc(100% - 1em); margin-top: 0.5em; text-align: center; }
body > section#search > div > form > div.active > ul { max-height: 26em; transition: max-height 0.4s ease-out; }

body > section#search > div > form > div > ul::before { content: ''; position: absolute; top: 0; left: 0; border: solid 2px #FFFFFF; border-radius: 2em; width: calc(100% - 4px); height: calc(100% - 4px); }

body > section#search > div > form > div > ul > li { position: relative; }
body > section#search > div > form > div > ul > li:first-child { padding-top: 0.5em; }
body > section#search > div > form > div > ul > li:last-child { padding-bottom: 0.5em; }
body > section#search > div > form > div > ul > li > input { opacity: 0; position: absolute; top: 0; left: 0; }
body > section#search > div > form > div > ul > li > label { display: block; padding: 0.5em 1em; }


body > section#search > div > form > button { display: block; border: solid 2px #FFFFFF; padding: 1em 2em; outline: none; font-family: 'Work Sans', sans-serif; font-size: 1em; font-weight: 600; border-radius: 3em; background-color: #FFFFFF; color: #0060AD; white-space: nowrap; width: 14em; }


/* Hide type selector if type is defined */
/* body > section#search form.lots .selector#searchtype { display: none; } */
/* body > section#search form.packages .selector#searchtype { display: none; } */
/* Hide options not applicable if type is defined */
/* Add .packages to li.option only applicable to House & Land, add .lots to li.option only applicable to Land */
body > section#search form.lots li.option.packages { display: none; }
body > section#search form.packages li.option.lots { display: none; }
/* Change word on button based on defined type */
body > section#search form.lots > button::after { content: 'lots'; }
body > section#search form.packages > button::after { content: 'packages'; }

body > section > .content { width: 40%; padding-top: 4em; position: relative; }
body > section > .content h1 { font-size: 5.4em; font-weight: 500; margin: 0; }
body > section > .content h2 { font-size: 2.4em; font-weight: 500; margin: 1.4em 0; color: #00529C; }
body > section > .content p { font-size: 1.6em; font-weight: 500; line-height: 1.5em; margin: 1em 0; }
body > section.lot > .content > p:first-of-type > span::after { content: '\00B7'; margin: 0 1em; color: #BABABA; }
body > section.lot > .content > p:first-of-type > span:last-of-type::after { display: none; }
body > section.package > .content > p > span::after { content: '\00B7'; margin: 0 1em; color: #BABABA; }
body > section.package > .content > p > span:last-of-type::after { display: none; }
body > section > .content > p.price { font-size: 3em; }

body > section > .content .video { width: 100%; margin: 4em 0; position: relative; border: solid 2px #FFFFFF; }
body > section > .content .video > video { width: 100%; }
body > section > .content .video::after { content: '\e811'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 0.6em 0.55em 0.6em 0.65em; border-radius: 3em; background-color: #00284B; color: #FFFFFF; font-family: 'bisicons'; line-height: 1em; font-size: 3em; pointer-events: none;  }
body > section > .content .video.ld::after { display: none; }
body > section > .content .video > .controls { position: absolute; bottom: 0; left: 0; padding: 0 2em; width: calc(100% - 4em); background: rgba(0,40,75,0.8); color: #FFFFFF; display: flex; justify-content: stretch; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body > section > .content .video.ld > .controls { opacity: 1; pointer-events: all;  }
body > section > .content .video > .controls button { background: transparent; border: none; color: #FFFFFF; font-size: 2em; padding: 0.8em 0.3em; flex: 0; }
body > section > .content .video > .controls .progress { flex: 1; margin: 0 1em; position: relative; border: none; color: #7FBEF1; background-color: #FFFFFF; height: 1em; border-radius: 1em; overflow: hidden; }
body > section > .content .video > .controls .progress::-webkit-progress-bar { background-color:#FFFFFF; display: inline-block; }
body > section > .content .video > .controls .progress::-webkit-progress-value { background-color:#7FBEF1; }

body > section > .content .video > .controls > button.unfullscreen { display: none; }
body > section > .content .video.full > .controls > button.unfullscreen { display: inline-block; }
body > section > .content .video.full > .controls > button.fullscreen { display: none; }

body > section > .content .video > .controls > button.pause { display: none; }
body > section > .content .video.playing > .controls > button.pause { display: inline-block; }
body > section > .content .video.playing > .controls > button.play { display: none; }

body > section > .content .video > .controls > button.mute { display: none; }
body > section > .content .video.muted > .controls > button.mute { display: inline-block; }
body > section > .content .video.muted > .controls > button.sound { display: none; }


body > section > .content .video.full { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: none; background-color: #000000; z-index: 990; display: flex; }
body > section > .content .video.full > video { width: 100%; margin: auto; }


body > section > .content > .links { display: flex; font-size: 1.8em; }
body > section > .content > .links > a { display: block; padding-right: 3em; margin-right: 3em; font-weight: 600; }
body > section > .content > .links > a:first-of-type { border-right: solid 2px #E2E2E2; }
body > section > .content > .links > a > i { display: block; }
body > section > .content > .links > a > i:first-of-type { font-size: 2em; }
body > section > .content > .links > a > i:last-of-type { color: #7FBEF1; }
body > section > .content > .links > a > span { display: block; margin: 0.7em 0; }
body > section.lot > .content > .links { padding: 3em 0; margin: 3em 0; border-top: solid 2px #E2E2E2; border-bottom: solid 2px #E2E2E2; }
body > section.package > .content > .links { padding: 3em 0; margin: 3em 0; border-top: solid 2px #E2E2E2; border-bottom: solid 2px #E2E2E2; }

body > section > .content > .links > button { display: block; background: transparent; border: none; color: #00529C; padding-right: 3em; margin-right: 3em; text-align: inherit; font-size: inherit; font-weight: 600; font-family: inherit; }
body > section > .content > .links > button { font-size: .9em; font-weight: 300; }
body > section > .content > .links > button:first-of-type { border-right: solid 2px #E2E2E2; }
body > section > .content > .links > button > i { display: block; }
body > section > .content > .links > button > i:first-of-type { font-size: 2em; }
body > section > .content > .links > button > i:last-of-type { color: #7FBEF1; }
body > section > .content > .links > button > span { display: block; margin: 0.7em 0; }

body > section > .content > .links > div.qr { margin: 0; padding: 0; width: 17em; display: block; font-weight: 600; transition: transform 0.3s ease; }
body > section > .content > .links > div.qr > img { width: 100%; }
body > section > .content > .links > div.qr.expand { transform: scale(3); }

body > section > .content a.featurelink { border: solid 2px #7FBEF1; padding: 1em; border-radius: 3em; font-weight: 500; }
body > section > .content a.featurelink > i { color: #7FBEF1; margin-right: 0.5em; }

body > section > .content > .note { color: #BABABA; border: solid 2px; padding: 0.7em 2em; border-radius: 3em; position: absolute; top: 4em; right: 0; font-size: 1.4em; font-weight: 500; }

body > section.packages > .content { width: calc(100% - 4em); padding-right: 4em;  }
body > section.lots > .content { width: calc(100% - 4em); padding-right: 4em;  }

body > section#about > .content { width: calc(100% - 16em); padding-right: 16em;  }
body > section#videos > .content { width: calc(100% - 16em); padding-right: 16em;  }

body > section > .content > table { width: 100%; text-align: left; }
body > section > .content > table > thead { color: #999999; }
body > section > .content > table > thead > tr > th { font-weight: 500; padding: 1em; border-bottom: solid 2px #E2E2E2; }
body > section > .content > table > thead > tr > th:first-child { padding-left: 0; }
body > section > .content > table > thead > tr > th:last-child { padding-right: 0; }
body > section > .content > table > thead > tr > th.head { padding: 1em 0; }
body > section > .content > table > thead > tr > th.head h3 { margin: 5px 0; color: #00529C; font-size: 2em; }
body > section > .content > table > tbody > tr > td { vertical-align: top; padding: 1em; border-bottom: solid 2px #E2E2E2; }
body > section > .content > table > tbody > tr > td > img { width: 100%; }
body > section > .content > table > tbody > tr > td:first-child { padding-left: 0; padding-right: 0; }
body > section > .content > table > tbody > tr > td:last-child { padding-right: 0; }
body > section > .content > table > tbody > tr > td:nth-of-type(1) { width: 180px; }
body > section > .content > table > tbody > tr > td:nth-of-type(2) { width: 100px; }
body > section > .content > table > tbody > tr > td > p { margin: 0; font-size: 1.2em; line-height: 1.1em; }
body > section > .content > table > tbody > tr > td > p:nth-of-type(1) { margin-bottom: 1em; }

body > section > .content > .tabs { width: 100%; }
body > section > .content > .tabs > nav { margin-bottom: -1px; width: calc(50%); position: relative; z-index: 100; margin-top: 4em; }
body > section > .content > .tabs > nav > button { background: #F2F2F2; border-left: solid 1px #7FBEF1; border-right: solid 1px #7FBEF1; border-top: solid 1px #7FBEF1; border-bottom: solid 1px #7FBEF1;  border-top-left-radius: 2em; border-top-right-radius: 2em; padding: 1.5em; font-size: 1.4em; color: inherit; font-family: inherit; font-weight: 500; color: #BABABA; }
body > section > .content > .tabs > nav > button.active { border-bottom: solid 1px #7FBEF1; color: #00529C; border-bottom: solid 1px transparent; }
body > section > .content > .tabs > section { width: 100%; position: relative; z-index: 50; display: none; padding-bottom: 4em; }
body > section > .content > .tabs > section.active { display: flex; }
body > section > .content > .tabs > section > .main { width: calc(60% - 14em); border-right: solid 1px #7FBEF1; border-top: solid 1px #7FBEF1; border-top-right-radius: 2em; padding: 4em 12em 0 0; height: 70vh; }
body > section > .content > .tabs > section > .sidebar { width: 40%; padding-top: 4em; height: 70vh; overflow-y: scroll; }
body > section > .content > .tabs > section > .sidebar > li { padding-left: 31em; position: relative; min-height: 12em; margin-bottom: 2em; }
body > section > .content > .tabs > section > .sidebar > li::before { content: ''; width: 9px; height: 9px; border: solid 1px #7FBEF1; border-radius: 9px; position: absolute; top: 0; left: -6px; background: #F2F2F2; }
body > section > .content > .tabs > section > .sidebar > li > div { position: absolute; top: 0; left: 8em; width: 21em; height: 12em; background-size: cover; background-position: center center; }
body > section > .content > .tabs > section > .sidebar > li > h3 { font-size: 1.8em; color: #00529C; margin: 0; font-weight: 500; }
body > section > .content > .tabs > section > .sidebar > li > p { font-size: 1.4em; }

body > section > .map { position: absolute; right: 0; top: 4em; border: solid 2px #FFFFFF; height: calc(100% - 11em); width: calc(50% - 16em); border-top-left-radius: 4em; border-bottom-left-radius: 4em; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 0.5s linear 0s; }
body > section.active > .map { clip-path: inset(0 0 0 0); transition: clip-path 0.5s linear 1s; }

body > section > .packageimage { position: absolute; right: 0; top: 4em; border: solid 2px #FFFFFF; height: calc(50% - 6em); width: calc(50% - 16em); border-top-left-radius: 4em; border-bottom-left-radius: 4em; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 0.5s linear 0.3s; }
body > section.active > .packageimage { clip-path: inset(0 0 0 0); transition: clip-path 0.5s linear 1s; }
body > section > .packageimage > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }

body > section > .packageflyer { position: absolute; right: 0; bottom: 4em; border: solid 2px #FFFFFF; height: calc(50% - 6em); width: calc(50% - 16em); border-top-left-radius: 4em; border-bottom-left-radius: 4em; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 0.5s linear 0s; background-color: #FFFFFF; }
body > section.active > .packageflyer { clip-path: inset(0 0 0 0); transition: clip-path 0.5s linear 1.3s; }
body > section > .packageflyer > div { position: absolute; top: 2em; left: 2em; width: calc(100% - 4em); height: calc(100% - 4em); background-size: contain; background-position: center center; background-repeat: no-repeat; }

body > section > .lightbox.active { position: fixed; right: 0; top: 0; width: calc(100% - 22em); height: 100%; border-radius: 0; background-color: rgba(0,0,0,0.9); border: 0; z-index: 100; }
body > section > .lightbox.active > div { top: 2em; left: 2em; width: calc(100% - 4em); height: calc(100% - 4em); background-size: contain; background-position: center center; }

.scroller { height: 100%; overflow-y: auto; padding-right: 2em; }

.scroller::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;

}

.scroller::-webkit-scrollbar
{
  width: 6px;
  background-color: #F5F5F5;
}

.scroller::-webkit-scrollbar-thumb
{
  background-color: #7FBEF1;
    background-clip: padding-box;
}

/* Delete below, just for demo site */
.tempsearch { position: absolute; top: 0; right: 0; padding: 5px; margin: 5px; border: solid 1px; }

body > section > .content .video::after { display: none !important; }

.gm-style .bisinella-controls {
  font-size: 28px; /* this adjusts the size of all the controls */
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  box-sizing: border-box;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  height: 1.5em;
  margin: 6px;
  text-align: center;
  user-select: none;
  padding: 2px;
  width: 1.5em;
}

.gm-style .bisinella-controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
}

.gm-style .bisinella-controls button:hover {
  color: rgba(0, 0, 0, 0.9);
}

.gm-style .bisinella-controls.bisinella-zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
}

.gm-style .bisinella-controls.bisinella-zoom-control button {
  font: 0.85em Arial;
  margin: 1px;
  padding: 0;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control {
  height: 1.5em;
  width: 1.5em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control button {
  display: block;
  font-size: 1em;
  height: 100%;
  width: 100%;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control .fullscreen-control-icon {
  border-style: solid;
  height: 0.2em;
  position: absolute;
  width: 0.2em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 2px 0 0 2px;
  left: 0.20em;
  top: 0.20em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 0 2px 2px 0;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 2px 2px 0 0;
  right: 0.20em;
  top: 0.20em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 0 0 2px 2px;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 0 0 2px 2px;
  left: 0.20em;
  bottom: 0.20em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 2px 2px 0 0;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 0 2px 2px 0;
  right: 0.20em;
  bottom: 0.20em;
}

.gm-style .bisinella-controls.bisinella-fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 2px 0 0 2px;
}