@charset "utf-8";
/* CSS Document */
body {
background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white, #CCCCCC); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, #CCCCCC); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, #CCCCCC); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, #CCCCCC); /* Standard syntax (must be last) */
margin:0;
padding:0;
width:100%;
min-height:40em;
}

header {
	background-color:#FFF;
	min-height:4.5em;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	top:0px;
	width:100%;
	position:fixed;
	font-size:16px;
	z-index:1;
	/* Enable flex mode. */
	display: flex; 
	/* Spread out the elements inside the header. */
	justify-content: space-between;
	/* Align items vertically in the center. */
	align-items: center;
}

.headerseparator {
height:4.5em;
width:100%;
display:block;	
}

.logo {
display:inline-block;
height:4em;
padding:0em;
margin:0em;
/*background-color:#FF0;*/
}

header ul {
    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
	display:inline-block;
	padding:0;
	margin:0;
	vertical-align:top;
	overflow:auto;
/*	background-color:#F00;*/
	}
header li {
	display:inline-block;
	border-right: 1px solid #CCCCCC;
}
header li:last-child {
	border-right: none;	
}

header li a, .dropbtn {
    display: inline-block;
    color: #000;
    text-align: center;
    text-decoration: none;
	padding:1em;
}

header li a:hover, .dropdown:hover .dropbtn {
    background: #CCC; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ccc, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ccc, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ccc, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ccc, white); /* Standard syntax */
	}

header li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: #000000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
	z-index:2;
}

.dropdown-content a:hover {
	background-color: #CCC
}

.dropdown:hover .dropdown-content {
    display: block;
}

.mySlides {
	display:none;
	width:100%;
}
	
.columtext {
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
color:#000;
display:inline-block;
min-width:18em;
max-width:31%;
vertical-align:top;
overflow:hidden;	
margin:0.5em;
}
	
	
.iconlist {
	display: inline-block;
	width:11.5em;
	height:11.5em;
	overflow: hidden;
	margin: 0.5em;
	padding: 0.5em;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 50px;
	font-family: Tahoma, Geneva, sans-serif;
	vertical-align:middle;
	background-color:#FFF;
	color:#000;
}	
.iconlist:hover {
	transform:scale(1.05,1.05);
}
.iconlist a {
	text-decoration:none;
	color:#000;
}	
.iconlist a:link {
	text-decoration:none;
}

.iconlist a:visited {
	text-decoration:none;
}
.iconlist a:hover {
	text-decoration:none;
	color:#333;
}
	
.mytitle {
font-size:2em;color:#000;
font-family:Tahoma, Geneva, sans-serif;
background: rgba(242,246,248,1);
background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0 );
}

.garisjudul {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
max-width: 80%;
margin-bottom:1em;
}

.garisjudul2 {
border-bottom: 1px dotted #333333;
margin-top:0.5em;
margin-bottom:1em;
max-width:40%;
}

.vismis {
width:49.5%;
height:16em; 
display:inline-block;
vertical-align:top;
margin:0;
}

.vismis2 {
width:33%;
height:19em; 
display:inline-block;
vertical-align:top;
margin:0;
}

.fasility {
max-width:54em;
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
min-height:30em;
padding-bottom:2em;
/*background: #9FF; /* For browsers that do not support gradients */
/*    background: -webkit-linear-gradient(#9ff, #9cf); /* For Safari 5.1 to 6.0 */
/*    background: -o-linear-gradient(#9ff, #9cf); /* For Opera 11.1 to 12.0 */
/*    background: -moz-linear-gradient(#9ff, #9cf); /* For Firefox 3.6 to 15 */
/*    background: linear-gradient(#9ff, #9cf); /* Standard syntax (must be last) */
}

.iconfasilitas {
	margin:0px;
	padding-right:1px;
	width:2em;
	float:left;
	height:2em;
}

footer {
	background-color: #036;
	font-family:sans-serif;
	color: #FFF;
	padding: 0em;
	margin: 0em;
	min-height:6em;
	max-height:10.5em;
	width:100%;
	vertical-align:bottom;
}

.mycontent {
min-height:40em;
display:block;
background-color:#FFF;
max-width:95%;
text-align:left;
margin-bottom:2em;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.navseparator {
height:4.5em;
display:block;
}

.isi {
margin-bottom:2em;
background-color:#fff;
padding:1.5em;


}

.isi2 {
margin-bottom:2em;
background-color:#eee;
padding:1.5em;

}

.listfasilitas {

list-style: none;
padding: 0;
font-size:1.5em;
font-family:Arial, Helvetica, sans-serif;
margin:1em;
}
.listfasilitas li {
  padding-left: 1.5em;
  text-align:left;
  margin:0.5em;;
}
.listfasilitas li:before {
  content: "\f138"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.5em; /* same as padding-left set on li */
  width: 1.5em; /* same as padding-left set on li */
  
}
	
.listlayanan {

padding: 0;
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
margin:0.5em;
}
.listlayanan li {
  list-style: none;
  padding-left:0em;
  text-align:left;
  margin-bottom:0.2em;
}
.listlayanan li:before {
  content: "\f138"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.5em; /* same as padding-left set on li */
  width: 1.5em; /* same as padding-left set on li */
}

.listlayanan2 {
padding: 0;
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
margin:0.5em;
}
.listlayanan2 ul.mainlist {
  list-style: decimal;
  padding-left:0em;
  text-align:left;
  margin-bottom:0.2em;
  text-transform:capitalize;
  margin:1em;
}

.listlayanan2 ul.sublist {
list-style:circle;
}

.address {
/*background-color:#0F0;*/
display:inline-block;
padding:1em;
min-height:4em;
min-width:45%;
vertical-align:top;
margin:0;
text-align:left;
font-size:14px;
}
.copyright {
/*background-color:#F00;*/
font-family:sans-serif;
display:inline-block;
padding:1em;
text-align:center;
min-width:45%;
vertical-align:top;
margin:0;
}

@media (max-width: 786px){
header{
/* Reverse the axis of the header, making it vertical. */
flex-direction: column;

font-size:11.5px;
}

.headerseparator {
height:5.5em;
width:100%;
display:block;	
}

.navseparator {
height:5.5em;
display:block;
}

.vismis {
height:auto; 
width:98%;
}

.vismis2 {
height:auto; 
width:98%;
}

}