html
{
font-size: 62.5% !important;
overflow-y: scroll;
scroll-behavior: smooth;
}

@font-face
{
font-family: 'Roboto 700';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/static/fonts/roboto-normal-700.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-700.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-700.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-700.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-700.svg') format('svg');
}

@font-face
{
font-family: 'Roboto 500';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/static/fonts/roboto-normal-500.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-500.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-500.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-500.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-500.svg') format('svg');
}

@font-face
{
font-family: 'Roboto 400';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/static/fonts/roboto-normal-400.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-400.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-400.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-400.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-400.svg') format('svg');
}

*
{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
outline: none;
line-height: 1.3;
}

body
{
font-family: 'Roboto 400', Arial, sans-serif;
font-weight: 400;
background: #040814;
background: linear-gradient(to left, #040814, #0b144e, #0b144e, #040814);
min-height: 80vh;
}

img
{
vertical-align: middle;
}

a:not(.button)
{
color: #279aff;
text-decoration: none;
}

a:not(.button):hover
{
color: #3baeff;
}

.center
{
text-align: center;
}

.nlbr
{
display: inline-block;
}

/* Inner */

div.pk-wrap
{
padding: 0 8rem;
margin: 0 auto;
transition: all 0.25s;
max-width: 160rem;
}

@media screen and (max-width: 1200px) {

	div.pk-wrap
	{
	padding: 0 4rem;
	}
}

@media screen and (max-width: 700px) {

	div.pk-wrap
	{
	padding: 0 2rem;
	}
}

@media screen and (max-width: 400px) {

	div.pk-wrap
	{
	padding: 0 1.2rem;
	}
}

/* Header */

header
{
position: fixed;
left: 0;
top: 0;
width: 100%;
background: rgba(0,0,0,0.8);
background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.6));
z-index: 23;
}

header span.site-name
{
display: inline-block;
font-size: 3.2rem;
color: #FFF;
padding: 3rem 0;
}

footer span.site-name
{
display: inline-block;
font-size: 2rem;
color: #fff;
}

header img
{
height: 5.7rem;
width: 18.4rem;
margin: 2.3rem 0;
transition: all 0.5s;
}

header ul
{
float: right;
list-style: none;
transition: all 0.5s;
user-select: none;
z-index: 12;
margin: 3rem 0 0 1rem;
}

header ul li.drop-li
{
display: inline-block;
position: relative;
margin-left: 1rem;
}

header ul li span.drop-item
{
display: block;
color: #FFF;
font-size: 1.6rem;
border: 0.2rem solid rgba(255,255,255,0.3);
border-radius: 1rem;
padding: 1rem 3rem 1rem 4rem;
cursor: pointer;
transition: all 250ms;
opacity: 0.8;
width: 11.4rem;
}

header ul li:nth-child(1) span.drop-item
{
background: url('/static/images/website/geo-40.png') no-repeat center left 1.2rem / 2rem,
			url('/static/images/website/drop-20.png') no-repeat center right 1.2rem / 1rem;
}

header ul li:nth-child(2) span.drop-item
{
background: url('/static/images/website/share-40.png') no-repeat center left 1.2rem / 2rem,
			url('/static/images/website/drop-20.png') no-repeat center right 1.2rem / 1rem;
}

header ul li span.drop-item:hover
{
border: 0.2rem solid rgba(255,255,255,0.45);
}

header ul li.drop-active span.drop-item
{
border: 0.2rem solid rgba(255,255,255,0.45);
}

header ul ul
{
display: none;
}

header li.drop-active ul:before
{
content: "";
width: 0;
height: 2px;
position: absolute;
top: -1.2rem;
right: 4.8rem;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 16px solid #444546;
}

header li.drop-active ul
{
position: absolute;
top: 2.6rem;
right: 0;
display: block;
background: #444546;
padding: 1rem 0;
list-style: none;
cursor: default;
width: 23.6rem;
border-radius: 0.5rem;
box-shadow: 0 0.1rem 0.5rem rgba(25,25,25,0.9);
}

header ul ul li
{
display: inline-block;
font-size: 1.4rem;
}

header ul ul
{
width: 20rem;
padding: 1rem 0;
}

header ul ul li
{
display: block;
}

header ul ul li a, header ul ul li span
{
display: block;
width: 100%;
font-size: 1.5rem;
padding: 1rem 4rem;
transition: all 0.2s;
color: rgb(39,154,255);
cursor: pointer;
}

header ul ul li a.current
{
background: url('/static/images/website/tick-32.png') no-repeat center left 1.4rem / 1.6rem;
color: #ddd;
}

header ul ul li a:hover, header ul ul li span:hover
{
color: #3baeff;
background-color: #585960;
text-decoration: none;
}

@media screen and (max-width: 600px) {
	
	header
	{
	padding: 0 1rem;
	background: rgba(0,0,0,0.8);
	}
	
	header span.site-name
	{
	display: inline-block;
	font-size: 2.8rem;
	color: #FFF;
	padding: 1.3rem 0;
	}
	
	header img
	{
	height: 4.5rem;
	width: 12rem;
	margin: 1rem 0;
	}
	
	header ul
	{
	margin: 1.5rem 0 0 1rem;
	}
	
	header ul li span.drop-item
	{
	font-size: 1.4rem;
	padding: 0.6rem 2.6rem 0.6rem 3.8rem;
	background-size: 1.6rem, 0.8rem;
	width: 10.4rem;
	}
	
	header li.drop-active ul
	{
	top: 1.6rem;
	}
	
	header li.drop-active ul:before
	{
	right: 4.4rem;
	}
	
	header li.drop-active ul
	{
	top: 3rem;
	}
}

@media screen and (max-width: 440px) {
	
	header
	{
	position: absolute;
	}
	
	header ul li.drop-li:last-child
	{
	display: none;
	}
}

/* Hero */

#hero
{
padding: 18rem 0 8rem 0;
background: linear-gradient(60deg, rgba(0,0,0,0.8) 25%, transparent 70%), 
			url('/static/images/website/1c.jpg') no-repeat top 0 right 0;
background-size: 100%, cover;
width: 100%;
}

@media screen and (max-width: 1200px) {

	#hero
	{
	background: linear-gradient(60deg, rgba(0,0,0,0.8) 25%, transparent 70%), 
			url('/static/images/website/2f.jpg') no-repeat top 0 right 0;
	}
}

@media screen and (max-width: 1000px) {

	#hero
	{
	text-align: center;
	padding: 28rem 0 3rem 0;
	background: #040814;
	background-image: linear-gradient(transparent, rgba(4,8,20,0.75) 80%), 
						url('/static/images/website/3a.jpg');
	background-repeat: no-repeat;
	background-size: 100%, cover;
	background-position: 0, top 0 center;
	}
}

@media screen and (max-width: 800px) {

	#hero
	{
	padding-top: 20rem;
	background-image: linear-gradient(transparent, rgba(4,8,20,0.8) 50%), 
						url('/static/images/website/3a.jpg');
	}
}



#hero-text .nlbr
{
display: block;
}

#hero-title
{
font-family: 'Roboto 700';
font-weight: 700;
color: #fff;
font-size: 2.4rem;
line-height: 1;
text-shadow: 0.1rem 0 0.4rem rgba(0,0,0,0.3);
}

@media screen and (min-width: 500px) {

	#hero-title
	{
	font-size: calc(2.6vw + 1.1rem);
	}
}

@media screen and (min-width: 1500px) {

	#hero-title
	{
	font-size: 5rem;
	}
}

#hero-title-1
{
font-family: 'Roboto 700';
font-weight: 700;
color: #fff;
font-size: 2.4rem;
line-height: 1;
text-shadow: 0.1rem 0 0.4rem rgba(0,0,0,0.3);
}

@media screen and (min-width: 500px) {

	#hero-title-1
	{
	font-size: calc(2vw + 1.4rem);
	}
}

@media screen and (min-width: 1600px) {

	#hero-title-1
	{
	font-size: 4.6rem;
	}
}

#hero-subtitle
{
font-family: 'Roboto 400';
font-weight: 400;
color: #d0d0d1;
font-size: 1.8rem;
margin-top: 1rem;
line-height: 1.4;
}

@media screen and (min-width: 600px) {
	
	#hero-before
	{
	height: 6rem;
	}

	#hero-subtitle
	{
	font-size: calc(1vw + 1.2rem);
	}
}

@media screen and (min-width: 1400px) {

	#hero-subtitle
	{
	font-size: 2.6rem;
	}
}

#hero-share
{
color: #b4b4b5;
font-size: 1.6rem;
max-width: 70rem;
}

#hero-text .button
{
margin: 3rem 0 2rem 0;
}

@media screen and (max-width: 1000px) {

	#hero .button, #hero-share
	{
	margin-left: auto;
	margin-right: auto;
	}
}

@media screen and (max-width: 500px) {
	
	#hero span.nlbr
	{
	display: inline;
	}
}

/* Button */

.button
{
text-decoration: none;
display: block;
background: #fccc12;
color: #000;
padding: 1.8rem 2rem;
border-radius: 0.6rem;
text-transform: uppercase;
font-size: 2rem;
transition: all 250ms;
text-align: center;
width: 100%;
max-width: 40rem;
box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.2);
letter-spacing: 0.2px;
text-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.2);
font-family: 'Roboto 700';
font-weight: 700;
}

.button:hover
{
background: #fca612;
text-decoration: none;
}

@media screen and (max-width: 600px) {
	
	.button
	{
	font-size: 1.8rem;
	padding: 1.6rem 1.8rem;
	}
}

/* Sections */

h1
{
text-transform: uppercase;
letter-spacing: 1px;
font-size: 2.4rem;
color: #FFF;
opacity: 0.9;
margin: 6rem auto 4rem auto;
text-align: center;
}

@media screen and (min-width: 400px) {

	h1
	{
	font-size: calc(1.5vw + 1.8rem);
	}
}

@media screen and (min-width: 1200px) {

	h1
	{
	font-size: 3.6rem;
	}
}

section
{
margin: 3rem auto;
max-width: 80rem;
border: 0.3rem solid #404870;
border-radius: 2rem;
padding: 2rem 2rem 1.4rem 2rem;
background: linear-gradient(transparent, rgb(6,10,50));
box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.2);
overflow: hidden;
}

h2
{
font-family: 'Roboto 500';
font-weight: 500;
font-size: 2rem;
color: #f8f8fa;
letter-spacing: 0.2px;
word-spacing: 1px;
background: url('/static/images/website/play-44.png') no-repeat top 2.2rem left 1.8rem / 2.2rem,
			linear-gradient(#202040, transparent);
padding: 2rem 2rem 0.4rem 5rem;
margin: -2rem -2rem 0 -2rem;
}

section p, section li
{
margin: 1rem 0;
font-size: 1.6rem;
line-height: 1.4;
color: #d0d0d0;
}

section ol
{
margin: 2rem 0 2rem 3rem;
}

section ul
{
list-style: none;
margin: 2rem 0 2rem 1.5rem;
}

section ul li
{
background: url('/static/images/website/tick-32.png') no-repeat top 0.2rem left / 1.6rem;
padding-left: 2.6rem;
}

section .button
{
display: block;
padding: 1.2rem;
font-size: 1.6rem;
max-width: 32rem;
margin-top: 1.6rem;
margin: 2rem auto 0 auto;
}

#brands
{
width: calc(100% - 2rem);
margin: 1.2rem 1rem 0 1rem;
}

@media screen and (max-width: 500px) {
	
	body
	{
	background: #112154;
	}

	section
	{
	border: none;
	border-top: 0.2rem solid #404870;
	border-radius: 0;
	padding: 2rem 2rem 1.4rem 2rem;
	}
	
	#main div.pk-wrap
	{
	padding: 0;
	}
	
	section p, section li
	{
	margin: 1rem 0;
	font-size: 1.5rem;
	line-height: 1.4;
	color: #ccc;
	}
	
	#brands
	{
	display: none;
	}
}

#final-button
{
margin: 4rem 0;
}

#final-button .button
{
margin: 0 auto;
}


/* Footer */

footer
{
margin: 10rem 0 0 0;
text-align: center;
border-top: 0.4rem solid #142591;
background: #0b144e;
padding: 4rem 0 2rem 0;
}

footer img
{
width: 12.6rem;
height: 3.9rem;
margin-bottom: 1rem;
}

footer p, footer li
{
font-size: 1.3rem;
line-height: 1.5;
color: #ddd;
}

footer p
{
margin: 1.2rem auto;
max-width: 80rem;
text-align: left;
}

footer ul
{
list-style: none;
border-top: 0.2rem solid #142591;
padding-top: 1.2rem;
margin: 2.8rem auto 1rem auto;
max-width: 80rem;
text-align: center;
}

footer li
{
display: inline-block;
vertical-align: top;
margin: 0.5rem 1rem;
}

footer li:after
{
content: "|";
padding-left: 2rem;
opacity: 0.3;
}

footer li:last-child:after
{
content: "";
padding: 0;
}

#copyright
{
text-align: center;
opacity: 0.6;
font-size: 1.2rem;
margin-top: 2rem;
text-transform: uppercase;
}

/* Error */

#err-page
{
margin: 0 auto;
margin-top: 5rem;
text-align: center;
}

#err-page h1f
{
font-family: 'Roboto 700';
font-weight: 700;
font-size: 2.4rem;
}

#err-page p
{
font-family: 'Roboto 400';
font-weight: 400;
margin: 2rem 0;
font-size: 1.6rem;
line-height: 1.4;
color: #ddd;
}

#err-page .button
{
margin: 4rem auto;
}

/* Loading */

#loading
{
font-size: 1.6rem;
position: absolute;
top: calc(50% - 3rem);
left: 0;
text-align: center;
width: 100%;
background: url('/static/images/page/loading.gif') no-repeat center 0 / 3.2rem;
padding-top: 4rem;
}