/* montserrat-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  html {
    box-sizing: border-box;
    display: block;
    
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
.clear::after {
    clear: both;
}
.clear::before,
.clear::after {
    display: block;
    content: "";
}
.pgs-list.display {
    display: block;
}
h1, h2, h3, h4, p, a, div, ul, li {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;

}
img {
  vertical-align: top;
  width: 100%;
}
ul {
    list-style: none;
}
body{
    padding: 0;
    margin: 0;
    font-family: 'Montserrat';

}
main a{
    display: inline;
}
header{
    background: url(/images/banner.jpg);
    padding-bottom: 50px;
    background-size: cover;
    background-position: center;
}
.display-button{
    cursor: pointer;
    width: 120px;
    padding: 15px;
    margin-right: 30px;
    float: right;
    margin-top: 30px

  }
  .display-button span{
    background-color:#999;
    display: block;
    height: 3px;
    margin-bottom: 4px;
    width: 22px;
    border-radius: 1px;
  }
  .display-button p{
    float: right;
    color:#999;
    font-size: 20px;
    margin-top: -24px;
  }
  .logo{
    width: 145px;
    float: left;
  }
  .topbar{
    background-color: #fff;
    padding-bottom: 10px;
  }
  .wrapper{
    width: 90%;
    margin: 0 auto;
    max-width: 1250px;
  }
  .date img{
    width: 15px;
    margin-right: 15px;
  }
  .date{
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
    color: #999;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
  }
  .check{
    background-color: #005e63;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
  }
  .check:hover{
    background-color: #008086;
  }
  .book{
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 350px;
    padding: 20px 50px 20px 50px ;
  }
  .book h2{
    font-weight: 400;
    text-align: center;
    font-size: 34px;
    padding-bottom: 20px;
  }
  .date p:hover{
    color: black;
  }
  .nav-list li{
    color:rgba(0, 0, 0, 0.7);
    font-weight: 500;
    border-bottom: 1px solid #000;
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
  }
  .nav-list a{
    display: block;
    color:rgba(0, 0, 0, 0.7);

  }
  .dropdown-content li{
    padding-left: 30px;
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .dropdown-content li:hover{
    background-color: #005e63;
    color: #fff;
  }
  .dropdown-content{
    border-bottom: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;

  }
  .nav-list{
    display: none;
  }
  .nav-list.show{
    display: block;
  }
  .hotel{
    background-color:#f3f4f7 ;
    text-align: center;
    padding-top: 80px;
    color: rgba(0, 0, 0, 0.666);
    padding-bottom: 30px;
  }
  .hotel h2{
    font-weight: 400;
    font-size: 28px;
    color: rgba(0, 0, 0, 0.666);
  }
  .hotel p{
    padding-top: 15px;
  }
  .unu{
    margin-top: 30px;
  }
  .hotel button{
    background-color: #005e63;
    border: none;
    text-transform: uppercase;
    margin-top: 40px;color: #fff;
    padding: 15px;
    letter-spacing: 4px;
    border-radius: 4px;
    cursor: pointer;
  }
  .hotel button:hover{
    background-color: #f3f4f7;
    color: #005e63;
    border: 1px solid #005e63;
  }
  .photo-rooms{
    background-color:#f3f4f7 ;
    text-align: center;
    padding-top: 80px;
    color: rgba(0, 0, 0, 0.666);
    padding-bottom: 30px;
  }
  .photo-rooms h2{
    font-weight: 400;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.666);
    padding-top: 15px;
  }
  .photo-rooms p{
    padding: 20px;
    line-height: 30px;
  }
  .photo-rooms button{
    background-color: #005e63;
    border: none;
    text-transform: uppercase;
    margin-top: 10px;
    color: #fff;
    padding: 15px;
    letter-spacing: 4px;
    border-radius: 4px;
    cursor: pointer;
  }
  .photo-rooms button:hover{
    background-color: #f3f4f7;
    color: #005e63;
    border: 1px solid #005e63;
  }
  .doi{
    background-color: #fff;
    margin-top: 30px;
    padding-bottom: 20px;
    border-radius: 5px;
  }
  .doi2{
    background-color: #fff;
    margin-top: 30px;
    padding-bottom: 20px;
    border-radius: 5px;
    max-width: 400px;
    width: 100%;
    margin: 30px auto;
  }
  .guest{
    background: url(/images/reviews-bg.jpg);
    background-size: cover;
    text-align: center;
    color: rgba(255, 255, 255);
  }
  .blue{
    background-color:#223c55aa;
    padding-top: 70px;
    padding-bottom: 170px;

  }
  .guest p {
    color:rgba(255, 255, 255, 0.8) ;
    width: 370px;
    margin: 0 auto;
    padding-top: 20px;
  }
  .guest h2{
    font-weight: 500;
    font-size: 26px;
    padding-bottom: 60px;
  }
  .disp2,.disp3{
    display: none;
  }
  .disp1{
    margin-top: 10px;
  }


  .up-foot{
    background-color: #272727;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .up-foot h2{
    font-weight: 500;
    color: rgba(255, 255, 255);
    font-size: 20px;
  }
  .f-logo{
    background-color: #fff;
    text-align: center;
  }
  .f-logo img{
    width: 145px;
    margin: 20px;
  }
  .four{
    margin-top: 30px;
  }
  .four li{
    color: #ccc;
    list-style: disc;
    margin-left: 40px;
    padding-top: 10px;
    line-height: 25px;
  }
  .four span{
    color: #fff;
    cursor: pointer;
  }
  .four p{
    color: #ccc;
    padding-top: 10px;
    cursor: pointer;
  }
  .down{
    background-color: #343a40;
    text-align: center;
    color: #fff;
    padding: 20px;
  }
  .down p{
    line-height: 28px;
  }
  .down span{
    cursor: pointer;
  }

.content{
  margin-top: 50px;
  color: rgba(0, 0, 0, 0.8);
  padding-bottom: 50px;

}
.content h1{
  font-weight: 400;
  font-size: 34px;
}
.content p{
  line-height: 28px;
  padding-top: 10px;
}
.content h2{
  font-weight: 300;
  padding-top: 10px;
}

.photo{
  margin-bottom: 150px;
}
.offer{
  color: #fff;
  padding-top: 150px;
  padding-bottom: 130px;
  text-align: center;
}
.offer h2{
  font-weight: 500;
  font-size: 36px;
}
.second {
margin-top: 50px;
padding-bottom: 50px;
color: rgba(0, 0, 0, 0.8);

}
.second h1{
  font-weight: 400;
  font-size: 40px;
}
.second p{
  line-height: 28px;
  padding-top: 10px;
}











@media (min-width:767px){
.disp1{
display: none;
}
.disp2{
    display: block;
    margin-top: 10px;
}
.disp2 img{
  width: 31%;
  margin-left: 10px;
}

.doi{
  width: 22%;
  float: left;
  margin-left: 20px;
  min-height: 460px;
  max-width: 400px;
}
.doi2{
  width: 40%;
  float: left;
  margin-left: 20px;
  min-height: 480px;
}
.four{
  width: 46%;
  float: left;
  margin-right: 20px;
}

}



@media (min-width:992px){

.display-button{
  display: none;
}
.nav-list{
  display: inline-flex;
  width: 90%;
  float: right;
  max-width: 825px;
  margin-top: 30px;
}
.dropdown-content{
  display: none;
}
.nav-list li{
  padding: 10px;
  border-bottom: none;
}
.free{
  display: none;
}



.dropdown:hover #aboutList {
  display: block;
  
}
.dropdown:hover #calendarList {
  display: block;
  
}
.dropdown:hover #activityList {
  display: block;
  
}
.dropdown-content{
  display: none;
  margin-left: 0%;
  position: absolute;   
  background-color: #fffffff5;
  transition: 0.5s;
  left: auto;
  height: auto;
  padding-top: 0;
  width: 200px;
  }
.dropdown-content li{
  display: grid;
  float: none;   
  margin: 5px;
  text-transform: capitalize;
  font-size: 14px;
}
.book{
  max-width: 1050px;
}

.book h2{
  font-size: 40px;
}
.date{
  width: 50%;
  float: left;
  padding: 20px;
}
.check{
  width: 50%;
  float: left;
  padding: 20px;

}
.unu{
  width: 33%;
  float: left;
}

.guest p {
  width: 685px;
}

.disp2{
display: none;
}
.disp3{
  display: block;
  margin-top: 10px;
}
.disp3 img{
  width: 19%;
  margin-left: 10px;
}
.disp1 img{
  width: 95%;
}
.four{
  width: 35%;

}
.nav-list li:hover{
 color: #005e63;
}
.nav-list a:hover{
 color: #005e63;
}
.dropdown-content li:hover{
  color: #fff;
}










}