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

@font-face {
    font-family: 'Lato-Regular';
    src: url('fonts/Lato-Regular/Lato-Regular.eot');
    src: url('fonts/Lato-Regular/Lato-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lato-Regular/Lato-Regular.woff') format('woff'),
         url('fonts/Lato-Regular/Lato-Regular.ttf') format('truetype'),
         url('fonts/Lato-Regular/Lato-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% "Lato-Regular", Arial, Helvetica, Geneva, sans-serif; 
	color:#000000;	
}

h1 { font: normal 400%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:#00974b; text-align: left; }
h2 { font: normal 275%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: left;}
h3 { font: normal 150%/1.6785 "Lato-Regular", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: left;}
h4 { font: normal 210%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:#00974b; }
h5 { font: normal 150%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: left;}
p  {
	text-align: left; font: normal 120% "Lato-Regular", Arial, Helvetica, Geneva, sans-serif;
	color:#000000;
	padding:0;
}

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 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:black; text-align: left;}

a { font: normal 140%/1 "BebasNeue", Arial, Helvetica, Geneva, sans-serif; color:#00974b; }

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


.active  a:link, a:hover{
	color: #00974b !important; text-decoration: none !important;
}
.active a { color: #00974b !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
==========================================*/


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

.red{color:red;}

.copyright {font: normal 70%/1 "Lato-Regular", Arial, Helvetica, Geneva, sans-serif; text-align:center; color:black;}

.breadcrump{
	color:black;
}

.inline{
	display:inline-block;
}

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

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

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

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

}

#menu li{ width: 100%; text-align:left!important; }

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


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


}

section.bgwhite{
	
	background-color: white;
	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%;

}


/*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;
}

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

}

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


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


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

button {
	margin-top: 20px;
}




/* button*/

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

}

.buttonstyle3:after {
    content: " \00bb";
    }
		
.buttonstyle3:hover {
    background-image: none !important;
	 background-color:#89c13d;
    }


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

}