/* Crane Hook Animation System */
.crane-system {
	position: fixed;
	top: 0px;
	/* Start from inside logo area */
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/*
@media screen and (max-width: 768px) {
	.crane-system {
		top: 105px;
		
	}
}

@media screen and (max-width: 480px) {
	.crane-system {
		top: 90px;

	}
}
*/

.crane-system.active {
	opacity: 1;
}

.rope {
	position: absolute;
	width: 4px;
	height: 0;
	background: repeating-linear-gradient(0deg, #2a2a2a 0px, #2a2a2a 6px, #444 6px, #444 10px);
	top: 0;
	transition: height 1.0s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
	/* Behind pulley and hook */
}

.rope-left {
	left: 30px;
}

.rope-right {
	right: 30px;
}

.pulley-block {
	position: absolute;
	width: 140px;
	height: 120px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: top 1.0s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	/* In front of ropes */
}

.hook-container {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.crane-system.animating .rope {
	height: calc(100vh - 70px);
	/* Extended into pulley - no gap*/
}

/*
@media screen and (max-width: 768px) {
	.crane-system.animating .rope {
		height: calc(100vh - 155px);
		
	}
}

@media screen and (max-width: 480px) {
	.crane-system.animating .rope {
		height: calc(100vh - 140px);
		
	}
}
*/

.crane-system.retracting .rope {
	height: 0 !important;
}

.crane-system.animating .pulley-block {
	top: calc(100vh - 80px);
	/* Hook drops even lower 185*/
}

/*
@media screen and (max-width: 768px) {
	.crane-system.animating .pulley-block {
		top: calc(100vh - 170px);
		
	}
}

@media screen and (max-width: 480px) {
	.crane-system.animating .pulley-block {
		top: calc(100vh - 155px);
	
	}
}
*/

.crane-system.retracting .pulley-block {
	top: 0 !important;
}