#mobileOnly{height: 100%; position: relative; transition: .2s;}
.mobile-icon{
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

label{
  display:flex;
  flex-direction:column;
  width: 50px;
  cursor:pointer;
 }
 
 label span{
   background: #fff;
   border-radius:10px;
   height:5px;
   margin: 5px 0;
   transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
 span:nth-of-type(1){width:50%;}
 span:nth-of-type(2){width:100%;}
 span:nth-of-type(3){width:75%;}
 
 input[type="checkbox"]{display:none;}
 
 input[type="checkbox"]:checked ~ span:nth-of-type(1){
   transform-origin:bottom;
   transform:rotatez(45deg) translate(8px,0px)
 }
 
 input[type="checkbox"]:checked ~ span:nth-of-type(2){
   transform-origin:top;
   transform:rotatez(-45deg);
 }
 
 input[type="checkbox"]:checked ~ span:nth-of-type(3){
   transform-origin:bottom;
   width:50%;
   transform: translate(23px,-7px) rotatez(45deg);
 }

#mobileOptions{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  text-align: right;
  padding: 0;
  width: 80%;
}

@keyframes grow{
  0%{width: 85%; opacity: 0;}
  100%{ opacity: 1;}
}

.mobile-option{
  display: block;
  margin: 10px 0;
  width: 100%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.15);
  font-size: 20px;
  font-weight: 700;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 100px 0px 0px 100px;
  float: right;
  animation: grow .5s;
  transition: .2s;
}

#mb1{width: 50%; border: 2px solid #7BFF98; border-right: none;}
#mb2{width: 100%; border: 2px solid #ED7BFF; border-right: none;}
#mb3{width: 85%; border: 2px solid #7BFF98; border-right: none;}
#mb4{width: 50%; border: 2px solid #ED7BFF; border-right: none;}
#mb5{width: 65%; border: 2px solid #7BFF98; border-right: none;}