/* =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.8;

    filter: alpha(opacity=80);

}



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;

}



.bgbiru{

	

	background-color: #085ec1;

	background-repeat:repeat-x repeat-y;

	color: white;

	padding: 5px;

	

}



.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;



}