@media (max-width: 770px) {
  .container {
    padding: 15px 15px;
  }

  .footer-top {
    flex-direction: column;
  }

  .footer-top > .form {
    width: 100%;
    margin: 20px 0;
  }

  .footer-top > .layanan {
    width: 100%;
    margin: 20px 0;
  }

  .footer-top > .hubungi {
    width: 100%;
    margin: 20px 0;
  }

  .tentang-kami {
    padding-bottom: 50px;
  }

  .tentang-kami > .title {
    font-size: 20px;
  }

  .tentang-kami > .content {
    flex-direction: column-reverse;
    padding: 7px;
  }

  .tentang-kami > .content > .isi {
    width: 100%;
    padding-right: 0;
    font-size: 13px;
  }

  .tentang-kami > .content > .gambar {
    width: 100%;
    margin: 0;
    padding-left: 0; 
    padding-top: 0; 
  }

  .tentang-kami > .content > .gambar > img {
    width: 100%;
  }

  .berita {
    padding-bottom: 50px
  }

  .berita > .title {
    font-size: 20px;
  }

  .berita > .content {
    width: 100%;
  }

  .berita > .beritaku {
    height: auto;
    flex-direction: column;
    padding: 7px;
  }

  .berita > .beritaku > a {
    margin: 0;
  }

  .berita > .beritaku > a > .content {
    width: 100%;
  }

  .berita > .beritaku > a > .content > .gambar > img {
    width: 100%;
  }

  .pengumuman {
    padding-bottom: 50px;
  }

  .pengumuman > .title {
    font-size: 20px;
  }

  .pengumuman > .pengumumanku {
    flex-direction: column;
    padding: 7px;
  }

  .pengumuman-content {
    width: 100%;
  }

  .pk-content {
    margin-top: -40px;
    flex-direction: column;
    padding: 7px;
  }

  .struktur-content-pk {
    padding-bottom: 20px;
  }

  .sejarah {
    flex-direction: column;
    padding: 7px;
  }
  .sejarah > .content-sejarah {
    width: 100%;
    padding: 0;
  }

  .sejarah > .gambar {
    width: 100%;
    padding: 0; 
  }

  .sejarah > .gambar > img {
    width: 100%;
  }

  .visimisi {
    flex-direction: column;
  }

  .visimisi > .visi {
    width: 100%;
    margin-bottom: 30px;
    padding: 7px;
  }

  .visimisi > .misi {
    width: 100%;
    padding: 7px;
  }
  .fasilitas {
    flex-direction: column;
    padding: 7px;
  }

  .fasilitas > .fasilitasku {
    width: 100%;
    padding: 5px;
    margin-bottom: 30px;
  }

  .fasilitas > .fasilitasku > .fasilitas-title {
    height: auto;
  }

  .galeri > .galeriku {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    padding: 7px;
  }

  .galeri-content {
    position: relative;
    width: 100%;
  }

  .allberita > .allberitaku {
    margin-top: 0;
    padding: 7px;
  }

  .allberita > .allberitaku > a {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }

  /*.allberita > .allberita-lain {
    width: 100%;
    padding: 7px;
  }*/

  .allpengumuman > .allpengumumanku > a > .content {
    height: auto;
    flex-direction: column;
    padding: 7px;
  }

  .allpengumuman > .allpengumumanku > a > .content > .gambar {
    width: 100%;
  }

  .allpengumuman > .allpengumumanku > a > .content > .isi {
    width: 100%;
  }

  .prodi {
    margin-bottom: 0;
    flex-direction: column;
  }

  .prodi > .prodiku {
    width: 100%;
    padding: 7px 7px;
    margin-bottom: 30px;
  }

  .hubungi-kami {
    padding-bottom: 0;
  }

  .hubungi-kami > .content {
    flex-direction: column-reverse;
    margin-top: 0;
    padding: 7px;
  }

  .hubungi-kami > .content > .contact-us {
    width: 100%;    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .hubungi-kami > .content > .detail {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 30px;
  }

  .hubungi-kami > .content > .detail > .detail-hubungi > img {
    width: 100%;
  }

  .kemahasiswaan {
    flex-direction: column;
    padding-bottom: 0;
  }

  .kemahasiswaan > .kemahasiswaanku {
    width: 100%;
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
    padding: 7px;
  }

  .kemahasiswaan > .kemahasiswaanku > a > .content {
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 30px;
  }

  .kemahasiswaan > .kemahasiswaanku > a > .content > .gambar {
    width: 100%;
  }

  .kemahasiswaan > .kemahasiswaanku > a > .content > .isi {
    width: 100%;
  }

  .kemahasiswaan > .kemahasiswaan-lain {
    width: 100%;
    padding: 7px;
  }

  .title-page {
    padding-top: 110px;
    padding-left: 30px;
    height: auto;
  }

  .header-scroll > .tombol-nav {
    display: flex;
  }

  .header {
    display: none;
  }

  .header-top {
    display: none;
  }

  .header-scroll {
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
  }

  .header-scroll > .items {
    display: none;
  }

  .header-scroll > .side {
    overflow: auto;
  }

  .dropdown-nav-content {
    position: absolute;
    background-color: #6bce6d;
    width: 100%;
    margin-top: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .dropdown-nav:hover .dropdown-nav-content {
    position: relative;
    width: 100%;
  }

  .header-scroll .dropdown-nav .dropdown-nav-content a {
    color: #fff;
    border-bottom: none;
  }

  .header-scroll > .side > ul > li > a {
    width: 100%;
  }

  .header-scroll > .side > ul > li > a:hover {
    width: 100%;
    color: #fff;
    background-color: #6bce6d;
  }

  .detail {
    flex-direction: column;
    padding-bottom: 0;
  }

  .detail > .detailku {
    width: 100%;
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .detail > .detailku > .content {
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 30px;
  }

  .detail > .detailku > .content > .gambar {
    width: 100%;
  }

  .detail > .detailku > .content > .isi {
    width: 100%;
  }

  .detail > .detail-lain {
    width: 100%;
    padding: 0;
  }
}