@media (max-width: 768px) {

  body {
    background: url(../img/background.png) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #1c1007d3;
  }

  .navbar .container-fluid {
    padding: 0px !important;
  }

  .navbar-brand img {
    height: 40px !important;
    margin-left: 10px;
  }

  .navbar-brand-mobile {
    display: block !important;
    letter-spacing: 2px;
    font-size: 18px;
    padding-left: 10px !important;
  }

  .navbar-collapse {
    padding: 0px 20px;
  }

  .hero {
    background: url(../img/hero-sm.png) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    overflow: hidden;
    height: 100vh;
    display: flex;
    text-align: center;
    align-items: center;
  }

  .hero-content {
    padding: 0px !important;
    text-align: center;
  }

  .hero-content h4 {
    font-size: 24px !important;
  }

  .hero-content h1 {
    font-size: 38px !important;
  }

  .hero-content .dan {
    font-size: 34px !important;
  }

  .motto {
    width: 90%;
    margin: auto;
  }

  .garis-hero {
    width: 80% !important;
    margin: 30px auto;
  }

  .hero-content a {
    border-radius: 10px !important;
    display: block;
    width: 80%;
    margin: 20px auto !important;
  }

  /* End ... */
}