/* Main */

html, body{
	
	margin: 0;
	padding: 0;
	
}

body{
	
	min-height: 100vh;
	
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	font-weight:500;
	
	color:#262633;
	background-color:#EEF4F7;
	
	-webkit-tap-highlight-color: transparent;
	
}

.wrapper{
	
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	
}

#content{ flex: 1; }

#header{
	
	position:relative;
	
	margin:3em 3em 3em 3em;
	
}

.warning{
	
	color:#262633;
	display:block;

	text-align: center;
	text-decoration: none;
	
	background-color: #ffbd2e;
	font-size: 90%;
	padding: 1em 5em;
	
}

.bold{
	
	font-family: 'Noto Sans', sans-serif ;
	
	font-size: 0.9em;
    font-weight: 800;
	
}

.bold a{
	
	border-bottom:none;
	text-decoration:none !important;
	
}

.bold a:hover{
	
	border-bottom:2px solid !important;
	text-decoration:none !important;
	
}

.link a{
	
	font-family: 'Noto Sans', sans-serif;
	text-decoration:none;
	
}

.link a:hover{ border-bottom:2px solid; }

a{ color:inherit; }

/* Text */

h1{
	
	font-family: 'Lexend', sans-serif;
	font-size:2.75em;
	line-height:1.15em;
	
}

h2{
	
	font-family: 'Lexend', sans-serif;
	font-size:1.5em;
	line-height:1.25em;
	
	margin:2em 0em;
	
}

h3{
	
	font-size:1.1em;
	margin:2em 0em;
	
}

h4{
	
	font-family: 'Noto Sans', sans-serif ;
	
	font-size: 0.9em;
    font-weight: 800;
	
}

span.line{ display: inline-block; }

.horizontal-separator{
	
	opacity:0.5;
    font-size: 12px;
    margin: 0em 0.6em;
	
}

/* Code */

code{
	
	background-color:#262633;
	color:white;
	
	padding: 0.3em 0.5em;
	margin:0;
	
	margin-left: 0.2em;
    margin-right: 0.2em;
	
	border-radius: 0.3em;
	vertical-align: top;
	
	white-space:nowrap;
	
    font-weight: bold;
	
}
	
pre{
	
	color:white;
	box-shadow:none !important;
	
	background-color:#262633;
	border-radius: 0.3em;
	padding: 1em;
	
	margin:1em 0em;
	margin-bottom:3em;

	overflow:auto;
	
}
	
pre code{

	white-space: pre;
	padding: 0;
	margin: 0;
	background:none;

}

pre.hljs .hljs-code-line {
    counter-increment: line;
}

pre.hljs .hljs-code-line::before {
    content: counter(line);
    display: inline-block;
    margin-right: 1em;
    opacity: 0.25;
}

/* Articles */

.article p{
	
	margin-bottom:2.5em;
	
}

.article{
	
	line-height: 1.85em;
	
}

.article figure{
	
	text-align:center;
	
	margin-top:4em;
	margin-bottom:4em;
	
}

.article figure img{
	
	border-radius:0.2em;
	max-width: 100%;
	
}

.article figcaption{
	
	font-size: 80%;
	
	color: #757778;
	
    margin-top:0.5em;
	
}

/* Navigation */

.navigation{
	
	position:relative;
	
}

.navigation ul{
	
	font-size:0.9em;
	font-weight:800;

	list-style-type: none;
	margin:0; padding:0;
	
}

.navigation li{
	
	float:left;
	margin-right:0.5em;
	
	font-family: 'Noto Sans', sans-serif;
	
}

.navigation.right{
	
	margin-right:-0.4em;
	
}

.navigation.right li{
	
	float:right;
	margin-left:0.5em;
	
}

.navigation li.logo{
	
	position:relative;
	margin-right:4em;
	
}


.navigation li.item a, .navigation li.icon a{
	
	display:block;
	padding:0.4em 1em;
	
	text-decoration:none;
	
}

.navigation li.item a:hover{
	
	color:inherit;
	
}

.navigation li.active span, .navigation li.item a:hover span{
	
	color:inherit !important;
	border-bottom:2px solid;
	
}



section.no-margin{
	
	margin:0em;
	
}

section.large-padding{ padding:10em 3em; }
section.small-padding{ padding:2em 3em; }
section.no-padding{ padding-top:0em; }

section hr{
	
	border: 1px solid white;
    width: 25%;
	margin-top: 1em;
	
}

section.purple{
	
	background: transparent linear-gradient(0deg, #b273f3 0%, #7b5cc5 100%) 0% 0% no-repeat padding-box;
	color:white;
	
}

section.purple .link a:hover{ color:white; border-color:white }

section.yellow{
	
	background: transparent linear-gradient(0deg, #ff8d00 0%, #ffA500 100%) 0% 0% no-repeat padding-box;
	color:white;
	
}

section.dark{
	
	background-color:#262633 !important;
	color:white;
	
}

section.dark a{ color:white; border-color:white; }
section.dark .link a{ color:white; border-color:white; }

section ol{
	
	margin-bottom: 2em;
	line-height: 2em;
	
}

section li::marker{
	
	font-weight:bold;
	
}

/* Breadcrumb */

ul.breadcrumb{
	
	padding: 10px 16px;
	list-style: none;
	color: #9468d9;
	
	font-size: 0.8em;
    font-weight: 800;
	
	border-radius:0.4em;
	border: 2px solid #00000014;
	
	text-align:left;
	
}

ul.breadcrumb li{
	
	display: inline;
	
}

ul.breadcrumb li+li:before{
	
	padding: 8px;
	color: #26263378;
	content: "/\00a0";
	
}

ul.breadcrumb li a{
	
	text-decoration: none;
	
}

ul.breadcrumb li a:hover{
	
	color: #9468d9;
	text-decoration: underline;
	
}

/* Footer */

footer{
	
	font-family: 'Noto Sans', sans-serif;
	padding:3em 3em;
	
}

/* Lists */

.horizontal-list a, .horizontal-list span{
	
	font-size:0.8em;
	font-weight:bold;
	
	text-decoration:none;
	
	border-right: 1px solid;
	
	margin-right: 7px;
	padding-right: 10px;
	
}

.horizontal-list a:last-child, .horizontal-list span:last-child{
	
	border: none;
	
	margin-right: 0px;
	padding-right: 0px;
	
}

.horizontal-list a:hover{
	
	text-decoration:underline;
	
}

.vertical-list{
	
	list-style-type: none;
	margin: 0; padding: 0;
	
	font-weight: bold;
	
}

.vertical-list.reduced a{
	
	padding:0.25em 0em;
	
}

.vertical-list a{
	
	display:block;
	
	padding:1.5em 0em;
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
	
	text-decoration:none;
	
}

.vertical-list a:hover .text{
	
	border-bottom:2px solid;
	
}
	
.vertical-list a:last-child{ border:none; }
.vertical-list a h2{ margin:0; }

/* Buttons */

.button, .button:focus{
	
	font-family: 'Noto Sans', sans-serif !important;
	
	display:inline-block;
	
	color:white !important;
	
	background-color:#FF3A63;
	background: linear-gradient(0deg, #FF3366 0%, #FF5858 100%);
	
	padding:0;
	padding:0.5em 3em;
	padding-bottom: 0.45em;
	
	border:none;
	border-radius:0.4em;
	border-bottom:2px solid #cb1647;
	
	font: inherit;
	font-size:0.9em;
	font-weight:800;
	
	text-decoration:none;
	
	outline: none;
	
}

.button:hover, .button.light:hover{
	
	color:white;
	background:#3F3F51;
	border-color:#131319 !important;
	cursor: pointer;
	
}

.button, .button:focus{
	
	padding:0.5em 3em;
	
	border-radius:0.3em;
	
	background: linear-gradient(0deg, #7C5EC6 0%, #B073F0 100%);
	border-color:#553798 !important;
	
	box-shadow:0px 2px 0px rgba(0, 0, 0, 0.3);
	
}

.button.light{
	
	color:#262633 !important;
	
	background: linear-gradient(0deg, #d2d2d7 0%, #EEF4F7 100%);
	border-color:#a6a9ab !important;
	
	box-shadow:0px 2px 0px rgba(0, 0, 0, 0.15);
	
}

.button.light:hover{ color:white !important; }

.button.dark{
	
	color:white;
	background:#3F3F51;
	border-color:#131319 !important;
	cursor: pointer;
	
}

.button.dark:hover{
	
	background: linear-gradient(0deg, #7C5EC6 0%, #B073F0 100%);
	border-color:#553798 !important;
	
	color:white !important;
	
}

/* Icons */

.chevron{
	
	font-size:1.25em;
	font-weight:bold;
	margin-left:0.5em;
	
}

.chevron::after {
	
	content: '\203A';
	
}

.chevron-left{
	
	font-size:1.25em;
	font-weight:bold;
	margin-right:0.5em;
	
}

.chevron-left::after {
	
	content: '\2039';
	
}

/* Grid */

.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.text-justify{ text-align:justify; }

.text-underline{ padding:0.1em 0.1em; border-bottom:2px solid #262633; }

.margin-top{ margin-top:4em; }
.margin-top.tiny{  margin-top:0.5em; }
.margin-top.small{ margin-top:1em; }
.margin-top.medium{ margin-top:3em; }
.margin-top.large{ margin-top:8em; }

.container{
	
	max-width: 800px;
	
}

.container.large{
	
	max-width: 1280px;
	
}

.container.small{
	
	max-width: 400px;
	
}

.container.narrow{
	
	max-width: 650px;
	
}

/* Mobile */

.mobile-show{ display:none; }
.mobile-contain{ max-width:75%; }
.mobile-contain-half{ max-width:50%; }

@media screen and (max-width:950px) {
	
	#header{ margin:2em 2em 0em 2em; }
	footer{ padding-left:2em; padding-right:2em; }
	
	h1{ font-size:2em; }
	
	.mobile-stack{
		
		display: block;
		text-align:center;
		
	}
	
	.logo-full{
		
		left: 0; 
		right: 0; 
		margin-left: auto; 
		margin-right: auto; 
		
		position:absolute;
		text-align:center;
		width:144px;
		
	}
	
	.notification{
		
		margin-top:3.25em;
		
	}
	
	.mobile-text-center{ text-align:center; }
	.mobile-text-justify{ text-align:justify; }
	
	.mobile-hide{ display:none; }
	.mobile-show{ display:block; }
	
	.mobile-margin-top{ margin-top:0.5em; }
	.mobile-margin-top-large{ margin-top:2em; }
	
	.mobile-contain, .mobile-contain-half{ max-width:100%; }
	
	section.mobile-padding{ padding-top:2em; }
	
}

/* Additional */

.logo-plush{
	
	position: absolute;
    top: 16px;
    right: -50px;
	
}

.logo-plush:hover{
	
	filter: brightness(1.05);
	
}

h1, .logo, .button, .horizontal-separator, .no-select {
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
			
}

.small{
	
	font-size: 80%;
    opacity: 0.7;
    margin-top: 0.25em;
	
}

.sticky{
	
	position:sticky;
	top:2em;
	
}

.rounded{ border-radius:0.5em; }

.fluid{
	
	max-width: 100%;
	height: auto;

}

::selection{
	
	color: white;
	background: #ffa700;

}

::-moz-selection{
	
	color: white;
	background: #ffa700;

}

body::-webkit-scrollbar{ width: 12px; }
body::-webkit-scrollbar-track{ background: #ECEDF3; }

body::-webkit-scrollbar-thumb{
	
	background-color: #8d8b95;
	border-radius: 20px;
	border: 2px solid #ECEDF3;
	
}

/* Bootstrap */

.container{
	
	padding:0;
	
}

/* Hover effects */

.hover-border{
	
	border: 2px solid rgba(0, 0, 0, 0);
	
}

.hover-border:hover{
	
	cursor: pointer;
	border: 2px solid white;
	
}

/* Labels */

.label{
	
	background-color:#262633;
	font-size: 0.7em;
	text-transform: uppercase;
	padding: 0.2em 0.4em;
	color:white;
	border-radius: 0.3em;
	margin-right: 0.3em;
	
}

a:hover li .label{ background-color: #ffbd2e; color: #262633; }

/* Wave */

.wave{
		
	display:block;
		
	background-size: 1280px 32px;
	height: 32px;
	
	position: absolute;
	left: 0px;
	width: 100%;
	
}

.wave.top{
	
	top: 0px;
	background-image:url('../fonts/frontpage-wave-top.svg');
	animation: move-horizontal 8s linear infinite;
	
}

.wave.bottom{
	
	bottom: 0px;
	background-image:url('../fonts/frontpage-wave-bottom.svg');
	animation: move-horizontal-reverse 8s linear infinite;
	
	background-size: 1280px 48px;
	height: 48px;
	
}
	
@keyframes move-horizontal{

	from { background-position: 0 0; }
	to { background-position: 1280px 0; }
	
}

@keyframes move-horizontal-reverse{

	from { background-position: 1280px 0; }
	to { background-position: 0 0; }
	
}