/* Fonts
================================*/
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-regular.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-regular.woff') format('woff');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-500.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-500.woff') format('woff');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-700.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-700.woff') format('woff');
}
/*
================================*/

/* Reboot
================================*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background-color: #ffffff;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

figure {
	margin: 0;
}

img,
svg {
	vertical-align: middle;
}

table {
	caption-side: bottom;
	border-collapse: collapse;
}

th {
	text-align: inherit;
	text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
	border-width: 0;
	border-style: solid;
	border-color: inherit;
}

label {
	display: inline-block;
}

button {
	border-radius: 0;
}

button:focus:not(:focus-visible) {
	outline: 0;
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

button,
select {
	text-transform: none;
}

select {
	word-wrap: normal;
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}

textarea {
	resize: vertical;
}

iframe {
	border: 0;
}

:active,
:focus {
	outline: 0;
}

[hidden] {
	display: none !important;
}
/*
================================*/


/* Base
================================*/
:root {
	/*--color-primary: #fcee21;
	--color-secondary: #d6cb1c;
	--color-tertiary: #e0023f;
	--color-quaternary: #;
	--color-bg-light: #;
	--color-bg-dark: #;*/
	--color-body: #ffffff;
	--color-title: #ffffff;
	--color-link: #c8c8c8;
	--color-link-hover: #ffffff;
	--font-family-first: 'Raleway', sans-serif;
	--font-family-second: 'Raleway', sans-serif;
	--font-family-body: var(--font-family-first);
	--font-family-title: var(--font-family-second);
	--font-size-body: 0.875rem;
	--font-size-title: 1rem;
	--font-weight-body-first: 400;
	--font-weight-body-second: 500;
	--font-weight-body-third: 700;
	--font-weight-title-first: 500;
	--font-weight-title-second: 700;
	--line-height-body: 1.6;
	--line-height-title: 1.2;
	--letter-spacing-first: 0.05em;
	--letter-spacing-second: 0.1em;
	--letter-spacing-body: 0;
	--letter-spacing-title: 0;
	--transition-first: 0.3s ease;
	--transition-second: 0.4s ease-in-out;
}

body {
	color: var(--color-body);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body-first);
	font-optical-sizing: auto;
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1.25em 0 0.625em 0;
	color: var(--color-title);
	font-family: var(--font-family-title);
	font-weight: var(--font-weight-title-second);
	text-transform: none;
	line-height: var(--line-height-title);
	letter-spacing: var(--letter-spacing-title);
}

h1 {
	font-size: calc(var(--font-size-title) + (0.1875rem * 5)); /* 31 */
}

h2 {
	font-size: calc(var(--font-size-title) + (0.1875rem * 4)); /* 28 */
}

h3 {
	font-size: calc(var(--font-size-title) + (0.1875rem * 3)); /* 25 */
}

h4 {
	font-size: calc(var(--font-size-title) + (0.1875rem * 2)); /* 22 */
}

h5 {
	font-size: calc(var(--font-size-title) + (0.1875rem * 1)); /* 19 */
}

h6 {
	font-size: calc(var(--font-size-title) + 0rem); /* 16 */
}

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

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0;
}

p,
ul,
ol,
dl,
address {
	margin: 0 0 0.9375rem 0;
}

ul,
ol {
	padding-left: 1.875rem;
}

	ul ul,
	ol ol,
	ul ol,
	ol ul {
		margin-top: 0.9375rem;
	}

dd {
	margin: 0;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
address:last-child {
	margin-bottom: 0;
}

strong,
b {
	color: var(--color-title);
	font-weight: var(--font-weight-body-second);
}

h1 strong,
h1 b,
h2 strong,
h2 b,
h3 strong,
h3 b,
h4 strong,
h4 b,
h5 strong,
h5 b,
h6 strong,
h6 b {
	font-weight: var(--font-weight-title-second);
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-first);
}

a strong {
	color: var(--color-link);
	transition: color var(--transition-first);
}

a:hover,
a:focus,
a:hover strong,
a:focus strong  {
	color: var(--color-link-hover);
}

img {
	max-width: 100%;
	height: auto;
}
/*
================================*/


/* Utilities
================================*/

/* Font
========================*/
.light {
	font-weight: 300;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.semi-bold {
	font-weight: 600;
}

.bold {
	font-weight: 700;
}
/*
========================*/

/* Title
========================*/
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
	text-transform: uppercase;
	word-break: break-word;
}

.title-1 {
	font-size: calc(var(--font-size-title) + (0.375rem * 6 - 0.4375rem)); /* 45 (-7) */
}

.title-2 {
	font-size: calc(var(--font-size-title) + (0.375rem * 5 - 0.375rem)); /* 40 (-6) */
}

.title-3 {
	font-size: calc(var(--font-size-title) + (0.375rem * 4 - 0.3125rem)); /* 35 (-5) */
}

.title-4 {
	font-size: calc(var(--font-size-title) + (0.375rem * 3 - 0.25rem)); /* 30 (-4) */
}

.title-5 {
	font-size: calc(var(--font-size-title) + (0.375rem * 2 - 0.1875rem)); /* 25 (-3) */
}

.title-6 {
	font-size: var(--font-size-title) + (0.375rem * 1 - 0.125rem)); /* 20 (-2) */
}

@media (min-width: 768px) {
	.title-1 {
		font-size: calc(var(--font-size-title) + (0.375rem * 6)); /* 52 */
	}

	.title-2 {
		font-size: calc(var(--font-size-title) + (0.375rem * 5)); /* 46 */
	}

	.title-3 {
		font-size: calc(var(--font-size-title) + (0.375rem * 4)); /* 40 */
	}

	.title-4 {
		font-size: calc(var(--font-size-title) + (0.375rem * 3)); /* 34 */
	}

	.title-5 {
		font-size: calc(var(--font-size-title) + (0.375rem * 2)); /* 28 */
	}

	.title-6 {
		font-size: calc(var(--font-size-title) + (0.375rem * 1)); /* 22 */
	}
}
/*
========================*/

/* Text
========================*/
.text-italic {
	font-style: italic;
}

.text-lowercase {
	text-transform: lowercase;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-capitalize {
	text-transform: capitalize;
}

.text-underline {
	text-decoration: underline;
}

.text-1 {
	font-size: 1.3125rem;
}

.text-2 {
	font-size: 1.125rem;
}
/*
========================*/

/* Others
========================*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/*
========================*/

/*
================================*/


/* Content area
================================*/
.main-area {
	display: flex;
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #0d0c0a;
}

.content-area {
	margin: auto;
	padding: 3.75rem 1.875rem;
	text-align: center;
}

.content .content-row-1 img {
	width: 20rem;
}

/*.channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9375rem;
}

.channels a {
	display: inline-block;
	font-weight: var(--font-weight-body-second);
	text-transform: uppercase;
}*/

.social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9375rem;
}

.social a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: #ffffff;
	transition: background-color 0.3s ease;
}

.social a:hover {
	background-color: var(--color-link);
}

.social a svg {
	display: block;
	width: 1rem;
	height: 1rem;
	fill: #0d0c0a;
}
/*
================================*/