@import url(//fonts.googleapis.com/css?family=Ubuntu);

html, body{font-family:"Ubuntu";padding:0px auto;margin:0px auto;position:relative;height:100%;}
input,text,textarea{outline:none;border-collapse:collapse;border:1px solid #ccc;}
p{font-size:14px;color:#444;text-align:justify;line-height:26px;padding:0px;margin:10px 0px 40px 0px;}
a{text-decoration:none;outline:none;}
h3{padding:0px;margin:0px 0px 5px 0px;}
h5{padding:0px;margin:0px 0px 15px 0px;color:#000;font-weight:bold;line-height:30px;}

#top_panel{background:none;width:100%;text-align:center;padding:0px;position:fixed;z-index:9999;}
#top_panel.show{background:#000;}
.top_wrap{background:none;width:1200px;position:relative;}
.header_menu{text-align:right;}.header_menu ul{margin:0px;padding:0px;}
.header_menu li {display:inline-block;}
.header_menu a {display:block;color:#fff;font-size:16px;padding:35px 15px;margin:0px;font-weight:bold;}
.header_menu a:hover{color:yellow;}
.header_menu > ul > li:hover,li.active > a{color:yellow;}
.header_menu li:hover .dropdown{display: block; margin:0;opacity: 1;visibility: visible;}
.parent{position: relative;}
.dropdown {
	position:absolute;
	top:60px;
    list-style:none;
    visibility: hidden;
    text-align:left;
    background:#000;
	z-index:9999;
}
.dropdown li{display: block;}
.dropdown a {
    display: block;
    padding: 10px 15px 0px 15px;
    color:#fff;font-size:16px;
}
.dropdown li:hover a{text-decoration: none;background:none;}
#search{position:absolute;right:0;top:0px;border-left:1px solid #0098d1;border-right:1px solid #0098d1;padding:23px 15px;text-align:center;}#search input,text{background:none;border:none;width:100px;color:#fff;font-family:'Ubuntu';font-size:16px;}#search input:focus{color:#444;}

#logo{position:absolute;top:5px;}#logo img{width:auto;height:85px;}

#container{width:100%;margin:0px auto;padding:0px auto;background:#fff;}
#container_wrap{width:1100px;padding:60px 0px;position:relative;}
#container_wrap_title{font-size:40px;}

#container_wrap ul li {list-style-type:square;}
#container_wrap input,text,select{width:100%;padding:10px;margin:5px 0px 20px 0px;}#left input:focus{border:1px solid #2980b9;}

.slider { width: 100%;  margin: 0px 0px 0px 0px;}
.slider .indicators { bottom: 20px; z-index: 100; }
.slider .indicators .indicator-item {
  background-color: #666666;
  border: 3px solid #ffffff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.slider .slides a{background:#3498db;color:#fff;padding:15px 20px;border-radius:5px;}.slider .slides a:hover{background:#2980b9;}
.slider .indicators .indicator-item.active { background-color: #ffffff; }

#visi span{font-size:40px;}#visi p{color:#7f8c8d;font-size:28px;text-align:center;margin:0px;padding:0px;line-height:40px;}

#card{width:330px;height:320px;margin:0px 20px;text-align:left;color:#34495e;box-shadow:2px 2px 5px #bdc3c7;background:#fff;border-radius:5px;}
#card div:hover{color:#2c3e50;text-decoration:underline;}
#card img {object-fit:cover;object-position:top center;height:150px;width:100%;margin:0px 0px 20px 0px;border-radius:5px 5px 0px 0px;}
#card img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#card div {font-size:18px;font-weight:bold;margin:0px 20px 10px 20px;line-height:22px;}
#card p{font-size:14px;color:#95a5a6;padding:0px;margin:0px 20px 0px 20px;}

#service {margin:0px 15px;width:350px;height:200px;text-align:center;border-radius:10px;position:relative;background:#000;}
#service img{height:100%;width:100%;margin:0px;object-fit:cover;object-position:center center;border-radius:10px;z-index:-1;opacity: 0.40;filter: alpha(opacity=40);}
#service div{position:absolute;top:65px;left:75px;color:#fff;border:3px solid #fff;background:none;font-size:26px;width:200px;padding:15px 0px;}
#service div:hover{background:#fff;color:#000;}

#button{border:1px solid #00aef0;color:#00aef0;text-align:center;font-weight:bold;width:160px;font-size:14px;padding:10px 0px;border-radius:50px;}
#button:hover{background:#00aef0;color:#fff;}
#button.visi{margin-top:50px;}

#tombol{
	font-size:14px;font-weight:bold;color:#ffffff;font-family:'Ubuntu';
	margin:5px 0px;padding:5px 8px;border:1px solid #2980b9;width:100px;
	cursor:pointer;-moz-border-radius:3px;-webkit-border-radius:3px;
	background-color:#3498db;
}#tombol:hover{background:#2980b9;}
#tombol.gray{background-color:#eee;border:1px solid #ccc;font-size:12px;color:#000;margin:0px 0px 0px 0px;}#tombol.gray:hover{background:#ccc;}
#tombol.hijau{background-color:#2ecc71;border:1px solid #27ae60;}#tombol.hijau:hover{background-color:#27ae60;}
#tombol.merah{background-color:#e74c3c;border:1px solid #c0392b;}#tombol.merah:hover{background-color:#c0392b;}

#cover{background:url(images/slide1.jpg) no-repeat center center;background-size:cover;padding:150px 0px 80px 0px;width:100%;}#cover div{color:#fff;font-size:40px;border:5px solid #fff;padding:20px 0px;width:300px;}

#nav{font-size:13px;padding:10px 20px;background:#ECF0F1;margin:0px 0px -20px 0px;color:#626262;width:1060px;text-align:left;}#nav a{color:#000;margin:0px 5px 0px 0px;}#nav a:hover{text-decoration:underline;}#nav a.selected{font-weight:bold;}

#left{padding:0px 50px 0px 0px;text-align:left;left:0px;top:0px;}#right{position:absolute;right:80px;top:40px;text-align:left;}
#left.isi{width:700px;min-height:500px;margin:-5px 300px 0px -80px;left:0px;top:0px;border-right:1px solid #ddd;}#right.isi{width:300px;}
#left.isi img{width:95%;height:auto;margin:50px 0px 0px 0px;}


#login_cek{
	-moz-border-radius:5px;-webkit-border-radius:5px;
	background-color:#ffffdd;border:2px solid #ffd700;
	width:100%;padding:8px 9px;margin:0px 0px 20px 0px;
	font-weight:bold;font-size:13px;
	text-align:center;
}

#step_tab a{color:#fff;padding:10px;margin-right:2px;background:#7f8c8d;font-size:14px;font-weight:bold;border:1px solid #444;border-bottom:none;letter-spacing:1px;}
#step_tab a:hover{background:#444;text-decoration:none;color:#fff;}#step_tab a.selected{background:#fff;border:1px solid #444;border-bottom:1px solid #fff;color:#c0392b;}
#step_tabb{border-bottom:1px solid #444;padding:0px 0px 9px 0px;}
@-moz-document url-prefix() {#step_tabb{padding-bottom:9px;}}

#training td{padding:10px;border:1px solid #888;line-height:22px;font-size:14px;}
#daftar{font-size:14px;font-weight:bold;}#daftar:hover{border:1px solid #2980b9;}
#peserta td{padding:5px;border:1px solid #888;}

#list{margin-top:25px;border-bottom:1px solid #ccc;}#list img{object-fit:cover;object-position:center;height:115px;width:200px;margin:0px 25px 20px 0px;}#list span{color:#C0392B;font-size:14px;font-weight:bold;}#list div{color:#ccc;font-size:12px;margin:10px 0px 0px 0px;}#list:hover{color:#00aef0;}

#halaman{text-align:center;margin:30px 0px 0px 0px;font-size:13px;}#halaman a{border:1px solid #444;padding:5px 8px 3px 8px;margin:0px 3px;color:#444;}#halaman a:hover{background:#bbb;color:#000;}#halaman a.selected{background:#444;color:#fff;border:1px solid #444;}

#pengelola{width:200px;font-size:12px;margin:-20px 20px 0px 0px}
#pengelola img:hover{opacity: 0.50;filter: alpha(opacity=50);}

#overlay {display:none;position: fixed;width:100%;height:100%;z-index: 100;top:0;overflow:auto;}
#modal{display:table;left:-200px;background-color: #ffffff;margin:10px 0px;width:80%;}
#modal_box{vertical-align:middle;display:table-cell;text-align:center;position:relative;}
#large_img img{float:left;width:100%;height:auto;}
#close img{float:right;position:absolute;right:0;margin-right:-40px;}#close img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#fade {display:none;position:fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 50;opacity: 0.85;filter: alpha(opacity=85);background-color: black;}

#footer{background:#000;padding:20px 0px;color:#ccc;}
#footer img{height:48px;width:auto;margin:10px 0px 0px 15px;}#footer img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#footer_top{background:#000;padding:30px 0px;margin-bottom:10px;color:#fff;font-size:12px;}
#footer_top a{color:#ccc;font-size:14px;line-height:24px;}#footer a:hover{text-decoration:underline;color:#fff;}
#footer_top span{color:#ccc;font-size:14px;line-height:22px;font-weight:bold;}

#toTop {
    border: 2px solid #00aef0;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background:none;
    position: fixed;
    bottom: 10px;
    left: 48.5%;
    display: none;
	cursor:pointer;
}
#toTop:hover{background:#00aef0;}
#toTop:hover #arrow{border:2px solid #fff;border-left:none;border-bottom:none;}
#arrow{
	width:10px;height:10px;
	border:2px solid #00aef0;border-left:none;border-bottom:none;
	transform: rotate(315deg);margin:16px 0px 0px 0px;
}

@media only screen and (min-width: 1000px) {.menu_mobile{display:none;}#mobile{display:none;}#sidebar{display:none;}}

@media only screen and (max-width: 1000px) {
	#top_panel{box-shadow:none;background:#000;height:75px;}
	.top_wrap{background:none;width:95%;position:relative;padding:0px;} .header_menu{display:none;}
	
	/*#search{position:absolute;right:0;top:0px;border:none;border-left:1px solid #0098d1;padding:12px 10px 12px 10px;}*/
	#search{display:none;}#logo{position:absolute;top:3px;left:10px;}#logo img{width:auto;height:70px;}	
	
	#wrapper{
		position:relative;height:100%;width:100%;right:0px;
		-webkit-transition: right 0.4s ease-in-out;
        -moz-transition: right 0.4s ease-in-out;
        -ms-transition: right 0.4s ease-in-out;
        -o-transition: right 0.4s ease-in-out;
        transition: right 0.4s ease-in-out;
	}
	
	#wrapper.open-sidebar {right:200px;} #wrapper.open-sidebar #sidebar{display:block;}
	#sidebar-toggle {display:block;position:relative;text-align:right;width:35px;padding:28px 10px 0px 0px;float:right;}
	#sidebar-toggle .bar{
	    display: block;float:right;
	    width: 25px;
	    margin-bottom:4px;
	    height:3px;
	    background-color:#eee;
	}
	#sidebar-toggle .bar:last-child{margin-bottom: 0;}
	#sidebar {background:#444;width:200px;height:100%;right:0px;top:0;position:fixed;display:none;}
	#sidebar img{height:20px;margin:0px 8px -3px 0px;}
	#sidebar ul {margin:0;padding:0;list-style:none;text-align:left;}
	#sidebar ul li {margin:0;border-bottom: 1px solid #000;}
	#sidebar ul li a {
		padding:14px 0px 11px 30px;
	    font-size: 16px;font-weight:bold;
	    font-weight: 100;
	    color:#fff;
	    text-decoration: none;
	    display: block;	
	}
	#sidebar ul li:hover{background:#bbb;color:#fff;}
	#sidebar ul li.parrent{background:url(images/arrow2.gif) 180px center no-repeat;}
	#sidebar ul li ul li{border:none;}#sidebar ul li  ul li a {font-size:14px;padding:7px 0px 7px 45px;background:url(images/arrow2.gif) 30px center no-repeat;}
	.sidebarsub{background:#ecf0f1;}
	
	#desktop{display:none;}
	#container{width:100%;margin:0px;}	
	#container_wrap{width:90%;padding:20px 0px 0px 0px;}
	#container_wrap_title{font-size:26px;font-weight:bold;text-align:left;border-left:5px solid #2980b9;padding:0px 0px 0px 10px;margin:10px 0px 10px 2px;}
	
	.slider {margin: 0px 0px -380px 0px;}
	.slider .slides{height:300px;}
	.slider .slides li img{background-size:cover;background-position:top center;}
	.slider .indicators{bottom:380;}
	.slider .indicators .indicator-item{height:12px;width:12px;margin:0 5px;}
	.slider .slides li .caption{top:35%;left:10%;}
	.slider .slides a{padding:10px 15px;border-radius:5px;}
	
	.slider .slides h3{font-size:26px;margin:0px;line-height:30px;margin:0px;letter-spacing:-1px;}
	.slider .slides h4{font-size:16px;line-height:20px;margin-bottom:20px;letter-spacing:-1px;}
	
	
	#visi{margin-bottom:20px;}#visi span{font-size:28px;font-weight:bold;}#visi p{color:#7f8c8d;font-size:18px;text-align:center;margin:0px;padding:0px;line-height:28px;}
	
	#service {margin:0px 0px 0px 0px;width:100%;height:110px;border-radius:10px;}
	#service div{position:absolute;top:20%;left:24%;color:#fff;font-size:20px;width:200px;padding:15px 0px;}
	
	#card_mobile{width:100%;margin:0px 0px 0px 0px;padding:15px 0px;border-bottom:1px solid #95a5a6;}
	#card_mobile img {height:80px;width:80px;object-fit:cover;object-position:top center; margin:0px 15px 0px 0px;}
	#card_mobile div {font-size:14px;line-height:18px;padding:0px;margin:-2px 0px 0px 0px;font-weight:bold;}
	#card_mobile p{font-size:11px;padding:0px;margin:0px;color:#95a5a6;}
	
	#cover{padding:80px 0px 20px 0px;width:100%;}#cover div{color:#fff;font-size:30px;padding:10px 0px;width:200px;}
	#left{padding-right:0px;width:90%;}#right{position:relative;right:0px;top:0px;margin-top:0px;border-top:5px solid #ccc;padding-top:30px;}
	#left.isi{width:95%;margin:0px;border-right:none;}#right.isi{width:95%;}
	#left.isi img{width:100%;}
	#pengelola{text-align:center;}
	
	#button{padding:8px 0px;text-align:center;font-weight:bold;width:150px;font-size:12px;padding:10px 0px;border-radius:50px;text-align:center;}
	#button:hover{background:#00aef0;color:#fff;}
	#button.visi{margin-top:30px;}
	
	#footer{padding:15px 0px;color:#ccc;}
	#footer img{height:35px;width:auto;margin:5px 5px 0px 5px;}
	
	#toTop {left:44.6%;}
	
	#training td{padding:5px;line-height:16px;font-size:12px;}
	#training_mobile{border:1px solid #444;padding:15px;width:100%;margin:0px 0px 10px 0px;border-radius:5px;}
	#tombol{font-size:12px;margin:5px 0px;padding:5px 3px;
}