header nav a {display: block; }

.menuToggle {
  width: 60px;
  height: 51px;
  display: block;
  z-index: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  padding: 6px 0 0;
  position: fixed;
 }

.menuToggle input {
  width: 90px;
  height: 90px;
  display: block;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 5;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
  position: fixed;
  margin-top: -30px;
  margin-left: -15px;
   }
.menuToggle input[type="checkbox"]{
  display: block;
}
.menuToggle > span {
  width: 60px;
  height: 4px;
  background-color: #fff;
  display: block;
  margin: 0 auto;
  margin-bottom: 13px;
  position: relative;
  z-index: 1;
  -webkit-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
.menuToggle span:first-child {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%; }

.menuToggle span:nth-of-type(2) {
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%; }

.menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -4px);
  transform: rotate(45deg) translate(-2px, -4px);
  position: fixed;
  background-color: #fff;
  z-index: 5; 
  margin-left: 10px;
}


.menuToggle input:checked ~ span:nth-of-type(2) {
  opacity: 0; }

.menuToggle input:checked ~ span:nth-of-type(3) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(-1px, -3px);
  transform: rotate(-45deg) translate(-1px, -3px);
  position: fixed;
  top: 65px;
  background-color: #fff;
  z-index: 5; 
  margin-left: 10px;
}

.menu {
  width: 100%;
  height: 100%;
  background: #000;
  transition: ease-out 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none; }
  .menu .con {
    width: 80%;
    max-width: 600px;
    height: auto;
    position: absolute;
    background: #f4a7bb;
    padding: 40px 0 40px 0;
    border: 10px white solid;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .menu .con ul {
      margin-top: 0px; }
        .menu .con ul li{
          font-size: 22px;
          font-weight: 400;
          line-height: 2;
          color: #fff;
          letter-spacing: 1px;
          position: relative;
          font-weight: 400;
          letter-spacing: 1px;
          display: block;
          width: fit-content;
          margin: 15px auto;
          cursor: pointer;
           }
          .menu .con ul li:hover {letter-spacing: 5px;
          transition: ease-out 0.3s;
          font-weight: 400;
          color: black;}
          .menu .con ul li:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: #000;
            position: absolute;
            bottom: -3px;
            left: 0px;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            transition: ease-out 0.3s; }
          .menu .con ul li:hover:after {
            -webkit-transform: scaleX(1);
            transform: scaleX(1); }
          .menu .con ul li:first-child::after { display: none;}

.menuToggle input:checked ~ .menu {
  left: 0px;
  opacity: 1;
  z-index: 3;
  pointer-events: auto; }

@media only screen and (max-width: 640px) and (min-width: 0px){
  .menu .con ul li {
      font-size: 30px;
  }
  nav .fixed_bg .bg_txt {
    height: 100%;
    left: 0;
  }
  nav .fixed_bg .bg_txt:last-child{
    height: 100%;
    left: unset;
    right: 0;
  }

}