.documents.hidden {
	display: none;
}

.folders {
	display: flex;
}

.folders .folder {
	width: 33%;
	aspect-ratio: 140/198;
}

.folders .folder .front {
	background-image: url("../assets/imgs/folder.svg");
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.folders .folder .front p {
	padding: 25%;
	text-align: center;
	margin-top: 25%;
}

.folders .folder.open {
	width: 100%;
	position: absolute;
	aspect-ratio: 489/301;
	top: 0;
	left: 0;
	z-index: 50;
}

.folders .folder .folder-content {
	background-image: url("../assets/imgs/open-folder.svg");
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	opacity: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

}

.folders .folder .front.hidden, .folders .folder .airport-folders .airport-folder .airport-front.hidden {
	display: none;
	pointer-events: none;
}

.folders .folder.open:not(.airports) .folder-content, .folders .folder .airport-folders .airport-folder.open .folder-content {
	opacity: 1;
	pointer-events: all;
}

.folders .folder .airport-folders {
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;

	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

.folders .folder .airport-folders * {
	pointer-events: none;
}

.folders .folder.open .airport-folders {
	opacity: 1;
	pointer-events: all;
	overflow: visible;
}

.folders .folder .airport-folders .airport-folder {
	height: 100%;
	aspect-ratio: 248/322;
	width: 100%;
	position: absolute;
	pointer-events: none;
}

.folders .folder.airports.open .airport-folders .airport-folder .airport-front {
	background-image: url("../assets/imgs/airport-folder.svg");
	background-repeat: no-repeat;
	background-position: 0;
	background-size: contain;
	height: 100%;
	aspect-ratio: 248/322;
	pointer-events: all;
}

.folders .folder .airport-folders .airport-folder .airport-front p {
	position: absolute;
    transform: rotate(85deg);
    left: 0;
    top: 0;
    margin: 0;
    height: 1rem;
    font-size: 2.8vh;
}

.folders
img.periodic-table {
	width: 100%;
}

.airport-folder .close-airport {
	position: absolute;
	background: white;	
	top: 0;
	right: 0;
	width: 40px;
	aspect-ratio: 1/1;
	border-radius: 100%;
	z-index: 1000;
}

.airport-folder .close-airport::after {
	content: "";
	background-image: url("../assets/imgs/close.svg");
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 50%;
}

.airport-folder .airport-page {
	background-image: url("../assets/imgs/note-paper.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	aspect-ratio: 1/1.414;
	padding: 8vh;
	top: 5%;
}


.airport-folder .airport-page.airport-page-1 {
	left: 0;
	top: 0;
	transform: rotate(-5deg);
}

.airport-folder .airport-page.airport-page-2 {
	right: -2%;
	transform: rotate(4deg);
}

.airport-folder .airport-page * {
	position: relative;
	z-index: 100;
	/* font-family: "adobe-garamond-pro", serif; */
	font-size: 3vh;
	font-family: "adobe-handwriting-frank", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 3.6vh;
	color: #0c1a75;
}

.airport-folder .airport-page h2 {
	font-size: 4vh;
}

.airport-folder .airport-page p {
	margin-right: 6vh;
	margin-top: 1.5vh;
	margin-bottom: 0;
}

.airport-folder.open .close-airport {
	pointer-events: all;
}

.decoder-left {
	width: 50%;
	top:-5%;
	position: absolute;
}

.decoder-right {
	width: 50%;
	top: -10%;
	right: 0;
	position: absolute;
}

.decoder-numbers {
	width: 40%;
	position: absolute;
    bottom: -5%;
	right: 0;
    transform: rotate(-14deg);
	z-index: 10;
}