@font-face {
    font-family: "FontsFree-Net-KeplerStd-Regular";
    src: url('FontsFree-Net-KeplerStd-Regular.woff') format('woff'),
    url('font/FontsFree-Net-KeplerStd-Regular.woff2') format('woff2'),
    url('font/FontsFree-Net-KeplerStd-Regular.svg#FontsFree-Net-KeplerStd-Regular') format('svg'),
    url('font/FontsFree-Net-KeplerStd-Regular.eot'),
    url('font/FontsFree-Net-KeplerStd-Regular.eot?#iefix') format('embedded-opentype'),
    url('font/FontsFree-Net-KeplerStd-Regular.ttf') format('truetype');

    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GoodVibrationsScript';
    src: url('font/GoodVibrationsScript.eot');
    src: url('font/GoodVibrationsScript.eot') format('embedded-opentype'),
         url('font/GoodVibrationsScript.woff2') format('woff2'),
         url('font/GoodVibrationsScript.woff') format('woff'),
         url('font/GoodVibrationsScript.ttf') format('truetype'),
         url('font/GoodVibrationsScript.svg#GoodVibrationsScript') format('svg');

         font-weight: normal;
    font-style: normal;
    
}

@font-face {
  font-family: 'Kepler Std';
  src: url('font/KeplerStd-LightDisp.eot');
  src: url('font/KeplerStd-LightDisp.eot?#iefix') format('embedded-opentype'),
      url('font/KeplerStd-LightDisp.woff2') format('woff2'),
      url('font/KeplerStd-LightDisp.woff') format('woff'),
      url('font/KeplerStd-LightDisp.ttf') format('truetype'),
      url('font/KeplerStd-LightDisp.svg#KeplerStd-LightDisp') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


    @font-face {
    font-family: 'keplerstdblackdisp';
    src: url('font/keplerstdblackdisp.eot');
    src: url('font/keplerstdblackdisp.eot') format('embedded-opentype'),
         url('font/keplerstdblackdisp.woff2') format('woff2'),
         url('font/keplerstdblackdisp.woff') format('woff'),
         url('font/keplerstdblackdisp.ttf') format('truetype'),
         url('font/keplerstdblackdisp.svg#keplerstdblackdisp') format('svg');
           font-weight: normal;
  font-style: normal;
  font-display: swap;
}


body{
  background-color: #f6f5ea; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: FontsFree-Net-KeplerStd-Regular;

}



.btn-toolbar{
  position: absolute;
  top: 0px;
  background:#000000;
}

/*BUTTON STYLE*/
    a.button {
      color:#9f9b7a;
      text-decoration:none;
      
    }
        a:hover.button {
          color:#ffffff;
        }
        
.button {
        background-color: #c9c49e;
        -webkit-border-radius: 60px;
        border-radius: 10px;
        border: none;
        color: #7f7a55;
        cursor: pointer;
        display: inline-block;
        font-family: FontsFree-Net-KeplerStd-Regular;
        font-size: 20px;
        font-weight:bold;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        margin-top:20px;
      }
      @keyframes glowing {
        0% {
          background-color: #f6f1c5;
          box-shadow: 0 0 5px #f6f1c5; 
        }
        50% {
          background-color: #ffffff;
          box-shadow: 0 0 20px #ffffff;
        }
        100% {
          background-color: #c9c49e;
          box-shadow: 0 0 5px #c9c49e;
        }
      }
      .button {
        animation: glowing 1300ms infinite;
      }
      
      
/*END STYLE*/

/*BLINK*/
.blink{
		width:100%;
		text-align: center;
		line-height: 50px;
			animation: blink 1s linear infinite;
			margin-top:20px;
			color:red;
			font-size:25px;
	}
	
	
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
      
/*END blink*/
      
      
      /*=========================================================*/
      /* Muncul garis dibawah menu saat mouse hover pada menu utama*/
      /*=========================================================*/
      @media (min-width: 768px) { 
      .navbar .navbar-nav .nav-item{
        position:relative

        
        }

        
      .navbar .navbar-nav .nav-item::after{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      content:'';
      background-color:black;
      width:0%;
      height:1px;
      text-decoration:none;
      }

      .navbar .navbar-nav .nav-item:hover::after{
      width:71%; text-decoration:none;
      }
      
        .navbar-nav .nav-item a.nav-link.active{
          text-decoration: underline;
          text-underline-offset: 8px;
          color:#000000;
        }
        
        .navbar .navbar-nav .nav-item:hover{
          color:#007bff;
        }

     
    }
      /*=========================================================*/
      /* END Muncul garis dibawah menu saat mouse hover pada menu utama*/
      /*=========================================================*/

      .ps-5{padding-left:0px !important}


      /*=========================================================*/
      /* Modif Menu atas*/
      /*=========================================================*/
      .navbar-nav{font-size: 16px;}

      .bg-light2{background-color: #ebe9d9; padding-top: 15px;}
      .navbar-nav .nav-item a.nav-link{text-transform: capitalize;padding:0px; margin:0px; color:#000000; letter-spacing: 1.5px; font-family: "FontsFree-Net-KeplerStd-Regular"; font-size:20px
      }
      /*=========================================================*/
      /* END Modif Menu atas*/
      /*=========================================================*/
      

      /*=========================================================*/
      /*hapus style agar tdk ada garis di gambar saat mouse hover*/
     /*=========================================================*/
      #nav-item-standart::after{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      content:'';
      background-color:black;
      width:0%;
      height:0px;
      }

      #nav-item-standart:hover::after{
      width:80%
      }
       /*=========================================================*/
      /* END hapus style agar tdk ada garis di gambar saat mouse hover*/
     /*=========================================================*/

      /*=======================*/
      /*animasi button book now*/
      /*=======================*/
      .slide {
          position: relative;
          overflow: hidden;
        }

        .text {
          position: relative;
          transition: 0.5s;
        }

        .slide::before {
          content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 130%;
        height: 55px;
        background-color: #007bff;
        transform: translate(-110%, 0) skew(-30deg);
        transition: 0.5s;
        }

        .slide:hover .text {
          color: #fff;
        }

        .slide:hover::before {
          transform: translate(-5%, 0) skew(-15deg);
        }

        /* Button-2 */

        .slide-2 {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          color:#9f9b7a;
          border:1px solid #9f9b7a;
          margin-left:20px;
          margin-top:0px;
          height:55px;
          border-radius: 10px;
        }
        
        .slide-2 a {
          color:#9f9b7a;
        }
        .slide-2 a:hover {
          color:#ffffff;
        }
        
        /* .text {
          position: relative;
          transition: 0.5s;
        } */

        .slide-2::before {
          content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 55px;
        background-color: #9f9b7a;
        transform: translate(0%, 100%) skew(0deg);
        transition: 0.5s;

        }

        .slide-2:hover .text {
          color: #fff;
        }

        .slide-2:hover::before {
          transform: translate(0%, 0) skew(0deg);
        }




        .slide-3 {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          color:#9f9b7a;
          border:1px solid #9f9b7a;
          margin-left:20px;
          height:70px;
          border-radius: 10px;
        }

        /* .text {
          position: relative;
          transition: 0.5s;
        } */

        .slide-3::before {
          content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #9f9b7a;
        transform: translate(0%, 100%) skew(0deg);
        transition: 0.5s;

        }

        .slide-3:hover .text {
          color: #fff;
        }

        .slide-3:hover::before {
          transform: translate(0%, 0) skew(0deg);
        }
      /*=======================*/
      /*END animasi button book now*/
      /*=======================*/
      
       /*=======================*/
      /*canvas mobile menu*/
      /*=======================*/

      #header-nav .offcanvas-end{width:100%;}

       /*=======================*/
      /* end canvas mobile menu*/
      /*=======================*/
     
      
      .icon {
        cursor: pointer;
        position: relative;
        display: inline-block;
        width: 42px;
        height: 42px;
        padding: 2px 0 0 2px;
        overflow: hidden;
      }
      .icon::before, .icon::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: all 0.25s ease;
        border-radius: 30px;
      }
      .icon i {
        position: relative;
        color: #333333;
        font-size: 25px;
        transition: all 0.25s ease;
        padding-top:7px;
        padding-left:8.5px;
      }
      .icon-fill::before {
        transition-duration: 0.5s;
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-fill:hover::before {
        box-shadow: inset 0 0 0 60px #9f9b7a;
      }
      .icon-enter::after {
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-enter::before {
        border-radius: 0;
        margin-left: -100%;
        box-shadow: inset 0 0 0 60px #9f9b7a;
      }
      .icon-enter:hover::before {
        margin-left: 0;
      }
      .icon-expand::after {
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-expand::before {
        background: #c82647;
        box-shadow: inset 0 0 0 60px #9f9b7a;
      }
      .icon-expand:hover::before {
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-collapse::before {
        border-radius: 0;
      }
      .icon-collapse:hover::before {
        box-shadow: inset 0 30px 0 0 #9f9b7a, inset 0 -30px 0 0 #9f9b7a;
      }
      .icon-collapse::after {
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-rotate {
        box-shadow: inset 0 0 0 1px #9f9b7a;
      }
      .icon-rotate::after, .icon-rotate::before {
        border: 0px solid transparent;
      }
      .icon-rotate:hover::before {
        transition: border-top-width 0.3s ease, border-top-color 0.3s ease;
        border-width: 60px;
        border-top-color: #9f9b7a;
      }
      .icon-rotate:hover::after {
        transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
        border-width: 60px;
        border-left-color: #9f9b7a;
      }
      .icon-rotate:hover {
        transition: background 0.001s ease 0.3s;
        background: #9f9b7a;
      }
      .icon-rotate i {
        z-index: 1;
      }
      




    .heading {
      width: max-content;
      display: flex;
      flex-direction: column; 
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      width:100%;
      z-index:1;
    }

  .heading > div {
    overflow: hidden; }
    .heading > div > p {
      width: max-content;
      
      margin: 0;
      line-height: 100px; }

    .green {
      color: #32c267; }
    
    div.heading > div {
      animation-delay: 0; }
      div.heading > div:nth-child(2) > p {
        animation-delay: 1.05s; }
    
    div.heading > div {
      animation-delay: 0; }
      div.heading > div:nth-child(3) > p {
        animation-delay: 1.075s; }
    
    .slide-up {
      animation: slide-up 0.75s cubic-bezier(0.65, 0, 0.35, 1) both; }
    
    @keyframes slide-up {
      0% {
        transform: translateY(100px); }
      100% {
        transform: translateY(0); } }


   
   
    .heading2 {
      width: max-content;
      display: flex;
      flex-direction: column; 
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width:100%;
    }

  .heading2 > div {
    overflow: hidden; }
    .heading > div > p {
      width: max-content;
      
      margin: 0;
      line-height: 100px; }

.green {
  color: #32c267; }

div.heading2 > div {
  animation-delay: 0; }
  div.heading2 > div:nth-child(2) > p {
    animation-delay: 1.05s; }

div.heading2 > div {
  animation-delay: 0; }
  div.heading2 > div:nth-child(3) > p {
    animation-delay: 1.075s; }


    
#lokasi a{color:#56533b;}    
    
    

    
    
    
    
.phone {
  width: 100%;
  height: auto;
  margin-top: 30px;
}
.el {
position: relative;
text-align: center;
color: white;
background:#fd7b6a;
}


/* Container holding the image and the text */
.containers {
position: relative;
text-align: center;
color: white;
}

.textku{font-size: 25px; color:#ffffff; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-family: "FontsFree-Net-KeplerStd-Regular";  width:90%;}

.textkuh1{animation: glow 1s ease-in-out infinite alternate; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-size: 90px; color:#ffffff;  font-family: "GoodVibrationsScript";letter-spacing: 4px; text-shadow: 0 0 3px #000000, 0 0 3px #fdfe97, 0 0 3px #fdfe97; }


  .textstart{animation: glow 1s ease-in-out infinite alternate; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 50px; color:#ffffff;  font-family: "FontsFree-Net-KeplerStd-Regular";letter-spacing: 4px; width:100%;}

.text-center{
  margin-top:30px;
  font-family:Kepler Std; 
  font-style:normal;
  font-weight:normal;
  letter-spacing: 0.7px;
  line-height: 43.95px;
  font-size: 25px; 
  color:#000000;
  text-align: justify;
}

/*icon orang, kamar mandi, room, luas*/
#orang{text-align: right;}

.descriptionku {
  font-family:FontsFree-Net-KeplerStd-Regular; 
  font-style:normal;
  font-weight:normal;
  letter-spacing: 0.7px;
  line-height: 43.95px;
  font-size: 27px; 
  color:#000000;
  text-align: justify;
}

.titleku{
  font-family:FontsFree-Net-KeplerStd-Regular; 
  font-style:normal;
  font-weight:bold;
  letter-spacing: 0.7px;
  line-height: 43.95px;
  font-size: 45px; 
  color:#000000;
  padding-bottom: 25px;;
}

.viewfull{display: block;}
.viewmobile{
display: none;
}

.slick-slide{width:395px; height: 263px;  margin: 10px;}
/* to align arrow at bottom */

.slick-prev{
  left: 10px;
  z-index: 2;
  top: 115%;
  transform: translateY(-100%);
  position: absolute;
  color: #000000;
  z-index: 2;
  margin:0 auto;
  left:46%;
}

.slick-next{
  right: 10px;
  z-index: 2;
  top: 115%;
  transform: translateY(-100%);
  position: absolute;
  color: #000000;
  z-index: 2;
  margin:0 auto;
  right:46%;
}

.slick-prev:before,
.slick-next:before {
    font-family:initial!important;
    color:#000000; 
    font-size: 30px;
    font-weight: bold;
    background-color: #ffffff;
    padding:10px;
}

#facilities{text-align: left;font-size: 20px; margin-bottom: 20px;}

#fcontact{width:60%; margin:0 auto !important; padding:20px;}

#containerku{
width: 100%;
height: 662px;
font-size:30px;
background-image: url('http://webbaliseo.com/susharvada/images/banner11.jpg');
background-size: cover;
}

#containerkubawah{
width: 100%;
height: 300px;
font-size:30px;
background-image: url('https://fireflyvillabali.com/images/home_cover2.jpg');
background-size: cover;
}

      .kotakbooking{border:2px solid #c6c39e; margin:0 auto !important; padding:20px; border-radius:10px;  padding:15px; width:90%;}


#containerjetsky{
    width: 100%;
height: 450px;
font-size:30px;
background-image: url('http://webbaliseo.com/susharvada/images/tours/jetsky.jpg');
background-size: cover;
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}


.welcome{margin-top:30px;font-family:keplerstdblackdisp; font-size: 45px; text-align:center; color:#000000; font-weight:100;
}





/*--- ScrollFade Specific ---*/

/*--- ScrollFade Specific ---*/

/*--- ScrollFade Specific ---*/
.scrollFade {
	opacity: 1;
	pointer-events: all;
}

.scrollFade--hidden {
	opacity: 0;
	pointer-events: none;
}

.scrollFade--visible {
	opacity: 1;
	pointer-events: all;
}

.scrollFade--animate {
	transition: opacity 0.5s ease-in-out;
}

/*------*/

@media(max-width: 750px) {


}





/*--- ScrollFade Specific ---*/
/*--- ScrollFade Specific ---*/
/*--- ScrollFade Specific ---*/

#jarakatas{margin-bottom:30px;}

.carousel-control-prev{z-index:9999;}
.carousel-control-next{z-index:9999;}
.carousel-control-next{width:50px;height:50px; top:50%;}
.carousel-control-prev{width:50px;height:50px; top:50%;}






@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .slick-prev{
  left: 10px;
  z-index: 2;
  top: 115%;
  transform: translateY(-100%);
  position: absolute;
  color: #000000;
  z-index: 3;
  margin:0 auto;
  left:46%;
  width:50px;
  height:50px;
}

.slick-next{
  right: 10px;
  z-index: 2;
  top: 115%;
  transform: translateY(-100%);
  position: absolute;
  color: #000000;
  z-index: 3;
  margin:0 auto;
  right:46%;
  width:50px;
  height:50px;
}

.slick-prev:before,
.slick-next:before {
    font-family:initial!important;
    color:#000000; 
    font-size: 30px;
    font-weight: bold;
    background-color: #ffffff;
    padding:10px;
   
}

.slick-slide>div {
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.slick-center>div {
  transform: scale(1);
}

.slider__item>img {
  width: 100%;
  height: auto;
}

}


















    /*=================================*/
    /*============ MOBILE =============*/
    /*=================================*/
    
    @media (max-width: 575.98px) {
        
    .carousel-control-next{width:50px;height:50px; top:35%;}
    .carousel-control-prev{width:50px;height:50px; top:35%;}
            
    #jarakatas{margin-bottom:0px;}
    .jarakatas{margin-top:-190px;}


      #fcontact{width:100%; margin:0 auto !important; padding:10px;}

      /*icon facebook, instagram, tombol book now*/
      .justify-content-end {
        justify-content: center !important;
        margin-top:50px;
      }

      .logo{
        width:200px; height:45px;
      }

      .phone {
        height: 250px;
        max-width: 100%;
        margin-top: 120px;
      }

      .heading {top: 40%;}

      .textku{font-size: 24px;}
      #hohoho{width:300px; line-height:30px; margin-top:30px; text-shadow: 0 0 43px #000000, 0 0 3px #000000, 0 0 13px #f7fa04;}
      #hohoho2{width:300px; line-height:30px; margin-top:40px; text-shadow: 0 0 43px #000000, 0 0 3px #000000, 0 0 13px #f7fa04;}

      .textkuh1{animation: glow 1s ease-in-out infinite alternate; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-size: 55px; color:#ffffff;  font-family: "GoodVibrationsScript";letter-spacing: 4px; text-shadow: 0 0 43px #f7fa04, 0 0 3px #000000, 0 0 13px #f7fa04;}

      /*icon orang, kamar mandi, room, luas*/
      #orang{text-align: center;}

      .titleku{padding: 40px 10px 10px 0; text-align: center;}

      .viewfull{display: none;}
      .viewmobile{
      display: block; padding:0 15px 15px 15px;
      }


      .slick-prev{
        left:30%;
      }
      
      .slick-next{
        right:30%;
      }



      #facilities{text-align: center;}

      .textstart{font-size: 29px; letter-spacing: 1px; margin-top:10px;}
      
      .heading > div > p{line-height: 60px;}
      
      .kotakbooking{border:2px solid #c6c39e; margin:0 auto !important; padding:20px; border-radius:10px;  padding:15px; width:90%;}
      #bookindate{margin-top:20px;}
      
      #spasiku{margin-top:20px;}
      
    .welcome{font-family:keplerstdblackdisp; font-size: 35px;  }

    
          

    }