.lines {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.schaum {
  fill: #F15A24;
}

.outline {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.beer {
  fill: #FF00FF;
}

.handle {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

/*** Animation ***/

/* Outline */

.outline {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: outlinedash 3s linear infinite;
}

@keyframes outlinedash {
  5% {
    stroke-dashoffset: 1500;
  }
  45% {
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dashoffset: 0;
  }
  95% {
    stroke-dashoffset: 1500;
  }
}

/* Handle */

.handle {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: handledash 3s linear infinite;
}

@keyframes handledash {
  10% {
    stroke-dashoffset: 300;
  }
  20% {
    stroke-dashoffset: 300;
  }
  23% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 0;
  }
  77% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: 300;
  }
  90% {
    stroke-dashoffset: 300;
  }
}

/* Lines */

.lines {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: linedash 3s linear infinite;
}

@keyframes linedash {
  5% {
    stroke-dashoffset: 100;
  }
  10% {
    stroke-dashoffset: 0;
  }
  90% {
    stroke-dashoffset: 0;
  }
  95% {
    stroke-dashoffset: 100;
  }
}

/* Schaum */

.schaum {
  fill: #131313;
  animation: fillschaum 3s linear infinite;
}

@keyframes fillschaum {
  40% {
    fill: #131313;
  }
  45% {
    fill: #FFFFFF;
  }
  55% {
    fill: #FFFFFF;
  }
  60% {
    fill: #131313;
  }
}

/* Beer */

.beer {
  fill: #131313;
  animation: fillbeer 3s linear infinite;
}

@keyframes fillbeer {
  40% {
    fill: #131313;
  }
  45% {
    fill: #DEB712;
  }
  55% {
    fill: #DEB712;
  }
  60% {
    fill: #131313;
  }
}
