.mission {
  width: 100vw;
  position:fixed;
  top: 40vh;
  height: 18rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-text{
  color:rgb(255, 255, 255);
  letter-spacing: 2rem;
  line-height: 6rem;
  font-size: 5rem;
  pointer-events: none;
}

.item1, 
.item2, 
.item3 {
  display: inline-block;
  text-align: center;
	position: relative;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item1{
	animation-name: anim-1;
  transform:translateY(6rem);
}

.item2{
	animation-name: anim-2;

}

.item3{
	animation-name: anim-3;
  transform:translateY(-6rem);
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 0; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 0 ; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100vw; opacity: 0; }
  74.96%, 91.62% { left: 0; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@media(max-width: 1280px){

.item-text {
  color:rgb(255, 255, 255);
  letter-spacing: 1rem;
  font-size: 3rem;
  pointer-events: none;
  }
}

@media(max-width: 800px){

  .item-text {
    color:rgb(255, 255, 255);
    letter-spacing: 0.5rem;
    font-size: 1.5rem;
    pointer-events: none;
    }
    .mission {
      top: 30vh;
    }
  }

  @media(max-height: 640px){
  .mission {
    top: 15vh;
  }
}