@import url(//fonts.googleapis.com/css2?family=Mulish:wght@200;700&display=swap);

html, body{font-family: 'Mulish', sans-serif;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;}
h6{padding:0px;margin:0px 0px 15px 0px;color:#000;font-weight:bold;font-size: 20px;}
form{border: 1px solid #ccc;border-radius: 5px;padding: 40px;text-align: left;margin: 20px 0px;}
input,text,textarea{padding: 15px;font-size: 16px;border-radius: 5px;margin: 0px 0px 30px 0px;width: 100%;}
#submit_donasi{cursor: pointer;color:#fff;background: #5cc2c8;text-align: center;border: none;font-size: 18px;margin:0px;}#submit_barang:hover{background:#004d1a;}
#notif{color:#fff;text-align: center;border: none;font-size: 18px;margin:20px 0px;padding: 10px 0px;border-radius: 5px;}

#top_panel{background:none;width:100%;text-align:center;padding:0px;position:fixed;z-index:9999;border: none;}
#top_panel.show{border-bottom:1px solid #ccc;background:#fff;}
.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:#000;font-size:18px;padding:35px 15px 40px 15px;margin:0px;font-weight:bold;}
.header_menu a:hover{color:#00559e;}
.header_menu > ul > li:hover,li.active > a{color:#00559e;}
.header_menu > ul > li > a.donasi{color:#fff;background: #5cc2c8;padding:15px 20px;border-radius: 50px;margin-left: 20px;}
.header_menu > ul > li > a.donasi:hover{background: #065ba2;}
.header_menu li:hover .dropdown{display: block; margin:0;opacity: 1;visibility: visible;}
.parent{position: relative;}
.dropdown {
	position:absolute;
    list-style:none;
    visibility: hidden;
    text-align:left;
	padding:0px;
    background:#0098d1;
	z-index:9999;
}
.dropdown li{display: block;}
.dropdown a {
    display: block;
    padding: 10px 0px 10px 15px;
    color:#fff;font-size:16px;
}
.dropdown li:hover a{text-decoration: none;background:#0379a6;}

#logo{position:absolute;top:20px;}#logo img{width:auto;height:50px;}

#container{width:100%;margin:0px auto;padding:0px auto;background:#fff;}
#container_wrap{width:1200px;padding:60px 0px;position:relative;}
#container_wrap_title{font-size:36px;font-weight: bold;color:#3491df;}

#cover_utama{padding-top: 120px;}
#cover_title{font-size: 42px;font-weight: bold;color:#000000;}
#cover_sub-title{font-size: 20px;font-weight: bold;color:#8a8a8a;margin:25px 0px;}
#cover_utama img{height:400px;width: auto;}
@keyframes cover {
    0% {transform: scale(0.0);}
    100% {height: 400px;width: auto;}
}
#cover_button{border-radius: 30px;background-image: linear-gradient(to bottom right, #0dc873, #5cc2c8);color: #fff;font-weight: bold;font-size: 20px;padding:10px 0px;text-align: center;width: 150px;}
#cover_button:hover{background: #047a19;}

#service{width:300px;height:600px;margin:0px 25px;text-align:left;background:#fff;border-radius:5px;border:1px solid #ccc;padding: 30px 25px;}
#service_title{font-size:30px;color:#065ba2;font-weight: bold;}
#service_desk{font-size:18px;color:#444;margin: 25px 0px;line-height: 26px;}
#service_tombol{border-radius: 30px;background: #5cc2c8;color: #fff;font-weight: bold;font-size: 18px;padding:10px 0px;text-align: center;}
#service_tombol:hover{background: #065ba2;}

.slider2{width: 1100px;height:600px;}
.slider2-isi{background:#f1f7f9;border:1px solid #ccc;width:100%;margin:0px 8px;padding: 0px 10px 0px 10px;border-radius:5px;text-align:left;height:auto;}
.slider2-isi img{object-fit:cover;object-position:top center;height:250px;width:250px;margin:20px 0px 20px 0px;border-radius:50%;}
.slider2 a{border-radius: 20px;background: #5cc2c8;color: #fff;font-weight: bold;font-size: 16px;padding:10px 50px;text-align: center;width: 100%;}
.slider2 a:hover{background: #065ba2;}
#join{background:#e38a0b ;width: 280px;border-radius: 50px;color: #fff;padding: 15px 0px;font-size: 20px;font-weight: bold;}
#join:hover{background: #b36201 ;}

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

#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;}


#toTop {
	background:none;
  position: fixed;
  bottom:20px;
  right:20px;
	cursor:pointer;
	z-index: 9999;
}
#toTop:hover{opacity: 0.5;}
#toTop:hover #arrow{border:2px solid #fff;border-left:none;border-bottom:none;}
#arrow{
	width:10px;height:10px;
	border:2px solid #00559e;border-left:none;border-bottom:none;
	transform: rotate(315deg);margin:16px 0px 0px 0px;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin:10px 0px 0px 0px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

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

@media only screen and (max-width: 1000px) {
	#desktop{display:none;}
	#top_panel{height:70px;border-bottom:1px solid #ccc;background: #fff;}
	.top_wrap{background:none;width:95%;position:relative;padding:0px;} .header_menu{display:none;}
	.top_wrap a{color:#000;background: #ff884d;padding:12px 20px;border-radius: 10px;position: absolute;right: 0px;top: 17px;font-weight: bold;font-size: 16px;}
	#logo{top:10px;left:0px;}#logo img{width:auto;height:45px;}

	
	#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:20px 20px 0px 0px;float:right;}
	#sidebar-toggle .bar{
	  display: block;float:right;
	  width: 25px;
	  margin-bottom:4px;
	  height:3px;
	  background-color:#000;
	}
	#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;}

	#cover_utama{padding:70px 20px 0px 25px;height:260px;text-align: left;}
	#cover_title{font-size: 26px;margin: 30px 0px 0px 0px;}
	#cover_sub-title{font-size: 16px;font-weight: bold;color:8a8a8a;margin:20px 0px;}
	#cover_button{border-radius: 30px;background: #0dc873;color: #fff;font-weight: bold;font-size: 16px;padding:8px 0px;text-align: center;width: 130px;}
	#cover_button:hover{background: #047a19;}
	
	#container_wrap{width:90%;padding:20px 0px;}
	#container_wrap_title{font-size:24px;text-align: left;margin: 0px 0px 20px 0px;}

	.slider1 {
    width: 100%;
    margin: 0px auto;
    background: none;
    padding:0px;
  }
  .slider1 a{border-radius: 20px;background: #5cc2c8;color: #fff;font-weight: bold;font-size: 16px;padding:7px 35px 10px 30px;text-align: center;width: 100%;}
	.slider1 a:hover{background: #065ba2;}

	.slider3{width: 100%;height:250px;}
	.slider3-isi{background:#f1f7f9;border:1px solid #ccc;width:100%;margin:0px 8px;padding: 0px 0px 0px 0px;border-radius:5px;text-align:left;height:auto;}
	.slider3-isi img{object-fit:cover;object-position:top center;height:60px;width:60px;margin:15px 0px 0px 0px;border-radius:50%;border: 1px solid #eee;}
	.slider3 a{border-radius: 20px;background: #5cc2c8;color:#fff;font-weight: bold;font-size: 14px;padding:7px 30px;text-align: center;width:100px;}
	.slider3 a:hover{background: #065ba2;}
	#join{width: 220px;padding: 10px 0px;font-size: 16px;margin: 0px 0px 20px 0px;}
	
	#footer{padding:15px 0px;color:#000;}
	#footer img{height:25px;width:auto;margin:0px 0px 0px 5px;}

	#toTop{right:10px;bottom:10px; }
	#toTop img{width: 55px;height: auto;}

}