/**
 * Styles for animation sequence
 */

.castle-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	height: 75px;
}

.animation-sequence:not(.swipe):not(.fade) {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.animation-sequence.swipe,
.animation-sequence.fade {
	height: 100vh;
}

.animation-sequence.fade .animation-sequence__overlay,
.animation-sequence.fade .animation-sequence__fade {
	z-index: 1;
}

.animation-sequence__canvas-container,
.animation-sequence__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.animation-sequence__overlay {
	object-position: center top;
	object-fit: cover;
}

.animation-sequence__canvas {
	position: absolute;
	min-height: 100%;
	left: 50%;
}

.animation-sequence.fade .animation-sequence__canvas {
	left: 0;
}

.animation-sequence.swipe .animation-sequence__canvas-container {
	width: 0%;
	box-sizing: content-box;
}

.animation-sequence.swipe .animation-sequence__canvas-container::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	height: 100%;
	background: linear-gradient(90deg, transparent, white);
	border-right: 10px solid white;
	box-sizing: content-box;
}

.animation-sequence:not(.swipe) .animation-sequence__canvas-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	position: relative;
}

.animation-sequence__fade {
	position: absolute;
	inset: 0;
	background: black;
	opacity: 0.25;
}

/* Apply this class to a group that wraps the animation sequence */
.animation-sequence-wrapper {
	position: relative;
	width: 100vw;
	max-height: 80vh;
	aspect-ratio: 16 / 9;

	@media(max-width: 912px) {
		aspect-ratio: 3 / 2;
	}
}

.hero-title {
	position: absolute;
	top: 50vh;
	transform: translateY(-50%);
	width: 100%;
	height: 100vh;
}

/**
 * Utility classes
 * TODO: Move to a separate file
 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.h-max-content {
	height: max-content;
}

.top-3\/4-screen {
	top: 75vh;
}

.top-screen {
	top: 100vh;
}

.-translate-y-100 {
	transform: translateY(-100%);
}

.border-box {
	box-sizing: border-box;
}

@media(min-width:768px) {
	.floor-tab {
		width: 100%;
		height: 120px;
		justify-content: left !important;
		border-radius: 8px !important;
		margin-top: -120px !important;
	}

	.floor-tab > .wp-block-group.has-base-background-color {
		border: none;
		border-bottom-right-radius: 0 !important;
		flex-grow: 0;
		max-width: 200px;
	}

	.floor-tab > .wp-block-group.has-platinum-background-color {
		border-bottom-left-radius: 0 !important;
	}
}


/* WP Codeus Start */

@media (min-width: 1000px) {
	.castle-explore-floors-wrapper {
		padding-left: 15% !important;
		padding-right: 15% !important;
	}
}
@media (max-width: 1000px) {
	.castle-explore-floors-wrapper {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
}

/* Responsive */

@media (max-width: 780px) {
	.qi-block-timeline .qodef-e-title {
		line-height: 2rem;
		font-size: 1.3rem !important;
	}
/****
	h2 {
		line-height: 2.1rem !important;
	}
    *****/
	.floor-tab .wp-block-group .has-xx-large-font-size {
		font-size: 1.7rem !important;
		margin-top: -5px !important;
		margin-bottom: 7px !important;
	}
	.floor-tab .wp-block-group.has-contrast-3-background-color.has-background {
		padding: 4px 18px !important;

	}
	.floor-tab .wp-block-group.has-contrast-3-background-color h5 {
		font-size: 12px !important;
	}
	.floor-tab {
		margin-top: -18px !important;
		margin-bottom: 0px !important;
	}
	.wp-block-gutena-accordion-panel-title h4 strong {
		font-size: 15px !important;
	}
	.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title {
		padding-left: 20px !important;
		padding-right: 15px !important;
	}
}