.plate svg {
	height: 50px;
	position: absolute;
	width: 50px;
	top: 0;
	right: 0;
}
.plates {
	display: flex;
	flex-wrap: wrap;
	max-height: 160px;
	width: 640px;
}
@media (max-width: 640px) {
	.plates {
		width: 320px;
	}
}
.plate {
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
}
.burger {
	filter: url(#gooeyness);
}
.x {
	transform: scale(0);
	transition: transform 400ms;
}
.line {
	fill: none;
	stroke: #ee2737;
	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;
}

.active .x {
	transform: scale(1);
	transition: transform 400ms 350ms;
}
/* 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;
}