/* =====================
   desktop
   min-width: 768px;
   max-width: 1024px;

===================== */
@media (min-width: 768px) and (max-width: 991.98px){
  .navbar{
    min-height: 43px;
  }
  .navbar-fixed-top{
    padding-top: 60px;
    transition: 0.3s;
  }
  .navbar-fixed-top.scrolled {
    padding-top: 20px;
    transition: 0.3s;
  }
  /* .carousel-caption{
    bottom:20px;
  } */
  .carousel-inner{
    width:100%;
    max-height: 800px !important;
  }
  .berita-excerpt p{
    margin-top: 2rem;
  }
}

@media(min-width: 1200px){
  .navbar{
    min-height: 43px;
  }
  .navbar-fixed-top{
    padding-top: 60px;
  }
  .navbar-fixed-top.scrolled {
    padding-top: 20px;
    transition: 0.3s;    
  }
  .carousel-inner{
    width:100%;
    max-height: 638px !important;
  }
  /* .carousel-caption{
    bottom:250px;
  } */
}
@media (min-width: 992px) and (max-width: 1024px){
  .navbar{
    min-height: 43px;
  }
  .navbar-fixed-top{
    padding-top: 60px;
    transition: 0.3s;
  }
  .navbar-fixed-top.scrolled {
    padding-top: 20px;
    transition: 0.3s;    
  }
  .carousel-inner{
    width:100%;
    max-height: 680px !important;
  }
  .text-about{
    margin-top: 0;
  }
  /* .carousel-caption{
    bottom:100px;
  } */
}

@media(min-width: 1025px) and (max-width: 1199px){
  .navbar{
    min-height: 43px;
  }
  .navbar-fixed-top{
    padding-top: 60px;
    transition: 0.3s;
  }
  .navbar-fixed-top.scrolled {
    padding-top: 20px;
    transition: 0.3s;    
  }
  .carousel-inner{
    width:100%;
    max-height: 680px !important;
  }
  /* .carousel-caption{
    bottom:200px;
  } */
  .navbar-fixed-top.scrolled {
    padding-top: 20px;
  }
  .text-about{
    margin-top: 0;
  }
}


/* =====================

   Tablets
   min-width: 640px;
   max-width: 767px;

===================== */

@media (min-width: 640px) and (max-width: 767px) {
  .top-header{
    display: none;
  }
  #contact-form .col {
    margin-bottom: 20px;
  }

  #berita-left .berita-img .col-md-6 img{
    margin-bottom: 20px;
  }
}



/* =====================

   Small Devices
   min-width: 320px;
   max-width: 479px;

===================== */

@media (min-width: 320px) and (max-width: 479px) {
  #about{
    padding: 80px 0;
  }
  .title h2{
    font-size: 20px;
  }
  .text-about{
    margin-right: 0;
    margin-left: 30px;
  }
  .text-about p{
    font-size: 14px;
    line-height: auto;
  }
  .top-header{
    display: none;
  }
  .nav>li .icon-nav{
    display: inline-block;
  }
  .carousel{
    margin-top: 90px;
  }
  .carousel-caption{
    display: none;
  }
  .img-about{
    margin-left:0;
    width: 100%;
  }
  #banner {
    text-align: center;
  }
  
  #contact-form .col {
    margin-bottom: 20px;
  }

  #berita-left .block .berita-comment .comment-img,
  #berita-left .berita-comment-main .berita-comment .comment-img,
  #berita-left .berita-comment-main .sub-berita-comment .comment-img{
    float: none;
  }

  #berita-left .block .berita-comment .comment-img .img-responsive,
  #berita-left .berita-comment-main .berita-comment .comment-img .img-responsive,
  #berita-left .berita-comment-main .sub-berita-comment .comment-img .img-responsive{
    width: 30%;
  }

  #berita-left .berita-comment-main .sub-berita-comment{
    margin-left: 0;
  }

  #berita-left .berita-img .col-md-6 img{
    margin-bottom: 20px;
  }
  #global-header .block h1{
    font-size: 30px;
  }
  .berita-excerpt p{
    margin-top: 2rem;
  }
}