@media screen and (min-width: 600px) {
.reveal{
  padding: 150px;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}
.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}
     
#header .reveal{
  padding: 250px;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}
#header .reveal.active{
  transform: translateY(0px);
  opacity: 1;
}
}
 

 @media screen and (max-width: 601px) {
.reveal{
  padding: 30px;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}
.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}
     
    #header .reveal{
  padding-top: 250px;
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}
#header .reveal.active{
  transform: translateY(0px);
  opacity: 1;
}
}