- needed to position the dropdown content */
.dropdown {
position: relative;
display: block;
}
/* The container
- needed to position the dropdown content */
.dropdown button {
padding: 0;
}
.dropbtn {
background-color: transparent;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
height: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dropbtn hr {
border-top: 1px solid #0072ce;
border-bottom: 0px solid #0072ce;
width: 22px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #fff;
opacity: .93;
min-width: 200px;
box-shadow: 0px 1px 10px 3px rgba(0,0,0,0.2);
z-index: 999;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: .625em .625em 0em .625em;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #0072ce;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: transparent;
}
.dropdown-content nav dl {
text-align: center;
}
.dropdown-content nav dl dt{
display: inline-block;
min-width: 175px;
margin-bottom: 6%;
}
.dropdown-content nav dl dt a {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-decoration: none;
font-size: .9em;
color: #707070;
padding: .625em .625em 0em .625em;
}
.dropdown-content #nav-on-page {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-decoration: none;
font-size: .9em;
color: #0072ce;
}
.dropdown-content dd {
margin-inline-start: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
text-transform: uppercase;
text-decoration: none;
font-size: .7em;
padding: .625em;
color: #707070;
}
.dropdown-content dd a {
color: #707070;
padding: 0em;
}
.horizontal-nav nav {
display: none;
}
.ie-horizontal-nav {
display: none;
}
.home-page main {
min-height: 100vh;
position: relative;
}
.home-section {
}
.box-section {
width: 100%;
}
.welcome-page-spacing {
margin-bottom: 35%;
}
.home-intro {
display: flex;
flex-direction: column-reverse;
width: 83%;
margin-top: 55%;
margin-left: auto;
margin-right: auto;
}
.experience-medallion {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
}
.experience-medallion-img {
width: 100%;
}
.home-intro hr {
width: 60%;
border-top: .1em solid #0072ce;
margin: 0em auto 1.5em auto;
}
.home-intro-title {
margin-bottom: .25em;
}
.home-intro-title p {
/*font-family: 'EB Garamond', serif;*/
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: #ffffff;
text-align: left;
font-size: 1.25em;
font-weight: 300;
letter-spacing: .05em;
margin-block-start: 0em;
margin-block-end: 0em;
}
.home-intro-copy {
}
.home-intro-text {
/* border-left: 1px solid #0072ce;
border-left: .2em solid #0072ce;
padding-left: .75em;*/
}
.home-intro-text p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
/* text-align: left; */
text-align: center;
font-size: .8em;
font-weight: 400;
margin-block-start: .0em;
margin-block-end: 1.5em;
}
.home-welcome-booking {
margin-top: 10%;
margin-bottom: 10%;
}
.home-welcome-booking-title p {
font-family: 'Montserrat', sans-serif;
color: #373A36;
text-align: center;
text-transform: uppercase;
font-size: .7em;
font-weight: 500;
margin-block-start: .4375em;
margin-block-end: 0em;
}
.home-welcome-booking-copy p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
font-size: .7em;
font-weight: 300;
margin-block-start: 0em;
margin-block-end: 1.5em;
}
.booking-btn {
height: 25px;
width: 110px;
background: #0072ce; /* previous grey #afb1b4 or #58595b */
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 8px;
margin-top: 4%;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
opacity: .9;
}
.booking-btn-ie {
display: none;
}
.home-welcome-booking-btn a {
text-decoration: none;
}
.booking-btn p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: #ffffff;
text-align: center;
font-size: .75em;
line-height: .85em;
font-weight: 700;
margin-block-start: 0em;
margin-block-end: 0em;
margin-top: 1.5%;
}
.divider-black {
fill: #58595b; /* previous grey #707070 */
}
.home-page .divider-black {
fill: #000000; /* previous grey #58595b */
}
.home-page footer {
position: relative;
}
footer {
background-color: #000000; /* previous greys #707070 & #58595b */
}
.home-page footer {
background-color: #000000; /* previous grey #58595b */
}
.footer-section-contact-info {
display: flex;
flex-flow: column;
}
.footer-section-copyright {
display: flex;
flex-flow: column;
}
.footer-social-block,
.footer-logo-block,
.footer-contact-us {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: .8;
}
.footer-social-block:hover,
.footer-logo-block:hover,
.footer-contact-us:hover {
opacity: 1;
}
.footer-social-block .footer-contact-info {
display: block;
}
.footer-social-title {
display: block;
}
.footer-social-title p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
font-size: .8em;
font-weight: 300;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.footer-social-media-nav ul {
list-style-type: none;
margin-top: .65625em;
margin-bottom: .65625em;
padding-left: 0;
display: flex;
justify-content: center;
flex-direction: row;
/*justify-content: space-between;*/
}
.footer-social-media-nav ul li {
width: 13%;
margin: 0% 2.5%;
/* display: flex;
justify-content: center;
align-items: center; */
}
.footer-social-media-nav ul li a {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.footer-social-media-nav ul li img {
width: 100%;
}
.footer-logo {
display: none;
}
.footer-contact-info {
margin-top: 6%;
}
footer hr {
width: 60%;
border-top: 1.5px solid #0072ce;
margin: 1% auto 3% auto;
}
.footer-contact-info-title p {
font-family: 'Montserrat', sans-serif;
text-transform: capitalize;
color: #ffffff;
text-align: center;
font-size: 1em;
font-weight: 600;
margin-block-start: .2em;
margin-block-end: .2em;
}
.footer-contact-info-address p,
.footer-contact-info-email p,
.footer-contact-info-ph p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
font-size: .9em;
font-weight: 300;
margin-block-start: .2em;
margin-block-end: .2em;
}
.footer-contact-info .address {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.footer-contact-info-address a:hover,
.footer-contact-info-address a:hover {
color: #0072ce;
}
.footer-contact-info .email {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.footer-contact-info-email a:hover,
.footer-contact-info-ph a:hover,
.footer-contact-us-subtitle a:hover {
color: #0072ce;
}
.footer-contact-info .phone-number {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.footer-social-icon-block {
width: 30%;
margin-top: 2%;
margin-right: auto;
margin-bottom: 2%;
margin-left: auto;
}
.footer-social-icon-block img {
width: 100%;
}
.footer-contact-us {
display: block;
}
.footer-copyright-info p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: .43em;
text-align: center;
text-decoration: none;
}
.copyright-info-vert-bar {
display: none;
}
/* **************************************** */
/* ************* BASE // PAGE ************* */
/* **************************************** */
.hotel-section {
padding-bottom: 10%
}
.room-banded-img {
width: 100%;
overflow: hidden;
}
.small {
display: block;
}
.large {
display: none;
}
.room-banded-img img {
width: 239%
}
.section-title-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 7%;
margin-bottom: 7%;
}
#contact-us-page .column-1 .section-title-box {
margin-top: 0%;
}
#img-right-hero .section-title-box,
#img-left-hero .section-title-box {
margin-bottom: 0%;
}
.rooms-section-title-positioning {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 7%;
}
#contact-us-page .rooms-section-title-positioning {
margin-bottom: 0%
}
#contact-us-page .rooms-section-title-positioning .section-copy p {
color: #373A36;
}
.section-title {
width: 70%;
}
#contact-us-page .column-1 .section-title {
display: none;
}
#contact-us-page hr {
width: 80%;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #707070; /* blue #0072ce */
}
.room-spotlight .section-title {
width: 70%;
border-bottom: 1px solid #373A36;
}
.section-title p {
/* font-family: 'EB Garamond', serif; */
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #373A36;
text-align: center;
font-size: .9em;
font-weight: 400;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.room-spotlight .section-title p {
/* font-family: 'EB Garamond', serif; */
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #373A36;
text-align: center;
font-size: .9em;
font-weight: 400;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.section-copy {
width: 85%;
}
.section-copy p {
font-family: 'Montserrat', sans-serif;
color: #707070;
text-align: center;
font-size: .8em;
font-weight: 300;
margin-block-start: .2%; /*.4375em*/
margin-block-end: 5%; /*1.05em*/
}
.section-copy-hours {
width: 85%;
}
.section-copy-hours p {
font-family: 'Montserrat', sans-serif;
color: #707070;
text-align: center;
font-size: .8em;
font-weight: 300;
margin-block-start: 2.75%; /*.4375em*/
margin-block-end: 5%; /*1.05em*/
}
.hotel-auto-carousel-mobile {
display: none;
}
.two-up-slideshow {
display: flex;
flex-direction: row;
position: relative;
background: #000000;
}
.two-up-slideshow .back-drop {
width: 100%;
max-height: 500px;
overflow: hidden;
}
.back-drop img {
width: 100%;
opacity: .5;
}
.auto-carousel .carousel {
position: relative;
}
.auto-carousel .button {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-indent: 0px;
text-shadow: none;
align-items: flex-start;
padding: 1px 7px 2px;
box-sizing: border-box;
color: inherit;
font: inherit;
text-transform: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
overflow: visible;
outline-color: #039CDA;
outline: none;
display: inline-block;
border: none;
margin: 0;
text-decoration: none;
background: transparent;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
-moz-transition: -moz-transform 0.6s ease-in-out;
-o-transition: -o-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
display: block;
}
.carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: .5;
filter: alpha(opacity=50);
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #fff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.left.carousel-control, .right.carousel-control {
background: none;
}
a.carousel-control, a.carousel-control:focus, a.carousel-control:visited {
color: #ccc;
text-shadow: none;
width: 5%;
}
#homeCarousel a.carousel-control {
width: 0%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
left: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
left: 0;
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.rb-details-box-copy {
margin-right: 3%;
color: #000;
position: absolute;
right: 0;
z-index: 4;
min-width: 45px;
max-height: 20px;
font-family: 'Quicksand', sans-serif;
font-size: .9em;
font-weight: 100;
line-height: 1.5em;
padding-left: 5px;
padding-right: 4px;
/* opacity: .5; */
}
.rb-details-box {
min-width: 35px;
}
#homeCarousel a.carousel-control {
width: 0%;
}
.carousel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*max-width: 1500px;*/
margin-left: auto;
margin-right: auto;
}
.auto-carousel button {
display: inline-block;
border: none;
margin: 0;
text-decoration: none;
background: transparent;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
button:hover,
button:focus {
background: transparent;
}
button:focus {
outline: unset;
outline-offset: unset;
}
button:active {
transform: scale(0.99);
}
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 20px;
z-index: 9999;
}
.carousel-indicators-blk {
display: flex;
flex-flow: row;
/* border-radius: 33px;
background-color: rgba(1, 29, 49, 0.7); */
padding: .7em 15px 3px 0px;
/*position: absolute;*/
bottom: 10px;
left: unset;
z-index: 15;
width: unset;
margin-left: unset;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators {
position: unset;
bottom: unset;
left: unset;
z-index: unset;
width: unset;
margin-left: unset;
padding-left: unset;
display: flex;
align-items: center;
}
#carouselButtons {
margin-left: unset;
position: unset;
bottom: unset;
z-index: unset;
}
.fa-play {
margin: 0 2px 2px 15px;
top: 25%;
width: 1px;
height: 1px;
border-left: solid 13px #373A36;
border-bottom: solid 8px transparent;
border-top: solid 8px transparent;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.fa-pause {
margin: 0 2px 2px 15px;
top: 25%;
width: 5px;
height: 13px;
border-top: solid 0px transparent;
border-right: solid 4px #373A36;
border-bottom: solid 0px transparent;
border-left: solid 4px #373A36;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.carousel-indicators-blk>ol {
margin: 0;
}
.carousel-indicators>li {
margin: 0 3px;
background-color: #f8f8f8; /*dark grey: #373A36 */
border-color: #f8f8f8; /*dark grey: #373A36 */
opacity: .7;
width: 3px;
height: 3px;
}
.carousel-indicators>li.active {
margin: 0 3px;
background-color: #0072ce;
border-color: #0072ce;
opacity: 1;
width: 3px;
height: 3px;
}
.hp-hero-carousel-mobile {
display: block;
}
.hp-hero-carousel-mobile img {
width: 100%;
height: auto;
}
.hp-hero-carousel img {
width: 100%;
height: auto;
}
.hp-hero-carousel-desktop {
display: none;
}
.fa-pause::before {
display:none;
}
.fa-play::before {
display:none;
}
.carousel-inner .item .next .active {
display:none;
}
.modal-details {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modal-details:target {
opacity:1;
pointer-events: auto;
}
.modal-details > div {
width: 250px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close-details {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close-details:hover {
background: #00d9ff;
}
#gallery-grid .hotel-room-grid-box {
display: none;
}
.rooms-grid-box {
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-between;
margin-right: 4%;
margin-left: 4%;
}
.hotel-room {
width: 100%;
display: inline-block;
position: relative;
margin-bottom: 4%;
}
.hotel-room-placeholder {
width: 100%;
}
.hotel-room img {
width: 100%;
}
.room-title-background {
width: 100%;
height: 100%;
position: absolute;
top: 0%;
cursor: pointer;
}
.rm-hover-off {
position: absolute;
width: 100%;
top: 45%;
background-color: #000000;
opacity: .8;
}
.rm-hover-on {
display: none;
}
.room-title-background p {
/*font-family: 'EB Garamond', serif;*/
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
text-transform: capitalize;
font-size: .9em;
/*font-weight: 100;*/
font-weight: 200;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.room-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: .7em;
}
/* SAUNA SLIDER */
.suana {
padding: 0;
list-style-type:none;
width: 90%; /*70 for desktop*/
margin: 0% Auto 10%; /*1.5625em Auto 2em*/
}
.rooms-ss {
padding: 0;
list-style-type:none;
width: 90%; /*70 for desktop*/
margin: 0% Auto 2%; /*1.5625em Auto 2em*/
}
.suana ul {
list-style-type:none;
padding-inline-start: 0;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.rooms-ss ul {
list-style-type:none;
padding-inline-start: 0;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/* .sgallery li{display:none; list-style:none;}
.sgallery li:first-child {display:block;}
a.prev-b,a.next-b {
height:91px;
position:absolute;
width:43px;
top:50%;
margin-top:-30px;
opacity:0.6;
text-indent:-99999px;
z-index: 9999;
cursor:pointer;
-webkit-transition:opacity 200ms ease-out;
}
a.prev-b:hover,a.next-b:hover {
opacity:1;
}
.prev-b {
left:0;
background: #fff url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}
.next-b {
right:0;
background: #fff url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}
.slider-b {
height:100vh;
position: relative;
}
.slide-b {
position:absolute;
width:100%;
}
.slider-b .slide-b:target {
z-index: 100;
}
*/
.suana img {
width:100%;
}
.rooms-ss img {
width:100%;
}
.media {
position: relative;
}
.suana .slide-buttons {
position: absolute;
top: 42.7%;
display: flex;
justify-content: space-between;
width: 100%;
}
.suana .prev,
.suana .next {
font-family: 'EB Garamond', serif;
position: relative;
padding: 3px;
font-size: 1em;
font-weight: 200;
cursor: pointer;
color: #B8B8B8;
}
.suana .prev-b, .suana .next-b {
background: #fff;
height: 2em;
width: .75em;
opacity: 0.35;
cursor: pointer;
-webkit-transition: opacity 200ms ease-out;
display: flex;
justify-content: center;
align-items: center;
}
.suana .prev-b:hover,
.suana .next-b:hover {
opacity:.55;
}
.slide-buttons {
position: absolute;
bottom: 0%;
display: flex;
justify-content: space-between;
width: 100%;
background-color: rgba(0, 0, 0, 0.75); /*rgba(88, 89, 91, 0.7); grey */
}
.slide-buttons .prev,
.slide-buttons .next {
font-family: 'EB Garamond', serif;
position: relative;
padding: 8px;
font-size: 1.75em;
font-weight: 200;
cursor: pointer;
color: #f5f5f5;
}
.slide-buttons .prev-b,
.slide-buttons .next-b {
height: .75em;
width: 1em;
cursor: pointer;
-webkit-transition: opacity 200ms ease-out;
display: flex;
justify-content: center;
align-items: center;
}
.slide-buttons .prev-b:hover,
.slide-buttons .next-b:hover {
opacity:.55;
color: #0072ce;
}
.slide-buttons .prev:hover,
.slide-buttons .next:hover {
color: #0072ce;
}
.gallery li{
display:none;
list-style:none;
/*max-height: 480px;*/
overflow: hidden;
}
.gallery li:first-child {display:block;}
.gallery img {
/*max-height:550px;*/
}
.contact-form-section,
.rooftop-bar-reservations {
width: 90%;
margin: 0 auto;
}
.contact-form-bckgrnd {
background: #373A36;
}
.rooftop-bar-reservations-bckgrnd {
background: #081E12;
}
.contact-form-box,
.contact-without-form-box,
.rooftop-bar-reservations-box {
width: 90%;
margin: 0 auto .7em;
padding: .7em 0;
}
.contact-form-title p {
font-family: 'EB Garamond', serif;
font-size: 1.2em;
color: #4e4e4e;
margin-block-start: .3em;
margin-block-end: .2em;
}
.rooftop-bar-reservations-title p {
font-family: 'EB Garamond', serif;
font-size: 1.2em;
color: #ffffff;
margin-block-start: .3em;
margin-block-end: .2em;
}
.contact-form-single-line,
.contact-form-multiple-line,
.rooftop-bar-reservations-single-line,
.rooftop-bar-reservations-multiple-line {
background: #ffffff;
margin-bottom: .8em;
padding: .3em 0 .2em;
}
.contact-form-single-line p,
.contact-form-multiple-line p,
.rooftop-bar-reservations-single-line p,
.rooftop-bar-reservations-multiple-line p {
font-family: 'Montserrat', sans-serif;
font-size: .65em;
text-transform: capitalize;
color: #4e4e4e;
line-height: unset;
margin-block-start: .3em;
margin-block-end: .2em;
margin-inline-start: .5em;
}
.contact-form-submit-btn {
width: 30%;
background: #4e4e4e;
display: flex;
justify-content: center;
align-items: center;
}
.rooftop-bar-reservations-submit-btn {
width: 30%;
background: #b4b4b4;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form-submit-btn p,
.rooftop-bar-reservations-submit-btn p {
color: #ffffff;
margin-block-start: .3em;
margin-block-end: .2em;
}
.contact-without-form-bckgrnd {
background: #f3f3f3;
}
.contact-details-title p{
font-family: 'EB Garamond', serif;
font-size: 1.2em;
text-transform: capitalize;
color: #4e4e4e;
margin-block-start: .3em;
margin-block-end: .2em;
}
.contact-details-copy p {
font-family: 'Montserrat', sans-serif;
font-size: .65em;
color: #4e4e4e;
line-height: unset;
margin-block-start: .3em;
margin-block-end: .2em;
margin-inline-start: .5em;
}
.contact-details-subtitle p {
font-family: 'Montserrat', sans-serif;
font-size: .65em;
font-weight: 600;
text-transform: capitalize;
color: #4e4e4e;
line-height: unset;
margin-block-start: .3em;
margin-block-end: .2em;
margin-inline-start: .5em;
}
.contact-details-subtitle a {
color: #4e4e4e;
text-decoration: none;
}
.contact-details-subtitle a:hover {
color: #eabe7f;
}
.contact-details-address-copy p {
font-family: 'Montserrat', sans-serif;
font-size: .65em;
text-transform: capitalize;
color: #4e4e4e;
line-height: unset;
margin-block-start: .3em;
margin-block-end: .2em;
margin-inline-start: .5em;
}
.contact-details-get-directions p {
font-family: 'Montserrat', sans-serif;
font-size: .65em;
font-weight: 600;
text-transform: uppercase;
color: #4e4e4e;
line-height: unset;
margin-block-start: .3em;
margin-block-end: .2em;
margin-inline-start: .5em;
}
.contact-details-get-directions a {
color: #4e4e4e;
text-decoration: none;
}
.contact-details-get-directions a:hover {
color: #eabe7f;
}
.whiskey-sushi-coming-soon {
width: 100%;
display: inline-block;
position: relative;
margin-bottom: 4%;
}
.whiskey-sushi-coming-soon img {
width: 100%;
}
.whiskey-sushi-coming-soon-notice {
width: 100%;
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: .65em;
text-transform: uppercase;
line-height: unset;
top: 6%;
color: #000000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.whiskey-sushi-coming-soon-notice-title p {
font-size: 2.2em;
line-height: .9;
font-weight: 600;
margin-block-start: 0em;
margin-block-end: 0em;
}
.whiskey-sushi-coming-soon-notice-subtitle {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.whiskey-sushi-coming-soon-notice-subtitle p {
font-size: 1.25em;
font-weight: 500;
margin-block-start: 0em;
margin-block-end: .3em;
margin-inline-start: .3em;
margin-inline-end: .3em;
}
#rooftop-bar-page .section-title,
#whiskey-sushi .section-title {
display: none;
}
.line {
height: 1px;
width: 2.15em;
background: #000000;
}
.rooms-dropdown-btn {
width: 46%;
height: 1.2em;
background: linear-gradient(to right, #eac17d 0%, #edcf88 18.5%, #f3e7d9 41%, #bf822b 73%, #eabe7f 95%, #eabe7f 100%);
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 2px;
margin-top: 8%;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
}
.rooms-dropdown-btn p {
font-family: 'EB Garamond', serif;
text-transform: uppercase;
color: #081E12;
text-align: center;
font-size: .75em;
line-height: .85em;
font-weight: 700;
margin-block-start: 0em;
margin-block-end: 0em;
margin-top: .65%;
}
.room-banded-img {
width: 100%;
overflow: hidden;
position: absolute;
}
.room-spotlight {
position: relative;
/* top: 1.7em; */ /* should match .room-parent margin-bottom: */
}
.room-parent {
/* margin-bottom: 1.7em;*/ /* should match .room-spotlight top: */
}
/* The container
- needed to position the dropdown content */
.room-dropdown {
width: 100%;
padding-top: .01%;
}
.room-dropdown button {
padding: 0;
}
.room-dropdown button:hover,
.room-dropdown button:focus {
background: linear-gradient(to right, #eac17d 0%, #edcf88 18.5%, #f3e7d9 41%, #bf822b 73%, #eabe7f 95%, #eabe7f 100%);
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 2px;
/*margin-top: 8%;*/
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
}
/* Dropdown Content (Hidden by Default) */
.room-dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #000;
opacity: .8;
box-shadow: 0px 1px 10px 3px rgba(0,0,0,0.2);
z-index: 1;
width: 70%;
left: 0;
right: 0;
margin: auto;
}
/* Links inside the dropdown */
.room-dropdown-content a {
/*color: black;
padding: .625em .625em 0em .625em;
text-decoration: none;
display: block; */
}
/* Change color of dropdown links on hover */
.room-dropdown-content a:hover {
color: #ffffff;
}
/* Show the dropdown menu on hover */
.room-dropdown:hover .room-dropdown-content {
display: block;
}
.room-dropdown-content nav dl {
text-align: center;
margin-block-start: .5em;
margin-block-end: .5em;
}
.room-dropdown-content nav dl dt{
display: inline-block;
width: 100%;
}
.room-dropdown-content nav dl dt:hover {
display: inline-block;
width: 100%;
background-color: #081E12;
}
#rm-on-pg {
background: #081E12;
}
.room-dropdown-content nav dl dt a {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-transform: capitalize;
text-decoration: none;
font-size: .9em;
color: #fff;
}
.room-dropdown-content #rm-on-pg {
font-family: 'Montserrat', sans-serif;
text-decoration: none;
color: #373A36;
}
.room-dropdown-content dd {
margin-inline-start: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
text-transform: uppercase;
text-decoration: none;
font-size: .7em;
padding: .625em;
color: #fff;
}
#rooftop-bar-page .section-copy p,
#whiskey-sushi .section-copy p {
font-family: 'Montserrat', sans-serif;
color: #707070;
text-align: center;
font-size: 1.2em;
font-weight: 400;
margin-block-start: 2.75%;
margin-block-end: 5%;
}
/* #whiskey-sushi .home-welcome-booking {
margin-top: 0%;
margin-bottom: 0%;
} */
#contact-us-page .two-column-grid {
display: flex;
flex-direction: column;
}
#contact-us-page .footer-contact-info .address,
#contact-us-page .footer-contact-info .email,
#contact-us-page .footer-contact-info .phone-number,
#contact-us-page .team-member-contact-block .team-member-contact-info .email,
#contact-us-page .team-member-contact-block .team-member-contact-info .phone-number {
color: #707070;
text-decoration: none;
}
.team-member-contact-block .team-member-contact-info p
#contact-us-page .footer-contact-info-address a:hover,
#contact-us-page .footer-contact-info-email a:hover,
#contact-us-page .footer-contact-info-ph a:hover,
#contact-us-page .footer-contact-us-subtitle a:hover,
#contact-us-page .team-member-contact-block .team-member-contact-info p a:hover {
color: #0072ce;
}
.team-member-contact-block {
margin-top: 6.5%;
}
.team-member-contact-block .team-member-contact-info p {
text-align: center;
}
.team-member-contact-block .team-member-sm p {
font-size: 1em;
text-align: center;
font-weight: 500;
margin-block-end: 1%;
}
.team-member-contact-block .team-member p {
display: none;
}
.team-member-contact-block .team-member-contact-info p {
margin-block-start: 0%;
margin-block-end: 1%;
}
.medallions-parent {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 70%;
margin-top: 0%;
margin-bottom: 10%;
margin-right: auto;
margin-left: auto;
}
.medallions-parent .medallion-item {
width: 40%;
}
.medallions-parent .medallion-item:last-child {
margin-right: 5%;
}
.medallions-parent .medallion-item img {
width: 100%;
}
/* ********************************************** */
/* ************** MIN WIDTH 320px *************** */
/* ********************************************** */
@media screen and (min-width:320px) {
#page-img-background {
min-width: 315px;
}
.section-title p {
letter-spacing: 2.5px;
font-size: 1.1em;
}
.room-spotlight .section-title p {
letter-spacing: 2.1px;
font-size: .95em;
}
.home-welcome-booking-title p {
font-size: .85em;
}
.footer-social-media-nav ul {
margin-bottom: .75em;
}
.footer-contact-info p {
font-size: .8em;
}
.footer-copyright-info p {
font-size: .49em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 360px *************** */
/* ********************************************** */
@media screen and (min-width:360px) {
.modal-details > div {
width: 300px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.footer-social-media-nav ul {
margin-bottom: .84375em;
}
.footer-social-media-nav ul li {
width: 11%;
margin: 0% 2.5%;
}
.footer-contact-info p {
font-size: .9em;
}
.footer-copyright-info p {
font-size: .55125em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 375px *************** */
/* ********************************************** */
@media screen and (min-width:375px) {
.footer-social-media-nav ul {
margin-bottom: .87891em;
}
.footer-contact-info p {
font-size: .9375em;
}
.footer-copyright-info p {
font-size: .57422em;
margin-block-start: .5em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 401px *************** */
/* ********************************************** */
@media screen and (min-width: 401px) {
.dev-portflio-itm-spacing {
margin-top: 0%;
}
.footer-social-media-nav ul li {
width: 9%;
margin: 0% 2.5%;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 411px *************** */
/* ********************************************** */
@media screen and (min-width:411px) {
.footer-social-media-nav ul {
margin-bottom: .96329em;
}
.footer-contact-info p {
font-size: 1.0275em;
margin-block-start: .64219em;
margin-block-end: .64219em;
}
.footer-copyright-info p {
font-size: .62935em;
margin-block-start: .5em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 450px *************** */
/* ********************************************** */
@media screen and (min-width:450px) {
.footer-social-media-nav ul {
margin-bottom: .96329em;
}
.footer-contact-info p {
font-size: .73854em;
margin-block-start: .64219em;
margin-block-end: .64219em;
}
.footer-copyright-info p {
font-size: .45321em;
margin-block-start: .5em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 500px *************** */
/* ********************************************** */
@media screen and (min-width:500px) {
.footer-social-media-nav ul li {
width: 8%;
margin: 0% 2.5%;
}
.hp-hero-carousel-mobile {
display: none;
}
.hp-hero-carousel-desktop {
display: block;
}
.hp-hero-carousel-desktop img {
display: block;
width: 100%;
height: auto;
}
.carousel-indicators-blk {
display: flex;
flex-flow: row;
padding: 1em 15px 3px 0px;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 540px *************** */
/* ********************************************** */
@media screen and (min-width:540px) {
.masthead-img {
width: 30%;
}
.bounce {
left: 22.5%;
}
.header-anchor-co-name img {
width: 43%;
}
.homepage-masthead {
/*padding-top: 32%;*/
/*padding-bottom: 17%;*/
}
.home-page main {
min-height: 82vh;
}
.home-intro {
flex-direction: row;
align-items: center;
width: 70%;
margin-top: 27%;
margin-left: 12%;
margin-right: auto;
}
.experience-medallion {
width: 27%;
}
.home-intro hr {
display: none;
}
.home-intro-text {
/* border-left: 1px solid #0072ce;*/
border-left: .2em solid #0072ce;
padding-left: .75em;
}
.home-intro-text p {
text-align: left;
font-size: .9em;
font-weight: 400;
margin-block-start: .0em;
margin-block-end: 0.25em;
}
.footer-contact-info {
margin-top: 3%;
}
.footer-contact-info p {
font-size: .9em;
}
.hotel-section {
padding-bottom: 5%;
}
.carousel-indicators-blk {
padding: 7px 15px 3px 0px;
}
.room-title-background p {
font-size: 1.2em;
}
.suana {
margin: 0% Auto 5%;
}
.rooms-dropdown-btn {
width: 25%;
}
.room-dropdown button:hover,
.room-dropdown button:focus {
/*margin-top: 8%; */
}
.room-dropdown-content {
width: 40%;
}
.room-page .home-welcome-booking {
margin-top: 0%;
margin-bottom: 0%;
}
.room-page .whiskey-sushi-coming-soon img {
width: 86%;
margin-right: 7%;
margin-left: 7%;
}
.medallions-parent {
width: 43%;
margin-bottom: 6%;
}
#contact-us-page .column-1 .section-title-box {
margin-bottom: 3%;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 601px *************** */
/* ********************************************** */
@media screen and (min-width: 601px) {
.footer-social-media-nav ul li {
width: 6%;
margin: 0% 1.5%;
}
.modal-details > div {
width: 400px;
}
.section-title {
width: 60%;
}
.room-spotlight .section-title {
width: 60%;
border-bottom: 1px solid #373A36;
}
.section-copy {
width: 70%;
}
.section-copy-hours {
width: 70%;
}
.suana .prev,
.suana .next {
padding: 3px;
font-size: 2em;
font-weight: 200;
}
.suana .prev-b, .suana .next-b {
height: 2em;
width: .75em;
}
}
/* ********************************************** */
/* ************** MIN WIDTH 720px *************** */
/* ********************************************** */
@media screen and (min-width:720px) {
.header-anchor-co-name img {
width: 35%;
}
.home-intro {
width: 53%;
margin-top: 17%;
margin-left: 17%;
}
.experience-medallion {
width: 32%;
}
#contact-us-page hr {
display: none;
}
#contact-us-page .two-column-grid {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
#contact-us-page .two-column-grid .column-1 {
width: 47%;
display: flex;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#contact-us-page .two-column-grid .column-2 {
width: 65%;
}
#contact-us-page .two-column-grid .column-2 .team-member-contact-block-top {
margin-top: 1%;
}
#contact-us-page .two-column-grid .column-1 .section-title-box,
#contact-us-page .two-column-grid .column-2 .section-title-box {
width: 85%;
margin-top: 0%;
}
#contact-us-page .two-column-grid .column-2 .section-title-box {
margin-bottom: 0;
}
#contact-us-page .two-column-grid .column-2 .section-title {
width: 70%;
}
#contact-us-page .two-column-grid .column-2 .section-title p,
#contact-us-page .two-column-grid .column-1 .section-title p,
.team-member-contact-block .team-member-contact-info p {
text-align: left;
}
.team-member-contact-block .team-member-sm p {
display: none;
}
.team-member-contact-block .team-member p {
display: block;
color: #373a36;
font-size: 1em;
text-align: left;
font-weight: 500;
margin-block-end: 1%;
}
#contact-us-page .column-1 .footer-contact-info-address p,
#contact-us-page .column-1 .footer-contact-info-email p,
#contact-us-page .column-1 .footer-contact-info-ph p {
text-align: left;
}
.medallions-parent {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 77%;
margin-top: 0%;
margin-bottom: 0%;
margin-right: auto;
margin-left: auto;
}
#contact-us-page .column-1 .section-title {
display: block;
width: 77%;
}
#contact-us-page .column-1 .section-title-box {
margin-bottom: 0%;
}
#contact-us-page .column-1 .section-copy {
width: 77%;
}
.medallions-parent .medallion-item {
width: 33%;
}
.medallions-parent .medallion-item:last-child {
margin-right: 19%;
}
.hotel-room {
width: 48%;
}
.hotel-room-placeholder {
width: 48%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 768 *************** */
/* ******************************************** */
@media screen and (min-width:768px) {
/* ******************************************** */
/* ******** MIN WIDTH 768 || HOME PAGE ******** */
/* ******************************************** */
.homepage-masthead .home-scroll-indication {
/*margin-top: 38%;*/
}
header {
margin: 0% 3.5% 4.55%;
padding-top: 4%;
}
.welcome-page-spacing {
margin-bottom: 76%;
}
.home-page main {
min-height: 66vh;
}
.home-intro {
width: 59%;
margin-top: 23%;
margin-left: 10.5%;
}
.experience-medallion {
width: 25%;
}
.home-intro-text {
padding-left: .85em;
}
.home-intro-text p {
font-size: 1.1em;
}
.footer-section-contact-info {
padding-top: 2%;
}
.footer-social-media-nav ul li {
width: 4%;
margin: 0% 1%;
}
.section-title {
width: 37%;
}
.room-spotlight .section-title {
/* width: 37%; */
letter-spacing: 2.5px;
font-size: 1.1em;
}
.section-copy {
width: 50%;
}
.section-copy-hours {
width: 50%;
}
.section-title-box {
margin-bottom: 2%;
}
.rooms-section-title-positioning {
margin-bottom: 2%;
}
.hotel-auto-carousel-mobile {
display: none;
}
/* ====================== */
/* DESKTOP HERO SLIDESHOW */
/* ====================== */
.two-up-slideshow {
display: flex;
flex-direction: row;
}
.hero-slideshow-left,
.hero-slideshow-right {
width: 50%;
display: inline-block;
}
.hero-slideshow-left .slideShow,
.hero-slideshow-right .slideShow {
/*display: inline-block;*/
position: relative;
/*border: 1px dashed #ffffff;*/
width: 100%;
height: auto;
top: 0px;
}
.hero-slideshow-left .slideShow>.pic,
.hero-slideshow-right .slideShow>.pic {
position: absolute;
}
.hero-slideshow-left .slideShow>.back-drop,
.hero-slideshow-right .slideShow>.back-drop{
position: relative;
}
.slideShow .pic img {
width: 100%;
}
/* ================================ */
/* HOTEL PAGE | SECTION: ROOMS GRID */
/* ================================ */
.room-title-background p {
font-size: 1.1em;
}
/* ====================== */
/* GLOBAL| BOOKING BUTTON */
/* ====================== */
.booking-btn {
margin-top: 1%;
}
/* ===================================== */
/* HOTEL PAGE | SECTION: SAUNA SLIDESHOW */
/* ===================================== */
.suana {
/*margin: 0% Auto 6%; */
margin: 0% 6% 6% 6%;
}
.rooms-ss {
margin: 0% Auto 1%;
}
.rooms-dropdown-btn {
margin-top: 5%;
}
.rooftop-page .home-welcome-booking {
margin-top: 9%;
margin-bottom: 0%;
}
#rooftop-bar-page .section-title,
#whiskey-sushi .section-title {
display: block;
width: 50%;
border-bottom: 3.5px solid #373A36;
margin-bottom: 2%;
}
#rooftop-bar-page .section-copy,
#whiskey-sushi .section-copy {
/*border-top: 1px solid #707070; */
/*border-bottom: 1px solid #707070; */
}
#rooftop-bar-page .section-copy p,
#whiskey-sushi .section-copy p {
font-family: 'Montserrat', sans-serif;
color: #707070;
text-align: center;
font-size: 1.2em;
font-weight: 500;
margin-block-start: 2.75%;
margin-block-end: 5%;
}
.footer-contact-info {
margin-top: 0%;
}
#contact-us-page .column-1 .section-title {
width: 77%;
}
#contact-us-page .column-2 .section-copy {
width: 70%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 770 ************** */
/* ******************************************** */
@media screen and (min-width: 770px) {
.welcome-page-spacing {
margin-bottom: 33%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 840 ************** */
/* ******************************************** */
@media screen and (min-width: 840px) {
}
/* ******************************************** */
/* ************** MIN WIDTH 964 ************** */
/* ******************************************** */
@media screen and (min-width: 964px) {
.first-section {
padding-top: 5%;
}
.section-title p {
letter-spacing: 2.5px;
font-size: 1.3em;
font-weight: 500;
}
.section-copy p {
font-size: .9em;
/*font-weight: 300;*/
font-weight: 500;
}
.section-copy-hours p {
font-size: .9em;
font-weight: 300;
}
.room-spotlight .section-title {
border-bottom: 2.5px solid #373A36;
}
.room-spotlight .section-title p {
letter-spacing: 2.5px;
font-size: 1.3em;
font-weight: 500;
}
.room-spotlight .section-copy p {
font-size: .9em;
/*font-weight: 300;*/
font-weight: 500;
}
.room-banded-img {
width: 100%;
overflow: hidden;
}
.small {
display: none;
}
.large {
display: block;
}
.room-banded-img img {
width: 290%
}
.rooms-dropdown-btn {
margin-top: 5%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 1024 ************** */
/* ******************************************** */
@media screen and (min-width: 1024px) {
.masthead-img {
margin-top: 8%;
margin-left: 7.5%;
}
header {
margin: 0% 1% 2% 3.5%;/*0% 3.5% 2%*/
padding-top: 2%;
align-items: flex-end;
}
.mobile-nav-icon {
display: none;
}
#logo-img {
/* width: 15%; */
/* width: 21%; */
width: 27%;
}
.header-anchor-co-name img {
width: 100%;
}
#nav-section {
/* width: 67%; */
/* width: 78%; */
width: 73%;
}
.horizontal-nav {
display: flex;
width: 100%;
margin: 0;
overflow: visible;
}
.horizontal-nav nav {
display: flex;
justify-content: flex-end;
width: 100%;
/*padding: 0.5% 5% 0% 10%;*/
padding: 0.5% 5% 0% 7%;
margin: 0;
}
.horizontal-nav nav ul {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-inline-start: 0;
margin-block-end: .1em;
}
.horizontal-nav nav ul li {
display: flex;
}
.home-page .horizontal-nav nav ul li a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
/*font-size: .8em;*/
font-size: .7em;
color: #f3f3f3;
}
.horizontal-nav nav ul li a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
text-align: center;
/* font-size: .8em; */
font-size: .7em;
color: #707070;
}
.horizontal-nav nav ul li .h-nav-dropdown-contact-us a {
color: #f3f3f3;
}
#nav-on-page {
text-decoration: none;
background-color: transparent;
border: none;
/*border-bottom: solid 1px #a7a9ac; blue #0072ce*/
}
.horizontal-nav nav ul li #nav-on-page a {
font-weight: 600;
color: #0072ce;
}
/* .dropdown-content dd {
margin-inline-start: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
text-transform: uppercase;
text-decoration: none;
font-size: .7em;
padding: .625em;
color: #fff;
} */
.home-page .horizontal-nav a:hover {
font-weight: 600;
color: #f3f3f3;
}
.horizontal-nav a:hover {
font-weight: 600;
color: #373A36;
}
#nav-on-page:hover {
color: #0072ce;
/* border-bottom: solid 1px #a7a9ac; */
}
.h-nav-dropdown {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.h-nav-dropdown-contact-us {
background-color: #0072ce;
margin-top: 2%;
margin-bottom: 3%;
}
.h-nav-dropdown .h-nav-dropdown-btn {
background-color: transparent;
border: none;
text-align: center;
line-height: 1.15;
}
.h-nav-dropdown .h-nav-dropdown-btn:hover,
.h-nav-dropdown .h-nav-dropdown-btn:focus {
/* height: 17px;
background-color: transparent;
border: none; */
}
.h-nav-dropdown-btn {
}
/* Dropdown Content (Hidden by Default) */
.h-nav-dropdown-content {
display: none;
position: absolute;
background-color: #000;
opacity: .8;
box-shadow: 0px 1px 10px 3px rgba(0,0,0,0.2);
z-index: 1;
width: 20%;
min-width: 300px;
margin: auto;
left: 50%;
transform: translateX(-50%);
}
/* Links inside the dropdown */
.h-nav-dropdown-content a {
/*color: black;
padding: .625em .625em 0em .625em;
text-decoration: none;
display: block; */
}
/* Change color of dropdown links on hover */
.h-nav-dropdown-content a:hover {
color: #0072ce;
}
/* Show the dropdown menu on hover */
.h-nav-dropdown:hover .h-nav-dropdown-content {
display: block;
}
.h-nav-dropdown-content nav{
display: inline-block;
width: 100%;
padding: unset;
}
.h-nav-dropdown-content nav dl {
text-align: center;
margin-block-start: .5em;
margin-block-end: .5em;
}
.h-nav-dropdown-content nav dl dt{
display: inline-block;
width: 100%;
min-width: 300px;
padding: unset;
padding-bottom: 10px;
}
.h-nav-dropdown-content nav dl dt a {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-transform: capitalize;
text-decoration: none;
font-size: .9em;
color: #fff;
}
.h-nav-dropdown-content dd {
margin-inline-start: 0;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
text-transform: uppercase;
text-decoration: none;
font-size: .7em;
color: #fff;
}
.home-page main {
min-height: 66vh;
}
.experience-medallion {
display: block;
width: 20%;
margin-left: 0;
margin-right: 1em;
}
.experience-medallion-img {
width: 100%;
}
.home-intro {
display: flex;
/* width: 44%; */
/* margin-top: 9%; */
margin-top: 15%;
/* margin-left: 11%; */
margin-left: auto;
margin-right: auto;
}
.home-intro-title p {
font-size: 1.35em;
font-weight: 400;
letter-spacing: .05em;
}
.home-intro-text {
padding-left: 1em;
}
.home-intro-text p {
/* font-size: .9em; */
font-size: 1.7em;
/* font-weight: 400; */
font-weight: 600;
}
.homepage-masthead {
/*padding-top: 23%;*/
/*padding-bottom: 10%;*/
}
.masthead-img {
width: 23%;
}
.bounce {
left: 19%;
}
.homepage-masthead .home-scroll-indication {
/*margin-top: 8%;*/
}
.section-title {
width: 100%;
}
.room-spotlight .section-title {
width: 100%;
}
.section-copy {
width: 100%;
}
.section-copy-hours {
width: 100%;
}
.section-title-box {
width: 39%;
margin: 7% auto 0 auto;
}
.section-title-box .section-title-alone {
/*margin: 0 auto 4% auto; */
}
.section-title p {
letter-spacing: 1.5px;
font-size: 1.2em;
}
.room-spotlight .section-title p {
letter-spacing: 1.5px;
font-size: 1.2em;
}
.carousel-indicators-blk {
padding: 1em 0em .1875em 0em;
}
.rm-hover-on {
display: none;
position: absolute;
width: 100%;
top: 37%;
}
.rooms-grid-box {
margin-right: 6%;
margin-left: 6%;
padding-top: 3%;
padding-bottom: 3%;
}
.hotel-room:hover {
background-color: #000000;
}
.hotel-room:hover img {
opacity: .5;
}
.rm-hover-on-rm-name {
}
.rm-hover-on-rm-name p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-align: center;
text-transform: capitalize;
font-size: 1em;
font-weight: 200;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.rm-hover-on .room-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: .8em;
}
.rm-hover-on-btn {
display: none;
width: 50%;
border: 1px solid transparent;
border-radius: .7em;
background: #fff;
margin-left: auto;
margin-right: auto;
}
.rm-hover-on-btn p {
font-family: 'Montserrat', sans-serif;
color: #081E12;
text-align: center;
text-transform: uppercase;
font-size: .9em;
font-weight: 600;
margin-block-start: .4375em;
margin-block-end: .4375em;
}
.hotel-room:hover .rm-hover-on {
display: block;
}
.hotel-room:hover .rm-hover-off {
display: none;
}
.room-parent{
width: 83%;
margin-right: auto;
margin-bottom: 4%;
margin-left: auto;
}
.hero-position .room-parent {
margin-bottom: 5%;
}
#img-right-hero .section-title-box.
#img-left-hero .section-title-box {
margin-bottom: 7%;
}
#gallery-grid .hotel-room-grid-box {
display: block;
}
.room-spotlight {
display: flex;
}
.room-spotlight-img-right {
flex-direction: row-reverse;
margin-right: 1%;
}
.room-spotlight-img-left {
flex-direction: row;
margin-left: 1%;
}
#img-right-hero .room-spotlight-img-right {
margin-right: 6%;
}
#img-left-hero .room-spotlight-img-left {
margin-left: 6%;
}
.rooms-section-title-positioning {
width: 78%;
margin-left: auto;
margin-right: auto;
}
.room-spotlight-img-right .rooms-section-title-positioning {
width: 78%;
margin-left: 7%;
margin-right: auto;
}
.room-spotlight-img-left .rooms-section-title-positioning {
width: 78%;
margin-left: auto;
margin-right: 7%;
}
.room-page .slide-buttons {
background-color: rgba(0, 0, 0, 0.7); /* black */
}
.prev-b, .next-b {
height: .9em;
width: .5em;
}
.prev, .next {
padding: 8px;
font-size: 3em;
}
.room-page .prev-b, .room-page .next-b {
height: .9em;
width: .45em;
}
.room-page .prev, .room-page .next {
padding: 4px 8px;
font-size: 1.25em;
}
.booking-btn {
margin-top: 0%;
}
.room-banded-img img {
width: 152%;
}
.room-page .rooms-ss {
width: 61%;
}
#rooftop-bar-page .home-welcome-booking-title br{
display: none;
}
#whiskey-sushi .home-welcome-booking-title br {
display: none;
}
.whiskey-sushi-coming-soon-notice-title p {
font-size: 5.5em;
letter-spacing: .05em;
}
.whiskey-sushi-coming-soon-notice-subtitle p {
font-size: 2.8em;
}
.line {
height: 2px;
width: 8.35em;
margin-bottom: .7em;
}
.page-structural-steel header {
margin: 0% 1% 0% 3.5%;
}
.page-structural-steel .section-title-box {
margin: 1% auto 0 auto;
}
.page-light-gauge .section-title-box {
margin: 2% auto 0 auto;
}
#contact-us-page hr {
display: none;
}
#contact-us-page .column-1 .section-title {
width: 100%;
}
.footer-section-contact-info {
flex-flow: row;
justify-content: space-between;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.footer-content {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
margin-top: 2%;
margin-bottom: 2%;
}
.footer-content-border-right {
border-right: 1.5px solid #0072ce;
}
.footer-content-border-left {
border-left: 1.5px solid #0072ce;
}
footer hr {
width: 80%;
}
.footer-logo {
display: block;
width: 10%;
margin: 0 auto;
}
.footer-social-title p {
font-size: .9em;
margin-block-start: .4375em;
margin-block-end: 0em;
}
.footer-social-media-nav ul li {
width: 8%;
margin: 0% 2%;
}
.footer-logo img{
width: 100%;
}
.footer-contact-info-ph p {
margin-block-end: 0em;
}
.footer-copyright-info br {
display: none;
}
.footer-contact-info p {
font-size: .85em;
}
.footer-social-icon-block {
width: 10%;
}
.copyright-info-vert-bar {
display: inline;
}
.footer-contact-us-title p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: #ffffff;
text-align: left;
font-size: .9em;
font-weight: 300;
margin-block-start: 0em;
margin-block-end: 0em;
}
.footer-contact-us-subtitle p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: #ffffff;
text-align: left;
font-size: .6em;
font-weight: 300;
margin-block-start: 0em;
margin-block-end: 0em;
text-decoration: none;
}
.footer-contact-us-subtitle .phone-number {
color: #ffffff;
font-weight: 300;
text-decoration: none;
}
.footer-section-copyright {
padding-bottom: 2%;
}
.footer-copyright-info p {
font-size: .7em;
font-weight: 100;
}
#contact-us-page .two-column-grid {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
#contact-us-page .two-column-grid .column-1 {
width: 30%;
display: flex;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.medallions-parent .medallion-item {
width: 40%;
}
#contact-us-page .two-column-grid .column-2 {
width: 65%;
}
#contact-us-page .two-column-grid .column-2 .team-member-contact-block-top {
margin-top: 1%;
}
#contact-us-page .two-column-grid .column-1 .section-title-box,
#contact-us-page .two-column-grid .column-2 .section-title-box {
width: 70%;
margin-top: 0%;
}
#contact-us-page .two-column-grid .column-2 .section-title p,
/*#contact-us-page .two-column-grid .column-1 .section-title p, */
.team-member-contact-block .team-member-contact-info p {
text-align: left;
}
.team-member-contact-block .team-member-sm p {
display: none;
}
.team-member-contact-block .team-member p {
display: block;
color: #373a36;
font-size: 1em;
text-align: left;
font-weight: 500;
margin-block-end: 1%;
}
#contact-us-page .column-1 .footer-contact-info-address p,
#contact-us-page .column-1 .footer-contact-info-email p,
#contact-us-page .column-1 .footer-contact-info-ph p {
text-align: left;
}
#contact-us-page .column-1 .section-copy {
width: 100%;
}
.medallions-parent {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 70%;
margin-top: 10%;
margin-bottom: 0%;
margin-right: auto;
margin-left: auto;
}
.medallions-parent .medallion-item:last-child {
margin-right: 5%;
}
#contact-us-page .column-1 .section-title-box,{
margin-bottom: 7%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 1025 *************** */
/* ******************************************** */
@media screen and (min-width:1025px) {
/*.footer-social-media-nav ul li {
width: 4.5%;
} */
/* .footer-contact-info p {
font-size: .8em;
} */
/*.footer-copyright-info p br {
display: none;
} */
}
/* ******************************************** */
/* ************* MIN WIDTH 1120 *************** */
/* ******************************************** */
@media screen and (min-width:1120px) {
#logo-img {
width: 19%;
}
#rooftop-bar-page .section-copy p,
#whiskey-sushi .section-copy p {
font-size: 1.3em;
font-weight: 500;
}
.medallions-parent .medallion-item {
width: 35%;
}
.medallions-parent .medallion-item:last-child {
margin-right: 13%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 1366 ************** */
/* ******************************************** */
@media screen and (min-width: 1366px) {
.page-structural-steel header {
margin: 0% auto 0% auto;
}
main, header, .footer-section-contact-info {
max-width: 1366px;
margin-left: auto;
margin-right: auto;
}
.horizontal-nav nav {
padding: 0.5% 2% 0% 7%;
}
.masthead-img {
margin-top: 6%;
margin-left: 7%;
}
.bounce {
left: 18%;
}
.room-spotlight-img-right .rooms-section-title-positioning {
margin-left: 2%;
}
.room-spotlight-img-left .rooms-section-title-positioning {
margin-right: 2%;
}
}
/* ******************************************** */
/* ************** MIN WIDTH 1380 *************** */
/* ******************************************** */
@media screen and (min-width:1380px) {
}
/* ******************************************** */
/* ************** MIN WIDTH 1470 *************** */
/* ******************************************** */
/* ******************************************** */
/* ************** MIN WIDTH 1645 *************** */
/* ******************************************** */
@media screen and (min-width:1645px) {
}
/* ******************************************** */
/* ************** MIN WIDTH 1840 *************** */
/* ******************************************** */
@media screen and (min-width:1840px) {
}
/* ******************************************** */
/* ************** MIN WIDTH 2090 *************** */
/* ******************************************** */
@media screen and (min-width:2090px) {
}
/* ******************************************** */
/* ******************** IE ******************** */
/* ******************************************** */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.masthead-img {
margin-top: 10%;
}
.bounce {
top: 75%;
}
.mountain-silhouette {
display: none;
}
.footer-logo {
margin-top: 5%;
}
.horizontal-nav {
display: none;
}
.ie-horizontal-nav {
display: block;
}
.ie-horizontal-nav {
display: flex;
width: 100%;
margin: 0;
overflow: visible;
}
.ie-horizontal-nav .ie-nav {
display: block;
width: 100%;
padding: 0.5% 5% 0% 10%;
margin: 0;
}
.ie-horizontal-nav .ie-nav ul {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-inline-start: 0;
}
.ie-horizontal-nav .ie-nav ul li {
display: flex;
}
.home-page .ie-horizontal-nav .ie-nav ul li a {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
color: #f3f3f3;
padding: .625em .625em 0em .625em;
}
.ie-horizontal-nav .ie-nav ul li a {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
color: #707070;
padding: .625em .625em 0em .625em;
}
#nav-on-page {
text-decoration: none;
background-color: transparent;
border: none;
border-bottom: solid 1px #a7a9ac; /*blue #0072ce*/
}
.ie-horizontal-nav .ie-nav ul li #nav-on-page a {
font-weight: 400;
color: #0072ce;
}
.home-page .ie-horizontal-nav a:hover {
font-weight: 400;
color: #0072ce;
}
.ie-horizontal-nav a:hover {
font-weight: 400;
color: #0072ce;
}
#nav-on-page:hover {
color: #0072ce;
border-bottom: solid 1px #a7a9ac;
}
.h-nav-dropdown .h-nav-dropdown-btn {
background-color: transparent;
border: none;
}
/* Show the dropdown menu on hover */
.h-nav-dropdown:hover .h-nav-dropdown-content {
display: block;
}
.footer-social-media-nav {
width: 100%;
height: 20%;
}
.suana ul {
padding: 0;
}
.rooms-ss ul {
padding: 0;
}
.booking-btn {
display: none;
}
.booking-btn-ie {
display: block;
height: 25px;
width: 110px;
background: #0072ce; /* previous grey #afb1b4 or #58595b */
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 8px;
margin-top: 4%;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
opacity: .9;
}
.booking-btn-ie p {
display: block;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: #ffffff;
text-align: center;
font-size: .75em;
line-height: .85em;
font-weight: 700;
margin-block-start: 0em;
margin-block-end: 0em;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}