@charset "utf-8";
/* CSS Document */

/* Div layer for the entire container. */
#dc_container {
  position: fixed;
  width: 100%;
  height: 50%;
  margin: auto;
  font-size: 0;
  bottom: 0;
  left: 0;
  z-index: 99998;
  display:none;
}
#dc_content {
  position: absolute;
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
  z-index: 100;
  bottom: 0;
}

/* Invisible button for background clickthrough. */
#dc_background_exit {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10px;
  left: 10px;
  z-index: 998;
  cursor: pointer;
  opacity: 0;
}
#dc_bgImage {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
#dc_expand_logo {
  position: absolute;
  left: 5px;
  top: 5px;
}

#dc_content img, #dc_content svg, #dc_content object {
  width: 100%;
  height: auto
}

a.exit_link {
  position:absolute;
  z-index:900;
  width:100%;
  height: 300px;
  left:0;
  bottom:0;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-callout:none;
  display: none;
  animation: shrinkHeight 0.5s 8s forwards;
}

#dc_btnClose {
  display: block;
  display: none;
  position: absolute;
  width: 25px;
  height: auto;
  top: 60px;
  right: calc(50% - 350px);
  z-index: 99999;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-callout: none;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeinUp 0.6s 8s ease-in-out forwards;
}

@media only screen and (max-width: 725px) {
  #dc_btnClose {
    right: 2vw;
    top: unset;
    bottom: 30vw;
  }
}

.content-wrapper {
  width: 100vw;
  height: 300px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.content-container {
  width: 100vw;
  height: 300px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.content {
  width: 100vw;
  height: 300px;
  position: relative;
}

.sky-container, .question-container, .airplane-container, .pisa-container, .colosseum-container, .eiffel-container, .liberty-container, .big-ben-container, .sphinx-container, .card-wrapper, .gradient-container {
  position: absolute;
}

.sky-container {
  width: 100vw;
  height: 300px;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: flex;
  justify-content: end;
  background-image: linear-gradient(0deg, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
  animation: fadein 0.5s 3.5s ease-in-out forwards, fadeout 0.5s 8s ease-in-out forwards;
}

.sky-container img {
  width: 100%;
  height: 300px;
}

.question-container {
  width: 40vw;
  top: 30px;
  left: calc(30vw);
  transform: translateY(30px);
  opacity: 0;
  animation: fadeinUp 0.5s 6.5s ease-in-out forwards, fadeoutDown 0.5s 8s ease-in-out forwards;
}

@media only screen and (max-width: 725px) {
  .question-container {
    width: 70vw;
    left: calc(15vw);
  }  
}

.airplane-container {
  width: 45vw;
  min-width: 200px;
  max-width: 700px;
  z-index: 2;
  bottom: 100px;
  transform: translateX(-100vw);
  animation: airplaneFlyin 4s ease-out forwards, airplaneFlyout 2.5s 5s ease-in forwards;
}

.airplane-container img {
  transform: translateY(0px);
  animation: airplaneUpDown 2s ease-in-out infinite;
}

.pisa-container {
  width: 15vw;
  min-width: 50px;
  max-width: 85px;
  z-index: 1;
  bottom: 0;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 2.5s forwards;
}

.colosseum-container {
  width: 40vw;
  min-width: 200px;
  max-width: 300px;
  z-index: 1;
  bottom: -24px;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 3s forwards;
}

.eiffel-container {
  width: 30vw;
  min-width: 70px;
  max-width: 130px;
  z-index: 1;
  bottom: -10px;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 3.5s forwards;
}

.big-ben-container {
  width: 12vw;
  min-width: 20px;
  max-width: 47px;
  z-index: 1;
  bottom: -10px;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 4s forwards;
}

.liberty-container {
  width: 18vw;
  min-width: 70px;
  max-width: 120px;
  z-index: 1;
  bottom: -10px;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 4.5s forwards;
}

.sphinx-container {
  width: 60vw;
  min-width: 400px;
  max-width: 600px;
  z-index: 1;
  bottom: -130px;
  left: calc(100vw);
  transform: translateX(100vw);
  animation: passThrough 3.5s 5s forwards;
}

@media only screen and (max-width: 767px) {
  .sphinx-container {
    bottom: -100px;
  }
}

.card-wrapper {
  bottom: 10px;
  height: 200px;
  width: 100vw;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.card-container {
  height: 200px;
  width: fit-content;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeinUp 0.6s 8s ease-in-out forwards;
}

.card-container .card {
  height: 200px !important;
  width: auto !important;
}

@media only screen and (max-width: 725px) {
  .card-container {
    width: 100vw;
  }

  .card-container .card {
    position: absolute;
    bottom: 0;
    height: auto !important;
    max-height: 200px;
    width: 100vw !important;
  }
}

.card-container .sights {
  width: 30vw !important;
  min-width: 90px;
  max-width: 180px;
  position: absolute;
  top: 10px;
  right: -10px;
}

@media only screen and (max-width: 725px) {
  .card-container .sights {
    width: 30vw !important;
    top: unset;
    bottom: 10px;
    right: -10px;
  }
}

.gradient-container {
  bottom: 0;
  width: 100vw;
  height: 100px;
  background: linear-gradient(0deg, rgba(54,54,78,1) -70%, rgba(0,0,0,0) 50%);
  z-index: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeinUp 0.4s 8s ease-in-out forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.8;
  }
}

@keyframes fadeout {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeinUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeoutDown {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes airplaneFlyin {
  0% {
    transform: translateX(-100vw);
  }

  100% {
    transform: translateX(20vw);
  }
}

@keyframes airplaneFlyout {
  0% {
    transform: translateX(20vw);
  }

  100% {
    transform: translateX(120vw);
  }
}

@keyframes airplaneUpDown {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-7px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes passThrough {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-200vw);
  }
}

@media only screen and (max-width: 767px) {
  @keyframes passThrough {
    0% {
      transform: translateX(100vw);
    }
  
    100% {
      transform: translateX(-300vw);
    }
  }
}

@keyframes shrinkHeight {
  0% {
    height: 300px;
  }

  100% {
    height: 210px;
  }
}

body {
  background-image: url('img/website-mockup.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 200vh;
  overflow-y: scroll;
}