.uniqueness {
  width: 100vw;
  height: calc(100vh - 100px);
  background: linear-gradient(to right, #001C21 40%, #158B93 85%, #040000 100%);
  overflow: hidden;
}

@media (min-width: 992px) {
  .uniqueness {
    width: 50vw;
    height: 100%;
  }
}

.story-tag {
  width: 100%;
  height: 60px;
  padding: 10px;
  font-size: 1.3em;
  color: #fff;
  text-align: center;
  border-bottom: 2px solid #040000;
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55%, 70% {
    opacity: 0;
  }
}


@media (min-width: 768px) {
  .story-tag {
    font-size: 2em;
  }
}

.journey {
  width: 100%;
  height: calc(100vh - 160px);
  position: relative;
  padding: 20px;
}

.plane-icon {
  width: 50px;
  color: white;
  position: absolute;
  font-size: 3em;
  animation: fly 12s infinite;
}

.paper-plane-img {
  width: 100%;
  height: 100%;
}

@keyframes fly {
  0% {
    top: 60%;
    left: 4%;
  }
  20% { 
    top: 30%;
    left: 15%;
    transform: rotate(20deg);
  }
  40% {
    top: 4%;
    left: 40%;
    transform: rotate(40deg);
  }
  60% {
    top: 50%;
    left: 53%;
    transform: rotate(120deg);
  }
  80% {
    top: 74%;
    left: 40%;
    transform: rotate(180deg);
  }
  100% {
    top: 32%;
    left: 76%;
    transform: rotate(-45deg);
  }
}



.journey-start {
  display: inline-block;
  position: absolute;
  width: 20%;
  top: 70%;
  left: 8%;
}

@media (min-width: 768px) {
  .journey-start {
    width: 15%;
  }
}

@media (min-width: 1024px) {
  .journey-start {
    width: 10%;
  }
}

.traveller-img {
  width: 100%;
}

.G-chord,
.E-minor-chord,
.C-chord,
.D-chord {
  display: inline;
  position: absolute;
  cursor: pointer;
  transition: cursor 0.3s ease-in-out;
}

.G-chord {
  top: 24%;
  left: 15%;
}

.E-minor-chord {
  top: 4%;
  left: 40%;
}

.C-chord {
  top: 50%;
  left: 53%;
}

.D-chord {
  top: 74%;
  left: 40%;
}

.journey-end {
  display: inline;
  position: absolute;
  top: 25%;
  right: 5%;
  cursor: pointer;
}


.g-chord-svg,
.e-minor-svg,
.d-chord-svg {
  width: 36%;
  height: 36%;
}

.c-chord-svg {
  width: 50%;
  height: 50%;
}

@media (min-width: 768px) {
  .g-chord-svg,
  .e-minor-svg,
  .d-chord-svg {
    width: 24vw;
    height: 24vw;
  }

  .c-chord-svg {
    width: 30vw;
    height: 30vw;
  }
}

@media (min-width: 1024px) {
  .g-chord-svg,
  .e-minor-svg,
  .c-chord-svg,
  .d-chord-svg {
    width: 33%;
    height: 33%;
  }
}


.chord-pointer {
  position: absolute;
  top: 60%;
  left: 19%;
  width: 18%;
  height: 18%;
  animation: blink 1s infinite;
}

@keyframes blink {
 0% { opacity: 1;}
 50% { opacity: 0;}
 100% {opacity: 1;}
}

.usp {
  width: 38vw;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px inset #ac1e44;
  border-radius: 10px;
  transform: translate(-24%, -13%);
}

@media (min-width:768px) {
  .C-chord {
    top: 38%;
    left: 60%;
  }

  .D-chord {
    top: 65%;
    left: 40%;
  }
  
  .journey-end {
    top: 15%;
  }

  .chord-pointer {
    width: 17%;
    height: 17%;
    top: 65%;
  }

  @keyframes fly {
    0% {
      top: 60%;
      left: 4%;
    }
    20% { 
      top: 30%;
      left: 18%;
      transform: rotate(20deg);
    }
    40% {
      top: 4%;
      left: 40%;
      transform: rotate(40deg);
    }
    60% {
      top: 45%;
      left: 60%;
      transform: rotate(120deg);
    }
    80% {
      top: 65%;
      left: 42%;
      transform: rotate(180deg);
    }
    100% {
      top: 24%;
      left: 85%;
      transform: rotate(-45deg);
    }
  }

  .usp {
    width: 22vw;
    transform: translate(-20%, 20%);
  }
}

@media (min-width: 1024px) {
  .usp {
    width: 16vw;
    transform: translate(-20%, 20%);
  }
}

.usp-message {
  max-width: 100%;
  max-height: 100%;
  padding: 10px;
  text-align: center;
  background-color: #006C75;
  color: white;
}

.hidden {
  display: none;
}