.menu button {display: none}

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

	.menu button {
		display: block;
		position: absolute;
		z-index: 600;
		right:7px;
		top:102px;
	
	}
	.menu button:hover, .menu button:active { background-color: white; }
	.active { height: 100vh; }
	
    /* -----------------------------------------------------------------------------

      HAMBURGER ICONS COMPONENT

    ----------------------------------------------------------------------------- */
    /**
     * Toggle Switch Globals
     *
     * All switches should take on the class `c-hamburger` as well as their
     * variant that will give them unique properties. This class is an overview
     * class that acts as a reset for all versions of the icon.
     */
    .c-hamburger {
      display: block;
      position: relative;
      overflow: hidden;
      margin: 0;
      padding: 0;
      width: 48px;
      height: 48px;
      font-size: 0;
      text-indent: -9999px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      cursor: pointer;
      -webkit-transition: background 0.3s;
              transition: background 0.3s;
    }

    .c-hamburger:focus {
      outline: none;
    }

    .c-hamburger span {
      display: block;
      position: absolute;
      top: 22px;
      left: 9px;
      right: 9px;
      height: 7px;
      background: black;
    }

    .c-hamburger span::before,
    .c-hamburger span::after {
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 7px;
      background-color: black;
      content: "";
    }

    .c-hamburger span::before {
      top: -10px;
    }

    .c-hamburger span::after {
      bottom: -10px;
    }

    /**
     * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
     * down to center and transform into an "x".
     */
    .c-hamburger--htx {
      background-color: #fff;
    }

    .c-hamburger--htx span {
      -webkit-transition: background 0s 0.3s;
              transition: background 0s 0.3s;
    }

    .c-hamburger--htx span::before,
    .c-hamburger--htx span::after {
      -webkit-transition-duration: 0.3s, 0.3s;
              transition-duration: 0.3s, 0.3s;
      -webkit-transition-delay: 0.3s, 0s;
              transition-delay: 0.3s, 0s;
    }

    .c-hamburger--htx span::before {
      -webkit-transition-property: top, -webkit-transform;
              transition-property: top, transform;
    }

    .c-hamburger--htx span::after {
      -webkit-transition-property: bottom, -webkit-transform;
              transition-property: bottom, transform;
    }

    /* active state, i.e. menu open */
    .c-hamburger--htx.is-active {
      background-color: #fff;
    }

    .c-hamburger--htx.is-active span {
      background: none;
    }

    .c-hamburger--htx.is-active span::before {
      top: 0;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
    }

    .c-hamburger--htx.is-active span::after {
      bottom: 0;
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }

    .c-hamburger--htx.is-active span::before,
    .c-hamburger--htx.is-active span::after {
      -webkit-transition-delay: 0s, 0.3s;
              transition-delay: 0s, 0.3s;
    }
}