:root {
	--text-color: #fff;
	--color-background: #191919;
	}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Zalando Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
	font-optical-sizing: auto;
	padding: 0;
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
	font-synthesis: none;
	-moz-font-feature-settings: 'kern';
	shape-rendering: geometricPrecision;
	direction: ltr;
	font-weight: <weight>;
	color: var(--text-color);
	}
ul,ol,li {
	list-style: none;
	}
	
body,html {
	height: 100%;
	overflow: hidden;
	}
body {
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
	/* min-width: 375px; */
	position: relative;
	width: 100%;
	background: var(--color-background);
	}	
svg {
	shape-rendering: geometricPrecision;
	}		
fieldset {
	outline: 0;
	border: 0;
	}	


/* EXAMPLES CSS */

@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
}
a{
	text-decoration:none;
}
table {
	border-spacing: 0;
}
fieldset,img {
	border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
	list-style: none;
	margin:0;
	padding:0;
}
caption,th {
	text-align: left;

}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	margin:0;
	padding:0;
	color:#444;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}
.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
}
#menu li {
	display:inline-block;
	margin: 0;
	color: #fff;
	background: hsla(0,0%,0%,.8);
	-webkit-border-radius: 10px;
			border-radius: 10px;
	width: fit-content;		
}
#menu li.active{
	background: rgba(0,0,0, 0.5);
	color: #fff;
	
}
#menu li a{
	text-decoration:none;
	color: #fff;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top: 30px;
	left: 30px;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
	display: flex;
	flex-flow: column;
	grid-gap: 5px;
}
.twitter-share-button{
	position: fixed !important;
	z-index: 99;
	right: 149px;
	top: 9px;
}
#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}
#examplesList{
	display:none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width:822px;
	text-align:left;
}
#examplesList ul{
	padding:0;
}
#examplesList ul li{
	display:block;
	margin: 5px 0;
}
#examplesList ul li a{
	color: #BDBDBD;
	margin:0;
}
#examplesList ul li a:hover{
	color: #f2f2f2;
}
#examplesList .column{
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3{
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}



/* Demos Menu
 * --------------------------------------- */
 #demosMenu{
	position:fixed;
	top: 20px;
	right:20px;
	z-index: 999;
	padding: 5px 10px;
 }

/* Buttons
 * --------------------------------------- */
#download a{
	text-decoration: none
}
#download,
#download:hover {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}
.button {
	margin: 20px 0 0 0;
	vertical-align: middle;
	display: inline-block
}

.button a {
	color: #fff;
	background: rgba(0,0,0,0.4);
	padding: 15px 30px;
	border-radius: 5px;
	display: inline-block;
}

.button a:hover {
	color: #316f68;
	background-color: #fff
}


/* Extensions preview menu
 * --------------------------------------- */
.preview-extensions-menu{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
	border-top: 0;
	box-shadow: 1px 0px 3px rgba(0,0,0,0.8);
}
.preview-extensions-menu li{
	display: inline-block;
	margin: 0;
}
.preview-extensions-menu li a{
	padding: 15px 25px;
	display: block;
}
.preview-buy-extension{
	background: #3cc63c;
}
.preview-more-extensions{
	background: #fff;
}
.preview-buy-extension a{
	color: #fff;
}
.preview-buy-extension:hover{
	background-color: #1a961a;
}
.preview-more-extensions a{
	color: #333;
}

.code{
	background: rgba(255,255,255,0.7);
	padding: 0px 5px;
	line-height: 25px;
}


/* Style for our header texts
* --------------------------------------- */
h1{
	font-size: 5em;
	font-family: arial,helvetica;
	color: #fff;
	margin:0;
}
.section p,
.intro p{
	color: #fff;
}

/* Centered texts in each section
* --------------------------------------- */
.section{
	text-align:center;
}


/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
	color: #fff;
}

/* Sections backgrounds
* --------------------------------------- */
#section0{
	background-image: linear-gradient(128deg,#40afff,#3f61ff);
}

#section1{
	background-image: linear-gradient(128deg,#ff9a3f,#ff4b40);
}

#section2{
	background-image: linear-gradient(128deg,#fc40ff,#543fff);
}

#section3{
	background-image: linear-gradient(128deg,#40fff2,#3fbcff);
}


















/*!
	 * fullPage 4.0.41
	 * https://github.com/alvarotrigo/fullPage.js
	 *
	 * @license GPLv3 for open source use only
	 * or Fullpage Commercial License for commercial use
	 * http://alvarotrigo.com/fullPage/pricing/
	 *
	 * Copyright (C) 2021 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
	 */
	html.fp-enabled,
	.fp-enabled body {
		margin: 0;
		padding: 0;
		overflow:hidden;
	
		/*Avoid flicker on slides transitions for mobile phones #336 */
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	.fp-section {
		position: relative;
		-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
		-moz-box-sizing: border-box; /* <=28 */
		box-sizing: border-box;
		height: 100%;
		display: block;
	}
	.fp-slide {
		float: left;
	}
	.fp-slide, .fp-slidesContainer {
		height: 100%;
		display: block;
	}
	.fp-slides {
		z-index:1;
		height: 100%;
		overflow: hidden;
		position: relative;
		-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
		transition: all 0.3s ease-out;
	}
	.fp-table{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
	.fp-slidesContainer {
		float: left;
		position: relative;
	}
	.fp-controlArrow {
		-webkit-user-select: none; /* webkit (safari, chrome) browsers */
		-moz-user-select: none; /* mozilla browsers */
		-khtml-user-select: none; /* webkit (konqueror) browsers */
		-ms-user-select: none; /* IE10+ */
		position: absolute;
		z-index: 4;
		top: 50%;
		cursor: pointer;
		margin-top: -38px;
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	.fp-prev{
		left: 100px;
	}
	.fp-next{
		right: 100px;
	}
	.fp-arrow{
		width: 0;
		height: 0;
		border-style: solid;
	}
	.fp-arrow.fp-prev {
		border-width: 38.5px 34px 38.5px 0;
		border-color: transparent #fff transparent transparent;
	}
	.fp-arrow.fp-next {
		border-width: 38.5px 0 38.5px 34px;
		border-color: transparent transparent transparent #fff;
	}
	.fp-notransition {
		-webkit-transition: none !important;
		transition: none !important;
	}
	#fp-nav {
		position: fixed;
		z-index: 100;
		top: 50%;
		opacity: 1;
		transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-webkit-transform: translate3d(0,-50%,0);
		pointer-events: none;
	}
	#fp-nav.fp-right {
		right: 17px;
	}
	#fp-nav.fp-left {
		left: 17px;
	}
	.fp-slidesNav{
		position: absolute;
		z-index: 4;
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		left: 0 !important;
		right: 0;
		margin: 0 auto !important;
		pointer-events: none;
	}
	.fp-slidesNav.fp-bottom {
		bottom: 17px;
	}
	.fp-slidesNav.fp-top {
		top: 17px;
	}
	#fp-nav ul,
	.fp-slidesNav ul {
	  margin: 0;
	  padding: 0;
	}
	#fp-nav ul li,
	.fp-slidesNav ul li {
		display: block;
		width: 14px;
		height: 13px;
		margin: 7px;
		position:relative;
	}
	.fp-slidesNav ul li {
		display: inline-block;
	}
	#fp-nav ul li a,
	.fp-slidesNav ul li a {
		display: block;
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		cursor: pointer;
		text-decoration: none;
		pointer-events: all;
	}
	#fp-nav ul li a.active span,
	.fp-slidesNav ul li a.active span,
	#fp-nav ul li:hover a.active span,
	.fp-slidesNav ul li:hover a.active span{
		height: 12px;
		width: 12px;
		margin: -6px 0 0 -6px;
		border-radius: 100%;
	 }
	#fp-nav ul li a span,
	.fp-slidesNav ul li a span {
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		height: 4px;
		width: 4px;
		border: 0;
		background: #333;
		left: 50%;
		top: 50%;
		margin: -2px 0 0 -2px;
		-webkit-transition: all 0.1s ease-in-out;
		-moz-transition: all 0.1s ease-in-out;
		-o-transition: all 0.1s ease-in-out;
		transition: all 0.1s ease-in-out;
	}
	#fp-nav ul li:hover a span,
	.fp-slidesNav ul li:hover a span{
		width: 10px;
		height: 10px;
		margin: -5px 0px 0px -5px;
	}
	#fp-nav ul li .fp-tooltip {
		position: absolute;
		top: -2px;
		color: #fff;
		font-size: 14px;
		font-family: arial, helvetica, sans-serif;
		white-space: nowrap;
		max-width: 220px;
		overflow: hidden;
		display: block;
		opacity: 0;
		width: 0;
		cursor: pointer;
	}
	#fp-nav ul li:hover .fp-tooltip,
	#fp-nav.fp-show-active a.active + .fp-tooltip {
		-webkit-transition: opacity 0.2s ease-in;
		transition: opacity 0.2s ease-in;
		width: auto;
		opacity: 1;
	}
	#fp-nav ul li .fp-tooltip.fp-right {
		right: 20px;
	}
	#fp-nav ul li .fp-tooltip.fp-left {
		left: 20px;
	}
	.fp-auto-height.fp-section,
	.fp-auto-height .fp-slide{
		height: auto !important;
	}
	
	.fp-responsive .fp-is-overflow.fp-section{
		height: auto !important;
	}
	
	/* Tries to prevent overwrites #4657 */
	.fp-enabled .fp-scrollable{
		overflow: visible;
		height: initial;
	}
	
	/* Used with autoScrolling: false */ 
	.fp-scrollable.fp-responsive .fp-is-overflow.fp-section,
	.fp-scrollable .fp-section,
	.fp-scrollable .fp-slide{
	   /* Fallback for browsers that do not support Custom Properties */
	   height: 100vh;
	   height: calc(var(--vh, 1vh) * 100);
	}
	
	.fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]),
	.fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]),
	.fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]){
		/* Fallback for browsers that do not support Custom Properties */
		min-height: 100vh;
		min-height: calc(var(--vh, 1vh) * 100);
	}
	
	/* Disabling vertical centering on scrollable elements */
	.fp-overflow{
		justify-content: flex-start;
		width: 100dvw; /* In case its necessary #4717 */
	}
	
	body:not(.fp-responsive) .fp-overflow{
		max-height: 100vh;
		max-height: 100dvh; /* fix for new browsers */
	}
	
	/* No scrollable when using auto-height */
	.fp-scrollable .fp-auto-height .fp-overflow{
		max-height: none;
	}
	
	.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
	.fp-is-overflow .fp-overflow.fp-auto-height,
	.fp-is-overflow .fp-overflow{
		overflow-y: auto;
	}
	.fp-overflow{
		outline:none;
	}
	
	.fp-overflow.fp-table{
		display: block;
	}
	
	.fp-responsive .fp-auto-height-responsive.fp-section,
	.fp-responsive .fp-auto-height-responsive .fp-slide,
	.fp-responsive .fp-auto-height-responsive .fp-overflow{
		height: auto !important;
		min-height: auto !important;
	}
	
	/*Only display content to screen readers*/
	.fp-sr-only{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	
	/* Customize website's scrollbar like Mac OS
	Not supports in Firefox and IE */
	.fp-scroll-mac .fp-overflow::-webkit-scrollbar {
		background-color: transparent;
		width: 9px;
	}
	.fp-scroll-mac .fp-overflow::-webkit-scrollbar-track {
		background-color: transparent;
	}
	.fp-scroll-mac .fp-overflow::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.4);
		border-radius: 16px;
		border: 4px solid transparent;
	}
	.fp-warning,
	.fp-watermark{
		z-index: 9999999;
		position: absolute;
		bottom: 0;
	}
	.fp-warning,
	.fp-watermark a{
		text-decoration: none;
		color: #000;
		background: rgba(255,255,255,0.6);
		padding: 5px 8px;
		font-size: 14px;
		font-family: arial;
		color: black;
		display: inline-block;
		border-radius: 3px;
		margin: 12px;
	}
	.fp-noscroll .fp-overflow{
		overflow: hidden;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
.logomark_front {
	position: relative;
	z-index: 9999;
	}
.logomark_front img {
	width: 300px;
	}
.logomark_front .front-slogan {
	font-size: 2.2rem;
	padding: 30px 0 0 0;
	}	
.hero-content-container {
	width: 100vw;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;	

	display: flex;
	justify-content: center;
	}
.hero-content-container video,
	.hero-content-container img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		}		
.hero-content-container .gradient-1 {
	background: linear-gradient(180deg, hsla(151,49%,7%,.95) 0%, hsla(151,49%,7%,.9) 100%);		
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(40px);
	}	   







@media (max-width: 980px) {
	
	#menu li a {
		font-size: 2rem;
		}
#fp-nav {
			display: none;
		}		
	
	}