/* Mobile overrides (phones) */
@media screen and (max-width: 500px){
  /* Navbar: vertical */
  #navbar h1{
    float: none;
    text-align: center;
    padding: 12px 0;
  }
  #navbar ul{
    float: none;
    width: 100%;
  }
  #navbar li{
    float: none;
  }
  #navbar li a{
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  /* Showcase: let it grow with content */
  #showcase{
    min-height: auto;
  }
  .showcase-content{
    padding-top: 70px;
    padding-bottom: 55px;
  }
  .showcase-content h1{
    font-size: 34px;
  }

  /* Info: stack, hide image */
  #info{
    height: 550px;
  }
  #info .info-img{
    display: none;
  }
  #info .info-content{
    float: none;
    width: 100%;
  }

  /* Features / boxes: stack full width */
  .box{
    float: none;
    width: 100%;
    padding: 24px 16px;
  }

  /* About info: stack */
  #about-info .info-left,
  #about-info .info-right{
    float: none;
    width: 100%;
  }
  #about-info .info-left{
    text-align: center;
  }
  #about-info .info-right{
    margin-top: 18px;
  }

  /* Contact form headings centered */
  #contact-form h1,
  #contact-form p{
    text-align: center;
  }

  /* Contact "features" borders between items */
  #features .box{
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
}