/* tablet breakpoint / website breaks at 980 */
@media only screen and (min-width: 600px) and (max-width: 1080px) {

    .desktop {
        display: none;
    }

    .mobile {
        display: none;
    }

    /* reconfigure grid for three col + nav */
    div#leftside {
        display: grid;
        grid-gap: 0;
        grid-template-columns: 30px calc(100% - 30px);
        grid-template-rows: 30px auto;
    }

}

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

  .mobile {
      display: inherit;
  }

  .desktop {
      display: none;
  }

  .tablet {
      display: none;
  }

  /* reconfigure grid for 1 col + bottom nav */
  div#leftside {
      display: grid;
      grid-gap: 0;
      grid-template-columns: 100%;
      grid-template-rows: 30px auto;
  }

  /* only show one thing at a time, initial just climb */
  div#leftside {
      display: none;
  }

  div.rockwall.one {
      display: none;
  }

  div#mobileNav {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
      color: #d9cfc5;
      background-color: #262625;
      font-size: 12px;
      text-transform: uppercase;
      height: 20px;
      width: 100%;
      padding: 16px 0px;
  }

  div#mobileNav > span {
      display: inline-block;
      width: 32%;
      text-align: center;
      cursor: pointer;
  }

  #about {
      display: block !important;
      width: 100vw;
  }

  #about > #text {
      width: 90%;
      min-width: 0;
      margin: 64px 16px 0 16px;
  }

  #hamburger {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
  }

  #hamburger > img {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 20px;
      height: 20px;
      z-index: 100;
      cursor: pointer;
  }

  #hamburger > p {
      display: none;
      position: absolute;
      top: 48px;
      left: 20px;
      padding: 12px 16px;
      width: 160px;
      z-index: 100;
      color: #d9cfc5;
      background-color: #262625;
      font-size: 12px;
      line-height: 24px;
  }

  #hamburger > p > a {
      color: #d9cfc5;
      text-decoration: none;
  }

  #hamburgerBun {
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90;
  }


}