/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: 'VW Text';
  src: url('VWText-Bold.3bf91d1fe6d93feaf2f6.woff2') format("woff2"), url('VWText-Bold.e5672dc84dfed56b22ea.woff') format("woff");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'VW Text';
  src: url('VWText.225b9871e10080257875.woff2') format("woff2"), url('VWText.16ddd71aa7000715247a.woff') format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'VW Head';
  src: url('VWHead.d458a5eda8f88ea67f7e.woff2') format("woff2"), url('VWHead.9bb5075bfabcd2109d5c.woff') format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'VW Head';
  src: url('VWHead-Bold.446335c55633880b1a78.woff2') format("woff2"), url('VWHead-Bold.22bda1ec4313591e7b60.woff') format("woff");
  font-weight: bold;
  font-style: normal; }
body {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: 'VW Text'; }
.time {
  position: absolute;
  left: 50%;
  bottom: 20px;
  padding: 24px;
  z-index: 1000; }
.scene {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden; }
.scene .scene-primary {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; }
.scene .scene-primary div {
      background-image: url('back_alt.16ca0bed772de290304a.svg');
      background-position: center bottom;
      background-repeat: repeat-x;
      background-size: 105% auto;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0; }
.scene .scene-primary div .globe {
        position: absolute;
        left: -10%;
        bottom: -130px;
        width: 120%; }
.scene .scene-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 560px;
    overflow: visible; }
.scene .scene-static {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible; }
.scene .scene-static .satellite {
      position: absolute;
      top: 25vh;
      left: -100px;
      width: 100px;
      z-index: 12; }
.scene .scene-static .airplane {
      position: absolute;
      bottom: 70vh;
      left: 0;
      width: 200px;
      z-index: 12;
      -webkit-transform: translateX(-200px) scale(0.4);
              transform: translateX(-200px) scale(0.4); }
.scene .scene-static .rocket {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 200px;
      z-index: 10;
      -webkit-filter: blur(1px);
              filter: blur(1px);
      opacity: 0.9;
      -webkit-transform: translateY(200px);
              transform: translateY(200px); }
.scene .scene-static .astronaut-1 {
      position: absolute;
      top: calc(50vh - 40px);
      right: -80px;
      width: 80px;
      z-index: 110; }
.scene .scene-static .astronaut-1 img {
        max-width: 100%; }
.scene .scene-static .astronaut-1 img.cake {
        position: absolute;
        top: 24px;
        right: 25px;
        width: 30px;
        z-index: 20;
        background-blend-mode: color-burn; }
.scene .back {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10; }
.scene .text {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    opacity: 0; }
.scene .scene-overlay-1 {
    z-index: 11; }
.scene .scene-overlay-1 div.clouds img {
      position: absolute;
      width: 200%;
      left: -50%;
      z-index: 13;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      pointer-events: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
.scene .scene-overlay-1 div.clouds .cloud-1 {
      bottom: 1.9%;
      width: 140%;
      left: auto;
      right: -40%; }
.scene .scene-overlay-1 div.clouds .cloud-2 {
      bottom: 5%; }
.scene .scene-overlay-1 div.clouds .cloud-3 {
      bottom: 8%; }
.scene .scene-overlay-1 div.clouds .cloud-4 {
      bottom: 12%;
      width: 400%;
      left: auto;
      right: -155%; }
.scene .scene-overlay-1 div.clouds .cloud-5 {
      bottom: 14%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-1 div.clouds .cloud-6 {
      bottom: 20%; }
.scene .scene-overlay-1 div.clouds .cloud-7 {
      bottom: 25%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-1 div.clouds .cloud-8 {
      bottom: 32%;
      width: 150%;
      left: auto;
      right: -75%; }
.scene .scene-overlay-1 div.clouds .cloud-9 {
      bottom: 36%; }
.scene .scene-overlay-1 div.clouds .cloud-10 {
      bottom: 40%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-1 div.clouds .cloud-11 {
      bottom: 44%; }
.scene .scene-overlay-1 div.clouds .cloud-12 {
      bottom: 48%;
      width: 250%;
      left: auto;
      right: -75%; }
.scene .scene-overlay-1 div.clouds .cloud-13 {
      bottom: 52%;
      width: 150%;
      left: auto;
      right: -75%; }
.scene .scene-overlay-1 div.clouds .cloud-14 {
      bottom: 59%; }
.scene .scene-overlay-1 div.clouds .cloud-15 {
      bottom: 62%;
      width: 400%;
      left: auto;
      right: -150%; }
.scene .scene-overlay-1 div.clouds .cloud-16 {
      bottom: 31%;
      width: 300%;
      left: -120%; }
.scene .scene-overlay-1 div.clouds .cloud-17 {
      bottom: 65%;
      width: 300%;
      left: auto;
      right: -100%; }
.scene .scene-overlay-1 div.clouds .cloud-18 {
      bottom: 59%;
      width: 400%;
      left: auto;
      right: -200%; }
.scene .scene-overlay-1 div.clouds .cloud-19 {
      bottom: 46%; }
.scene .scene-overlay-1 div.clouds .cloud-20 {
      bottom: 70%; }
.scene .scene-overlay-1 .moon {
      position: absolute;
      top: -2%;
      left: -3%;
      width: 80%; }
.scene .scene-overlay-2 {
    z-index: 11; }
.scene .scene-overlay-2 div.clouds img {
      position: absolute;
      width: 200%;
      left: -50%;
      z-index: 12;
      -webkit-transform: translateZ(0);
              transform: translateZ(0); }
.scene .scene-overlay-2 div.clouds .cloud-1 {
      bottom: 1%;
      width: 100%; }
.scene .scene-overlay-2 div.clouds .cloud-2 {
      bottom: 5%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-3 {
      bottom: 8%; }
.scene .scene-overlay-2 div.clouds .cloud-4 {
      bottom: 12%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-5 {
      bottom: 18%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-6 {
      bottom: 24%;
      width: 400%;
      left: auto;
      right: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-7 {
      bottom: 29%;
      width: 150%;
      left: -62.5%; }
.scene .scene-overlay-2 div.clouds .cloud-8 {
      bottom: 36%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-9 {
      bottom: 42%;
      width: 400%;
      left: -200%; }
.scene .scene-overlay-2 div.clouds .cloud-10 {
      bottom: 48%;
      width: 300%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-11 {
      bottom: 50%;
      width: 150%;
      left: -25.5%; }
.scene .scene-overlay-2 div.clouds .cloud-12 {
      bottom: 52%;
      width: 250%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-13 {
      bottom: 55%; }
.scene .scene-overlay-2 div.clouds .cloud-14 {
      bottom: 62%;
      width: 250%;
      left: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-15 {
      bottom: 64%;
      width: 400%;
      left: auto;
      right: -200%; }
.scene .scene-overlay-2 div.clouds .cloud-16 {
      bottom: 69%; }
.scene .scene-overlay-2 div.clouds .cloud-17 {
      bottom: 63%;
      width: 400%;
      left: auto;
      right: -100%; }
.scene .scene-overlay-2 div.clouds .cloud-18 {
      bottom: 59%; }
.scene .scene-overlay-2 div.clouds .cloud-19 {
      bottom: 72%;
      width: 300%; }
.scene .scene-overlay-2 div.clouds .cloud-20 {
      bottom: 74%; }
.scene .scene-overlay-2 .sun {
      position: absolute;
      top: 0;
      right: -40%;
      width: 140%;
      transition: -webkit-transform ease-out 0.16s;
      transition: transform ease-out 0.16s;
      transition: transform ease-out 0.16s, -webkit-transform ease-out 0.16s;
      -webkit-transform: scale(0.5) translateX(120px);
              transform: scale(0.5) translateX(120px);
      z-index: 10; }
.scene .scene-overlay-1 div.clouds img.cloud-1, .scene .scene-overlay-1 div.clouds img.cloud-2, .scene .scene-overlay-2 div.clouds img.cloud-1, .scene .scene-overlay-2 div.clouds img.cloud-2 {
    opacity: 0.6; }
.scene.scroll .cta {
    opacity: 0; }
.motivation {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 60px;
  text-align: center;
  color: #fff;
  z-index: 100; }
.motivation h1 {
    color: #fff;
    font-family: 'VW Head';
    font-size: 40px;
    line-height: 34px;
    text-align: center;
    text-shadow: 0 3px 11px rgba(22, 112, 149, 0.29);
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0; }
.car {
  width: 100%;
  max-width: 560px;
  height: 120px;
  position: absolute;
  bottom: 80px;
  z-index: 100;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
.car .car-image {
    display: block;
    content: ' ';
    width: 80%;
    height: 100%;
    left: 10%;
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 20;
    position: absolute; }
.car .balloons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; }
.car .balloon {
    position: absolute;
    width: 15%;
    z-index: 20;
    left: 50%;
    bottom: 60px;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left; }
.car .balloon img {
      opacity: 0;
      -webkit-transform: scale(0);
              transform: scale(0);
      transition: all cubic-bezier(0.64, 0.57, 0.67, 1.53) 0.6s;
      max-width: 100%; }
.car .balloon.visible img {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1); }
.car .balloon.balloon--1 {
      -webkit-transform: rotate(0);
              transform: rotate(0); }
.car .balloon.balloon--2 {
      -webkit-transform: rotate(-25deg);
              transform: rotate(-25deg); }
.car .balloon.balloon--3 {
      -webkit-transform: rotate(25deg);
              transform: rotate(25deg);
      margin-bottom: 4%;
      margin-right: -10%; }
.car .balloon.balloon--4 {
      -webkit-transform: rotate(-10deg) scale(0.9);
              transform: rotate(-10deg) scale(0.9);
      z-index: 19; }
.car .balloon.balloon--5 {
      -webkit-transform: rotate(10deg) scale(0.9);
              transform: rotate(10deg) scale(0.9);
      z-index: 19; }
.car .balloon.balloon--6 {
      -webkit-transform: rotate(-10deg) scale(0.8);
              transform: rotate(-10deg) scale(0.8);
      z-index: 18; }
.car .balloon.balloon--7 {
      -webkit-transform: rotate(10deg) scale(0.8);
              transform: rotate(10deg) scale(0.8);
      z-index: 18; }
.car .balloon.balloon--8 {
      -webkit-transform: rotate(-12deg) scale(0.8);
              transform: rotate(-12deg) scale(0.8);
      z-index: 17; }
.car .balloon.balloon--9 {
      -webkit-transform: rotate(12deg) scale(0.8);
              transform: rotate(12deg) scale(0.8);
      z-index: 17; }
.hand {
  width: 140px;
  position: absolute;
  bottom: 100px;
  left: 50%;
  z-index: 500; }
.hand img {
    max-width: 100%; }
.logo {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 88px;
  background: #fff;
  border-bottom-left-radius: 32px;
  z-index: 100;
  text-align: center; }
.logo img {
    height: 44px;
    margin-top: 22px; }
.logo img.audi {
      width: 60%;
      height: auto;
      margin-top: 30px; }
.cta {
  width: 300px;
  position: absolute;
  top: 120px;
  left: 50%;
  transition: opacity ease-in 0.3s;
  z-index: 1000;
  margin-left: -150px; }
.cta h1 {
    color: #fff;
    font-family: 'VW Head';
    font-size: 40px;
    line-height: 34px;
    text-align: center;
    text-shadow: 0 3px 11px rgba(22, 112, 149, 0.29); }
.progress {
  position: absolute;
  bottom: 24px;
  width: calc(100% - 64px);
  max-width: calc(560px - 64px);
  z-index: 500; }
.arrow {
  position: absolute;
  z-index: 1000;
  height: 26px;
  margin: 32px;
  cursor: pointer; }
header {
  position: absolute;
  left: 10%;
  right: 10%;
  width: 80%;
  top: 100px;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: 500; }
header h1 {
    color: #fff;
    font-size: 38px;
    line-height: 1.1;
    text-align: center;
    margin: 0 auto;
    margin-bottom: -8px; }
header .speech-bubble {
    background: url('speech-bubble@2x.ab2e441eb4c275a3a4f7.png');
    background-size: 105% auto;
    background-position: center;
    width: 100%;
    height: 150px; }
header .speech-bubble .line {
      text-align: center;
      padding-top: 38px;
      font-size: 24px;
      line-height: 1.02; }
header .subline {
    color: #fff;
    text-align: center;
    margin-top: -32px; }
header img {
    width: 100%;
    margin: 0 auto;
    max-width: 80%;
    display: block; }
header img.replay-arrow {
    width: 64px;
    margin: 0 auto;
    margin-top: 32px; }
@media (max-width: 640px) {
  .scene .scene-overlay-1 .clouds img, .scene .scene-overlay-2 .clouds img {
    -webkit-transform: scale(0.5) translateY(-50vh);
            transform: scale(0.5) translateY(-50vh); } }
@media (min-width: 640px) {
  .car {
    bottom: 110px;
    width: 70%;
    left: 50%; }
  .scene header {
    left: 50%;
    width: 400px;
    margin-left: -200px; }
  .scene .scene-primary div img.globe {
    width: 720px;
    left: auto;
    bottom: -220px; }
  .scene .scene-overlay-1 .moon {
    position: absolute;
    top: -1%;
    left: -36%;
    width: 120%; } }