/*----------------------------------

Template Name: Unship

Description: HTML5 / CSS3 Multi Page

Version: 1.0

*Author: uiCookies.

------------------------------------*/



body {

  font-family: 'Roboto', sans-serif;

  font-weight: normal;

  font-size: 14px;

  line-height: 30px;

  background: #FFF;

  color: #62646c;

  -webkit-font-smoothing: antialiased !important;

  overflow-x: hidden;

}





/* ------------------------------------------------

TYPOGRAPHY

--------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {

  margin: 0 0 10px;

  color: #343434;

  font-family: 'Montserrat', sans-serif;

}



h1 {

  font-size: 48px;

  line-height: 72px;

}



h2 {

  font-size: 36px;

  font-weight: 700;

  line-height: 44px;

}



h3 {

  font-size: 30px;

  font-weight: 700;

  line-height: 45px;

}



P {

  margin: 0;

}



/* --------------------------------------

LINK STYLE

------------------------------------------*/

a {

  color: #0A3C6F;

  text-decoration: none;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}



a,

a:active,

a:focus,

a:active {

  text-decoration: none;

  outline: none;

}



a:hover,

a:focus {

  color: #62646c;

  text-decoration: none;

}





/* --------------------------------------------------

GENERAL

----------------------------------------------------- */

img {

  max-width: 100%;

}



hr {

  border-top: 1px solid #d7e2e8;

}



/*global margin/padding classes*/



.separetor {

  display: block;

  width: 100%;

  height: 1px;

  background-color: #d7e2e8;

}



address {

  line-height: 24px;

}



.page-header {

  padding-bottom: 0;

  margin: 40px 0 0;

  border-bottom: 0;

}



.mark {

  color: #0A3C6F;

  background: transparent;

  padding: 0;

}



.dropcap {

  display: inline-block;

  float: left;

  font-size: 48px;

  padding: 0 10px 0 0;

  line-height: 50px;

  color: #62646c;

}



/* ----------------------------------------------------------------

Breadcrumb

-------------------------------------------------------------------*/

.breadcrumb {

  padding: 0;

  list-style: none;

  background-color: transparent;

  border-radius: 0;

}



.breadcrumb a,

.breadcrumb>.active {

  color: #fff;

}



.breadcrumb a:hover {

  color: #0A3C6F;

  text-decoration: none;

}



.breadcrumb.separator-arrow>li+li:before {

  padding: 0 8px;

  font-family: "FontAwesome";

  content: '\f105';

}



/* ----------------------------------------------------------------

Pagination

-------------------------------------------------------------------*/

.pagination>li>a, 

.pagination>li>span {

  color: #0A3C6F;

}



.pagination>li>a:hover, 

.pagination>li>span:hover, 

.pagination>li>a:focus, 

.pagination>li>span:focus {

  color: #fff;

  background-color: #0A3C6F;

  border-color: #0A3C6F;

}



.pagination>.active>a, 

.pagination>.active>span, 

.pagination>.active>a:hover, 

.pagination>.active>span:hover, 

.pagination>.active>a:focus, 

.pagination>.active>span:focus {

  background-color: #0A3C6F;

  border-color: #0A3C6F;

}



/*borderless pagination*/



.pagination.borderless>li>a, 

.pagination.borderless>li>span {

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  border-radius: 50%;

  border-color: transparent;

  margin: 0 1px;

}



/*pager*/



.pager li>a:hover, 

.pager li>a:focus {

  text-decoration: none;

  color: #fff;

  background-color: #0A3C6F;

  border-color: transparent;

}



.pager .disabled>a, 

.pager .disabled>a:hover, 

.pager .disabled>a:focus, 

.pager .disabled>span {

  border-color: #ddd;

}



/* ----------------------------------------------------------------

Bootstrap Modal

-------------------------------------------------------------------*/

.modal-open {

  padding-right: 0 !important;

}



.modal-content {

  border-radius: 0;

  background: #FFF;

  padding: 30px;

  border: 0;

}



.modal-body {

  padding: 0;

  margin-top: 30px;

}



.modal-header {

  position: relative;

  padding: 0;

  border: 0;

}



.modal-header .modal-title {

  font-size: 20px;

  padding: 0;

}



.modal-header .close {

  position: absolute;

  top: -30px;

  right: -30px;

  margin: 0;

  background: #787B7E;

  padding: 0;

  width: 40px;

  height: 40px;

  color: #fff;

  text-shadow: none;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}



.modal-header .close:hover {

  background: #2f3562;

}



label {

  font-weight: 500;

  color: #62646c;

  font-size: 14px;

  line-height: 18px;

}



.modal-content .form-group {

  margin-bottom: 20px;

}

.modal-content .btn-primary {

  background: #0A3C6F;

  color: #fff;

}



.modal-content .btn-primary:hover{

  background: #fff;

  color: #333;

}



/* ------------------------------------------------------------------

GLOBAL BUTTON STYLE

--------------------------------------------------------------------- */

/*common style for all btn*/



button:focus {

  outline: none !important;

}



.btn {

	position:relative;

	z-index:10;

  font-size: 16px;

  line-height: 24px;

  padding: 5px 44px;

  border-radius: 5px;

  font-weight: 300;

  margin-bottom:20px

}





/*btn-primary*/

.btn-primary {

  font-size: 13px;

  font-weight: normal;

  color: #fff;

  padding: 5px 18px;

  background: #2f3562 !important;

  border: 0;

  text-transform: uppercase;

  border-radius: 5px;

  line-height: 25px;

}



.btn-primary i {

  margin-left: 5px;

}



.btn-primary:hover, 

.active.btn-primary, 

.btn-primary:focus {

  background-color: #343434;

  border-color: transparent;

  color: #fff;

}



.btn:focus, 

.btn:active:focus {

  outline: none;

}



.btn-rounded {

  border-radius: 30px;

}



.btn-lg {

  padding: 18px 50px !important;

  font-size: 14px!important;

  background: #fff;

  color: #343434;

}



.btn-lg:hover {

  background: #0A3C6F;

  color: #fff;

}



.form-group button[type="submit"] {

  padding: 15px 40px;

  font-size: 14px;

  font-family: 'Montserrat', sans-serif;

}



.btn,

button,

.btn-primary span i {

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}



/* --------------------------------------------------

LIST STYLE

----------------------------------------------------- */

ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



/*List check-square*/

ul.check-square li {

  display: list-item;

  position: relative;

  line-height: 36px;

  padding-left: 25px;

}



ul.check-square li::before {

  content: "\f14a";

  font-family: FontAwesome;

  font-size: 15px;

  position: absolute;

  left: 0;

  top: 0;

  color: #0A3C6F;

}



/*List check-square-o*/

ul.check-square-o li {

  display: list-item;

  position: relative;

  line-height: 36px;

  padding-left: 25px;

}



ul.check-square-o li::before {

  content: "\f046";

  font-family: FontAwesome;

  font-size: 15px;

  position: absolute;

  left: 0;

  top: 0;

  color: #0A3C6F;

}



/*List check*/

ul.check li {

  display: list-item;

  position: relative;

  line-height: 36px;

  padding-left: 25px;

}



ul.check li::before {

  content: "\f00c";

  font-family: FontAwesome;

  font-size: 15px;

  position: absolute;

  left: 0;

  top: 0;

  color: #0A3C6F;

}



/*List check-circle*/

ul.check-circle li {

  display: list-item;

  position: relative;

  line-height: 36px;

  padding-left: 25px;

}



ul.check-circle li::before {

  content: "\f058";

  font-family: FontAwesome;

  font-size: 15px;

  position: absolute;

  left: 0;

  top: 0;

  color: #0A3C6F;

}



.sticky-container {

  width: 100%;

}



/* ----------------------------------------------------------------

Form Style

-------------------------------------------------------------------*/

.form-group {

  margin-bottom: 0px;
  position: relative;
  z-index: 1;
  height: 120px;

}

.form-group2 {
  display: flex;
}

.form-group2 > label {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}

.form-control.branch::placeholder{
  margin-top: -20px;
}

.form-group.submit-btn {

  margin-bottom: 0;

}



.form-control {

  position: relative;

  border: 0;

  border-radius: 3px;

  height: 35px;

  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);

  -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);

  -ms-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);

  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);

  margin-bottom:10px

}



.form-control:focus {

  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1);

  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);

  -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.1);

  box-shadow: 0 1px 0 rgba(0,0,0,0.1);

}



textarea.form-control {

  height: 250px;

  border:#CCC 1px solid

}

input.form-control {

  height: 25px;

  border:#CCC 1px solid

}





/* --------------------------------------------------

List-group-item

----------------------------------------------------- */

a.list-group-item {

  color: #7b8a97;

}



.list-group-item.active, 

.list-group-item.active:hover, 

.list-group-item.active:focus {

  background-color: #0A3C6F;

  border-color: #0A3C6F;

}



/* --------------------------------------------------

GLOBAL SECTION STYLES

----------------------------------------------------- */

section {

  position: relative;

}



.section-padding {

  padding: 50px 0;

}



.page-title-section {

  text-align: center;

  padding: 100px 0;

  background:url(../img/cover/profile.jpg);
  background-size: cover;

}



.page-title-section:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 0;

  height: 0;

  border-left: 18px solid transparent;

  border-right: 18px solid transparent;

  margin-left: -20px;

}



.page-title-section.white-arrow:after {

  border-bottom: 18px solid #fff;

}



.page-title-section .page-header {

  margin: 0 0 10px;

}



.page-title-section .page-header h1 {

  font-size:25px;

  font-weight:bold;

  text-transform: uppercase;

  color: #2f3562;

  margin-bottom:-20px !important;

  margin-top:-10px !important

}



/*--------------------------- 

          TOP BAR

          -----------------------------*/

          .header {

           background:#FFF;



           -webkit-box-shadow: 0px 2px 5px 0px rgba(168,168,168,1);

           -moz-box-shadow: 0px 2px 5px 0px rgba(168,168,168,1);

           box-shadow: 0px 2px 5px 0px rgba(168,168,168,1);

           margin-bottom:5px

         }

         .non-header{



          -webkit-box-shadow:none;

          -moz-box-shadow: none;

          box-shadow:none;

          margin-bottom:0

        }



        /*top-bar*/

        .top-bar {

          padding: 5px 0px;

          background:#2f3562;

          color:#FFF;


        }



        .top-bar .social-links i {

          width: 25px;

          height: 25px;

          line-height: 25px;

          font-size: 10px;

        }





        /*call-to-action*/



        .call-to-action {

          *padding: 15px 0;

        }



        .call-to-action ul li {

          margin-right: 5px;

          font-size:12px !important;

          color:#FFF

        }



        .call-to-action a {

          font-size: 12px;

          color: #FFF !important;

          font-weight:normal;

          * font-family: 'Montserrat', sans-serif;

        }



        .call-to-action ul li a:hover {

          color: #FFF !important;

          text-decoration: none;

        }



        .call-to-action i {

          margin-right: 5px;

        }



        /*login-register*/



        .login-register li {

          position: relative;

        }



        .login-register li:first-child:after {

          position: absolute;

          right: -5px;

          content: "/";

        }



        .login-register li:last-child:after {

          content: "\f090";

          font-family: FontAwesome;

          margin-left: 5px;

        }



        .login-register li,

        .login-register li a {

          color: #fff;

          font-weight: 500;

        }



        .login-register li a {

          font-size: 12px;

        }



        .login-register li a:hover {

          color: #0A3C6F;

        }



        .topbar-right {

         float:right;

         padding-right:0 !important;

         margin-right:0 !important

       }



       /*social-links*/

       .social-links {

         float:right;

         position:relative;

         z-index:1;

         *margin-bottom:30px

       }



       .social-links li {

        padding-right: 2px;

        padding-left: 2px;

      }



      .social-links li a {

        display: inline-block;

      }



      .social-links li a i {

        color: #000;

        display: inline-block;

        width: 40px;

        height: 40px;

        font-size: 14px;

        line-height: 30px;

        text-align: center;

        border-radius: 50%;

        background: #f7f7f7;

        -webkit-transition: 0.3s;

        -moz-transition: 0.3s;

        -ms-transition: 0.3s;

        transition: 0.3s;

      }



      .social-links li a:hover i {

        color: #fff;

      }



      .social-links li a:hover i.fa-facebook {

        background: #3a5795;

      }



      .social-links li a:hover i.fa-twitter {

        background: #2b7bb9;

      }



      .social-links li a:hover i.fa-instagram {

        background: #517fa4;

      }



      .social-links li a:hover i.fa-tumblr {

        background: #529ecc;

      }



      .social-links li a:hover i.fa-dribbble {

        background: #ea4c89;

      }



      .social-links li a:hover i.fa-google-plus {

        background: #da4835;

      }



      .social-links li a:hover i.fa-linkedin {

        background: #287bbc;

      }



      /*language-support*/

      .lang-support {

        margin-left: 20px;

      }



      /*Logo*/

      .logo h1 span {

        display: none;

      }



      /*login-register modal*/



      .login-register .modal-dialog {

        margin: 10% auto;

      }



      #cssModal .modal-sm,

      #cssRegi .modal-sm {

        width: 350px;

      }



      #cssModal .css-modal-content,

      #cssRegi .css-modal-content {

        padding: 40px;

      }



      #cssModal .css-modal-content .close,

      #cssRegi .css-modal-content .close {

        position: absolute;

        right: 15px;

        top: 10px;

      }



      #cssModal .css-modal-content h2,

      #cssRegi .css-modal-content h2 {

        font-size: 20px;

        line-height: 22px;

        margin-bottom: 5px;

      }



      #cssModal .css-modal-content .css-note p,

      #cssRegi .css-modal-content .css-note p {

        font-size: 12px;

      }



      .asterisk {

        color: red;

      }



      #css_ul {

        margin-top: 10px;

      }





/* ------------------------------------------------------------------

POPUP FEATURE

--------------------------------------------------------------------- */

.popup-feature {

  position: relative;

  overflow: hidden;

}



.popup-feature::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(101, 211, 227, 0.8);

  display: inline-block;

  opacity: 0;

}



.popup-feature:hover::before {

  opacity: 1;

}



.more-link a.img-link,

.more-link a.page-link {

  position: absolute;

  top: 0;

  opacity: 0;

}



.more-link a.img-link {

  left: 0;

}



.more-link a.page-link {

  right: 0;

}



.popup-feature:hover .more-link a.img-link,

.popup-feature:hover .more-link a.page-link {

  top: 50%;

  margin-top: -20px;

  opacity: 1;

}



.popup-feature:hover .more-link a.img-link {

  left: 50%;

  margin-left: -50px;

}



.popup-feature:hover .more-link a.page-link {

  right: 50%;

  margin-right: -50px;

}



.more-link a {

  width: 40px;

  height: 40px;

  line-height: 36px;

  display: inline-block;

  text-align: center;

  font-size: 18px;

  border: 2px solid rgba(255,255,255,.3);

  color: #fff;

  border-radius: 10px;

}



.more-link a:hover {

  background-color: #fff;

  color: #65d3e3;

}



.popup-feature::before {

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  -ms-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

}



/* ------------------------------------------------------------------

FOOTER WIDGET SECTION

--------------------------------------------------------------------- */

.footer-widget-section {

  background: url(../img/footer-bg.png) no-repeat;

  background-size: cover;

  padding: 146px 0 130px;

  color: #727e89;

}



.footer-widget {

  line-height: 28px;

}



.footer-widget h3 {

  margin-bottom: 25px;

  font-size: 14px;

  line-height: 21px;

  font-weight: 400;

  color: #fff;

}



.footer-widget-section address span {

  position: relative;

  display: block;

  margin-bottom: 20px;

}



.footer-widget-section address strong {

  color: #fff;

  font-size: 18px;

}



.footer-widget ul.quick-links li {

  position: relative;

  line-height: 32px;

  padding-left: 10px;

}



.footer-widget ul.quick-links li:before {

  content: "\f105";

  font-family: FontAwesome;

  position: absolute;

  left: 0;

  top: 0;

}



.footer-widget ul li a {

  color: #7b8a97;

}



.footer-widget ul li a:hover {

  color: #0A3C6F;

  text-decoration: none;

}



form.newsletter-form .form-group {

  margin: 26px 0 0;

  position: relative;

  font-style: italic;

}



form.newsletter-form .form-group .form-control {

  border: 0;

  border-bottom: 0;

  border-radius: 5px;

  background: #000;

}



form.newsletter-form .form-group .form-control:focus {

  border-color: #0A3C6F;

}



form.newsletter-form .form-group button {

  position: absolute;

  top: 6px;

  right: 5px;

  border: 0;

  border-radius: 3px;

  line-height: 18px;

  color: #fff;

  padding: 8px 16px !important;

  background: #0A3C6F;

  text-transform: capitalize;

  font-weight: 400;

  font-size: 14px!important;

  -webkit-transition: .3s;

  -moz-transition: .3s;

  -ms-transition: .3s;

  transition: .3s;

}



form.newsletter-form .form-group button:hover {

  background: #fff;

  color: #0A3C6F;

}



/*footer social links*/



.footer-widget .social-links {

  margin: 20px 0 0;

}



.footer-widget .social-links li {

  margin-right: 30px;

  padding: 0;

}



.footer-widget .social-links li:last-child {

  margin-right: 0;

}



.footer-widget .social-links li a i {

  color: #7b8a97;

  font-size: 14px;

  width: auto;

  height: auto;

}



.footer-widget .social-links li a i,

.footer-widget .social-links li a:hover i {

  background: transparent;

}



.footer-widget .social-links li a:hover i {

  color: #0A3C6F;

}







/* ------------------------------------------------------------------

COPYRIGHT SECTION

--------------------------------------------------------------------- */

.copyright-section {

  background-color: #2f3562;

  border-top: 4px solid #f79830;

}



.footer-menu {

}



.footer-menu li {

  line-height: 32px;

  position: relative;

  display: inline-block;

  padding-right: 30px;

  color:#FFF

}



.footer-menu li::after {

  content: "";

  width: 5px;

  height: 5px;

  position: absolute;

  right: 10px;

  top: 45%;

  border-radius: 50%;

  background: #666;

  opacity: 0.6;

}



.footer-menu li:last-child::after {

  display: none;

}



.footer-menu li a {

  color: #FFF;

}



.footer-menu li a:hover {

  color: #C8BA37;

  text-decoration: none;

}



.copyright-info {
  line-height: 20px;
  padding: 5px 0px;
  text-align: center;
  background: #393939;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  font-size: 13px;
}



.copyright-info span {

  color: #FFF;

}







/* ------------------------------------------------------------------

BACK TO TOP

--------------------------------------------------------------------- */

#toTop {

  position: fixed;

  bottom: 80px;
  right: 17px;

  color: #9e9e9e;

  cursor: pointer;

  display: none;

  z-index: 9999;

  width: 49px;

  height: 49px;

  ;

  text-align: center;

  font-size: 18px;

  line-height: 49px;

  background: #dddddd;

  border-radius: 5px;

  box-sizing: border-box;

}



#toTop:hover {

  color: #fff;

  background-color: #2f3562;

  border: 1px solid transparent;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}







/* ---------------------------------------------- /*

 * Preloader

 /* ---------------------------------------------- */



 #preloader {

  background: #FFF;

  bottom: 0;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

  z-index: 9999;

}



#status,

.status-mes {

  background-image: url(../img/preloder.gif);

  background-position: center;

  background-repeat: no-repeat;

  height: 200px;

  left: 50%;

  margin: -100px 0 0 -100px;

  position: absolute;

  top: 50%;

  width: 200px;

}



.status-mes {

  background: none;

  left: 0;

  margin: 0;

  text-align: center;

  top: 65%;

}





/* ----------------------------------------------------------------

BOOTSTRAP CAROUSEL CONTROL

-------------------------------------------------------------------*/



.carousel-control {

  right: 65px;

  left: auto;

  z-index: 2;

  background: none!important;

  box-shadow: none;

  text-shadow: none;

}



.slider-control {

  position: absolute;

  top: 0;

  right: 0;

}



.slider-control .left,

.slider-control .right {

  width: 65px;

  height: 75px;

  background: #f6f6f6!important;

  background-image: none!important;

  color: #c2c2c2;

  display: inline-block;

  line-height: 75px;

  text-align: center;

  opacity: 1;

  cursor: pointer;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

}



.slider-control .left:hover,

.slider-control .right:hover {

  background: #272b31!important;

  color: #fff;

}



.slider-control i:before,

.slider-control span:before {

  font-size: 30px;

}







/* ----------------------------------------------------------------

WIDGETS

-------------------------------------------------------------------*/





.widget {

  margin-bottom: 20px;

}



h2.widget-title {

  font-size: 12px;

  line-height: 18px;

  margin-bottom: 30px;

  text-transform: uppercase;

}



.widget ul.widget-arrow-list li {

  position: relative;

  padding-left: 15px;

}



.widget ul.widget-arrow-list li a {

  display: inline-block;

  border-bottom: 2px solid #f0f0f0;

  margin-bottom: 10px;

  padding: 0 0 5px;

  color: #252323;

}



.widget ul.widget-arrow-list li a:hover {

  color: #0A3C6F;

}



.widget ul.widget-arrow-list li:last-child a {

  margin-bottom: 0;

}



.widget ul.widget-arrow-list li:before {

  content: "\f105";

  font-family: FontAwesome;

  position: absolute;

  left: 0;

  top: 0;

  color: #b2b2b2;

}





/* ----------------------------------------------------------------

EQUAL HEIGHTS

-------------------------------------------------------------------*/



.row-flex, 

.row-flex > div[class*='col-'] {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex: 1 1 auto;

}



.row-flex > div[class*='col-'] {

  -ms-flex: 1 1 auto;

  -ms-flex-direction: column;

  /* IE10 */;

}

.logo-navbar {
  display: flex;
  vertical-align: middle;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.logo-navbar > img{
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
}
.logo{
  position: absolute;
  color: #fff;
  margin-top: -25px;
  margin-left: -1%;
}

.navbar.sticky > .container-header > .logo {
  margin-top: 0px;
}
.logo img{
  height:25px;
}

.img-logo > a > img{
  width:auto;
  height:60px;
  padding: 0px;
  border-radius: 0px;
  background:transparent;
}
.container-navigation{
  background-color: #2f3562;
}
.text-logo{
  font-style: italic;
  font-family: 'Dancing Script';
  font-size: 12px;
}
.input-icons i { 
  position: absolute; 
  color: #2f3562;
  z-index: 1;
} 

.input-icons { 
  width: 100%; 
  color: #ffff;
  font-size: 12px;
} 

.input-icons > a{ 
  color: #ffff;
} 

.input-icons > a:hover{ 
  color: #ffff;
} 

.icon { 
  padding: 5px 10px; 
  min-width: 40px; 
} 

.input-field { 
  width: 100%; 
  text-indent: 20px;
  color: #2f3562;
  margin-bottom: 0px !important;
  font-size: 13px;
} 

.top-bar-right{
  display: flex;
  justify-content: right;
  vertical-align: middle;
  align-items: center;
  height: 35px;
  padding-left: 75%;
}

.input-icons > img{
  margin-top: -5px;
  width: 12px;
  height: 12px;
}
.icon-section-service {
  text-align: center;
}
.icon-section-service > img{
  width: 75px;
  height:75px;
}
.content-service{
  padding: 0px 10px;
}
.border-content-service{
  border: 2px solid #dbdbdb;
  padding: 0px 10px;
  background: #f0f0f0;

}
.content-service2{
  height: 250px;
  border: 2px solid #dbdbdb;
  padding: 0px 15px;
  margin: 0px;
}
.border-content-service2{
  padding: 20px 10px;
  border: none;
}

.layanan-section{
  width: 20%;
  height: auto;
  float: left;
  padding: 0px 20px;
}
.layanan-section-heading{
  text-align: center;
}
.layanan-section-heading>.layanan-section-heading-title{
  font-size: 16px;
}
.layanan-section-image{
  text-align: center;
}
.layanan-section-image > img{
  width: auto;
  height: 125px;
}
.layanan-section-text {
  text-align: right;
  margin-top: -25px;
  height: 25px;
  padding-right: 5px;
}
.layanan-section-text > a {
  color: #fff;
}

.layanan-section-text > a:hover {
  color: #2f3562;
}

.reason-section{
  width: 14.2%;
  height: auto;
  float: left;
  padding: 0px 20px;
  display: unset;
  margin:0px;
}
.reason-section-image {
  text-align: center;
  margin-bottom: 10px;
}
.reason-section-image > img{
  width: 75px;
  height:75px;
}

.reason-section-heading{
 text-align: center;
 width: 100%;
 height: 40px;
}

.reason-section-heading>.reason-section-title{
  font-size: 11px;
  line-height: 20px;
}
.section-heading-main-reason{
  text-align: center;
}
.section-heading-main-reason > h2{
  font-size: 30px;
}

.section-heading-main-reason > h4{
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 0px;
}

.slick-slide img {
  width: 100%;
  height: auto;
  padding: 15px;
}
.regular.slider.client-image{
  height: 160px;
}
.regular2.slider.client-image{
  height: 160px;
}


ul.plane {

  list-style-type: none;
}

ul.plane > li{
  text-align: left;
  line-height: 20px;
  font-size: 14px;
}

ul.plane > li:before {

  content: '';

  display: inline-block;

  height: 12px;

  width: 12px;

  background-size: 12px;

  background-image: url("../img/icon/plane.png");

  background-repeat: no-repeat;

  margin-right: 5px;

}

.informasi-section{
  overflow: hidden;
  padding: 0px;
}

.informasi-section-content{
  height: 150px;
  overflow-y: scroll;
  margin-right: -15px;
}

.section-heading-news > h2{
  font-size: 18px;
  line-height: 20px;
  margin-top: 10px;
  height: 60px;
}
.icon-section-news > img{
  width: 100%;
  height: 150px;
}

.content-news-isi{
  text-align: justify;
  line-height: 20px;
  font-size: 14px;
}

.footer-kiri > .list-social-media > li > a > img{
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
}
.headnav.hidden-sr > a{
  color: #fff;
  font-size: 12px;
}
.headnav.hidden-sr > .input-icons> a > img{
  width: 15px;
  height: 15px;
  margin-top: -2px;
}

.list-social-media > li{
  float: left;
  padding: 0px 5px;
}
.footer-kiri > ul  {
  color: #fff
}
.footer-kiri > ul > li {
  color: #fff;
  line-height: 17px;
  font-size: 14px;
}
.footer-kiri > ul > li > img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}
.footer-kiri > ul > p{
  padding-left: 25px;
  line-height: 20px;
  padding-bottom: 15px;
}
.footer-kiri > ul > p> a {
  color: #fff;
  line-height: 20px;
}
.footer-kanan > ul  {
  color: #fff
}
.footer-kanan > ul > li {
  color: #fff;
  line-height: 17px;
  font-size: 14px;
}
.footer-kanan > ul > li > img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.footer-kanan > ul > li > p {
  color: #fff;
  padding-left: 25px;
  line-height: 28px;
}

/*.footer-kanan{
  color: #fff;
}
.footer-kanan > div > h4{
  color: #fff;
  margin : 0px;
  font-size: 14px;
  line-height: 17px;
}
.footer-kanan > div > h4 > img{
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
  }*/
  .alert-danger {
    text-align: center;
    padding: 5px;
    width: 100%;
  }
  .map-branch > iframe{
    width: 100%;
    height: 250px;
  }
  .detail-branch > .content-detail-branch {
    width: 100%;
    display: flex;
  }
  .detail-branch > .content-detail-branch > .icon-detail-branch > img{
    width: 25px;
    height: 25px;
    max-width: 25px;
  }
  .detail-branch > .content-detail-branch > .icon-detail-branch {
    width: 30px;
    float: left;
  }
  .section-padding-gallery{
    padding: 50px 50px 50px 50px;
  }
  .gallery-sec{
    padding-bottom: 40px;
    padding-right: 15px;
    padding-left: 15px;
  }
  .content-gallery{
    width: 100%;
    height: 300px;
  }

  .content-gallery > .content-gallery-image {
    width: 100%;
    height: 80%;
    box-shadow: 0 0 8px #333;
    padding: 10px;
  }

  .content-gallery > a:hover {
    -webkit-transform: scale(1.1, 1.1);
  }

  .content-gallery > .content-gallery-image > a > img{
    display: none;
  }

  .content-gallery > .content-gallery-image > a > .content-gallery-image-view{
    height: 50%;
    width: 50%;
    float: left;
  }

  .content-gallery > .content-gallery-image > a.hidden-gallery{
    display: none;
  }

  .content-gallery > .content-gallery-tittle {
   width: 100%;
   text-align: center;
   padding: 10px;
 }

 .content-gallery > .content-gallery-tittle > h4 {
   font-size: 20px;
   margin: 0px;
 }

 .content-gallery > .content-gallery-tittle > p {
   font-size: 12px;
 }

 .content-gallery > .content-gallery-tittle > p > img {
  width: 16px;
}

.get-image-service{
  width: 100%;
  height: 350px;
  text-align: center;
  /*padding: 25px 0px;*/
  margin-bottom: 20px;
}
.get-image-service > a > img{
  height: 350px;
  width: auto;
}


.get-image-profile{
  width: 100%;
  height: 350px;
  text-align: center;
  margin-bottom: 20px;
}
.get-image-profile > a > img{
  height:  350px;
  width: auto;
}

.berita-section{
  width: 100%;
  height: 250px;
  margin-bottom: 20px;
}
.berita-section > .kanan{
  height: 100%;
  padding: 20px 20px 10px 20px;
}
.berita-section > .kiri{
  height: 100%;
  padding: 10px 20px;
}
.berita-section-image{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}
.berita-section-image > a > img{
  height: 200px;
  width: 300px;
}
.berita-section-tittle > h3{
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}
.berita-section-tittle > span > img , .berita-section-detail-tittle> span > img{
  width: 16px;
  height: 16px;
}
.berita-section-content{
  text-align: justify;
}
.berita-section-detail-image > a > img{
  height: 300px;
  width: auto;
}
.berita-section-detail-image{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  padding-bottom: 20px;
}
.berita-section-detail-content{
  padding-bottom: 20px;
}
.icon-share-news {
  padding: 3px;
}
.icon-share-news > img{
  width: 25px;
  height: 25px;
}

.lang-right {
  float: right;
  position: fixed;
  margin-top: 150px;
  height: auto !important;
  width: 30px !important;
  z-index: 1000;
  background: #2f3562;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 0px;
  display: block;
  padding-top: 10px;
  padding-left: 5px;
  z-index: 100;
  display: none;
}
.lang-right.big-size{
  display: block;
  padding-bottom: 5px;
}
.container-reason-section{
  padding: 0px;
}
.container-header{
  padding: 0px 20px !important;
}

.gallery-slider-home{
  height: 180px;
}
.gallery-slider-home > img{
  width: 100%;
  height: 125px;
  padding: 0px 10% !important;
  margin-bottom: 10px;
}
.gallery-slider-home-desc{
  text-align: center;
  height: 25px;
  line-height: 12.5px;
  font-size: 14px;
  color: #000;
}
.container-footer-main{
  padding: 25px 80px 25px 200px !important;
}

.content-service > .section-heading > .section-title.bg{
  background: #2f3562;
  color: #fff;
  margin: 0;
}

.data-section.shipment{
  border: 1px solid #dbdbdb;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.table-detail-resi{
  vertical-align: top;
  text-align: left;
}

.detail-contact{
  text-align: justify;
  padding-top: 25px;
  height: 100%;
}
.detail-contact > .content-detail-contact{
  width: 100%;
  display: flex;
}
.detail-contact > .content-detail-contact.small-contact{
  width: 33%;
  float: left;
  padding-bottom: 0px;
}
.detail-contact > .content-detail-contact >.icon-detail-contact{
  width: 30px;
  float: left;
}
.detail-contact > .content-detail-contact >.icon-detail-contact > img{
  width: 25px;
  height: 25px;
  max-width: 25px;
}

#table-tracking{
  font-size: 12px;
}
#table-resi{
  font-size: 12px;
}
.modal-dialog.cek-resi{
 width: 65% !important;
}
.modal-dialog.cek-tarif{
 width: 65% !important;
}
.modal-dialog.cek-branch{
 width: 65% !important;
}
.modal-dialog.modal-pickup{
 width: 65% !important;
}
#inputPickup.modal-pickup{
  height: 450px;
}
.modal-dialog.modal-booking{
 width: 65% !important;
}
#inputBooking.modal-booking{
  height: 450px;
}
.table-tracking-767{
  display: revert;
}
.table-tracking-600{
  display: revert;
}
.table-tracking-480{
  display: revert;
}
.table-price-480{
  display: revert;
}
.table-price-360{
  display: revert;
}
.footer-container.footer-container-kiri{
  padding-left: 200px;
}
.container.container-cek-branch{
padding: 0px !important;
width: 100% !important;
}
.branch-section{
  height: 400px;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  margin-bottom: 20px;
}

.branch-section > .branch-section2{
  height: 330px;
  overflow-y: scroll;
}
.branch-section > .branch-section2 > .branch-section3{
  padding: 10px 0px;
  border-bottom: 1px solid #ccc;
}
#show-branch > iframe{
  width: 100%;
  height: 400px;
}
.branch-section3 > h4{
  font-size: 18px !important;
}
.branch-section3 > p{
  font-size: 14px !important;
}

.modal-booking-home{
  height: 1000px;
}
.modal-booking-home-form-data{
  height: 350px;
}
.modal-booking-home-form-service{
  height: 400px;
}
 @media (max-width: 1363px) {

  .top-bar-right{
    padding-left: 74%;
  }

  }

  @media (max-width: 1311px) {

  .top-bar-right{
    padding-left: 73%;
  }

  }

  @media (min-width: 1281px) {

    .hidden-lg{
      display:none!important
    }

  }

   @media (max-width: 1263px) {

  .top-bar-right{
    padding-left: 72%;
  }

  }

 @media (max-width: 1218px) {

  .top-bar-right{
    padding-left: 71%;
  }

  .container-footer-main {
    padding: 25px 80px 25px 160px !important;
  }

  }

   @media (max-width: 1176px) {

  .top-bar-right{
    padding-left: 70%;
  }
  .container-footer-main {
    padding: 25px 80px 25px 140px !important;
  }
  }

  




  @media (min-width: 1025px) and (max-width: 1280px) {

    .hidden-lg{
      display:none!important
    }  

  }
  @media  (max-width: 1230px) {
      .footer-container.footer-container-kiri{
      padding-left: 150px;
    }
  }
  @media  (max-width: 1175px) {

    #table-tracking{
      font-size: 11px;
    }


  }
    @media  (max-width: 1150px) {
      .footer-container.footer-container-kiri{
      padding-left: 100px;
    }
  }

   @media (max-width: 1138px) {

  .top-bar-right{
    padding-left: 68%;
  }

  .container-footer-main {
    padding: 25px 80px 25px 120px !important;
  }

  }

  @media  (max-width: 1101px) {
    .layanan-section-heading>.layanan-section-heading-title{
      font-size: 14px;
      line-height: 20px;
    }
    .layanan-section-heading {
      height: 40px;
      margin-bottom: 5px;
    }
    .layanan-section-text {
      font-size: 10px;
    }

    .modal-dialog.cek-resi{
     width: 80% !important;
   }
   .modal-dialog.cek-tarif{
     width: 80% !important;
   }
   .modal-dialog.cek-branch{
     width: 80% !important;
   }
   .modal-dialog.modal-pickup{
     width: 80% !important;
   }
   .modal-dialog.modal-booking{
     width: 80% !important;
   }
 }

 @media  (max-width: 1080px) {

  .navbar-nav > li {
    display: inline-block;
    float: none;
    padding: 0px 0px !important;
  }

  .table-tracking-1075{
    display: none;
  }
  .container.container-cek-branch{
      padding: 0 40px !important;
  }

}

 @media (max-width: 1068px) {

  .top-bar-right{
    padding-left: 67%;
  }

  }

  @media (max-width: 1035px) {

  .top-bar-right{
    padding-left: 65%;
  }

  }
@media  (max-width: 1030px) {
      .footer-container.footer-container-kiri{
      padding-left: 50px;
    }
    .section-heading-news > h2 {
    font-size: 15px;
  }
  }
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px)  {

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
      padding: 15px 10px;
    }

    .navbar-nav > li {
      padding: 0px 5px !important;
    }

    .navbar-default .navbar-nav > li > a {
      font-size: 12px !important;
    }

    .hidden-lg{
      display:none!important
    }
       

  }
  @media (max-width: 1000px){

    .navbar-nav > li {
      padding: 0px 0px !important;
    }

    .reason-section-heading > .reason-section-title {
      font-size: 10px;

    }

    ul.plane > li {
      font-size: 12px;
    }

    .gallery-slider-home-desc {
      font-size: 12px;
    }

    .slick-slide img {

      padding: 10px;
    }

  }
  @media (max-width: 991px){
    .service-container{
      padding: 0px 50px !important;
    }
    .content-service{
      border-right: none !important;
      border-left: none !important;
    }
    .row-button {
      padding-top: 20px;
      text-align: center !important;
    }
    .content-service {
      padding: 20px 10px;
    }
    .content-service.video {
      padding: 0px 20px;
    } 
    .detail-contact > .content-detail-contact.small-contact{
      padding-bottom: 25px;
    }
    .detail-contact{
      padding-right: 30px;
      padding-left: 30px;
    }
    .table-tracking-991{
      display: none;
    }
    #table-tracking{
      font-size: 10px;
    }
    .footer-container.footer-container-kiri{
      padding-left: 15px;
    }
    .container.container-cek-branch{
      padding: 0 20px !important;
    }
    .branch-section3 > h4{
      font-size: 16px !important;
    }
    .branch-section3 > p{
      font-size: 12px !important;
    }
    .container-footer-main {
    padding: 25px 50px 25px 50px !important;
    }
  }
  @media (max-width: 976px) {

  .top-bar-right{
    padding-left: 64%;
  }

  }
  @media (max-width: 950px) {

  .top-bar-right{
    padding-left: 63%;
  }

  }
  @media (max-width: 924px) {

  .top-bar-right{
    padding-left: 61%;
  }

  }
  @media (max-width: 901px){

    .container-header {
      padding: 0 20px !important;
    }
    .navbar-default .navbar-nav > li > a {
      font-size: 11px !important;
    }
    .img-logo > a > img {
      height: 45px;
    }
    .input-icons {
      font-size: 11px;
    }

    .carousel-inner{
      height:400px;
    }

    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

      height: 400px;
    }

    .carousel-indicators {
      margin-bottom: -10px;
    }

    .section-heading-main-reason > h4 {
      font-size: 11px;

    }

    .reason-section {
      width: 20%;
      display: inline-block;
      float: none;
      margin-bottom: 5px;
    }
    .icon-section-news > img {
      height: 125px;
    }
    .content-news-isi {
      font-size: 12px;
    }
  }
   @media (max-width: 861px) {

  .top-bar-right{
    padding-left: 60%;
  }

  }
  @media (max-width: 850px){
    .modal-dialog.cek-resi {
      width: 90% !important;
    }
    .modal-dialog.cek-tarif{
      width: 90% !important;
    }
    .modal-dialog.cek-branch{
      width: 90% !important;
    }
    .modal-dialog.modal-pickup{
     width: 90% !important;
   }
   .modal-dialog.modal-booking{
     width: 90% !important;
   }
 }
 @media (max-width: 839px) {

  .top-bar-right{
    padding-left: 58%;
  }

  }
 @media (max-width: 800px){

  .img-logo > a > img {
    height: 40px;
  }
  .text-logo {
    font-size: 10px;
  }
  .navbar-default .navbar-nav > li > a {
    font-size: 10px !important;
  }
  .top-bar-right {
    padding-right: 0px;
  }
  .table-tracking-800{
    display: none;
  }
  .section-heading-news > h2 {
    font-size: 13px;
  }
}
@media (max-width: 768px){
  
  .container-layanan-utama{
    padding: 0px 50px !important;
  }
  .about-us-advantage-wrap.section-padding-branch{
    padding: 50px 25px !important;
  }
  .section-heading-news > h2{
  font-size: 14px;
  height: auto;
  }
}
@media (max-width: 767px){
  .service-container{
    padding: 50px 150px !important;
  }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    padding: 15px 5px !important;
  }
  .navbar-default .navbar-nav > li > a {
    padding: 15px 5px !important;
  }
  .layanan-section {
    width: 100%;
    padding: 20px;
  }
  .layanan-section-image > img {
    width: 50%;
    height: 200px;
  }
  .layanan-section-heading > .layanan-section-heading-title {
    font-size: 20px;
  }
  .layanan-section-text {
    font-size: 12px;
    padding-right: 26%;
  }

  .informasi-section {
    padding: 0px 25%;
  }
  ul.plane > li {
    font-size: 18px;
    line-height: 30px;
  }
  .content-service{
    padding : 20px 20px;
  }
  .content-service.video{
    padding: 0px 20%;
    margin: 0px;
  }
  .regular.slider.client-image {
    height: 200px;
  }
  .slick-slide img {
    padding: 40px;
  }

  .regular2.slider.client-image {
    height: 330px;
  }
  .gallery-slider-home > img {
    width: auto;
    height: 250px;
    padding: 0px 25% !important;
  }
  .gallery-slider-home-desc {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    padding: 0px 20%;
  }
  .content-news-isi {
    font-size: 14px;
  }
  .icon-section-news > img {
    height: 150px;
  }
  .content-news{
    padding: 10px 25%;
  }

  .footer-kiri > ul > li {
    font-size: 14px;
  }
  .footer-kanan > ul > li {
    font-size: 14px;
  }
  .footer-kanan > ul > li > p {
    line-height: 20px;
  }
  .footer-kiri > ul > p>  a,.footer-kanan > ul > li > p{
    font-size: 12px;
  }
  .content-service2 {
    border: none;
    padding: 0px 20%;
    margin-bottom: 25px;
  }
  .border-content-service2{
    border: 1px solid #dbdbdb;
  }
  .border-content-service2>.section-heading .section-title{
    line-height: 30px !important;
  }
  .content-service.video {
    margin-bottom: 25px;
  } 

  .container-profile, .container-layanan {
    padding: 0 40px;
  }
  .get-image-service > a > img {
    height: 250px;
  }
  .get-image-service {
    height: 250px;
  }
  .gallery-sec{
    padding-right: 20%;
    padding-left: 20%;
  }

  .modal-dialog.cek-resi{
    margin : 50px auto !important;
    width: 90% !important;
  }
  .modal-dialog.cek-tarif{
    margin : 50px auto !important;
    width: 90% !important;
  }
  .table-tracking-767{
    display: none;
  }

  .modal-dialog.cek-branch{
   margin : 50px auto !important;
   width: 90% !important;
 }
 .modal-dialog.modal-pickup{
  margin : 50px auto !important;
  width: 90% !important;
}
.modal-dialog.modal-booking{
  margin : 50px auto !important;
  width: 90% !important;
}
#inputPickup.modal-pickup{
  height: 850px;
}
#inputBooking.modal-booking{
  height: 850px;
}
.modal-booking-home{
  height: 1700px;
}
.modal-booking-home-form-data{
  height: 700px;
}
.modal-booking-home-form-service{
  height: 700px;
}
}
 @media (max-width: 763px) {

  .top-bar-right{
    padding-left: 56%;
  }

  }
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
  */

  @media (min-width: 681px) and (max-width: 767px) {
    .hidden-lg {
      display: none !important;
    }

    .navbar-nav > li {
      display: inline-block;
    }
    .collapse ul {
      float: none;
    }
    .navbar-nav {
      margin:0px;   
    }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
      padding: 0px 15px;
    }

  }
   @media (max-width: 730px) {

  .top-bar-right{
    padding-left: 53%;
  }

  }
  @media (max-width: 683px) {

  .top-bar-right{
    padding-left: 51%;
  }

  }
  @media (max-width: 680px) {
    .hidden-sm{
      display: none !important; 
    }
    .logo {
      position: unset;
      width: 100% !important;
      color: #fff;
      margin: 0px;
      padding: 5px 0px;
    }
    .img-logo > a > img {
      height: 50px;
    }
    .navbar.sticky {
      padding: 0px 0px !important;
    }
    .text-logo {
      font-size: 12px;
    }
    .hidden-topbar{
      display: none;
    }
    .lang-right{
     display: block;
   }
   .lang-right.big-size{
      display: none;
    }
   .container-navigation{
    background-color: #2f3562;
  }
  .carousel-inner{
    height:300px;
  }

  .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

    height: 300px;
  }

  .reason-section-heading > .reason-section-title {
    font-size: 9px;
  }
  .regular.slider.client-image {
    height: 165px;
  }
  .slick-slide img {
    padding: 30px;
  }
  .gallery-slider-home > img {

    padding: 0px 22% !important;
  }
  .container-profile, .container-layanan {
    padding: 0px !important;
  }
  .get-image-service > a > img {
    height: 200px;
  }
  .get-image-service {
    height: 200px;
  }


  .table-tracking-680{
    display: none;
  }
  .lang-right {
    margin-top: 300px;
  }
}
@media (max-width: 625px){
  .reason-section {
    width: 32%;
  }
  .footer-container{
    width: 100%;
  }
  .footer-container.footer-container-extra{
    width: 50%
  }
}
@media (max-width: 600px){
  .layanan-section-image > img {
    width: 50%;
    height: 150px;
  }
  .service-container {
    padding: 50px 75px !important;
  }
  .informasi-section {
    padding: 0px 20%;
  }
  .regular.slider.client-image {
    height: 150px;
  }
  .slick-slide img {
    padding: 20px;
  }
  .gallery-slider-home > img {

    padding: 0px 18% !important;
  }
  .table-tracking-600{
    display: none;
  }
  #table-resi{
    font-size: 10px;
  }
  .section-heading-news > h2{
  font-size: 14px;
  height: auto;
  }
}
@media (max-width: 525px){
  .detail-contact {
    height: 350px;
    margin-bottom: -50px;
  }
  .detail-contact > .content-detail-contact.small-contact {
    width: 50%;
  }
  #table-tracking{
    font-size: 9px;
  }
  .modal-dialog.cek-resi {
    width: 95% !important;
  }
  .modal-dialog.cek-tarif{
    width: 95% !important;
  }
  .modal-dialog.cek-branch {
    width: 95% !important;
  }
  .modal-dialog.modal-pickup{
    width: 95% !important;
  }
  .modal-dialog.modal-booking{
    width: 95% !important;
  }
  .branch-section{
    width: 100%;
  }
  #show-branch{
    width: 100%;
    padding: 0px;
  }
}
@media (max-width: 500px){
  .carousel-inner{
    height:250px;
  }

  .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

    height: 250px;
  }

  .service-container{
    padding: 50px  !important;
  }

  .section-heading-main > h4 {
    font-size: 14px !important;
  }
  .container-layanan-utama {
    padding: 0px 25px !important;
  }
  .layanan-section-image > img {
    width: 75%;
    height: 150px;
  }
  .layanan-section-text {
    font-size: 12px;
    padding-right: 15%;
  }
  .informasi-section {
    padding: 0px 15%;
  }
  .regular.slider.client-image {
    height: 125px;
  }
  .slick-slide img {
    padding: 10px;
  }

  .gallery-slider-home > img {
    padding: 0px 11% !important;
  }
  .gallery-slider-home-desc {
    padding: 0px 13%;
  }
  .content-news {
    padding: 10px 20%;
  }
  .footer-container{
    width: 100%;
  }
  .container-footer-main{
    padding: 25px !important;
  }
  .container-footer-contact{
    width: 33%;
  }
  .gallery-sec{
    padding-right: 10%;
    padding-left: 10%;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {

    .service-container {
      padding: 50px 25px !important;
    }
    .gallery-slider-home > img {
      width: auto;
      height: 250px;
      padding: 0px 9% !important;
    }
    .container-footer-main {
      padding: 25px 25px !important;
    }
    .detail-contact {
      margin-bottom: 0px;
    }

  }
  @media (max-width: 480px){
    .table-tracking-480{
      display: none;
    }
    #table-tracking {
      font-size: 11px;
    }
    .table-price-480{
      display: none;
    }
    .footer-container.footer-container-extra{
    width: 100%
    }
  }
  @media (max-width: 380px){
    .informasi-section {
      padding: 0px 10%;
    }
    .regular.slider.client-image {
      height: 100px;
    }
    .reason-section {
      width: 48%;
    }
    .slick-slide img {
      padding: 7px;
    }
    .gallery-slider-home > img {

      padding: 0px 4% !important;
    }
    .gallery-slider-home-desc {
      padding: 0px 0%;
    }
    .regular2.slider.client-image {
      height: 320px;
    }
    .content-news {
      padding: 10px 10%;
    }
    .content-news-isi {
      font-size: 14px;
    }
    .gallery-sec {
      padding-right: 0%;
      padding-left: 0%;
    }
    .detail-contact > .content-detail-contact.small-contact {
      width: 100%;
    }
    #table-tracking {
      font-size: 11px;
    }
  }


  @media (max-width: 360px)  {
    .service-container {
      padding: 50px 0px !important;
    }
    .regular2.slider.client-image {
      height: 300px;
    }
    .container-footer-contact{
      width: 100%;
    }
    .container-footer-main {
      padding: 25px 25px !important;
    }

    .footer-kiri > ul > li {
      font-size: 16px;
    }
    .footer-kanan > ul > li {
      font-size: 16px;
    }
    .footer-kiri > ul > p>  a,.footer-kanan > ul > li > p{
      font-size: 14px;
    }
    #table-tracking {
      font-size: 10px;
    }
    #table-resi {
        font-size: 9px;
    }
    .modal-dialog.cek-tarif > .modal-content{
     padding: 20px 10px !important;
    }
    .table-price-360{
      display: none;
    }
    .gallery-slider-home > img {
      width: auto;
      height: 200px;
    }
  }
  @media (max-width: 340px) {
   #table-tracking {
    font-size: 9px;
  }
}
 @media (max-width: 320px) {
.gallery-slider-home > img {
      width: auto;
      height: auto;
    }
    .gallery-slider-home-desc {
    font-size: 14px;
    }
  }
@media (max-width: 318px) {
  .lang-right {
    margin-top: 250px;
  }
  .carousel-inner{
    height:200px;
  }

  .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

    height: 200px;
  }
  .informasi-section {
    padding: 0px 5%;
  }
  .content-news {
    padding: 10px 7%;
  }
  .content-news-isi {
    font-size: 14px;
  }
  #table-tracking {
    font-size: 8px;
  }
}

@media (max-width: 250px){
  .reason-section {
    width: 50%;
  }
}