/* FONT */

@font-face {
    font-family: 'lato';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lato_bold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lato_bolditalic';
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lato_italic';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}



body, html{
margin:0;padding:0;
font-family:'lato', calibri, san-serif;
font-size:14px;line-height:22px;color:#666;
min-height:100%;
height:100%;background:#fff;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* 
blue:#333399
red:#f00
grey:#666
footer1:#dd0404 
footer2: #bf0303
*/


/* GENERAL */
.mbot50{
 margin-bottom: 50px;;
}
.clearfix{
 clear: both;
}



.wrapall{min-height:100%;margin-bottom:-40px;}

.footer{position:fixed;bottom:0;left:0;right:0;z-index:120;height:30px;background:transparent;font-size:10px;padding:10px 20px 0 20px;color:#ccc;}
.footer p{margin:0;padding:0;}
	.join{float:left;}
	.join .join-text{display:inline-table;color:#ccc;font-style:italic;vertical-align: top;}
	.join ul{margin:0;padding:0;display:inline-table;}
	.join ul li{float:left;list-style:none;background:#666;width: 20px;height: 20px;   border-radius: 20px;   padding: 0;   text-align: center;margin-right: 2px;}
	.join ul li:hover{background:#2E3092;}
	.join ul li  a .fa{color:#fff;font-size:12px;padding-top:5px;}
	
	.copy{float:right;line-height:14px;text-align:right;font-size}

	
	
.top-header{float:right;text-align:right;font-size:10px;margin:0;padding:0;margin-top:5px;margin-right:20px;}	
.top-header ul{margin: 0; padding: 0;}	
.top-header li{float:left;list-style:none;margin: 0 15px;}	
.top-header li a{color:#009;text-decoration: none;line-height:20px;}	
.top-header li a:hover{color:#f00;}	
.top-header .bhs a{background:transparent;padding:2px 5px;}	
.top-header .bhs a.active{background:#009;color:#fff;}	
	
/* NAVBAR */
.navbar{
width:100%;
display:block;
background:#fff;
position:fixed;
top:0;
left:0;
right:0;
z-index:900;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
height: 80px;
-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: -moz-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
/* position:fixed;
top:0;left:0;right:0;z-index:999; */
}
.navbar.hidden {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.navbar-header {
float: left;
width:20%;
}
.navbar-collapse {
width:80%;
float:right;
}



.navbar-brand {
padding: 0!important;
display: block;
width: 325px;
height: 65px;
background: url(../images/logo.png) no-repeat left top;
margin-top: 15px;
}
.cl-toggle {
	display: none;
	padding: 7px 8px;
	text-align: right;
	cursor: pointer;
	margin-right: 20px;
	border-radius: 3px;
	font-size: 20px;
}

.navbar-nav {
float: right;
margin: 0;
margin-top: 19px;
display:block;
}
.navbar-nav > li {
float: left;
list-style:none;
position:relative;


display:block;
}
.navbar-nav > li > a {
text-decoration:none;
background:#fff;
color:#666;
padding:10px 20px;
border-bottom: 4px solid transparent;
font-family:'lato_bold', calibri, san-serif;
}
.navbar-nav > li.active > a{
color:#f00;
border-color: #f00;
}
.navbar-nav > li > a:hover {
color:#f00;
border-color: #f00;
}
.navbar-nav > li:hover >ul{
display:block;
}
.navbar-nav > li:hover >a{
border-color: #f00;
}


.navbar-nav > li > ul{
margin:0;
padding:0;
position:absolute;
top:41px;
left:0;
min-width: 500px;
display:none;
}
.navbar-nav > li > ul > li{
float: left;
list-style:none;
display: block;
background:#bbbcbf;
padding:5px 0px;
font-size:12px;

}
.navbar-nav > li > ul > li > a{
color:#666666;
text-decoration:none;
border-right:1px solid #666;
padding:0 10px;
}
.navbar-nav > li > ul > li:last-child > a{

border-right:none;
}
.navbar-nav > li > ul > li > a:hover{
color:#fff;
text-decoration:none;
}




/* BANNER */
.banner{position:absolute;top:0;left:0;}
.slides-pagination {
  bottom: 60px;
}
.slides-pagination a{
  border: none;
  background: rgba(255, 255, 255, 0.6);;
}
.slides-pagination a.current {
  background: #fff;
}


/* =================
CYCLE 
====================*/
/* cycle */
/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 100%; min-width: 140px; max-width: 1920px; margin: 0 auto; padding: 0; position: relative;margin-top:80px;
   /*  background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; */

 }
 .cycle-slideshow:before{position: absolute; z-index: 101; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(46, 48, 146, 0.2);}

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;background-image:cover;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 30px; width: 16px; height: 16px; 
    display: inline-block;  color: #ccc; /**/ cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #f00;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  /* background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat; */}
.cycle-next { right: 0; /* background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat; */}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}


/* CONTENT */
.pos-relative{
position:relative;  
}
.text-center{text-align:center;}


.subnav{text-align:center;margin-top: 40px;}
.subnav a{font-size:14px;text-align:left;font-family:'lato_bold', calibri, san-serif;color:#285eac;text-decoration:none;border-right:1px solid #285eac;padding:0 10px;}
.subnav a:last-child{border-right:none;}
.subnav a:hover, .subnav a.active{color:#f00;}

.subnav-top{position:absolute;top:120px;width: 58%;text-align:center}
.subnav-top a{color:#fff;border-right:1px solid #fff;display: inline-block;}
.subnav-bottom{position:absolute;bottom:40px;width:80%;text-align:center}
.subnav-bottom a{color:#fff;border-right:1px solid #fff;}


.section-home{margin:0;padding:0}
.section{}
.section2{
	margin: -15px 0 0 0;padding:0;  
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	box-shadow: inset 0px 10px 10px rgba(0,0,0,0.3);
	position:relative;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
 }
.section3{
	margin: 0 0 0 0;
	padding:0;  
	background-attachment: fixed;
	box-shadow: inset 0px 10px 10px rgba(0,0,0,0.3);
	position:relative;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
 }

.content-home{position:absolute;top:290px;left:20px;width:305px;z-index:102;text-align:left;color:#fff;}
	.list-thumb{margin:0;padding:0;}
	.list-thumb li{margin:0 0 2px 0;padding:0;list-style:none;background:#000;height:96px;overflow:hidden;}
	.list-thumb li a img{width:100%;opacity: .3; filter: alpha(opacity=30);transition: all .7s ease;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;}
	.list-thumb li a:hover img{width:100%;opacity: 1; filter: alpha(opacity=100);}
.content-home h1{font-size:28px;font-family:'lato_bolditalic', calibri, san-serif;text-shadow: 0 1px 0 #000;margin: 10px 0 20px 0;padding:0;line-height:28px}
.content-home h5{text-shadow: 0 1px 0 #000;margin:0 0 10px 0;padding:0;}

.container{max-width:1170px;margin:0 auto; position: relative;}


/* ABOUT */
.about{position:relative;}
.c-about-img{height: 300px;}
.c-about{padding-top: 20px;width:90%;margin:0 auto;color:#285eac;position:relative;}
.c-about .item{display:none;}
.c-about .item:first-child{display:block;}

.c-about .lead{  margin: 0px 0 40px 0;font-size:45px;font-family:'lato_bold', calibri, san-serif;color:#285eac;line-height: 32px;}
.c-about .lead small{font-size:18px;text-align:left;font-family:'lato', calibri, san-serif;  margin-left: -150px;}
p.lead2{font-size:18px;line-height:24px;}
p.lead2 b{font-size:30px; font-family: 'lato_bold', calibri, san-serif;}

.quotes-title{
	padding: 10px 10px;
	text-align: center;
	font-size: 20px;
	background-color: #BCBDC0;
	color: #333;
	border-top: 2px solid #f00;
	border-bottom: 2px solid #f00;
	font-family: 'lato_bold', calibri, san-serif;
	text-transform:uppercase;
}
.quotes{
	color:#fff;
	padding: 10px 10px;
}
.text-left{text-align:left}
.row{}
.row:after{clear: both; display: inline-table;}
.box4{width: 33.3333%; float: left; padding: 0 15px;}
.box-vision{
	background:#2E3092;
	min-height: 220px;
	margin-bottom:10px;
}



/* SERVICES */
.services{color:#fff; position: relative; min-height: 100%;}
.services:before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(46, 48, 146, 0.4);}
.c-services{padding-top:150px;}
.c-services .lead{  margin: 0px 0 40px 0;font-size:45px;font-family:'lato_bold', calibri, san-serif;color:#fff;line-height: 25px;display:inline-table;}
.blok-content{display:inline-table;width:60%;margin-left:30px;}
.c-services .lead small{font-size:18px;text-align:left;font-family:'lato', calibri, san-serif;}
.list-services{

}
.list-services .item{
	border:1px solid #ccc;
	background:rgba(0,0,0,0.7);
	margin:2px 0;
	padding:0 10px 0px 10px;
}
.list-services .item h3{
	display:block;
	margin:2px 0;
	padding:5px 0;
	cursor:pointer;
}
.list-services .item h3:hover{
	color:#f00;
}
/*.list-services .item h3:after{
	content:'+';
	float:right;
}
.list-services .item h3.active:after{
	content:'-';
	float:right;
}*/
.list-services .item .body-item{
	display:none;
	margin-bottom:10px;
}


/* FLEETS */
.fleets{color:#fff; position: relative;}
.fleets:before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(46, 48, 146, 0.2);}
.c-fleets{padding-top:150px;text-align:right}
.c-fleets .lead{  margin: 0px 0 40px 0;font-size:45px;font-family:'lato_bold', calibri, san-serif;color:#fff;line-height: 25px;display:inline-table;}
.c-fleets  .lead small{font-size:18px;text-align:left;font-family:'lato', calibri, san-serif;}
.fleets-list{}
.fleets-list .fleets-item{display:none;}
.fleets-list .fleets-item:first-child{display:block;}
.fleetbg{display:none;}


/* NEWS-EVENTS */
.news-event{min-height: 100%; position: relative;}
.news-event:before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(46, 48, 146, .3);}
.c-news-event{
padding-top:150px;
text-align:left;
padding-bottom:150px;
}
.c-news-event .lead {
  margin: 0px 0 40px 0;
  font-size: 45px;
  font-family: 'lato_bold', calibri, san-serif;
  color: #fff;
  line-height: 25px;
  display: inline-table;
}
.c-news-event .lead2 {
  /* text-shadow: 0 1px 0 #000; */
  color: #fff;
}
.c-news-event .lead small{font-size:18px;text-align:left;font-family:'lato', calibri, san-serif;}
.c-news-event .item{
	width:24%;
	display:inline-table;
	position:relative;
	background:#fff;
	margin:0 0 20px 0;
	padding:0;
	max-height: 100px;
	overflow: hidden;
}
.c-news-event .item:hover{
	background:#f4f4f4;
}
.c-news-event .item .type{
	position:absolute;
	top:0;
	right:0;
	background:#666;
	color:#fff;
	padding:2px 10px;
	font-size:12px;
}
.c-news-event .item .type.events{
	background:#f00;
}
.c-news-event .item .img img{
	max-width: 100%;
}
.c-news-event .item .item-body{
	padding: 10px 20px;
	font-size:14px;
	border: 1px solid #F4F4F4;
	margin-top: -10px;
	max-height: 250px;
	min-height: 250px;
	overflow: hidden;
}
.c-news-event .item .item-body a{
	color:#666;
	text-decoration:none;
}
.c-news-event .item .item-body a:hover{
	color:#2E3092;
}
.c-news-event .item .date{
	margin:0;
	padding:0;
	font-style:italic;
	font-size:11px;
}
.c-news-event .item h3{
	margin:0;
	padding:0;
}



.see-all{
	text-align:center;
	margin-top:30px;
}
.see-all a{
	color:#666;
	padding:10px 20px;
	text-decoration:none;
	background:#fff;
}
.see-all a:hover{
	color:#fff;
	background:#009;
}

.paginasi{
	text-align:center;
	margin-top:30px;
}
.paginasi a{
	color:#666;
	padding:10px 20px;
	text-decoration:none;
	background:#fff;
	border:1px solid #F4F4F4;
}
.paginasi a:hover, .paginasi a.active{
	color:#fff;
	background:#009;
}
.news-event-detail .item{
	width: 49%;
}
.news-event-detail .container {
  max-width: 800px;
  margin: 0 auto;
}
.news-event-detail .himg img{
	max-width:100%;
}
.news-event-detail .date{
	margin:0;
	padding:0;
	font-style:italic;
	font-size:11px;
}
.news-event-detail h3{
	margin:0;
	padding:0;
}
.news-event-detail a{
	color:#2E3092;
	text-decoration:none;
}
.news-event-detail a:hover{
	text-decoration:underline;
}





/* CONTACT */
.c-contact, .c-join{
padding-top:150px;
text-align:left;
padding-bottom:20px;
}
.c-contact.bot, .c-join.bot{
padding-bottom:100px;
}
.c-contact .lead , .c-join .lead{
  margin: 0px 0 0px 0;
  font-size: 35px;
  font-family: 'lato_bold', calibri, san-serif;
  color: #2E3092;
  line-height: 25px;
  display: inline-table;
}
.c-contact .lead small, .c-join .lead small{font-size:18px;text-align:left;font-family:'lato', calibri, san-serif;}

.maps-wraper{
	position:relative;
}
.maps{
	width:100%;
	height:350px;
	display:block;
	background:#ccc;
}
#cd-zoom-in,
#cd-zoom-out {
  height: 32px;
  width: 32px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba(102, 102, 102, 0.9);
  background-repeat: no-repeat;
  background-size: 32px 64px;
  background-image: url("../images/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover,
.no-touch #cd-zoom-out:hover {
  background-color: #666;
}
#cd-zoom-in {
  background-position: 50% 0;
  margin-top: 10px;
  margin-bottom: 1px;
}
#cd-zoom-out {
  background-position: 50% -32px;
}

.p5{
	padding:5px;
}
.address{
	padding:0 0 0 30px;
	font-size:16px;
	line-height:28px;
}
.address h2{
	color:#2E3092;
	font-size:24px;
	line-height:28px;
}
.address a{
	color:#f00;
	text-decoration:none;
}
.address a:hover{
	text-decoration:underline;
}
select.form-control {
	height: 40px;
	width: 100%;
	color:#666
}
textarea.form-control {
  height: auto;
}
.form-control {
  display: block;
  width: 96%;
  height: 24px;
	padding: 6px 2%; /*  */
  font-size: 12px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
border: 1px solid #ccc;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.btn-primary {
	color: #009;
	background-color: transparent;
	padding: 6px 30px;
	border: 1px solid #009;
	cursor: pointer;
}
.btn-primary:hover {
	color: #fff;
	background-color: #009;
}




.col3{
	width:30%;
	float:left;
}
.col3b{
	width:33.333333%;
	float:left;
}
.col4{
	width:40%;
	float:left;
}
.col5{
	width:50%;
	float:left;
}
.col6{
	width:60%;
	float:left;
}
.col7{
	width:70%;
	float:left;
}
.col10{
	width:100%;
	float:left;
}




/* BLOG */
.header-dalam{
	background-color: #2E3092;
	color: #fff;
	margin-top: 0px;
	padding-top: 100px;
	border: 0;
	height:220px;
}
.header-dalam .title{
	color: #fff;
	text-align:center;
	font-size: 45px;
	font-family: 'lato_bold', calibri, san-serif;
	color: #fff;
	margin-top: 5%;
}
.separator_wrapper{
	text-align:center;
	margin-top:40px;
}
.separator_wrapper::after, .separator_wrapper::before {
  background-color: #f00;
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 80px;
  height: 4px;
  margin-top: -15px;
  margin-right: -4px;
  margin-left: -4px;
}









/* BACK TOP */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 172, 0.8) url('../images/cd-top-arrow.svg') no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #0000ac;
  opacity: 1;
}














@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
}
@media (min-width: 1200px) {
  
}

@media (max-width: 1024px) {
	.container {
	max-width: 960px;
	margin: 0 auto;
	padding:0 20px;
	}
	.subnav-top {
		width: 60%;
	}
	.navbar-nav > li > a {
		padding: 10px 12px;
	}
}
@media (max-width: 768px) {
	.navbar-brand {
	width: 100px;
	}
	.cl-toggle {
	display: inline-block;
	float: right;
	margin-top: 20px;
	}
.navbar-collapse {
  width: 100%;
  float: left;
  margin-top: -20px;
}
	.navbar-nav {
  display: none;
  width: 100%;
}
.navbar-nav > li {
  float: none;
  list-style: none;
  position: relative;
  display: block;
}
  .c-news-event .item{
	width:49%;
  }
  .navbar-nav > li > a {
  display: block;
}
.col4, .col6  {
  width: 100%;
  float: left;
}

.box-vision{
	width:100%;
	margin-right:0;
}
.blok-content{display:inline-table;width:100%;margin-left:0;}
  
	.box4{
		width: 100%;
	}
	.c-fleets {
		padding-top: 230px;
	}
	.subnav-top {
		width: 90%;
	    margin-top: -70px;
	}
	
	.top-header{font-size:9px;margin-right:0px;margin-top: 30px;}
	
}
@media (max-width: 320px) {
  	.top-header li {
	   margin: 0 2px;
	}
	.subnav a {
    	font-size: 11px;
	}
}