*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar{
  display: none;
}
body{
  
}
#load{
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background: #000 url(../img/loader.gif) no-repeat center center;
  background-size: 20%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
#load h1{
  font-size: 6vw;
  color: rgb(0, 0, 0);
  font-family: 'brush';
    text-shadow: -1px 1px 3px hsl(0, 0%, 100%),
  1px 1px 0 #000000,
 1px -1px 0 #000000,
-1px -1px 0 #000000;
}

html{

  scroll-behavior: smooth;}


.dd{
  display: none;
}
nav{
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 98;
  position: absolute;
  height: 80px;
  width: 100%;
}
nav ul li{
  list-style-type: none;
  display: inline-block;
  padding: 0 20px;
  
}
nav ul li a{
  text-decoration: none;
  color: rgb(255, 255, 255);
  position: relative;
  font-size: 1.7vw;
  

}
nav ul li a:hover{
  color: #ffff;
  text-shadow: 0 0 2px #ffff;
}

nav ul li a::after{
  content: "";
  position: absolute;
  background-color: rgb(255, 255, 255);
  height: 3px;
  width: 0;
  left: 0;
  bottom: -10px;
  transition: 1s;
}
nav ul li a:hover::after{
  width: 100%;

}

.sidenav
{
  position: fixed;
  top: 20px;
  right: 0;
  width: 80px;
  height: 100px;
  padding-top: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 998;

}

.sidenav .nav-content
{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.nav-content .toggle-btn,
.nav-content span a
{
    height: 55px;
    width: 55px;
    background: #ffffffec;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.nav-content .toggle-btn
{
  font-size: 26px;
  color: #0e2431;
  z-index: 100;
  cursor: pointer;
  transform: rotate(-225deg);
  transition: all 0.6s ease;
}

.sidenav.open .toggle-btn
{
  transform: rotate(0deg);
}

.nav-content span
{
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
}

.sidenav.open .nav-content span
{
  transform: rotate(calc(var(--i) * (54deg))) translateY(90px);
  opacity: 1;
}

.nav-content span a
{font-size: 25px;
  color: #8a2e26;
  text-decoration: none;
  transform: rotate(-13deg);
}


.nav-content span a i
{
  
  
  transform: rotate(calc(var(--i) * (360deg/ -8)));
  opacity: 0.8;
  transition: 0.2s;
}

.nav-content span a:hover
{  color: #5e5e5e;

  opacity: 1;
 
}

.banner{
  background-color: rgb(0, 0, 0);
   height: 300vh;
    position: relative;
    transition: 2s ease;
background-size: cover;
overflow: hidden;
width: 100%;
  
}
@keyframes fade {
  0%{background-color: rgb(217, 60, 7);
    opacity: 0;
  }
  100%{
    opacity: 1;
  }}
  

.bg-1{
  background-color: 0;
  height: 200vh;
  width: 100%;
  position: absolute;
  }
  


.api1,.api2,.api3,.api4{
  animation: api 5s;
}
  @keyframes api {
    0%{
      transform: translateY(20vh) ;
    }
    100%{
      transform: translateY(0) ;
    
    }}

  @keyframes keluk {
    0%{
      opacity: 0 ;
    }
    100%{
      opacity: 1;
    
    }}


.percik{
  background-color: rgba(23, 232, 33, 0);
  height: 200vh;
  width: 100%;
  position: absolute;
  opacity: 0;
  }
  .percik.muncul{
    transition: 1s;
    opacity: 1;
  }
.gelap{
  background-color: rgba(0, 0, 0, 0.64);
  height: 200vh;
  width: 100%;
  position: absolute;
  }
.gradient{
  height: 320vh;
  width: 100%;
  position: absolute;
  background: rgb(0,0,0);
  background: rgb(138,46,38);
  background: rgb(138,46,38);
  background: linear-gradient(0deg, rgba(138,46,38,1) 1%, rgba(0,0,0,1) 1%, rgba(138,46,38,0) 67%);}

  .blok1{
  background-color: rgba(0, 0, 0, 0);
  height: 300vh;
  width: 100%;
  position: absolute;
  }


.banner img{
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: fixed;
  overflow-x: hidden;
}

.title{
  
  position: relative;
  z-index: 40;
  height: 100vh;
  max-width: 100%;
}
.title .budaya{
  cursor: default;
  height: 40vh;
  width: 100%;
  align-items: end;
  justify-content: center;
  display: flex;
}
.title h2{
  opacity: 0;
color: rgba(255, 255, 255, 0.924);
font-size: 2vw;
font-family: 'poe';
letter-spacing: -2px;
font-weight: normal;

}


#budaya.ada{
  opacity: 1;
  transition: 2s;
}
.budaya h2:hover{
  color: #656565a5;
}

.title .perang{
  height: 50vh;
  width: 100%;
  align-items: start;
  justify-content: center;
  display: flex;
  opacity: 1;
  transition: 2s;
  transform: rotate(-3deg);

}
.title .perang h1{
  margin-top: -3.2vh;
  color: white;
  font-weight: normal;
  font-size: 12vw;
  font-family: 'elbrush';
  opacity: 0;
  }
  .perang h1.muncul{
    animation: judulTampil 3s;
    opacity: 1;
  }

 .perang.float{
    animation: float1 10s linear infinite;
    animation-direction: alternate;
    
  }
#perang{
  transition: 1s;
}
.perang h1:hover{
  color: #424141;
  /* text-shadow: -1px 1px 3px hsl(0, 0%, 0%),
  1px 1px 0 #13ff0b,
 1px -1px 0 #ff0303,
-1px -1px 0 #0026ff; */
  cursor: default;
}
  @keyframes float1 {
    0%{
      
      transform: translateY(-8px) translateX(-5) rotate(-3deg) ;
    }
    
    100%{
  
      transform: translateY(8px) translateX(5px) rotate(3deg) ;
    }
    
  }


  @keyframes judulTampil {
    0%{
      
      transform: scale(3) rotate(25deg) ;
    }
    100%{
      
      transform: scale(1) rotate(0);
  
    }
    
  }
  


  .banner .judul.munculJudul {

    opacity: 1;
    transition: 2s;
  
  }
  .banner .judul.munculJudul img{
    position: absolute;
    animation: judulTampil 3s;
    opacity: 1;
  
  }
  








.banner .judul{
  opacity: 0;
  position: relative;
  top: 1%;
  
}

/* .banner .judul.munculJudul {

  opacity: 1;
  transition: 2s;

}
.banner .judul.munculJudul img{
  position: absolute;
  animation: judulTampil 3s;
  opacity: 1;

} */



.banner .judul-2{
  opacity: 0;
  
}
.banner .judul-2.ada{
  opacity: 1;
  transition: 2s;
}
.judul-2 img{
  position: absolute;
  animation: float 5s linear infinite;
  animation-direction: alternate-reverse;
}


.pakhaji {
  transition: 2s ;
  position: relative;

}
@keyframes skala {
  0%{
    transform: scale(1.6) ;
  }
  100%{
    transform: scale(1) ;
  
  }}
.peternak {
  transition: 2s;
  
}

.side{
  z-index: 99;

  position: fixed;
  width: 3%;
  height: 100vh;
  left: 0;
  top: 0;
}

.sosmed{

  height: 100px;
  margin-top: 450px;
  display: flex;
  justify-content: center;

}
.sosmed ul li{
  position: relative;
  z-index: 99;
  left: -15px;
  padding: 20px;
  list-style: none;
}
.sosmed ul li a{
  text-decoration: none;color: #ffffff;
}
.sosmed ul li a img{
    position: absolute;
  width: 20px;
  height: 20px;
  transition: 0.3s;
}
.sosmed ul li a img:hover{
  width: 35px;
  height: 35px;
  transition: 0.3s;
}
.follow{
  position: relative;
  height: 80px;
 padding-top:100px;
 right: 4%;

}
.follow span{
 
  font-size: 15px;
  color: azure;
  rotate: -90deg;
  display: flex;
  white-space: nowrap;
}

.sidefix{
  top: 0;
  background-color: #8a2e26;
  right: 0;
  position: fixed;
  height: 100vh;
  width: 10vw;
  z-index: 5;

}

.sidebar{
background-color: rgba(100, 148, 237, 0.641);
  z-index: 99;
  position: relative;
  top: 0;
 right: 0;
  height: 20vh;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  
}
.sidebar.open{

}
.conten{
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.conten .toggle, .conten span a{
  height: 60px;
  width: 60px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow:  0 0 20px rgba(0, 0, 0, 0.2);
}
.conten .toggle{
font-size: 1.6vw;
z-index: 991;

}
.conten span{
  position: absolute;
  opacity: 0;
  transition: 0.5s all ease-in-out;
}

.conten.open  span{
  transform:  rotate(calc(var(--i) * (360deg/8))) translateY(100px);
  opacity: 1;
  transition: 0.5s all ease-in-out;
}


.conten span a{
  text-decoration: none;
  transform: rotate(calc(var(--i) * (360deg/-8))) ;
}










.tombol{
  background-color: rgba(58, 58, 58, 0);
  z-index: 50;
  position: fixed;
  height: 6vh;
  width: 18%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  color: rgb(255, 255, 255);
  z-index: 998;
}
.tombol .musik{
  height: 40px;
  width: 40px;
  object-fit: contain;
  
}
  .tombol .musik img{
    height: 30px;
    width: 30px;
    object-fit: contain;
  }
  .tombol .musik button{
    height: 50px;
    width: 50px;
    background: url(../img/centang.png) no-repeat;
    border: none;
   position: relative;
   bottom: 25px;
   right: 15px;
   opacity: 1;
  }
  #full{
    opacity: 0;
  }
.tombol  span{
  font-size: 20px;
  padding-right: 15px;
  font-family: 'brush';
  white-space: nowrap;
}

.panah-scroll{
  position: relative;
  z-index: 99;
  height: 10vh;
  width: 100%;
  opacity: 0;
  
}
.panah-scroll.muncul{
  transition: 5s;
  opacity: 1;
}

.panah{
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 12px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}
.panah:nth-child(2){
  animation: panah1 2s ease-in-out infinite;
}
.panah:nth-child(3){
  animation: panah2 2s ease-in-out infinite;
}

@keyframes panah1 {
  100%{
    opacity: 0.5;
    bottom: 35px;
  }}
@keyframes panah2 {
  100%{
    opacity: 0.3;
    bottom: 15px;
  }}

@keyframes fade {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }}

.page2{
  background-color: rgba(250, 235, 215, 0);
  position: absolute;
  height: 100vh;
  width: 100%;
  justify-content: center;
  opacity: 1;
  transition: 2s;
  z-index: 85;
}

.page2 .story {
  display: flex;
}
.page2 .story .f{
  flex: 3;
}
.page2 .story .g{
  flex: 2;
}
.page2 .story .a{
  z-index: 99;
  position: relative;
  top: 50px;
  transition: 2s;
  opacity: 0;
  color: white;
  flex: 6;
  left: 3%;
  padding-bottom: 40px;

}
.story .a.muncul{
  top: 0;
  
  opacity: 1;
  transition: 4s;
}
.page2 .story h2{
  font-size: 3vw;
  padding-bottom: 1vw;
}
.page2 .story h1{
  font-size: 6vw;
  margin: -2vw 0;
}
.page2 .story p{
  font-size: 1.7vw;
  text-align: justify;
}
.page2 .story .b{
  position: relative;
  transform: translateX(50px);
  opacity: 0;
  transition: 0.5s;
  color: rgb(252, 252, 252);
  padding: 0 50px;
  flex: 10;
}
.story .b.muncul{
  transform: translateX(0px) ;
  opacity: 1;
  transition: 4s;
}

.page2 .pic2 img{
  position: relative;
  max-height: 100vh;
 max-width: 100%;
  object-fit: cover;
}
.page2 .pic2{
  opacity: 0;
  transition: 1s;
}
.page2 .pic2.muncul{
  opacity: 1;
  transition: 5s;
}

.page2.muncul {
  opacity: 1;
  transition: 4s;
}

.page2 .story-2{
  position: relative;
  display: flex;
  height: 20vh;
  opacity: 0;
}
.page2 .story-2.muncul{
  transition: 3s;
  opacity: 1;
}
.page2 .story-2 .a{
  flex: 2;
}
.page2 .story-2 .b{
  position: relative;
  top: 50%;
  flex: 12;
}
.page2 .story-2 .b p{
  margin-left: 8px;
  max-width: 30%;
font-size: 1.5vw;
text-align: justify;
color: white;
}
/* /////// END LANDING PAGE \\\\\\ */

.trans1{
  background-color: #000000;
  position:relative;
  z-index: 80;
  height: 10vh;
  width: 100%;
 
}
.trans1 img{
  position: relative;
   object-fit: cover;
width:100% ;
 height: 20vh;
}

.tutup{
  position: relative;
  background-color: blue;
  bottom: 40vh;
}
.tutup img{
  z-index: 99;
  position: relative;
  width: 100%;
 
}
/* ////////KONTEN1/////////// */
.latar{
  background:rgb(25, 13, 12);
  width: 100%;
  height: max-content;
  transition: 3s;
  overflow: hidden;
}

.konten{
  transition: 2s;
  animation: fade2 1s;
  height: 100vh;
  width: 100%;


}
.intro{
  position: relative;
top: 0%;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: 1s;
  z-index: 91;

  
}
.intro.muncul{
  opacity: 1;
  transition: 3s;

}
.intro .text{
  width: 100%;
  color: white;
  position: relative;

}

.intro .text .aa{
  opacity: 0;
  transition: 1s;
}
.intro .text .aa.muncul{
  opacity: 1;
  transition: 2s;
}
.intro .text h2{
  position: relative;
  top: -230px;
  display: flex;
  justify-content: center;
  font-size: 5vw;
  color: #000000b1;
  /* font-family:  'edo'; */
  font-weight: normal;
 
}
.intro .text h1{
  /* font-family: 'edo'; */
  font-weight: normal;
  color: #8a2e26;
  line-height: 180px;
  font-size: 10vw;
  text-shadow: -1px 1px 0 hsl(0, 0%, 0%),
  1px 1px 0 #000,
 1px -1px 0 #000,
-1px -1px 0 #000;
  /* text-shadow: 0 0 2px #ffffff; */
}

/* @keyframes texted {
  0%{
    text-shadow: 0 0 2px #ffff;
  }
  100%{
    text-shadow: 0 0 10px #c82727;
  }
} */
.intro .text .a{
  opacity: 1;
}

.intro .text .b h1{
  position: relative;
 display: flex;
 justify-content: end;
}


.pembuka{
  z-index: 5;
  width: 100%;
  display: flex;
  justify-content: center;
}


.konten1{
  height: auto;
  display: flex;
  width: 100%;
  opacity: 0;
  transition: 1s;
  
}
.konten1.muncul{
  opacity: 1;
  transition: 3s;
  
}
.cerita{
  height: 50%;
  flex: 1;
  left: 5%;
  z-index: 96;
  position: absolute;
  width: 25%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cerita h1{
  font-size: 4vw;
}
.cerita h2{
  font-size: 3vw;
}
.cerita p{
  padding-top: 5%;
  font-size: 1.4vw;
  color: white;
  text-align: justify;
}
.wadahternak{
  flex: 1;
  z-index: 95;
  left: 10%;
  height: 100vh;
  width: 100%;
  position: relative;
  
}


.ternak{
  height: auto;
  width: 100%;
  position: absolute;
  opacity: 0;
 
}
.ternak.muncul{
  transition: 1s;
  opacity: 1;
}
#ternak5{
 padding-left: 50px;
}


/* ////////////////////konten2\\\\\\\\\\\\\\\\\\\\\\*/
.teks p{
  color: white;
  font-size: 1.5vw;
  font-weight: normal;
}
.konten2{
  height: 65vh;
  display: flex;
  width: 100%;}

#peternak2{
  flex:3;
  height: 100vh;
  max-width: 100%;
  object-fit: contain;
  /* transform: translateY(30px) scale(0.8); */
  opacity: 0;
  transition: 1s;
  position: relative;
  bottom: 22%;
  left: 4%;
  transform: translateY(10px)  scale(0.9);
}
.konten2 #peternak2.muncul{
  opacity: 1;
  transition: 1.5s;
  transform: translateY(0px)  scale(1);

}

.konten2 .b{
  padding-top: 50px;
  position: relative;
  right: 80px;
  flex: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  bottom: 5%;
}

.konten2 .b p{
  text-align: justify;
  max-width: 80%;
  font-size: 1.5vw;
  color: white;
}

.konten3{
 
  height: 65vh;
  width: 100%;
  opacity: 0;
  transition: 0.8s;
}
.konten3.muncul{
  opacity: 1;
  transition: 3s;
}
.konten3 .text{
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 15%;
}
.konten3 .text p{
  font-size: 1.5vw;
  max-width: 53%;
  color: white;
  text-align: justify;
}
.konten3 .salim {
  position: relative;
  left: 15%;
  display: flex;
  width: 100%;
  justify-content: center;
  
}
.konten3 .salim img{
  object-fit: cover;
  max-height: 40vh;
  max-width: 100%;
  transition: 1s;
}
.konten3 .salim img:hover{
  max-height: 45vh;
  max-width: 100%;
  transition: 0.5s;
}
.konten4{
 
  height: 55vh;
  width: 100%;
}

.konten4 .a {
  display: flex;
  justify-content: center;
  width: 100%;
}
.salam{
  
  height: 50vh;
  position: relative;
  left: 3%;
  flex: 2;
  opacity: 0;
  transition: 1s;
}

.salam.muncul{
  opacity: 1;
  transition: 3s;
}
.konten4 .a .teks{
  position: relative;
  right: 3%;
  display: flex;
  align-items: center;
  flex: 1;
  opacity: 0;
  transition: 2s;
}
.a .teks.muncul{
  opacity: 1;
  transition: 7s;
}
.a .teks.muncul:hover{
 font-size: 3vw;
 transition: 2s;
}
.konten4 .a .teks p{
  color: white;
}
.salam {
  background: url(../img/salam1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: salaman 2.5s infinite ;
 animation-timing-function: ease-out;
}


.konten5{
 
  display: flex;
  height: 100vh;
  width: 100%;
}
.konten5 .mancing{
 

  flex: 5;
  opacity: 0;
  transition: 2s;
}
.konten5 .mancing.muncul{
  opacity: 1;
  transition: 1s;
  transform: scale(1.1) translateX(5vw);
}
.konten5 .teks{
  text-align: justify;
max-width: 40%;
right: 8%;
  position: relative;
  display: flex;
 align-items: center;
  flex: 6;
  opacity: 1;
  transition: 2s;
  

  
}

.konten5 .teks.muncul{
  opacity: 1;
  transition: 2s;
}

.konten5 .mancing img{
 object-fit: cover;
 max-height: 80vh;
  max-width: 100%;
 
}
.konten5 .a, .b{
  flex: 1;
}

.konten6{
 
  height: 100vh;
  display: flex;
  width: 100%;
  transition: 1s;
}
.konten6.hilang{
  opacity: 0;
  transition: 1s;
}
.konten6 .teks{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.konten6 .teks p{
  position: relative;
  text-align: justify;
  left: 5%;
  max-width: 65%;
}
.konten6 .ikan{
  background-color: #1e1e1d00;
  flex: 1;
 
}
.iwak{
  opacity: 0;
  transition: 1s;
}
.iwak.muncul{
  opacity: 1;
  transition: 2s;
}
.konten6 .ikan img{
  position: absolute;
  object-fit: cover;
  max-height: 100vh;
  max-width: 100%;
}

.konten7{
 
  height: 90vh;
  display: flex;
  width: 100%;
}
.konten7 .teks{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.konten7 .teks p{
  font-size: 1.6vw;
  position: relative;
  max-width: 60%;
}
.konten7 .bakar{
  flex: 1;
  position: relative;
  left: 10%;
  opacity: 0;
  transition: 2s;
}
.konten7 .bakar.muncul{
  opacity: 1;
  transition: 3s;
}
.bakar2{

  transform: scale(0.9) translateY(20px);
  opacity: 1;
  transition: 3s;
}
.bakar2.muncul{
  opacity: 1;
  transition: 5s;
  transform: scale(1.1);
}

.konten7 .bakar img{
  position: absolute;
  object-fit: cover;
  max-height: 80vh;
  max-width: 100%;
}

.konten8{
 
  height: 100vh;
  width: 100%;
  opacity: 0;
  transition: 1s;
}
.konten8.muncul{
  opacity: 1;
  transition: 2s;
}
.konten8 .teks{
  height: 30vh;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}
.konten8 .teks p{
  position: relative;
  max-width: 35%;
  right: 5%;
  font-size: 1.6vw;
}
.konten8 .sapi{
  display: flex;
  justify-content: center;
  width: 100%;
 
}
.konten8 .sapi img{
  object-fit: cover;

  max-height: 70vh;
  max-width: 100%;
}

.konten9{
  position: relative;

  height: 90vh;
  width: 100%;
  opacity: 0;
  transition: 1s;
  display: flex;
}
.konten9 .kaget {
  flex: 2;
  
  position: relative;
  left: 3%;
}
.konten9.muncul{
  transition: 2s;
opacity: 1;
animation: kaget 2s;
}
.konten9 .kaget img{
  position: absolute;
  object-fit: cover;
  max-height: 75vh;
  max-width: 100%;
}
.konten9 .teks{
  text-align: justify;
  left: 6%;
  position: relative;
  top: 2%;
  flex: 2;

}
.konten9 .teks p{
  max-width: 80%;
}

#kaget1{
  opacity: 0;
  transition: 1s;
 animation: kaget 2s;
 transform: scale(1.2) translateX(4vw);
}
#kaget1.muncul{
  opacity: 1;
  transition: 5s;
  transform: scale(1) translateX(1vw);
}


.konten10{
  position: relative;
  height: 90vh;
  width: 100%;
  opacity: 0;
  transition: 1s;
  display: flex;
  
}
.konten10.muncul{
  opacity: 1;
  transition: 2s;

}
.konten10 .sapu {
  flex: 1;
}
#sapu{
  opacity: 0;
  transition: 1s;
  transform: translateX(8vw);
}
#sapu.muncul{
  opacity: 1;
  transition: 7s;
  transform: translateX(0);
}
.konten10 .sapu img{
  position: absolute;
  object-fit: cover;
 max-height: 80vh;
  max-width: 100%;
}
.konten10 .teks{
  position: relative;
  flex: 1;
  max-width: 35%;
  right: 5%;
  top: 15%;
  text-align: justify;

}

.adu{

  height: 140vh;
  width: 100%;
  transition: 2s;
}
.adu .teks{
  display: flex;
  justify-content: center;
  height: 30vh;
  align-items: center;
  position: relative;

}
.adu .teks p{
  max-width: 55%;
  text-align: center;
}

.gelud{
  height: 110vh;
  width: 100vw;
  display: flex;
  justify-content:center ;
  opacity: 0;
  transition: 1s;
}
.gelud.muncul{
  transition: 2s;
  opacity: 1;
}
.aksi{
  display: flex;
  justify-content:center ;
  height: 100vh;
  width: 100vw;
background-size: cover;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: gelud 2s infinite ;
  animation-timing-function: ease-out;
 
}
@keyframes gelud {
  0%{
    background: url(../img/gelud.png) ;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  20%{
    background: url(../img/gelud1.png);
    background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
  40%{
    background: url(../img/gelud2.png);
    background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
  60%{
    background: url(../img/gelud3.png);
    background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
  80%{
    background: url(../img/gelud4.png);
    background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
  100%{
    background: url(../img/gelud2.png);
    background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
}



.konten11{
  height: 56vh;
  width: 100%;
  
  transition: 2s;
  
}
.konten11 .ucul {
position: relative;
left: 10%;
opacity: 0;
transition: 1s;
transform: translateX(-4vw);
}
.ucul.muncul{
  opacity: 1;
transition: 2s;
transform: translateX(0);
}
.konten11 .ucul img{
  position: absolute;
  object-fit: cover;
 max-height: 50vh;
  max-width: 100%;
}



.konten12{
  position: relative;
  height: 70vh;
  width: 100%;
  
  transition: 2s;
  display: flex;
}
.konten12 .cow {
  flex: 1;
  display: flex;
  justify-content: end;
  position: relative;
  bottom: 5vh;
  right: 8%;
  opacity: 0;
  transition: 1s;
  transform: translateY(4vh);
}
.konten12 .cow.muncul{
opacity: 1;
transition: 2s;
transform: translateY(0);}

.konten12 .cow img{
  position: absolute;
  object-fit: cover;
 max-height: 80vh;
  max-width: 100%;
}
.konten12 .teks{
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
  text-align: justify;
  max-width: 45%;
  left: 10%;
  flex: 1;
  opacity: 0;
  transition: 1s;
}
.konten12 .teks.muncul{
opacity: 1;
  transition: 2s;}

.konten13{
  height: 120vh;
  width: 100%;
}

.konten13 .a{
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}
.konten13 .a img{

  object-fit: cover;
  width: 100%;
  height: 100vh;
}
#konten13{
  opacity: 0;
  transition: 2s;
}
#konten13.muncul{
  opacity: 1;
  transition: 5s;
}
.konten13 .teks{
  height: 100vh;
  width: 100%;
  z-index: 1;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

}
.konten13 .teks p{
  font-size: 2vw;
  text-align: center;
  max-width: 70%;
  animation: float 5s infinite;
  animation-direction: alternate-reverse;
}


.konten14{
  height: 100vh;
  width: 100%;

}
.konten14 a{
  text-decoration: none;
}
.konten14 h2{
  font-size: 50px;
  color: white;
  font-weight: normal;
  text-decoration: none;
}
.konten14 .a{
  max-width: 20%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}
.konten14 .atas{
  position: relative;
  display: flex;
  right: 25%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
}
.atas .a h2{
  align-items: end;
  font-size: 3.5vw;
}
.konten14 .teks{
  padding-top: 2%;
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  text-align: center;
  position: absolute;
}
.konten14 p{
  padding-top: 5vh;
  max-width: 65%;
  font-size: 1.6vw;
}
.videoo{
  z-index: 50;
 
  width: 100%;
  height: 100vh;
  position: absolute;
  display: flex;
  justify-content: center;

}
.videoo iframe{
  position: relative;
  left: 9%;
  width: 40%;
  height: 55vh;
  opacity: 0.4;
}



.konten15{
  height: 120vh;
  width: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}



.img-slide{
  position: relative;
  width: 60%;
  height: 75vh;
  margin: 15px;
  background-color: rgb(0, 0, 0);
}

.img-slide .slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0 at 0 50%);

}

.img-slide .slide.active{
  clip-path: circle(150% at 0% 50%);
transition: 3s;
transition-property: clip-path;
}

.img-slide .slide img{
  width: 60%;
  height: 75vh;
  z-index: 1;
width: 100%;
border-radius: 5px;
}

.img-slide .slide .inpo{
  position: absolute;
  top: 0;
  padding: 15px 30px;
  z-index: 2;
}
.img-slide .slide .inpo h2{
color: white;
font-size: 45px;
font-weight: bolder;
letter-spacing: 2px;
}
.img-slide .slide .inpo p{
  color: rgb(240, 236, 236);
  background: #0000001a;
  font-size: 1.5vw;
  width: 60%;
  background-color: #44444438;
  padding: 10px;
  border-radius: 4px;
  position: relative;
  margin-top: 10px;
}

.img-slide .navi{
  z-index: 2;
  position: absolute;
  bottom: 30px;
  display: flex;
  left: 50%;
  transform: translateX(-50%);

}

.img-slide .navi .btn{
  background-color: #ffffff77;
  width: 12px;
  height: 12px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
}
.img-slide .navi .btn.active{
  background-color: #8a2e26;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.021);
}



.konten15 .teks{
  max-height: 20vh;
  max-width: 100%;

  position: relative;
  left: 25%;
right: 0%;
bottom: 11%;
z-index: 5;
}

.konten15 .teks h1{
  text-align: end;
font-size: 4vw;
color: white;
}























@media (max-width: 820px){
  .img-slide{
    width: 600px;
    height: 375px;
  }
}


























/* ///////////////////////////////////////////////////////////////////////// */







footer{
  background-color: #8a2e26;
  height: 40vh;
  display: flex;
  color: white;
}
footer .kaki{
  display: flex;
  width: 100%;
  height: 40vh;
  justify-content: space-evenly;
}
.info,.polow,.maps,.lokasi{
  width: 5vw;
  flex: 2;
}
.a{
  flex: 1;
}
ul li{
  list-style: none;
  padding: 2% 0;
}

ul li p{
  font-size: 1.4vw;
  font-weight: normal;
}
.info{
  padding: 2% 0%;
 
  
}
.info p{
  max-width: 80%;
}
.polow{
  padding: 2% 0;
  
}
.polow ul li{
  list-style: none;
  padding: 1% 0;
}
.polow ul li a{
  text-decoration: none;
  color: white;
  font-size: 1.4vw;
  font-weight: normal;
}
.polow ul li a:hover{
  color: #444444;}
.maps{
  padding: 2% 0;
}
.maps p{
  padding: 2% 0;
  font-size: 1.4vw;
  font-weight: normal;
}
.lokasi {
  padding: 2%;
  
}
.lokasi iframe{
 
  height: 20vh;
  width: 20vw;
}
  @font-face {
    font-family: 'edo';
    src: url(../font/edosz.ttf);
  }
  @font-face {
    font-family: 'tomi';
    src: url(../font/tomi.otf);
  }
  @font-face {
    font-family: 'poe';
    src: url(../font/poe.ttf);
  }
  @font-face {
    font-family: 'nexa';
    src: url(../font/nexa.ttf);
  }
  @font-face {
    font-family: 'berkeley';
    src: url(../font/Berkeley.ttf);
  }
  @font-face {
    font-family: 'elbrush';
    src: url(../font/Elbrush.ttf);
  }
  @font-face {
    font-family: 'heycomic';
    src: url(../font/heycomic.ttf);
  }
  @font-face {
    font-family: 'brush';
    src: url(../font/TitleBrushXL.ttf);
  }
  @font-face {
    font-family: 'kuas';
    src: url(../font/kuas.ttf);
  }
  @font-face {
    font-family: 'brush2';
    src: url(../font/brush2.ttf);
  }
  @keyframes float {
    0%{
      
      transform: translateY(10px) translateX(2px)  ;
  
    }
    
    100%{
      transform: translateY(-10px) translateX(-2px) ;
    }
    
  }


  
  @keyframes float3 {
    0%{
      transform: translateY(-50px) translateX(-50px)  ;
    }
    
    100%{
      transform: translateY(50px) translateX(50px)  ;
    }
    
  }
  @keyframes apung {
    0%{
      transform: translateX(0)  ;
    }
    50%{
      transform:  translateX(80px)  ;
    }
    
    100%{
      transform:  translateX(-10px)  ;
    }
    
  }
  

  @keyframes slideKiri {
      0%{
          transform: translateX(-200px);
        }
        100%{
          transform: translateX(-5px);
          
        }
  }
  @keyframes slideKanan {
      0%{
          transform: translateX(200px);
        }
        100%{
          transform: translateX(-5px);
          
        }
  }
  
.asap1,.asap2,.asap3,.asap{
  object-fit: cover;
  max-height: 26vh;
  max-width: 100%;
  overflow: hidden;
}
.asap4{
  height: 21vh;
}
  .asap{
    animation: asap 20s linear infinite;
    animation-direction: normal;
  }
  @keyframes asap {
    0%{
      transform: translateX(-5px);
    }
    100%{
      transform: translateX(-1510px);
      
    }
    
  }
  .asap1{
    animation: asap1 20s linear infinite;
    animation-direction: normal;
  }
  @keyframes asap1 {
    0%{
      transform: translateX(1510px);
    }
    100%{
      
      transform: translateX(-5px);
      
    }
    
  }
  .asap3{
    animation: asap3 15s linear infinite;
    animation-direction: reverse;
  }
  @keyframes asap3 {
    0%{
      transform: translateX(-6px);
    }
    100%{
      transform: translateX(-1510px);
      
    }
    
  }
  .asap2{
   
    animation: asap2 15s linear infinite;
    animation-direction: reverse;
  }
  @keyframes asap2 {
    0%{
      transform: translateX(1510px);
    }
    100%{
      
      transform: translateX(-10px);
      
    }
    
  }
  
  @keyframes fade2 {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }}
    @keyframes salaman {
      0%{
        background: url(../img/salam1.png) ;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
      25%{
        background: url(../img/salam2.png);
        background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }
      50%{
        background: url(../img/salam3.png);
        background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }
      75%{
        background: url(../img/salam4.png);
        background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }
      100%{
        background: url(../img/salam1.png);
        background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      }
    }
    








    
.bubble{
  position: relative;
  display: flex;
  transform: rotate(20deg);
  
}


.bubble span{
 
  opacity: 0.5;
  position: relative;
  width: 10px;
  height: 10px;
  background: #ff0909;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: 0 0 50px 10px rgb(221, 116, 17),
  0 0 10px #ffffff,
  0 0 50px #ffffff;
  animation: animate 15s linear infinite;
  animation-timing-function: calc(1s/var(--i));
  animation-duration: calc(80s/var(--i));


}
.bubble span:nth-child(even){
  background: rgb(250, 3, 3);
  box-shadow: 0 0 50px 10px rgb(207, 97, 13),
  0 0 50px rgb(108, 9, 9),
  0 0 100px rgb(56, 3, 3);
}

.bubble2{
  position: relative;
  display: flex;
  transform: rotate(30deg);
  
}
.bubble2 span{
 
  opacity: 1;
  position: relative;
  width: 10px;
  height: 10px;
  background: #ff0909;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: 0 0 50px 10px rgb(221, 102, 17),
  0 0 10px #ffffff,
  0 0 50px #ffffff;
  animation: animate 15s linear infinite;
  animation-duration: calc(80s/var(--i));

}
.bubble2 span:nth-child(even){
  background: rgba(235, 7, 7, 0);
  box-shadow: 0 0 50px 10px rgb(138, 62, 3),
  0 0 50px rgb(240, 63, 63),
  0 0 100px rgb(240, 113, 63);
}
.bubble3{
  position: relative;
  display: flex;
  transform: rotate(50deg);
  
}
.bubble3 span{
 
  opacity: 0.6;
  position: relative;
  width: 10px;
  height: 10px;
  background: #ee5509;
  margin: 0 4px;
  border-radius: 50%;
  box-shadow: 0 0 50px 10px rgb(203, 149, 24),
  0 0 10px #d87708,
  0 0 50px #c50707;
  animation: animate 15s linear infinite;
  animation-duration: calc(70s/var(--i));

}
.bubble3 span:nth-child(even){
  background: rgb(255, 0, 0);
  box-shadow: 0 0 50px 10px rgb(244, 118, 22),
  0 0 50px rgb(240, 87, 63),
  0 0 100px rgb(240, 163, 63);
}

@keyframes animate {
  0%{
      transform: translateY(160vh) translateX(0px) scale(0);
      
  }
  100%{
      transform: translateY(-50vh) translateX(200px) scale(1);
      
  }
  
}