.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;
	cursor: pointer;
}

.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%;
	margin-top: 10vh;
}

.decoder-all {
	width: 91%;
    height: 80%;
    position: absolute;
    left: -1%;
	margin-top: 16vh;
}

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

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

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

.folder-img {
	width: 111%;
    position: absolute;
    left: -1%;
}

.view-btn {
	border: none;
    background-color: black;
    color: white;
    font-size: 21px;
    padding: 1vh 2vh;
    border-radius: 2vh;
    cursor: pointer;
}

#weather-view {
	position: absolute;
    top: 51%;
    right: 67%;
    transform: rotate(347deg);
}

#distance-view {
	position: absolute;
    top: 64%;
    right: 23%;
    transform: rotate(8deg);
}

.folders .close,
.folders .close-nested {
	position: absolute;
	font-family: arial;
    top: 8%;
    z-index: 2;
    font-size: 55px;
    right: -2%;
	cursor: pointer;
}

.folders .close2 {
	position: absolute;
	font-family: arial;
    top: 14%;
    z-index: 2;
    font-size: 55px;
    right: -8%;
	cursor: pointer;
}

.folder-background {
	width: 111%;
    position: absolute;
    left: -1%;
	margin-top: 10vh;
}