@font-face {
    font-family: 'pn';
    src: url('Metropolis-SemiBold.woff2') format('woff2'),
         url('Metropolis-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pnb';
    src: url('Metropolis-Black.woff2') format('woff2'),
         url('Metropolis-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html,body,div,img,a {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html, body {
	height: 100%;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
body {
	background-color: white;
	color: black;
	overflow: auto;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font: 1.2em 'pn', '-apple-system','lato', 'Helvetica Neue', Arial, sans-serif;
}

b{font-family:'pnb','-apple-system','lato', 'Helvetica Neue', Arial, sans-serif;font-weight: normal;font-style: normal;}
.w {
	max-width: 90%;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding-top: 1em;
	padding-bottom: 1em;
}
.w.f {
	color: white;
	text-align: center;
}
.w.a {
	padding-top: 4em;
}
a {
	color: #0079ff;
}
.w.f a {
	display: inline-block;
	color: white;
	text-decoration: none;
	background-color: #0061cf;
	padding: .6em 1em;
	margin: .2em;
	border-radius: .5em;
	transition: all .3s;
}
.nt .w.f a:hover {
	transform: scale(1.05);
}
.bk {
	width: 10em;
	overflow: hidden;
	border-radius: .5em;
	box-shadow: 0 .4em 1em rgba(0, 0, 0, 0.24);
	margin-right: auto;
	margin-left: auto;
	transform: rotate(355deg);
	border: 1px solid #cfcfcf;
	margin-bottom: 1.5em;
	height: 15em;
}
.bk img {
	width: 100%;
}
.w.wh {
	color: white;
}
/* HEADER */
.h {
	text-align: center;
	padding-top: 1em;
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	z-index: 5;
	transition: all .5s;
	padding-bottom: .4em;
	text-decoration: none;
}
.h > div {
	display: inline-block;
}
.h .i {
	border-radius: 9em;
	overflow: hidden;
	width: 3em;
	height: 3em;
	transition: all .5s;
}
.h img {
	display: block;
	width: 100%;
	height: 100%;
}
.h .a, .h .b {
	font-size: 1.4em;
	position: relative;
	top: -0.8em;
	padding-right: .4em;
	padding-left: .4em;
	color: white;
	transition: all .5s;
	text-shadow: 0 0 .6em rgba(0, 0, 0, 0);
}
body.s .h {
	background-color: rgba(255, 255, 255, 0.9);
	padding-top: .5em;
	padding-bottom: 0;
  -webkit-backdrop-filter: blur(15px);
}
body.s .h .a, body.s .h .b {
	text-shadow: 0 0 1px rgba(0, 0, 0, 0);
	color: black;
	font-size: 1.2em;
	top: -.8em;
}
body.s .h .i {
	box-shadow: 0 0 .6em rgba(0, 0, 0, 0);
	height: 2.5em;
	width: 2.5em;
}
/* BANNER */
.bn {
	background-image: url(../img/mojo2.jpg);
	background-position: center;
	width: 100%;
	height: 100%;
	background-size: cover;
	position: relative;
}
.bn .b {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 1em;
	width: 12em;
	position: absolute;
	padding-top: .5em;
	padding-bottom: .5em;
	bottom: 4em;
	left: 2em;
	transition: all .5s;
	transform: translate(0,-1em);
	opacity: 0;
}
.bn img {
	height: auto;
	width: 3em;
	position: absolute;
	top: .2em;
	left: .2em;
}
.bn .b div {
	padding-left: 3.5em;
}
.bn span {
	color: gray;
	font-size: .8em;
}
.bn.a .b {
	opacity: 1;
	transform: translate(0,0);
}
body.s .bn.a .b {
	transform: translate(0,-1em);
	opacity: 0;
}
.bn .d {
	position: absolute;
	text-align: center;
	bottom: 0;
	right: 0;
	left: 0;
	opacity: .6;
	transition: opacity .5s;
}
body.s .bn .d {
	opacity: 0;
}
.bn .d svg {
	width: 4em;
	height: 4em;
}
.h1 {
	text-align: center;
	padding-bottom: .5em;
	font-size: 2em;
}
.box p {
	background-color: #0079ff;
	font-size: .8em;
	padding: 1em;
	border-radius: 1em;
	text-align: center;
	color: white;
}
.box p a {
	color: rgba(255, 255, 255, 0.6);
}
.n a {
	display: block;
	border-radius: .7em;
	padding: 1em;
	text-decoration: none;
	box-shadow: 0 .1em .5em #dddddd;
	margin-bottom: .5em;
	border: 1px solid #eaeaea;
	transition: all .3s;
	font-size: 1.4em;
}
.nt .n a:hover {
	transform: scale(1.03);
}
.n a span {
	display: block;
	font-size: .7em;
	color: gray;
	transition: color .3s;
}
.nt .n a:hover span {
	color: black;
}
.n a.i {
	position: relative;
	overflow: hidden;
}
.n a.i img {
	position: absolute;
	top: 0;
	left: 0;
}


@media screen and (min-width:601px) {
	.n a.i img {
		width: 5em;
		margin-top: .5em;
		margin-left: .5em;
		border-radius: .3em;
		overflow: hidden;
	}
	.n a.i {
		padding-left: 6.2em;
		min-height: 3em;
	}
}
@media screen and (max-width:600px) {
	.n a.i img {
		width: 100%;
	}
	.n a.i b {
		margin-top: 90%;
		display: block;
	}
}

@media screen and (min-width:1000px) {
	.bn {
		/*background-position: top;*/
	}
}
/* DARK MODE */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #1c1d1d;
		color: white;
	}
	body.s .h {
		background-color: rgba(0, 0, 0, 0.8);
	}
	body.s .h .a, body.s .h .b {
		color: white;
	}
	.n a {
		box-shadow: 0 0 .6em rgba(0, 0, 0, 0.37);
		background-color: #5a5351;
		border-color: #282828;
		color: white;
	}
	.n a span, .nt .n a:hover span {
		color: silver;
	}
	.bn .b {
		background-color: rgba(0, 0, 0, 0.9);
	}
	.bk {
		border-color: black;
		box-shadow: 0 .4em 1em rgba(0, 0, 0, 0.7);
	}
}