/* Guillotine */
/* Guillotine */
/* Guillotine */
/* Guillotine */
/* Guillotine */
#cont {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}
.box {
	width: 140px;
	height: 140px;
	margin: 0 auto;
	position: relative;
	padding: 0px;
}
.guillotine {
	width: 55%;
	height: 100%;
	position: absolute;
	left: 23%;
}
.top-plate {
	z-index: 10;
	width: 100%;
	height: 18%;
	background: #660000;
	position: absolute;
}
.top-plate-back {
	z-index: 6;
	width: 100%;
	height: 18%;
	background: #813405;
	position: absolute;
	top: 2%;
}
.bolt {
	background: #ddd;
	width: 4.8%;
	height: 14%;
	position: absolute;
	border-radius: 100%;
	border: 0.5px solid #813405;
	z-index: 20;
}
.b1 {
	left: 7%;
	top: 10%;
}
.b2 {
	right: 7%;
	top: 10%;
}
.b3 {
	right: 7%;
	top: 68%;
}
.b4 {
	left: 7%;
	top: 68%;
}
.leg {
	height: 100%;
	width: 7%;
	background: #660000;
	position: absolute;
	z-index: 8;
}
.leg-right {
	left: 87%;
}
.leg-left {
	left: 6%;
}
.leg-back {
	background: #813405;
	position: absolute;
	z-index: 6;
}
.lb-left {
	right: 10%;
}
.lb-right {
	left: 10%;
}

.blade-plate {
	width: 100%;
	height: 12%;
	background: #660000;
	position: absolute;
	z-index: 8;
}
.blade-plate-back {
	width: 100%;
	height: 12%;
	background: #813405;
	position: absolute;
	top: 5%;
	z-index: 6;
}
.blade {
	-webkit-clip-path: polygon(0 0, 100% 0%, 100% 44%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 44%, 0% 100%);
	background: #ddd;
	width: 90%;
	height: 70%;
	left: 5%;
	position: absolute;
	z-index: 7;
}
#wire {
	position: absolute;
	width: 5%;
	height: 10%;
	background: #fff;
	z-index: 9;
	top: 15%;
	border-radius: 500000000px;
	left: 48%;
	animation-duration: 6s;
	animation-direction: 1;
	animation-timing-function: cubic-bezier(0.1, 0.72, 0.57, 0.93);
	animation-iteration-count: 1;
}
.active-wire {
	animation-name: rope-stretch;
}
@keyframes rope-stretch {
	0% {
		height: 10%;
	}
	3% {
		height: 57%;
	}
	100% {
		height: 10%;
	}
}
#blade-cont {
	z-index: 10;
	width: 55%;
	height: 35%;
	position: absolute;
	top: 22%;
	left: 22%;
	animation-duration: 6s;
	animation-direction: 1;
	animation-timing-function: cubic-bezier(0.1, 0.72, 0.57, 0.93);
	animation-iteration-count: 1;
}
.active-blade {
	animation-name: g-drop;
}
@keyframes g-drop {
	0% {
		top: 22%;
	}
	3% {
		top: 69%;
	}
	100% {
		top: 22%;
	}
}
.bottom-plate {
	z-index: 8;
	width: 100%;
	height: 18%;
	background: #660000;
	position: absolute;
	top: 70%;
	display: flex;
	justify-content: center;

	align-items: center;
}
.bottom-plate-back {
	z-index: 1;
	width: 100%;
	height: 18%;
	background: #813405;
	position: absolute;
	top: 72%;
}
.bottom-plate-circle {
	width: 26%;
	height: 78%;
	background: #333;
	border-radius: 50%;
}

@keyframes helmet-ch {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	100% {
		transform: translate(600%, 120%) rotate(1440deg);
	}
}

.active-head {
	animation: helmet-ch;
}

#head {
	position: absolute;
	z-index: 20;
	background-image: url('/img/svg/football-helmet.svg');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	width: 50%;
	height: 40%;
	left: 28%;
	top: 57%;
	transform: rotate(45deg);

	animation-duration: 2s;
	animation-delay: 0.3s; /* Adjusted to start when g-drop is at its lowest point */
	animation-direction: normal;
	animation-timing-function: cubic-bezier(0.1, 0.72, 0.57, 0.93);
	animation-iteration-count: 1;
}