body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-weight:400;
  line-height:1.8em;
  color:#2B2D2F;
  scroll-behavior: smooth;
}

.topnav {
  float: right;
  margin-right: 5%;
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  color: white;
}
.topnav a.active{
  color: black;
}
.topnav .icon {
  display: none;
  margin-left:10px;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}@media screen and (max-width: 600px) {
    .pimg1, .pimg2, .pimg3, .pimg4, .pimg_room, .pimg_fac, .pimg_act, .pimg_car{
      position:relative;
      opacity:0.70;
      background-position:center;
      background-size:contain;
      background-repeat:no-repeat;
    
      /*
        fixed = parallax
        scroll = normal
      */
      background-attachment:scroll !important;
    }
    
    #background-video {
        margin-top: 30px;
        width:100% !important;
        height:40% !important;
    }

    .pimg1{
      margin-top: 80px;
      background-image:url('../img/image1.jpg');
      min-width:100% !important;
      min-height:40% !important;
      transition: background 1s linear;
    }
    
    .pimg2{
              /*margin-top: 80px;*/
      background-image:url('../img/img_2.jpg');
      min-width:100% !important;
      min-height:40%;
    }
    
    .pimg3{
              margin-top: 80px;
      background-image:url('../img/img_3.jpg');
      min-width:100% !important;
      min-height:40%;
    }
    
    .pimg4{
              margin-top: 80px;
        background-image:url('../img/img_4.jpg');
        min-width:100% !important;
      min-height:40%;
    }

    .pimg_room{
        background-image:url('../img/room1_2.jpg');
        min-width:100% !important;
        /*min-height: 40% !important;*/
              min-height:40%;
    }
    
    .pimg_fac{
        background-image:url('../img/spa_1.jpg');
        min-width:100% !important;
        /*min-height: 40% !important;*/
        min-height:40%;
    }
    
    .pimg_act{
      background-image:url('../img/act_1.jpg');
        min-width:100% !important;
        /*min-height: 40% !important;*/
              min-height:40%;
    }
    
    .pimg_car{
      background-image:url('../img/car_1.jpg');
        min-width:100% !important;
        /*min-height: 40% !important;*/
              min-height:40%;
    }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #menu_nav {
    margin-right:50px;
  }
}

    .pimg2, .pimg3, .pimg4, .pimg_room, .pimg_fac, .pimg_act, .pimg_car{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:scroll;
    width: 100% !important;
    height: calc(66.4vw) !important;
}

.pimg1{
  background-image:url('../img/image1.jpg');
  min-height:40%;
  transition: background 1s linear;
}

.pimg2{
  background-image:url('../img/img_2.jpg');
  min-height:35%;
}

.pimg3{
  background-image:url('../img/img_3.jpg');
  min-height:40%;
}

.pimg4{
    background-image:url('../img/img_4.jpg');
    min-height:30%;
}

.pimg_room{
    background-image:url('../img/room1_2.jpg');
    min-height:40%;
}

.pimg_fac{
    background-image:url('../img/spa_1.jpg');
    min-height:40%;
}

.pimg_act{
  background-image:url('../img/act_1.jpg');
  min-height:40%;
}

.pimg_car{
  background-image:url('../img/car_1.jpg');
  min-height:40%;
}

.section{
  text-align:center;
  padding:50px 20px;
}

.section-light{
  background-color:white;
  color:#666;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
  line-height: 1.5;
}

.ptext .border{
  background-color:#111;
  color:#fff;
  padding:10px;
}

.ptext2{
  position:absolute;
  top:30%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.ptext2 .border2{
  background-color:#111;
  color:#fff;
  padding:10px;
}

.ptext .border.trans{
  background-color:transparent;
}

@media(max-width:568px){
  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
  }
}

/* NAVBAR */

.navbar {
    transition: all 0.4s;
}

.navbar .nav-link {
    color: #fff;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    text-decoration: none;
}

.navbar .navbar-brand {
    color: #fff;
}


/* Change navbar styling on scroll */
.navbar.active {
    background: #fff;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.active .nav-link {
    color: #555;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #555;
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #555;
}


/* Change navbar styling on small viewports */
@media (max-width: 991.98px) {
    .navbar {
        background: #fff;
    }

    .navbar .navbar-brand, .navbar .nav-link {
        color: #555;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}