/*
##Device = Desktop large
##Screen = 1600px higher resolution desktops
*/

@media (min-width: 1600px) {
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1367px) and (max-width: 1599px) {
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

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

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

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

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 876px) {
  .hero {
    height: 65vh;
  }
  .hero-text.w-50 {
    width: 100% !important;
  }
  .text-prestasi {
    padding: 0%;
    padding-top: 3rem;
  }
  .text-prestasi .row.mt-5 {
    margin-top: 0% !important;
  }
  .berita.px-5 {
    padding-left: 0% !important;
    padding-right: 0% !important;
  }
  .contact-index.p-5,
  .contact-index .pr-5 {
    padding: 0% !important;
  }
  .contact-address h6 {
    font-size: 0.8rem;
  }
  .navbar-white .navbar-toggler {
    color: #004b8f !important;
    border-color: #004b8f;
    background: transparent;
  }
  .navbar-dark .navbar-nav {
    background: white;
    padding: 2rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .navbar-dark .navbar-nav .nav-link {
    color: black !important;
  }
  .navbar-nav .nav-link.btn-1 {
    color: white !important;
  }
  .navbar-white .navbar-nav {
    background: transparent !important;
    padding: 2rem;
    border-radius: 5px;
    border: 0px;
  }
  /* rian commit */
  .nama-anggota {
    font-size: 18px;
  }
  .img-elearning {
    width: 100%;
  }
  .anggota-11 .card {
    height: 310px;
  }
  .anggota-11 .card-head h4 {
    font-size: 19px;
  }
  .carousel-item img {
    max-width: 213px;
    max-height: 207px;
    min-width: 213px;
    min-height: 207px;
  }
  .berita img {
    max-width: 213px;
    max-height: 144.5px;
    min-width: 213px;
    min-height: 144.5px;
  }
  .galery-item img {
    max-width: 201px;
    max-height: 145px;
    min-width: 201px;
    min-height: 145px;
  }
  /* end of rian commit */
}

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

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

@media (min-width: 481px) and (max-width: 767px) {
  .hero {
    height: 65vh;
  }
  .hero-text.w-50 {
    width: 100% !important;
  }
  .text-prestasi {
    padding: 0%;
    padding-top: 3rem;
  }
  .text-prestasi .row.mt-5 {
    margin-top: 0% !important;
  }
  .berita.px-5 {
    padding-left: 0% !important;
    padding-right: 0% !important;
  }
  .contact-index.p-5,
  .contact-index .pr-5 {
    padding: 0% !important;
  }
  .contact-address h6 {
    font-size: 0.8rem;
  }
  .navbar-white .navbar-toggler {
    color: #004b8f !important;
    border-color: #004b8f;
  }
  .navbar-dark .navbar-nav {
    background: white;
    padding: 2rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .navbar-dark .navbar-nav .nav-link {
    color: black !important;
  }
  .navbar-nav .nav-link.btn-1 {
    color: white !important;
  }
  .navbar-white .navbar-nav {
    background: transparent !important;
    padding: 2rem;
    border-radius: 5px;
    border: 0px;
  }

  .img-elearning {
    width: 100%;
  }
  .bg-prestasi {
    height: 106rem;
  }
  /* rian commit */
  .nama-anggota {
    font-size: 18px;
  }
  .anggota-11 .card {
    height: 310px;
  }
  .anggota-11 .card-head h4 {
    font-size: 19px;
  }
  .berita img {
    max-width: 213px;
    max-height: 144.5px;
    min-width: 213px;
    min-height: 144.5px;
  }
  .galery-item img {
    max-width: 201px;
    max-height: 145px;
    min-width: 201px;
    min-height: 145px;
  }
  /* end of rian commit */

  .item-1 {
    position: absolute;
    margin-left: -39%;
  }

  .item-2 {
    position: absolute;
    margin-left: -9%;
  }

  .item-3 {
    position: absolute;
    margin-left: 20%;
  }

  .img-tentang {
    width: 100%;
    height: 69%;
    margin-top: 20%;
  }

  .judul-tentang b {
    font-size: 25px;
  }

  .judul-tentang img {
    width: 28px;
  }

  .footer-body-elearning {
    margin-top: 200px;
  }

  .deskripsi-tentang {
    margin-bottom: 30px;
  }
}

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

@media (min-width: 320px) and (max-width: 480px) {
  .hero {
    background-image: url(../img/background_prestasi.jpg);
    height: 108vh;
  }
  .hero-text {
    padding-top: 36%;
  }
  .hero-text h1,
  .hero-text p {
    color: white !important;
    margin-top: 1rem;
  }
  .hero-text .hr-header {
    background: white !important;
  }
  .hero-text.w-50 {
    width: 100% !important;
  }
  .text-prestasi {
    padding: 0%;
    padding-top: 2.5rem;
  }
  .text-prestasi .row.mt-5 {
    margin-top: 0% !important;
  }
  .berita.px-5 {
    padding-left: 0% !important;
    padding-right: 0% !important;
  }
  .contact-index.p-5,
  .contact-index .pr-5 {
    padding: 0% !important;
  }

  .navbar-white .navbar-toggler {
    color: #004b8f !important;
    border-color: #004b8f;
  }
  .navbar-dark .navbar-nav {
    background: white;
    padding: 2rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .navbar-dark .navbar-nav .nav-link {
    color: black !important;
  }
  .navbar-nav .nav-link.btn-1 {
    color: white !important;
  }
  .navbar-white .navbar-nav {
    background: transparent !important;
    padding: 2rem;
    border-radius: 5px;
    border: 0px;
  }
  .bg-prestasi {
    height: 102rem;
  }
  .anggota-11 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .anggota-11.p-5 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
  .anggota-11 .card.p-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .card-body {
    padding: 1rem;
    font-size: 13px;
  }
  .card-body h5 {
    font-size: 20px;
  }
  .card-head h4 {
    font-size: 16px;
  }
  .pagination {
    margin-top: 1rem;
  }

  .navbar-meta .navbar-dark .navbar-nav {
    background: transparent !important;
    padding: 0rem;
    border-radius: 0px;
    border: 0px;
  }
  .navbar-meta .navbar-dark .navbar-nav .nav-link {
    color: white !important;
  }

  .img-elearning {
    width: 100%;
  }

  .icon-titik {
    margin: 13px !important;
    width: 21px;
  }

  .img-tentang {
    width: 280px;
    margin-left: 3%;
  }

  .judul-tentang {
    position: absolute;
    margin-top: -452px;
  }

  .judul-tentang h2 {
    margin-bottom: 0px;
  }

  .judul-tentang b {
    font-size: 20px;
  }

  .judul-tentang img {
    width: 23px;
  }

  .deskripsi-tentang {
    margin-top: 20px;
  }

  .divisi-tentang {
    display: block;
    margin-top: 20px;
  }

  .divisi-item img {
    width: 120px;
    height: 119px;
  }

  .contact-text.pr-3 {
    padding: 1rem !important;
  }
  .contact-address {
    padding: 1rem;
  }
  .footer-body .judul-1 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .tentang-kami {
    padding: 1rem;
  }
  .tentang-kami.mt-5 {
    margin-top: 0rem !important;
  }
  .tentang-kami .col-md-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .judul-1[data-scroll="out"],
  .judul-2[data-scroll="out"] {
    opacity: 1;
    transition: 1s;
    transform: translateX(4px);
  }
  .hero-mini {
    display: block;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 50%;
    margin-left: 0rem;
  }
  .carousel .d-flex {
    float: none !important;
  }

  .icon-titik-berita-kegiatan {
    margin-left: 10px;
    margin-top: -5px;
    width: 20px;
  }

  .judul-berita {
    font-size: 18px;
  }

  .tanggal-berita {
    font-size: 12px;
  }

  .breadcumb-berita-kegiatan {
    font-size: 14px;
  }

  .description {
    font-size: 13px;
  }

  .judul-kegiatan-terbaru {
    font-size: 17px;
  }

  .sub-judul-kegiatan-terbaru {
    font-size: 14px;
  }

  .kegiatan-item-2 {
    font-size: 13px;
  }

  .body-berita-kegiatan {
    background-image: url(../img/bg_hijau2.png);
    background-repeat: no-repeat;
    background-size: 55rem;
  }

  /* rian commit */

  .berita-kegiatan.p-5 {
    padding: 1rem !important;
  }
  .berita-kegiatan .col-md-7 {
    padding: 1.5rem;
  }
  .berita-kegiatan {
    background-repeat: no-repeat;
    background-size: 55rem;
  }
  .berita-kegiatan h2 {
    text-align: center;
  }
  .breadcrumb-galery {
    margin-bottom: -1.5rem;
    margin-top: 1rem;
  }
  .galery-kegiatan.p-5 {
    padding-top: 1.5rem !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 3rem !important;
  }
  .galery-kegiatan {
    background-repeat: no-repeat;
    background-size: 55rem;
  }
  .galery-kegiatan h1 {
    text-align: center;
  }
  .anggota-11 .card .card-body {
    padding: 0rem;
  }
  span img {
    width: 10%;
  }
  .anggota-11 .card-body h5 {
    font-size: 15px;
  }
  .anggota-11 .card-head h4 {
    font-size: 14px;
  }
  .anggota-11 .card {
    height: 245px;
  }
  .galery-item img {
    max-width: 353px;
    max-height: 225px;
    min-width: auto;
    min-height: auto;
  }
  .berita-kegiatan .container {
    padding-left: 0.2rem;
  }
  .berita img {
    max-width: 305px;
    max-height: 206.5px;
    min-width: auto;
    min-height: auto;
  }
  .alumni.p-5 {
    padding-top: 3rem !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 3rem !important;
  }
  .alumni .row.mt-3 {
    margin-top: -0.75rem !important;
  }

  .alumni {
    background-image: url(../img/bg_hijau2.png);
    background-size: 55rem;
    background-repeat: no-repeat;
  }

  /* end of rian commit */

  .judul {
    text-align: center;
    margin-top: 17px;
  }

  .judul img {
    width: 33px;
  }

  .judul h2 {
    margin-left: 42px;
    margin-top: -409px;
    position: absolute;
  }

  .img-1 {
    margin-top: 11% !important;
  }

  .titik {
    width: 15% !important;
    height: 15% !important;
  }

  .berita .card p {
    font-size: 15px;
  }
  .text-prestasi .carousel .card p {
    font-size: 15px;
  }
  .mentor {
    background-image: url(../img/icon.png);
    background-repeat: round;
  }
  .berita {
    background-image: url(../img/bg_berita.png);
    background-repeat: round;
  }
  .contact-address span img {
    width: 10%;
  }

  .body-divisi {
    background-image: url(../img/Group\ 182.png);
    margin-bottom: 0px !important;
    padding-bottom: 40px;
  }

  .item-owl img {
    max-width: 100px !important;
    max-height: 72px !important;
    min-width: 100px !important;
    min-height: 72px !important;
  }

  .item-1 {
    margin-bottom: 20px;
  }

  .item-2 {
    margin-bottom: 20px;
  }

  .img-webinar {
    max-width: 276px;
    max-height: 187px;
    object-fit: cover;
  }

  /* rian commit */
  .galery-item img {
    max-width: 19.5rem;
    max-height: 235px;
    min-width: auto;
    min-height: auto;
  }
  .owl-item img {
    max-width: 19rem;
    max-height: 285px;
    min-width: auto;
    min-height: auto;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
  }
  .bg-prestasi {
    height: 43.5rem;
  }
  .owl-nav {
    width: fit-content;
    margin: auto;
  }
  .customPrevBtn,
  .customNextBtn {
    font-size: 20px;
    padding: 1rem;
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .hero {
    background-image: url(../img/background_prestasi.jpg);
    height: 108vh;
  }
  .berita img {
    max-width: 19.4rem;
    max-height: 206.5px;
    min-width: auto;
    min-height: auto;
    margin-top: 1rem;
  }
  /* end of rian commit */

  .kegiatan img {
    max-width: 122px;
    max-height: 91px;
    min-width: 122px;
    min-height: 91px;
  }

  .judul-tugas {
    padding-top: 35%;
  }

  .judul-tugas h1 {
    font-size: 45px;
  }

  .judul-tugas h3 {
    font-size: 20px;
  }

  .header-materi {
    background-image: url(../img/background_materi.png);
    min-height: 340px;
    background-position-x: center;
    background-size: cover;
  }

  .card {
    margin-left: -4px;
    margin-top: 20px;
  }

  /* new one */
  .biodata {
    margin-top: 2rem;
  }
  .kontak {
    margin-top: 0.5rem;
  }
  .img-mentor {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

@media (max-width: 354px) {
  .bg-prestasi {
    height: 97rem;
  }
}