@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	src: local('DM Sans Regular'),
	url('fonts/DMSans-Regular.woff') format('woff2');
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	src: local('DM Sans Bold'),
	url('fonts/DMSans-Bold.woff') format('woff2');
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}



/**
 * Elements
 */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background: #000;
	color: #fff;
	font-family: "DM Sans", sans-serif;
}

a {
	color: #fff;
}

p {
	line-height: 24px;
}

h1 {
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 32px 0 16px;
}

h2 {
	margin: 32px 0 16px;
	font-weight: 400;
}

h2 small {
	font-size: 16px;
	display: block;
	opacity: .5;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h3 {
	margin: 24px 0 16px;
}

h4 {
	margin: 24px 0 8px;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
p:first-child {
	margin-top: 0;
}

video {
	max-width: 100%;
}


/**
 * Objects
 */

.o-flex {
	display: flex;
}

@media (min-width: 640px) {
	.o-grid {
		display: grid;
	  gap: 8px;
	  grid-auto-rows: minmax(100px, auto);
	  grid-template-columns: repeat(12, 1fr);
	}

	.o-grid--gap-lg {
		gap: 32px;
	}
}

.o-wrap {
	max-width: 1170px;
	margin: auto;
	padding: 0 24px;
}

.o-btn {
	font-weight: bold;
	display: block;
	background: #E6E8E6;
	color: #1D201D;
	box-shadow: 1px 3px 24px rgba(0,0,0,.1);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 32px;
	line-height: 32px;
	text-align: center;
	transition: background .125s ease-in;
}

@media (min-width: 640px) {
	.o-btn {display: inline-block;}
}

.o-btn:hover,
.o-btn:focus {
	background: #F4F5F4;
}

.o-btn--disabled,
.o-btn--disabled:hover,
.o-btn--disabled:focus {
	background: #ccc;
	color: #999;
	cursor: not-allowed;
}

.o-btn--lg {
	padding: 16px 32px;
}

.o-highlight {
	background: #F9C784;
	color: #330;
	padding: 0 4px;
}

/**
 * Utilities
 */

.u-center {
	text-align: center;
}

.u-inset {
	padding: 16px 24px;
}

.u-inset--big {
	padding: 32px 0;
}

@media (min-width: 640px) {
	.u-inset--big {
		padding: 80px 0;
	}
}

/**
 * Intro
 */

#intro {
	margin: 16px 0;
}

.c-drop {
	margin: auto;
	text-align: center;
}

.c-big-type {
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 32px;
}

@media (min-width: 640px) {
	.c-big-type {font-size: 48px;}
}

.c-counter {
	background: #C01020;
	padding: 32px 0;
	height: 70vh;
	display: flex;
}

#clockdiv {
	display: flex;
	font-size: 32px;
	margin: 0 auto 32px;
}

@media (min-width: 640px) {
	#clockdiv {
		font-size: 48px;
	}
}

#clockdiv > div {
	margin: 0 4px;
	padding: 4px 8px;
	background: rgba(255,255,255,.1);
}

#clockdiv span {
	font-weight: bold;
}

.clock__smalltext {
	font-size: 16px;
}

@media (min-width: 640px) {
	.clock__smalltext {
		font-size: 24px;
	}
}


/**
 * Tiers
 */

.tier {
	background: #111;
	font-size: 14px;
	grid-column: 1 / span 12;
}

.tier--big {
	font-size: 16px;
}

	.tier__text {
		grid-column: 1 / span 12;
	}

	.tier__video {
		grid-column: 1 / span 12;
	}

@media (min-width: 640px) {
	.tier {
		grid-column: 3 / span 8;
	}

	.tier--big {
		grid-column: 2 / span 10;
	}

		.tier__text {
			padding: 0 16px;
			grid-column: 5 / span 7;
			grid-row: 1;
		}

		.tier__video {
			grid-column: 1 / span 4;
			grid-row: 1;
		}
}

@media (min-width: 1400px) {
	.tier {
		grid-column: 4 / span 6;
	}

	.tier--big {
		grid-column: 3 / span 8;
	}
}

	.tier h3 {
		font-size: 32px;
	}


/**
 * FAQ
 */

#faq {
	background: #1500CC;
}

@media (min-width: 640px) {
	.faq__article {
		grid-column: 4 / span 6;
	}
}