/* =Font Query
----------------------------------------------------------------*/
@font-face {
    font-family: 'Altair-Bold';
    src: url('fonts/Altair-Bold/Altair-Bold.eot');
    src: url('fonts/Altair-Bold/Altair-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/Altair-Bold/Altair-Bold.woff') format('woff'),
         url('fonts/Altair-Bold/Altair-Bold.ttf') format('truetype'),
         url('fonts/Altair-Bold/Altair-Bold.svg#regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Altair-Thin';
    src: url('fonts/Altair-Thin/Altair-Thin.eot');
    src: url('fonts/Altair-Thin/Altair-Thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/Altair-Thin/Altair-Thin.woff') format('woff'),
         url('fonts/Altair-Thin/Altair-Thin.ttf') format('truetype'),
         url('fonts/Altair-Thin/Altair-Thin.svg#regular') format('svg');
    font-weight: bolder;
    font-style: bolder;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular/Roboto-Regular.eot');
    src: url('fonts/Roboto-Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular/Roboto-Regular.woff') format('woff'),
         url('fonts/Roboto-Regular/Roboto-Regular.ttf') format('truetype'),
         url('fonts/Roboto-Regular/Roboto-Regular.svg#regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*=standar 
==========================================*/
html { background: white none no-repeat left top; }
body { 	
	text-align: left; font: normal 170% "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif; 
	color:#000000;
	background-image:url(../images/background/seigaiha2.jpg);
	background-repeat:repeat-x repeat-y;
	
}

h1 { font: normal 270%/0.8  "Altair-Bold", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: center; }
h2 { font: normal 270%/0.8  "Altair-Thin", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: center; }
h3 { font: normal 150%/1.6785 "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: left;}
h4 { font: normal 210%/1 "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif; color:#0066b3;text-align: left; }
h5 { font: normal 150%/1.6785 "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: center;}
p  {
	text-align: left; font: normal 120% "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif;
	color:#000000;
	padding:0;
}

li{
	text-align: left; font: normal 120% "Roboto-Regular", Arial, Helvetica, Geneva, sans-serif;
}

img{
	padding:0;
	margin:0;
	vertical-align: middle; 
	display: inline-block;
	height: auto;
	max-width: 100%; 
}

.img-responsive {  display: block;  height: auto; margin: 0 auto; max-width: 100%; } 

hr{
	color: #666666;
	padding:0;
}

/*=link website 
==========================================*/

h5 a{ font: normal 100%/1 "Altair-Bold", Arial, Helvetica, Geneva, sans-serif; color:#0066b3; text-align: left;}

a { font: normal 100%/1 "Altair-Bold", Arial, Helvetica, Geneva, sans-serif; color: #0066b3; }

.footer .row a{ font: normal 120%/1 "Altair-Bold", Arial, Helvetica, Geneva, sans-serif; color:black; }


.active  a:link, a:hover{
	color: #0066b3 !important; text-decoration: none !important;
}
.active a { color: #0066b3 !important ; text-decoration: none !important; }

a,a:link {
	color: #403f40; 
	/*padding: 0 2% 0 2%  ;*/
}

#nomor a{
	color: #403f40; 
}

a img{
	display: inline-block; 
	padding:0;
	margin:0;
}

a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

a:active, a:hover, {
	color: #00974b !important; 
}


/*=class style
==========================================*/

.title_plan_thumbnail{
	font: normal 100%/1 "HelveticaNeue-Light", Arial, Helvetica, Geneva, sans-serif; color:black; !important
	text-align: left; 
	padding:0;
	margin: 0;

}
.colorblack a{color:black;}
.colorwhite {color:white;}

.red{color:red;}

.copyright {font: normal 70%/1 "HelveticaNeue-Light", Arial, Helvetica, Geneva, sans-serif; color:white; text-align:center; color:lightgray;}

.breadcrump{
	color:black;
}

.colorlightblue {color:#00a8e1;}


.inline{
	display:inline-block;
}

.kalender{
	background-color: #00974b; 
}

.kalender h1, .kalender h5{
	color: white !important; 
	text-align: center!important; 
}

/*=style home
==========================================*/

section.menu { 
    width: 100%;
	top: 0; 
	left: 0; 
	padding: 1% 1% 1% 1%;

}

section.banner { 
	padding-top:0;!important

	
}

	.banner .img-with-text{
	position: absolute; 
	bottom: 3%; 
	left:0; 
	width: 50%; 
	height: 35%;
	text-align:left;
	padding:2%;
	background-color:rgba(0, 0, 0, 0.8);
	font: normal 70%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:white; text-align: left;
	}


section.content {
	padding-top:0%;
	margin:0 2%;

}
section.content2 {
	margin:0 5%;
	padding-top:0%;


}

.bgwhite{
	
	background-color: white;
	background-repeat:repeat-x repeat-y;
	
}
.bgyellow{
	
	background-color: #ffe100;
	background-repeat:repeat-x repeat-y;
	
}

section.bggreen{
	
	background-color: #00974b;
	background-repeat:repeat-x repeat-y;
	
}

section.bglightgreen{
	
	background-color: #89c13d;
	background-repeat:repeat-x repeat-y;
	
}

.bgtransparent{
	background:rgba(255,255,255,0.5);
}

.background {
  background:  no-repeat 50% 50% ; 
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

.description{
	background-color: white; padding: 5%;
	width: 100%;

}

.paddingtext{
	padding-left: 5%;
}

.portarea{
	font: normal 200%/2.5 "Altair-Bold", Arial, Helvetica, Geneva, sans-serif; text-align: center;

}


/*=back to top button
==========================================*/
  a.back-to-top {
  display: none;
  width: 60px;
  height: 60px;
  text-indent: -9999px;
  position: fixed;
  z-index: 99999;
  right: 20px;
  bottom: 20px;
  background: gray url("../images/up-arrow.png") no-repeat center 43%;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  opacity: 0.6;


}
a:hover.back-to-top {
  background-color: #000;
}



/*drop down menu 
====================================*/	
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    padding: 8px 12px;
    z-index: 1;
}

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

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menunav li {
    float: left;
    padding: 8px 8px;

}

li {
    padding: 3px 3px;

}

li a, .dropbtn {
    display: inline-block;
    text-align: center;
    padding: 4px 8px;
    text-decoration: none;
}



	/*=4 IMAGE DI BAWAH SLIDESHOW UNTUK RUBAH TEXT TANPA RUBAH GAMBAR
	==========================================*/
	#featuredplan  {
	margin-right:0;
	display:inline-block; 
	margin:0 ;
	position: relative;
	top: 0; 
	left: 0; 
	}
	
	#fullwidth a
	{
		width:100%;
		margin:0 ;
		padding:0;
	}
	
	h6 {
	   font: normal 150%/1.25 "HelveticaNeue", Arial, Helvetica, Geneva, sans-serif; color:white; text-align: center; 
	   position: absolute;
	   width: 80%;
	   margin-top: auto;
	   margin-bottom: auto;
	   text-align:center;
	   top: 50%;
	   font-weight: 500;
	   transform: translate(0, -50%);
	}
	


/*=style align
==========================================*/
.alignleft{
text-align:left!important;
}

.aligncenter{
text-align:center!important;
}





/*=Form Styling
==========================================*/

form label, form input, form textarea {
	display: inline-block;
	
}

form input {
	width : 250px;
}

.tablepadding{
border-collapse: separate; border-spacing: 20px; 
}

.combosearch  {
  width: 70%;
}

form input, form textarea {
	min-height: 27px;
	color:#000000; !important
}

button {
	margin-top: 20px;
}


.combofix  {
  width: 20%;
}
.isiform{
	margin:0 10% 0 30%;
	padding:auto;
}
;
	

/* button*/
.buttonstyle:after {
    content: " \00bb";
    }
		
.buttonstyle:hover {
    background-image: none !important;
	 background-color:#00a8e1;
    }
	

.buttonstyle2 {
	color:#015196;
 	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	border:1px solid #015196;
    background-image: none !important;
	 background-color:white;

	padding: 0.35em 1.5em;
    }	
	
.buttonstyle2:after {
    content: " \00bb";
    }
		
.buttonstyle2:hover {
    background-image: none !important;
	 background-color:#00a8e1;
    }


.buttonstyle3{ 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-image: none !important;
	background-color:#00974b;
	color:white;
	padding: 2% 3%;

}

/*================================================Custom CSS===================================================================*/

.search_box_custom
{
    background-image: url(../images/search_icon.png)!important;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 195px;
}
.search_box_custom:focus
{ 
    background-image: none!important; 
}

.menu_custom
{
    margin-left: 0px;
}

.menu_custom a
{
    margin-left: 0px;
    cursor: pointer;
}

.submenu_custom
{
    display: none;
}

.menu_custom, .submenu_custom
{
    list-style-type: none;
}

.current_page_custom
{
    color: #00A8E1 !important;
}





.menu-btn div {
 position: absolute;
 left: 100%;
 top: 64%;
 padding-right: 8px;
 margin-top: -0.50em;
 line-height: 1.2;
 font-size: 18px;
 font-weight: 200;
 vertical-align: middle;
 z-index: 99;
}
 
.menu-btn span {
 display: block;
 width: 19px;
 height: 3px;
 margin: 4px 0;
 background: rgb(0,0,0);
 z-index: 99;
}
 
.responsive-menu{
 display: none;
}
 
.expand {
 display: block !important; 
}
 
.open-menu-link{
 display: none;
 position: absolute;
 right: 15px;
 top:0;
 line-height: 55px;
 font-size: 30px;
 cursor: pointer;
}
 
li .sub-menu{
 display: none;
}
 
.visible {
 display: block !important;
}






/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
 	width : 320px;
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
	width : 480px;

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
 	width : 320px;
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
	width : 768px;
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
	width : 1024px;
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
	width : 768px;
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	width : 1024px;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	width : 768px;
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	width : 480px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	width : 320px;
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 568px;

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 320px;
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 667px;

}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 375px;
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 736px;

}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 414px;

}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 640px;
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	width : 320px;

}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
	width : 640px;
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
	width : 320px;

}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
	width : 640px;

}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
	width : 360px;

}