.parallax.cd-intro-content * {
  /* overwrite default style */
  opacity: 1;
}

.parallax.cd-intro-content h1 span,
.parallax.cd-intro-content p span {
  position: relative;
  display: inline-block;
  padding: .5em 1em;
  /* span text is not visible */
  color: transparent;
}
.parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content p span::before,
.parallax.cd-intro-content p span::after {
  position: absolute;
  left: 0;
  width: 100%;
}
.parallax.cd-intro-content h1 span::before,
.parallax.cd-intro-content p span::before {
  /* this is used to create the background colored layer */
  content: '';
  height: 100%;
  top: 0;
  background-color: #202e4a;
}
.parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content p span::after {
  /* this is used to create the text */
  content: attr(data-content);
  top: .5em;
}

.parallax.cd-intro-content h1 {
  font-size: 2.2rem;
}
.parallax.cd-intro-content h1 span::after {
  color: #ffffff;
}
@media only screen and (min-width: 768px) {
  .parallax.cd-intro-content h1 {
    font-size: 5.4rem;
  }
}

.parallax.cd-intro-content p span::after {
  color: #6d7a97;
}

.parallax .cd-btn {
  color: #202e4a;
  background-color: #ffffff;
  margin-top: .6em;
  /* overwrite default style */
  border-radius: 0;
  margin-right: 0;
}
.parallax .cd-btn.main-action {
  background-color: #fb5e58;
  color: #ffffff;
  padding: 1.8em 2.2em;
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .parallax .cd-btn.main-action {
    padding: 2em 3em;
  }
}

.parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content h1 span::before,
.parallax.cd-intro-content p span::after,
.parallax.cd-intro-content p span::before,
.parallax.cd-intro-content .cd-btn {
  -webkit-animation-name: cd-slide-up;
  -moz-animation-name: cd-slide-up;
  animation-name: cd-slide-up;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

.parallax.cd-intro-content h1 span::after {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.parallax.cd-intro-content h1 span::before {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.parallax.cd-intro-content p span::after {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.parallax.cd-intro-content p span::before {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.parallax.cd-intro-content .cd-btn {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.parallax.cd-intro-content .cd-btn.main-action {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-slide-up {
  0% {
    opacity: 0;
    -moz-transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
    -moz-transform: translateY(30vh);
    -ms-transform: translateY(30vh);
    -o-transform: translateY(30vh);
    transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}