/* General Settings */

* { box-sizing: border-box; padding: 0; margin: 0; }
html { overflow-x: hidden; overflow-y: auto; font-family: 'Roboto', sans-serif; font-weight: 400; background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; scroll-behavior: smooth; }
img { height: auto; max-width: 100%; }

.fa, .fab, .fad, .fal, .far, .fas { line-height: inherit !important; }

[class*="col-"] { width: 100%; float: left; padding: 60px 40px; }
.row::after { content: ""; clear: both; display: table; }
.nopad { padding: 0 0 0 0;}
.headingpad { padding: 0 40px; }
.contactpad1 { padding: 40px 40px 20px; }
.contactpad2 { padding: 20px 40px 0px;  }
.contactpad3 { padding: 20px 40px 65px;  }
.noTopPad { padding-top: 0; }
.anchor { visibility: hidden; display: block; }

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

#topBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; color: #fff; background-color: #333; padding: 8px 10px 9px 10px; margin: 0; cursor: pointer; transition: 0.2s; border-radius: 50%; }
#topBtn:hover { color: #a36209; background-color: #000; }

.container { position: relative; width: 100%; padding: 0; margin: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; background-color: #f2f2f2; }
.section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; }

.white { background-color: #f2f2f2; z-index: 2; }
.gray { background-color: #666; }

/*
.herovideo::before { position: absolute; width: 100vw; top: 0; content: ''; height: 100%;  z-index: 2 !important; transform: translateZ(-1px) scale(1.5); background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.4) 100%); }
.herovideo { position: relative; transform: translateZ(-1px) scale(1.5); background-size: cover; z-index: -2; height: 650px; }
.herovideo::after { content: ""; position: absolute; top: 50% !important; left: 0; min-height: 100vh; transform: translateY(-50%) translateZ(0px) scale(1); right: 0; bottom: 0; left: 0; background-size: cover !important; z-index: -3; background: #000 url('../images/welcome_hero.jpg') no-repeat center center; }
.herovideo iframe, .herovideo::before { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  z-index: -2; }
*/

.herotitle { position: absolute; display: flex; align-items: center; height: 100%; max-height: 410px; width: 100%; margin: 0 auto; padding: 0 50px; z-index: 3; top: calc(50% - 120px); }
#hero_title { position: relative; max-width: 1400px; margin: 0 auto; } 
#hero_title h1 { font-family: 'Gelasio', serif; font-size: 70px; font-weight: 600; color: #fff; line-height: 1.1; text-align: center; margin-bottom: 10px; animation-delay: 1.25s !important; }
#hero_title p { font-size: 24px; color: #fff; line-height: 1.2; text-align: center; animation-delay: 1.5s !important; }

#hero_caption { position: relative; padding: 0; margin: 0 auto; width: 100%; z-index: -1; background-color: #a36209; padding: 15px 40px; display: flex; align-items: center; justify-content: center;}
#hero_caption p { font-size: 17px; color: #fff; line-height: 1.2; text-align: center; }
#hero_caption p span { font-weight: 600; }

.hero { background-color: #000; height: auto; max-height: 650px; overflow-y: hidden; position: relative; z-index: 2; }
.videowrapper { float: none; clear: both; width: 100%; padding-bottom: 56.2%; height: 0; /* Put the video in the background */ position: relative; top: 0; left: 0; z-index: -1; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.videowrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: fade-in 1s ease both; animation-delay: 1s !important; background-size: cover !important; background-position: center !important; object-fit: inherit; }
.videowrapper::after { position: absolute; content: ""; max-height: 650px; top: 0; left: 0; right: 0; bottom: 0; left: 0; z-index: -3; /*background-image: url("../images/welcome_hero.jpg"); background-size: cover !important; background-position: center !important; animation: fade-in 1s ease both; animation-delay: 0s !important;*/ }
.videowrapper::before { position: absolute; content: ""; max-height: 650px; width: 100%; top: 0; left: 0; right: 0; bottom: 0; left: 0; height: 100vh; z-index: 2 !important; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%); animation: fade-in 1s ease both; animation-delay: 0s !important; }

.videowrapper video.loading {
    background: red;
    background-image: url("../images/welcome_hero.jpg");
    background-size: cover !important;
    background-position: center !important;
    animation: fade-in 1s ease both;
}

.videowrapper .placeholder::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/loader_white.png");  background-position: 50% 50% !important; background-repeat: no-repeat; }
.videowrapper .placeholder {
    display: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/welcome_hero.jpg");
    background-size: cover !important;
    background-position: center !important;
    animation: fade-in 1s ease both;
}

/*
.hero video { object-fit: cover; width: 100%; height: 100%; }
.hero::before { position: absolute; content: ""; max-height: 650px; width: 100%; top: 0; left: 0; right: 0; bottom: 0; left: 0; height: 100vh; z-index: 2 !important; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 100%); }
*/

/* Header Styles */

#header { position: absolute; width: 100%; height: 240px; margin: 0 auto; top: 0; z-index: 3000;}
#header_main { position: absolute; width: 100%; top: 165px;}

#logo { z-index: 4000;position: relative; width: 422px; height: 155px; top: 0px; left: auto; display: block; text-align: center; margin: 0 auto; padding: 0; background: url('../images/shc_logo.png') no-repeat 0 0; background-size: contain; }
#nav { position: absolute; margin: 0 auto; height: 73px; width: 100%; top: 0px; left: 0; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }

#contact { position: absolute; left: 3%; top: 60px; z-index: 4000;}
#book { position: absolute; right: 3%; top: 60px; z-index: 4000;}
#contact a, #book a { display: flex; color: #fff; cursor: pointer; text-align: center; padding: 5px 10px; text-decoration: none; text-transform: uppercase; transition: 0.2s; font-size: 16px; font-weight: 500; align-items: center; }
#contact a span, #book a span { transition: 0.2s; }
#contact a:hover span, #book a:hover span { opacity: .75; transition: 0.2s; }
#contact a:hover > i, #book a:hover > i { animation: ringring .5s ease both; }
#contact a > i, #book a > i { margin-right: 10px; }

.cta { position: relative; width: 250px; padding: 15px 25px; margin: 0; display: inline-block; text-align: center; text-decoration: none; font-size: 18px; font-weight: 500; transition: 0.25s; }
.cta.brownbtn { background: none; color: #a36209; border: 1px solid #a36209; }
.cta.brownbtn:hover { box-shadow: inset 250px 0 0 0 #a36209; color: #ffffff; text-decoration: none; transition: .2s; }
.cta.whitebtn { background: none; color: #fff; border: 1px solid #fff; }
.cta.whitebtn:hover { box-shadow: inset 250px 0 0 0 #ffffff; color: #666666; text-decoration: none; transition: .2s; }

#meet { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; }
#meet h1 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; line-height: 1.1; text-align: center; }
#meet h1::before { position:relative; content: ""; background: url("../images/logo_small_gray.png") no-repeat center center; background-size: contain; text-align: center; width: 44px; height: 41px; display: block; margin: auto; top: 0; margin-bottom: 25px; animation: scaleDown1 .5s ease both; animation-delay: 1s !important; }
#meet h2 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; margin-bottom: 25px; line-height: 1.1; }
#meet h2::after { position: relative; content: ""; width: 40%; height: 1px; display: block; margin: 25px 0; background-color: #a36209; }
#meet p { font-size: 16px; color: #333; font-weight: 300; line-height: 1.5; margin-bottom: 25px; }
#meet p:last-child { margin-bottom: 65px; }
#meet img { width: 100%; max-width: 900px; vertical-align: center; justify-items: right; }

.blurb_box { position: absolute; max-width: 550px; background-color: #fff; padding: 55px; }
.blurb_box.left { margin-right: auto; left: 40px; }
.blurb_box.right { margin-left: auto; right: 40px; }
.alignleftcenter { position: relative; display: flex; align-items: center; justify-content: flex-start; }
.alignrightcenter { position: relative; display: flex; align-items: center; justify-content: flex-end; }

.split-full { display: flex; flex-wrap: wrap; overflow: hidden; }
.split-text-wrapper {  max-width: 27.5rem; }
.split-text { width: 50%; display: flex; justify-content: center; align-items: center; padding: 3.75rem 5vw; }
.split-text h2 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #fff; margin-bottom: 25px; line-height: 1.1; }
.split-text p { font-size: 16px; color: #fff; font-weight: 300; line-height: 1.5; margin-bottom: 25px; }
.split-text p:last-child { margin-bottom: 65px; }
.split-image { width: 50%; min-height: 37.5vw; background-image: url("../images/welcome_discover.jpg"); background-size: cover; background-position: center; }

#area { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; }
#area h2 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; margin-bottom: 25px; line-height: 1.1; }
#area h2::after { position: relative; content: ""; width: 40%; height: 1px; display: block; margin: 25px 0; background-color: #a36209; }
#area p { font-size: 16px; color: #333; font-weight: 300; line-height: 1.5; margin-bottom: 25px; }
#area img { width: 100%; max-width: 900px; vertical-align: center; justify-items: right; }

#covid_message { background-color: #a36209; width: 100%; height: auto; border-radius: 10px; padding: 30px; }
#covid_message p { display: flex; flex-grow: 1; align-items: center; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; margin-bottom: 0px; line-height: 1.5; }
#covid_message p > i { font-size: 30px; margin-right: 30px; }

#policies { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; }
#policies h2 { font-family: 'Gelasio', serif; font-size: 28px; font-weight: 600; line-height: 1.2; color: #a36209; padding: 10px 0px 20px;}
#policies .headingpad h2 { padding: 0px 0px; }
.general_policies .item { display: flex; flex-wrap: nowrap; align-items: center; row-gap: 10px; column-gap: 2em; margin-bottom: 60px; }
.general_policies .item p {  display: initial; color: #333; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.5; }
.general_policies .item p span { font-weight: 600; }
.general_policies .item i { min-width: 90px; font-size: 60px; color: #a36209; }

#rates { width: 100%; height: auto; border-radius: 10px; padding: 30px; background-color: #ddd; /*background-image: url("../images/accomodation_rates.jpg"); */height: 100%; /*background-position: bottom; background-repeat: no-repeat; background-size: cover;*/ }
#rates h2 { font-family: 'Gelasio', serif; font-size: 36px; color: #333 !important; font-weight: 600; line-height: 1.2; padding: 0px; text-align: center; }
#rates h2::after { width: 100%; height: 1px; display: block; margin: 25px 0; background-color: rgba(0, 0, 0, .4); }
#rates h2.noline::after { width: 100%; height: 0px; display: block; margin: 10px 0 0; background-color: rgba(0, 0, 0, 0); }
#rates p.breakline::after { content: ''; width: 100%; height: 1px; display: block; margin: 25px 0; background-color: rgba(0, 0, 0, .4); }
.rates_row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.rates_column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; }
.rates_column h4 { font-family: 'Gelasio', serif; font-size: 22px; color: #333 !important; font-weight: 600; line-height: 1.2; padding: 10px 0px 10px; text-align: center; }
.rates_column h3 { font-family: 'Gelasio', serif; font-size: 36px; font-weight: 600; line-height: 1.2; color: #333; padding: 10px 0px 10px; text-align: center; }
.rates_column h3 span { font-family: 'Gelasio', serif; font-size: 16px; font-weight: 500; line-height: 1.2; color: #333; }
.rates_column p {  display: initial; color: #333 !important; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.5; margin-bottom: 0px !important; font-size: 16px; }
.rates_column p:last-child { font-size: 14px !important; margin-bottom: 20px; }

#rates2 { width: 100%; height: auto;   border-radius: 10px; padding: 30px; height: 100%; background-color: #ddd; }
#rates2 h2 { font-family: 'Gelasio', serif; font-size: 36px; color: #333 !important; font-weight: 600; line-height: 1.2; padding: 0px; text-align: center; }
#rates2 h2::after { width: 100%; height: 1px; display: block; margin: 25px 0; background-color: rgba(0, 0, 0, .4); }
#rates2 .rates_row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
#rates2 .rates_column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; }
#rates2 .rates_column h4 { font-family: 'Gelasio', serif; font-size: 22px; color: #333 !important; font-weight: 600; line-height: 1.2; padding: 10px 0px 10px; text-align: center; }
#rates2 .rates_column h3 { font-family: 'Gelasio', serif; font-size: 36px; font-weight: 600; line-height: 1.2; color: #333; padding: 10px 0px 10px; text-align: center; }
#rates2 .rates_column h3 span { font-family: 'Gelasio', serif; font-size: 16px; font-weight: 500; line-height: 1.2; color: #333; }
#rates2 .rates_column p {  display: initial; color: #333 !important; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.5; margin-bottom: 0px !important; font-size: 16px; }
#rates2 .rates_column p:last-child { font-size: 14px !important; margin-bottom: 20px; }

h4.avail { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; line-height: 1.1; text-align: center; }

#prefooter { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; }
#prefooter h1 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #fff; line-height: 1.1; text-align: center; margin-bottom: 25px; }
#prefooter h1::before { position:relative; content: ""; opacity: .5 !important; background: url("../images/logo_small_white.png") no-repeat center center; background-size: contain; text-align: center; width: 44px; height: 41px; display: block; margin: auto; top: 0; margin-bottom: 25px; }
#prefooter_buttons { position: relative; max-width: 1400px; margin: 0 auto; text-align: center; }
#prefooter_buttons a { display: inline-block; margin-right: 30px; }
#prefooter_buttons a:last-child { margin-right: 0px; }

.breakline { border-top: 1px solid rgba(255,255,255,.25); }

#footer { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; padding-bottom: 30px;}
#footer_logo { position: relative; width: 220px; height: 81px; display: block; text-align: center; background: url('../images/shc_logo.png') no-repeat 0 0; background-size: contain; }
#footer p { color: #fff; line-height: 1.2; }
#footer a.foot { display: inline-flex; color: #fff; cursor: pointer; text-align: left; padding: 5px 0px; text-decoration: none; transition: 0.2s; font-size: 16px; font-weight: 300; line-height: 1.2; align-items: center; }
#footer a.foot span { transition: 0.2s; }
#footer a.foot:hover span { opacity: .5 !important; text-decoration: underline !important; transition: 0.2s; }
#footer a.foot:hover > i { animation: ringring .5s ease both; }
#footer a.foot > i { margin-right: 10px; }
.footerdisplay { display: flex; align-items: center; justify-content: space-between; }

/* Subpage Settings */

.subcontent { width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 30px; }
.subcontent h1 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; margin-bottom: 15px; line-height: 1.2; text-align: center; }
.subcontent h1::before { position:relative; content: ""; background: url("../images/logo_small_gray.png") no-repeat center center; background-size: contain; text-align: center; width: 44px; height: 41px; display: block; margin: auto; top: 0; margin-bottom: 25px; animation: scaleDown1 .5s ease both; animation-delay: 1s !important; }

.subcontent h2 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; margin-bottom: 15px; line-height: 1.2; }
.subcontent h2::after { position: relative; content: ""; width: 40%; height: 1px; display: block; margin: 25px 0; background-color: #a36209; }
.subcontent h5 { font-family: 'Gelasio', serif; font-size: 40px; font-weight: 400; color: #666; margin-bottom: 15px; line-height: 1.2; text-align: center; }
.subcontent h5::after { position: relative; content: ""; width: 20%; height: 1px; display: block; margin: 25px auto 50px; background-color: #a36209; }

.subcontent p { font-size: 16px; color: #333; font-weight: 300; margin-bottom: 25px; line-height: 1.5; text-align: center; }
.subcontent p span { font-weight: 500; }
.subcontent p span.brown { font-weight: 600; color: #a36209; }
.subcontent p span.important { font-weight: 600; color: #f00; }
.subcontent p i { font-style: italic; }
.subcontent p > a { font-weight: 300; text-decoration: underline; color: #a36209; }
.heading { margin-bottom: 0px !important; }

.split-container { display: flex; flex-wrap: wrap; align-items: center; padding: 30px 40px 60px 40px; margin: 0 auto; }
.split-container .split-image { width: 50%; background-position: center; background-size: cover; background-image: none; min-height: auto; }
.split-container .split-image img { width: 100%; max-height: 900px; vertical-align: center; justify-items: right; }

.split-container .split-text { display: flex; justify-content: center; align-items: center; width: 50%; padding: 0 0 0 0; }
.split-container .split-text.leftside { padding-right: 5vw; }
.split-container .split-text.rightside { padding-left: 5vw; }
.split-container .split-text p { text-align: left; }

.subhero::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; top: 0%; left: 0%; z-index: 2 !important; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.0) 100%);  }
.subhero { position: relative; overflow-y: hidden; width: 100%; z-index: 1; height: 650px; /* transform: translateZ(-2px) scale(2) translateY(-70px); */}
.subhero.accomodations { background-image: url("../images/accomodation_hero.jpg"); background-size: cover !important; background-position: center !important; }
.subhero.book { background-image: url("../images/book_hero.jpg"); background-size: cover !important; background-position: center !important; }
.subhero.discover { background-image: url("../images/discover_hero.jpg"); background-size: cover !important; background-position: center !important; }
.subhero.policy { background-image: url("../images/policy_hero.jpg"); background-size: cover !important; background-position: center !important; }

.subhero_title { position: absolute; width: 100%; margin: 0 auto; padding: 0 50px; height: 100%; display: flex; align-items: center; top: calc(50% - 235px); z-index: 3; }
#subhero_title { position: relative; max-width: 1200px; margin: 0 auto; } 
#subhero_title h1 { font-family: 'Gelasio', serif; font-size: 70px; font-weight: 600; color: #fff; line-height: 1.1; text-align: center; margin-bottom: 10px; animation-delay: 1.25s !important; }
#subhero_title p { font-size: 24px; color: #fff; line-height: 1.2; text-align: center; animation-delay: 1.5s !important; }

#subhero_caption { position: relative; padding: 0; margin: 0 auto; bottom: 0; width: 100%; z-index: 0; background-color: #a36209; padding: 15px 40px; display: flex; align-items: center; justify-content: center; }
#subhero_caption p { font-size: 17px; color: #fff; line-height: 1.2; text-align: center; }
#subhero_caption p span { font-weight: 600; }
/*
.subhero_title { position: absolute; width: 100%; margin: 0 auto; padding: 0 50px; top: calc(75% - 250px); }
#subhero_title { position: relative; max-width: 1200px; margin: 0 auto; } 
#subhero_title h1 { font-family: 'Gelasio', serif; font-size: 70px; font-weight: 600; color: #fff; line-height: 1.1; text-align: center; margin-bottom: 10px; animation-delay: 1.25s !important; }
#subhero_title p { font-size: 24px; color: #fff; line-height: 1.2; text-align: center; animation-delay: 1.5s !important; }

#subhero_caption { position: relative; padding: 0; margin: 0 auto; top: 650px; width: 100%; z-index: -1; background-color: #a36209; padding: 15px 40px; display: flex; align-items: center; justify-content: center; }
#subhero_caption p { font-size: 17px; color: #fff; line-height: 1.2; text-align: center; }
#subhero_caption p span { font-weight: 600; }

#subhero_caption { position: relative; padding: 0; margin: 0 auto; width: 100%; z-index: -1; background-color: #a36209; padding: 15px 40px; display: flex; align-items: center; justify-content: center; }
#subhero_caption p { font-size: 17px; color: #fff; line-height: 1.2; text-align: center; }
#subhero_caption p span { font-weight: 600; }
*/

#selection-nav { position: relative; margin: 0 auto; padding: 0; text-align: center; }
#selection-nav select { 
  font-size: 14px; 
  display: inline-block;
  width: 275px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  -webkit-border-radius: 5px;
  background: -webkit-linear-gradient(#333333, #000000); 
  border: 1px solid #aaa;
  color: #333;
  padding: 10px 10px; 
  outline: none;
    margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
  linear-gradient(45deg, transparent 50%, gray 50%),
  linear-gradient(135deg, gray 50%, transparent 50%),
  linear-gradient(to right, #ccc, #ccc);
  background-position:
  calc(100% - 20px) calc(1em + 2px),
  calc(100% - 15px) calc(1em + 2px),
  calc(100% - 2.5em) 0.5em;
  background-size:
  5px 5px,
  5px 5px,
  1px 1.5em;
  background-repeat: no-repeat;
}

.gallery { display: flex; flex-wrap: wrap; justify-content: left; margin-bottom: 10px; }
.gallery a { display: inline-block; width: calc(20% - 10px); text-decoration: none; margin-right: 10px; transition: 0.2s; }
.gallery a img { margin-bottom: 10px !important; transition: 0.2s; }
.gallery a:hover img { opacity: .75; transition: 0.2s; transform: scale(.9); }
.gallery a:nth-child(5n+5) { margin-right: 0px; }

@media only screen and (max-width: 1200px) {
  .blurb_box { position: relative; width: 90% !important; max-width: 90% !important; background-color: #fff; padding: 30px; }
  .blurb_box.left { margin-right: auto; left: 5%; margin-top: -20%; }
  .blurb_box.right { margin-left: auto; right: 5%; margin-top: -20%; }
  .alignleftcenter { position: relative; display: block; align-items: center; justify-content: flex-start; }
  .alignrightcenter { position: relative; display: block; align-items: center; justify-content: flex-end; }
  #meet img, #area img { max-width: 1200px; }
}

@media only screen and (max-width: 1000px) {
  .blurb_box { position: relative; width: 90% !important; max-width: 90% !important; background-color: #fff; padding: 30px; }
  .blurb_box.left { margin-right: auto; left: 5%; margin-top: -10%; }
  .blurb_box.right { margin-left: auto; right: 5%; margin-top: -10%; }
  .alignleftcenter { position: relative; display: block; align-items: center; justify-content: flex-start; }
  .alignrightcenter { position: relative; display: block; align-items: center; justify-content: flex-end; }
  #meet .col-12:first-child { padding-bottom: 0px; }
  #meet h1, .split-text h2, #prefooter h1 { font-size: 30px; line-height: 1.2; }
  #meet h2, #area h2 { font-size: 30px; margin-bottom: 15px; line-height: 1.2; }
  #meet h2::after, #area h2::after { margin: 15px 0; width: 20%; }
  .subcontent h5 { font-size: 30px; }
  .split-container .split-image { width: 100%; }
  .split-container .split-text {  width: 100%; padding-top: 1.5rem; }
  .split-text-wrapper {  max-width: 100%; }
  .split-container .split-text.rightside { padding-left: 0; }
  .split-container { padding: 20px 40px 20px 40px; }
  .split-text p:last-child { margin-bottom: 0px; }
  .split-container:last-child { padding-bottom: 60px; } 
  #hero_title h1 { font-size: 50px; margin-bottom: 10px; }
  #hero_title p { /*display: none;*/ font-size: 18px; }

  .gallery a { width: calc(25% - 10px); margin-right: 10px; }
  .gallery a:nth-child(4n+4) { margin-right: 0px; }
  .gallery a:nth-child(5n+5) { margin-right: 10px; }
}

@media only screen and (max-width: 850px) {
  .herotitle { top: 0; height: 100%; }
  [class*="col-"] { width: 100%; float: left; padding: 30px 30px; }
  #nav { margin: 0 auto; height: 66px; width: 100%; top: 0px; left: 0; border-top: 0px solid rgba(255,255,255,0); border-bottom: 0px solid rgba(255,255,255,0); }
  #logo { position: relative; background: url("../images/logo_small_white.png") no-repeat center center; background-size: contain; text-align: center; width: 32px; height: 30px; display: block; margin: 0 auto; top: 20px; }
  #header { position: sticky; display: list-item; width: 100%; height: 66px; margin: 0 auto; top: 0px; background-color: rgba(0,0,0,1); /*-webkit-box-shadow: 0px 1px 7px rgba(39, 77, 43, .25); box-shadow: 0px 1px 7px rgba(39, 77, 43, .25);*/ }
  #contact { display: none; }
  #book { position: absolute; right: 0; top: 0px; height: 66px; display: block; }
  #book a { background-color: #a36209; display: flex; color: #fff; cursor: pointer; text-align: center; padding: 0px 25px; height: 66px; padding-top: 6px; text-decoration: none; text-transform: uppercase; font-size: 16px; font-weight: 500; align-items: center; }
  #book a span { display: none; }
  #book a:hover { opacity: .75; transition: 0.2s; }
  #book a:hover > i { animation: ringring .5s ease both; }
  #book a > i { margin-right: 0px; }
  .herovideo, .subhero { height: 470px; }
  .herotitle { /*top: calc(50% - 180px);*/ }
  .subhero_title { top: calc(50% - 235px); }
  #hero_title h1 { font-size: 60px; margin-bottom: 20px; }
  #subhero_title h1 { font-size: 60px; margin-bottom: 0px; }
  #hero_title p { font-size: 18px; }
  #hero_caption { line-height: 1.3; padding: 10px 20px; }
  #footer_logo { display: none; }
  .footerdisplay { display: flex; align-items: flex-start; justify-content: space-between; }
  .split-text { width: 100%; display: block; padding: 40px 30px;  }
  .split-image { width: 100%; min-height: 37.5vw;  }
  .split-text-wrapper {  max-width: 100%; }
  #policies .col-6:last-child { padding-top: 0px; margin-bottom: 100px; }
  #policies .col-6:last-child ul li:last-child { margin-bottom: 0px; }
  #policies .col-6 { padding-bottom: 0px; }
  #hero_title p { display: block; }
}

@media only screen and (max-width: 700px) {
  .herovideo, .subhero { height: 300px; }
  .herotitle { /*top: calc(50% - 220px);*/}
  .subhero_title { top: calc(50% - 150px); }
  #hero_title h1,  #subhero_title h1 { font-size: 40px; margin-bottom: 0px; }
  #hero_title p { display: none; font-size: 16px; }
  #hero_caption { line-height: 1.3; padding: 10px 10px; }
  #hero_caption p { font-size: 14px; }
  #subhero_caption p { font-size: 12px; }
  #subhero_caption { padding: 10px 15px; }
  #footer_logo { display: none; }
  .footerdisplay { display: block; }
  #meet h1 { font-size: 24px; line-height: 1.2; }
  .cta { position: relative; width: 80%; padding: 15px 20px; font-size: 16px; }
  .cta.brownbtn:hover { box-shadow: none; background: #a36209 !important; }
  .cta.whitebtn:hover { box-shadow: none; background: #ffffff !important; }
  .break { display: none; }
  .rates_row { flex-direction: column; flex-wrap: wrap; }
  .gallery a { width: calc(50% - 10px); margin-right: 10px; }
  .gallery a:nth-child(2n+2) { margin-right: 0px; }
  .rates_column { margin-bottom: 40px; }
}

@media only screen and (max-width: 850px) {
    .videowrapper .placeholder {
        display: block !important;
        opacity: 1;
    }
    .videowrapper video, .videowrapper .placeholder::before  {
        display: none !important;
        opacity: 0;
    }
    .videowrapper::before { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 100%); }
}

@supports (-webkit-touch-callout: none){
    #logo { top: 10px; }
}

@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2){
       #logo { top: 0px; } 
    }

@media only screen and (max-width: 320px) {
  [class*="col-"] { width: 100%; float: left; padding: 20px 15px; }
  .blurb_box { position: relative; width: 90% !important; max-width: 90% !important; background-color: #fff; padding: 20px; }
  #meet h1, .split-text h2, #prefooter h1 { font-size: 20px; line-height: 1.2; }
  #meet h2, #area h2 { font-size: 20px; margin-bottom: 15px; line-height: 1.2; }
  #meet h2::after, #area h2::after { margin: 15px 0; width: 40%; }
  .cta { width: 100%; padding: 10px 10px; font-size: 14px; }
  #hero_title p { font-size: 14px; }
  #meet p, #area p, #footer p, .split-text p { font-size: 14px; }
  .split-text { padding: 30px 20px; }
  #footer a.foot { font-size: 14px; } 
}

@media only screen and (min-width: 1200px) {
  .herotitle { top: 230px; }
}


/* Styling scrollable elements */

.js-scroll { opacity: 0; transition: opacity 500ms; }
.js-scroll.scrolled { opacity: 1; }

.scrolled.fade-in { animation: fade-in .5s ease both; }
.scrolled.fade-in-top { animation: fade-in-top .5s ease both; }
.scrolled.fade-in-bottom { animation: fade-in-bottom .5s ease both; }
.scrolled.fade-in-left { animation: fade-in-left .5s ease both; }
.scrolled.fade-in-right { animation: fade-in-right .5s ease both; }
.scrolled.scaleX { animation: scaleX .5s ease both; }
.scrolled.scaleDown1 { animation: scaleDown1 .5s ease both; }
.scrolled.scaleDown2 { animation: scaleDown2 2s ease both; }

.entrance.fade-in { animation: fade-in .5s ease both; }
.entrance.fade-in-top { animation: fade-in-top .5s ease both; }
.entrance.fade-in-bottom { animation: fade-in-bottom .5s ease both; }
.entrance.fade-in-left { animation: fade-in-left .5s ease both; }
.entrance.fade-in-right { animation: fade-in-right .5s ease both; }
.entrance.scaleX { animation: scaleX .5s ease both; }
.entrance.scaleDown1 { animation: scaleDown1 .5s ease both; }
.entrance.scaleDown2 { animation: scaleDown2 1s ease both; }

.slide-in { animation: slide-in .5s ease both; }
.slide-out { animation: slide-out .5s ease both; }
.slide-out-start { animation: slide-out-start .5s ease both; }
.ringring{ animation: ringring .5s ease both; }

.delayQuarter { animation-delay: .25s !important; }
.delayHalf { animation-delay: .5s !important; }
.delay3Quarter { animation-delay: .75s !important; }
.delayOne { animation-delay: 1s !important; }

@keyframes fade-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-right { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-top { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-bottom { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scaleX { 0% { opacity: 0; transform: scaleX(0); -webkit-transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); -webkit-transform: scaleX(1); } }
@keyframes scaleDown1 { 0% { opacity: 0; transform: scale(2,2); -webkit-transform: scale(2,2); } 100% { opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1); } }
@keyframes scaleDown2 { 0% { opacity: 0; transform: scale(1.25,1.25); -webkit-transform: scale(1.25,1.25); } 100% { opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1); } }
@keyframes slide-in { 0% { -webkit-transform: translateY(-80px); transform: translateY(-80px); } 70% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } }
@keyframes slide-out { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 100% { -webkit-transform: translateY(-80px); transform: translateY(-80px); } }
@keyframes slide-out-start { 0% { -webkit-transform: translateY(-80px); transform: translateY(-80px); } 100% { -webkit-transform: translateY(-80px); transform: translateY(-80px); } }
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }

@-webkit-keyframes ringring {
  0%, 100% { -webkit-transform: rotate(0); transform: rotate(0);-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
  15% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  30% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
  45% { -webkit-transform: rotate(7.5deg); transform: rotate(7.5deg); }
  60% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  75% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
}
@keyframes ringring {
  0%, 100% { -webkit-transform: rotate(0); transform: rotate(0);-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
  15% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  30% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
  45% { -webkit-transform: rotate(7.5deg); transform: rotate(7.5deg); }
  60% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  75% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
}

@media (prefers-reduced-motion) {
  .js-scroll { opacity: 1; }
  .scrolled { animation: none !important; }
}