/* fullPage 2.9.4 https://github.com/alvarotrigo/fullPage.js MIT licensed - Copyright (C) 2013 alvarotrigo.com modified by camclose */
/* --- Reset CSS First Page ------------------------------------ */
body,div,h1,h2,p {padding: 0;margin: 0;}
/* ---- MEDIA INSTRUCTIONS First Page by camclose -------------- */
@media only screen and (max-width: 640px) {
h1 {font-size: 2.4em!important; font-weight: 600; margin-left:0!important;}
h2 {font-size: 1.8em!important;}
.lang-switch {top: -2px!important;left: 3px!important;}
p.new-label-en, p.new-label-de {font-size: 1.8em!important;margin-left: 0!important;}
.fp-controlArrow, #email, #scroll, #keys-icon, #prev, #next {display: none!important;}
}
/* --- CSS First Page ------------------------------------ */
#section0  {z-index:2;}
.fp-slides {z-index:0;}
/* --- Backgrounds fixed (pseudo-parallax), first BG will cover all the section, 2nd etc. contain dimensions ---- */
/* 100% cover images on PC (mobile always 100% see @media */
.cover   {background-attachment: fixed; background-position: center; background-size: cover;   background-repeat: no-repeat;}
.contain {background-attachment: fixed; background-position: center; background-size: contain; background-repeat: no-repeat;}
body, button, a {font-family: 'Roboto', sans-serif;color:#444; font-variant-ligatures: none;}
h1, h2 {text-align: right; margin-right: 1vw;}
h1 {font-size:4em;font-weight:700;letter-spacing:.025em;text-transform:uppercase;line-height:.8em;margin-left:35vw;margin-top:1vw;}
h2 {font-size:2em;font-weight:300;letter-spacing:.085em;text-transform: lowercase;}
.section  {text-align: center;}
#section0 .fp-tableCell {vertical-align: top;}
/* LANGUAGE SWITCH */
body.en :lang(de) {display: none;}
body.de :lang(en) {display: none;}
.lang-switch {width: auto; position: absolute; left: 1em; top:.6em;opacity:.5;}
.lang-switch a {text-decoration: none;}
.lang-switch:hover a p.new-label-de:after{content: 'UTSCH';}
.lang-switch:hover a p.new-label-en:after{content: 'GLISH';}
.new-label-de, .new-label-en {margin-bottom: 0!important;}
/* --- START PAGE ELEMENTS-------- */
#email, #scroll, #keys-icon {position:absolute;}
/* --- E-mail @ icon ----------- */
#email {bottom: 1vh; left: 1vw;}
#at    {width: 25px;opacity: .25;}
/* --- Scrollator Mouse Icon --- */
#scroll    {bottom: 0;width: 100px;left: 50%;margin-left: -50px;}
img#mouse  {width: 60px;opacity: .5; margin-bottom: calc( -16px + 1vh);}
/* --- Keyboard Icon ------------ */
#keys-icon {bottom: 1vh; right: 1vw;}
#keys      {opacity: .5}
/* CSS by fullPage.js - some parts altered by camclose */
/* General + avoid flicker on slides transitions for mobile phones #336 */
html.fp-enabled, .fp-enabled body {margin: 0; padding: 0; overflow:hidden; -webkit-tap-highlight-color: rgba(0,0,0,0);}
/* brauche ich das... war früher #SuperContainer,...testen */
#fullpage {
    height: 100%;
    position: relative;
    /* Touch detection for Windows 8 */
    -ms-touch-action: none;
    /* IE 11 on Windows Phone 8.1*/
    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 {
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-in; /* Safari<=6 Android<=4.3 */
    -o-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.fp-section.fp-table, 
.fp-slide.fp-table  {display: table; table-layout:fixed; width: 100%;}
.fp-tableCell       {display: table-cell; vertical-align: middle; width: 100%; height: 100%;}
.fp-slidesContainer {float: left; position: relative;}
.fp-scrollable      {overflow: hidden;position: relative;}
.fp-scroller        {overflow: hidden;}
.iScrollIndicator   {border: 0 !important;}
.fp-notransition    {-webkit-transition: none !important; -moz-transition:none !important; -o-transition:none !important; transition: none !important;}
.fp-slidesNav{
    margin: 0!important; /*zum Zentrieren */
    left: 50%;
    -moz-transform:  translateX(-50%);
    -o-transform:  translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.fp-slidesNav.bottom {bottom: 12px; position: absolute; width: 100vw; pointer-events: none;}
ul, li {list-style: none;margin:0;padding:0;}
#fp-nav ul li {height: .5em;}
.fp-slidesNav ul li {display: inline-table;width: 30px;}
#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;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {border-radius: 50%;position: absolute;height: 4px;width: 4px;margin: -2px 0 0 -2px;}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{width: 10px;height: 10px;margin: -5px 0 0 -5px;}
/* ---- MEDIA INSTRUCTIONS by camclose ---------------------------- */
@media only screen and (max-width: 640px) {
	/*h3 {font-size: 2em!important;}
	/ h4 {font-size: 1em!important;} */
    .story {margin-left: 5%!important; margin-right: 5%!important;margin-bottom: 3em!important;}
    .about {padding-left: 10%!important; padding-right: 10%!important;}
    /*.story h3, .story h4, .story, .about, p {margin-left: 3%!important; margin-right: 3%!important;} TESTEN */
    .trigger {font-size: 2em!important;}
    figure {margin: 0!important;}
    #img-about {width: 80vw!important; height: auto!important; margin-top: -3vh!important;}
    #overlay-close {right:0!important;}
    /* Align cover images for mobile */
    #sec1-slide1 {background-position: center!important;}
    #sec2-slide1 {background-position: 20%!important;}
    #sec3-slide1 {background-position: 75%!important;}
    #sec4-slide1 {background-position: 75%!important;}
    #sec6-slide1 {background-position: 25%!important;}
    #sec7-slide1 {background-position: 25%!important;}
    #sec8-slide1 {background-position: 60%!important;}
    #sec9-slide1 {background-position: 70%!important;}
    #section104  {background-size:     50%!important;}
    /* No frame around Section 4 Modus Images on mobile */
    .x1, .x2, .x3 {background-size: contain!important;}
}
/* CSS ADDED BY CAMCLOSE */
/* --- Custom CSS ------------------------------------- */
.figcap {font-size: 1em;}
/*Frame around Section 4 Modus Images */
.x3 {background-size: 64vh;}
.x1 {background-size: 80vh;}
.x2 {background-size: 51.1vh;}
/* new arrows fixed with bg*/
img#prev, img#next {position: fixed; width: 30px; height: 48px; top: calc(50% - 24px); z-index: 1;opacity: .7;}
img#prev {left: 1vw;}
img#next {right: 1vw;}
/*clickable area with no nero content for prev/next */
.fp-controlArrow {position: absolute;z-index: 4;cursor: pointer;width: 15vw;height: 70vh;top: calc(50% - 35vh);background-repeat: no-repeat;border:none;}
.fp-controlArrow.fp-prev {left: 0;}
.fp-controlArrow.fp-next {right:0;}
h3 {font-size: 3em;font-weight: 100; line-height: 1em;   margin-bottom: .8em; margin-top: 0;}
h4 {font-size: 2em;font-weight: 400; line-height: 1em;   margin-bottom: .8em;   margin-top: 1.35em; }
p  {font-size: 2em;font-weight: 300; line-height: 1.3em; margin-bottom: .67em;}
.story    {text-align: left; padding-bottom: 10%; margin-left: 15%; margin-right: 15%;}
.story h3 {margin-top: 1em;}
.about    {padding-left: 15vw; padding-right: 15vw; background-color: rgb(255, 255, 255); z-index: 2;}
#section104 {background-color: #ff1493; z-index: 2;}
code      {font-size: 1em; line-height: .5em;}
#sec1-slide1 .fp-tableCell,
#sec2-slide1 .fp-tableCell,
#sec3-slide1 .fp-tableCell, 
#sec4-slide1 .fp-tableCell,
#sec5-slide1 .fp-tableCell,
#sec6-slide1 .fp-tableCell,
#sec7-slide1 .fp-tableCell,
#sec8-slide1 .fp-tableCell, 
#sec9-slide1 .fp-tableCell 
{vertical-align: top;}
/* --- START PAGE Tooltips--------------- */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {z-index: 99; cursor: pointer;}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 1;
	pointer-events: none;
  }
  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-webkit-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
	z-index: 99;
  }
  /* Position tooltip above the element */
  [data-tooltip]:before {content: attr(data-tooltip); position: absolute; margin-bottom: 0; margin-left: 0; padding: 1em; border-radius: 5px;
	  background-color: #ff1493; color: #000!important; text-align: center; font-size: 1em; line-height: 1.2; pointer-events: none;
	  border: none !important; opacity: 0.9;}
  [data-tooltip^=E]:before {bottom: 40px; left: 0;}
  [data-tooltip^=S]:before {bottom: 55px; left: 0;}
  [data-tooltip^=U]:before    {bottom: 50px; right:0;}
/* ====== END TOOLTIP ================= */
/* --- Coloring h1 / h2 per section  --- */
#section0  h1,   #section0  h2   {color: rgb(50, 50, 50);    opacity: .25;}
#sec1-slide1 h1, #sec1-slide1 h2 {color: rgb(48, 31, 14);    opacity: .5;}
#sec2-slide1 h1, #sec2-slide1 h2 {color: rgb(100, 100, 100); opacity: .6;}
#sec3-slide1 h1, #sec3-slide1 h2 {color: red;                opacity: .6;}
#sec4-slide1 h1, #sec4-slide1 h2 {color: red;                opacity: .6;}
#sec5-slide1 h1, #sec5-slide1 h2 {color: black;              opacity: .4;}
#sec6-slide1 h1, #sec6-slide1 h2 {color: black;              opacity: .6;}
#sec7-slide1 h1, #sec7-slide1 h2 {color: #ff1493;            opacity: .6;}
#sec8-slide1 h1, #sec8-slide1 h2 {color: #cbb295;            opacity: .6;}
#sec9-slide1 h1, #sec9-slide1 h2 {color: #FE2F0A;            opacity: .65;}
/* --- Coloring the nav dots per section - x to turn off  --- */
#section1 span {background: rgb(127, 76, 25);   opacity: .5;}
#section2 span {background: rgb(100, 100, 100); opacity: .5;}
#section3 span {background: red;                opacity: .5;}
#section4 span {background: red;                opacity: .5;}
#section5 span {background: red;                opacity: .5;}
#section6 span {background: #202020;            opacity: .5;}
#section7 span {background: #ff1493;            opacity: .5;}
#section8 span {background: #cebaa4;            opacity: .5;}
#section9 span {background: #FE2D08;            opacity: .5;}
/* --- Size Image About ------------------------- */
#img-about {height: 50vh;}
/* === Video BG === */
#myVideo{position: absolute;right: 0;bottom: 0;top:0;width: 100%;height: 100%;background-color: black;background-position: center center;	background-size: contain;/* object-fit: cover; */z-index:3;}
/* Hiding video controls. See: https://css-tricks.com/custom-controls-in-html5-video-full-screen */
/*video::-webkit-media-controls {display:none !important;}*/
/*solves problem with overflowing video in Mac with Chrome */
#myVideo{overflow: hidden;}
/* === MODALS ========= */
/* Trigger Button Style */
.launch {opacity: .7;}
.trigger {color: #444;background-color:transparent; border:none;cursor:pointer; font-size:3em; outline: none; font-weight: 300; line-height: 1em;}
/* Overlay Styles */
.overlay  {position:fixed; width:100%; height:100%;	top:0%;	left:0%; z-index:4; opacity: 1;overflow-y: auto;touch-action: auto;}
.bg-white {background:whitesmoke;color: #444;}
.bg-black {background:#444;color: white;}
/* Overlay closing cross */
#overlay-close
{width:80px; height:80px; position:fixed; right:20px; border:none; outline:none; background:url(../img/icons/cross-b.png) no-repeat center center; 
z-index:99; top:0!important; cursor: pointer;}
.overlay102 #overlay-close {background:url(../img/icons/cross.png) no-repeat center center;} /* exchange for white cross */
/* Transition Overlay Open */
.opacity-in{animation:opac 1.5s}@keyframes opac{from{opacity:0} to{opacity:1}}