@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: #002085;
  }

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

  .navbar-brand {
    display: none;
  }

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

  .navbar.active-nav {
    background-color: rgb(0, 5, 82);
  }

  .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: 98vh;
    display: flex;
    text-align: center;
    align-items: center;
  }

  .hero-content {
    width: 100%;
    padding: 30px !important;
    margin-top: 50px;
  }

  .hero-content .w-50,
  .hero-content .col-3 {
    width: 100% !important;
  }

  .hero-brand {
    width: 80%;
    margin: 0px auto;
  }

  .motto {
    text-shadow: 3px 3px 8px rgba(0, 0, 0);
    margin-bottom: 40px;
  }

  .hero-content a {
    background: #001D5F;
    background: linear-gradient(0deg, rgba(0, 29, 95, 1) 30%, rgba(71, 148, 255, 1) 100%);
    color: whitesmoke;
    border-radius: 10px !important;
    display: block;
    width: 100%;
    margin-right: 0 !important;
  }





  /* End ... */
}