
.stage {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #F4F4F4; }
  .stage__container {
    margin: 0 auto;
    width: calc(100% - 8rem);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3rem; }
    @media only screen and (min-width: 660px) {
      .stage__container {
        width: calc(100% - 20rem);
        padding-bottom: 6rem; } }
  .stage__logo {
    height: 4.7rem;
    position: absolute;
    top: 3rem;
    left: 0;
    animation-name: fadein;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: 0s;
    z-index: 110; }
    .stage__logo img {
      height: 100%; }
    @media only screen and (min-width: 660px) {
      .stage__logo {
        height: 5.5rem;
        top: 8rem; } }
  .stage__claim {
    position: relative;
    width: 100%;
    margin-top: auto;
    z-index: 100;
    opacity: 0%;
    animation-name: fadein;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: .5s;
    font-size: 2rem;
    line-height: 2.05;
    /*  background-color: rgba(255, 255, 255, 0.685);
        border-radius: 2rem;
        padding: 2rem;
        margin-left: -2rem; */ }
    @media only screen and (min-width: 660px) {
      .stage__claim {
        font-size: 5rem;
        max-width: 75rem;
        line-height: 1.2; } }
    @media only screen and (min-width: 1140px) {
      .stage__claim {
        line-height: 1.15; } }
    @media only screen and (min-width: 1600px) {
      .stage__claim {
        line-height: 1.35; } }
    .stage__claim h1 span {
      background-color: rgba(255, 255, 255, 0.856);
      border-radius: 2rem; }
  .stage__claim--mobile {
    display: inline; }
    @media only screen and (min-width: 660px) {
      .stage__claim--mobile {
        display: none; } }
  .stage__claim--desktop {
    display: none; }
    @media only screen and (min-width: 660px) {
      .stage__claim--desktop {
        display: inline; } }
  .stage__cta {
    display: inline-flex;
    align-self: flex-start;
    color: #1356D5;
    margin-top: 4rem;
    align-items: center;
    z-index: 100;
    opacity: 0%;
    animation-name: fadein;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: .8s;
    background-color: rgba(255, 255, 255, 0.856);
    border-radius: 2rem;
    transition: all .2s; }
    .stage__cta svg {
      height: 3.4rem;
      width: 3.4rem;
      margin-right: 1rem; }
      .stage__cta svg .flaeche {
        fill: #1356D5;
        transition: all .2s; }
      @media only screen and (min-width: 660px) {
        .stage__cta svg {
          height: 3rem; } }
    .stage__cta span {
      line-height: 1.2; }
    .stage__cta:hover {
      color: #2878FF; }
      .stage__cta:hover svg .flaeche {
        fill: #2878FF; }
  .stage__illu {
    position: absolute;
    top: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.65);
    z-index: 50;
    transform-origin: center;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: bottomtop;
    top: -105%; }
    @media only screen and (min-width: 1140px) {
      .stage__illu {
        transform: translateY(-50%) translateY(-50%);
        transform-origin: center; } }

@keyframes bottomtop {
  0% {
    top: 105%;
    opacity: 0%; }
  5% {
    opacity: 100%; }
  36% {
    opacity: 100%; }
  44% {
    opacity: 0%; }
  100% {
    top: -1500px;
    opacity: 0%; } }

@keyframes fadein {
  0% {
    opacity: 0%; }
  100% {
    opacity: 100%; } }
