.burger {
  left: 18px;
  margin: auto;
  position: absolute;
  top: 8px;
  width: 58px;
  cursor: pointer;
  height: 46px;
}

.bar {
  background: rgb(178,36,46);
  height: 7px;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: 0 0;
  transition: all 500ms;
  width: 100%;
}

.bun-top { transform: translate3d(0, 4px, 0); }
.lettuce { transform: translate3d(0, -25px, 0) scaleY(0); opacity: 0; }
.mustard { transform: translate3d(-75px, 0, 0) scaleY(0); opacity: 0; }
.ketchup { transform: translate3d(75px, 0, 0) scaleY(0); opacity: 0; }
.patty   { transform: translate3d(0, 20px, 0); }
.bun-bot { transform: translate3d(0, 36px, 0); }

.on .bar {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

.on .bun-top { background: rgba(36,33,33,0.6); transform: translate3d(0, 0, 0) scaleY(1.5); }
.on .lettuce { background: rgb(212,46,36); transform: translate3d(0, 12px, 0) scaleY(0.5); opacity: 1; transition-delay: 200ms; }
.on .mustard { background: rgb(212,46,36); transform: translate3d(0, 16px, 0) scaleY(0.5); opacity: 1; transition-delay: 400ms; }
.on .ketchup { background: rgb(212,46,36); transform: translate3d(0, 20px, 0) scaleY(0.5); opacity: 1; transition-delay: 600ms; }
.on .patty   { background: rgba(36,33,33,0.9); transform: translate3d(0, 26px, 0) scaleY(1); }
.on .bun-bot { background: rgba(36,33,33,0.6); transform: translate3d(0, 36px, 0) scaleY(1.5); }


/* Loading --------------------------------- */

    .loading {
      width: 120px;
      height: 120px;
      position: relative;
      margin: 0 auto;
      top: 38vh;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      margin-left: -60px;
      left: 50%;
    }

    .loading__circle {
      border-radius: 50%;
      background-color: #979196;
      width: 17px;
      height: 17px;
      display: block;
      position: absolute;
      z-index: 1;
    }

    .loading__circle:nth-child(1) {
      top: 108px;
      left: 86px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -62.5ms;
              animation-delay: -62.5ms;
    }

    .loading__circle:nth-child(2) {
      top: 86px;
      left: 108px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -125ms;
              animation-delay: -125ms;
    }

    .loading__circle:nth-child(3) {
      top: 56px;
      left: 116px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -187.5ms;
              animation-delay: -187.5ms;
    }

    .loading__circle:nth-child(4) {
      top: 26px;
      left: 108px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -250ms;
              animation-delay: -250ms;
    }

    .loading__circle:nth-child(5) {
      top: 4px;
      left: 86px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -312.5ms;
              animation-delay: -312.5ms;
    }

    .loading__circle:nth-child(6) {
      top: -4px;
      left: 56px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -375ms;
              animation-delay: -375ms;
    }

    .loading__circle:nth-child(7) {
      top: 4px;
      left: 26px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -437.5ms;
              animation-delay: -437.5ms;
    }

    .loading__circle:nth-child(8) {
      top: 26px;
      left: 4px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -500ms;
              animation-delay: -500ms;
    }

    .loading__circle:nth-child(9) {
      top: 56px;
      left: -4px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -562.5ms;
              animation-delay: -562.5ms;
    }

    .loading__circle:nth-child(10) {
      top: 86px;
      left: 4px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -625ms;
              animation-delay: -625ms;
    }

    .loading__circle:nth-child(11) {
      top: 108px;
      left: 26px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -687.5ms;
              animation-delay: -687.5ms;
    }

    .loading__circle:nth-child(12) {
      top: 116px;
      left: 56px;
      -webkit-animation-duration: 750ms;
              animation-duration: 750ms;
      -webkit-animation-name: upup;
              animation-name: upup;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-delay: -750ms;
              animation-delay: -750ms;
    }

    @-webkit-keyframes upup {
      0% {
        -webkit-transform: scale(0.2, 0.2);
                transform: scale(0.2, 0.2);
        opacity: 1;
      }
      50% {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        opacity: 1;
      }
      100% {
        -webkit-transform: scale(0.2, 0.2);
                transform: scale(0.2, 0.2);
        opacity: 1;
      }
    }

    @keyframes upup {
      0% {
        -webkit-transform: scale(0.2, 0.2);
                transform: scale(0.2, 0.2);
        opacity: 1;
      }
      50% {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        opacity: 1;
      }
      100% {
        -webkit-transform: scale(0.2, 0.2);
                transform: scale(0.2, 0.2);
        opacity: 1;
      }
    }