button:hover {
  cursor: pointer;
}

.btn {
  border-radius: 1.6em;
  padding: 0.5rem 2rem;
}

.btn-primary {
  background-color: #f02d54;
  border-color: #f02d54;
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #c30e31;
  border-color: #c30e31;
}

.btn-white-outline {
  background-color: rgba(255, 255, 255, 0);
  border-color: #fff;
  color: #fff;
}

.btn-white-outline:hover, .btn-white-outline:focus, .btn-white-outline:active {
  color: #F24567;
  background-color: white;
  border-color: #F24567;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'Merriweather', serif;
}

.easys-color {
  color: #8D1930;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #8D1930;
  font-size: 2rem;
  margin-bottom: 2rem;
}

section#home {
  background: #6dd2e3;
  height: 100vh;
  width: 100%;
  color: white;
}

@media (min-width: 1px) and (max-width: 991.98px) {
  section#home {
    background-image: url("../images/easys-mobile.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

section#home h1 {
  font-size: 3rem;
}

section#home span#free {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
}

section#home a {
  color: white;
  text-decoration: underline;
  font-size: 12px;
  font-style: italic;
}

section#home img#rocket {
  transform: translateX(9%);
}

section#home img#cloud {
  transform: translateY(-30%);
}

section#home img#top-cloud {
  transform: translateY(15%);
}

section#benefits,
section#security,
section#contact {
  padding: 5rem 0px;
}

section#benefits h1,
section#security h1,
section#contact h1 {
  font-size: 3rem;
  color: #8D1930;
}

section#benefits a,
section#security a,
section#contact a {
  color: #8D1930;
}

section#testimonials {
  background: #FAFAFA;
  padding: 2rem 0px;
  color: #7D7D7D;
}

section#cta {
  background: #53B8CA;
  padding: 2rem 0px;
  color: white;
  font-size: 1.8rem;
}

section#cta p {
  font-family: 'Lato', sans-serif;
}

footer {
  padding: 1rem 0px;
  background: #FAFAFA;
  color: #7D7D7D;
}

footer #social-icons {
  padding: 1rem 0px;
}

footer .text-sm {
  font-size: 12px;
}

footer a {
  padding: 0px 1rem;
  color: #7D7D7D;
}

section#confirmacion {
  background: #FAFAFA;
  height: 100vh;
  width: 100%;
  color: white;
}

section#confirmacion .jumbotron {
  background: white;
}

section#confirmacion h1 {
  font-size: 2rem;
  color: #8D1930;
  margin-bottom: 1rem;
}

section#confirmacion p {
  color: #646564;
}

.top-cloud-anim {
  animation: top-cloud-frames ease 30s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
}

@keyframes top-cloud-frames {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  15% {
    transform: translate(-25px, 0px) rotate(-5deg);
  }
  30% {
    transform: translate(20px, 0px) rotate(3deg);
  }
  45% {
    transform: translate(-15px, 0px) rotate(-3deg);
  }
  60% {
    transform: translate(10px, 0px) rotate(2deg);
  }
  75% {
    transform: translate(-5px, 0px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.bottom-cloud-anim {
  animation: bottom-cloud-frames ease 20s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes bottom-cloud-frames {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  15% {
    transform: translate(-25px, 0px) rotate(-5deg);
  }
  30% {
    transform: translate(20px, 0px) rotate(3deg);
  }
  45% {
    transform: translate(-15px, 0px) rotate(-3deg);
  }
  60% {
    transform: translate(10px, 0px) rotate(2deg);
  }
  75% {
    transform: translate(-5px, 0px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.rocket-anim {
  animation: rocket-frames ease 10s;
  animation-iteration-count: infinite;
  transform-origin: 100% 100%;
}

@keyframes rocket-frames {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(3deg);
  }
  40% {
    transform: rotate(-3deg);
  }
  60% {
    transform: rotate(1.5deg);
  }
  80% {
    transform: rotate(-1.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}