/*
@font-face {
  font-family: "Aleo";
  src: url(../fonts/aleo/Aleo-Regular.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Aleo Bold";
  src: url(../fonts/aleo/Aleo-Bold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Teko Reguler";
  src: url(../fonts/teko/Teko-Regular.ttf);
  format: "ttf"; }
@font-face {
font-family: "Opensans";
  src: url(../fonts/opensan/OpenSans-Regular.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Thin";
  src: url(../fonts/raleway/Raleway-Thin.ttf);
  format: "ttf"; }
@font-face {
  font-family: "raleway-light";
  src: url(../fonts/raleway/Raleway-Light.ttf);
  format: "ttf"; }
@font-face {
  font-family: "raleway-bold";
  src: url(../fonts/raleway/Raleway-Bold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Light";
  src: url(../fonts/opensan/OpenSans-Light.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Semibold";
  src: url(../fonts/opensan/OpenSans-Semibold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Bold";
  src: url(../fonts/opensan/OpenSans-Bold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Extrabold";
  src: url(../fonts/opensan/OpenSans-ExtraBold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Italic";
  src: url(../fonts/opensan/OpenSans-Italic.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Opensans Bold Italic";
  src: url(../fonts/opensan/OpenSans-BoldItalic.ttf);
  format: "ttf"; }
@font-face {
  font-family: "pala";
  src: url(../fonts/pala.ttf);
  format: "ttf"; }
@font-face {
  font-family: "vintage";
  src: url(../fonts/octin.ttf);
  format: "ttf"; }
  @font-face {
    font-family: "century";
    src: url(../fonts/CenturyGhotic.ttf);
    format: "ttf"; }
    @font-face {
      font-family: "arial";
      src: url(../fonts/arial.ttf);
      format: "ttf"; }
@font-face {
  font-family: "helvetica";
  src: url(../fonts/Helvetica.ttf);
  format: "ttf"; }
*/
@font-face {
  font-family: "Latoregular";
  src: url(../fonts/Lato-Regular.ttf);
  format: "ttf"; }
  
    body{
      font-family:'Latoregular' !important;
    }

   #backtotop {
    display: inline-block;
    background-color: #000000;
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 4px;
    margin: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: background-color .3s;
    z-index: 1000;
  }
#backtotop:hover {
  cursor: pointer;
  background-color: #333;
}
#backtotop:active {
  background-color: #555;
}

#backtotop::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 35px;
  color: #fff;
}

    .bg-abu-home{
      background-color: #d3d3d3;
    }

    .bg-abu{
      background-color: #2d343c;
    }

    .less-padd{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }

    .less-padd2{
      padding: 15px 0 7.5px !important;
    }

    .less-padd3{
      padding: 0px 3px !important;
    }

    .less-padd4{
      padding: 0px 20px !important;
    }


    .container-jeda{
      margin-top:15px;
    }
    .merah{
      background: red;
    }
    .biru{
      background: blue;
    }
    .kuning{
      background: green;
    }
    .poling{
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
    }

    #menu-mobil .menu-panel {
        background: #333;
        width: 0px;
        overflow: auto;
        transition: all 0.5s ease 0s;
        height: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
        .menu-header .menu-panel div.sosmed {
          color: #fff;
          padding: 10px 15px; }
          .menu-panel div.sosmed p {
            margin-left: 5px; }
          .menu-panel div.sosmed a {
            display: inline-block;
            padding: 0; }
            .menu-panel div.sosmed a i {
              margin: 0 5px;
              font-size: 20px; }
        .menu-panel div.bahasa {
          padding: 5px 20px 0; }
          .menu-panel div.bahasa p {
            color: #fff; }
      .menu-panel h3 {
        font-size: 18px;
        padding: 20px 0;
        text-align: center;
        color: #fff;
        font-family: "Aleo Extrabold"; }
      .menu-toc {
        padding: 0;
        list-style: none; }
        .menu-toc div.sub-menu {
          background-color: #333;
          padding-left: 12px;
          display: none; }
        .menu-toc li:first-child {
          padding: 10px 20px;
          border-bottom: 1px solid #090524; }
          .menu-toc li:first-child form i {
            font-size: 20px;
            color: #fff; }
          .menu-toc li:first-child form input {
            background: #333;
            border: none;
            color: #fff;
            padding: 5px;
            margin-left: 8px;
            width: 80%; }
      .menu-toc li a {
        text-decoration: none;
        display: block;
        color: #fff;
        font-size: 1.1em;
        line-height: 3.5;
        padding: 0 20px;
        cursor: pointer;
        background: #333;
        border-bottom: 1px solid #fff; }
        .menu-toc li .a {
            text-decoration: none;
            display: block;
            color: #fff;
            font-size: 1.1em;
            line-height: 3.5;
            padding: 0 20px;
            cursor: pointer;
            background: #333;
            border-bottom: 1px solid #fff;
        }
      .menu-toc li a:hover,
      .menu-toc li.menu-toc-current a {
        background: #ccc;
        color: #999;
      }
      .menu-panel div a {
        text-transform: capitalize;
        font-size: 12px;
        padding: 10px 20px;
        display: block;
        border: none;
        color: #fff;
        letter-spacing: 1px;
        font-weight: 600;
        text-shadow: 0 1px rgba(255, 255, 255, 0.2); }
      .menu-panel div a:hover {
        text-decoration: none;
        background: inherit;
        color: #fff;
        text-shadow: none; }
        .burger-menu {
          float: left;
        }
        #ngumpet img{
          width: 100%;
        }
        #ngumpet{
          padding: 10px;
        }

        #menu-mobil{
          background: #900;
          position: fixed;
          width: 100%;
        }

        .burger-menu span {
          cursor: pointer;
          line-height: 50px;
          font-size: 25px;
          color: #fff;
          text-decoration: none;
        }

        @media only screen and (max-width:600px) {
            .home-page, .company-page, .product-page, .activity-page, .contact-page{
              padding-top: 17.5%;
            }
        }

        @media only screen and (max-width:1175px) and (min-width:601px) {
            .home-page{
              padding-top: 15%;
            }
            .contact-page{
              padding-top: 10%;
            }
            .product-page{
              padding-top: 10%;
            }
        }

        @media only screen and (max-width:1175px) and (min-width:735px) {
            .activity-page{
              padding-top: 15%;
            }
        }

        @media only screen and (max-width:734px) and (min-width:0px) {
            .activity-page{
              padding-top: 5%;
            }
        }


/* header */
    .navbar {
      overflow: hidden;
      background-color: #000000;
      border-radius: 0px;
      margin-bottom: 0px;
    }

    .navbar a {
      float: left;
      font-size: 14px;
      color: #333;
      font-family: 'Latoregular';
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-weight: bold;
    }
    .navbar a.search {
      float: left;
      font-size: 16px;
      color: white;
      width: 150px;
      text-align: center;
      padding: 8px 0px;
      text-decoration: none;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 14px;
      border: none;
      outline: none;
      color: #333;
      padding: 14px 16px;
      background-color: inherit;
      font-family: 'Latoregular';
      margin: 0;
      font-weight: bold;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
      color: #fff;
    }

    .navbar .menu-toc-current{
      color: #fff;
      font-weight: bold;
    }

    .dropdown-content {
      display: none;
      position: fixed;
      background-color: #f9f9f9;
      min-width: 52%;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 99;
      opacity: .9;
      font-family: "arial";
      margin-top: 2px;
        width: 97%;
        left: 0;
        padding: 1% 0;
        text-align-last: center;
        margin: 0 1.5%;
        background-color: #fff;
    }

    .dropdown-content1 {
      display: none;
      position: fixed;
      background-color: #f9f9f9;
      /* min-width: 100%; */
      /* left: 0; */
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 99;
      opacity: .9;
      font-family: "arial";
      margin-top: 2px;
    }

    .dropdown-content a, .dropdown-content1 a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      font-family: "lato-regular";
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover span {
        background-color: #ccc;
        color: #333 !important;
        border-radius: 25px;
        padding: 5px;
    }

    .dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content1 {
      display: block;
      transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
    }
    .dropdown .dropdown-menu {

    }

    .dropdown.open .dropdown-menu {
        max-height: 300px;
        opacity: 1;
    }


    /* home */

    .owl-dot {
      display: inline-block;
    }
    .owl-dots{
      text-align: center;
      position: relative;
      bottom: 5px;
      margin-top: -27px;
    }
    .owl-dots .owl-dot span {
      background: none repeat scroll 0 0 ;
      border-radius: 20px;
      border: solid 2px gray;
      display: block;
      height: 12px;
      margin: 5px 7px;
      opacity: 1;
      width: 12px;
    }
    .owl-dots .active span{
      background: none repeat scroll 0 0 #fff;
      border: #fff;
    }







    /* Product category */
    .content-category{
      padding-top: 30px;

    }
    .content-category img{
      opacity: 1;
    }
    .content-category .container .title{
      text-align: center;
    }


    .overlay {
      position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
      opacity: 1;
      transition: .5s ease;
      /* background: rgba(0,0,0,.5); */
      padding: 0px;
}
    .kotak:hover .overlay {
      opacity: 1;
      background: transparent;
    }
    .kotak:hover .overlay2 {
      opacity: 1;
    }

    .kotak:hover .overlay1 {
      opacity: .5;
    }

    .text {
      color: white;
      font-size: 18px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      /*padding: 30%;*/
      font-family: "raleway-bold";
      text-shadow: 2px 1px 1px black;
      width: 100%;
      letter-spacing: 2px;
    }


    .text:hover{
      text-decoration: none;
      color: #fff;
    }




/* Product */
.nav-tabs-custom{
  font-family: "arial";
}
.prod , .prod-tit{
  border: solid 1px #eee;
}

div#dat04.tab-pane.active > div.row.video > div.col-lg-12 > div.box-video{
  text-align:center;
}


.perpro{
  padding: 0px 5px;
  margin-bottom: 25px
}

.perpro a:hover  .prod-tit{
  background: #f03a10;
}


.perpro a:hover{
  text-decoration: none;
}

.pls i img {
    width: 50px;
    cursor: pointer;
}
.pls i {
    list-style-type: none;
    margin: 0px 5px;
}

.pls i.active img {
    border: solid 2px #f03a10;
}
.pls i img {
    border: solid 2px gray;
}

.pls {
    padding: 25px 0px;
    position: relative;
    z-index: 99;
}


ul.subcat li{
  text-decoration: none;
  list-style-type: none;
}

ul.subcat li a{
  text-decoration: none;
  color: #333
}

ul.subcat li.subsel a{
  color: #f03a10;
}

ul.subcat li.subsel {
list-style-type: disclosure-closed;
}

@media only screen and (min-width:668px) {
.item img{
  /*height: 500px;*/
}
}

@media only screen and (min-width:600px) and (max-width:667px) {
    .item img{
      /*height: 300px;*/
    }
}

@media only screen and (max-width:599px) {
.item img{
  /*height: 200px;*/
}
}

.data{
  background: #f4f4f4;
  color: black;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    color : #fff;
    background: #f03a10;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {

  color : #fff;
  background: #cc0000;
    cursor: default;
    border: 1px solid #ddd;
        border-bottom-color: rgb(221, 221, 221);
    border-bottom-color: transparent;

}

.nav .active .data{
  color : #fff;
  background: #cc0000;
}

.box-activity-pro{
  padding: 15px;
}
.prod-tit p:first-child{
  color: #c00;
}

.prod-tit{
  padding: 5px;
  height: 110px;
}

.prod-tit p{
  color: #333;
  font-size: 12px;
}

.tab-content .tab-pane{
  padding: 25px 20px;
}



/* NEWS */
.desk{
  padding: 15px;
}

.desk p{
  font-size: 12px;
}

.desk h3{
  border-bottom: solid 1px #f4f4f4;
  font-family: "Opensans";
  font-size: 14px;
  font-weight: bold;
  height: 60px;
}

tr.rec td a{
  text-decoration: none;
  color:#000000;
}

tr.rec td a:hover{
  color: red;
}

.teks{
  padding: 5px 25px;
  background: #004cb8;
  position: absolute;
  top: 25px;
  border-radius: 5px;
  left: 25px;
  color: #fff;
  font-family: "Opensans";
}

.tekss{
  padding: 5px 25px;
  background: #004cb8;
  position: absolute;
  top: 40px;
  border-radius: 5px;
  left: 25px;
  color: #fff;
  font-family: "Opensans";
}

.activity{
  background: #f4f4f4;
}

div.desc p:first-child{
  color: #c6c6c6;
}

div.desk h3 a,div.desc h4 a{
  color: #333;
  text-decoration: none;
  line-height: 20px;
}

div.desk h3 a:hover,div.desc h4 a:hover{
  color: #fe0000;
}

.box-activity{
  background: #fff;
  margin :15px 0px;
}

.deskart{
  background: #ccc;
  color: #fff;
  padding: 15px 15px;
}
.deskart h4{
  color: #666;
  font-size: 8px;
  min-height: 20px;
  margin:0;
}
.deskart h2{
  color: #333;
  font-size: 10px;
  margin:0;
}

.rec{
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

.rec img{
  float:left;
  margin-right: 5px;
}

.item-art{
  padding: 15px;
}

.item-art .box-activity .desc{
  padding: 15px;
}
#banner-slider-demo-1 .owl-item img {
    display: block;
    margin: auto;
    width: 100%;
}


    /* Contact */
    iframe{
      width: 100%;
      height: 100vh;
    }

    /* ABOUT */

    .activity-page .content {
      background: #f4f4f4;
    }

    .activity-page .content .container{
      background: #ffffff;
    }

    .judul h1{
      font-family: "raleway-bold";
      color: #fe0000;
      font-size: 22px;
    }

    .judul h1 span{
      font-family: "raleway-bold";
      color: #000;
      font-size: 25px;
    }

/* contact */


.contact-page .contact {
  background: #f4f4f4;
}

.contact-page .contact .container{
  background: #ffffff;
}

.con{
padding: 5px 20px;
font-weight: bold;
border-radius: 6px;
margin: 25px 0px;
}

/* footer */
.footer{
  background: #d3d3d3;
  padding: 25px 0px;
}


/* pagination */
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #f03a10;
  border-color: #f03a10;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.img-center{
  margin: 0 auto
}

.img-magz{
  max-height: 275px;
  margin: 0 auto;
}

.img-brand{
  height: 131px;
  margin: 0 auto;
}


/*Untuk tabulasi di modul brand*/
/* used for sidebar tab/collapse*/
.panel-heading {
    padding: 0
}
.panel-heading a {
    display: block;
    padding: 7px 10px;
}
.panel-heading a.collapsed {
    background: #fff
}
.panel-heading a {
    background: #f7f7f7;
    border-radius: 5px;
}
.panel-heading a:after {
    content: '-'
}
.panel-heading a.collapsed:after {
    content: '+'
}
.nav.nav-tabs li a,
.nav.nav-tabs li.active > a:hover,
.nav.nav-tabs li.active > a:active,
.nav.nav-tabs li.active > a:focus {
    border-bottom-width: 0px;
    outline: none;
}
.nav.nav-tabs li a {
    padding: 12px 7px;
    font-size: 14px;
    font-weight: bold;
    background: #999;
}
.tab-pane {
    background: #fff;
    padding: 10px;
    border: 1px solid #999;
    margin-top: -1px;
    height: 875px;
    overflow: scroll;
    overflow-x: hidden;
}


@media (max-width: 991px) {
  .visible-tabs {
    display: none;
  }
}

@media (min-width: 992px) {
  .visible-tabs {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .hidden-tabs {
    display: none !important;
  }