@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,300,400);
/* --------------------- Variables --------------------- */
/* ------------- Primary styles -------------- */
html {
  font-family: "Open Sans", sans-serif !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  font-weight: 300;
}

.container {
  text-align: center !important;
}
.container img {
  display: inline-block;
  text-align: center;
}

.content {
  padding: 20px 0 40px 0;
  overflow: hidden;
}

/* ---------- Main ---------- */
.section {
  color: white;
}

.purple {
  background-color: #2a1d34;
  background-image: url(../images/small-1.jpg);
}
.purple .content {
  padding-bottom: 0;
}
.purple .content .navigation .nav-btn {
  background-color: #493f50;
  border: none;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
}
.purple .content .navigation .nav-btn:hover {
  background-color: #63556d;
}
.purple .content .logo {
  margin: 40px 0;
}
.purple .content .hero-info {
  font-size: 35px;
  color: white;
  margin: 0 auto;
  line-height: 1.2;
  font-weight: 300;
}
.purple .content .hero-info span {
  font-weight: 900;
}

.pink {
  background-color: #ca3e4f;
  background-image: url(../images/small-2.jpg);
}
.pink .content {
  padding-bottom: 40px;
}
.pink .content h2 {
  color: white;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 10px;
}
.pink .content .form-container {
  margin: 0 auto;
}
.pink .content .form-container form {
  text-align: center;
}
.pink .content .form-container form .icaptcha {
  display: inline-block;
}

.cyan {
  background-color: #34b59d;
  background-image: url(../images/small-3.jpg);
}
.cyan .content {
  padding-bottom: 0;
  padding-top: 0;
}
.cyan .content .details {
  margin-bottom: 40px;
}
.cyan .content .details h4 {
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 20px;
}
.cyan .content .details .icon-1 {
  background-image: url(../images/spider-icon.png);
  width: 53px;
  height: 47px;
  display: inline-block;
}
.cyan .content .details .icon-2 {
  background-image: url(../images/lock-icon.png);
  width: 33px;
  height: 51px;
  display: inline-block;
}
.cyan .content .details .icon-3 {
  background-image: url(../images/settings-icon.png);
  width: 42px;
  height: 41px;
  display: inline-block;
}
.cyan .content .details p {
  font-size: 17px;
  margin-bottom: 20px;
}
.cyan .content .details p a {
  color: white;
  text-decoration: underline;
}
.cyan .content .details p a:hover {
  text-decoration: none;
}
.cyan .content .details p:last-child {
  margin-bottom: 0;
}
.cyan .content .details:last-child {
  margin-bottom: 0;
}

.purple-2 {
  background-color: #2a1d34;
  background-image: url(../images/small-1.jpg);
}
.purple-2 .content {
  padding: 35px 0;
}
.purple-2 .content .social-info h2 {
  font-size: 24px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.purple-2 .content .social-info p {
  font-size: 22px;
}
.purple-2 .content .social-info ul {
  margin: 20px 0 0 0;
}
.purple-2 .content .social-info ul li {
  display: inline-block;
  margin-right: 2%;
}
.purple-2 .content .social-info ul .tw a {
  background-image: url(../images/twitter.png);
  width: 64px;
  height: 63px;
  display: inline-block;
}
.purple-2 .content .social-info ul .tw a:hover {
  opacity: 0.8;
}
.purple-2 .content .social-info ul .fb a {
  background-image: url(../images/facebook.png);
  width: 64px;
  height: 62px;
  display: inline-block;
}
.purple-2 .content .social-info ul .fb a:hover {
  opacity: 0.8;
}

.grey {
  background-color: #cacaca;
  background-image: url(../images/small-4.jpg);
}
.grey .content {
  color: #2a1d34;
}
.grey .content .how-to-use h2 {
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 800;
}
.grey .content .how-to-use h2 span {
  color: #ca3e4f;
}
.grey .content .how-to-use .sub-head {
  font-size: 18px;
  margin: 20px 0;
}
.grey .content .how-to-use .sub-head a {
  text-decoration: underline;
  color: #2a1d34;
}
.grey .content .how-to-use .steps {
  width: 100%;
  margin: 0 auto;
}
.grey .content .how-to-use .steps h3 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
}
.grey .content .how-to-use .steps .one {
  margin-bottom: 20px;
}
.grey .content .how-to-use .steps .one p a {
  background-color: #2a1d34;
  color: white;
}
.grey .content .how-to-use .steps .two p, .grey .content .how-to-use .steps .three p, .grey .content .how-to-use .steps .four p {
  margin-bottom: 20px;
}
.grey .content .how-to-use .steps .two .list, .grey .content .how-to-use .steps .three .list, .grey .content .how-to-use .steps .four .list {
  width: 100%;
  margin: 0 auto;
}
.grey .content .how-to-use .steps .two .list li, .grey .content .how-to-use .steps .three .list li, .grey .content .how-to-use .steps .four .list li {
  text-align: left;
}
.grey .content .how-to-use .steps .two .text, .grey .content .how-to-use .steps .three .text, .grey .content .how-to-use .steps .four .text {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

.purple-3 {
  background-color: #2a1d34;
  background-image: url(../images/small-1.jpg);
}
.purple-3 .content {
  padding-top: 0;
}
.purple-3 .content .foots h3 {
  font-size: 35px;
  font-weight: 300;
  margin-top: 0;
}
.purple-3 .content .foots h3 a {
  text-decoration: underline;
  color: white;
}
.purple-3 .content .foots p {
  font-size: 16px;
  margin-bottom: 0;
}

.purple:after {
  content: "";
  height: 62px;
  background: url("../images/d1.png") no-repeat;
  background-size: cover;
  display: block;
}

.pink:after {
  content: "";
  height: 61px;
  background: url("../images/d2.png") no-repeat;
  background-size: cover;
  display: block;
}

.purple-2:before {
  content: "";
  height: 61px;
  background: url("../images/d3.png") no-repeat;
  background-size: cover;
  display: block;
}

.purple-2:after {
  content: "";
  height: 50px;
  background: url("../images/d4.png") no-repeat;
  background-size: cover;
  display: block;
}

.grey:after {
  content: "";
  height: 62px;
  background: url("../images/d5.png") no-repeat;
  background-size: cover;
  display: block;
}

@media (min-width: 992px) {
  .cyan .content {
    padding-top: 0;
  }
  .cyan .content .details {
    margin-bottom: 0;
  }
  .cyan .content .details:first-child, .cyan .content .details:last-child {
    margin-top: 6px;
  }

  .grey .content .how-to-use .steps {
    width: 80%;
  }
  .grey .content .how-to-use .steps .two .list, .grey .content .how-to-use .steps .three .list, .grey .content .how-to-use .steps .four .list {
    width: 55%;
  }
  .grey .content .how-to-use .steps .two .text, .grey .content .how-to-use .steps .three .text, .grey .content .how-to-use .steps .four .text {
    width: 65%;
  }

  .purple:after {
    height: 90px;
  }

  .pink:after {
    height: 90px;
  }

  .purple-2:before {
    height: 80px;
  }

  .purple-2:after {
    height: 61px;
  }

  .grey:after {
    height: 90px;
  }
}