@import url("https://use.typekit.net/gge8qha.css");


html{
  overflow: hidden;


}

body{
  background-image:none !important;
       -o-animation: fadeIt 15s ease-in-out infinite;
          animation: fadeIt 15s ease-in-out infinite;

  color: white;
  font-family: aktiv-grotesk, sans-serif;

  overflow: none;
  cursor: crosshair!important;
}

h1,h2{
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 700;
  font-style: italic;

}

.thinh2{
  font-family: aktiv-grotesk-thin, sans-serif;
  font-weight: 200;
  font-style: italic;
}

p{
  font-size: 15px;
}

a{
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;

}

a:hover{
  color: white;
  text-decoration: none;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  color: #5700ce;

}


@-o-keyframes fadeIt {
  0%   { background-color: #7d3af8; }
  10%  { background-color: #c963a2; }
  20%  { background-color: #8410c1; }
  30%  { background-color: #2e11bf; }
  40%  { background-color: #1358bc; }
  50%  { background-color: #1391bc; }
  60%  { background-color: #15ba44; }
  70%  { background-color: #98b716; }
  80%  { background-color: #efdd03; }
  90%  { background-color: #f27708; }
  100% { background-color: #7d3af8; }

}
@keyframes fadeIt {
  0%   { background-color: #7d3af8; }
  10%  { background-color: #c963a2; }
  20%  { background-color: #8410c1; }
  30%  { background-color: #2e11bf; }
  40%  { background-color: #1358bc; }
  50%  { background-color: #1391bc; }
  60%  { background-color: #15ba44; }
  70%  { background-color: #98b716; }
  80%  { background-color: #efdd03; }
  90%  { background-color: #f27708; }
  100% { background-color: #7d3af8; }
}

.framewrap{
  position: fixed;
  width:100%;
  height: 100%;
  top: 0;
  left:0px;
  transition: all 0.8s ease;
  z-index: 666;
}



iframe{
  width:100%;
  height: 100%;
  border: none;
  outline: none;
  transition: all 2s;
}

canvas{
  width:100%;
  height:100%;
}


.hide{
top: 100%!important;
transition: all 0.8s;
}

.top{
  top: -100%;
  transition: all 0.8s ease;
}


.currentframe{

}

.next-level{
  cursor: pointer;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

}

.show{
  display: block;
  opacity: 1;
  transition: all 0.5s ease;
}



/*MENU*/
.menubutton{
  position: fixed;
  z-index: 9999;
  left: 100px;
  transform: translate(-50%,-50%);
  top: 90%;

  width: 30px;
  height: 30px;
  border: 6px solid white;
  transition: all 0.2s ease;
  border-radius: 50%;
  cursor: pointer;

}


.menubutton:hover{
  /* border-radius: 15%; */
  transition: all 0.6s ease;
  /* transform: translate(-10%,-50%); */
  width: 45px;
  height: 45px;

}


.menuwrap{
    background-color: #5700ce;
    opacity: 0.9;
    position: fixed;
    width: 100%;
    height: 103%;
    transform: translate(-50%,-50%);
    top: 49%;
    left: -100%;
    z-index: 9988;

    transition: all 0.6s ease;
    pointer-events: none;
}

.showmenu{
  transition: all 0.6s ease;
  left: 50%;
}


.infowrap{
  position: absolute;
  right: 100px;
  bottom: 50px;
  pointer-events: auto;
cursor: auto!important;

}

.linksize{
  font-size: 11px;
}

.imprintsize{
  font-size:8px;
}

.menu{
  position: absolute;
  top: 10%;
  left: 80%;

}

.menu li{
  pointer-events: auto;

  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0px;
  transition: all 0.3s ease;
  list-style-type:none;
  /* text-align: center; */
  margin-top: 20px;

  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.menu li:hover{
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  color: #5700ce;
  padding-left: 10px;
}

.hoverbg{
background: #4dff49;

}



.advicewrap{
  pointer-events: auto;

  position: fixed;
  left: 150px;
  bottom: 29px;
  z-index: 9800;
  transition: all 0.3s ease;
}


.cookieokay{
color: #4dff49;
cursor: pointer;
transition: all 0.3s ease;

}

.cookieokay:hover{
  color: white;
  transition: all 0.3s ease;
  padding-left: 10px;

}


.buttonstart{
  background: #4dff49;
}

.disclaimer{
  transition: all 0.3s ease;
}

.prehide{
  transition: all 0.3s ease;
  opacity: 0!important;
}



.webframe{
  width: 300px;
  height: 250px;
  position: fixed;
  right: 300px;
  bottom: 400px;
}

.LogoMainpage{
  position: fixed;
  top: 100px;
  left:50px;
  width: 800px;
  transition: all 0.4s ease;
  z-index: 9999;

}

.logosmall{
  width: 250px;
}


.mobile{
  display: none;
  z-index: 999999;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #5700ce;
}

.mobile h2{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
}

@media only screen and (max-width: 1024px) {


.mobile{
display: block;
}
}