/* line-height für Abstand zwischen Zeilen. Text soll komplett bündig mit Logo sein. Logo als SVG (inline) einbinden. Navigation verschönern und  */

@import url('https://fonts.googleapis.com/css?family=Cambay&display=swap');

html {
  overflow-y: scroll; 
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
    max-width: 1600px;
    margin: 0 auto;
    color: #204E62;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cambay', sans-serif;
}

.clear {
    clear: both;
}

.head_wrapper {
  margin-top: 20px;
}

.logo_wrapper {
    float: left;
    font-family: 'Cambay', sans-serif;
}

.logo {
    width: 100px;
    float: left;
}

.brand {
    float: right;
    font-size: 24px;
}

.brand .happy {
    color: #204E62;
}

.brand .innovation {
    color: #49B3E2;
}

.logo img {
    width: 100%;
}

.navigation_wrapper {
    width: 800px;
    float: right;
}

.navigation {
    display: none;
}

.navigation ul {
    float: right;
}

.navigation ul li {
    float: left;
    padding: 10px 15px;
    list-style-type: none;
    font-size: 20px;
    margin: auto 0;
    line-height: 80px;
}

.start_wrapper {
    width: 100%;
    height: 95%;
}

.start_text {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
    width: 100%;
}

.start_text h1{
    text-align: center;
    line-height: 1;
    font-size: 60px;
}

.blur {
    color: transparent;
    text-shadow: 0 0 2px rgba(32, 78, 98, 0.6);
}

.above {
    font-weight: bold;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}

.start_wave { 
    height: 15%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    background: #204E62;
  }
  
  .wave {
    background: url("data:image/svg+xml;utf8,<svg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1600 125'><defs><style>.cls-1{fill-rule:evenodd;fill:url(%23Wave_Gradient);}</style><linearGradient id='Wave_Gradient' x1='500.81' y1='398.69' x2='500.81' y2='397.99' gradientTransform='translate(802100 79000.16) rotate(180) scale(1600 198)' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%23295669' stop-opacity='0.7'/><stop offset='1' stop-color='%23204e62'/></linearGradient></defs><title>wave_hi</title><path class='cls-1' d='M1600,149.39c-311,0-409.9-76.55-811-76.39C389,73,289,149.39,0,149.39V198H1600Z' transform='translate(0 -73)'/></svg>") repeat-x; 
    position: absolute;
    top: -125px;
    width: 6400px;
    height: 125px;
    animation: wave 6s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite, swell1 7s ease -1.25s infinite;
    transform: translate3d(0, 0, 0);
  }
  
  .wave:nth-of-type(2) {
    top: -102px;
    animation: wave 6s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell2 7s ease -1.25s infinite;
    opacity: 1;
  }
  
  @keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }
  
  @keyframes swell1 {
    0%, 100% {
      transform: translate3d(0,0px,0);
    }
    50% {
      transform: translate3d(0,10px,0);
    }
  }
  
  @keyframes swell2 {
    0%, 100% {
      transform: translate3d(0,-20px,0);
    }
    50% {
      transform: translate3d(0,5px,0);
    }
  }

  .start_cta { 
    height: 60px;
    width: 400px;
    position:absolute;
    bottom:7.5%;
    left: 50%;
    margin-left: -200px;
    border-radius: 50px;
  }

  .arrow_cta {
    width: 40px;
    margin: 0 auto;
    animation: arrow_cta 2s infinite;
  }

  @keyframes arrow_cta {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      80%, 100% {
        opacity: 0;
        transform: translate(0, 40px);
        width: 20px;
      }
  }

  .information_wrapper{
    width: 1200px;
    margin: 0 auto;
    margin-top: -20px;
  }

  .headline {
    font-size: 22px;
  }

  .information {
    width: 600px;
    text-align: justify;
    font-size: 18px;
  }

  .blur-bubbles {
    filter: blur(10px);
  }
  .unblur-bubbles {
    filter: blur(0px);
  }

  .blur-animation {
    animation: blur-to-normal 2s linear 1;
  }



  .cutting_line {
    height: 5px;
    background: linear-gradient(90deg, rgba(32,78,98,1) 0%, rgba(32,78,98,1) 100%);
    margin-top: -20px;
  }

/* 
TODO

        Bubbles Container wie Info Container positionieren.  
        Blasen kommen hoch, einmalig. Währenddessen wird der Text leicht geladen mit einem Blur effekt.
        CSS Klasse mit animation wird erst gesetzt, wenn der Scrolleffekt eintritt. So dass es ein smoothes scrollen ist und die animation dann losgeht
        Für die Animation videos anschauen, wie das in echt aussieht. 10X Rule auch hier anwenden. Lieber etwas mehr aufwand aber später dann etwas stimmiges haben
*/


  @import url("https://fonts.googleapis.com/css?family=Exo+2:900");
  h1 {
    font-family: 'Exo 2', sans-serif;
    font-size: 8.5vw;
    padding: 5rem 0;
    text-shadow: 0px 4px 48px rgba(255, 255, 255, 0.2);
  }
  
  .bubbles-container {
    position: relative;
    top: 50px;
    width: 100%;
    height: 10px;
    opacity: 0.75;
    overflow: visible;
  }
  
  .bubbles {
    width: 100%;
    height: auto;
  }

  .bubbles circle {
    stroke: #204E62;
    fill: none; 
  }

  .bubbles .start {
    opacity: 0;
  }


/* 
  .bubbles {
    width: 100%;
    height: auto;
  }
  .bubbles circle {
    stroke: #204E62;
    fill: none;
  }
  
  .bubbles-large {
    overflow: visible;
  }
  .bubbles-large > g {
    -webkit-transform: translateY(2048px);
            transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
  }

.bubbles-large .start {
  width: 35px;
  height: 35px;
} */
  
  @-webkit-keyframes blur-to-normal {
    0% {
      filter: blur(10px);
    }
    100% {
      filter: blur(0px);
    }
  }
  
  @keyframes blur-to-normal {
    0% {
      filter: blur(10px);
    }
    100% {
      filter: blur(0px);
    }
  }
  
  @-webkit-keyframes wobble {
    33% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    66% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }
  
  @keyframes wobble {
    33% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
    }
    66% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }
  @-webkit-keyframes up {
    0% {
      /* opacity: 1; */
      opacity: 0;
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      /* opacity: 1; */
      -webkit-transform: translateY(-600px);
              transform: translateY(-600px);
    }
  }
  @keyframes up {
    0% {
      opacity: 0;
      /* opacity: 1; */
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      /* opacity: 1; */
      -webkit-transform: translateY(-600px);
              transform: translateY(-600px);
    }
  }
  @-webkit-keyframes up-small {
    0% {
      opacity: 1;
      /* opacity: 0; */
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      /* opacity: 0; */
      opacity: 1;
      -webkit-transform: translateY(-600px);
              transform: translateY(-600px);
    }
  }
  @keyframes up-small {
    0% {
      /* opacity: 0; */
      opacity: 1;
    }
    10%, 90% {
      opacity: 1;
    }
    100% {
      /* opacity: 0; */
      opacity: 1;
      -webkit-transform: translateY(-600px);
              transform: translateY(-600px);
    }
  }