@media only screen and (max-width: 767px) {

    .display-desktop {
      display: none;
    }
    .display-tablet {
      display: none;
    }
    .display-mobile {
      display: block;
    }

body {
    background: #fff url('../images/splash-bg-mobile.png') no-repeat 50% 5em;
}

#header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 4em;
}


#logo {
  margin-right: 0;
}


.menu-button-box {
    margin: 0;
    width: 30px;
    text-align: right;
}

.menu-button {
    text-align: right;
    width: 20px;
}

  .menu-button-box .menu-button:before {
    width: 20px;
  }

  .section-title, .featured-section .section-title, .become-section .section-title {
    font-size: 2em;
  }
  .splash-section .section-title {
    margin-bottom: 0.5em;
  }

  .splash-photo-box {
    margin: auto;
    display: block;
  }

  .splash-figure figure {
    margin-top: 4em;
  }

  .splash-section .logo-list {
    display: none;
  }

.why-section {
  background-image: url('../images/why-bg-mobile.png');
  background-position: 90% -5em;
}

  .why-section .why-list li {
      padding-bottom: 5em;
  }

    .why-section .why-list > li:nth-child(2) > .col:first-child {
      float: none;
      margin-left: 0;
    }

    .why-section .photo-box , .why-section .why-list > li:nth-child(2) .photo-box {
        text-align: center;
      }

      .why-section h3 {
        margin-top: 1em;
      }

.become-section {
    padding-top: 3em;
    padding-bottom: 3em;
}
  .become-list li {
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
  }
    .become-list li:before {
        font-size: 42px;
    }
      .become-list li:last-child {
        margin-bottom: 0;
      }

        .become-list li span {
          margin: 0 1em;
          min-width: 3em;
        }

.nominate-section {
    background-position: 50% 21em;
}

  .nominate-section .photo-box {
      text-align: center;
      margin-top: 4em;
  }

.featured-section .photo-box {
    width: 180px;
    padding-bottom: 180px;
}
.featured-section .photo-box img {
  width: 60%;
  max-width: 180px;
}

.hello-section .hello-cta {
    background-position: 50% -60%;
}


}