h1,h2,h3,h4,h5,h6{
  font-family: open sans;

}
::placeholder {
  opacity: 0.5 !important;
}
    a{
      text-decoration: none;
    }
    a:hover{
      text-decoration: none;
    }
    a:active{
      text-decoration: none;
    }
    .btn-lrn1{
      background-color: transparent;
      padding:5px 20px 5px 20px;
      border-radius: 20px;
      border:1px solid #fff;
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      transition: 0.5s;
      font-weight: bold;
    }
    .btn-lrn1:hover{
      background-color: #ff0000;
      border-color: #ff0000;
      color: #fff;
    }
    .title1{
      text-align: center;
      font-family: open sans;
      color: #ff0000;
      font-weight: bold;
      margin: 20px;
    }
    .title2{
      margin-top: 15px;
      margin-bottom: 15px;
      font-family: open sans;
      color: #ff0000;
      font-weight: bold;
    }
    .title3{
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-family: open sans;
      margin: 20px;
    }
    .title4{
      font-family: open sans;
      color: #ff0000;
      font-weight: bold;
      padding-bottom: 20px;
    }
    .title5{
      color: #717171;
      font-family: open sans;
      font-weight: bold;
    }
    .text-center{
      text-align: center;
    }
    .content-center{
      margin: auto;
    }
    .jmb-about{
      background-color: #f7f7f7;
      padding-top: 80px;
      padding-bottom: 100px;
    }
    .pd-80{
      padding-top: 80px;
      padding-bottom: 100px;
    }
    .text-sm{
      font-size: 14px;
      color: #555;
    }
    .text-sm1{
      font-size: 14px;
      color: #555;
    }
    .text-sm2{
      font-size: 16px;
      color: #555;
    }
    .f-30{
      font-size: 30px;
    }
    .f-16{
      font-size: 16px;
    }
    .f-17{
      font-size: 17px;
    }
    .f-18{
      font-size: 18px;
    }
    .f-20{
      font-size: 20px;
    }
    .f-26{
      font-size: 26px;
    }
    .txt-sm-white{
      color: #fff;
      font-size: 13px;
    }
    .bg1{
      background-color: #ff0000;
    }
    .btn1{
      background-color: #ff0000;
      border:1px solid #ff0000;
      border-radius: 50px;
      padding: 5px 20px 5px 20px;
      text-align: center;
      transition: 0.5s; 
      font-size: 14px;
    }

    .btn-signin{
      background-color: #fff;
      border:1px solid #ff0000;
      border-radius: 50px;
      padding: 2px;
      text-align: center;
      transition: 0.5s; 
      font-size: 14px;
    }

    .btn-signin-mob{
      background-color: #fff;
      border:1px solid #fff;
      color: #ff0000 !important;
      border-radius: 50px;
      padding: 2px;
      text-align: center;
      transition: 0.5s; 
      font-size: 15px;
      width: 90px;
      height: 30px;
      font-weight: bold;
      margin-right: 5px !important;
    }

    .btn-signup-mob{
      background-color: #ff0000;
      border:1px solid #fff;
      color: #fff !important;
      border-radius: 50px;
      padding: 2px;
      text-align: center;
      transition: 0.5s; 
      font-size: 15px;
      width: 90px;
      height: 30px;
      font-weight: bold;
      margin-left: 5px !important;
    }
    .lang-mob{
      background-color: #fff;
      border:1px solid #fff;
      color: #ff0000 !important;
      border-radius: 50px;
      width: 100%;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 0px;
    }
    .btn2{
      background-color: transparent;
      color: #fff;
      border-color: #fff;
      border:1px solid #fff;
      border-radius: 50px;
      padding: 5px 20px 5px 20px;
      text-align: center;
      transition: 0.5s; 
      font-size: 14px;
    }
    .btn2:hover{
      background-color: #ff0000;
      color: #fff;
      border-color: #ff0000;
      transition: 0.5s; 
    }
    .btn-signup{      
      background-color: transparent;
      color: #fff;
      border-color: #fff;
      border:1px solid #fff;
      border-radius: 50px;
      padding: 2px;
      text-align: center;
      transition: 0.5s; 
      font-size: 14px;

    }

    .btn-signup:hover{
      background-color: #ff0000;
      color: #fff;
      border-color: #ff0000;
      transition: 0.5s; 
    }
    .btn-gabung1{
      background-color: transparent;
      color: #fff;
      border-color: #fff;
      border:1px solid #fff;
      border-radius: 50px;
      padding: 6px 10px 6px 10px;
      font-weight: bold;
      transition: 0.5s; 
      font-size: 14px;
      font-family: open sans,bold;
      height: 38px;
      width: 148px;
      text-align: center;
    }
    .btn-gabung1:hover{
      background-color: #ff0000;
      color: #fff;
      border-color: #ff0000;
      transition: 0.5s; 
    }
    .mg-prd{
      margin-bottom: 30px;
    }
    .mg-0{
      margin: 0px;
    }
    .pd-0{
      padding: 0px;
    }
    .btn3{
      background-color: transparent;
      color: #ff0000;
      border: 1px solid #ff0000;
      border-radius: 50px;
      transition: 0.5s; 
      font-size: 14px;
      padding: 5px 20px 5px 20px;
    }
    .btn3:hover{
      background-color: #ff0000;
      color: #fff;
      transition: 0.5s; 
    }
    
    
    .btn4{
      background-color: transparent;
      color: #555;
      border: 1px solid #555;
      border-radius: 50px;
      transition: 0.5s; 
      padding: 5px 20px 5px 20px;
      font-weight: bold;
    }
    .btn4:hover{
      background-color: #ff0000;
      border: 1px solid #ff0000;
      color: #fff;
      transition: 0.5s; 
    }
    .txt-white{
      color: #fff;
    }
    .mg1{
      margin: 15px;
    }
    .txt-banner{
      font-family:open sans;
      font-size:36px;
      font-weight: bold;
      color: #fff;
    }
    .bounce{
      transition: 0.5s;
      cursor: pointer;
    }
    .bounce-sm{
      transition: 0.5s;
      cursor: pointer;
    }
    .bounce:hover{
      transform: scale(1.2);
      transition: 0.5s;
    }
    .bounce-sm:hover{
      transform: scale(1.1);
      transition: 0.5s;
    }
    .color1{
      color: #127CC9;

    }
    .color2{
      color: #ebbe27;
    }
    .color4{
      color: #6F6F6F;
    }
    .color-w{
      color: #fff;
    }
  .col-cntc{
    padding: 50px;
    }
    .head-content{
      padding-left: 60px;
    }
    .bg-color1{
      background-color: #ff0000;
      color: #fff;
    }
    .bg-color2{
      background-color: #45a3e6;
      color: #fff;;
    }
    .bg-color3{
      background-color: #fec917;
      color: #fff;;
    }
    .footer-trk{

      background-color: #ff0000;
      color: #fff;
      padding-top: 81px; 
      padding-bottom: 85px; 
    }
    .right{
      text-align: right;
    }
    .col-news{
      margin-top:25px;
      font-size: 15px;
    }
    .col-news2{
      margin-top:25px;
      background-color: #F7F7F7;
      box-shadow: 0px 0px 10px 0px #00000029;
      border-radius: 20px;
      padding: 0px;
    }
    .img-news{
      width: 100%;
      border-radius: 20px 20px 0px 0px;
      opacity: 0.3;
    }
    .img-news-ins{
      position: absolute;
      left: 10%;
      top: 8%;
      width: 80% !important;
    }
    .w-100{
      width:100%;
    }
    .mg-btm{
      margin-bottom:10px;;
    }
    .nav-truck{
      background-color:rgba(0,0,0,0.1);
      height: 80px;
    }
    .nav-truck .bg-white{
      background-color: #fff;
    }
    .nav-white .a-nav{
      color: #151B54;
    }
    .brd-blue{
      border-color: #ff0000;
    }
    .nav-shadow{
      box-shadow: 0px 0px 10px 0px #333;

    }
    .nav-menu .btn-signin:hover {
      color:#fff;
    }
    .nav-menu .btn-signup:hover {
      color:#fff;
    }
    .lang{
      background-color: #fff;
      padding: 5px;
      border-radius: 50px;
      color: #ff0000;
      box-shadow: 0px 0px 1px 0px #333;
      font-size: 16px;
    }
    .img-hv-box {
      position: relative;
    }

    .img-hv {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }

    .hv-trnf-box {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: left;
    }

    .img-hv-box:hover .img-hv {
      opacity: 0.3;
    }

    .img-hv-box:hover .hv-trnf-box {
      opacity: 1;
    }
    .main-bg-trnsf{
      background-color:rgba(0,0,0,0.25);
      width: 100%;
      margin: 0px;
      position: absolute;
      height: 82vh;
      top: 0px;

    }
    .main-bg-trnsf-full{
      background-color:rgba(0,0,0,0.3);
      width: 100%;
      margin: 0px;
      position: absolute;
      height: 100vh;
      top: 0px;

    }
    .col-contact{
      margin: 0px;
      padding-left: 80px;
      color: #fff;
    }
    .col-contact2{
      padding-left: 80px;
      padding-right: 80px;
    }
    .col-shipper{
      background-color:rgba(0,0,0,0.3);
      padding: 10%;
    }
    .img-cover{
      background-size: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      max-height: 500px !important;
    }
    .input-group{
      padding: 5px;
    }
    .input-btn{
      padding: 5px;
    }
    .col-frm-job{
      background-color: #F7F8F9;
      padding: 40px;
      padding-bottom: 20px;
      margin-top: 20px;
      border-radius: 20px;
    }
    .line-cl1{
      border-color: #ff0000;
    }
    .bdy-sign{
      height: 50vh;
    }
    .bg-grd-signup{
      background:linear-gradient(0deg, rgba(204,163,26,1) 0%, rgba(204,163,26,0.5) 50%, rgba(204,163,26,0) 100%);
      /*height: 45vh;
      width: 100%;*/
      width: 512px;
      height: 469px;
      border-radius: 20px;    
      z-index: 1;
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .bg-grd-signup2{
      background:linear-gradient(0deg, rgba(18,124,201,1) 0%, rgba(18,124,201,0.5) 50%, rgba(18,124,201,0) 100%);
     /* height: 45vh;
      width: 100%;*/
      width: 512px;
      height: 469px;
      border-radius: 20px;    
      z-index: 1;
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .mod-signup-transporter{
      border-radius: 20px;    
      margin-top: 15vh;
      padding: 20px;
      width: 512px;
      height: 469px;
      
    }
    .mod-signup-transporter:hover .btn-up{
      opacity: 1.0;
      margin-top: 20px;
      display: inline-block;
    
    }
    .bg-ct1{
      text-align: right;padding-right: 0px;
      font-size: 20px;
      float: left;
    }

    .bg-ct2{
      text-align: left;
      float: left;
    }
    .btn-up{
      margin-bottom: -100px;
      opacity: 0.0;
      -webkit-transition: all 400ms ease-in-out;
      -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
      -o-transition: all 400ms ease-in-out;
      transition: all 100ms ease-in-out;
    }
    /* Tabs*/
    .tab-news {
      padding: 60px 0;
    }
    .btn-frm{
      padding-left: 40px;
      padding-right: 40px;
    }
    .selow{
      transition: 0.5s ease;

    }
    .tab-news .section-title {
      text-align: center;
      color: #ff0000;
      margin-bottom: 50px;
      text-transform: uppercase;
    }
    .none{
      display: none;
    }
    .mod-gabung{
      border-radius: 20px;    
      margin-top: 15vh;
      padding: 20px;
      background-color:#f7f7f7;
    }
    .mod-login{
      border-radius: 20px;    
      margin-top: 20vh;
      padding: 0px;
    }
    .img-login{
      border-radius: 20px 0px 0px 20px;
    }
    .form-login{
      border-radius: 0px 20px 20px 0px;
      background-color: #fff;
    }
    .pd-login{
      padding: 20px;
      padding-top: 70px;
    }
    .logo{
      margin-top:-15px !important;
    }
    .trk-logo{
      width:180px;
    }
    #tabs{
      color: #000;
    }
    #tabs h6.section-title{
      color: #000;
    }

    #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
      color: #ff0000;
      background-color: transparent;
      border-color: transparent transparent #000;
      border-bottom: 4px solid !important;
      font-size: 20px;
      font-weight: bold;
    }
    #tabs .nav-tabs .nav-link {
      border: 1px solid transparent;
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
      color: #ff0000;
      font-size: 20px;
    }
    .icofont-close{
      color: #fff !important;
      z-index: 0;
    }

    .mobile-nav .btn-signin{
      display: none;
    }
    .mobile-nav .btn-signup{
      display: none;
    }
    .lang-btm{
        display: block;
      }
    .nav-mob{
     display: none; 
    }
    .mobile-nav .nav-mob{
       padding-top: 20px;
       padding-left: 20px; 
      }
    .tbl-partner{
      width: 100%;
      border:none;
      margin-left:100px;
      margin-right:100px;
    }
    .crsl-height{
      height: 370px;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .close-desk{
      display: block;
    }
    .close-mob{
      display: none;
    }
    .carousel-caption{
      font-size: 18px;
    }
    .ct-icon{
     width: 21px;
     height: 21px; 
    }
    @media (max-width: 992px) {
    .main-bg-trnsf{
      height: 101.5vh;
      }
    }
    @media (max-width: 767px) {

    .img-cover{
      background-size: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      max-height: 100vh !important;
    }
      .mod-signup-transporter{
         height: 40vh;
      width: 100%;
      }
      .bg-grd-signup{
         height: 40vh;
      width: 100%;
      }
      .bg-grd-signup2 {
         height: 40vh;
      width: 100%;
      }
        .bg-ct1{
          text-align: center;padding-right: 0px;
        }

        .bg-ct2{
          text-align: center;
        }
      .img-login{
        border-radius: 20px 20px 0px 0px;
      }
      .form-login{
        border-radius: 0px 0px 20px 20px;
      }
      .mod-login{  
        margin-top: 5vh;
      }
      .pd-login{
        padding: 20px 20px 20px 20px;
      }
      .txt-banner{
        font-size: 28px;
        text-align: left;
        margin-bottom: 20px;
        margin-left: 10px;
      }
      .f-30{
        font-size: 20px;

      }
      .f-26{
        font-size: 20px;
      } 
      .f-18{
        font-size: 16px;
      }
      .text-sm, .text-sm2{
        font-size: 12px;
      }
      .text-sm1{
        font-size: 10px;
      }
      .trp-title{
        font-size: 20px;
      }
      .jmb-about, .pd-80{
        padding-top: 40px;
        padding-bottom: 80px;
      }
      .footer-contact, .footer-links{
        text-align: center;
        margin-top: 30px;
      }
      .bg-ct1{
        font-size: 12px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-top: 40px;
      }
      .col-cntc{
        padding-top: 40px;
        padding-bottom: 80px;
        padding-left: 0px;
        padding-right: 0px;
      }
      .trk-logo{
        width:134px;
        margin-top: 6px;
      }
      .btn-signup, .lang-btm{
        display: none;
      }  
      .nav-mob{
       display: block; 
      } 
      .nav-white .a-nav{
        background: #fff !important;
        color: #151B54;
      } 
      .img-hv-box {
        margin: 15px;
      }
      .img-news-hm{
        padding: 30px;
      }
      .tbl-partner{
        width: 800px;
        border:none;
        margin-left:0px;
        margin-right:0px;
      }
      .col-partner-icon{
        overflow: auto;

      }

      .crsl-height{
        height: 250px;
        margin-bottom: 30px;
        margin-top: 30px;
      }
      .close-desk{
        display: none;
      }
      .close-mob{
        display: block;
      }
      .carousel-caption{
        font-size: 12px;
        padding-bottom: 0px !important;
        margin-bottom: -10px;
      }
      .carousel-inner .carousel-item{
        min-height: 100vh !important;
      }
      .col-about{
        padding-left: 20px;
        padding-right: 20px;
      }
      .nav-fill{
        width: 600px !important;
      }
      .nav-link{
        font-size: 12px !important;
      }
      .img-detail-news{
        width: 100%;
      }
      .col-contact{
        padding-left: 18%;
      }
      .col-contact2{
        padding-left: 0px;
        padding-right: 0px;
      }
      .ct-icon{
        width: 21px;
        height: 21px;
      }
      .tab-career{
        padding-top: 0px;
      }
      .col-career{
        padding-left: 0px;
        padding-right: 0px;
      }
      .col-frm-job{
        padding: 20px;
      }
      .mod-gabung{
        padding: 0px;
      }

    }