/*============================SLIDE CSS============================*/
/*@media only screen and (max-width : 1660px),
only screen and (max-device-width : 1660px){
  .carousel-indicators li {
      border-radius: 1px;
      width: 35px;
  }.carousel-indicators .active {
      background: #2a761e;
      width: 35px;
  }
}
@media only screen and (max-width : 1300px),
only screen and (max-device-width : 1300px){
  .carousel-indicators li {
      border-radius: 1px;
      width: 35px;
  }.carousel-indicators .active {
      background: #2a761e;
      width: 35px;
  }
}*/
@media only screen and (max-width : 1200px),
only screen and (max-device-width : 1200px){
  .carousel-indicators li {
      border-radius: 1px;
      width: 35px;
  }.carousel-indicators .active {
      background: #2a761e;
      width: 35px;
  }
}
@media only screen and (max-width : 675px),
only screen and (max-device-width : 675px){  
  .carousel-indicators li {
    border-radius: 0px;
      width: 20px;
      height: 5px;
  }.carousel-indicators .active {
      background: #2a761e;
      width: 20px;
      height: 5px;
  }.carousel-indicators { 
      bottom: 0px;
  } 
}
/*============================SLIDE CSS============================*/ 
.kategori{
  background: #f5f5f5;padding: 0 0 0 13px;font-size: 9px;width: 100%;
}
.aspan{
  font-size: 12px;
  padding: 0;  
  float: left;
  color: #0041ff;
}  
#display {  
    z-index: 9999; 
    max-height: 260px; 
    overflow: auto;
    max-width: 92%; 
    margin-left: 1.2%;
    border-left: 2px solid #417ee3;
    border-bottom: 2px solid #417ee3;
}  
.scrool__PDO a{
  text-decoration: none;
  color: #000; 
  margin: 0;
  padding: 0; 
}
.scrool__PDO {
    width: 1100px;
    padding: 3px 5px 2px 10px;
    background-color: #fff;
    /* border: 2px solid #CCCCCC; */
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 15px;
    color: #111;
    background-color: #fff;
    overflow: auto; 

}
/*pencarian css live*/
.spacii{
  margin-bottom: 15px;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
/*date*/
.post-date2 { 
    width: auto; 
    color: #444; 
}.post-date2 .day {
    font-size: 16px;
    /*font-weight: 700;*/
    display: block;
    letter-spacing: 1px;
}.post-date2 .month {
    display: block;
    /*text-transform: uppercase;*/
    line-height: 10px;
    font-size: 12px;
    /*font-weight: 800;*/
    /*letter-spacing: 1px;*/
}.post-date2 .year {
    display: block;
    text-transform: uppercase;
    line-height: 10px;
    font-size: 8px;
    letter-spacing: 1px;
}
/**/
.pos{
  margin: 6px 0 0 0;
  text-align: center;
}.carding{
  background-color: #fff;
      /*box-shadow: rgba(57, 70, 84, 0.15) 0px 4px 24px;*/
    border: 0;
  margin: 5px 0 5px 0;
  padding: 10px 10px 5px 20px;
}.cardingx{
  background-color: #fff;
  /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0.1px 10px 0 rgba(0, 0, 0, 0.19);*/
     margin: 10px 0 0 0;
     padding:10px 10px 10px 3px; 
}
/*============================LAYANAN CSS============================*/

/*============================LAYANAN CSS============================*/

/*============================== untuk size font =======================================*/
#content{
    padding: 10px; 
    border: 0px solid #ccc;
}
/*#besarkan, #kecilkan{
    padding: 5px;
    margin: 10px 5px 0 0;
    background: #eee;
    border: 1px solid #ccc;
    text-decoration: none;
}*/
/*============================== untuk size font =======================================*/
/*============================== untuk scrolltoTOP script =======================================*/
  #myBtn {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}
/*============================== untuk scrolltoTOP script =======================================*/

.theme_main_wrapper {

  padding: 0px;
  background: #eeeeee;

}

.theme_header {

  text-align: center;
  background: #171717;
  padding: 25px 0px 25px 0px;

}

.theme_header img {

  width: 150px;

}

.theme_header h3 {

  color: #ffffff;
  font-weight: 800;
  font-family: 'Open Sans', sans-serif;

}

.theme_navbar_wrapper{

  border: 0;
  padding: 10px 0 0 0;
  background: #000000;
  
}

.theme_main_menu_bar{

  border:0;
  border-radius:0;
  margin-bottom:0;
  font-weight:bold;
  text-align:center;
  background:transparent;

}

.theme_menu_bar_header>button>span,
.theme_menu_bar_header>button>span:hover{

  background:#ffffff!important;

}

.theme_menu_bar_toggle,
.theme_menu_bar_toggle:visited{

  margin-top:10px;
  border:none!important;
  border-radius:0!important;
  background:#3e4548!important;
  -webkit-transition:all .5s ease-out 0s;
      transition:all .5s ease-out 0s;

}

.theme_menu_bar_toggle:active,
.theme_menu_bar_toggle:hover,
.theme_menu_bar_toggle:focus{

  background:#ced4df!important;

}

.theme_menu_collapse{

  border-top:none !important;

}

.theme_menu_bar_nav{

  float: none;
  display: inline-block;

}

.theme_menu_bar_nav>li>a:link,
.theme_menu_bar_nav>li>a:visited{

  font-size:13px;
  padding-top:20px;
  font-weight:500;
  padding-bottom:20px;
  color:#ffffff!important;
  font-family: 'Open Sans', sans-serif;
  background:transparent!important;

  -webkit-transition:color .3s ease-out 0s;
      transition:color .3s ease-out 0s;

}

.theme_menu_bar_nav>li>a:active,
.theme_menu_bar_nav>li>a:hover,
.theme_menu_bar_nav>li>a:focus{

  color:#feb600!important;
  background:transparent!important

}

.sz-navbar-direction-icon{

  margin-left:5px;
  font-size:8px!important;

}

.theme_navbar_wrapper.affix{

  top:0;
  width:100%;
  z-index:10;
  position:fixed;
  border-bottom:0;
  background:rgba(0,0,0,0.8);
  -webkit-transition: all ease-out .5s;
      transition: all ease-out .5s;

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

  .theme_navbar_wrapper.affix {

    position:static

  }

}

.theme_carousel_intro {

  color: #171717;
  background: #feb600;
  padding: 25px 50px 25px 50px;

}

.theme_carousel_intro > hr {

  width: 10%;
  border: 1px solid #feb600;

}

.theme_carousel_intro h1 {

  font-weight: 700;
  font-family: 'Open Sans', sans-serif;

}

.theme_carousel_intro p {

  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 35px;
  font-family: 'Open Sans', sans-serif;

}

.theme_carousel_intro a,
.theme_carousel_intro a:visited {

  width: 150px;
  height: 50px;
  display: block;
  color: #feb600;
  line-height: 50px;
  text-align: center;
  background: #171717;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;

  -webkit-transition: all ease-out .5s;
      transition: all ease-out .5s;

}

.theme_carousel_intro a:hover,
.theme_carousel_intro a:active {

  background: rgba(23, 23, 23,0.8);

}

.theme_features_wrapper {

  text-align: center;
  background: #171717;
  padding: 25px 0px 25px 0px;

}

.theme_features_wrapper > hr {

  width: 10%;
  border: 1px solid #feb600;

}

.theme_features_wrapper h1 {

  color: #ffffff;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
}

.theme_features_list {
  
  padding: 0px;
  color: #ffffff;
  list-style-type: none;

}

.theme_features_list li {
  
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;

}

.theme_demos_wrapper {

  padding: 50px 100px 50px 100px;

}

.theme_demos_wrapper h1{

  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;

}

.theme_demos_wrapper > hr {

  width: 5%;
  margin-bottom: 50px;
  border: 2px solid #feb600;

}

@media only screen and (max-width: 480px) {


  .theme_demos_wrapper h1{

    font-size: 25px;

  }
  
  .theme_demos_wrapper > hr {

    width: 100%;

  }

}

.theme_demos_columns {

  padding-top: 25px;
  text-align: center;
  padding-bottom: 25px;

}

.theme_demos_columns h4 {

  font-weight: 800;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;

}

.theme_demos_columns div {

  padding: 5px;
  border-radius: 5px;
  background: #171717;

}

.theme_demos_columns div img {

  width: 100%;
  border-radius: 5px;

}

.theme_footer_wrapper {

  padding: 25px;
  background: #171717;

}

.theme_footer {

  margin: auto;
  width: 200px;
  text-align: center;

}

.theme_footer ul {

  list-style-type: none;
  padding: 0px;

}

.theme_footer ul li {

  margin-top: 5px;

}

.theme_footer ul li a {

  padding: 15px;
  color: #171717;
  display: block;
  background: #feb600;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;

  -webkit-transition: all ease-out .5s;
      transition: all ease-out .5s;

}

.theme_footer ul li a:hover,
.theme_footer ul li a:active {

  color: #feb600;
  background: rgba(254, 182, 0,0.7);

}

.theme_footer_wrapper h5 {

  color: #ffffff;
  margin-top: 25px;
  text-align: center;
}


.theme_new {

  position: relative;

}

.theme_new>span {

  top: 0px;
  left: 0px;
  color: #ffffff;
  background: red;
  font-weight: 800;
  position: absolute;
  text-transform: uppercase;
  padding: 5px 15px 5px 15px;
  border-radius: 5px 0px 0px 0px;
  font-family: 'Open Sans', sans-serif;

}

/*========== DEMOS COLUMNS CAROUSEL ==========*/

.theme_columns_carousel {

  padding: 50px;
  background: #eeeeee;

}

.theme_columns_carousel h1 {

  font-weight: 800;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;

}
/*========== DEMOS COLUMNS CAROUSEL ==========*/















/*========== RUNNING TEXT ==========*/
/
#breaking-news-colour {
  height: 10px; 
}
.breaking-news-headline {
      /*
      color: white;
      font-family: 'Montserrat', sans-serif; 
      position: absolute; 
      margin-right: 100px;
      */
      margin-left: 100px;
          background: #2a771e;
          color: white;
          display: block;
          font-family: 'Montserrat', sans-serif;
    }

    .breaking-news-title {
      background-color: #FFEA00;
      color: #000;
      display: block; 
      font-family: 'Montserrat', sans-serif; 
      position: absolute;  
      z-index: 3; 
      padding: 9px 7px 8px 7px;
    }

/*untuk panjang runing*/  
.animated {
  -webkit-animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.2s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
}

.delay-animated {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.4s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.3s; 
  animation-delay: 0.3s;
}

.scroll-animated {
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1; 
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s; 
  animation-delay: 0.5s;
}

.delay-animated2 {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.4s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1; 
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s; 
  animation-delay: 0.5s;
}

.delay-animated3 {
  -webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 5s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1; 
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s; 
  animation-delay: 3s;
}

.fadein {
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
}

@-webkit-keyframes fadein {
  from {
    margin-left: 1000px
  }
  to {
    
  } 
}  
@-moz-keyframes fadein {
  from {
    margin-left: 1000px
  }
  to {
    
  }  
}

.slidein {
  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
  -o-animation-name: slidein;
  animation-name: slidein;
}

@keyframes marquee {
  0% { 
    left: 0;
  }
  20% { 
    left: 0; 
  }
  100% { left: -100%; }
}

.marquee {
  animation: marquee 10s linear infinite;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -webkit-animation-delay: 0.5s; 
  animation-delay: 3s;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 800px
  }
  to {
    margin-top: 0px
  } 
}  
@-moz-keyframes slidein {
  from {
    margin-left: 800px
  }
  to {
    margin-top: 0px
  }  
}

.slideup {
  -webkit-animation-name: slideup;
  -moz-animation-name: slideup;
  -o-animation-name: slideup;
  animation-name: slideup;
}
@-webkit-keyframes slideup {
  from {
    margin-top: 30px
  }
  to {
    margin-top: 0;
  } 
}  
@-moz-keyframes slideup {
  from {
    margin-top: 30px
  }
  to {
    margin-top: 0;
  } 
}
a marquee{ 
      color: #fff;
    padding: 10px 0 7px 0
}
/*@media only screen and (max-width : 1660px),*/
/*@media only screen and (max-width : 1660px),
only screen and (max-device-width : 1660px){
    a marquee{
      width: 1070px; 
    }#breaking-news-container {
      height: 40px;
       width: 1185px;
      background: #2a771e; 
      position: absolute; 
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 -5;
         max-width: 88.5%;
        width: 87%;
        background-color: #fff;
    }.card {padding: 0px 10px 20px 10px;}
}*/
         /*max-width: 74%;*/
          /*mn_menu*/
        /*-moz-max-content:90%;*/
@media only screen and (max-width : 1200px),
only screen and (max-device-width : 1200px){
    .col-lg-9{
      margin-bottom: 9px
    }
    a marquee{
      width: 1070px; 
    }#breaking-news-container {
      height: 40px;
       width: 1185px;
      background: #2a771e; 
      position: absolute; 
    }.menu-fixed{
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 -5;
         max-width: 86.5%;
          /*mn_menu*/
        /*-moz-max-content:90%;*/
        width: 100%;
        background-color: #fff;
    }.card {padding: 0px 10px 20px 10px;}
} 
@media only screen and (max-width : 915px),
only screen and (max-device-width : 915px){  
    a marquee{
        width: 430px;  
    } #breaking-news-container { 
        width: 750px ;
        background: #2a771e; 
      position: absolute; 
      height: 40px;
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 0;
         max-width: 75%; 
        width: 100%;
        background-color: #fff;
    }
} 

@media only screen and (max-width : 915px),
only screen and (max-device-width : 915px){ 
	a marquee{
        width: 645px;  
    } #breaking-news-container { 
        width: 750px ;
        background: #2a771e; 
      position: absolute; 
      height: 40px;
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 0;
         max-width: 100%; 
        width: 100%;
        background-color: #fff;
    }
}

@media only screen and (max-width : 675px),
only screen and (max-device-width : 675px){  
    a marquee{
        width: 570px;  
    } #breaking-news-container { 
        width: 675px ;
        background: #2a771e; 
      position: absolute; 
      height: 40px;
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 0;
         max-width: 100%; 
        width: 100%;
        background-color: #fff;
    }.card {padding: 0px 10px 45px 10px;}
} 

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){  
    a marquee{
        width: 430px;  
    } #breaking-news-container { 
        width: 530px  
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 0;
         max-width: 100%; 
        width: 100%;
        background-color: #fff;
    }.card {padding: 0px 10px 45px 10px;}
} 

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px){  
    a marquee{
        width: 390px;  
    } #breaking-news-container { 
        width: 495px  
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 -18%;
         max-width: 100%; 
        width: 100%;
        background-color: #fff;
    }.card {padding: 0px 10px 45px 10px;}
} 

@media only screen and (max-width : 427px),
only screen and (max-device-width : 427px){  
    a marquee{
        width: 305px;  
    } #breaking-news-container { 
        width: 410px; 
        background: #2a771e; 
      position: absolute; 
      height: 40px;
    }.menu-fixed {
        position: fixed;
        z-index: 1000;
        top: 0;
        margin: 0 0 0 -18px;;
         max-width: 100%; 
        width: 100%;
        background-color: #fff;
    }.card {padding: 0px 10px 70px 10px;}
}
/*========== RUNNING TEXT DAN FIXXED==========*/


/*========== modal popup pertama kali ==========*/

@media screen and (min-width: 768px) {
    .modal-dialog {
        right: auto;
        left: auto;
        width: 50%;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
    background-color: hsla(0, 0%, 0%, 0.60);
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.modal-dialog {
    z-index: 1050;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}
.modal-content {
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
}
.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #0099ff;
    color: #fff;
}
.modal-header {
    min-height: 16.428571429px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-title,
.modal-body,
.modal-footer {
    font-family: 'Roboto Condensed', Helvetica, sans-serif;
}
.modal-title {
    margin: 0;
    line-height: 1.846;
    color: #fff;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/*========== modal popup pertama kali ==========*/
/*MODAL*/
/*intinya*/

/*========== CSS TENGGAH 9 ==========*/

.thumbnail {
    padding: 0px;
}
.col-md-6,
.col-sm-6 {
    padding-left: 5px;
    padding-right: 5px;
}
.cardkiri {
    border-radius: solid 1px #909090;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0.1px 10px 0 rgba(0, 0, 0, 0.19);*/
}
.cardkiri {
    display: block;
    padding: 0 5px 5px 5px;
    margin-bottom: 23px;
    line-height: 1.846;
    background-color: #ffffff;
    border: 1px solid #f3f3f3;
    box-shadow: 0 4px 2px -2px grey;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.p_font {
    font-size: 18px;
    padding: 0 10px 5px 10px;
    font-weight: 800;
    line-height: normal;
}
p a:hover,
a:focus {
    text-decoration: none;
}
.p_font a {
    color: #000;
}
.btn_readmore {
    border-top: 1px solid #d6e1ef;
    padding: 10px 0 10px 0;
}
.heading {
    text-align: left;
    margin: 5px 0 0 5px;
}
.heading {
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.heading:after {
    content: " ";
    display: block;
    width: 100px;
    height: 2px;
    margin: 6px 0 15px 0;
    background: #ff7473;
}
.ponts {
    color: #fff;
    font-size: 25px;
    font-family: 'Titillium Web', sans-serif;
    padding: 18px 0 0 0;
    text-align: center;
}
.blinkingleng {
    animation: blinkingleng-animation 1s steps(5, start) infinite;
    -webkit-animation: blinkingleng-animation 1s steps(5, start) infinite;
}
.kotak_simpeg {
    height: 75px;
    border: 0px solid black;
    background: #556270;
    background: -webkit-linear-gradient(to right, #556270, #ff6b6b);
    background: linear-gradient(to right, #556270, #ff6b6b);
}
.thumbnail {
    /*border-radius: solid 1px #909090;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0.1px 10px 0 rgba(0, 0, 0, 0.19);*/
}
.centerer {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
article img {
    width: 435px;
    display: block;
}
.tengah {
    font-size: 12;
    padding: 5px;
}
.card-title {
    font-family: 'Gotham Light', gotham-light;
    font-size: 12px;
    font-weight: 900;
}
.card {
    background-color: #fff;
        /*box-shadow: rgba(57, 70, 84, 0.15) 0px 4px 24px;*/
    border: 0;
    /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0.1px 10px 0 rgba(0, 0, 0, 0.19);*/
    /*padding: 5px;*/
}.btn-facebook {
    color: #ffffff;
    background-color: #4867a9;
    border-color: transparent;
}
/*========== CSS TENGGAH 9 ==========*/
/*intinya*/
/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto.woff2') format('woff2');
}

/*========== CSS MENU RESPONSIVE ==========*/

.vh-center {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.navbar.navbar-default {
    border: 0;
    -webkit-box-shadow: none;
    /*box-shadow: none;*/
    /*box-shadow: 0 4px 2px -2px grey;*/
}
.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.nav .navbar .container-fluid {
    box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 3px rgba(12, 13, 14, 0.1), 0 4px 20px rgba(12, 13, 14, 0.035), 0 1px 1px rgba(12, 13, 14, 0.025);
}
.navbar {
    margin-bottom: 0;
}
.navbar-default .navbar-nav > li > a:hover{
    color: #000;
    font-weight: 600;
}

.navbar-default .navbar-nav > li > a:focus {
    color: #000;
    font-weight: 600;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li a:focus {
    color: #54af51;
    font-weight: 400;
}
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}
/* Makes images fully responsive */

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: auto;
}
/*.decor div {
    background-color: rgba(66, 195, 64, 1);
    width: 0%;
    height: 2px;
}
.decor:hover > div {
    width: 100%;
}*/
.carousel-indicators li {
    background: rgba(255, 255, 255, 0);
}
.carousel-indicators .active {
    background: #2a761e;
}
.jarallax {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/*========== CSS MENU RESPONSIVE ==========*/
/**/

/*========== CSS TETAP JADI 4 PAGIN ==========*/

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.row [class*='col-'] {
    background-colosr: #cceeee;
    background-clip: content-box;
}
.panel {
    height: 100%;
}

/*========== CSS TETAP JADI 4 PAGIN ==========*/


/*========== CSS 3 RESPONSIVE ==========*/

.btn_kinerja {
    background: linear-gradient(to right, #b3882a, #f7b226);
    color: #fff;
    border: 1px solid #f7b226;
    border-radius: 5px;
    width: 168px;
}
.btn_kinerja:active {
    background-color: #fff;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
.btn_kinerja:hover {
    background-color: white;
    color: #f7b226;
    border: 1px solid #f7b226;
}
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}
.col-item .photo img {
    margin: 0 auto;
    width: 100%;
}
.col-item .info {
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}
.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price {
    /*width: 50%;*/
    
    float: left;
    margin-top: 5px;
}
.col-item .price h5 {
    line-height: 20px;
    margin: 0;
}
.price-text-color {
    color: #219FD1;
}
.col-item .info .rating {
    color: #777;
}
.col-item .rating {
    /*width: 50%;*/
    
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}
.col-item .separator {
    border-top: 1px solid #E1E1E1;
}
.clear-left {
    clear: left;
}
.col-item .separator p {
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}
.col-item .separator p i {
    margin-right: 5px;
}
.col-item .btn-add {
    width: 50%;
    float: left;
}
.col-item .btn-add {
    border-right: 1px solid #E1E1E1;
}
.col-item .btn-details {
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls {
    margin-top: 20px;
}
[data-slide="prev"] {
    margin-right: 10px;
}
/*untuk berita CSS*/

.head-title .date-title {
    color: #000;
    font-family: 'GothamBold';
    text-align: left;
    width: auto;
    float: left;
    padding: 15px 0 10px 10px;
}
.head-title .n-date {
    font-size: 36px;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
.head-title .n-month {
    font-size: 16px;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
.head-title .n-year {
    font-size: 16px;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
.head-title h1 {
    margin: 10px 10px 15px 10px;
    font-size: 25px;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
h1 {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}
@media screen and (max-width: 768px) {
    h1 {
        font-size: 14px;
    }
}
.n-year,
.n-month,
.n-date {
    margin: 0 10px 0 10px;
    line-height: 22.9px;
}
.img-responsive,
.berita_baca > img,
.berita_baca a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px 0 0 0;
}
.img .berita_baca {
    padding: 4px;
    line-height: 1.846;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto
}
.berita_baca {
    display: block;
    padding: 4px;
    margin-bottom: 23px;
    line-height: 1.846;
    background-color: #ffffff;
    /*border: 1px solid #f3f3f3;
    box-shadow: 0 4px 2px -2px grey;*/
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out
}
.berita_baca>img,
.berita_baca a>img {
    margin-left: auto;
    margin-right: auto
}
a.berita_baca:hover,
a.berita_baca:focus,
a.berita_baca.active {
    border-color: #2196f3
}
.berita_baca .caption {
    padding: 9px;
    color: #666666;
}
.fong {
    font-size: 16px;
    font-weight: 500;
}
/*Untuk berita CSS
/*========== CSS 3 RESPONSIVE DLL ==========*/