/************************
* GENERAL
************************/
@font-face {
	font-family: 'Manrope';
	src: url('../corporate-design/font/Manrope-Light.ttf');
	font-display: fallback;
}
* {
	user-select: none;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: 'Manrope', serif;
	position: relative;	
}


/************************
* LAYOUT
************************/
#grid-wrapper {
	width: 100%;
	height: 100%;
	display: grid;
	justify-content: center;
	align-items: center;
}
#grid{
	display: grid;
	width: 100%;
	height: 100%;
}



/************************
* SPLIDE
************************/
/* create a white css variable */
:root {
	--hueColor: rgb(255,255,255);
	--hueRotate: "hue-rotate(0deg)";
}
.splide {
	padding: 0;
}
#main-slider .splide__slide {
	background-size: contain !important;
	background-position: center !important;
}



/************************
* THUMB SLIDER
************************/
#main-slider-wrapper {
	width: 100%;
	height: 43vw;
	margin-top: 2vw;
	display: grid;
	justify-content: center;
	align-items: center;
}
#main-slider {
	width: 80vw;
	height: 45vw;
}
#main-slider .splide__slide > div {
	width: 100%;
	height: 100%;
	display: block;
}
#main-slider .splide__slide .main-poster {
	display: block;
	width: auto;
	height: 45vw;
	margin-left: auto;
	margin-right: auto;
	filter: var(--hueRotate);
}
#main-slider .splide__slide .main-poster-logo {
	display: block;
	width: auto;
	height: 12vh;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
}

#thumbnail-slider-wrapper {
	width: 100%;
	height: 9vh;
	display: grid;
	justify-content: center;
	align-items: center;
	margin-top: 5vh;
}
#thumbnail-slider {
	width: 90vw;
	height: 9vh;
	box-sizing: border-box;
	padding-left: 5vw;
	padding-right: 5vw;
}
#thumbnail-slider {
	margin-top: 0vh;
}
#thumbnail-slider .splide__list img {
	height: 4vh;
	width: auto;
	display: block;
}
#thumbnail-slider .splide__list li {
	display: grid;
	align-items: center;
	min-width: 10vw;
}
#thumbnail-slider .splide__list li p {
	font-size: 2vh;
	margin: 0 1.5vh 0 1.5vh;
}
#thumbnail-slider .splide__list li img {
	margin-left: auto;
	margin-right: auto;
}
.splide__arrow {
	opacity: 0.7;
	user-select: none;
	top: 42%;
	width: 4vh;
	height: 4vh;
}
.splide__arrow--prev {
	left: 1vw;
}
.splide__arrow--next {
	right: 1vw;
}

.splide__arrow svg {
	fill: var(--hueColor) !important;
	width: 4vh;
	height: 4vh;
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
	border: 3px solid var(--hueColor);
}