.ladder_scene {
	width: calc( (var(--marginLeftBig) - var(--marginLeftSmall)) * 0.68 );
	width: 6.5vw;
	height: 100%;
	height: 40%;
	margin-left: calc( (var(--marginLeftBig) - var(--marginLeftSmall)) * (1 - 0.68)/2 );
	margin-left: -4.5vw;
	/* transform: translateX(-3.6vmin); */
	perspective: 200px;
	perspective-origin: -50vmin 0;
/* 	perspective-origin: left; */
	/* perspective-origin: calc( (var(--marginLeftBig) - var(--marginLeftSmall)) / 2) 0; */
	/* perspective-origin: 200% 0; */
	/* border-style: solid;
	color: orange; */
	/* z-index: 2; */
	}

.ladder {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.ladder_front{
	position: absolute;
	width: 100%;
	height: 100%;
	/* transform: rotateY(0deg) translateZ(3px) rotateX(3deg); */
	transform: rotateY(0deg) translateZ(20px) rotateX(5deg);
	transform-origin: bottom;
	/* border-style: solid;
	color: blue; */
}

.ladder_back {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: rotateY(180deg) translateZ(20px);
	background-color: transparent;
	background: repeating-linear-gradient(transparent, transparent 12.5%, rgba(0,0,0,0.7) 14.5%, rgba(0,0,0,0.7) 15.5%, transparent 17.5%);
	/* background-color: red;
	opacity: 0.3; */
	box-shadow: inset -0.7vmin -0.5vmin 1vmin rgba(0,0,0,0.7), 0.7vmin 0.5vmin 1vmin rgba(0,0,0,0.7), 
	inset 0.7vmin -1vmin 0.5vmin rgba(0,0,0,0.7), -0.7vmin 0.5vmin 1vmin rgba(0,0,0,0.7);
	box-shadow: inset -7px -3px 8px rgba(0,0,0,0.7), 7px 3px 8px rgba(0,0,0,0.7), inset 7px -3px 8px rgba(0,0,0,0.7), 
	-7px 3px 8px rgba(0,0,0,0.7);
}

.ladder_bottom {
	position: absolute;
	height: 40px;
	width: calc((var(--marginLeftBig) - var(--marginLeftSmall)) * 0.68);
	top: 100%;
	transform: rotateX(-90deg) translateZ(-20px);
	background-color: transparent;
	background: repeating-linear-gradient(transparent, transparent 15%, rgba(0,0,0,0.7) 16%, rgba(0,0,0,0.7) 20%, transparent 25%);
	/* background-color: blue;
	opacity: 0.3; */
	/* box-shadow: inset 0.7vmin -3vmin 1vmin black, -0.7vmin 1vmin 1vmin black; */
	box-shadow: inset -0.7vmin -0.5vmin 1vmin rgba(0,0,0,0.7), 0.7vmin 0.5vmin 1vmin rgba(0,0,0,0.7), 
	inset 0.7vmin -0.5vmin 1vmin rgba(0,0,0,0.7), -0.7vmin 0.5vmin 1vmin rgba(0,0,0,0.7);
	box-shadow: inset -7px -3px 8px rgba(0,0,0,0.7), 7px 3px 8px rgba(0,0,0,0.7), inset 7px -3px 8px rgba(0,0,0,0.7), -7px 3px 8px rgba(0,0,0,0.7);
}

.horiz_ladder {
	position: absolute;
	width: 100%;
	width: 106.8%;
	/* height: 5%; */
	aspect-ratio: 10 / 1;
	z-index: 1;
	border-radius: 30%;
	/* background-color: rgb(92, 64, 51);  */
	/* (Dark brown) / rgb(149, 69, 53) (Chestnut) */
	background-image: linear-gradient(to bottom, black 0%, rgb(92, 64, 51) 10%, rgba(157.2, 140.4, 132.6, 1.0) 49.5% 50.5%, rgb(92, 64, 51) 80%, black 100%);
	/* border-style: solid;
	color: black; */
}

.vert_ladder {
	position: absolute;
	/* width: 3.4%; */
	height: 100%;
	aspect-ratio: 3 / 100;
	/* (Dark brown) / rgb(149, 69, 53) (Chestnut) */
	/* background-color: rgb(92, 64, 51); */ 
	background-image: linear-gradient(to right, black 0%, rgb(92, 64, 51) 20%, rgba(157.2, 140.4, 132.6, 1.0) 49.5% 50.5%, rgb(92, 64, 51) 80%, black 100%);
}

.l_left {
top: 0%;
left: 3.4%;
left: 0%;
/* border-radius: 30% 30% 0 0; */}

.l_right {
top: 0%;
right: 3.4%;
right: 0%;
/* border-radius: 30% 30% 0 0; */}

.l_1 {
top: 10%;
left: 0%;
left: -3.4%;
}

.l_2 {
top: 20%;
left: 0%;
left: -3.4%;
}

.l_3 {
top: 30%;
left: 0%;
left: -3.4%;
}

.l_4 {
top: 40%;
left: 0%;
left: -3.4%;
}

.l_5 {
top: 50%;
left: 0%;
left: -3.4%;
}

.l_6 {
top: 60%;
left: 0%;
left: -3.4%;
}

.l_7 {
top: 70%;
left: 0%;
left: -3.4%;
}

.l_8 {
top: 80%;
left: 0%;
left: -3.4%;
}

.l_9 {
top: 90%;
left: 0%;
left: -3.4%;
}

@media screen and (orientation: portrait) {

.ladder_scene {
	display: none;
}

}