/* linear gradient on header */
/*not used*/
#grad {
    background: linear-gradient(violet, #ff5722, deepskyblue);
}
/*pause slide show animation until images are loaded*/
/*
.js-loading *, .js-loading *:before, .js-loading *:after {
    animation-play-state: paused !important;
}
*/
/* Main slide show - automatic */
.mySlides {display: none}
/* Slide show container */
.mySlides img {vertical-align: middle}
.slideshow-container {
    position: relative;
    margin: auto;
}
.active {
    background-color: #717171;
}
/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*style the small screen menu*/
@media screen and (min-width: 601px) {    
    #menu, .dropdown-menu, .dropbtn-menu {display: none; visibility: hidden; }
      }
/* style menu container */
.dropdown-menu {
    display: none;
    position:fixed;
    top: 0;
    right: 0;
    padding: 16px 8px;
    z-index: 1;
}
/*style the icon*/
#menu {
    display: block;
    color:rgb(26,188,156);
    font-size: 50px;
}
/* style the menu button */
.dropbtn-menu {
/*    display: none;*/
    border: none;
    background-color: inherit;    
}

/* request reservation button */
.reserve-button {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    cursor: pointer;
    z-index: 1;
    text-decoration: none;
    text-align: center;
}
/*items in form*/
.error {color: red;}

.quarter {
    float: left;
    padding: 0 8px;
    width: 24.9999999%;
}
.half {
    float: left;
    padding: 0 8px;
    width: 49.9999999%;
}
.full {
    float: left;
    padding: 0 8px;
    width: 100%;
}
.form-row {
    margin-bottom: 8px;
}

/*style the date picker fall back options (text)*/
.fallback {
        position: relative;
        height: 90px;
/*        border: solid blue 1px;*/
        width: 100%;
        margin: 0;
}
.fallback_container {
    display: inline-block;
    text-align: left;
}
.fallback_input {
    padding: 8px 0;
}
.fallbackLabel {
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 0;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.fallbackDatePicker {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    height: 65px;
/*    border: solid red 1px;*/
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
@media screen and (max-width: 343px) {
/*    change form layout */
    .quarter {
        width: 49.9999999%;
        padding: 0 4px;
    }
    .half {
        width: 100%;
        padding: 0 4px;
    }
    h4 {
        font-size: 16px;
    }
    .form-row {
        margin-bottom: 4px;
    }
}
@media screen and (max-width: 424px) and (min-width: 344px) {
    .nativeDatePicker {
        width: 100%;
        padding: 0 4px;
    }
}

/* style modal */

/* style the modal "back to top" icon */
/*
.myuparrow {
    display: none;
    position: absolute;
    top: 0; 
    right: 16px;
    z-index: 1;
}
*/
/* style the modal close button */
.modal-close {
    color:white;
    right: 16px;
    font-size: 30px;
    padding: 0 16px;
}
/*style the back to top button in modals*/
/*display only for mobile devices*/
.backtotop {
    display: block;
    position: relative;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
/*style the faq modal*/
#faqlist li {padding-bottom: 4px}

@media screen and (min-width: 601px) {
    #last-p-faq {padding-bottom: 32px}
    .reserve-button {min-width: 300px; width: auto;}
}

/*style the room sections*/
/*style the horizontal scroll*/
.pn-ProductNav_Wrapper {
    position: relative;
    padding: 0 8px;
}
.pn-ProductNav {
  /* Make this scrollable when needed */
  overflow-x: auto;
  /* We don't want vertical scrolling */
  overflow-y: hidden;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
  /* We don't want internal inline elements to wrap */
  white-space: nowrap;
  /* If JS present, let's hide the default scrollbar */
  /* positioning context for advancers */
  position: relative;
  font-size: 0;
}
.js .pn-ProductNav {
  /* Make an auto-hiding scroller for the 3 people using a IE */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Remove the default scrollbar for WebKit implementations */
}
.js .pn-ProductNav::-webkit-scrollbar {
  display: none;
}
.pn-ProductNav_Contents {
  float: left;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
  position: relative;
}
.pn-ProductNav_Contents-no-transition {
  -webkit-transition: none;
  transition: none;
}
.pn-ProductNav_Link {
  font-size: 1rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 8px;
    width: 300px;
}
.pn-Advancer {
  /* Reset the button */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  /* Now style it as needed */
  position: absolute;
  top: 0;
  bottom: 0;
  /* Set the buttons invisible by default */
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
.pn-Advancer:focus {
  outline: 0;
}
.pn-Advancer:hover {
  cursor: pointer;
}

.pn-Advancer_Left {
  left: 0;
}
[data-overflowing="both"] ~ .pn-Advancer_Left, [data-overflowing="left"] ~ .pn-Advancer_Left {
  opacity: 1;
}
.pn-Advancer_Right {
  right: 0;
}
[data-overflowing="both"] ~ .pn-Advancer_Right, [data-overflowing="right"] ~ .pn-Advancer_Right {
  opacity: 1;
}
.advancer_icon {
    opacity: 0.6;
}
/*style the room overview image*/
.pn-ProductNav_Link img {
    width: inherit;
    height: 200px;
    max-width: 100%;
}
.modal-button {
    cursor: pointer;
}
.modal-asterix {
    font-size: 1.5em;
    line-height: normal;
}
@media screen and (max-width: 600px) {
    .pn-ProductNav_Link {
        width: 250px;
    }
    .pn-ProductNav_Link img {
        height: auto;
    }
}
/*style additional photos slide show*/
.mySlides2 {display: none}
.w3-left, .w3-right, .w3-badge {cursor: pointer}
.w3-badge {height: 13px; width:13px; padding: 0}
.caption {background-color: rgba(26,188,156,0.7); color: white}

/*style the ok button for the success/fail message modal for the contact form*/
.modal-close-ok {
    display: block;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}
.error-box {
    border: 2px dashed red;
}
.error-txt {
    display: none;
    color: red;
    font-weight: bold;
    font-size: 10px;
}
.svg-logo {
    fill: white; /*sun*/
    stroke: white; /*squiggle line*/
}
.room-p {
    padding: 0;
    margin: 0
}
#googleMap {height: 400px; width: 100%}