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: #0b1d62;
background: linear-gradient(to right, #0b1d62, #0d2479, #0d2479, #0b1d62);
}

img
{
vertical-align: middle;
}

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

.center
{
text-align: center;
}

.nlbr
{
display: inline-block;
}

/* Inner */

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

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

	div.paramount-section
	{
	padding: 0 4rem;
	}
}

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

	div.paramount-section
	{
	padding: 0 2rem;
	}
}

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

	div.paramount-section
	{
	padding: 0 1.2rem;
	}
}

/* Header */

header
{
position: absolute;
width: 100%;
background: rgba(0,0,0,0.7);
background: linear-gradient(rgba(10,10,40,0.6) 70%, transparent);
z-index: 5;
}

header img
{
height: 12rem;
width: 19.3rem;
margin: 4rem 0 2rem 0;
}

header span.logo
{
display: inline-block;
font-size: 3rem;
color: #fff;
font-style: italic;
padding: 3rem 0;
}

footer span.logo
{
display: inline-block;
font-size: 2rem;
color: #fff;
font-style: italic;
}

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 #515b79;
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/paramount/geo-40.png') no-repeat center left 1.2rem / 2rem,
			url('/static/images/paramount/drop-20.png') no-repeat center right 1.2rem / 1rem;
}

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

header ul li span.drop-item:hover
{
border: 0.2rem solid #737c96;
}

header ul li.drop-active span.drop-item
{
border: 0.2rem solid #737c96;
}

header ul ul
{
display: none;
}

header li.drop-active ul:before
{
content: "";
width: 0;
height: 2px;
position: absolute;
top: -1rem;
right: 4.8rem;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 8px solid rgba(51,51,53,0.9);
}

header li.drop-active ul
{
position: absolute;
top: 2.4rem;
right: 0;
display: block;
background: rgba(51,51,53,0.9);
padding: 1rem 0;
list-style: none;
cursor: default;
width: 23.7rem;
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: #5fb5f2;
cursor: pointer;
}

header ul ul li a.current
{
background: url('/static/images/paramount/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
{
background-color: rgba(68,68,72,0.9);
text-decoration: none;
}

@media screen and (max-width: 1000px) {
	
	header
	{
	padding: 0 1rem;
	text-align: center;
	}
	
	header img
	{
	margin: 4rem 0 0 0;
	}
	
	header ul
	{
	display: none;
	}
}

/* Hero */

#hero
{
padding: 20rem 0 6rem 0;
background: #222;
background: linear-gradient(rgba(0,0,0,0.8), transparent) no-repeat, 
			linear-gradient(90deg, rgba(0,12,80,0.75) 15%, rgba(0,0,0,0)), 
			url('/static/images/paramount/bg1.jpg') no-repeat center;
background-size: 100% 5%, 100%, cover;
width: 100%;
}

#hero-2
{
padding: 16rem 0 6rem 0;
background: #222;
background: linear-gradient(rgba(0,0,0,0.8), transparent) no-repeat, 
			linear-gradient(to top, rgba(10,10,40,0.6) 15%, rgba(0,0,0,0)), 
			url('/static/images/paramount/triangles.svg') center;
background-size: 100% 5%, 100%, 200px;
width: 100%;
text-align: center;
}

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

#hero-title
{
font-family: 'Roboto 700';
font-weight: 700;
color: #fff;
font-size: 2.2rem;
text-shadow: 0.1rem 0 0.5rem rgba(0,0,0,0.2);
}

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

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

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

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

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

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

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

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

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

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

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

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

	#hero
	{
	text-align: center;
	padding: 20rem 0 4rem 0;
	background: #040814;
	background-image: linear-gradient(transparent, rgba(0,0,40,0.6) 50%), 
						url('/static/images/paramount/bg1.jpg');
	background-repeat: no-repeat;
	background-size: 100%, cover;
	background-position: 0, center;
	}
	
	#hero .button, #hero-share
	{
	margin-left: auto;
	margin-right: auto;
	}
}

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

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

/* Button */

.button
{
text-decoration: none;
display: block;
background: rgb(5,72,230);
color: #FFF;
padding: 1.8rem 2rem;
border-radius: 0.6rem;
text-transform: uppercase;
font-size: 2rem;
transition: all 250ms;
text-align: center;
width: 100%;
max-width: 42rem;
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: rgb(47,110,235);
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: 3.2rem auto;
max-width: 80rem;
border: 0.3rem solid #0f2c8f;
border-radius: 2rem;
padding: 2.5rem 2rem 1.5rem 2rem;
background: linear-gradient(transparent, #061050);
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: #f6f6fa;
letter-spacing: 0.2px;
word-spacing: 1px;
background: url('/static/images/paramount/play-44.png') no-repeat top 2.7rem left 1.8rem / 2.2rem,
			linear-gradient(#070759, transparent);
padding: 2.5rem 2rem 0.4rem 5rem;
margin: -2.5rem -2rem 0 -2rem;
}

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

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/paramount/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: 30rem;
margin-top: 1.7rem;
margin: 2.1rem auto 0 auto;
}

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

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

/* Footer */

footer
{
margin: 10rem 0 0 0;
text-align: center;
border-top: 0.5rem solid #1232a7;
padding: 4rem 0 2rem 0;
background: #0b1d62;
}

footer img
{
width: 13.2rem;
height: 8.2rem;
margin-bottom: 0.6rem;
}

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

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

footer ul
{
list-style: none;
border-top: 0.3rem solid #102b90;
padding-top: 1rem;
margin: 3rem 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.5;
font-size: 1.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;
}