html{box-sizing: border-box}*,*:before,*:after{box-sizing: inherit}html{overflow-x: hidden}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%; line-height: 1.15; -webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
a{background-color:transparent}a:active,a:hover{outline-width:0}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}
figure{margin:1em 40px}
img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}
optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

/* --------------------MainCss-------------------- */
/* 
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif; 
font-family: 'Playfair Display', serif; 
*/
html,body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
@media (max-width: 900px) {body {padding: 20px;}}
h1 {margin: 0.625rem 0;font-family: 'Roboto Slab', serif;}
h2 {margin: 0.625rem 0;font-family: 'Roboto', sans-serif;}
h3 {font-family: 'Roboto Slab', serif;}
h4 {margin: 0.125rem 0;}
a {color: inherit}
img {vertical-align: middle}
.image {max-width: 100%;height: auto;}
.clearfix::after {content: "";display: table;clear: both}
/* ---------------NavBar--------------- */
nav {
  width: 100%;
  z-index: 1;
  padding: 2rem 0 !important;
  background-image: url(images/main/room-back.jpg);
  background-position: center;
  color: rgb(0, 0, 0) !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
nav a.icon {display: none;}
.barItems {
  margin: auto 2rem;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background-color: inherit;
  color: inherit;
  cursor: pointer;
  white-space: normal;
}
.barItems:hover {color: rgb(162, 162, 162) !important;}
.barItems:focus {outline: 0!important;}
.barItems:active {color: rgb(162, 162, 162) !important;outline: 0!important;}

@media (max-width: 900px) {
  .barItems {display: none;}
/* -- BurgerButton -- */
  .float a.icon {z-index: 1;display:inline;position: absolute; top: 10px; right: 50px;}
  /* .float.responsive {position: absolute; top: 10;padding-right: 40px!important;} */
  .float.responsive a.icon {display:inline;position: absolute; top: 10px; right: 50px;}
  .float.responsive .barItems {
    text-decoration: none;
    display: block;
    margin: 0.5rem;
  } 
  nav {
    justify-content: center;
    background-image: none;
    background-color: transparent !important;
    padding-top: 0.5rem !important;
    /* position: absolute; top: 10; */
  }
}
@media (max-width: 1200px) {.barItems{font-size: 0.7rem;}}
@media (max-width: 500px) {.float.responsive .barItems {font-size: 2vw;margin: 0.3rem;}}
/* ---------------NavbarEnd--------------- */

/* ---------------Header--------------- */
.indexHeader {
  background-image: url(images/main/room-back.jpg);
  background-position: center;
  max-height: 1000px;
}
.header-slideshow-container {
  max-width: 1700px;
  max-height: 850px;
  position: relative;
  margin: auto;
}
.headerSlides>img {
  max-height: 800px;
  outline: 0.521vw solid white;
  outline-offset: -20px;
}
.intro {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
}

.mySlides {display: none;}
.hprev, .hnext {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 5px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.hnext {left:auto; right: 5px; border-radius: 3px 0 0 3px;}
.htext {
  font-family: 'Playfair Display', serif;
  font-size: 4vw;
  letter-spacing: 0.25rem;
  color: white;
  white-space: nowrap;
  position: absolute;
  top: 70%;
  left: 50%;
  text-align: center !important;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation-name: titleElevator;
  animation-duration: 4s;
}
@keyframes titleElevator {
  from {position: absolute;top: 95%;left: 50%;opacity: 0;}
  to {position: absolute;top: 70%;left: 50%;opacity: 1;}
}
.hrtext {
  font-family: 'Playfair Display', serif;
  font-size: 4vw;
  letter-spacing: 0.25rem;
  color: white;
  text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
  white-space: nowrap;
  position: absolute;
  top: 60%;
  left: 50%;
  text-align: center !important;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation-name: roomElevator;
  animation-duration: 4s;
}
@keyframes roomElevator {
  from {position: absolute;top: 95%;left: 50%;opacity: 0;}
  to {position: absolute;top: 60%;left: 50%;opacity: 1;}
}
a.button {
  padding: 10px;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.250vw;
  position: absolute;
  top: 75%;
  left: 50%;
  text-align: center !important;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation-name: roomLinkElevator;
  animation-duration: 4s;
}
a.button:after {content: ' \25BA'; font-size: 18px;}
@keyframes roomLinkElevator {
  from {position: absolute;top: 95%;left: 50%;opacity: 0;}
  to {position: absolute;top: 75%;left: 50%;opacity: 1;}
}
.bulletList {
  position: absolute;
  top: 90%;
  left: 50%;
  text-align: center !important;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.bullets {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,.bullet:hover {background-color: #717171;}
.headerfade {animation-name: headerfade; animation-duration: 1.5s;}
@keyframes headerfade {from {opacity: .4}to {opacity: 1}}

@media (max-width: 900px) {
  .indexHeader {background-image: none;}
  .headerSlides>img {outline: 0; outline-offset: 0;border-radius: 18px;}
  a.button {font-size: 1.8vw;}
}
@media (max-width: 700px) {
  .bullets{height: 9px;width: 9px;}
  .intro {font-size: 2.333vw;}
}
@media (max-width: 600px) {
  .hrtext {top: 50%; font-size: 5vw;}
  a.button {font-size: 2.667vw;}
  @keyframes roomElevator {
  from {position: absolute;top: 95%;left: 50%;opacity: 0;}
  to {position: absolute;top: 50%;left: 50%;opacity: 1;}
  }
}
@media (max-width: 500px) {
  .htext {top: 65%;}
  @keyframes titleElevator {
    from {position: absolute;top: 95%;left: 50%;opacity: 0;}
    to {position: absolute;top: 65%;left: 50%;opacity: 1;}
  }
}
@media (max-width: 450px) {.intro {font-size: 2.8vw;}}
/* ---------------HeaderEnd--------------- */

/* --------------------PageContent-------------------- */

/* ---------------CriticsSection--------------- */
.criticsSection {
  background-image: url(images/main/critics-back.jpg);
  background-position: right bottom;
  height: 500px;
  box-shadow: -20px 0 18px rgba(18, 26, 17, 0.58), -20px 0 18px rgba(18, 26, 17, 0.58), 20px 0 18px rgba(18, 26, 17, 0.58), 20px 0 18px rgba(18, 26, 17, 0.58);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 2;
}
.criticsText {
  font-family: 'Roboto Slab', serif; 
  text-align: center; 
  color: white;
  text-shadow: -0.5px -0.5px 0 rgb(76, 74, 74), 0.5px -0.5px 0 rgb(76, 74, 74), -0.5px 0.5px 0 rgb(76, 74, 74), 0.5px 0.5px 0 rgb(76, 74, 74);
  letter-spacing: 0.1rem;
}
.criticsBox {width: 900px;height: 250px;}
.slideshow-container {
  max-width: 1100px;
  height: 200px;
  position: relative;
  margin: auto;
}
.mySlides {
  display: none;
  /* Hide the images by default */
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover,
.next:hover {background-color: rgba(255, 255, 255, 0.8);}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {background-color: #717171;}
.fade {animation-name: fade;animation-duration: 1.5s;}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@media (max-width: 1000px) {
  .criticsSection>h2 {margin-left: 10px; margin-right: 10px; font-size: 2.400vw;}
  .criticsBox {width: 90vw;}
  .mySlides iframe {max-width: 70vw;}
}
@media (max-width: 900px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper div:first-child {
    order: 1;
  }
  .criticsSection{
    background-image: none!important;
    background-color: #5F8FBF;
    margin-bottom: 20px;
    border-radius: 18px;
    box-shadow: none;
    height: 400px;
  }
}
@media (max-width: 650px) {
  .criticsSection {height: 400px;}
  .slideshow-container {height: 200px;}
  .criticsBox {height: 300px;}
  .criticsSection>h2 {font-size: 2.769vw;}
}
@media (max-width: 450px) {
  .criticsSection {height: 300px;}
  .criticsBox {height: 200px;}
  .slideshow-container {height: 170px;}
}
/* ---------------CriticsSectionEnd--------------- */

/* ---------------DiscoverSection--------------- */
.discoverSection {
  background-image: url(images/main/room-back.jpg);
  background-position: center;
  height: 52.083vw;
  position: relative;
  z-index: 1;
}
.discoverSmall {display: none;}
.discoverContent {
  width: 62.500vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  box-shadow: -20px 0 18px rgba(18, 26, 17, 0.58), -20px 0 18px rgba(18, 26, 17, 0.58), 20px 0 18px rgba(18, 26, 17, 0.58), 20px 0 18px rgba(18, 26, 17, 0.58);
}
.discoverImage>p {
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 26px;
  white-space: nowrap;
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.discoverSmall>p {
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 26px;
  white-space: nowrap;
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.buttonClass {
  display: block;
  margin-left: auto; margin-right: auto; margin-top: 8px;
  text-align: center;
  padding-left: auto; padding-right: auto; padding-top: 10px;
  text-decoration: none;
  font-size: 15px;
  font-family: Arial;
  width: 140px;
  height: 40px;
  border-width: 1px;
  color: #fff;
  border-color: #4b8f29;
  font-weight: bold;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0px 10px 14px -7px #3e7327;
  text-shadow: 0px 1px 0px #5b8a3c;
  background: linear-gradient(#77b55a, #72b352);
}
.buttonClass:hover {background: linear-gradient(#72b352, #77b55a);}

@media (max-width:900px) {.discoverContent {display: none;}
  .discoverSmall {display: block;margin-bottom: 20px;}
  .discoverSection {height: auto;background-image: none;}
  .discoverSmall>p {font-size: 2.889vw;}
  .buttonClass {font-size: 1.556vw;width: 15.556vw;height: 4.444vw;}
}
@media (max-width:700px) {.buttonClass {padding-top: 7px;}}
@media (max-width:500px) {.buttonClass {padding-top: 5px;}}
/* ---------------DiscoverSectionEnd--------------- */

/* ---------------ContactSection--------------- */
.contactSection {margin-top: 100px;height: 400px;}
.contactTitle {text-align: center;}
.contactFlex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.contacts {
  padding: 2% 2%;
  margin: 2% 0;
  border-bottom: 2px solid rgb(74, 74, 74);
}
.contacts>h2 {color: black; font-size: 1.375rem;font-style: normal;}
.material-icons {font-size: 2.25rem;}
@media screen and (min-width: 900px){
  .contactFlex{flex-direction: row;}
  .contacts{flex-basis:20%; border-bottom: 0;}
  .email{border-left: 2px solid rgb(74, 74, 74); border-right: 2px solid rgb(74, 74, 74);}
}
@media (max-width: 900px) {
  .contactSection {margin-top: 20px;height: 65vw;}
  .contactTitle {font-size: 3.5vw;}
  .contacts>h2 {font-size: 2.5vw;}
}
@media (max-width: 650px) {
  .contactSection {height: 72vw;}
  .contactTitle {font-size: 3.846vw;}
  .contacts>h2 {font-size: 2.769vw;}
}
@media (max-width: 550px) {.contactSection {height: 400px;}}
/* ---------------ContactSectionEnd--------------- */

/* ---------------MapSection--------------- */
.map {width: 99.479vw!important;}
@media (max-width:900px) {.map{padding-right: 38px;}}
/* ---------------MapSectionEnd--------------- */

/* ---------------Footer--------------- */
footer {
  font-family: 'Roboto Slab', serif;
  margin-top: -5px;
  padding: 1rem 0;
  text-align: center !important;
  color: grey!important;
  background-color: black!important;
}
/* ---------------FooterEnd--------------- */

/* ---------------RoomPage--------------- */
.roomHeader {max-height: 800px;}
.slideshowSection {
  background-image: url(images/main/room-back.jpg);
  background-position: center;
  height: 118.750vw;
}
.slideshowSectionDis {
  background-image: url(images/main/room-back.jpg);
  background-position: center;
  height: 1500px;}
.info {
  font-size: 2.083vw;
  text-align: center;
  margin-top: 0;
  margin-bottom: 50px;
  padding-top: 50px;
}
.infop {
  font-size: 1.250vw;
  text-align: center;
  color: rgb(121, 111, 111);
  margin-bottom: 4%;
}
.img-list {
list-style: none;
padding: 0;
margin: 0;
}
.img-list li {
box-sizing: border-box;
width: 33.33%;
float: left;
position: relative;
cursor: pointer;
}
.img-list img {
max-width: 100%;
vertical-align: middle;
}
.RoomImage {border-radius: 18px;border: 10px solid #FFFFFF;}
/* The Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 500px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.85);
}
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1300px;
}
/* The Close Button */
.close {
  color: rgb(255, 255, 255);
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.mySlides {display: none;}
.cursor {cursor: pointer;}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.5);}
.roomSlideshow-container {
  max-width: 1500px;
  height: 900px;
  position: relative;
  margin: auto;
}
.RoomSlides {
  display: none;
  /* Hide the images by default */
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.prevdis, .nextdis {color: #000!important;}
.Roomdot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,.Roomdot:hover {background-color: #717171;}

@media (max-width: 1000px) {
  .slideshowSection {height: 275vw;}
  .slideshowSectionDis {height: 120vw;}
  .info {font-size: 2.400vw;margin-bottom: 5vw;}
  .infop {font-size: 1.500vw;}
  .img-list li {width: 50%;}
  .modal-content {width: 100%;max-width: 3000px;}
  .roomSlideshow-container {height: 70vw;}
}
@media (max-width: 900px) {
  .slideshowSection {height: 265vw;background-image: none;}
  .roomHeader {border-radius: 18px;}
  .slideshowSectionDis {height: 120vw;background-image: none;}
}
@media (max-width: 800px) {
  .slideshowSection {height: 265vw;}
  .info {font-size: 3vw;}
  .infop {font-size: 2vw;}
  .roomSlideshow-container {height: 62.500vw;}
}
@media (max-width: 700px) {
  .modal-content>.mySlides {display: none!important;}
  .modal {display: none!important;}
  .cursor {cursor: default;}
  .slideshowSectionDis {height: 130vw;}
}
@media (max-width: 600px) {
  .slideshowSection {height: 890vw;}
  .slideshowSectionDis {height: 170vw;}
  .info {font-size: 3.5vw;}
  .infop {font-size: 2.600vw;}
  .img-list li {width: 100%;}
}
@media (max-width: 500px) {
  .info {padding-top: 20px;}
  .slideshowSection {height: 870vw;}
}
/* ---------------RoomPageEnd--------------- */