/*
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){color: white;}
section:nth-child(2){color: black;background: #ccc;} 
section:nth-child(3){color: white;background: teal;}
section:nth-child(4){color: black;background: pink;}

section .container{
  margin: 100px; border: solid 1px red;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
    border: solid 1px yellow;
}
section .text-container .text-box{
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}
*/

.reveal{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}


.revealH2{
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 0.4s all ease;
}

.revealImage1,.revealImage2,.revealImage3,.revealImage4{
  position: relative;
  opacity: 0;
  transition: 0.4s all ease;
}

.revealImage1 {transform: translateY(150px);transition-delay: 0.3s}
.revealImage2 {transform: translateY(150px);transition-delay: 0.4s}
.revealImage3 {transform: translateY(150px);transition-delay: 0.5s}
.revealImage4 {transform: translateY(150px);transition-delay: 0.6s}

@media (max-width: 640px) {
.revealH2{position: relative;transform: translateX(20px);opacity: 1;transition: 1s all ease;}
.revealImage1 {transform: translateY(50px);transition-delay: 0.3s}
.revealImage2 {transform: translateY(50px);transition-delay: 0.4s}
.revealImage3 {transform: translateY(50px);transition-delay: 0.5s}
.revealImage4 {transform: translateY(50px);transition-delay: 0.6s}
}

.revealH2.active,
.revealImage1.active,
.revealImage2.active,
.revealImage3.active,
.revealImage4.active{
  transform: translateY(0);
  opacity: 1;
}

.revealText{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 0.9s all ease;
}

.revealText.active{
  transform: translateY(0);
  opacity: 1;
}

.revealButton{
  position: relative;
  /* transform: translateY(30px); */
  opacity: 0;
  transition: 2s all ease;
  transition-delay: 0.2s;
}

.revealButton.active{
  /* transform: translateY(0); */
  opacity: 1;
}