body { margin: 0; 
  background: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
}




/*///////////////

    Structure

///////////////*/

main {
  position: relative;
  top: 0;
  left: 0;
  opacity: 1;
}

.image-bg {
  position: fixed;
  background: url(./20190808_AND_MUE_90x.png);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  
  background-position: 80% 10%; 
  background-size: cover;  
  -o-object-fit: cover;  
     object-fit: cover;
  
  -webkit-filter: blur(0);
          filter: blur(0);
  
  z-index: 1;
  transition: -webkit-filter 1.6s ease-in;
  transition: filter 1.6s ease-in;
  transition: filter 1.6s ease-in, -webkit-filter 1.6s ease-in;
}

div.ball {
  background-color: #fff;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  
  mix-blend-mode: difference;
  -webkit-animation: heartbeat 5s infinite;
          animation: heartbeat 5s infinite;
  
  pointer-events: none;
  z-index: 50;
}

.logo {
  position: absolute;
  width: 320px;
  height: 50px;
  top: calc(50% - 25px);
  left: calc(50% - 160px);
  
  text-align: center;
  font-weight: 400;
  font-size: 25px;
  color: #fff;
  
  pointer-events: none;
  z-index: 9;
  transition: opacity .6s ease-in 1.8s;
}

.view {
  position: fixed;
  left: calc(100% - 100px);
  top: 50px;
  margin: 100px;
  width: 120px;
  opacity: 1;
  transition: all 0.25s ease-out;
}

.next {
  position: absolute;

  display: flex;
  align-items: center;
  align-content: center;

  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 50px; 
  opacity: 1;
  transition: all 0.25s ease-out;
    -webkit-animation: bounce 3s infinite;
            animation: bounce 3s infinite;
}

.online { opacity: 0; }

.swiper-container {
  width: 100%;
  height: 100vh;
}
.swiper-slide {
  overflow: hidden;
  
  transition: -webkit-transform 0.25s;
  
  transition: transform 0.25s;
  
  transition: transform 0.25s, -webkit-transform 0.25s;
  will-change: transform;
}
.swiper-slide:last-child { background: rgba(10,10,10,0.9); }
.swiper-slide:last-child a { position: relative; left: 30px; }
.email-icon { position: absolute; left:0; top: 160px; left: 0px; }




/*///////////////

    Styles

///////////////*/

a { text-decoration: none; color: #fff; font-weight: 400; transition: all .2s ease-in;}
a:hover { -webkit-transform: translateX(5px); transform: translateX(5px); }

.swiper-slide.swiper-slide-active h1,
.swiper-slide.swiper-slide-active h2 {
  -webkit-transform: skewY(0) skewX(0);
          transform: skewY(0) skewX(0);
  transition: -webkit-transform .6s ease-in .3s;
  transition: transform .6s ease-in .3s;
  transition: transform .6s ease-in .3s, -webkit-transform .6s ease-in .3s;
}

h1 {
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: 45px;
  line-height: 60px;
  letter-spacing: 0.001em;
  word-spacing: 1px;
  color: rgba(100,100,100,.9);
  
  bottom: 35px;
  left: 90px;
  width: 800px;
  height: auto;

  opacity: 1;
  z-index: 10;

  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
h1 span { color: #fff; font-weight: 400 !important; }
h2 {
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 0.001em;
  word-spacing: 1px;
  color: rgba(100,100,100,.9);
  
  bottom: 35px;
  left: 90px;
  width: 50%;
  max-width: 700px;
  height: auto;
  
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: skewY(4deg) skewX(0deg);
          transform: skewY(4deg) skewX(0deg);
  will-change: transform;
  
  z-index: 10;
}
h2 span { font-weight: 400 !important; color: #fff; }
h2 a { display: flex; flex-direction: column; margin-left: 15px; }

p {
  color: #ccc;
  line-height: 1.4em;
  letter-spacing: -0.007em;
  word-spacing: 2px;
  margin: 0 0 18px;
}
p span { font-weight: 400; }

.impressum { position: absolute; display: flex; flex-direction: column; bottom: 75px; left: calc(100% - 230px); width: auto; height: 20px; z-index: 10; }
.impressum a {
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.001em;
  word-spacing: 1px;
  color: #fff;
  
  left: 30px;
  bottom: 2px;
  height: auto;
  vertical-align: bottom;
  
  z-index: 10;
  transition: all .2s ease-in;
}
.impressum span {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
}

video {
  margin-left: calc((100vw - (100vh * 1.7))/2);
  margin-right: calc((100vw - (100vh * 1.7))/2);
  min-height: 100vh;
  min-width: 100vw;
}

svg {
  position: absolute;
  z-index: 22;
}

.cookies {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  bottom: 0;
  left: calc(50% - 200px);
  width: 350px;
  height: 100px;
  padding: 22px 0 0 50px;
  
  font-size: 20px;
  background: #fff;
  z-index: 10;
  cursor: pointer;
  transition: all 0.25s ease-in;
}
.cookies p { color: #414141; }
.cookies svg { right: 50px; top: 45px; opacity: .6; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all 0.5s ease-in-out; }
.cookies:hover svg { opacity: 1; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
.cookies svg:hover { opacity: 1; -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }

.hide { -webkit-transform: translateY(100%); transform: translateY(100%); }
.show { opacity: 1;}
.blur { -webkit-filter: blur(1rem); filter: blur(1rem); }



/*///////////////

    Animations

///////////////*/

.transition-fade {
  transition: .6s;
  opacity: 1; }
html.is-animating .transition-fade { opacity: 0;}

@-webkit-keyframes heartbeat {
  0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  50% { -webkit-transform: translate(-50%, -50%) scale(3); transform: translate(-50%, -50%) scale(3); }
  100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }}
@keyframes heartbeat {
  0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  50% { -webkit-transform: translate(-50%, -50%) scale(3); transform: translate(-50%, -50%) scale(3); }
  100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }}
@-webkit-keyframes bounce {
  0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  50% { -webkit-transform: translate(-50%, -20%); transform: translate(-50%, -20%); }
  100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }}
@keyframes bounce {
  0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  50% { -webkit-transform: translate(-50%, -20%); transform: translate(-50%, -20%); }
  100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }}



@media (min-aspect-ratio: 16/9) {
  video {
    margin-left: 0;
  }
}




/*///////////////

    Media-Queries

///////////////*/

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

h1 {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0.001em;
  word-spacing: 1px;
  left: 10%;
  width: 85%;
}
  h2 {
    font-size: 30px;
    line-height: 36px;
    left: 10%;
    width: 85%;
  }

}