@charset "UTF-8";
.button-sale {
  color: #C98708;
  border-color: #C98708;
  background: transparent;
}

.button-sale {
  position: relative;
  overflow: hidden;
}

.button-sale::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #C98708;
  width: 150%;
  padding-top: 150%;
  transition: 0.25s ease;
}

.button-sale {
  transition: 0.25s ease;
}
.button-sale > span {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
}
.button-sale::after {
  transform: rotate(25deg);
  top: -100%;
  left: -190%;
}
.button-sale:hover {
  color: #FFF;
  cursor: pointer;
}
.button-sale:hover:after {
  left: -30%;
}

svg {
  height: 80px;
  position: absolute;
  width: 80px;
}

.plates {
  display: flex;
  flex-wrap: wrap;
  max-height: 160px;
  width: 640px;
}

@media (max-width: 640px) {
  .plates {
    width: 320px;
  }
}
.plate {
  height: 80px;
  width: 80px;
}

.burger {
  filter: url(#gooeyness);
}

.x {
  transform: scale(0);
  transition: transform 400ms;
}

.line {
  fill: none;
  stroke: #C98708;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}

.x .line {
  stroke-width: 5.5px;
}

/* First plate */
.plate1 .line2 {
  stroke-dasharray: 40 200;
  stroke-dashoffset: 0;
}

.plate1 .line3 {
  stroke-dasharray: 40 179;
  stroke-dashoffset: 0;
}

.active .line {
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}

.active.plate1 .line1 {
  transform: scale(0, 1);
  transition: transform 500ms 100ms;
}

.active.plate1 .line2 {
  stroke-dasharray: 5px 200;
  stroke-dashoffset: -164px;
}

.active.plate1 .line3 {
  stroke-dasharray: 5px 179;
  stroke-dashoffset: -142px;
}

.active .x {
  transform: scale(1);
  transition: transform 400ms 350ms;
}

/* El segundo plato */
.plate2 .line1 {
  stroke-dasharray: 21 185.627532959;
  transition-delay: 0s;
}

.plate2 .line2 {
  stroke-dasharray: 21 178.6514129639;
  transition-delay: 30ms;
}

.plate2 .line3 {
  stroke-dasharray: 21 197.9242553711;
  transition-delay: 60ms;
}

.plate2 .line4 {
  stroke-dasharray: 21 190.6597137451;
  transition-delay: 90ms;
}

.plate2 .line5 {
  stroke-dasharray: 21 208.5287475586;
  transition-delay: 120ms;
}

.plate2 .line6 {
  stroke-dasharray: 21 186.5970306396;
  transition-delay: 150ms;
}

.active.plate2 .line1 {
  stroke-dasharray: 5 185.627532959;
  stroke-dashoffset: -141px;
}

.active.plate2 .line2 {
  stroke-dasharray: 5 178.6514129639;
  stroke-dashoffset: -137px;
}

.active.plate2 .line3 {
  stroke-dasharray: 5 197.9242553711;
  stroke-dashoffset: -176px;
}

.active.plate2 .line4 {
  stroke-dasharray: 5 190.6597137451;
  stroke-dashoffset: -159px;
}

.active.plate2 .line5 {
  stroke-dasharray: 5 208.5287475586;
  stroke-dashoffset: -139px;
}

.active.plate2 .line6 {
  stroke-dasharray: 5 186.5970306396;
  stroke-dashoffset: -176px;
}

.active.plate2 .x {
  transition: transform 400ms 250ms;
}

/* O terceiro prato */
.plate3 .line {
  transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms;
}

.plate3 .line1 {
  stroke-dasharray: 21 109;
}

.plate3 .line2 {
  stroke-dasharray: 21 112;
}

.plate3 .line3 {
  stroke-dasharray: 21 102;
}

.plate3 .line4 {
  stroke-dasharray: 21 103;
}

.plate3 .line5 {
  stroke-dasharray: 21 110;
}

.plate3 .line6 {
  stroke-dasharray: 21 115;
}

.plate3 .x {
  transition: transform 400ms 50ms;
}

.active.plate3 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate3 .line1 {
  stroke-dasharray: 5 109;
  stroke-dashoffset: -95px;
}

.active.plate3 .line2 {
  stroke-dasharray: 5 112;
  stroke-dashoffset: -96px;
}

.active.plate3 .line3 {
  stroke-dasharray: 5 102;
  stroke-dashoffset: -79px;
}

.active.plate3 .line4 {
  stroke-dasharray: 5 103;
  stroke-dashoffset: -78px;
}

.active.plate3 .line5 {
  stroke-dasharray: 5 110;
  stroke-dashoffset: -63px;
}

.active.plate3 .line6 {
  stroke-dasharray: 5 115;
  stroke-dashoffset: -64px;
}

.active.plate3 .x {
  transition: transform 400ms 100ms;
}

/* Die vierte teller */
.plate4 .x {
  transition: transform 400ms;
}

.plate4 .line {
  transform-origin: 50%;
  transition: transform 400ms 100ms;
}

.active.plate4 .line {
  transition: transform 400ms;
}

.active.plate4 .line1 {
  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(0.7);
}

.active.plate4 .line2 {
  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(0.7);
}

.active.plate4 .line3 {
  transform: translateY(0px) rotate(45deg) scale(0.7);
}

.active.plate4 .line4 {
  transform: translateY(0px) rotate(-45deg) scale(0.7);
}

.active.plate4 .line5 {
  transform: translateX(18px) translateY(3px) rotate(45deg) scale(0.7);
}

.active.plate4 .line6 {
  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(0.7);
}

.active.plate4 .x {
  transition: transform 400ms 100ms;
  transform: scale(1);
}

/* Den femte rätten */
.plate5 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate5 .line1 {
  stroke-dasharray: 40 40;
}

.plate5 .line2 {
  stroke-dasharray: 21 39;
}

.plate5 .line3 {
  stroke-dasharray: 21 39;
}

.plate5 .line4 {
  stroke-dasharray: 40 40;
}

.plate5 .x {
  transition: transform 400ms 50ms;
}

.active.plate5 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate5 .line1 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}

.active.plate5 .line2 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}

.active.plate5 .line3 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}

.active.plate5 .line4 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}

.active.plate5 .x {
  transition: transform 400ms 50ms;
}

/* Шестая пластина */
.plate6 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate6 .line1 {
  stroke-dasharray: 21 127;
}

.plate6 .line2 {
  stroke-dasharray: 21 106;
}

.plate6 .line3 {
  stroke-dasharray: 21 106;
}

.plate6 .line4 {
  stroke-dasharray: 21 126;
}

.plate6 .x {
  transition: transform 400ms 50ms;
}

.active.plate6 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate6 .line1 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}

.active.plate6 .line2 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}

.active.plate6 .line3 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}

.active.plate6 .line4 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}

.active.plate6 .x {
  transition: transform 400ms 50ms;
}

/* 제 7 판 */
.plate7 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate7 .line1 {
  stroke-dasharray: 21 102;
}

.plate7 .line2 {
  stroke-dasharray: 21 92;
}

.plate7 .line3 {
  stroke-dasharray: 21 97;
}

.plate7 .line4 {
  stroke-dasharray: 21 97;
}

.plate7 .line5 {
  stroke-dasharray: 21 92;
}

.plate7 .line6 {
  stroke-dasharray: 21 102;
}

.plate7 .x {
  transition: transform 400ms 50ms;
}

.active.plate7 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate7 .line1 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -102px;
}

.active.plate7 .line2 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -92px;
}

.active.plate7 .line3 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}

.active.plate7 .line4 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}

.active.plate7 .line5 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -90px;
  transition-delay: 40ms;
}

.active.plate7 .line6 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -100px;
  transition-delay: 40ms;
}

.active.plate7 .x {
  transition: transform 400ms 50ms;
}

/* Όγδοο πιάτο */
.plate8 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}

.plate8 .line1 {
  stroke-dasharray: 21 201;
}

.plate8 .line2 {
  stroke-dasharray: 21 201;
  transition-delay: 20ms;
}

.plate8 .line3 {
  stroke-dasharray: 21 201;
  transition-delay: 40ms;
}

.plate8 .line4 {
  stroke-dasharray: 21 201;
  transition-delay: 60ms;
}

.plate8 .line5 {
  stroke-dasharray: 21 201;
  transition-delay: 80ms;
}

.plate8 .line6 {
  stroke-dasharray: 21 201;
  transition-delay: 100ms;
}

.plate8 .x {
  transition: transform 400ms 50ms;
}

.active.plate8 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}

.active.plate8 .line1 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
}

.active.plate8 .line2 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 20ms;
}

.active.plate8 .line3 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 40ms;
}

.active.plate8 .line4 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 60ms;
}

.active.plate8 .line5 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 80ms;
}

.active.plate8 .line6 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 100ms;
}

.active.plate8 .x {
  transition: transform 400ms 50ms;
}

/*# sourceMappingURL=animations-compiled.css.map */