/* Tablet 768-480px */
@media screen and (max-width: 769px) {
  .burger {
    height: 24px;
    width: 39px;
    position: relative;
    float: right;
    top: 30px;
    right: 30px;
    cursor: pointer;
    transition: .2s all;
    z-index: 10;
  }

  .burger:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;  
    transition: all .2s ease-in-out;
  }

  .burger.open:before {
    height: 50px;
    width: 50px;  
  }

  .burger .burger-lines,
  .burger .burger-lines:after,
  .burger .burger-lines:before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 20px;
    background-color: #457368;
    position: absolute;
    transform: rotate(0);
    transition: .2s top .2s, .1s left, 0.1s right, .2s transform, .4s background-color .2s;
  }

  .burger .burger-lines:before { width: 26px; left: 0; top: -10px; }
  .burger .burger-lines { top: 50%; margin-top: -1.5px; }
  .burger .burger-lines:after { width: 26px; right: 0; top: 10px;}

  .burger.open .burger-lines,
  .burger.open .burger-lines:after,
  .burger.open .burger-lines:before {
    transition: .2s background-color, .2s top, .2s left, 0.2s right, .2s transform .15s;
  }

  .burger.open .burger-lines:before { left: 6.5px; top: 0; transform: rotate(45deg); }
  .burger.open .burger-lines { background-color: transparent; }
  .burger.open .burger-lines:after { right: 6.5px; top: 0; transform: rotate(-45deg); }
}

/* Mobile 480-360px */
@media screen and (max-width: 480px) {
  .burger {
    width: 28.8px;
    height: 18px;
  }
  
  .burger .burger-lines:before { width: 20px; top: -7px; }
  .burger .burger-lines:after { width: 20px; top: 7px; }
  
  .burger.open .burger-lines:before { left: 4.4px; }
  .burger.open .burger-lines:after { right: 4.4px; }
}


/* Mobile 360-320px */
@media screen and (max-width: 360px) {
  .burger {
    top: 25px;
    right: 25px;
    width: 26px;
    height: 16.9px;
  }
  
  .burger.open:before {
    height: 45px;
    width: 45px;  
  }  
  
  .burger .burger-lines,
  .burger .burger-lines:after,
  .burger .burger-lines:before {
    height: 2.5px;
  }
  
  .burger .burger-lines:before { width: 17px; }
  .burger .burger-lines:after { width: 17px; }
  
  .burger.open .burger-lines:before { left: 4.5px; }
  .burger.open .burger-lines:after { right: 4.5px; }
}