.warna-judul{
	color:#fff;
} 			
.warna-subjudul{
	color:#ff8300;
}
.warna-subjudul2{
	color:#a58563;
}
.warna-body{
	color:#fff;
}
.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	margin: 20px 0 40px;
	height: 0;
}
.video-pd{
	padding:15px;
}
.video-ig {
	position: relative;
	padding-bottom: 90.25%; /* 16:9 */
	margin: 20px 0 40px;
	height: 0;
}
.video iframe {
	background: #1e515c;
	border: 5px solid #4b8996;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video img{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%;*/
}

.bodere-video{
	border: 5px solid #4b8996;
	max-width:100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 input.MyButton {
                width: 100%;
                padding: 10px 5px;
                cursor: pointer;
                font-size: 150%;
                background: #3366cc;
                color: #fff;
                border: 0px;
                border-radius: 10px;
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
            }
            input.MyButton:hover {
                color: #fff;
                background: #234eae;
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
            }
            input.MyButton2 {
                width: 95%;
                padding: 10px 10px;
                cursor: pointer;
                background: #f27304;
                color: #fff;
                border: 0px;
                border-radius: 10px;
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
				
            }
            input.MyButton2:hover {
                color: #000;
                background: #3afcdf;
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
            }
            input.btngreen {
                background: #4bbb01;
            }
            input.btngreen:hover {
                background: #3a8c05;
            }
            input.btndark {
                background: #167777;
            }
            input.btndark:hover {
                background: #073a3a;
            }
            input.tesbtn {
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
            }
            input.tesbtn:hover {
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
            }

			.judul-modul{
	 background-color: #4b8996;
	/*background-image: linear-gradient(-225deg, #319c6d 0%, #29c39d 48%, #4596FB 100%);*/
    color: #fff;
    position: relative;
    margin-bottom: -20px;
    height: auto;
    padding: 5px 15px 0px 20px;
    z-index: 9999;
    position: relative;
    display: inline-block;
    float: right;
    /* margin-bottom: -36px; */
    margin-top: -25px;
    margin-right: -8px;
    transform: skew(0deg, 2deg);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
		
.grow {
  -webkit-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}

.grow:hover {
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1);
  transform:scale(1.1);
}
		
.tombole {
                width: 80%;
                padding: 10px 10px;
                cursor: pointer;
                /*background: #f27304;*/
				background-image: linear-gradient(-225deg, #319c6d 0%, #29c39d 48%, #4596FB 100%);
                color: #fff;
                border: 0px;
                border-radius: 10px;
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
				text-decoration:none;
            }
         .tombole:hover {
                color: #000;
                background: #3afcdf;
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
				text-decoration:none;
				
            }	
.tombole2 {
                width: 80%;
                padding: 10px 10px;
                cursor: pointer;
                background: rgba(242, 115, 4, 0);
				color: #fff;
				border: aqua 3px solid;
				border-radius: 10px;				
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
				text-decoration:none;
            }
.tombole2:hover {
                color: #000;
                background: #3afcdf;
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
				text-decoration:none !important;
				
            }
.tombole3 {
                width: 80%;
                padding: 10px 10px;
                cursor: pointer;
                /*background: #f27304;*/
				
				background-image: linear-gradient(to right, #f83600 0%, #ff6f00 100%);				
                color: #fff;
                border: 0px;
                border-radius: 10px;
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
				text-decoration:none;
            }	
.tombole3:hover {
                color: #000;
				background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
				text-decoration:none;			
}

.tombolefb {
                width: 80%;
                padding: 10px 10px;
                cursor: pointer;
                /*background: #f27304;*/
				
				background-color: #2196F3;				
                color: #fff;
                border: 0px;
                border-radius: 30px;
                -moz-box-shadow: : 6px 6px 5px #999;
                -webkit-box-shadow: : 6px 6px 5px #999;
                box-shadow: : 6px 6px 5px #999;
                white-space: normal;
                transition: 0.5s;
				text-decoration:none;
            }	
.tombolefb:hover {
                color: #000;
				background-image: linear-gradient(120deg, #2196F3 0%, #114aca 100%);
                -moz-box-shadow: : 5px 5px 4px #adadad;
                -webkit-box-shadow: : 5px 5px 4px #adadad;
                box-shadow: : 5px 5px 4px #adadad;
				text-decoration:none;			
}

		
				
.tom-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}	

.tom-shadow3{
		    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 11px 21px -11px #0a0a0a;
}

.tom-shadow2 {
	-webkit-box-shadow: 0 14px 15px -8px #73ffec;
	   -moz-box-shadow: 0 14px 15px -8px #73ffec;
	        box-shadow: 0 14px 10px -8px #73ffec;
}			
.tom-shadow:hover{
	text-decoration:none;
}		
    		
.urutan li{
    background: url(../images/arrow-tosca.png) no-repeat left top;
    padding: 1px 0px 8px 35px;
    list-style: none;
    opacity: 0.9;
    margin-bottom: 6px;
}

.urutan2 li{
    background: url(../images/checked.png) no-repeat left top;
    padding: 1px 0px 8px 35px;
    list-style: none;
    opacity: 0.9;
    margin-bottom: 6px;
}
.fak li{
    background: url(../images/faq1.png) no-repeat left top;
    padding: 2px 0px 10px 40px;
    list-style: none;
    opacity: 0.9;
    margin-bottom: 6px;
}


			
.hijaugelap{
	color:#022e37;
}
.hijauterang{
	color:#00dda9;
}
.biruterang{
	color:#1c7ab6;
	}
.hitamsemu{
	color:#3d3d3d;
}
.putih{
	color:#fff;
}

.pd{
	padding:0px 15px;
}

            .row {
                margin: auto}	

            
            .bgm {
                text-align:center;
                padding:100px 0;
                background-color:#f1f1f1;
            }			

            .custom-bullet li {
                display: block;
            }

            .custom-bullet li:before
            {
                /*Using a Bootstrap glyphicon as the bullet point*/
                content: "\e013";
                font-family: 'Glyphicons Halflings';
                float: left;
                margin-top: 4px;
                margin-left: -24px;
                color: #00ffe1;
            }


            .times {
                padding:10px 0 0;
                text-align:center;
                font-family:"Titillium Web", sans-serif;
                font-size: 30pt;
                line-height:20pt;
                color:white;
				border: aqua 2px solid;
    border-radius: 5px;
    margin: 5px 5px 5px 5px;
            }
            .smalltext {
                font-size:12px;
                font-family: "Titillium Web", sans-serif;
            }
            .textwhite {
                color:white;
            }
					
			.judul1{
				font-size: 50px;
				font-family: "Montserrat", sans-serif;
				line-height: 60px;
			}
			.judul2{
				font-size: 45px;
				font-family: "Montserrat", sans-serif;
				letter-spacing: -1.3px;
				font-weight: 300;
			}
			.judul3{
				font-size: 40px;
				font-family: "Montserrat", sans-serif;
				letter-spacing: -1.3px;				
			}
			.subjudul1{
				font-size: 33px;
				font-family: "Montserrat", sans-serif;
			}
			.subjudul2{
				font-size: 27px;
				font-family: "Montserrat", sans-serif;
			}
			.subjudul3{
				font-size: 22px;
				font-family: "Montserrat", sans-serif;
			}
			.text-isi{
				font-size: 18px;
				font-family: "Titillium Web", sans-serif;
			}
			.text-khusus{
				font-size: 18px;
				font-family: "Montserrat", sans-serif;
				
			}
			.text-khusus2{
				font-size: 16px;
				font-family: "Montserrat", sans-serif;
			}
			.tinggie {
				line-height:25px;
			}
			
			
	@media screen and (max-width: 768px){
		body{
			font-size: 13px;
		}
		
			.tombole{
				font-size:18px;
			}
			.tombole2{
				font-size:18px;
			}
			
			.judul1{
				font-size: 30px;
				line-height:35px;
			
			}
			.judul2{
				font-size: 27px;
			}
			.judul3{
				font-size: 25px;			
			}
			.subjudul1{
				font-size: 20px;
			}
			.subjudul2{
				font-size: 18px;
			}
			.subjudul3{
				font-size: 16px;
			}
			.text-isi{
				font-size: 15px;			
			}
			.text-khusus{
				font-size: 14px;
			}
			.text-khusus2{
				font-size: 12px;
			}
			.navbar-header{
				display:none;
			}
			.tinggie {
				line-height:16px;
			}
		
	}
	
	@media screen and (max-width: 480px){
		body{
		font-size: 12px;
		}
			.hilang{
				display:none;
			}
		
			.tombole{
				font-size:18px;
			}
			.tombole2{
				font-size:18px;
			}
			
			.judul1{
				font-size: 30px;
				line-height:33px;
			
			}
			.judul2{
				font-size: 25px;
			}
			.judul3{
				font-size: 22px;			
			}
			.subjudul1{
				font-size: 18px;
			}
			.subjudul2{
				font-size: 16px;
			}
			.subjudul3{
				font-size: 14px;
			}
			.text-isi{
				font-size: 14px;			
			}
			.text-khusus{
				font-size: 12px;
			}
			.text-khusus2{
				font-size: 11px;
			}
			.tinggie {
				line-height:15px;
			}
		
	}