/*
 * Kemangga Style
 */
@font-face{font-family: Lato; src: url(fonts/Lato-Regular.ttf);}
@font-face{font-family: LatoMedium; src: url(fonts/Lato-Medium.ttf);}
@font-face{font-family: LatoBlack; src: url(fonts/Lato-Black.ttf);}
@font-face{font-family: LatoBold; src: url(fonts/Lato-Bold.ttf);}
@font-face{font-family: LatoHeavy; src: url(fonts/Lato-Heavy.ttf);}

@font-face{font-family: OpenSansB; src: url(fonts/OpenSans-B.ttf);}
@font-face{font-family: OpenSansL; src: url(fonts/OpenSans-L.ttf);}
@font-face{font-family: OpenSansR; src: url(fonts/OpenSans.ttf);}

@font-face{font-family: Calibri; src: url(fonts/Calibri.ttf);}

@font-face{font-family: Muli; src: url(fonts/Muli.ttf);}

* {margin:0; padding:0;}

body{
    margin:0;
    padding:0;
    background-color:#f3f3f3;
    background-repeat: repeat;
    font-family: OpenSansR;
    font-size:14px;
    color:#989898;
}

.floatClear{float:none; clear: both;}
.posLeft{float: left;} .posRight{float: right;} .posTop{position:absolute;top:0px;} .posBottom{position:absolute;bottom:0;}
.alignLeft{text-align: left;} .alignRight{text-align: right;} .alignCenter{text-align: center;} .alignJustify{text-align: justify;}
.brdr-t{border-top:1px dotted #d5d5d5;}


h1,h2,h3,h4,h5,h6{
    margin:0;
    padding:0;    
}
a{text-decoration:none;}
p{
    line-height:1.4em;
}
.fco-b {color:#000;}
.fco-w {color:#fff;}
.fco-p {color:#c14172;}
.fco-br{color:#68492b;}

.bco-tw {background-color: rgba(255,255,255,.6);}
.bco-tb {background-color: rgba(0,0,0,.4);}
.bco-fw {background-color: rgba(255,255,255,1);}
.bco-fb {background-color: rgba(0,0,0,1);}
.bco-r {background-color:#f50000;}
.bco-w {background-color:#fff;}

span.vSpace10,
span.vSpace12,
span.vSpace25,
span.vSpace30,
span.vSpace45,
span.vSpace50,
span.vSpace75,
span.vSpace100,
span.vSpaces
{
    display: block;    
}
span.vSpace10{height:10px;}
span.vSpace12{height:12px;}
span.vSpace25{height:25px;}
span.vSpace30{height:30px;}
span.vSpace45{height:45px;}
span.vSpace50{height:50px;}
span.vSpace75{height:75px;}
span.vSpace100{height:100px;}
span.vSpaces{height:130px;}


/** -----------------------------------------------------------
    GLOBAL STYLE
----------------------------------------------------------- **/
.pg-body,
.pg-row,
.pg-banner,
.pg-header,
.pg-container,
.page-container,
.pg-content{
   display:block;
   position:relative;   
}
.pg-body{
   width:100%;
   max-width:1343px;
   height:auto;
   margin:0 auto;
   padding:0;
}
.pg-banner{
   width:100%;
   height:529px;
   margin:0;
   background-image:url(../images/bg.jpg);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;   
   margin-bottom:70px;
}
.pg-row{
   width:99%;
   max-width:880px;
   margin:0 auto;
}
.page-container{
   width:100%;
   height:auto;
   min-height:549px;
   margin:0;
   background-color:transparent;
   background-image:url(../images/bg.jpg);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 1343px 549px;   
   margin-bottom:70px;
}
.pg-container{
   clear:both;
   width: 98%;
   max-width:990px;
   height:auto;
   margin:0 auto;
   padding:0;
}
.container-bg{
   background-color:#fff;
   border: 1px solid #dcdcdc;
}
.pg-content{
   width:99%;
   max-width:896px;
   height:auto;
   padding:30px 0;
   background-color:#f6f6f6;
   margin:0 auto;
}
.pg-header{
   width:100%;
   max-width:690px;
   height:auto;
/*   min-height: 93px; */
   margin:0 auto;
   padding:0;
   background:rgba(0,0,0,0);
}
.header-logo{
   display: inline-block;
   position: relative;   
}
.header-logo-img{
   width:117px;
   height:93px;
   margin:5px 0;
   text-align:center;
}
.header-logo-txt{
   width:567px;   
   height:93px;
   margin:0;
   text-align:center;
}
.header-logo-txt img{
   width:98%!important;
   height:auto;
}
.title-page{
   display:block;
   position:absolute;
   width:227px;
   height:179px;
   background-color:#3062f3;
   top:100px;
   left:0;   
   z-index:100;
}
span.sTitlePage{
   display:table;
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
}
span.sTitlePage span{
   display:table-cell;
   text-align: center;
   vertical-align: middle;
   color:#fff;
   font-family:LatoMedium;
   font-size:34px;
}
/** -----------------------------------------------------------
    HOME
----------------------------------------------------------- **/
.box-slide{
   display:block;
   position:relative;
   width:100%;
   max-width:830px;
   height:346px;
   margin:0 auto;
   margin-top:25px;   
}
.box-welcome{
   display:block;
   position:relative;
   width:99%;
   max-width:830px;
   height:auto;
   margin:25px auto;
   background-color:white;
border-bottom-style: solid;
border-bottom-width:10px;
   border-bottom-color: rgb(37,81,236);   
}
.title-welcome{
   font-family:Lato;
   color:#3062f3;
     
   font-size:32px
}
.title-welcome i{
   font-family:LatoBold;
   font-size:48px;
   font-style: normal;
}

.home-thumb{
   width:99%;
   height:520px;
   margin:0 auto;   
}
.home-thumb-img{
   display:block;
   position:relative;
   width:227px;
   height:227px;
   border-radius:50%;
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   overflow:hidden;
   margin:0 auto;
}
.home-thumb-title{
   display:block;
   position:relative;
   width:99%;
   height:80px;   
   text-align:center;   
}
.home-thumb-title span{   
   color:#003caf;
   font-family:Lato;
   font-size:24px;
   vertical-align:middle;
   text-align:center;
   line-height:3em;
}
.home-thumb-title span a{color: #003caf;}
.home-thumb-text{
   display:block;
   position:relative;
   width:99%;
   height:140px;
   margin:0 auto;
   color:#909090;
   font-family:OpenSansR;
   text-align:center;
}
/** -----------------------------------------------------------
    PROFILE
----------------------------------------------------------- **/
.box-profile{
   display:block;
   position:relative;
   width:99%;
   max-width:780px;
   height:auto;
   margin:0 auto;   
}
.box-profile p,.box-profile ul li{
   line-height:1.7em;
}
.bp-first{
   float:right;
   width:99%;
   max-width:600px;
}

#profile_img{
   clear:both;
   display:block;
   position:relative;
   width:100%;
   height: auto;   
}
.profile_img_left{
   display: block;
   position:relative;
   float:left;
   width:536px;
}
.pil{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   margin-bottom:6px;
   padding:0;
}
.pil img{
   max-width:531px;
}
.profile_img_right{
   display: block;
   position:relative;
   float:right;
   width:351px;
   height:319px;
}

/** -----------------------------------------------------------
    SERVICES
----------------------------------------------------------- **/
.box-srv{
   display:block;
   position:relative;
   width:99%;
   max-width:780px;
   height:auto;
   margin:0 auto;    
}
.box-srv p,.box-srv ul li{
   line-height:1.7em;
}
.bg-clear{
   background-image:none;
   background-color:transparent;
}
.srv-text,
.srv-img{
   display:block;
   position:relative;
   float:left;
}
.srv-text{
   width:485px;
   height:auto;
   margin-right:22px;         
}
.srv-text p{
   line-height:1.7em;   
}
.srv-img{
   width:383px;
   height:auto;
   text-align:center;
}
.div-srv-img{
   width:100%;
   max-width:383px;
   height:auto;
   margin:0 auto;
}
.div-srv-img img{
   width:100%!important;
   height:auto;
}
/** -----------------------------------------------------------
    CONTAINER SIZE
----------------------------------------------------------- **/
.box-cs{
   display:block;
   position:relative;
   margin:0 auto;
   border-bottom:1px solid #dadada;
}
.box-item-cs,
.box-img-cs{
   display:block;
   position:relative;
   float:left;
}
.box-item-cs{
   width:215px;
   border-right:1px solid #dadada;
   margin-right:30px;
}
.box-img-cs{
   width:575px;
   background-color:rgba(0,0,0,0);   
}
.space-cs{
   display:block;
   height:200px;
}
ul.lst-item{
   list-style-type:none;
   margin:0;
   padding:0;   
   margin-bottom:50px;
}
ul.lst-item li{
   display:block;
   position:relative;
   float:left;
   width:98%;
   border-top:1px solid #dadada;
   line-height:2em;
   background-image: url(../images/arrow.png);
   background-position: center right 15px;
   background-repeat:no-repeat;
   margin-left:5px;
            
}
ul.lst-item li a{color:#404040;margin-left:10px;}

.box-table{
   display:block;
   position:relative;
   width:440px;
   height:auto;
   float:left;   
}
.box-title-cs{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   padding:5px 0;
   text-align:center;
   background-color:#fff;
}
.box-img-container{
   display:block;
   position:relative;
   width:99%;
   max-width:576px;
   height:auto;
   margin:0 auto;
}
.box-img-container img{
   width:100%!important;
   height:auto;
   margin:0;
}
.box-title-cs span{
   font-family:LatoMedium;
   font-size:18px;
   color:#3062f3;   
}

/** -----------------------------------------------------------
    SAILING SCHEDULE
----------------------------------------------------------- **/
.banner-schedule{
   display:block;
   position:relative;
   width: 99%;
   max-width:716px;
   height:179px;    
   float:right; 
}
.banner-schedule img{
   width:100%;
   max-width:651px;
   height:auto;
   margin:0;
}
.box-search{
   display: block;
   position:relative;
   width:100%;
   max-width: 767px;
   height:auto;
   min-height:100px;
   margin:0 auto;
   border:1px solid #3062f3;
   background-color:#fff;
}
.box-search-title{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   min-height:60px;
   background-color:#3062f3;
   background-image: url(../images/ico-find.png);
   background-position: center left 20px;
   background-size: 35px 35px;
   background-repeat: no-repeat;
}
span.search-title{
   display:table;
   position:absolute;
   width:200px;
   height:60px;
   top:0;
   left:70px;
}
span.search-title span{
   display:table-cell;
   text-align:left;
   vertical-align:middle;
   color:#fff;
   font-family:LatoMedium;
   font-size:18px;
}
.btn-search{
   display:inline-block;
   position:relative;
   width:100px;
   height:auto;
   padding:3px;
   border:none;
   color:#fff;
   background: #4e9be3;
   text-align:center;
   margin:5px;
   cursor:pointer;
}
.box-view{
   display: block;
   position:relative;
   width:100%;
   max-width: 767px;
   height:auto;
   min-height:100px;
   margin:0 auto;
   border:1px solid #3062f3;
   background-color:#fff;
}
.spanload{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   text-align:center;
}
.city_title{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   text-align:center;
}
.btn-print{
   display:block;
   position:absolute;
   width:24px;
   height:24px;
   top:20px;
   right:20px;
   background-color:transparent;
   background-image: url(../images/Print.png);
   background-position:center center;
   background-size:24px 24px;
   background-repeat: no-repeat;
   border: none;
   cursor:pointer;
}
/** -----------------------------------------------------------
    OVERSEAS PARTNER
----------------------------------------------------------- **/
.box-partner{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   margin:0 auto;
   padding:15px 0;
   border-top:1px solid #fff;
}
.box-partner:last-child{
   border-bottom:1px solid #fff;
}
.box-partner span{
   display:block;   
   font-family:OpensansR;
   font-size:14px;
   line-height:1.5em;
}
.box-office{
   display:inline-block;
   position:relative;
   width:45%;
   height:auto;
   min-height:150px;
   margin:1%;
   padding:0;
   vertical-align:top;
}
.box-office span{
   display:block;   
   font-family:OpensansR;
   font-size:12px;
   line-height:1.5em;
}
.box-office span a{color:#989898;text-decoration:underline;}
.box-office span a:hover{color:#989898;text-decoration:none;}
.box-office span.title1{color:#ff0000;font-family:OpensansB;font-size:14px;}
.box-office span.title2{color:#0000ff;font-family:OpensansR;font-weight:bold;}
.box-office span.title2 small{font-size:10px;font-family:OpensansR;}

/** -----------------------------------------------------------
    EQUIPMENT CONTROL
----------------------------------------------------------- **/
.box-equip{
   display:block;
   position:relative;
   width:99%;
   max-width:780px;
   height:auto;
   min-height:200px;
   margin:0 auto;    
}
.box-equip-frame{
   display:block;
   position:relative;
   width:100%;
   height:auto;
}
.box-equip-frame iframe{
   width:100%!important;
   height:100%!important;
   margin:0;   
}
/** -----------------------------------------------------------
    CONTACT US
----------------------------------------------------------- **/
.box-contact-address{
   display:block;
   position:relative;
   width: 99%;
   max-width:716px;
   height:179px;
   background-color:#eee;  
   float:right; 
}
.contact-img{
   display:block;
   position:relative;
//   width:175px;
   width:15px;
   min-height:177px;
   float:left;
}
span.logo-contact{
   display:table;
   position:relative;
   width:100%;   
   height:177px;   
}
span.logo-contact span{   
   display: table-cell;
   text-align:center;
   vertical-align:middle;
}
.contact-addr{
   display:block;
   position:relative;
   float:left;
   width:450px;
   height:177px;

}
.contact-addr span{
  display:block;  
  line-height:1.7em;
}   

.box-form{
   display: inline-block;
   position: relative;
   width:401px;
   height:auto;
   padding:8px 5px;
   vertical-align:top;
   border:1px solid #d7d7d7;
   margin-right:5px;
}
/** -----------------------------------------------------------
    FOOTER
----------------------------------------------------------- **/
#pg-footer{
   display:block;
   position:relative;
   width:100%;
   height:auto;
/*   min-height: 270px; */
   background:rgba(223,223,223,1);
   color:#727272;
   font-family:Lato;
   font-size:14px;
}
.box-foot{
   display:block;
   position:relative;
   width:100%;
   height:auto;
   padding:40px 0 10px 0;
   margin:0;
   margin-bottom:20px;
   border-bottom:1px solid #4e9be3;
   
}


.foot-img,
.foot-menu,
.foot-addr{
   display: block;
   position:relative;
   float:left;
   min-height:140px;
}
.foot-img{width:127px;}
.foot-menu{width:370px;}
.foot-addr{width:860px;text-align:right;}
.box-office2{
   display:inline-block;
   position:relative;
   width:45%;
   height:auto;
   min-height:150px;
   margin:1%;
   padding:0;
   vertical-align:top;
   text-align:left;
   font-size:11px;
}
.box-office2 span{
   display:block;   
   font-family:OpensansR;   
   line-height:1.2em;
}
.box-office2 span a{color:#989898;text-decoration:underline;}
.box-office2 span a:hover{color:#989898;text-decoration:none;}
.box-office2 span.title1{color:#ff0000;font-family:OpensansB;font-size:14px;}
.box-office2 span.title2{color:#0000ff;font-family:OpensansR;font-weight:bold;}
.box-office2 span.title2 small{font-size:10px;font-family:OpensansR;}
.box-office2 span.title1,.box-office2 span.title2{margin-bottom:2px;}

#office-maps{
    display:block;
    position:relative;
/*    overflow: hidden; */
    width:100%;
    max-width:800px;    
    height:100%;
    max-height:600px;         
    background: rgba(0,0,0,.2);      
    vertical-align:top;
    margin:0 auto;
}
#office-maps iframe{
   width:100%!important;
   height:100%!important;
   margin:0;
}

span.logo-foot{
   display:table;
   position:relative;
   width:100%;
   height:140px;   
}
span.logo-foot span{   
   display: table-cell;
   text-align:left;
   vertical-align:middle;
}

ul.lstMenu{
   display:flex;
   flex-direction: column;
   flex-wrap: wrap;
   list-style-type: none;
   height:140px;
}
ul.lstMenu li{
   padding:.5em 0;
   margin-right: 5px;
   margin-bottom:3px;   
}
ul.lstMenu li a{
   color:#717171;
   text-decoration:none;
}
ul.lstMenu li a:hover{text-decoration: underline;}
.foot-addr span{
   display:block;
   margin-bottom:10px;
}
.box-copyright{
   display:block;
   position: relative;
   width:100%;
   height:auto;
   padding:12px 0;
   background-color:#003caf;
   color:#fff;
   font-family:Muli;
   font-size:12px;
}
.box-copyright a{
   text-decoration:none;
   color:#fff;
}
/** -----------------------------------------------------------
    SOSMED
----------------------------------------------------------- **/
.box-sosmed{
    width:100%;    
    padding:0;
    height:35px;
    margin-bottom:5px;    
}
ul.list-sosmed{
    list-style-type: none;
    margin:0;
    padding:0;
    text-align:right;    
}
    ul.list-sosmed li{
        display:inline-block;
        position:relative;
        vertical-align:top;    
        font-size:14px;
        line-height:2em;    
    }
    ul.list-sosmed li a{
        display:block;
        width:35px;
        height:35px;
        margin:0 3px;                   
             
    }

ul.list-sosmed li a.ico-fb{background-image:url(../images/sosmed/ico-fb.png);}
ul.list-sosmed li a.ico-tw{background-image:url(../images/sosmed/ico-tw.png);}
ul.list-sosmed li a.ico-li{background-image:url(../images/sosmed/ico-li.png);}
ul.list-sosmed li a.ico-gp{background-image:url(../images/sosmed/ico-gp.png);}

ul.list-sosmed li a.ico-fb:hover{background-image:url(../images/sosmed/ico-fb_hover.png);}
ul.list-sosmed li a.ico-tw:hover{background-image:url(../images/sosmed/ico-tw_hover.png);}
ul.list-sosmed li a.ico-li:hover{background-image:url(../images/sosmed/ico-li_hover.png);}
ul.list-sosmed li a.ico-gp:hover{background-image:url(../images/sosmed/ico-gp_hover.png);}

ul.list-sosmed li a.ico-fb,
ul.list-sosmed li a.ico-li,
ul.list-sosmed li a.ico-tw,
ul.list-sosmed li a.ico-gp
{
    background-size:35px 35px;
    background-repeat:no-repeat;
}

/** table style **/

table{
   border-top:1px solid #d7d7d7;
   border-right:1px solid #d7d7d7;
   border-left:1px solid #d7d7d7;   
   margin:5px 0;
}
/*
table tr:nth-child(even) {background: #EEE}
table tr:nth-child(odd) {background: #FFF}
*/
table th,table td{
   border-right:1px solid #d7d7d7;
   border-bottom:1px solid #d7d7d7;
   padding:5px;
   font-family:OpenSansR;
   font-size:14px;
}
table th{
   background:#3062f3;color:#fff;   
}
table td{   
   color:#a1a1a1;
}
table th:last-child,table td:last-child {
   border-right:none;
}
/** -----------------------------------------------------------
    FORM CONTROL
----------------------------------------------------------- **/
.box-gmaps{
    display:inline-block;
    position:relative;
    /*overflow: hidden;*/
    width:474px;    
    height:466px;         
    background: rgba(0,0,0,.2);      
    vertical-align:top;
}
.box-gmaps iframe{
   width:100%!important;
   height:100%!important;
   margin:0;
}
.form-group{margin-bottom:5px}
.form-control{
    margin-bottom: 5px;
    background: transparent;
    border: none;
}
label{
    display: -moz-inline-block;
    display: inline-block;
    margin-left: 35px;
}
.textbox{
    display: block;
    width: 92%;
    height:27px;
    padding:1px 10px 1px 10px;
    border:1px solid #737373;
    border-radius:3px;        
        -webkit-border-radius:3px;        
    color: #222;
    background: #fff;
    font-family: verdana;
    font-size:14px; 
    font-style:italic;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;    
}

textarea{
    display: block;
    width: 92%;    
    padding:1px 10px 1px 10px;
    border:1px solid #737373;
    border-radius:5px;        
        -webkit-border-radius:5px;        
    color: #222;
    background: #fff;
    font-family: verdana;
    font-size:14px; 
    font-style:italic;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
}
select{
    display: block;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    font-style:normal;
    padding:1px 10px 1px 10px;
    border:1px solid #737373;
    border-radius:5px;        
        -webkit-border-radius:5px;        
    color: #222;
    background: #fff;
    width: 92%;    
    margin-right: auto;
    margin-left: auto;
}
.tombol{
    display: table;
    position: relative;
    width:auto;    
    margin:0 auto;
    padding:5px 20px;    
    border:none;
    background: #3062f3;
    color: #fff;     
    font-family:OpenSansR;
    font-size:14px;
    cursor: pointer; 
}
.flyfb{
   display:block;
   position:absolute;
   width:41px;
   height:64px;
   top:-10px;
   right:50px;
   background-image:url(../images/fb.png);
   background-position:center center;
   background-repeat: no-repeat;
   background-size:41px 64px;
   padding:0;
   z-index:300;   
}