:root {
	/* COMMON */
	--common-page-size: calc(min(1vw / var(--default-aspect-ratio), 1vh) * var(--zoom-multiplier, 1));
    --common-page-radius: 3.25;

    --common-page-main-title-size: 5.25;
    --common-page-main-title-letter-spacing: 0.1;
    
	--common-page-action-title-size: 1.625;
	--common-page-action-title-margin: 1;

	--common-page-action-letter-spacing: 0.05;
	--common-page-action-padding: 1.625;
	--common-page-action-size: 1.425;
	
	--common-page-accordion-padding: 5;
	--common-page-accordion-arrow-size: 1.75;
	
	--common-page-content-title-size: 3.25;
	--common-page-content-title-margin: 2.5;
	
	--common-page-content-h2-size: 2.25;
	--common-page-content-h2-letter-spacing: 0.05;
	--common-page-content-h2-top: 5;
	--common-page-content-h2-bottom: 1.5;
	
	--common-page-content-paragraph-size: 1.5;
	--common-page-content-paragraph-letter-spacing: 0.05;
	--common-page-content-paragraph-line-height: 1.5;
	
	--common-page-content-list-top: 1;
	--common-page-content-list-left: 3.25;
	--common-page-content-list-dot-offset: 1.5;
	--common-page-content-list-dot-size: 0.25;
	
	--common-page-content-anchor-underline-offset: 0.5;
	
	--common-page-content-side: calc(10 / var(--zoom-multiplier));

    --letter-spacing-multiplier: 0.05;
}

.full-width-line {
	opacity: 0.1;
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: calc(1px / var(--zoom-multiplier, 1));
}

/*-------------------------------------------------------------------------------------------------------

COMMON

-------------------------------------------------------------------------------------------------------*/

#common {
    display: block !important;
	width: 100vw;
	min-height: 100vh;
}

/* UPPER BACKGROUND */

#common .background-image {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	background: #000 linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75) 100%);
	
	position: relative;

	width: 100vw;
	height: calc(50vh - var(--header-size, 0vh));
	padding-bottom: var(--page-content-padding);
}

#common .background-image #title {
	color: rgb(255, 255, 255);
	
	font-size: calc(var(--common-page-size) * var(--common-page-main-title-size));

	text-transform: uppercase;
	text-shadow: 0 0 calc(var(--common-page-size) * var(--common-page-main-title-size)) rgb(0, 0, 0);
		
	letter-spacing: calc(var(--common-page-size) * var(--common-page-main-title-size) * var(--common-page-main-title-letter-spacing));
	white-space: nowrap;

	position: absolute;

	top: calc(50% + var(--fixed-content-padding) * -1);
	left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	z-index: 5;
}

#common .background-image img {
	position: absolute;
	
	-o-object-fit: cover;
	object-fit: cover;

	-o-object-position: 50% 100%;
	object-position: 50% 100%;

	width: 100%;
	height: 100%;

	left: 0;
	bottom: 0;

	z-index: 0;
}

/* CONTAINER */

#common .container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;

	background-color: rgb(255, 255, 255);
	border-radius: calc(var(--common-page-size) * var(--common-page-radius)) calc(var(--common-page-size) * var(--common-page-radius)) 0 0;

	position: relative;
	width: calc(100% - var(--page-content-padding) * 2);
	padding: calc(var(--fixed-content-padding) * 2);

	margin: auto;
	margin-top: calc(var(--fixed-content-padding) * -2);
}

#common .container::after {
	content: "";
	border-radius: calc(var(--common-page-size) * var(--common-page-radius)) calc(var(--common-page-size) * var(--common-page-radius)) 0 0;
	box-shadow: 0 0 10vh rgb(0, 0, 0);

	position: absolute;

	width: 100%;
	height: calc(var(--fixed-content-padding) * 2);

	left: 0;
	top: 0;

	z-index: -1;
}

#common .category-options,
#common .category-content {
    animation: fade-animation 1s ease-in-out;
}

#common .category-options {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	width: auto;
	height: 100%;
}

#common .category-options .actions {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	width: auto;
	height: 100%;
}

#common .category-options h1 {
	color: rgb(0, 0, 0);
	
	font-size: calc(var(--common-page-size) * var(--common-page-action-title-size));

	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: calc(var(--common-page-size) * var(--common-page-action-letter-spacing));

	margin-bottom: calc(var(--common-page-size) * var(--common-page-action-title-margin));
}

#common .category-options #dropdown-action {
	display: none;

	font-size: calc(var(--common-page-size) * var(--common-page-action-size));

	white-space: nowrap;
	letter-spacing: calc(var(--common-page-size) * var(--common-page-action-letter-spacing));

	padding: calc(var(--common-page-size));
}

#common .category-options .actions .action {
	color: rgb(0, 0, 0);
	opacity: 0.5;
	
	font-size: calc(var(--common-page-size) * var(--common-page-action-size));

	letter-spacing: calc(var(--common-page-size) * var(--common-page-action-letter-spacing));
	white-space: nowrap;

    width: 100%;
	padding: calc(var(--common-page-size) * var(--common-page-action-padding));
	margin-left: calc(var(--common-page-size) * var(--common-page-action-padding) * -1);
	margin-top: var(--common-page-size);
	margin-bottom: calc(var(--common-page-size) * -1);

	transition: opacity var(--transition-medium);
}

#common .category-options .actions .action.active,
#common .category-options .actions .action:hover {
	opacity: 1;
}

/* CONTENT */

#common .category-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	padding-left: calc(var(--common-page-size) * var(--common-page-content-side));
	width: 100%;
}

#common .category-content .content-container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
    user-select: text;
	width: 100%;
}

#common .category-content .content-container iframe {
    aspect-ratio: 1.75;
    width: 100%;
    height: auto;
}

#common .category-content .content-container img {
    -o-object-position: center;
    object-fit: contain;
    
    -o-object-position: center;
    object-position: center;
    
    border-radius: 2.5vh;
    
    width: 100%;
    height: auto;
}

#common .category-content .content-container h1 {
    font-weight: var(--font-weight-medium);
}

#common .category-content .content-container h1,
#common .category-content .content-container h2 {
	color: rgb(0, 0, 0);
	font-size: calc(var(--common-page-size) * var(--common-page-content-h2-size));

	letter-spacing: calc(var(--common-page-size) * var(--common-page-content-h2-size) * var(--common-page-content-h2-letter-spacing));
	line-height: 100%;
	
	margin-top: calc(var(--common-page-size) * var(--common-page-content-h2-top));
	margin-bottom: calc(var(--common-page-size) * var(--common-page-content-h2-bottom));
}

#common .category-content .content-container h2 {
    font-size: calc(var(--common-page-size) * var(--common-page-content-h2-size) / 1.5);
	letter-spacing: calc(var(--common-page-size) * var(--common-page-content-h2-size) / 1.5 * var(--common-page-content-h2-letter-spacing));
}

#common .category-content .content-container h1.title {
	font-size: calc(var(--common-page-size) * var(--common-page-content-title-size));
	
	margin-top: 0;
	margin-bottom: calc(var(--common-page-size) * var(--common-page-content-title-margin));
}

#common .category-content .content-container p,
#common .category-content .content-container a,
#common .category-content .content-container li {
	color: rgb(0, 0, 0);
	
	font-size: calc(var(--common-page-size) * var(--common-page-content-paragraph-size));
	font-weight: var(--font-weight-light);

	position: relative;

	text-decoration: none;
	letter-spacing: calc(var(--common-page-size) * var(--common-page-content-paragraph-size) * var(--common-page-content-paragraph-letter-spacing));
	line-height: calc(var(--common-page-size) * var(--common-page-content-paragraph-size) * var(--common-page-content-paragraph-line-height));

	margin: calc(var(--common-page-size) * var(--common-page-content-paragraph-size)) 0;
}

#common .category-content .content-container ul > * {
	padding-top: calc(var(--common-page-size) * var(--common-page-content-list-top));
	margin: 0;
}

#common .category-content .content-container a {
	opacity: 0.333;
	transition: opacity var(--transition-medium);
}

#common .category-content .content-container a:hover {
	opacity: 0.75;
}

#common .category-content .content-container ul {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	list-style-type: none;
	margin-left: calc(var(--common-page-size) * var(--common-page-content-list-left));
}

#common .category-content .content-container li::before {
	content: "";

	border-style: solid;
    border-radius: 50%;
	border-width: calc(var(--common-page-size) * var(--common-page-content-list-dot-size));
	border-color: rgb(0, 0, 0);
	
	opacity: 0.25;

	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-o-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);

    width: 0;
	height: 0;

	top: calc(var(--common-page-size) * var(--common-page-content-paragraph-size) + var(--common-page-size) * var(--common-page-content-list-top) / 2);
    left: calc(var(--common-page-size) * var(--common-page-content-list-dot-offset) * -1);

	position: absolute;
	pointer-events: none;
}

/* ACCORDION */

#common .category-content .content-container .accordion-section {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	border-bottom: calc(1px / var(--zoom-multiplier)) solid rgba(0, 0, 0, 0.1);

	width: 100%;
}

#common .category-content .content-container .accordion-section .accordion-action {
    opacity: 0.75;
    
	text-decoration: none;
	user-select: none;
	
	width: 100%;
	padding: calc(var(--common-page-size) * var(--common-page-accordion-padding)) 0;
	margin: 0;
}

#common .category-content .content-container .accordion-section .accordion-action:hover {
    opacity: 1;
}

#common .category-content .content-container .accordion-section .accordion-action::after {
	content: "";
	display: inline-block;
	position: absolute;

	background-image: url('../../icons/arrow.svg');
	background-position: center;
	background-size: contain;

	width: calc(var(--common-page-size) * var(--common-page-accordion-arrow-size));
	height: calc(var(--common-page-size) * var(--common-page-accordion-arrow-size));

	vertical-align: middle;
	top: 50%;
	right: 0;
	
	-webkit-transform: translateY(-50%) rotate(90deg) scaleX(1);
	-moz-transform: translateY(-50%) rotate(90deg) scaleX(1);
	-o-transform: translateY(-50%) rotate(90deg) scaleX(1);
	-ms-transform: translateY(-50%) rotate(90deg) scaleX(1);
	transform: translateY(-50%) rotate(90deg) scaleX(1);

	transition: -webkit-transform var(--transition-medium),
		-moz-transform var(--transition-medium),
		-o-transform var(--transition-medium),
		-ms-transform var(--transition-medium),
		transform var(--transition-medium);
}

#common .category-content .content-container .accordion-section .accordion-action.active::after {
	-webkit-transform: translateY(-50%) rotate(90deg) scaleX(-1);
    -moz-transform: translateY(-50%) rotate(90deg) scaleX(-1);
    -o-transform: translateY(-50%) rotate(90deg) scaleX(-1);
    -ms-transform: translateY(-50%) rotate(90deg) scaleX(-1);
	transform: translateY(-50%) rotate(90deg) scaleX(-1);
}

#common .category-content .content-container .accordion-section .accordion-content {
	--max-content-height: 0;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	overflow: hidden;

	width: 100%;

	opacity: 0;
	height: 0;
	margin-bottom: 0;

	transition: opacity var(--transition-medium), height var(--transition-medium), margin-bottom var(--transition-medium);
}

#common .category-content .content-container .accordion-section .accordion-action.active ~ .accordion-content {
	opacity: 1;
	height: var(--max-content-height);
	margin-bottom: calc(var(--common-page-size) * var(--common-page-accordion-padding));
}

#common .category-content .content-container .accordion-section .accordion-content > * {
	margin: 0;
}

@media (max-width: 133.33vh) {
    :root {
        /* UNITS */
    	--precalculated-size-10: min(calc(1.625vw / var(--default-aspect-ratio)), 1.625vh);

    	/* COMMON */
    	--common-dropdown-action-size: 2.5;
    	--common-dropdown-action-padding: 4.5;
    }
    
	#common .background-image {
		height: 25vw;
		padding-bottom: 0;
	}

	#common .background-image #title {
		top: 50%;
	}

	#common .container {
		flex-direction: column;

		border-radius: 0;

		padding: 0;

		margin: auto;
		margin-top: var(--page-content-padding);
	}

	#common .container::after {
		content: none;
	}

	#common .category-options {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	
		width: 100%;
		height: auto;
		margin-bottom: calc(var(--common-page-size) * 10);
	}

	#common .category-options .full-width-line {
		display: none;
	}

	#common .category-options #dropdown-action {
		display: flex;

		color: rgb(255, 255, 255);
		background-color: rgb(0, 0, 0);

		border-radius: calc(var(--common-page-size) * var(--common-page-radius));

		font-size: calc(var(--common-page-size) * var(--common-dropdown-action-size));
		text-transform: uppercase;

		width: 100%;
		padding: calc(var(--common-page-size) * var(--common-dropdown-action-padding));
		z-index: 10;
		
		transition: border-radius var(--transition-medium);
	}

	#common .category-options .actions {
		--child-count: 0;
		--child-size: calc(var(--common-page-size) * var(--common-dropdown-action-size));
		--child-horizontal-padding: calc(var(--common-page-size) * var(--common-dropdown-action-padding));
		--child-vertical-padding: calc(var(--common-page-size) * var(--common-dropdown-action-size));
		
		--target-padding-top: calc(var(--common-page-size) * var(--common-page-radius));

		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		
		pointer-events: none;
		overflow: hidden;

		background-color: rgb(0, 0, 0);
		border-radius: 0 0 calc(var(--common-page-size) * var(--common-page-radius)) calc(var(--common-page-size) * var(--common-page-radius));

		width: 100%;
		height: 0;
		padding: 0;
		margin-top: calc(var(--common-page-size) * var(--common-page-radius) * -1);

		z-index: 5;
		transition: height var(--transition-medium), padding-top var(--transition-medium), padding-bottom var(--transition-medium);
	}

	#common .category-options:has(#dropdown-action.active) .actions {
		pointer-events: all;
		height: calc(var(--child-count, 0) * (var(--child-size, 0vh) + var(--child-vertical-padding, 0vh) * 2) + var(--target-padding-top) + var(--child-vertical-padding));
		
		padding-top: var(--target-padding-top);
		padding-bottom: var(--child-vertical-padding);
	}

	#common .category-options .actions .action {
		color: rgb(255, 255, 255);
		opacity: 0.75;
		
		font-size: var(--child-size);
		line-height: var(--child-size);
		
		width: 100%;
		padding: var(--child-vertical-padding) var(--child-horizontal-padding);
		margin: 0;

		transition: opacity var(--transition-medium);
	}

	#common .category-options .actions .action.active,
	#common .category-options .actions .action:hover {
		opacity: 1;
	}

	#common .category-content {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	
		padding-left: 0;
		width: 100%;
	}

	#common .category-content .content-container .title {
		margin-top: calc(var(--precalculated-size-10) * 2.5);
	}
}

@media (max-width: 75vh) {
    #common {
        margin-bottom: var(--fixed-content-padding);
    }
    
	#common .category-content .content-container h1,
	#common .category-content .content-container h1.title {
		font-size: calc(var(--precalculated-size-10) * 2.25);
	}
	
	#common .category-content .content-container .title {
		font-size: calc(var(--precalculated-size-10) * 2.5);
		margin-bottom: calc(var(--precalculated-size-10) * 2);
	}

	#common .category-content .content-container p,
	#common .category-content .content-container a,
	#common .category-content .content-container li {
		font-size: calc(var(--precalculated-size-10) * 1.75);
		line-height: calc(var(--precalculated-size-10) * 3.25);
		margin: var(--precalculated-size-10) 0;
	}

	#common .category-content .content-container ul {
		margin-left: calc(var(--precalculated-size-10) * 2.5);
	}

	#common .category-content .content-container .accordion-action {
		padding: calc(var(--precalculated-size-10) * 3.5) 0;
	}
}