//media q
@media screen and (max-width: 580px) {


  .hide-on-small {
    display: none;
  }

  .hero-header{
    margin-top: 5rem;
  }

  #hero .container {
  //  margin-top: 10vh;
  }

  /* #hero h1 {
    font-size: 2rem;
  } */

  .section-header{
    font-size: 1.5rem;
  }



}

@media screen and (max-width: 360px){
      nav a#openup:after {
    left: 17rem;
    top: 20rem;
    //margin-top: .5rem;
  }



}

@media screen and (max-width: 780px) {
  footer .footer-cols {
    justify-content: center;
  }

.footer-items ul {
  flex-direction: column;
   justify-content: center;
   align-items: center;
  }

  .mission-container{
  flex-wrap: wrap;
   justify-content: center;
}

.about-image-container{
  flex-wrap: wrap;
   justify-content: center;
}

.reverse-wrap{
  flex-wrap: wrap-reverse;
}
.about-image{
//height: 80%;
width: 90%;
}


}

@media screen and (max-height: 580px) {
  #hero p.lead {
    display: none;
  }

.form{
  margin: auto;
  display: flex;
}

}


@media screen and (max-width: 580px) {
  .hide-on-small {
    display: none;
  }

  .btn{

    padding: 1rem 3rem;
}

  #hero {
    /* height: 80vh; */
    background-position: center;
  }

  #hero .container {
    margin-top: 12vh;
  }

  #hero h1 {
    font-size: 3rem;
    padding-top: 5rem;

  }

  .section-header{
    font-size: 2rem;
  }

  #hero h2 {
    font-size: 1.5rem;
    padding: 0 2rem;
  }

  .nav-logo{
  height: 1rem;
  width: 1rem;
}

  nav {
    height: auto;
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav li {
    width: 100%;
    float: left;
    position: relative;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
   // background: #333;
    border-bottom: none;
    color: black;
  }

  nav a#openup:after {
    content: "|||";
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    /* IE 9 */
    -webkit-transform: rotate(-90deg);
    /* Safari and Chrome */
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 20px;
  }
  nav a#openup {
    display: block;
   // background-color: #333;
    color: black;
    width: 100%;
    position: relative;
  }

.about-image{
margin-bottom: 2rem;
}


}

@media only screen and (-webkit-min-device-pixel-ratio: 4) {


   nav {
   }

    footer {
    justify-content: center;

  }

    #home h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }



}