@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
	--color-green-darkest: rgb(0, 70, 40);
	--color-green-dark: rgb(0, 120, 65);
	--color-green-light: rgb(0, 170, 70);
	--color-green-lightest: rgb(70, 220, 120);
	--color-green-superlight: rgb(228, 245, 232);
	--color-black: rgb(0, 0, 0);
	--color-white: rgb(255, 255, 255);
	--color-grey-light: rgb(225, 225, 225);
	--color-grey: rgb(200, 200, 200);

	--font-family-body: "S-Bonus-Text", sans-serif;
	--font-family-heading: "S-Bonus-Display-Bold", "Noto Sans", Helvetica, Arial;

	--content-padding: 80px;
	--content-gap: 30px;
}

::selection {
	color: var(--color-white);
	background: var(--color-black);
}
body {
	font-family: var(--font-family-body);
	font-weight: normal;
	font-size: 20px;
	line-height: 1.4em;
	color: var(--color-green-darkest);
	background-color: #f1f1f1;
}

body,
html {
	position: relative;	
	overflow-x: hidden;
}
p a {
	text-decoration: none;
	color: var(--color-green-dark);
	border-bottom: 1px solid var(--color-green-light);
}
p img
{
	width: 100%;
}
.center
{
	text-align: center;
}
strong
{
	font-weight: bold;
}
h1,
h2,
h3,
h4,
h5 {
	font-family: var(--font-family-heading);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 3em;
	line-height: 1em;
	margin-bottom: var(--content-gap);
}
p {
	margin-bottom: var(--content-gap);
}
h4,
h5
{
	font-size: 1.6em;
}

h1:only-child,
h2:only-child,
h3:only-child,
p:only-child,
p:last-child
{
	margin-bottom: 0;
}

img,
iframe {
	display: block;
}

strong {
	font-weight: 800;
}

body#lang-uk h1,
body#lang-uk h2,
body#lang-ru h1,
body#lang-ru h2
{
	font-family: "Noto Sans", sans-serif;
	letter-spacing: -1.4px;
}
body#lang-ar,
body#lang-ku,
body#lang-ar #video-title,
body#lang-ku #video-title
{
	direction: rtl !important;
}
body#lang-ar #container,
body#lang-ku #container
{
	font-size: 24px;
}

/*
	fonts
*/

@font-face {
	font-family: "S-Bonus-Display-Bold";
	src: url("../static/fonts/SBonusDisplay-Bold.woff2") format("woff2"), url("../static/fonts/SBonusDisplay-Bold.woff") format("woff");
	font-weight: normal;
}

@font-face {
	font-family: "S-Bonus-Text";
	src: url("../static/fonts/SBonusText-Regular.woff2") format("woff2"), url("../static/fonts/SBonusText-Regular.woff") format("woff");
	font-weight: normal;
}

@font-face {
	font-family: "S-Bonus-Text";
	src: url("../static/fonts/SBonusText-Bold.woff2") format("woff2"), url("../static/fonts/SBonusText-Bold.woff") format("woff");
	font-weight: bold;
}

@media only screen and (max-width: 1440px) {
	:root {
		--content-padding: 50px;
		--content-gap: 25px;
	}
	h1, h2
	{
		font-size: 2.2em;
	}
}

@media only screen and (max-width: 960px) {
	:root {
		--content-padding: 40px;
		--content-gap: 20px;
	}
}

@media only screen and (max-width: 720px) {
	body {
		font-size: 19px;
	}
	h1, h2
	{
		font-size: 1.8em;
		line-height: 1.05em;
	}
}

@media only screen and (max-width: 640px) {
	:root {
		--content-padding: 30px;
		--content-gap: 15px;
	}
	body {
		font-size: 17px;
		line-height: 1.4em;
	}
}
@media only screen and (max-height: 560px) {
	:root {
		--content-padding: 30px;
		--content-gap: 15px;
	}
	body {
		font-size: 17px;
		line-height: 1.4em;
	}
}
@media only screen and (max-width: 480px) {
	:root {
		--content-padding: 20px;
		--content-gap: 10px;
	}
	body {
		font-size: 16px;
		line-height: 1.4em;
	}
}