/* dapat dari main.css */
@media screen and (max-width: 700px) {
  #infos{
    margin-top: 110px;
  }
  #header_non_home{
    margin-top: 57px !important;
  }
  .social-footeryes{
    display: none;
  }
}
/*  */

@media screen and (max-width: 500px) {
  .search-bar{
    height: auto;
    width: auto;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .search-form-label{
    font-size: 2vw;
    min-width: 20%;
    height: 5px;
    padding-top: 2.5px !important;
  }
  .search-form-control{
    min-width: 60%;
    height: 5px;
    font-size: 3vw;
  }
  .search-form-button{
    min-width: 20%;
    font-size: 12pt;
    font-size: 3vw;
    height: 5px;
  }
}
  .indigo {
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202);
  }

  /* ian */

  .linear-gradient-bg{
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202);
    /* background: rgb(64,0,0);
    background: -moz-linear-gradient(90deg, rgba(64,0,0,1) 0%, rgba(166,0,0,1) 50%, rgba(64,0,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(64,0,0,1) 0%, rgba(166,0,0,1) 50%, rgba(64,0,0,1) 100%);
    background: linear-gradient(90deg, rgba(64,0,0,1) 0%, rgba(166,0,0,1) 50%, rgba(64,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#400000",endColorstr="#400000",GradientType=1); */
  }

  .linear-lr-gradient{
    background: rgb(194,0,0);
    background: -moz-linear-gradient(90deg, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    background: linear-gradient(90deg, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c20000",endColorstr="#400000",GradientType=1);
  }

  .radial-gradient-bg{
    background: rgb(194,0,0);
    background: -moz-radial-gradient(circle, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    background: radial-gradient(circle, rgba(166,0,0,1) 0%, rgba(64,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c20000",endColorstr="#400000",GradientType=1);
  }

  .search-bar{
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: white; */
  }

  .search-wrapper{
    background-color: #eee;
    width: auto;
    border-radius: 15px;
    height: auto;
    border: solid 1px white;
  }

  .search-form-label{
    display: inline-block;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    min-height: 25px;
    min-width: 10%;
    background-color: #eee;
    padding: 5px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .search-form-control{
    display: inline-block;
    min-height: 25px;
    min-width: 80%;
    padding: 5px 10px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    background: transparent;
    border-top: transparent;
    border-bottom: transparent;
  }

  .search-form-control:focus{
    border-top-color: transparent;
    border-bottom-color: transparent;
    outline: transparent;
  }
  .search-form-button{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    min-height: 25px;
    min-width: 10%;
    background-color: #eee;
    padding: 5px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border:none;
    outline: none;
  }

    .search-form-button:active, .search-form-button:focus{
    outline:none !important;
    -moz-outline-style: none !important;
  }

  #header_non_home{
    position: relative;
    margin-top: 62px;
  }
  .section-title{
    margin-top: 7%;
  }

  .socmed-frame{
    display: inline-block;
    border-radius: 60px;
    border: rgb(250, 250, 250) 2px solid;
    padding: 0.26em 0.05em;
    margin-left: 5px;
    margin-right: 5px;
  }

  .socmed-frame i{
    font-size: 24pt;
  }

  .orange-highlight{
    background-color:orange;
    padding-top:10px;
    padding-bottom: 0.5px;
    margin-top:50px;
    margin-bottom: 5px;
  }

  .very-small-title{
    color: white;
  }
  .text-orange{
    color: orange;
  }


  /* ian */

  .top-nav-collapse {
    background: #fff;
    z-index: 999999;
    top: 0px !important;
    min-height: 58px;
    box-shadow: 0px 3px 6px 3px rgb(0 0 0 / 6%);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202) !important;
  }

  .top-nav-collapse .navbar-nav .nav-link {
    color: #fff !important;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .top-nav-collapse .navbar-brand {
    color: #fff !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .navbar-nav .nav-link {
    color: #fff;
    font-size: 14px;
    margin-right: 18px;
    font-weight: 400;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .nav-item {
    padding: 18px 0px;
    align-items: center;
    display: flex;
  }

  .carousel {
    position: relative;
    margin-top: 10%;
    /*margin-top: 112px;*/
  }

  .carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: left;
  }

  .button-formulir {
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202) !important;
    color: #FFF;
    min-height: 75px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border-radius: 50px;
    white-space: normal;
  }

  #video {
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202) !important;
    /* height: fit-content !important; */
    height: auto;
  }

  .deskripsi_video .titlea {
    color: #FFF !important;
    font-size: 27px !important;
    font-weight: bold;
    text-align: center;
    line-height: 1.12em;
    z-index: 20;
    position: absolute;
    width: 100%;
    right: 0%;
  }

  #tv_container {
    margin-top: 0px !important;
  }


  .plain-flicker-gallery a{
    max-width: 130px;
    max-height: 130px;
  }

  footer #copyright {
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202) !important;
  }



  #carousel-area .carousel-item .carousel-caption {
    top: 10%;
    right: 10%;
    left: 10%;
    text-shadow: none;
  }

  .kpu-container-judul {
    background-color: gray;
  }

  .kpu-color-white {
    color: #fff;
    margin: 0px;
  }

  .kpu-title {
    padding-top: 170px;
    padding-bottom: 50px;
  }

  .kpu-container-content {
    padding: 5% 15%;
  }

  .dotted-gradient {
     background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
     background-position: bottom;
     background-size: 3px 1px;
     background-repeat: repeat-x;
     padding-bottom: 10px;
  }

  .kpu-container-group {
    padding: 10px;
    background-image: linear-gradient(to right, #1e0202, #1e0202, #771414, #771414, #1e0202, #1e0202);
    margin-bottom: 20px;
    position: relative;
  }

  .kpu-contain {
    margin-bottom: 7%;
  }

  .dot-item {
    list-style: disc;
    margin-left: 15px;
  }

  @media only screen and (min-width: 0px) {
    .kpu-img-med {
      width: 20%;
    }
  }
  @media only screen and (min-width: 768px) {
    .kpu-img-med {
      width: 80%;
    }
  }

  .callout.katalog-callout::before {
    right: 0;
    bottom: -70px;
    border-top: 35px solid #1e0202;
    height: 40px;
  }

  .callout::before {
    content: "";
    width: 66px;
    height: 35px;
    border: 35px solid transparent;
    position: absolute;
  }

  .katalog-icon{
    height:40px;
    width:40px;
    margin-right:10px;
  }

  /*FAQ*/

  #accordionExample {
    margin: 5%;
  }

  .kpu-button-wsn{
    white-space: normal;
  }

  .card {
    position: relative;
    display: block;
    border-radius: 0;
    width: 100%;
    background-color: #f6f6f6;
  }

  /*Agenda Timeline*/

  * {
      box-sizing: border-box;
  }
  .timeline-wrapper{
    width: 30%;
  }

  .main-timeline-section {
    position: relative;
    width: 100%;
    margin: auto;
    height: auto;
  }
  .main-timeline-section .timeline-start{
    position: absolute;
    background: rgba(166,0,0,1);
    border-radius: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
  }
  .main-timeline-section .timeline-end {
    position: absolute;
    background: rgba(64,0,0,1);
    border-radius: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
  }
  .main-timeline-section .timeline-end {
    right: 0px;
  }
  .main-timeline-section .conference-center-line {
    position: absolute;
    width: 100%;
    height: 5px;
    top: 50%;
    transform: translateY(-50%);
  }
  .timeline-article {
    width: 100%;
    position: relative;
    min-height: 300px;
    float: left;
  }
  .timeline-article .content-date {
    position: absolute;
    top: 35%;
    font-size: 18px;
    width: 250px;
  }
  .timeline-article .meta-date {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid rgba(64,0,0,1);
  }
  .timeline-article .content-box {
    box-shadow: 2px 2px 4px 0px #c1c1c1;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    top: 60%;
    min-height: 100px;
  }
  .timeline-article .content-box:before {
    content: " ";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    border: 10px solid transparent;
    border-bottom-color: rgba(64,0,0,1);
  }
  .box-header{
    height: 20px;
  }
  @media screen and (max-width: 767px) {
    .identitas_menu{
      top: 10% !important;
    }

    .timeline-wrapper{
      width:100%;
    }

    .main-timeline-section .timeline-start{
      position: absolute;
      background: rgba(166,0,0,1);
      border-radius: 100px;
      top: 5%;
      left: 20%;
      width: 30px;
      height: 30px;
    }
    .main-timeline-section .timeline-end {
      position: absolute;
      background: rgba(64,0,0,1);
      border-radius: 100px;
      bottom: 0% !important;
      width: 30px;
      height: 30px;
      left: 20%;
    }
    .main-timeline-section .timeline-end {
      left: 0px;
      display: none;
    }
    .main-timeline-section .conference-center-line {
      position: absolute;
      width: 5px;
      left: 23%;
      height: 100%;
      top: 0;
      transform: translateY(5%);
      background: linear-gradient(180deg, rgb(166, 0, 0) 0%, rgb(64, 0, 0) 100%);
    }
    .timeline-article{
      min-height: 150px;
      width: 100%;
    }
    .timeline-article .content-box{
      left: 30%;
      top: 20%;
      width: 68%;
      height: auto;
      border-left: 10px solid rgba(166,0,0,1);
    }

    .content-box .card-header{
      display: none;
    }

    .timeline-article .content-date {
      top: 40%;
      left: 0%;
      width: 85px;
      height: auto;
    }
    .timeline-article .content-date span{
      font-size: 14pt;
    }


    .timeline-article .meta-date {
      position: absolute;
      left: 21%;
      top: 53%;
    }

    .timeline-article .content-box:before {
      content: "";
    	position: absolute;
    	width: 10px;
    	height: 10px;
    	left: -20px;
    	top: 40%;
      border: 10px solid transparent;
      border-right: 20px solid rgba(166,0,0,1); /* IE8 Fallback */
      border-right: 20px solid rgba(166,0,0,1);
    }
  }

  @media screen and (max-width: 399px) {
    .main-timeline-section .timeline-start{
      left: 19.5%;
    }
    .main-timeline-section .timeline-end {
      left: 19.5%;
    }
    .main-timeline-section .timeline-end {
      display: none;
    }

    .timeline-article .content-box{
      left: 30%;
      top: 20%;
      width: 68%;
      height: auto;
      border-left: 10px solid rgba(166,0,0,1);
    }

    .content-box .card-header{
      display: none;
    }

    .timeline-article .content-date {
      left: -3%;
      width: 20%;
    }
    .timeline-article .content-date span{
      font-size: 12pt;
    }

    .timeline-article .content-box:before {
    	left: -20px;
      border-right: 20px solid rgba(166,0,0,1); /* IE8 Fallback */
      border-right: 20px solid rgba(166,0,0,1);
    }
  }

  @media screen and (max-width: 300px) {
    .main-timeline-section .timeline-start{
      left: 18.5%;
    }
    .main-timeline-section .timeline-end {
      left: 18.5%;
    }
    .main-timeline-section .timeline-end {
      display: none;
    }

    .timeline-article .content-box{
      left: 30%;
      top: 20%;
      width: 68%;
      height: auto;
      border-left: 10px solid rgba(166,0,0,1);
    }

    .content-box .card-header{
      display: none;
    }

    .timeline-article .meta-date {
      width: 15px;
      height: 15px;
    }

    .timeline-article .content-date {
      left: 0;
      width: 20%;
    }
    .timeline-article .content-date span{
      font-size: 10pt;
    }

    .timeline-article .content-box:before {
      left: -20px;
      border-right: 10px solid rgba(166,0,0,1); /* IE8 Fallback */
      border-right: 10px solid rgba(166,0,0,1);
    }
  }

/* pagination styles */

ul.pagination li.page-item{
  background-color: transparent;
  border: none;
}

ul.pagination li.page-item.active .page-link{
  color: rgba(166,0,0,1);
}

ul.pagination li.page-item .page-link{
  background-color: transparent;
  border: none;
  color: #666;
}