@media screen and (max-width: 64em) {
  a
  {
    text-decoration: none;
    color: #232323;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  a:hover
  {
    /* color: #f2c302;
 */
  }
  .menu-mobile {
    height: 96px;
    /* background: url("../img/logo-mobile.png") no-repeat;
    background-position: 76px -54px; */
    background: #D43D3D;
  }
  #menuToggle
  {
    display: block;
    position: relative;
    top: -68px;
    left: 0;
    padding-left: 32px;
    z-index: 100;
    -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
  }
  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    right: 8px;
    cursor: pointer;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }
  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
    display: block;
    width: 33px;
    height: 3px;
    margin-bottom: 5px;
    position: absolute;
	  right: 16px;
    background: #fff;
    z-index: 1;
    -webkit-transform-origin: 4px 0px;
            transform-origin: 4px 0px;
    -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  #menuToggle span:first-child
  {
	 top: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2)
  {
	   top: 8px;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
   #menuToggle span:nth-last-child(3)
  {
	   top: 16px;
  }
  /*
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: rotate(45deg) translate(0px, -3px);
            transform: rotate(45deg) translate(0px, -3px);
    background: #232323;
  }
  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: rotate(0deg) scale(0.2, 0.2);
            transform: rotate(0deg) scale(0.2, 0.2);
  }
  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: rotate(-45deg) translate(0, -1px);
            transform: rotate(-45deg) translate(0, -1px);
  }
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
    display: inherit;
    position: absolute;
    width: 100%;
    height: 110vh;
    margin: -100px 0 0 -32px;
    /* padding: 32px; */
    padding-top: 136px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  #menu li
  {
    padding: 18px 18px 0 0;
    font-size: 22px;
    text-align: right;
    font-weight: 400;
  }
  li.separate {
    border-top: #ccc 1px solid;
    height: 1px;
  }
  /*
   * And let's fade it in from the left
   */
  #menuToggle input:checked ~ ul
  {
    -webkit-transform: scale(1.0, 1.0);
            transform: scale(1.0, 1.0);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}