@charset "utf-8";
/* CSS Document */

/* Daftar layanan */
.one-fourth ul{list-style:disc;}
.one-fourth li{font-weight:bold;}
.one-fourth .t{text-align:center;}
footer small{font-size:11px;}
.one-fourth img{display:block;margin-bottom:0;}
*{
	margin:0;
	padding:0;
	border:0;
}

body {
	background:#0192D1;
	color:#000;
	font-family: "Alegreya", sans-serif;
	margin:0;
}
h2 {
	font-size:250%;
	font-weight:700;
	text-align:center;
	padding-top:2px;
	color:#003399;
}
h3 {
	font-size:120%;
	line-height:155%;
	font-weight:400;
	padding:1% 0;
}
p {
	font-family: "Alegreya", sans-serif;
	color:#F5F5F5;
	font-size:160%;
	line-height:150%;
	padding:3%;
	text-indent:2%;
	text-align:justify;
}
img {
	max-width:100%;
	height:auto;
	width:auto;
	margin-bottom:-4px;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

header {
	background-color:#003399;
	width:100%;
	height:100px;
	position:fixed;
	margin-bottom:93px;
}
#header-inner {
	max-width:1200px;
	margin:0 auto;	
}
#logo {
	margin:20px;
	float:left;
	width:320px;
	height:83px;
	background:url(img/title.png) no-repeat center;
}
#line {
	background:#66CCFF;
	width:100%;
	height:10px;
	box-shadow: 0px 3px 3px #666;
}
#line2 {
	background:#CCFFCC;
	width:100%;
	height:4px;
	box-shadow: 0px 3px 3px #666;
}

/* Start Navigation */
nav{
	float:right;
	padding:25px 20px 0 0;	
}
#menu-icon {
	display:none;
	width:40px;
	height:40px;
	background:url(img/nav.png) center;
	margin-top:-15px;
}
a:hover #menu-icon {
	border-radius: 4px 4px 0 0;
}
ul{
	list-style-type:none;
}
nav ul li{
	font-family: "Alegreya sans", sans-serif;
	font-size:100%;
	display:inline-block;
	float:left;
	padding:10px;
	margin-top:15px;
}
nav ul li a {
	float: left;
	display: block;
	height: 40px;
	width: 65px;
	margin: 0px;
	margin-top: 0px;
	padding: 10px 0px 0 10px;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
	color: #FFF;	
	font-weight: bold;
	outline: none;
}
nav ul li a:hover {
	color:#0FF;
}
.current{
	color:#C3D7DF;
}
/*----- End Navigation ------*/

/* slide fade effect */

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  z-index:-1000;
  margin-top:93px;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 20s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: .99}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: .99}
}

/* slide fade effect end */

.services {
	background:#CCFFCC;
	height:5%;
	margin-top:15px;
}
.one-fourth{
	width:25%;
	height:350px;
	float:left;
	text-align:left;
	padding-left:10px;
}
#tr{
	background:#9FF;
	color:#000;
}
#ta{
	background:#CFF;
	color:#000;
}
#pm{
	background:#FFF;
	color:#000;
}
#ct{
	background:#FCF;
	color:#000;
}

.one-third{
	width:33.333333%;
	height:340px;
	float:left;
	text-align:center;
}
#pd{
	background-color:#CFF;
	color:#000;
}
#ld{
	background-color:#FCF;
	color:#000;
}
#cd{
	background-color:#9FF;
	color:#000;
}
#per{
	background-color:#FFF;
	color:#000;
}

/*----- End Services ------*/

footer{
	background-color:#003399;
	width:100%;
	text-align:center;
	color:#FFF;
	padding-bottom:5px;
}
footer a{
	color:#FFF;
	text-decoration:none;
}
footer a:hover{
	color:#3FF;
}
footer ul li{
	font-family: "Alegreya sans", sans-serif;
	font-size:100%;
	display:inline-block;
	padding:5px;
	margin-top:0px;
}
footer ul li a {
	float:none;
	display: block;
	height: 20px;
	width: 60px;
	padding: 5px 0px 0 5px;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
	color: #FFF;	
	font-weight: bold;
	outline: none;
}
footer ul li a:hover {
	color:#0FF;
}



/*------------MEDIA!!!--------------*/
@media screen and (max-width:768px) {
	h2 {
		font-size:150%;
	}
	h3 {
		font-size:125%;
	}
	p {
		font-size:120%;
	}
	header {
		position:absolute;
	}
	#logo {
	margin:15px 0 20px -25px;
	width:65%;
	background:url(img/title%20_%20mobo.png) no-repeat;
	}
	#menu-icon {
		display:inline-block;
	}
	nav ul, nav:active ul {
		display:none;
		z-index:1000;
		position:absolute;
		padding:10px;
		background:#6991AC;
		right:20px;
		top:60px;
		border:1px solid #FFF;
		border-radius:15px 0 15px 15px;
		width:35%;
		margin-top:-30px;
	}
	nav:hover ul {
		display:block;
	}
	nav li {
		text-align:center;
		width:100%;
		padding: 10px;
	}
	#line {
		width:100%;
	}
	#line2 {
		width:100%;
	}
	.slideshow-container {
		margin-top:15px;
		padding-top: 86px;
	}
	.one-fourth {
		float:left;
		width:100%;
		height:auto;
	}
	.one-fourth i {
		font-size:350%;
		padding:4% 0 1% 0;
	}
	.one-third {
		float:left;
		width:100%;
		height:auto;
	}
	article{
		width:100%;
	}
	aside {
		width:100%;
	}
	.hand-mobile {
		display:none;
	}
	.one-third{
		width:100%;
	}
	.social i {
		font-size:180%;
	}
}