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

body {
    font-size: 4.44445vw
}

.scaled {
	position: absolute;
	width: 100%;
}

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

.video {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}

.desktop {
	width: 100%;
}

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

.headline {
	position: absolute;
	top: calc(100vw * calc(140 / 1920));
	width: calc(100vw * calc(600 / 1920));
	height: calc(100vw * calc(230 / 1920));
}

.play {
	position: absolute;
	top: calc(100vw * calc(350 / 1920));
	width: calc(100vw * calc(500 / 1920));
	height: calc(100vw * calc(90 / 1920));
}

@media not screen and (hover: hover) and (pointer:fine) {
    @media (orientation:portrait) {
		.desktop,
		.mobile-landscape,
		.tablet,
		.tablet-landscape {
			display: none;
		}
		
		.tablet {
			display: inline;
		}
		
		.headline {
			top: calc(100vw * calc(140 / 1536));
			width: calc(100vw * calc(600 / 1536));
			height: calc(100vw * calc(230 / 1536));
		}

		.play {
			top: calc(100vw * calc(350 / 1536));
			width: calc(100vw * calc(500 / 1536));
			height: calc(100vw * calc(90 / 1536));
		}
    }

    @media (orientation: landscape) {
		.mobile,
		.mobile-landscape,
		.tablet {
			display: none;
		}
		
		.tablet-landscape {
			display: inline;
		}
		
		.headline {
			top: calc(100vw * calc(140 / 2048));
			width: calc(100vw * calc(600 / 2048));
			height: calc(100vw * calc(230 / 2048));
		}

		.play {
			top: calc(100vw * calc(350 / 2048));
			width: calc(100vw * calc(500 / 2048));
			height: calc(100vw * calc(90 / 2048));
		}
    }
}


@media screen and (max-width: 599.98px) and (-webkit-min-device-pixel-ratio:1.7) {
	.desktop,
	.mobile-landscape,
	.tablet,
	.tablet-landscape {
		display: none;
	}
	
	.mobile {
		display: inline;
	}
	
	.headline {
		top: calc(100vw * calc(1200 / 1080));
		width: calc(100vw * calc(1032 / 1080));
		height: calc(100vw * calc(395 / 1080));
	}

	.play {
		top: calc(100vw * calc(1680 / 1080));
		width: calc(100vw * calc(942 / 1080));
		height: calc(100vw * calc(169 / 1080));
	}
}

@media screen and (max-width: 899.98px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1.7) {
	.desktop,
	.tablet,
	.tablet-landscape,
	.mobile {
		display: none;
	}
	
	.mobile-landscape {
		display: inline;
	}
	
	.headline {
		top: calc(100vw * calc(350 / 2340));
		width: calc(100vw * calc(860 / 2340));
		height: calc(100vw * calc(330 / 2340));
	}

	.play {
		top: calc(100vw * calc(780 / 2340));
		width: calc(100vw * calc(913 / 2340));
		height: calc(100vw * calc(164 / 2340));
	}
}