/* resets
--------------------------------------------------------------------------
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; line-height: 1; overflow-y: scroll; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

article, aside, details, div, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { position: relative; display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
[hidden], template { display: none; }

svg:not(:root) { overflow: hidden; }

img, iframe { border: 0; vertical-align: middle; }

table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { font-weight: normal; text-align: left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

ul, ol { list-style: none; }
li { display: list-item; }

a { color: #FFFFFF; background: transparent; text-decoration: none; cursor: pointer; text-decoration-skip: ink; }
a:hover { opacity: 0.5; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }

a, span, button { transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, text-decoration-color 0.4s ease; }

/* global
--------------------------------------------------------------------------
*/

body { font: 62.5%/1 'Helvetica Neue', Arial, Helvetica, sans-serif; color: #FFFFFF; background: #000000; }

.wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.wrap figure { display: none; }
.wrap h1 { font-family: "special-gothic-expanded-one", sans-serif; text-transform: uppercase; text-align: center; opacity: 0; transform: translateY(0.25em); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wrap .text { opacity: 0; transform: translateY(15px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wrap .text p { font-family: "special-gothic", sans-serif; font-weight: 500; text-transform: uppercase;}

.wrap.show-heading h1 { opacity: 1; transform: translateY(0); }
.wrap.show-text .text { opacity: 1; transform: translateY(0); }

@media (orientation: portrait) {
	.wrap { display: grid; grid-template-rows: 1fr auto 1fr; }
	.wrap figure.portrait { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; }
	.wrap figure video { width: 100%; height: 100%; object-fit: contain; }
	.wrap h1 { padding: 1.125em 0; font-size: 48px; font-size: 4.444vh; line-height: 0.833; position: relative; grid-row: 2; }
	.wrap .text { text-align: center; grid-row: 3; }
	.wrap .text p { font-size: 15px; font-size: 1.389vh; }
}

@media (orientation: landscape) {
	.wrap figure.landscape { width: 426px; height: 0; padding: 7% 0 0; position: absolute; bottom: 270px; left: 572px; display: block; }
	.wrap figure.landscape { width: 22.188vw; bottom: 14.063vw; left: 29.792vw; }
	.wrap figure.landscape video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: contain; }
	.wrap h1 { width: 100%; font-size: 210px; font-size: 10.938vw; position: absolute; bottom: -0.248em; left: 0; }
	.wrap .text { padding: 30px 65px; position: absolute; bottom: 290px; left: 1064px; border-left: 0.5px solid #FFFFFF; }
	.wrap .text { padding: 1.563vw 3.385vw; bottom: 15.104vw; left: 55.417vw; border-left-width: 0.026vw; }
	.wrap .text p { font-size: 15px; font-size: clamp(10px, 0.781vw, 0.781vw); line-height: 1.133; }
}