@charset "UTF-8";
/* Body */
 body { font-family: 'Kanit', sans-serif; color: rgba(0,0,0, 0.7); margin: 0; padding: 0;}
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
	
.judul { color: rgb(152, 72, 7); font-size: 60px; }
.judul1 { font-size: 30px; }
.judul2 { color: rgb(152, 72, 7); font-size: 40px; }
.judul3 { color: rgb(152, 72, 7); font-size: 30px; }
.judul4 { font-size: 20px; }
.judul5 { font-size: 20px; }
.footer { font-size: 25px; }
.judulCS { color: rgb(152, 72, 7); font-size: 25px; }
.hurufCS { font-size: 22px; }

@media screen and (max-width: 600px) {
  .judul { color: rgb(152, 72, 7); font-size: 42px; }
  .judul1 { font-size: 20px; }
  .judul2 { font-size: 30px; }
  .judul3 { font-size: 25px; }
  .judul4 { font-size: 16px; }
  .footer { font-size: 16px; }
  .judulCS { font-size: 22px; }
  .hurufCS { font-size: 18px; }
}


 @media screen {
	#depan { max-width: 800px; margin: 0px auto 0px; padding: 100px 24px 50px; }    
 	@media (max-width: 600px) {
	#depan { margin-top: 0; box-shadow: none; border: none; padding: 50px 24px 16px;}  
	}

	#konten { max-width: 1100px; margin: 0px auto 0px; padding: 16px 24px 16px;}    
	#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
 	@media (max-width: 600px) {
	body, #konten { margin-top: 0; box-shadow: none; border: none;}  
	}

	#bawah { background-color: blue; max-width: 100%; margin: 0px auto 0px; padding: 32px 24px 16px;}    
	#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
 	@media (max-width: 600px) {
	body, #bawah { margin-top: 0; box-shadow: none; border: none;}  
	}
 }

/* tiga kolom */

.kolom3 {
  float: left;
  width: 33.33%;
}
.row3:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .kolom3 {
    width: 100%;
  }
}


/* dua kolom */
.KOLOMleft {
        float: left;
        width: 50%;
    }
    .KOLOMright {
        float: right;
        width: 50%;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .duaKOLOM:after {
        content:"";
        display: table;
        clear: both;
    }
@media screen and (max-width: 600px) {
  	.KOLOMleft, .KOLOMright {
    	width: 100%;
  	}
	}

/* dua kolom tambahan*/
.DUAleft {
	float: left;
	width: 40%;
}
.DUAright {
	float: right;
	width: 60%;
}
img {
	max-width: 100%;
  	height: auto;
}
.DUAgroup:after {
	content:"";
	display: table;
	clear: both;
}
    
 
/* empat kolom */
 .kolom4 {
  	float: left;
  	width: 25%;
	}
  .row4:after {
  	content: "";
  	display: table;
	}
@media screen and (max-width: 600px) {
  	.kolom4 {
    	width: 100%;
  	}
	}







.KOTAK1 { background: #F0FFFF; margin: 10px; border-bottom: solid 3px #FFC000;
			border-radius: 3px;
		box-shadow: 
        inset 0 -3em 3em rgba(0,0,0,0.1), 
              0 0  0 1px white,
              0.3em 0.3em 1em rgba(0,0,0,0.3);
		}

.KOTAK2 { background: rgba(240, 240, 240, 0.87); margin: 10px; border-bottom: solid 3px #FFC000;
			border-radius: 3px;
		box-shadow: 
        inset 0 -3em 3em rgba(0,0,0,0.1), 
              0 0  0 1px white,
              0.3em 0.3em 1em rgba(0,0,0,0.3);
		}
			
.KOTAK3 {
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.4); 
  color: white;
  box-shadow: 
        inset 0 -3em 3em rgba(0,0,0,0.1), 
              0 0  0 1px white,
              0.3em 0.3em 1em rgba(0,0,0,0.3);	
  }

.KOTAK3:hover,
.KOTAK3:active {
  color: rgb(255,255,255);
  background-color: rgba(0, 0, 0, 0.5); /* fallback */
 
  border-color: rgba(0, 0, 0, 0.5); /* fallback */
  
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}



.KOTAK4 {
  background-color: rgba(0, 0, 0, 0.4); 
  border: solid 1px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 20px;
  color: white;	
  }

.KOTAK4:hover,
.KOTAK4:active {
  color: rgb(255,255,255);
  background-color: rgba(0, 0, 0, 0.5); /* fallback */
 
  border-color: rgba(0, 0, 0, 0.5); /* fallback */
  
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}

	
	/* TOMBOL */
.SIGN {
  display: inline-block;
  color: rgb(152, 72, 7);
  border: solid 1px #FFC000;
  background-color: rgba(255, 192, 0, 0.5);
  width: 120px;
  padding: 15px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.1s ease-out,
              border-color 0.1s ease-out;
}
.SIGN:hover,
.SIGN:active {
  color: rgb(255,255,255);
  background-color: #FFC000; /* fallback */
  background-color: #FFC000;
  border-color: #FFC000; /* fallback */
  border-color: #FFC000;
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}

.SIGN2 {
  display: inline-block;
  color: white;
  border: solid 1px #FFC000;
  background-color: #FFC000;
  width: 100px;
  padding: 15px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.1s ease-out,
              border-color 0.1s ease-out;
}
.SIGN2:hover,
.SIGN2:active {
  color: rgb(255,255,255);
  background-color: rgba(255, 192, 0, 0.5); /* fallback */
  background-color: rgba(255, 192, 0, 0.5);
  border-color: #FFC000; /* fallback */
  border-color: #FFC000;
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}

.DAFTAR {
  display: inline-block;
  color: white;
  border: solid 1px #FFC000;
  background-color: #FFC000;
  width: 90px;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.1s ease-out,
              border-color 0.1s ease-out;
}
.DAFTAR:hover,
.DAFTAR:active {
  color: rgb(255,255,255);
  background-color: rgba(255, 192, 0, 0.5); /* fallback */
  background-color: rgba(255, 192, 0, 0.5);
  border-color: #FFC000; /* fallback */
  border-color: #FFC000;
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}


.BIAYA {
  display: inline-block;
  color: white;
  border: solid 1px rgb(250,100,100);
  background-color: rgb(250,100,100);
  width: 90px;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.1s ease-out,
              border-color 0.1s ease-out;
}
.BIAYA:hover,
.BIAYA:active {
  color: rgb(255,255,255);
  background-color: rgba(250,100,100,0.5); /* fallback */
  border-color: rgb(250,100,100); /* fallback */
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}


.CALL {
  display: inline-block;
  border: solid 1px #2e6c80;
  width: 100px;
  padding: 3px;
  border-radius: 5px;
  color: #2e6c80;
  border-color: #2e6c80;
  background-color: none;
  font-size: 14px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out;
}
.CALL:hover,
.CALL:active {
  color: rgb(255,255,255);
  background-color: #2e6c80; /* fallback */
  background-color: #2e6c80;
  border-color: #2e6c80; /* fallback */
  border-color: #2e6c80;
  transition: background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}

.UNDUH {
  display: inline-block;
  color: white;
  background-color: rgb(9, 106, 255);
  width: 100px;
  font-size: 12px;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out;
}
.UNDUH:hover,
.UNDUH:active {
  color: rgb(255,255,255);
  background-color: rgb(255,100,100); /* fallback */
  background-color: rgb(255,100,100);
  border-color: rgb(255,100,100); /* fallback */
  border-color: rgb(255,100,100);
  transition: background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}

.PREMIUM {
  display: inline-block;
  color: white;
  background-color: #FFC000;
  width: 100px;
  font-size: 12px;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out;
}
.PREMIUM:hover,
.PREMIUM:active {
  color: rgb(255,255,255);
  background-color: rgb(255,100,100); /* fallback */
  background-color: rgb(255,100,100);
  border-color: rgb(255,100,100); /* fallback */
  border-color: rgb(255,100,100);
  transition: background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}


.GARIS {
     border-top: solid 2px #FFC000;
     width: 100px;
}

.GARIS1 {
     border-top: solid 5px #FFC000;
     width: 100px;
}



.kolap {
  margin-left: 20px;
  margin-right: 20px;
}
/* COLLAPSABLE */
.KOLAPS {
  background: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: solid 1px #FFC000;
  border-radius: 3px;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .KOLAPS:hover {
  background-color: rgba(255, 192, 0, 0.5); color: white;
}

.KOLAPS:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  
  max-height: 0;
  font-size: 15px;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  background-color: none;
 
}

.zoom {overflow: hidden;}
.zoom img {transition: transform .5s ease;}
.zoom:hover img {transform: scale(1.2);}

.OVAL { border-radius: 5px;}
.OVAL1 { border-radius: 5px; border: 1px solid blue;}
 
 .faukal {
   border-left: 4px solid #FFC000;
   padding:10px;
   background:rgb(240,240,240);
   color: #2e6c80; 
   font-size: 22px;
   margin-left:10px;
   margin-right:10px;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
}

.box1 {
   border-left: 4px solid #FFC000;
   padding:10px;
   background:rgba(105, 105, 105, 0.87);
   color: white; 
   margin-left:10px;
   margin-right:10px;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
}
.box2 {
   Width: 250px;
   padding:10px;
   background:#FFC000;
   color: white; 
   font-size: 22px;  
}

.BorderGambar {
	box-shadow: 
        inset 0 -3em 3em rgba(0,0,0,0.1), 
              0 0  0 1px white,
              0.3em 0.3em 1em rgba(0,0,0,0.3);
}



.zoom {overflow: hidden;}
.zoom img {transition: transform .5s ease;}
.zoom:hover img {transform: scale(1.2);}

.OVAL { border-radius: 3px;}
.OVAL1 { border-radius: 3px; border: 1px solid blue;}

.judulMateri {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 22px;
  }
.tujuanMateri {
  padding-left: 20px;
  padding-right: 20px;
  }

.kontent {
  padding: 20px;
  }
.tengah {
  text-align: center;
}

#tombolVisit {
  width: 120px;
  display: none;
  position: fixed;
  bottom: 20px;
  border: none;
  outline: none;
  right: 20px;
  z-index: 99;
  background-color: transparent;
  cursor: pointer;
  
}
@media screen and (max-width: 600px) {
#tombolVisit {
  width: 60px;
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  outline: none;
  z-index: 99;
  background-color: transparent;
  cursor: pointer;
  
}
}

.border2 {
	border-left: 2px solid rgb(38, 198, 218);
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	background: rgb(240,240,240);
	box-shadow: 
        inset 0 -3em 3em rgba(0,0,0,0.1), 
              0 0  0 1px white,
              0.3em 0.3em 1em rgba(0,0,0,0.3);
}

#admin {
  border-radius: 100%; border: 1px solid rgb(38, 198, 218); width: 115px;
}

.CALL {
  display: inline-block;
  width: 120px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid rgb(200,200,200);
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.1s ease-out,
              border-color 0.1s ease-out;
}
.CALL:hover,
.CALL:active {
  color: rgb(255,255,255);
  background-color: rgba(38, 198, 218, 0.7);
  border-color: #2e6c80; 
  transition: background-color 0.1s ease-in,
              border-color 0.1s ease-in;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */ /* Location of the box */
  padding-top: 30px;
  left: 0; 
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 20;
  border: 1px solid #888;
  width: 600px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.6s;
		animation-name: animatetop;
		animation-duration: 0.6s
}
@media screen and (max-width: 600px) {
.modal-content {
	width: 90%; }
}



/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 20px;
  background-color: rgba(38, 198, 218, 0.7);
  
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

figure {
	margin: 0;
	padding: 0;
	overflow: hidden;
}