@font-face {
  font-family: 'Lato';
  font-weight: 100;
  src: url("../fonts/Lato-Hairline.ttf");
}
@font-face {
  font-family: 'Lato';
  font-weight: 100;
  font-style: italic;
  src: url("../fonts/Lato-HairlineItalic.ttf");
}
/* End Lato Hariline */
/* Lato Light */
@font-face {
  font-family: 'Lato';
  font-weight: 200;
  src: url("../fonts/Lato-Light.ttf");
}
@font-face {
  font-family: 'Lato';
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/Lato-LightItalic.ttf");
}
/* End Lato Light */
/* Lato Regular */
@font-face {
  font-family: 'Latoreg';
  font-weight: 300;
  src: url("../fonts/Lato-Regular.ttf");
}
@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/Lato-Italic.ttf");
}
/* End Lato Regular */
/* Lato Bold */
@font-face {
  font-family: 'Latobold';
  font-weight: 400;
  src: url("../fonts/Lato-Bold.ttf");
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Lato-BoldItalic.ttf");
}
/* End Lato Bold */
/* Lato Black */
@font-face {
  font-family: 'Lato';
  font-weight: 500;
  src: url("../fonts/Lato-Black.ttf");
}
@font-face {
  font-family: 'Lato';
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/Lato-BlackItalic.ttf");
}
label,td,input{
    font-family: Latoreg;    
    font-size: 12px;
    color: #303030;
   
}

#info{width: 100%;height: auto;padding-bottom: 10px;}
#kotak{width: 100%;height: auto;padding-top: 120px;margin-bottom: 30px;}
.kotak-cari{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 30%;
    z-index: 100;
    text-align: center;
    text-shadow: 1px 1px #303030;
}
.kotak-cari h1{
    font-family: Latobold;
    font-size: 55px;
    color: #fff;
    margin-bottom: 10px;

}
.kotak-cari h2{
    font-family: Latoreg;    
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 1px 1px #303030;
}

.atas{
    padding-top: 10px;height: auto;border-bottom: 5px solid#1C979F;
}
.atas img{width: 230px;}
.atas navbar-nav{margin-left: 100px}
.atas nav-link{font-size: 12px;color: #121212}
.mt-30{margin-top: 30px;}
.mt-50{margin-top: 50px;}
.data-exist{border-radius: 20px;padding:10px; color: #fff;
    background: rgb(11,195,207);
background: linear-gradient(100deg, rgba(11,195,207,1) 13%, rgba(10,182,194,1) 100%); }
.data-exist h1{font-size: 20px;font-family: Latoreg;margin-bottom: 50px;font-weight: bold;}
.btn-exits{background-color: #0CB9C7;
    padding: 10px 20px;
    text-align: left;
    color: #fff;
    text-decoration: none;
    position: absolute;
    bottom: 0;left: 0;
    border-radius: 0 20px 0px 20px;
    font-family: Latoreg;
    font-size: 14px;font-weight: bold;
}
.btn-exits i{margin-left: 100px}
.btn-exits:hover{
    background-color: #0A99A3;color: #fff;
}
.bg-pemutakhiran{border-radius: 20px;padding:10px;color: #fff; background: rgb(40,176,234);
background: linear-gradient(100deg, rgba(40,176,234,1) 13%, rgba(39,170,227,1) 100%); }
.bg-pemutakhiran h1{font-size: 20px;font-family: Latoreg;margin-bottom: 50px;font-weight: bold;}
.btn-pemutakhiran{background-color: #14A0DD;
    padding: 10px 20px;
    text-align: left;
    color: #fff;
    text-decoration: none;
    position: absolute;
    bottom: 0;left: 0;
    border-radius: 0 20px 0px 20px;
    font-family: Latoreg;
    font-size: 14px;font-weight: bold;
}
.btn-pemutakhiran i{margin-left: 100px}
.btn-exits:hover{
    background-color: #1291C7;color: #fff;
}
.dm ul{   
   margin-bottom: 10px;
}
.dm ul li {
   display:inline-block;
   text-align: center;
   width: 30%;
  
}
.dm{padding-bottom: 20px;}
.dm ul li i{font-size: 30px;color: #CFF7FA}
.dm ul li h2{font-size: 26px;color: #fff;margin:8px 0px 8px 0px;font-family: Lato;}
.dm ul li h3{font-size: 14px;color: #fff;margin:5px;font-family: Latoreg;}
.judul{font-family: Lato;
        font-size: 24px;color: #303030;
        margin-top: 40px;
        margin-bottom:20px;
        font-weight: bold;
}
.judul-2{
        font-family: Lato;
        font-size: 24px;color: #fff;
        margin-top: 40px;
        margin-bottom:40px;
        font-weight: bold;
}
.judul-3{
        font-family: Lato;
        font-size: 18px;color: #303030;
        font-weight: bold;
}
.judul-4{
    font-family: Lato;
    font-size: 24px;color: #303030;
    font-weight: bold;
    margin:15px 0 15px 0;
}
.judul-5{
    font-family: Latoreg;
    font-size: 14px;color: #1C979F;
    font-weight: bold;
    text-align: center;
}
.garis-tipis{border:1px solid#eee;width: 100%;margin: 6px 0 6px 0;}
.tgldetail{
    font-family: Latoreg;
    font-size: 14px;color: #1C979F;
    font-weight: bold;
}
.ket-detail{
     font-family: Latoreg;
     font-size: 13px;color: #303030;
     line-height: 18px;
     text-align: justify;
}
.radius-img1{border-radius: 10px;}
.radius-img{
    width: 100%;
    border-radius: 20px;
    height: 370px;    
}
.radius-img:hover{opacity: 0.6}
.kotak-info{
    width: 90%;
    height: 100px;
    position: absolute;
    bottom: 5%;
    left: 5%;
    right: 5%;
    margin:auto;
    background-position: center;
    padding: 15px;
    background-color:#fff;
    border-radius: 20px;
}
.kotak-info span{
    font-family: Latoreg;
    font-size: 12px;
    color: #858585;
    margin-bottom: 10px;
}
.kotak-info h1{
    font-family: Latoreg;
    font-size: 15px;
    font-weight: bold;
    color: #303030;
    margin-top: 10px;
}
.bg-video{
    width: 100%;
    background-color:#010B2F;
    margin-top: 60px;
    margin-bottom:20px;
    padding: :20px 0 0px 0;
}
#videonya{
    width: 100%;
    height: 415px;    
    border-radius: 10px;
    margin-bottom: 50px;
}
.lihatvideo{
    width: 100%;
    margin-bottom: 12px;
    cursor: pointer;
}
.lihatvideo img{width: 100%;border-radius: 10px;height: 95px;cursor: pointer;}
.lihatvideo img:hover{opacity: 0.6}
.lihatvideo h2{
    font-family: Latoreg;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 15px;
}
.kotak-infonya{
    margin-bottom: 20px;
}
.kotak-infonya img{
    width: 100%;
    height: 240px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.kotak-infonya img:hover{opacity: 0.6}
.kotak-infonya span{
    font-family: Latoreg;
    font-size: 12px;
    color: #858585;
    margin-bottom: 10px;
}
.kotak-infonya h3{
    font-family: Latoreg;
    font-size: 16px;
    font-weight: bold;
    color: #303030;
    margin-bottom: 10px;
    margin-top: 10px;
}
#footer{background-color:#E6E6E6;width: 100%;height: auto;margin-top: 20px;
    padding-top: 20px;padding-bottom: 10px;
}
#footer h3{
    font-family: Lato;    
    font-size: 14px;   
    color: #303030;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}
#footer h4{
    font-family: Lato;    
    font-size: 14px;   
    color: #303030;
    font-weight: bold;
    text-transform: uppercase;
}
#footer p{
    font-family: Latoreg;
    text-align: center;
    font-size: 12px;   
    color: #303030;
}
.footer-td1{
    font-family: Latoreg;    
    font-size: 12px;   
    color: #303030;
    text-transform: uppercase;
}
.footer-td2{
    font-family: Latoreg;    
    font-size: 20px;
    font-weight: bold;   
    color: #303030;
}
.sosmed {color: #303030;font-size: 24px;margin-right: 10px;}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}
.page{
    width: 100%;
    text-align: center;  
}
.page-hal h1{
    font-family: Lato;
    text-align: center;
    font-size: 26px;   
    color: #303030;
    text-transform: uppercase;
}
.page-hal h2{
    font-family: Latoreg;
    text-align: center;
    font-size: 16px;   
    color: #303030;
    text-transform: capitalize;
}
.kotak-isi{margin:5px;height: auto;}
.eventpage{margin-top: 20px;}
.eventnya{ 
    padding-bottom: 10px;   
    box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
    margin-bottom: :20px;
    height: 380px;
}
.eventnya img{
    width: 100%;
    height: 280px;
    margin-bottom: 10px;
}
.eventnya img:hover{opacity: 0.6}
.eventnya p{
    font-family: Latoreg;
    font-size: 12px;
    color: #303030;
    line-height: 20px;
    text-align: justify;
}
.eventnya span{
    font-family: Latoreg;
    font-size: 12px;
    color: #858585;    
}
.eventnya a{text-decoration: none;}
.eventnya a h1{
    margin-top:10px;
    font-family: Latoreg;    
    font-size: 14px;   
    color: #303030;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}
.eventnya a h1:hover{color: #1C979F}
/*informasi*/
.infonya{ 
    padding-bottom: 10px;   
    box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 7px 5px -3px rgba(0,0,0,0.75);
    margin-bottom: :20px;
    height: 410px;
}
.infonya img{
    width: 100%;
    height: 225px;
    margin-bottom: 5px;
}
.infonya img:hover{opacity: 0.6}
.infonya p{
    font-family: Latoreg;
    font-size: 12px;
    color: #303030;
    line-height: 18px;
    text-align: justify;
}
.infonya span{
    font-family: Latoreg;
    font-size: 12px;
    color: #858585;   
}
.infonya a{text-decoration: none;}
.infonya a h1{
    margin-top:5px;
    margin-bottom:5px;
    font-family: Latoreg;    
    font-size: 14px;   
    color: #303030;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}
.infonya a h1:hover{color: #1C979F}
.kotak-galeri{
    width: 100%;
    height: auto;
}
.kotak-galeri img{border-radius: 10px 10px 0 0;width: 100%;}
.kotak-galeri-footer{
    background-color:#EBEBEB;
    border-radius: 0 0 10px 10px;
} 
.kotak-galeri-footer h1{
    margin-left: 5px;
    margin-right:6px;
    font-family: Lato;    
    font-size: 14px;   
    color: #4C4C4C;
}
.mapnya{
    width: 100%;
    height: 300px;
}
.img-detail{
    width: 100%;
    height: 420px;
}
.md-infodetail{margin-top: 100px;}
.kotak-detail-kanan{
    width: 100%;
    height: auto;
}
.kotak-detail-kanan h2{
    font-family: Latoreg;    
    font-size: 24px;
    font-weight: bold; 
}
.garisjudul{
    width: 50px;
    border:4px solid#1C979F;
}
.a-dtl {text-decoration: none;color: #303030}
.a-dtl h3{
    font-family: Latoreg;    
    font-size: 18px;
    font-weight: bold; 
}
.a-dtl span{
    font-family: Latoreg;
    font-size: 12px;
    color: #858585; 
}
.a-dtl h3:hover{color: #1C979F}
.dtl-event{width: 50%;margin:0 15px 15px 0;}
.formregistrasi{
    width: 100%;
    height: auto;
    text-align: center;
}
.formregistrasi h1{
    font-family: Latoreg;
    font-size: 20px;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 5px;
}
.formregistrasi p{
    font-family: Latoreg;
    font-size: 13px;
    line-height: 20px;
}
.infodaftar{
    font-family: Latoreg;
}
.infodaftar p{
    font-size:13px;
    line-height: 20px;
    text-align: justify;
}
.infodaftar ul li{
    list-style: square;
    font-size:13px;
}
.kotak-daftar{
    width: 100%;
}
.kotak-daftar h1{
    font-family: Latoreg;
    font-size: 20px;
    font-weight: bold;
    color: #1C979F;
    margin:5px 0 15px 0;
}
.kotak-daftar h2{
    font-family: Latoreg;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin:5px 0 5px 0;
}
.kotak-daftar ol li{   
     font-family: Latoreg;
     font-size:13px;
     list-style: square;
}

/*mbile*/
@media only screen and (max-width: 992px) {
    #kotak{width: 100%;height: auto;padding-top: 120px;margin-bottom: 30px;}
    .kotak-cari{
        display: none;
        
    }
    
    .kotak-cari2{
        margin-top: -30px;
        width: 100%;              
        text-align: center;
        margin-bottom: 10px;
    }
    .kotak-cari2 h1{
        font-family: Latobold;
        font-size: 28px;
        color: #303030;
        margin-bottom: 10px;
    }
    .kotak-cari2 h2{
        font-family: Latoreg;    
        font-size: 14px;
        color: #303030;
        margin-bottom: 10px;
       
    }
    .kotak-cari2 form{display: none;}
    .atas img{width: 150px;}
    .sld{margin-top: 78px;}
    .judul{font-family: Lato;
        font-size: 18px;color: #303030;
        margin-top: 32px;
        margin-bottom:20px;
        font-weight: bold;
    }
    .judul-2{
            font-family: Lato;
            font-size: 24px;color: #fff;
            margin-top: 32px;
            margin-bottom:40px;
            font-weight: bold;
    }
    .judul-3{
            font-family: Lato;
            font-size: 13px;color: #303030;
            font-weight: bold;
    }
    #footer h3{
        font-family: Lato;    
        font-size: 12px;   
        color: #303030;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 0px;
    }
    #footer h4{
        font-family: Lato;    
        font-size: 12px;   
        color: #303030;
        font-weight: bold;
        text-transform: uppercase;
    }
    .footer-td2{
        font-family: Latoreg;    
        font-size: 16px;
        font-weight: bold;   
        color: #303030;
    }
    .data-exist{border-radius: 20px;padding:10px; color: #fff;
        background: rgb(11,195,207);
        background: linear-gradient(100deg, rgba(11,195,207,1) 13%, rgba(10,182,194,1) 100%); }
    .data-exist h1{font-size: 12px;font-family: Latoreg;margin-bottom: 30px;font-weight: bold;}
    .btn-exits{background-color: #0CB9C7;
        padding: 10px 20px;
        text-align: left;
        color: #fff;
        text-decoration: none;
        position: absolute;
        bottom: 0;left: 0;
        border-radius: 0 20px 0px 20px;
        font-family: Latoreg;
        font-size: 14px;font-weight: bold;
    }
    .btn-exits i{margin-left: 100px}
    .btn-exits:hover{
        background-color: #0A99A3;color: #fff;
    }
    .bg-pemutakhiran{border-radius: 20px;padding:10px;color: #fff; background: rgb(40,176,234);
    background: linear-gradient(100deg, rgba(40,176,234,1) 13%, rgba(39,170,227,1) 100%); }
    .bg-pemutakhiran h1{font-size: 12px;font-family: Latoreg;margin-bottom: 30px;font-weight: bold;}
    .btn-pemutakhiran{background-color: #14A0DD;
        padding: 10px 20px;
        text-align: left;
        color: #fff;
        text-decoration: none;
        position: absolute;
        bottom: 0;left: 0;
        border-radius: 0 20px 0px 20px;
        font-family: Latoreg;
        font-size: 14px;font-weight: bold;
    }
    .btn-pemutakhiran i{margin-left: 100px}
    .btn-pemutakhiran:hover{
        background-color: #1291C7;color: #fff;
    }
    .dm ul{   
       margin-bottom: 10px;
       margin-left:-20px;
    }
    .dm ul li {
       display:inline-block;
       text-align: center;
       width: 30%;
      
    }
    .dm{padding-bottom: 20px;}
    .dm ul li i{font-size: 20px;color: #CFF7FA}
    .dm ul li h2{font-size: 14px;color: #fff;margin:8px 0px 8px 0px;font-family: Lato;}
    .dm ul li h3{font-size: 10px;color: #fff;margin:0px;font-family: Latoreg;}
    .kotak-infonya span{
        font-family: Latoreg;
        font-size: 11px;
        color: #858585;
        margin-bottom: 5px;
    }
    .kotak-infonya h3{
        font-family: Latoreg;
        font-size: 12px;
        font-weight: bold;
        color: #303030;
        margin-bottom: 10px;
        margin-top: 5px;
    }
    .kotak-infonya img{
        width: 100%;
        height: 280px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .img-detail{
        width: 100%;   
        height: 250px;     
    }
    .radius-img{
        width: 100%;
        border-radius: 10px;
        height: 260px;    
    }
    .kotak-info{
        width: 90%;
        height: auto;
        position: absolute;
        bottom: 5%;
        left: 5%;
        right: 5%;
        margin:auto;
        background-position: center;
        padding: 10px;
        background-color:#fff;
        border-radius: 10px;
    }
    .kotak-info span{
        font-family: Latoreg;
        font-size: 11px;
        color: #858585;
        margin-bottom: 10px;
    }
    .kotak-info h1{
        font-family: Latoreg;
        font-size: 12px;
        font-weight: bold;
        color: #303030;
        margin-top: 10px;
    }



}
@media only screen and (max-width: 600px) {
    .dm ul{   
       margin-bottom: 10px;
       margin-left:-50px;
    }
    .dm ul li {
       display:inline-block;
       text-align: center;
       width: 31%;
      
    }
    .dm{padding-bottom: 20px;}
    .dm ul li i{font-size: 20px;color: #CFF7FA}
    .dm ul li h2{font-size: 14px;color: #fff;margin:8px 0px 8px 0px;font-family: Lato;}
    .dm ul li h3{font-size: 12px;color: #fff;margin:0px;font-family: Latoreg;}
    .kotak-infonya span{
        font-family: Latoreg;
        font-size: 11px;
        color: #858585;
        margin-bottom: 5px;
    }
    .kotak-infonya img{
        width: 100%;
        height: 150px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
}