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


// <weight>: Use a value from 200 to 900
	// <uniquifier>: Use a unique and descriptive class name
	
	.zalando-sans-<uniquifier> {
	  font-family: "Zalando Sans", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	  font-variation-settings:
		"wdth" 100;
	}
	@font-face {
		font-family: 'Bashield', sans-serif;
		src: url('../../resources/fonts/bashield.woff') format('woff');
		src: url('../../resources/fonts/bashield.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		}


html summary::-webkit-details-marker {
  display: none;
  }
* {
	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;
	line-height: 100%;
	font-weight: <weight>;
	/* -webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;		 */
	color: var(--text-color);
	}
ul,ol,li {
	list-style: none;
	}
html {
	position: relative;
	}	
body,html {
	height: 100%;
	overflow: hidden;
	}
body {
	font-size: 13px;
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
	min-width: 375px;
	position: relative;
	width: 100%;
	line-height: 100%;
	-webkit-overflow-scrolling: touch;
	background: var(--color-background);
	}	
svg {
	shape-rendering: geometricPrecision;
	}		
fieldset {
	outline: 0;
	border: 0;
	}	



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: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px; 
			border-radius: 10px; 
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#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:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}




 #superContainer {
	 height: 100%;
	 position: relative;
	 -ms-touch-action: none;
	 touch-action: none;
 }
 .fp-section {
	 position: relative;
	 -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
	 -moz-box-sizing: border-box; /* <=28 */
	 box-sizing: border-box;
 }
 .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-section.fp-table, .fp-slide.fp-table {
	 display: table;
	 width: 100%;
 }
 .fp-tableCell {
	 display: table-cell;
	 vertical-align: middle;
	 width: 100%;
	 height: 100%;
 }
 .fp-slidesContainer {
	 float: left;
	 position: relative;
 }
 .fp-controlArrow {
	 position: absolute;
	 z-index: 4;
	 top: 50%;
	 cursor: pointer;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 margin-top: -38px;
 }
 .fp-controlArrow.fp-prev {
	 left: 15px;
	 width: 0;
	 border-width: 38.5px 34px 38.5px 0;
	 border-color: transparent #fff transparent transparent;
 }
 .fp-controlArrow.fp-next {
	 right: 15px;
	 border-width: 38.5px 0 38.5px 34px;
	 border-color: transparent transparent transparent #fff;
 }
 .fp-scrollable {
	 overflow: scroll;
 }
 .fp-easing {
	 -webkit-transition: all 0.7s ease-out; /* Safari<=6 Android<=4.3 */
	 transition: all 0.7s ease-out;
 }
 #fp-nav {
	 position: fixed;
	 z-index: 100;
	 margin-top: -32px;
	 top: 50%;
	 opacity: 1;
 }
 #fp-nav.right {
	 right: 17px;
 }
 #fp-nav.left {
	 left: 17px;
 }
 .fp-slidesNav{
	 position: absolute;
	 z-index: 4;
	 left: 50%;
	 opacity: 1;
 }
 .fp-slidesNav.bottom {
	 bottom: 17px;
 }
 .fp-slidesNav.top {
	 top: 17px;
 }
 #fp-nav ul,
 .fp-slidesNav ul {
   margin: 0;
   padding: 0;
 }
 #fp-nav li,
 .fp-slidesNav li {
	 display: block;
	 width: 14px;
	 height: 13px;
	 margin: 7px;
	 position:relative;
 }
 .fp-slidesNav li {
	 display: inline-block;
 }
 #fp-nav li a,
 .fp-slidesNav li a {
	 display: block;
	 position: relative;
	 z-index: 1;
	 width: 100%;
	 height: 100%;
	 cursor: pointer;
	 text-decoration: none;
 }
 #fp-nav li .active span,
 .fp-slidesNav .active span {
	 background: #333;
 }
 #fp-nav span,
 .fp-slidesNav span {
	 top: 2px;
	 left: 2px;
	 width: 8px;
	 height: 8px;
	 border: 1px solid #000;
	 background: rgba(0, 0, 0, 0);
	 border-radius: 50%;
	 position: absolute;
	 z-index: 1;
 }
 .fp-tooltip {
	 position: absolute;
	 top: -2px;
	 color: #fff;
	 font-size: 14px;
	 font-family: arial, helvetica, sans-serif;
	 white-space: nowrap;
	 max-width: 220px;
 }
 .fp-tooltip.right {
	 right: 20px;
 }
 .fp-tooltip.left {
	 left: 20px;
 }














h1{
	 margin: 0 auto;
	 text-align: left;
	 position: absolute;
	 top: 50%;
	 left: calc(50% + 200px);
	 transform: translate(-50%,-50%);
	 width: 100vw;
 }
 h1 span{
	 color: #fff;


	   
 }
.words{
	 display: inline;
	 text-indent: 20px;
 }
 .words span{
	 position: absolute;
	 opacity: 0;
	 overflow: hidden;
	 width: 100%;
   font-weight: 700;
 }
 .rotate span{
	 -webkit-animation:  rotateWord 18s linear infinite;
			 animation:  rotateWord 18s linear infinite;
 }
 .words span:nth-child(1) {
	 color: #FF0004;
 }
 .words span:nth-child(2) { 
	 color: #FF6E00;
	 -webkit-animation-delay: 3s; 
			 animation-delay: 3s; 
 }
 .words span:nth-child(3) { 
	 color: #FFED00;
	 -webkit-animation-delay: 6s; 
			 animation-delay: 6s; 
 }
 .words span:nth-child(4) {
	 color: #0FB402; 
	 -webkit-animation-delay: 9s; 
			 animation-delay: 9s; 
 }
 .words span:nth-child(5) {
	 color: #0383F9;
	 -webkit-animation-delay: 12s; 
			 animation-delay: 12s; 
 }
 .words span:nth-child(6) {
	 color: #8600F9;
	 -webkit-animation-delay: 15s; 
			 animation-delay: 15s; 
 }
 @-webkit-keyframes rotateWord {
	 0% { opacity: 0; }
	 2% { opacity: 0; -webkit-transform: translateY(-30px); }
	 5% { opacity: 1; -webkit-transform: translateY(0px);}
	 25% { opacity: 1; -webkit-transform: translateY(0px); }
	 27% { opacity: 0; -webkit-transform: translateY(30px); }
	 80% { opacity: 0; }
	 100% { opacity: 0; }
 }
 @-ms-keyframes rotateWord {
	 0% { opacity: 0; }
	 2% { opacity: 0; -ms-transform: translateY(-30px); }
	 5% { opacity: 1; -ms-transform: translateY(0px);}
	 17% { opacity: 1; -ms-transform: translateY(0px); }
	 20% { opacity: 0; -ms-transform: translateY(30px); }
	 80% { opacity: 0; }
	 100% { opacity: 0; }
 }
 @keyframes rotateWord {
	 0% { opacity: 0; }
	 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
	 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
	 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
	 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
	 80% { opacity: 0; }
	 100% { opacity: 0; }
 }
 @media screen and (max-width: 420px) {
	 .words{
	 display: block;
	 text-indent: 0px;
 }
 }