#main,
body > #main {
  padding: 0;
}

.grey-bg {
  background-color: #f2f2f2;
}

.banner-carousel {
  padding: 0;
}

.banner-carousel .carousel {
  width: 100%;
  height: 500px;
}

.banner-carousel .carousel .carousel-item {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-carousel .carousel .carousel-item:first-child {
  background-image: url("/images/backgrounds/bg-opt-4-blue.svg");
}

.banner-carousel .carousel .carousel-item:nth-child(2) {
  background-image: url("/images/backgrounds/bg-opt-3-red.svg");
}

.banner-carousel .carousel .carousel-item:nth-child(3) {
  background-image: url("/images/backgrounds/bg-opt-2-yellow.svg");
}

.banner-carousel .carousel .carousel-item:nth-child(4) {
  background-image: url("/images/backgrounds/bg-opt-1-black.svg");
}

.banner-carousel .carousel .carousel-item .carousel-content {
  padding: 40px 40px;
  max-width: 70%;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-carousel .carousel .carousel-item .carousel-content h2 {
  color: #ffffff;
  font-size: 70px;
}

.banner-carousel .carousel .carousel-item .carousel-content p {
  color: #ffffff;
}

.banner-carousel .carousel .carousel-item .carousel-content .button {
  width: 110px;
}

@media (max-width: 767px) {
  .banner-carousel .carousel .carousel-item .carousel-content .button {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .banner-carousel .carousel .carousel-item .carousel-content .button {
    width: 100%;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .banner-carousel .carousel .carousel-item .carousel-content .button {
    width: 110px;
  }
}

@media (max-width: 767px) {
  .banner-carousel .carousel .carousel-item .carousel-content {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .banner-carousel .carousel .carousel-item .carousel-content {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .banner-carousel {
    margin-top: 0px;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .banner-carousel {
    margin-top: 0px;
  }
}

.introduction {
  text-align: center;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .introduction {
    padding-top: 40px;
  }
}

.introduction p {
  padding: 0 15em;
}

@media (max-width: 767px) {
  .introduction p {
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .introduction p {
    padding: initial;
  }
}

.introduction .key-feature {
  margin: 0 10px;
}

.introduction .key-feature .content {
  padding: 0;
}

section {
  padding-top: 80px;
  padding-bottom: 80px;
}

section h2 {
  font-size: 3rem;
  line-height: 25px;
  margin-top: 0;
  margin-bottom: 25px;
}

section ol {
  counter-reset: listCounter;
  list-style: circle;
  display: table;
  padding: 0;
}

section ol li {
  display: block;
}

section ol li:before {
  counter-increment: listCounter;
  content: counter(listCounter);
  color: #333333;
  border: 2px solid #333333;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 15px;
  width: 20px;
  padding-right: 1px;
}

section ol li:not(:last-of-type) {
  margin-bottom: 5px;
}

section span {
  font-size: 10px;
  text-transform: uppercase;
}

section .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section .bundle-cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section .bundle-cards .card {
  width: 100%;
}

section .bundle-cards .card:not(:last-of-type) {
  margin-right: 20px;
}

section .col-image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

section .content-right,
section .image-right {
  padding-left: 20px;
}

section .content-left,
section .image-left {
  padding-right: 20px;
}

section a {
  margin-top: 15px;
}

@media (max-width: 767px) {
  section a {
    width: 100%;
  }
}

.products-cards {
  display: flex;
  align-items: center;
}

.products-cards a {
  width: 16.6666666667%;
  margin-right: 20px;
}

.products-cards a:last-of-type {
  margin-right: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .products-cards {
    flex-wrap: wrap;
  }
}

.steps,
.view-products {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media screen and (min-width: 768px) {
  .steps {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .steps .col {
    flex: 1 auto !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .container-inner {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  #section-sign-up {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  #section-sign-up .cols {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  #section-sign-up .cols .col-6 {
    flex: 1 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #section-sign-up .cols .col-image {
    margin-top: 80px;
  }
}

@media (max-width: 767px) {
  #section-sign-up .content-left {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  #section-sign-up .image-right {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  #section-sign-up ol {
    width: 100%;
  }
}

@media (max-width: 767px) {
  #section-sign-up img {
    display: block;
    height: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  #section-browse-our-products .cols {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  #section-browse-our-products .cols .col-6 {
    flex: 1 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #section-browse-our-products .cols .col-6 .content-right {
    padding: 0;
  }
}

@media (max-width: 767px) {
  #section-browse-our-products .cols .col-image {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  #section-browse-our-products img {
    display: block;
    height: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  #section-register-an-app {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  #section-register-an-app .cols {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  #section-register-an-app .cols .col-6 {
    flex: 1 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #section-register-an-app .cols .col-image {
    margin-top: 80px;
  }
}

@media (max-width: 767px) {
  #section-register-an-app .cols .col-image .image-right {
    padding: 0;
  }
}

@media (max-width: 767px) {
  #section-register-an-app img {
    display: block;
    height: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys .cols {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys .cols .col-6 {
    flex: 1 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys .cols .col-image {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys .content-right {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys .image-left {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  #section-access-the-keys img {
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  #section-product-categories .products-cards {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  #section-product-categories .products-cards a {
    margin-right: 0;
    width: 100%;
  }
}


