body, html {
	margin: 0;
	background: #b7bcde;
	font-family: sans-serif;
}

body::after{
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
   z-index: -1;
   content: url(./images/d-ch1-bg.jpg) url(./images/d-ch2-bg.jpg) url(./images/d-ch3-bg.jpg);
}

body {
    font-size: 4.44445vw
}

.scaled {
	width: 100%;
	position: absolute;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
}

.center {
	left: 50%;
	transform: translateX(-50%);
}

.desktop {
	width: 100%;
}

.mobile,
.mobile-landscape,
.tablet,
.tablet-landscape {
	width: 100%;
	display: none;
}

.headline {
	width: 100%;
	top: 0;
	height: calc(100vw * calc(212 / 1920));
	background-image: url("./images/d-header.png");
}

.poster {
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}

.poster .characters {
	height: calc(100vw * 0.5625);
	background-size: cover;
}

.poster .character-1 {
	display: none;
	background-image: url("./images/d-ch1-bg.jpg");
}
.poster .character-2 {
	display: none;
	background-image: url("./images/d-ch2-bg.jpg");
}
.poster .character-3 {
	display: none;
	background-image: url("./images/d-ch3-bg.jpg");
}

.overflow .characters {
	cursor: pointer;
	width: 33.333333%;
	top: 0;
	height: calc(100vw * 0.55);
	background-position: 0 0;
	background-size: 200% 100%;
}

.overflow .character-1 {
	left: 0;
	background-image: url(./images/d-ch1-sprite.png);
}
.overflow .character-1:hover,
.overflow .character-1:focus {
	background-position: 100% 0;
}

.overflow .character-2 {
	left: 33.333333%;
	background-image: url(./images/d-ch2-sprite.png);
}
.overflow .character-2:hover,
.overflow .character-2:focus {
	background-position: 100% 0;
}

.overflow .character-3 {
	left: 66.6666667%;
	background-image: url(./images/d-ch3-sprite.png);
}
.overflow .character-3:hover,
.overflow .character-3:focus {
	background-position: 100% 0;
}

.swipe {
	display: none;
}

.logo {
	display: none;
	position: absolute;
	top: calc(100vw * calc(50 / 1920));
	width: calc(100vw * calc(1000 / 1920));
	height: calc(100vw * calc(231 / 1920));
}

.play {
	display: none;
	position: absolute;
	top: calc(100vw * calc(800 / 1920));
	width: calc(100vw * calc(624 / 1920));
	height: calc(100vw * calc(241 / 1920));
}

.play .scaled {
	width: 100%;
	height: 100%;
}

@media not screen and (hover: hover) and (pointer:fine) {
    @media (orientation:portrait) {
		body::after{
		   position: absolute;
		   width: 0;
		   height: 0;
		   overflow: hidden;
		   z-index: -1;
		   content: url(./images/t-ch1-bg.jpg) url(./images/t-ch2-bg.jpg) url(./images/t-ch3-bg.jpg);
		}
		
		.desktop,
		.mobile-landscape,
		.tablet,
		.tablet-landscape {
			display: none;
		}
		
		.tablet {
			display: inline;
		}
		
		.headline {
			width: 100%;
			top: 0;
			height: calc(100vw * calc(339 / 1536));
			background-image: url("./images/t-header.png");
		}
		
		.overflow {
			width: calc(100vw * calc(1050 / 1536));
			position: absolute;
			top: 0;
			height: calc(100vw * calc(1770 / 1536));
			left: 50%;
			transform: translateX(-50%);
			overflow: auto;
		}		
		
		.overflow .characters {
			width: calc(100vw * calc(1050 / 1536));
			height: calc(100vw * calc(1770 / 1536));
			background-size: 100% 100%;
			background-position: 0 0;
		}
		
		.overflow .character-1:hover,
		.overflow .character-1:focus,
		.overflow .character-1 {
			background-image: url(./images/t-ch1.png);
		}

		.overflow .character-2:hover,
		.overflow .character-2:focus,
		.overflow .character-2 {
			background-image: url(./images/t-ch2.png);
		}

		.overflow .character-3:hover,
		.overflow .character-3:focus,
		.overflow .character-3 {
			background-image: url(./images/t-ch3.png);
		}
		
		.overflow .character-2 {
			left: 100%;
		}
		
		.overflow .character-3 {
			left: 200%;
		}
		
		.overflow .character-3::after {
			top: auto;
			bottom: calc(100vw * -0.016541666666667);
		}
		
		.swipe {
			left: 0;
			display: block;
			top: calc(100vw * 0.75);
			height: calc(100vw * 0.5852864583333333);
			pointer-events: none;
		}
		
		.poster .characters {
			height: calc(100vw * 1.333333333333333);
		}
		
		.poster .character-1 {
			background-image: url("./images/t-ch1-bg.jpg");
		}
		.poster .character-2 {
			background-image: url("./images/t-ch2-bg.jpg");
		}
		.poster .character-3 {
			background-image: url("./images/t-ch3-bg.jpg");
		}
		
		.play {
			top: calc(100vw * 0.8131510416666667);
			width: calc(100vw * calc(624 / 1920));
			height: calc(100vw * calc(241 / 1920));
		}
		
		.logo {
			top: calc(100vw * calc(150 / 1920));
			width: calc(100vw * calc(1000 / 1920));
			height: calc(100vw * calc(231 / 1920));
		}
    }

    @media (orientation: landscape) {
		body::after{
		   position: absolute;
		   width: 0;
		   height: 0;
		   overflow: hidden;
		   z-index: -1;
		   content: url(./images/t-l-ch1-bg.jpg) url(./images/t-l-ch2-bg.jpg) url(./images/t-l-ch3-bg.jpg);
		}
		
        .desktop,
		.mobile,
		.mobile-landscape,
		.tablet {
			display: none;
		}
		
		.tablet-landscape {
			display: inline;
		}
		
		.headline {
			width: 100%;
			top: 0;
			height: calc(100vw * calc(226 / 2048));
			background-image: url("./images/t-l-header.png");
		}
		
		.overflow .characters {
			background-size: 100% 100%;
			background-position: 0 0;
		}
		
		.overflow .character-1:hover,
		.overflow .character-1:focus,
		.overflow .character-1 {
			background-image: url(./images/t-l-ch1.png);
		}

		.overflow .character-2:hover,
		.overflow .character-2:focus,
		.overflow .character-2 {
			background-image: url(./images/t-l-ch2.png);
		}

		.overflow .character-3:hover,
		.overflow .character-3:focus,
		.overflow .character-3 {
			background-image: url(./images/t-l-ch3.png);
		}
		
		.poster .characters {
			height: calc(100vw * 0.75);
		}
		
		.poster .character-1 {
			background-image: url("./images/t-l-ch1-bg.jpg");
		}
		.poster .character-2 {
			background-image: url("./images/t-l-ch2-bg.jpg");
		}
		.poster .character-3 {
			background-image: url("./images/t-l-ch3-bg.jpg");
		}
		
		.overflow .characters {
			top: 0;
			height: calc(100vw * 0.75);
			background-position: 100% 0;
		}
		
		.play {
			top: calc(100vw * 0.384765625);
			width: calc(100vw * calc(624 / 1920));
			height: calc(100vw * calc(241 / 1920));
		}
		
		.logo {
			top: calc(100vw * calc(150 / 1920));
			width: calc(100vw * calc(1000 / 1920));
			height: calc(100vw * calc(231 / 1920));
		}
    }
}


@media screen and (max-width: 599.98px) and (-webkit-min-device-pixel-ratio:1.7) {
	body::after{
	   position: absolute;
	   width: 0;
	   height: 0;
	   overflow: hidden;
	   z-index: -1;
	   content: url(./images/m-ch1-bg.jpg) url(./images/m-ch2-bg.jpg) url(./images/m-ch3-bg.jpg);
	}
	
	.desktop,
	.mobile-landscape,
	.tablet,
	.tablet-landscape {
		display: none;
	}
	
	.mobile {
		display: inline;
	}
	
	.headline {
		width: 100%;
		top: 0;
		height: calc(100vw * calc(474 / 1080));
		background-image: url("./images/m-header.png");
	}
	
	.poster .characters {
		height: calc(100vw * 2.16666677);
	}
	
	.poster .character-1 {
		background-image: url("./images/m-ch1-bg.jpg");
	}
	.poster .character-2 {
		background-image: url("./images/m-ch2-bg.jpg");
	}
	.poster .character-3 {
		background-image: url("./images/m-ch3-bg.jpg");
	}
	
	.overflow {
		width: 100%;
		height: calc(100vw * calc(1822 / 1080));
		position: absolute;
		top: 0;
		left: 0;
		overflow: auto;
		transform: none;
	}
	
	.overflow .characters {
		width: 100%;
		height: calc(100vw * calc(1822 / 1080));
		background-size: 100% 100%;
		background-position: 0 0;
	}
	
	.overflow .character-1:hover,
	.overflow .character-1:focus,
	.overflow .character-1 {
		background-image: url(./images/m-ch1.png);
	}
	
	.overflow .character-2 {
		left: 100%;
	}
	
	.overflow .character-3 {
		left: 200%;
	}

	.overflow .character-2:hover,
	.overflow .character-2:focus,
	.overflow .character-2 {
		background-image: url(./images/m-ch2.png);
	}

	.overflow .character-3:hover,
	.overflow .character-3:focus,
	.overflow .character-3 {
		background-image: url(./images/m-ch3.png);
	}
	
	.overflow .character-3::after {
		top: auto;
		bottom: calc(100vw * -0.0241481481481481);
	}
	
	.swipe {
		left: 0;
		display: block;
		top: calc(100vw * 1.334259);
		height: calc(100vw * 0.8324074);
		pointer-events: none;
	}
	
	.play {
		top: calc(100vw * 1.247222222222222);
		width: calc(100vw * calc(624 / 1080));
		height: calc(100vw * calc(241 / 1080));
	}
	
	.logo {
		top: calc(100vw * calc(100 / 1920));
		width: calc(100vw * calc(2000 / 1920));
		height: calc(100vw * calc(462 / 1920));
	}
}

@media screen and (max-width: 899.98px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1.7) {
	body::after{
	   position: absolute;
	   width: 0;
	   height: 0;
	   overflow: hidden;
	   z-index: -1;
	   content: url(./images/m-l-ch1-bg.jpg) url(./images/m-l-ch2-bg.jpg) url(./images/m-l-ch3-bg.jpg);
	}
	
	.desktop,
	.tablet,
	.tablet-landscape,
	.mobile {
		display: none;
	}
	
	.mobile-landscape {
		display: inline;
	}
	
	.headline {
		width: 100%;
		top: 0;
		height: calc(100vw * calc(130 / 2340));
		background-image: url("./images/m-l-header.png");
	}
	
	.overflow .characters {
		background-size: 100% 100%;
		background-position: 0 0;
	}
	
	.overflow .character-1:hover,
	.overflow .character-1:focus,
	.overflow .character-1 {
		background-image: url(./images/m-l-ch1.png);
	}

	.overflow .character-2:hover,
	.overflow .character-2:focus,
	.overflow .character-2 {
		background-image: url(./images/m-l-ch2.png);
	}

	.overflow .character-3:hover,
	.overflow .character-3:focus,
	.overflow .character-3 {
		background-image: url(./images/m-l-ch3.png);
	}
	
	.poster .characters {
		height: calc(100vw * 0.4615384615384615);
	}
	
	.poster .character-1 {
		background-image: url("./images/m-l-ch1-bg.jpg");
	}
	.poster .character-2 {
		background-image: url("./images/m-l-ch2-bg.jpg");
	}
	.poster .character-3 {
		background-image: url("./images/m-l-ch3-bg.jpg");
	}
	
	.overflow {
		top: 0;
	}
	
	.overflow .characters {
		top: calc(100vw * -0.0416);
		transform: scale(0.8);
		height: calc(100vw * 0.55);
	}
	
	.play {
		top: calc(100vw * 0.3222222222222222);
		width: calc(100vw * calc(624 / 1920));
		height: calc(100vw * calc(241 / 1920));
	}
	
	.logo {
		top: calc(100vw * calc(150 / 1920));
		width: calc(100vw * calc(1000 / 1920));
		height: calc(100vw * calc(231 / 1920));
	}
}