/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/



#page5 {
  min-height: 100vh;
  width: 100%;
  padding-top: 17vh;
}

.elem {
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: -1vw;
  margin-top: -1vw;
  overflow:hidden;

}

.elem h1 {
  font-size: 7vw;
  -webkit-text-stroke: 1px #ffffffc4;
  font-weight: 100;
  text-transform: uppercase;
  color: transparent;
  display: inline-block;
  -webkit-animation-name: anime2;
          animation-name: anime2;
  -webkit-animation-duration: 62s;
          animation-duration: 62s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  margin-bottom: -1vw;

}

@-webkit-keyframes anime2 {
  from {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - 4px));
            transform: translateX(calc(-100% - 4px));
  }
}

@keyframes anime2 {
  from {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - 4px));
            transform: translateX(calc(-100% - 4px));
  }
}

.elem2 {
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: -1vw;
  overflow:hidden;

  margin-top: -1vw;
}

.elem2 h1 {
  font-size: 7vw;
  -webkit-text-stroke: 1px #ffffffc4;
  font-weight: 100;
  text-transform: uppercase;
  color: transparent;
  display: inline-block;
  -webkit-transform: translateX(calc(-100% - 4px));
      -ms-transform: translateX(calc(-100% - 4px));
          transform: translateX(calc(-100% - 4px));
  -webkit-animation-name: anime2;
          animation-name: anime2;
  -webkit-animation-duration: 62s;
          animation-duration: 62s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  animation-direction: reverse;
  margin-bottom: -1vw;
}
/* 
@keyframes anime3{
  from{
    transform: translateX(calc(-100% - 4px))
  }
  to{
    transform: translate(0);

  }
} */

.elem span {
  font-style: italic;
  font-family: "silk serif";
  color: transparent;
}
.elem2 span {
  font-style: italic;
  font-family: "silk serif";
  color: transparent;
}



/* making it responsive */

@media(max-width:600px){
  

#page5 {
  min-height: 40vh;
  width: 100%;
  padding-top: 15vh;
  /* padding-bottom: -15vh; */
  /* margin-bottom: -20vh; */
}

.elem {
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: -1vw;
  margin-top: -1vw;
  overflow:hidden;

}

.elem h1 {
  font-size: 7vw;
  -webkit-text-stroke: 1px #ffffffc4;
  font-weight: 100;
  text-transform: uppercase;
  color: transparent;
  display: inline-block;
  -webkit-animation-name: anime2;
          animation-name: anime2;
  -webkit-animation-duration: 62s;
          animation-duration: 62s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  margin-bottom: -1vw;

}

@-webkit-keyframes anime2 {
  from {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - 4px));
            transform: translateX(calc(-100% - 4px));
  }
}

@keyframes anime2 {
  from {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  to {
    -webkit-transform: translateX(calc(-100% - 4px));
            transform: translateX(calc(-100% - 4px));
  }
}

.elem2 {
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: -1vw;
  overflow:hidden;

  margin-top: -1vw;
}

.elem2 h1 {
  font-size: 7vw;
  -webkit-text-stroke: 1px #ffffffc4;
  font-weight: 100;
  text-transform: uppercase;
  color: transparent;
  display: inline-block;
  -webkit-transform: translateX(calc(-100% - 4px));
      -ms-transform: translateX(calc(-100% - 4px));
          transform: translateX(calc(-100% - 4px));
  -webkit-animation-name: anime2;
          animation-name: anime2;
  -webkit-animation-duration: 62s;
          animation-duration: 62s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  animation-direction: reverse;
  margin-bottom: -1vw;
}
/* 
@keyframes anime3{
  from{
    transform: translateX(calc(-100% - 4px))
  }
  to{
    transform: translate(0);

  }
} */

.elem span {
  font-style: italic;
  font-family: "silk serif";
  color: transparent;
}
.elem2 span {
  font-style: italic;
  font-family: "silk serif";
  color: transparent;
}
}