/*******************************************/
/* Global
/*******************************************/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  box-shadow: 0 0 0 30px white inset !important;
}

/*******************************************/
/* Loader
/*******************************************/
.sabbi-loader {
  background: radial-gradient(
    102.39% 102.39% at -1.07% -1.1%,
    rgba(97, 0, 209, 0.9) 0%,
    rgba(129, 245, 214, 0.9) 100%
  );
  /* background-color: rgba(255, 255, 255, .92); */
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: center;
}
.sabbi-loader .sabbi-loader-content {
  width: 100%;
}
.sabbi-loader .sabbi-loader-content p {
  text-align: center;
  /* color: #6400a9; */
  color: white;
  font-weight: 900;
  margin: 2rem 0;
}

/*******************************************/
/* Fonts
/*******************************************/
@font-face {
  font-family: "Cera Round Pro Bold";
  src: url("../fonts/sabbi/typemates__cera_round_pro_bold-webfont.woff2")
      format("woff2"),
    url("../fonts/sabbi/typemates__cera_round_pro_bold-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cera Round Pro Black";
  src: url("../fonts/typemates__ceraroundproblack-webfont.woff2")
      format("woff2"),
    url("../fonts/typemates__ceraroundproblack-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cera Round Pro Light";
  src: url("../fonts/sabbi/typemates__ceraroundprolight-webfont.woff2")
      format("woff2"),
    url("../fonts/sabbi/typemates__ceraroundprolight-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cera Round Pro Medium";
  src: url("../fonts/sabbi/typemates__ceraroundpromedium-webfont.woff2")
      format("woff2"),
    url("../fonts/sabbi/typemates__ceraroundpromedium-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cera Round Pro Regular";
  src: url("../fonts/sabbi/typemates__ceraroundproregular-webfont.woff2")
      format("woff2"),
    url("../fonts/sabbi/typemates__ceraroundproregular-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cera Round Pro Thin";
  src: url("../fonts/sabbi/typemates__ceraroundprothin-webfont.woff2")
      format("woff2"),
    url("../fonts/sabbi/typemates__ceraroundprothin-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}
.font-cera-round-pro-regular {
  font-family: "Cera Round Pro Regular", sans-serif;
}
.font-cera-round-pro-medium {
  font-family: "Cera Round Pro Medium", sans-serif;
}
.font-cera-round-pro-bold {
  font-family: "Cera Round Pro Bold", sans-serif;
}

/*******************************************/
/* Sabbi Icons
/*******************************************/
@font-face {
  font-family: "sabbi-icons";
  src: url("../icons/font/sabbi-icons.eot?65567049");
  src: url("../icons/font/sabbi-icons.eot?65567049#iefix")
      format("embedded-opentype"),
    url("../icons/font/sabbi-icons.woff?65567049") format("woff"),
    url("../icons/font/sabbi-icons.ttf?65567049") format("truetype"),
    url("../icons/font/sabbi-icons.svg?65567049#sabbi-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
.demo-icon {
  font-family: "sabbi-icons";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;

  /* You can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/*******************************************/
/* General
/*******************************************/
body {
  font-family: "Cera Round Pro Regular", sans-serif;
}
body,
button,
input,
select,
textarea {
  font-family: "Cera Round Pro", sans-serif;
}
.btn {
  background-color: #6400a9;
  text-transform: unset;
  padding: 4px 10px;
  color: white;
  max-width: unset;
  min-width: unset;
}
.btn--purple {
  background-color: #6400a9;
}
.btn--cyan {
  background-color: #81f5d6;
}
.btn--blue,
.btn--white:hover {
  background-color: #6400a9;
}
.btn--recovery {
  color: black !important;
}
.btn--link {
  color: white !important;
}
.btn--link--blue {
  color: white !important;
}
.card .card__body .card__icon img {
  filter: invert(5%) sepia(100%) saturate(6693%) hue-rotate(270deg)
    brightness(96%) contrast(104%);
}
.card.card--bg {
  background: #6400a9;
}
.card.active {
  background-color: #6400a9 !important;
}
.wp h1,
.wp h2,
.wp h3,
.wp h4,
.wp h5 {
  color: #6400a9;
}
.h1,
.h2,
.h3,
.h4,
.h5,
h1,
h2,
h3,
h4,
h5 {
  font-family: "Cera Round Pro Regular", sans-serif;
}
.slider.slider--steps .slider-navigation .slider-nav {
  background: #6400a9;
}
@media screen and (min-width: 720px) {
  .section__thumbs {
    background: radial-gradient(
      103.34% 137.84% at -2.38% 38.1%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
  }
  .section__thumbs .section__thumb {
    background-color: transparent;
  }
}
.modal .modal__back {
  background: radial-gradient(
    102.39% 102.39% at -1.07% -1.1%,
    rgba(97, 0, 209, 0.8) 0%,
    rgba(129, 245, 214, 0.8) 100%
  );
}
.modal .modal__box {
  background-color: #ffffff;
  border-radius: 20px;
  -webkit-box-shadow: 8px 8px 24px 12px rgba(0, 0, 0, 0.24);
  box-shadow: 8px 8px 24px 12px rgba(0, 0, 0, 0.24);
}
@media screen and (min-width: 720px) {
  .modal .modal__box {
    background: #ffffff;
  }
}
@media screen and (max-width: 1150px) {
  section
    .section__header
    .section__tabs
    .section__tab:not(.section__tab--current)
    .text {
    display: none;
  }
  section
    .section__header
    .section__tabs
    .section__tab:not(.section__tab--current) {
    margin-right: 0;
  }
  section
    .section__header
    .section__tabs
    .section__tab:not(.section__tab--current)
    span {
    margin-right: 5px;
  }
}

/*******************************************/
/* Header
/*******************************************/
header.header--app {
  margin-top: 0;
}
.form__element .form__input input,
.form__element .form__input select {
  border-radius: 100px;
}

header {
  background: #6400a9;
}
@media screen and (min-width: 1150px) {
  header .header__logo {
    margin-top: 0;
  }
  header .header__nav ul li a,
  header .header__nav ul li.header__nav__user span {
    padding: 8px 6px;
    color: #8a00e6;
  }
  header .header__nav ul li:after {
    background: #81f5d6;
  }
  header .header__nav ul li.header__nav__user ul {
    background: #6400a9;
  }
}
@media screen and (max-width: 1150px) {
  header .header__nav .header__nav__nav {
    background: #6400a9;
    display: flex;
    width: 100%;
    height: 100vh;
  }
  header .header__nav .header__nav__nav nav.header__nav__nav--mobile {
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 100vh;
    flex-wrap: nowrap;
  }
  header .header__nav .header__nav__nav ul {
    margin: 30px 0;
    width: 100%;
  }
  header .header__nav .header__nav__nav ul li a {
    padding: 4px 10px;
  }
  header .header__nav .header__nav__nav ul li .tarjeta-visa {
    display: flex;
    margin: 10px 10px 4px 10px;
    padding: 10px 10px;
    justify-content: center;
    background-color: white;
    color: #6400a9;
    border-radius: 0.5rem;
  }
  header .header__nav .header__nav__nav ul li .tarjeta-visa img {
    margin: 0 10px 0 0;
    padding: unset;
    height: 20px;
    width: auto;
  }

  header .header__nav .show {
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    position: absolute;
    transition: 0.5s;
    opacity: 1;
    min-height: 100vh;
  }

  header .flex-express,
  header .flex-result,
  header .flex-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
  }

  header .header__nav__box--express,
  header .header__nav__box--account {
    height: 100vh;
    top: 100%;
    left: 0;
    display: flex;
    transition: 0.5s;
    position: absolute;
  }
  header .header__nav__content--express,
  header .header__nav__content--login {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  header .content_service_payment {
    width: 100%;
  }
  header .header__nav__box .header__nav__box__close {
    font-size: 1.5rem;
  }
  header .loader {
    backdrop-filter: blur(6px);
    background: radial-gradient(
      102.39% 102.39% at -1.07% -1.1%,
      rgba(97, 0, 209, 0.8) 0%,
      rgba(129, 245, 214, 0.8) 100%
    );
  }
  header .loader svg {
    filter: brightness(0) invert(1);
  }
}
header .header__nav__nav--mobile ul li a,
header .header__nav__nav--mobile ul li.header__nav__user span {
  font-size: 16px;
  font-family: "Cera Round Pro Medium", sans-serif;
  color: #8a00e6;
  font-weight: 400;
}
header .header__nav__nav--mobile ul li a:hover {
  font-weight: 700;
}
header .header__nav__nav--mobile ul li.current_page_item a {
  font-weight: bold;
}
header .btn {
  text-transform: unset;
  background-color: transparent;
  border: 1px solid white;
  padding: 8px 20px;
}
header .header__nav ul.header__nav__right .btn {
  font-size: 18px;
}
.header__nav ul#menu-menu-derecha-guest li a {
  border-radius: 20px;
  font-weight: bold;
  line-height: unset;
  font-size: 16px;
  display: inline;
  vertical-align: unset;
  border: 1px solid #6400a9;
  font-family: "Cera Round Pro Medium", sans-serif;
  padding: 4px 10px;
}
.header__nav ul#menu-menu-derecha-guest li a:hover {
  background-color: #f5e7ff !important;
  font-weight: 700;
  color: #ffffff !important;
}
.header__nav ul#menu-menu-derecha-guest li a:active,
.header__nav ul#menu-menu-derecha-guest li a:focus {
  background-color: #81f5d6 !important;
  color: #8a00e6 !important;
}
.header__nav ul#menu-menu-derecha-guest li:first-child a {
  color: #fff !important;
  background-color: #6400a9;
}
.header__nav ul#menu-menu-derecha-guest li:first-child a:hover {
  background-color: #f5e7ff !important;
  color: #8a00e6 !important;
}
.header__nav ul#menu-menu-derecha-guest li:last-child a {
  border: 1px solid #6400a9;
  color: #6400a9 !important;
}
.header__nav ul#menu-menu-derecha-guest li:last-child a:hover {
  border: 1px solid #6400a9;
  background-color: #8a00e6;
}
header .header__nav ul#menu-menu-derecha-guest li:after {
  background-color: transparent;
}
@media screen and (min-width: 720px) {
  header .btn {
    padding: 6px 40px;
  }
}
header .btn--orange {
  background: white;
  color: #6400a9 !important;
}
header .header__nav__box {
  background: #6400a9;
}
header .header__ham {
  margin-right: 2px;
}
header #logged-in-user i.demo-icon {
  font-size: 24px;
}

header .header__ham span {
  background-color: #8a00e6;
}

/*******************************************/
/* Header resto del sitio
/*******************************************/
#header-not-home {
  background-color: white;
}
#header-not-home a {
  color: #8a00e6;
  font-size: 16px;
  font-family: "Cera Round Pro Medium", sans-serif;
}
header#header-not-home .header__ham span {
  background-color: #8a00e6;
}

#header-not-home .header__nav__express a {
  color: #8a00e6;
}
@media screen and (min-width: 1150px) {
  #header-not-home .header__nav ul li:after {
    background-color: #81f5d6;
  }
  #header-not-home .header__nav ul li a:hover,
  #header-not-home .header__nav ul li.current-menu-item {
    font-weight: bold;
  }
}
#header-not-home .header__nav ul#menu-menu-derecha-guest li:after {
  background-color: transparent;
}
#header-not-home .header__nav ul#menu-menu-derecha-guest li a {
  border-radius: 20px;
  font-weight: bold;
  line-height: unset;
  font-size: 16px;
  display: inline;
  vertical-align: unset;
  border: 1px solid #6400a9;
  font-family: "Cera Round Pro Medium", sans-serif;
  padding: 4px 10px;
  color: unset;
}

#header-not-home .header__nav ul#menu-menu-derecha-guest li:first-child a {
  background-color: #6400a9;
  color: #ffffff !important;
}
#header-not-home
  .header__nav
  ul#menu-menu-derecha-guest
  li:first-child
  a:hover {
  background-color: #8a00e6 !important;
  color: #fff !important;
}
#header-not-home
  .header__nav
  ul#menu-menu-derecha-guest
  li:first-child
  a:active,
#header-not-home
  .header__nav
  ul#menu-menu-derecha-guest
  li:first-child
  a:focus {
  color: #6400a9 !important;
}

#header-not-home .header__nav ul#menu-menu-derecha-guest li:last-child a {
  color: #6400a9 !important;
}
#header-not-home .header__nav ul#menu-menu-derecha-guest li:last-child a:hover {
  background-color: #f5e7ff !important;
  color: #8a00e6 !important;
}
#header-not-home #logged-in-user .sub-menu {
  background-color: #ffffff;
}
#header-not-home #logged-in-user i.demo-icon {
  font-size: 24px;
  color: #6400a9;
}

/*******************************************/
/* Header mobile
/*******************************************/
@media screen and (max-width: 1150px) {
  header .header__nav .header__nav__nav ul li a {
    color: #ffffff;
    font-size: 16px;
  }
  #header-not-home a {
    color: #ffffff;
  }
  #header-not-home .header__nav__express a {
    color: #6400a9 !important;
    background: #ffffff;
    border-radius: 100px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
  }
  #header-not-home .header__nav__express .sucursal {
    color: #fff !important;
    background: #6400a9;
  }
}

/*******************************************/
/* Sections
/*******************************************/
section {
  margin-bottom: 2rem;
}
section.section--main {
  box-shadow: none;
}
section .section__title {
  font-family: "Cera Round Pro Regular", sans-serif;
}
section .section__buttons .btn {
  background-color: white;
  color: #6400a9 !important;
  padding: 6px 10px;
}
@media screen and (min-width: 720px) {
  .section__thumbs .section__thumb .section__thumb__number {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 20px;
    right: unset;
    color: #6400a9;
    font-size: 24px;
  }
  .section__thumbs {
    border-radius: 100px;
  }
  .section__thumbs .section__thumb .section__thumb__bar {
    background-color: #6400a9;
  }
  .section--right .section__content .section__buttons {
    justify-content: end;
  }
}
section .section__buttons {
  justify-content: start;
}
section.section--views
  .section__bubbles
  .section__bubble
  .section__bubble__icon {
  background-color: #6400a9;
}
@media screen and (min-width: 960px) {
  section.section--views .section__bubbles .section__bubble {
    opacity: 0.5;
  }
  section.section--views .section__bubbles .section__bubble.current {
    background-color: transparent;
    opacity: 1;
  }
}
.section__banner,
section.section--main,
.carousel .carousel-contents,
section.section--main {
  background-color: #6400a9;
}
section.section--steps .section__header .section__title,
section.section--form .section__header .section__title {
  color: #6400a9;
}
section.section--history:after {
  background-color: #6400a9;
}

section.section--cards #menu-item-captacion-digital {
  background-color: #f5e7ff;
}
section.section--cards #menu-item-captacion-digital small {
  background-color: #6400a9;
  border-radius: 100px;
  color: #81f5d6;
  font-size: 12px;
  padding: 0 6px;
  font-weight: 500;
  font-family: "Cera Round Pro Bold", sans-serif;
}
section.section--cards #menu-item-captacion-digital span {
  display: block;
  color: #6400a9;
}
section.section--cards #menu-item-captacion-digital img {
  filter: unset;
  height: auto;
  max-height: unset;
  width: 27px;
}

/*******************************************/
/* Articles
/*******************************************/
article.article--download,
article.article--fiancial,
article.article--requirement,
article.article--benefit,
article.article--education {
  -webkit-box-shadow: 2px 2px 4px 0 rgb(100 100 100 / 25%);
  box-shadow: 2px 2px 4px 0 rgb(100 100 100 / 25%);
  background-color: #f0f0f0;
}
article.article--education .article__icon {
  text-align: center;
  margin: 2rem 0;
}
article.article--education .article__button a {
  color: #222831;
}
article.article--sav .article__icon img {
  filter: invert(5%) sepia(100%) saturate(6693%) hue-rotate(270deg)
    brightness(96%) contrast(104%);
}
.faq .faq__question:hover {
  color: #6400a9;
}
.faq.faq--purple .faq__question .fa,
.faq.faq--purple .faq__question:hover {
  color: #6400a9;
}
article.article--history:after,
article.article--requirement:after {
  background-color: #6400a9;
}
article.article--fiancial .article__number {
  background-color: #6400a9;
}

/*******************************************/
/* Footer
/*******************************************/
footer {
  background-color: #6400a9;
}
footer .footer__social {
  margin-top: 2rem;
}
footer .footer__social ul li a {
  background-color: white;
  color: #6400a9;
  text-align: center;
  border-radius: 100px;
  width: 42px;
  height: 42px;
  opacity: 1;
  border: 1px solid white;
}
footer .footer__social ul li a:hover {
  background-color: #6400a9;
  border: 1px solid white;
}

/*******************************************/
/* Contratos
/*******************************************/
.card .card__details .card__detail .card__detail__subtitle span {
  color: #6400a9;
}