body{
  font-family: 'Familjen Grotesk', sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

cite{
  font-style: normal;
}
.text_blue{
  font-weight: 100;
  color: #4672da;
  text-align: center;
}
.text_blue>span{
  font-weight: bold;
  ;
}
.text_white{
  font-weight: 100;
  color: white;
  letter-spacing: 1px;
  text-align: center;
}
.text_white>span{
  font-weight: bold;
  ;
}
.score{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.stars i{
  color: #f0841a!important;
}
.text_star{
  text-align: justify;
  font-size: 12px;
  PADDING-TOP: 3px;
}
.unit {
  display: flex;
  flex: 0 1 100%;
  margin-left: -30px;
}
.unit-left, .unit-right {
  flex: 0 0 auto;
  max-width: 100%;
}
.unit-body {
  flex: 0 1 auto;
  color: #142349;
}
.unit > * {
  margin-bottom: 20px;
  margin-left: 30px;
}
.star_personal{
  margin-bottom: 0px;
  margin-top: 20px;
  font-size: 16px;
}
.star_score{
  display: flex;
}
.star_score li{
  padding: 3px;
}
.star_score a{
  color: #f0841a!important     
}
.star_ref a{
  color: #f0841a!important
}
.circle_text{
  line-height: 23px;
}
.section_parners{
  background: #f0f3f5 !important; 
}
.section_parners p{
  line-height: 23px;  
}
.section_parners h1{
  padding-bottom: 30px;
}
.thumb-item{
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  transition: 0.3s;
  text-align: center;
  border-radius: 15px;
  padding-bottom: 5px;
  background-color: white;

}
.thumb-item>p{
  font-size: 12px;
  margin-left: 20px;
  margin-right: 26px;
  text-align: inherit;
}
.thumb-item:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/*adasd*/
.thumb-item-ref {
  max-width: 280px;
  background-color: white;
  border-radius: 5px;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  font-family: arial;
}
.thumb-item-ref>img{
  height: 60px;
  width: 60px !important;
  text-align: center;
  border-radius: 50%; 
  margin-top: 20px;
  
}
#title {
  margin-bottom: 20px;
  margin-top: 10px;
  color: grey;
  font-size: 18px;
}
#title i {
 color: #21ba36;
}
.thumb-item-ref:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.box_img{
  width: 100%;
  height: auto;
}
/* Estilos globales */
.contenedor{
  width:80%;
  margin:auto;
  overflow:hidden;
}
.contenedor_product{
  width:50%;
  margin:auto; 
}
ul{
  list-style-type: none;
  
  text-align: left;
  margin:0;
  padding:0;
}
ul>li>i{
  margin-right: 20px;
}
.btn2{
  background-color:#21ba36;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 8em;
  border-radius: 50px;
  display: inline-block;
    align-items: center;
  text-decoration: none;
   
}
.btn_container{
 padding-top: 20px;
 text-align: initial;
}
.btn{
  align-items: baseline;
  background-color:#21ba36;
  font-weight: bold;
  color: #ffffff;
  padding: 10px 8em;
  border-radius: 50px;
  display: flex;
 
    justify-content: center;
    
}
.btn>i{
  margin-right: 10px;
  color: yellow;
}
.btn2>i{
  margin-right: 5px;
  color: yellow!important;
}
.btn:hover{
  background-color: #169627; 
}
.btn2:hover{
  background-color: #169627;
}
.oscuro{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

/* Encabezado **/
header{
  background:#ffffff;
  color:#020101;
  padding-top:20px;
  min-height:50px;
  border-bottom:#1293d4 5px solid;
}
.header-top{
  background-color: #4672da;
	color: #fff;
	padding: 1px 0px;
  display: flex;
}
.header-top h1{
  text-align: center;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
}
.lg{
  width: 88% !important;
}
.md{
  width: 70% !important;
}
.md-l{
  width: 80% !important;
}

header a{
  color:#000000;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}
#hero h2{
  font-size: 42px;
  margin-bottom: 25px;
  color:#142349;
  text-decoration:none;
  font-weight: 100;
  word-spacing: 1px;
  letter-spacing: 0.01em !important;
  text-align: justify;
}

#hero h2>span{
  font-weight: bold;
}
.text_hero{
  font-size: 23px;
  color:#142349;
  word-spacing: 1px;
  letter-spacing: 0.01em;
}
.text_hero i{
 font-weight: bold;
}
.text_hero_p{

  color:#142349;
  word-spacing: 1px;
  letter-spacing: 0.01em;
  line-height: 25px;
}
.text_hero_p>p{
 font-size: 17espacionpx!important;
}

header li{
  float:left;
  display:inline;
  padding: 0 10px 0 1px;
}
footer li{
  float:left;
  display:inline;
  padding: 0 10px 0 10px;
}

header #marca{
  float:left;
}

header #marca h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:10px;
}

header .resaltado, header .actual a{
  color:#1293d4;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

/* hero con imagen */
#hero{
  min-height:600px;
  background-image: url('../img/Layer1050.png') ;
  background-size: cover;
  text-align:center;
  color:#ffffff;
}
.contenedor1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
    
#hero h1{
  margin-top:-250px;
  font-size:55px;
  margin-bottom:10px;
}

.top-wrap-brand{
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0;
  align-items: center;
}
.top-brand-box{
 
  margin: 0 auto;
}
.top-brand-box img{
 -webkit-filter: grayscale(100%); 
 filter: grayscale(100%);
}

.top-brand-box img:hover{
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);
 }

#hero p{
  font-size:20px;
  text-align: justify;
}
#hero {
  font-size:20px;
}
#hero .iconos{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#hero .iconos img{
  max-width: 100px;
  padding: 15px;
  padding-top: 20px;
}

#hero .content{
  max-width: 550px;
padding: 0 100px 0 600px;
}

/* brands */
#enterprise{
  padding:5px;
  color:#813030;
  background: #f0f3f5;
}
#enterprise h1{
  float:left;
}

/* Cajas */
#cajas{
  padding-top: 25px;
  padding-bottom: 50px;
  background: white;
}

#cajas .caja{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#cajas .caja img{
  width:90px;
}

/* Lateral */
aside#lateral{
  float:right;
  width:30%;
  margin-top:10px;
}

/* Main-col */
article#main-col{
  float:left;
  width:65%;
}

/* footer */

footer{
  padding:20px;
  color:#ffffff;
  background-color:#ffffff;
  text-align: center;
}

#multicolumns_circle{
  columns: auto 16em;
  text-align: center;
}

#multicolumns{
  columns: auto 20em;
  text-align: center;
}
#multicolumns_hero{
  columns: auto 20em;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  column-gap: 70px;
}
.btn_container_hero{
  text-align: center;
  padding-top: 15px;
}

#multicolumns_header{
  columns: auto 21em;
  text-align: center;
  column-gap: 46px;
}
#multicolumns_header .header_nav{
 padding: 15px;
}
#multicolumns_header .footer{
  padding: 15px;
 }
#multicolumns_essential{
  columns: auto 25em;
  text-align: center;
  column-gap: 46px;
  color: white;
}
#section_essrential{
  padding-top: 25px;
  padding-bottom: 50px;
  background-image: linear-gradient(#4672da, #4672da), url('../img/Layer1166.png');
  background-size: cover;
  background-blend-mode: lighten;
  
}
#section_essrential>div>h1{
  color: white !important;
  background-color: white;
  
}

#section_product{
  padding-top: 25px;
  padding-bottom: 50px;
  background-image: linear-gradient(#4672da, #4672da), url('../img/Layer1166.png');
  background-size: cover;
  background-blend-mode: lighten;
  
}
#section_product>div>div>h1{
  color: white !important;
}

.banner_banks{
  padding-left: 30px;
  text-align: initial;
  height: 70px;
}

#circle { 
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-bottom: 5px;
  background: #142348; 
  -moz-border-radius: 70px; 
  -webkit-border-radius: 70px; 
  border-radius: 70px;
  font-size: 50px;
  line-height: 1px;
  color: #fff;
  text-align: center;
}
#section_banner{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
}
#section_banner>div{
  padding-left: 30px;
}
#section_banner>div>h3{
  font-size: 28px;
  margin-bottom: 0px;
}
#section_banner>div>p{
 text-align: center;
 margin-top: 5px;
}
#section_90{
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #142348;
  
}
#section_90>div>h1{
  color: white !important;
  background-color: white;
  
}


#card{
  background:rgb(245, 245, 245,0.7);
  width:300px;
  height: 200px;
  box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.2);
  border-radius:20px;
}

#card:hover {
  transition:0.3s;
  box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.2),-8px -8px 16px 0 rgba(0,0,0,0.2);
}

#card img{
  object-fit:cover;
  animation:fadeIn 1s;
  height: 100%;
  width:100%;
  border-radius:20px 20px 0px 0px;
  transition:0.3s;
}

/*acordeon*/
.accordion-wrapper {
  display: block;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  max-width: 500px;
  margin: 0 auto;
  margin-top: 12px;
  margin-bottom: 12px;
}

.accordion + .title {
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #1565C0;
}
.accordion ~ .title strong {
  line-height: 24px;
  color: white;
}
.accordion ~ .title .side-icon {
  display: block;
}
.accordion:checked ~ .title .side-icon {
  display: none;
}
.accordion ~ .title .down-icon {
  display: none;
}
.accordion:checked ~ .title .down-icon {
  display: block;
}
.accordion ~ .content {
  display: none;
  padding: 8px;
  cursor: pointer;
}
.accordion:checked ~ .content {
  display: block;
}
/*carousel js*/
.owl-carousel .owl-nav {
  overflow: hidden;
  height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #5110e9;
}

.owl-carousel .item {
  text-align: center;
}
.owl-carousel .nav-button {
  height: 50px;
  width: 25px;
  cursor: pointer;
  position: absolute;
  top: 110px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.owl-carousel .owl-prev {
  left: -35px;
}
.owl-carousel .owl-next {
  right: -35px;
}
.owl-theme .owl-nav [class*=owl-] {
  color: #ffffff;
  font-size: 39px;
  background: #000000;
  border-radius: 3px;
}
.owl-carousel .prev-carousel:hover {
  background-position: 0px -53px;
}
.owl-carousel .next-carousel:hover {
  background-position: -24px -53px;
}

.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #869791;
  font-size: 40px;
  line-height: 300px;
  margin: 0;
  padding: 0 60px;
  position: absolute;
  top: 0;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0;
  padding-left: 20px;
}
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0;
  padding-right: 20px;
}

/* Media Queries */
@media(max-width: 768px){
  header #marca,
  header nav,
  header nav li,
  #enterprise h1,
  #enterprise form,
  #cajas .caja,
  article#main-col,
  aside#lateral{
    float:none;
    text-align:center;
    width:100%;
  }
  header{
    padding-bottom:20px;
  }
  header li {
    padding: 0 7px 0 1px;
  }
  #enterprise h1{
    margin-top:40px;
  }
  #enterprise button{
    display:block;
    width:100%;
  }
  #multicolumns_header .header_nav {
    padding: 6px;
  }
  #multicolumns_hero .img_hero{
    width: 80% !important;
  }
  #multicolumns_hero>.img_hero>img{
    width: 300px !important;
  }
  #section_banner{
    display: block;
  }
  .text_hero {
    font-size: 20px;
    word-spacing: 0px;
  }
  .btn2{
    padding: 8px 4em;
  }
  .btn{
    width: 192px;
    background-color: #21ba36;
    font-weight: bold;
    color: #ffffff;
    padding: 9px 2.5em;
  }
  .text_star {
    text-align: justify;
    
    text-align: center;
  }
  #hero h2 {
    font-size: 24px;
    letter-spacing: 0px !important;
    word-spacing: 0.02em !important;
  }
  #multicolumns_hero >img{
    width: 250px;
  }
  .banner_banks {
    padding-left: 0px;
  }
  .banner_banks >img {
   width:320px;
  }
}