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('/public/fonts/roboto-normal-700.woff2') format('woff2'), 
	 url('/public/fonts/roboto-normal-700.woff') format('woff'), 
	 url('/public/fonts/roboto-normal-700.ttf') format('ttf'), 
	 url('/public/fonts/roboto-normal-700.eot') format('eot'), 
	 url('/public/fonts/roboto-normal-700.svg') format('svg');
}

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

@font-face
{
font-family: 'Roboto 400';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/public/fonts/roboto-normal-400.woff2') format('woff2'), 
	 url('/public/fonts/roboto-normal-400.woff') format('woff'), 
	 url('/public/fonts/roboto-normal-400.ttf') format('ttf'), 
	 url('/public/fonts/roboto-normal-400.eot') format('eot'), 
	 url('/public/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: #155792;
background: linear-gradient(to right, #124a7c, #1888a8, #124a7c);
}

img
{
vertical-align: middle;
}

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

.center
{
text-align: center;
}

.nlbr
{
display: inline-block;
}

/* Inner */

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

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

	div.spotify-divset
	{
	padding: 0 4rem;
	}
}

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

	div.spotify-divset
	{
	padding: 0 2rem;
	}
}

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

	div.spotify-divset
	{
	padding: 0 1.2rem;
	}
}

/* Header */

header
{
position: fixed;
width: 100%;
background: rgba(0,0,0,0.6);
background: linear-gradient(rgba(3,3,20,0.92), rgba(3,3,20,0.8) 90%, transparent);
z-index: 5;
}

header img
{
height: 4.8rem;
width: 15.12rem;
margin: 2.6rem 0 2.8rem 0;
}

header ul
{
float: right;
list-style: none;
transition: all 0.5s;
user-select: none;
z-index: 12;
margin: 2.7rem 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('/public/imgs/spotify/geo-40.png') no-repeat center left 1.2rem / 2rem,
			url('/public/imgs/spotify/drop-20.png') no-repeat center right 1.2rem / 1rem;
}

header ul li:nth-child(2) span.drop-item
{
background: url('/public/imgs/spotify/share-40.png') no-repeat center left 1.2rem / 2rem,
			url('/public/imgs/spotify/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: -1rem;
right: 4.8rem;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 8px solid #282828;
}

header li.drop-active ul
{
position: absolute;
top: 2.4rem;
right: 0;
display: block;
background: #282828;
padding: 1rem 0;
list-style: none;
cursor: default;
width: 24rem;
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: #20d463;
cursor: pointer;
}

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

header ul ul li a:not(.current):hover, header ul ul li span:hover
{
background-color: #383838;
background: linear-gradient(#444, #383838);
text-decoration: none;
}

@media screen and (max-width: 750px) {
	
	header
	{
	padding: 0 1rem;
	}
	
	header img
	{
	height: 4rem;
	width: 12.6rem;
	margin: 2rem 0;
	}
	
	header ul
	{
	margin: 2.3rem 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;
	}
}

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

/* Hero */

#hero
{
padding: 15rem 0 7rem 0;
background: #222;
background: linear-gradient(rgba(0,0,0,0.7), transparent) no-repeat, 
			linear-gradient(95deg, rgba(0,6,20,0.8) 40%, rgba(0,6,20,0.1)), 
			url('/public/imgs/spotify/bg2.jpg') no-repeat center;
background-size: 100% 5%, 100%, cover;
width: 100%;
}

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

#hero-title
{
font-family: 'Roboto 700';
font-weight: 700;
color: #fff;
font-size: 2.2rem;
line-height: 1.17;
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-title-2
{
font-family: 'Roboto 700';
font-weight: 700;
color: #fff;
font-size: 2.4rem;
line-height: 1.17;
text-shadow: 0.1rem 0 0.5rem rgba(0,0,0,0.2);
}

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

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

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

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

#hero-subtitle
{
font-family: 'Roboto 400';
font-weight: 400;
color: #ddeedd;
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,6,20,0.8) 50%), 
						url('/public/imgs/spotify/bg2.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: 550px) {

	#hero
	{
	padding: 13.4rem 0 2.8rem 0;
	}
}

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

/* Button */

.button
{
text-decoration: none;
display: block;
background: #1aa14d;
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: 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: #20d463;
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.96;
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.4rem solid #1764a8;
border-bottom-color: #145792;
border-radius: 1rem;
padding: 2rem 2rem 1.4rem 2rem;
background: linear-gradient(#154d93, #0b2f4f);
box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.25);
overflow: hidden;
}

h2
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 2rem;
color: #f6f6fb;
letter-spacing: 0.2px;
word-spacing: 1px;
background: url('/public/imgs/spotify/play-44.png') no-repeat top 2.2rem left 1.8rem / 2.2rem;
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.42;
color: #ddddee;
}

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

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

section ul li
{
background: url('/public/imgs/spotify/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.spotify-divset
	{
	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 #0f3565;
padding: 4rem 0 2rem 0;
background: #12427c;
}

footer img
{
width: 12.6rem;
height: 4rem;
margin-bottom: 0.7rem;
}

footer p, footer li
{
font-size: 1.35rem;
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 #0f3565;
padding-top: 1rem;
margin: 3rem auto 1rem auto;
max-width: 80rem;
text-align: center;
}

footer li
{
display: inline-block;
vertical-align: top;
margin: 0.8rem 0.6rem 0.4rem 0.6rem;
}

footer li:after
{
content: "|";
padding-left: 1.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('/public/imgs/page/loading.gif') no-repeat center 0 / 3.2rem;
padding-top: 4rem;
}