body {
background-color: #fbfbfb;
}

.carousel { overflow: visible; padding-bottom: 14rem !important; }
@media (min-width: 420px) {
  .carousel { padding-bottom: 10rem !important; }
}
@media (min-width: 576px) {
  .carousel { padding-bottom: 7rem !important; }
}
@media (min-width: 1200px) {
  .carousel { padding-bottom: 4rem !important; }
}
.carousel-caption { top: 100%; }
.carousel-inner { overflow: visible; margin: auto; }
.carousel-control-next, .carousel-control-prev { bottom: 6rem; }

:root {
  --bs-body-color: #666;
  --bs-heading-color: #333;
  --bs-heading-font-weight: 500;
  --bs-body-font-family: "Open Sans",Arial,sans-serif;
  --bs-body-font-weight: 300;
}

.ssrf {
  color: rgb(52,101,164);
  font-weight: 500;
}
.accordion-header a {
  text-decoration: none;
  color: rgba(32,74,135,1);
}
.face-button {
  height: 64px;
  display: inline-block;
  border: 3px solid rgba(32,74,135,1);
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: rgba(32,74,135,1);
  overflow: hidden;
  border-radius: 14px;
  .icon {
    margin-right: 6px;
  }

  .face-primary,
  .face-secondary {
    display: block;
    padding: 0 32px;
    line-height: 64px;
    transition: margin .4s;
  }

  .face-primary {
    background-color: rgba(32,74,135,1);
    color: #fff;
  }

  &:hover .face-primary {
    margin-top: -64px;
  }
}