html {
scroll-behavior: smooth;
}
/***************** Hero Banner *****************/
.topHeader {
position: relative;
margin: 0px;
padding: 0px;
background: #043263;
height: 440px;
overflow: hidden;
width: 100%;
display: flex;
}
/**clip**/
.clip {
width: 1176px;
background: url('../images/lightstream.png') no-repeat;
background-position: top right;
height: 440px;
z-index: 99;
margin: 0px auto;
position: relative;
}
.clip .heroTxt{
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
height: auto;
max-width: 465px;
color: #fff;
text-align: left;
}
.clip h1 {
font-family: 'BentonSansBBVA-Book';
font-size: 42px;
}
.clip h1 span {
color: var(--aqua);
}
.clip h2 {
font-family: 'BentonSansBBVA-Book';
margin-top: 0px;;
}
/** Clip **/
/** Image **/
.imagenH1 {
position: absolute;
top: 40%;
left: 52%;
height: auto;
min-height: 400px !important;
width: 80%;
transform: translate(-20%, -45%);
}
/** Image **/
.lineIsMobile {
-webkit-clip-path: polygon(100% 95%, 0% 100%, 100% 100%);
clip-path: polygon(100% 95%, 0% 100%, 100% 100%);
width: 100%;
height: 289px;
background-color: #043263;
position: absolute;
bottom: 0px;
display: none;
}
.copyMobileHero2 {
display: none;
}
@media screen and (min-width: 1600px) {
.imagenH1 {
top: 40%;
left: 44%;
width: 60%;
transform: translate(0%, -40%);
}
}
@media screen and (max-width: 1024px) {
.clip {
display: none;
}
.lineIsMobile {
display: block;
}
.topHeader {
height: 350px;
}
.imagenH1 {
top: 55%;
left: 0%;
height: auto;
min-height: 300px !important;
width: 100%;
transform: translate(0%, -50%);
}
}
@media (max-width: 768px) {
.topHeader {
height: 250px;
}
.imagenH1 {
left: 50%;
width: 100%;
min-height: 250px !important;
transform: translate(-50%, -54%);
}
}
@media (max-width: 570px) {
.topHeader {
height: 180px;
}
}
/**********Copy mobile*********/
@media screen and (max-width: 1024px) {
.copyMobileHero2 {
text-align: center;
color: var(--black-00);
padding: 32px 0 50px;
display: block;
background: #043263;
}
.copyMobileHero2 h1 {
font-weight: bold;
line-height: 1.3;
font-family: 'BentonSansBBVA-Book';
font-size: 24px;
max-width: 572px;
margin: 0px auto 20px auto;
}
.copyMobileHero2 h1 span {
color: var(--aqua);
}
.copyMobileHero2 h2 {
font-family: 'BentonSansBBVA-Book';
font-size: 24px;
line-height: 30px;
}
.copyMobileHero2 h2 br {
display: none;
}
}
/******************************/
/** Beneficios Bar **/
/*****************************/
.beneficios-bar{
background: #072146;
padding: 40px 0;
}
.beneficios-bar h2{
width: 90%;
margin: 0px auto;
}
/**********Blue Message Block*********/
.blue-message{
background: #d4edfc;
padding: 40px 0px 40px;
margin: 0px;
}
.blue-message2{
background: #1465a5;
color: #fff;
padding: 40px 0px 40px;
margin: 0px;
}
.flex{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.icon{
width: 20%;
max-width:150px;
}
.icon img{
width: 80%;
max-width: 105px;
}
.text{
box-sizing: border-box;
padding: 20px;
margin: 0px;
text-align: left;
}
.text p{
font-family: 'BentonSansBBVA-Medium';
}
@media screen and (max-width: 1024px){
.blue-message{
padding: 40px 0px 20px;
}
.flex{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
.icon{
width: 100%;
margin: 0px auto;
}
.icon img{
width: 100%;
}
.text{
text-align: center;
}
}
/********** / Blue Message Block*********/
/********** GRID *********/
/* Grid Suelto Integro */
.sueldoIntegro{
padding: 72px 0;
margin: 0px auto;
max-width: 1176px;
width: 100%;
}
@media (max-width: 1176px) {
.sueldoIntegro{
padding: 40px 16px;
margin: 0px;
box-sizing: border-box;
}
}
.beneficiosGrid2{
max-width: 1176px;
font-size: 18px;
width: 100%;
height: auto;
min-height: 500px;
position: relative;
margin: 0px auto 0;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 270px);
grid-template-areas: "block1 block1 block1 block1 block2 block2 block2 block2"
"block1 block1 block1 block1 block3 block3 block3 block3";
}
@media (max-width: 1070px) {
.beneficiosGrid2{
grid-template-rows: 420px 250px 250px;
grid-template-areas: "block1 block1 block1 block1 block1 block1 block1 block1"
"block2 block2 block2 block2 block2 block2 block2 block2"
"block3 block3 block3 block3 block3 block3 block3 block3";
}
}
@media (max-width: 700px) {
.beneficiosGrid2{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 420px 430px 430px;
grid-template-areas: "block1"
"block2"
"block3"";
}
}
@media (max-width: 520px) {
.beneficiosGrid2{
grid-template-rows: 420px 450px 450px;
}
}
@media (max-width: 400px) {
.beneficiosGrid2{
grid-template-rows: 420px 410px 410px;
}
}
@media (max-width: 321px) {
.beneficiosGrid2{
grid-template-rows: 420px 430px 430px;
}
}
/* Blocks */
.beneficiosGrid2 > .itemGrid2 {
font-family: "BentonSansBBVA-Book";
text-align: left;
position: relative;
margin: 0;
}
.beneficiosGrid2 .block1{
overflow: hidden;
grid-area: block1;
}
.beneficiosGrid2 .block1bg{
background: url('../images/pruebas/Ejecutivo/Cuadro1_Ejecutivo.jpg') no-repeat;
background-position: center center;
background-size: cover;
}
.bakcgroundChild1{
width: 100%;
height: 100%;
transition: all .5s;
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: .5s;
}
.block1:hover .overlay {
opacity:0.5;
}
.block1:hover .bakcgroundChild1{
transform: scale(1.2);
}
.beneficiosGrid2 .block2{
background: #f4f4f4;
color:Â #666666;
grid-area: block2;
}
.beneficiosGrid2 .block3{
background: #f4f4f4;
color:Â #666666;
grid-area: block3;
}
.beneficiosGrid2 .bakcgroundChild1c{
background: url('../images/home2/Cuadro1_Cliente.jpg');
background-position: center center;
background-size: cover;
transition: all .5s;
}
.beneficiosGrid2 .bakcgroundChild1e{
background: url('../images/home2/Cuadro1_Ejecutivo.jpg');
background-position: center center;
background-size: cover;
transition: all .5s;
}
@media (max-width: 880px) {
.beneficiosGrid2 .block2{
background-position: center 50%;
background-size: 690px;
}
.beneficiosGrid2 .block3{
background-position: center 50%;
background-size: 600px;
}
}
/* Blocks */
.itemGrid2 h1{
font-family: "BentonSansBBVA-Bold";
font-size: 24px;
color: #121212;
text-align: left;
}
.itemGrid2 ul {
margin: 16px 0 0;
padding: 0 0 0 20px;
}
.itemGrid2 .wrapper{
height: 100%;
width: 100%;
position: relative;
padding: 0px;
display: flex;
flex-direction: row;
flex-direction: wrap;
justify-content: flex-start;
overflow: hidden;
}
.itemGrid2 .imgCard{
width: 235px;
height: 270px;
overflow: hidden;
position: relative;
}
.imgCard .blue-box{
position: absolute;
padding: 16px;
color: #fff;
font-family: "BentonSansBBVA-Medium";
z-index: 9;
background: #1465a5;
}
.imgCard .img2e{
width: 190%;
height: auto;
left: -48%;
position: absolute;
z-index: 2;
}
.imgCard .img3e{
width: 160%;
height: auto;
left: -22%;
position: absolute;
z-index: 2;
}
.imgCard .img2c{
width: 160%;
height: auto;
left: -22%;
position: absolute;
z-index: 2;
}
.imgCard .img3c{
width: 160%;
height: auto;
left: -32%;
position: absolute;
z-index: 2;
}
.itemGrid2 .txtCard {
width: auto;
height: auto;
padding: 20px;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 240px;
text-align: left;
}
.itemGrid2 .txtCard p{
font-size: 15px;
color: #666666;
text-align: left;
line-height: 1.5;
margin: 0;
width: 90%;
padding: 0 10px 10px;
}
.itemGrid2 .txtCard ul{
margin: 0px;
padding: 0px 0px 0px 20px;
color: #666;
width: 100%;
padding-bottom: 10px;
}
.itemGrid2 .txtCard a{
font-size: 15px;
color: #3873ad;
text-decoration: none;
font-family: "BentonSansBBVA-Medium";
}
.itemGrid2 .txtCard a:hover{
color: #5BBEFF;
text-decoration: none;
}
.itemGrid2 .littleBoxOverlay{
background: rgba(0, 0, 0, 0.0);
width: 100%;
height: 100%;
position: absolute;
transition: all 0.1s ease;
}
.itemGrid2 .boxOverlay{
position: absolute;
margin: 0px;
padding: 20px;
/* background: rgba(7, 33, 70, 0.6); */
background: transparent;
z-index: 1;
bottom: 0px;
left: 0px;
width: 100%;
box-sizing: border-box;
transition: all .5s;
text-align: center;
}
.itemGrid2 .boxOverlay p{
color: #fff;
}
/*Hovers del Overlay en los bloques con imagen*/
.itemGrid2:hover .boxOverlay{
/* background: rgba(7, 33, 70, 0.9); */
}
.itemGrid2:hover .littleBoxOverlay{
/* background: rgba(7, 33, 70, 0.7); */
}
/*Hovers del Overlay en los bloques con imagen*/
.itemGrid2 .wrapper .centerTxtVertical{
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
height: auto;
}
.beneficiosGrid2 > .itemGrid{
padding: 24px;
border-radius: 20px;
text-align: left;
}
.itemGrid2 .wrapper .centerTxt{
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
/* Grid Sueldo Integro */
@media screen and (max-width: 990px){
.itemGrid2 .txtCard {
width: 70%;
left: 250px;
}
.itemGrid2 .imgCard{
width: 255px;
height: 355px;
overflow: hidden;
position: relative;
}
.itemGrid2 .wrapper {
overflow: hidden;
}
.imgCard .img2e{
width: 160%;
height: auto;
left: -33%;
position: absolute;
z-index: 2;
}
.imgCard .img3e{
width: 160%;
height: auto;
left: -22%;
position: absolute;
z-index: 2;
}
.imgCard .img2c{
width: 160%;
height: auto;
left: -22%;
position: absolute;
z-index: 2;
}
.imgCard .img3c{
width: 160%;
height: auto;
left: -32%;
position: absolute;
z-index: 2;
}
}
@media screen and (max-width: 700px){
.imgCard .img2e {
top: -50px;
}
}
@media screen and (max-width: 700px){
.itemGrid2 .wrapper {
height: 100%;
width: 100%;
position: relative;
padding: 0px;
display: flex;
flex-direction: column;
flex-direction: wrap;
justify-content: flex-start;
}
.itemGrid2 .imgCard{
width: 100%;
height: 50vw;
overflow: hidden;
position: relative;
}
.itemGrid2 .txtCard {
width: 100%;
height: 225px;
position: relative;
top: 0%;
transform: none;
left: 0;
}
.itemGrid2 .wrapper {
overflow: hidden;
}
.itemGrid2 .txtCard p{
width: 100%;
}
.imgCard .img2e{
width: 100%;
height: auto;
left: 0%;
position: absolute;
z-index: 2;
top: -40px;
}
.imgCard .img3e{
width: 100%;
height: auto;
left: 0%;
position: absolute;
z-index: 2;
top: 0px;
}
.imgCard .img2c{
width: 100%;
height: auto;
left: 0%;
position: absolute;
z-index: 2;
top: 00px;
}
.imgCard .img3c{
width: 100%;
height: auto;
left: 0%;
position: absolute;
z-index: 2;
top: 0px;
}
}
/********** GRID *********/
/********** DESCUENTOS *********/
.descuentos{
width: 100%;
background: #f4f4f4;
padding: 72px 0;
margin: 0;
box-sizing: border-box;
position: relative;
}
.descuentos .iconContainer{
height: 130px;
}
.descuentos img{
max-width: 120px;
max-height: 120px;
}
.descuentos p{
height: auto;
display: block;
}
.link_col{
color: #3873ad;
text-decoration: none;
}
.link_col:hover{
color: #49A5E6;
text-decoration: none;
}
@media screen and (min-width: 1024px){
.descuentos p{
height: 190px;
}
}
@media screen and (max-width: 768px){
.descuentos p{
min-height: 20px;
display: block;
}
.descuentos .iconContainer {
height: 100px;
}
}
/********** / DESCUENTOS *********/
/********** BENEFICIOS *********/
.beneficios{
width: 100%;
background: #004481;
color: #fff;
padding: 72px 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.containerCards {
width: 100%;
max-width: 1117px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-content: center;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.containerCards .single {
position: relative;
max-width: 350px;
height: 357px;
overflow: hidden;
width: 31.6%;
box-sizing: border-box;
text-align: left;
margin-top: 24px;
}
@media screen and (max-width: 1140px){
.beneficios{
padding: 40px 16px;
}
}
@media screen and (min-width: 900px) {
.containerCards .single:nth-of-type(3n+2) {
margin-left: 2.6%;
margin-right: 2.6%;
}
}
@media screen and (max-width: 900px) {
.containerCards .single {
width: 49%;
max-width: 100%;
}
.containerCards .single:nth-child(even) {
margin-left: 2%;
margin-right: 0;
}
}
@media screen and (max-width: 570px) {
.containerCards .single {
width: 100%;
}
.containerCards .single:nth-child(even) {
margin-left: 0;
margin-right: 0;
}
}
.card_blue {
width: 370px;
height: 357px;
background-color: #49a5e6;
}
.card_orange {
width: 370px;
height: 357px;
background-color: #d8732c;
}
.card_violet {
width: 370px;
height: 357px;
background-color: #7c6ac7;
}
.card_img {
position: absolute;
left: 50%;
top: 53%;
transform: translate(-50%, -100%);
transition: 1s;
}
.size1{
max-width: 120px;
height: auto;
}
.size2{
max-width: 100px;
height: auto;
}
.size3{
max-width: 100px;
max-height: 120px;
height: auto;
}
.card_text {
position: absolute;
left: 50%;
top: 54%;
width: 100%;
/* height: 100px; */
transform: translate(-50%, -50%);
font-family: 'BentonSansBBVA-Book';
line-height: 1.3;
letter-spacing: normal;
text-align: center;
color: #fff;
pointer-events: none;
}
.btn-mas {
position: absolute;
left: 50%;
top: 52%;
width: 150px;
height: 22px;
transform: translate(-50%, 450%);
font-family: 'BentonSansBBVA-MEdium';
font-size: 15px;
color: #fff;
}
.btn-mas:hover{
color: #043263;
}
.card_blue:hover .card_img {
transform: translate(-50%, -135%);
}
.card_orange:hover .card_img {
transform: translate(-50%, -130%);
}
.card_violet:hover .card_img {
transform: translate(-50%, -130%);
}
.sueldoIntegro .s36,
.descuentos .s36,
.beneficios .s36{
max-width: 90%;
margin: 0px auto;
line-height: 1.4;
}
@media screen and (max-width: 1024px){
.sueldoIntegro .s36,
.descuentos .s36,
.beneficios .s36{
font-size: 24px;
}
}
/********** / BENEFICIOS *********/
/******************************/
/** Cuenta digital **/
/*****************************/
.cuenta-digital{
width: 100%;
padding: 72px 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
/************************** Swiper Nomina ***************************/
.swiperNomina {
margin: 0px;
padding: 72px 0;
width: 100%;
min-height: 500px;
height: 100%;
position: relative;
text-align: left;
font-family: 'BentonSansBBVA-Book';
font-size: 18px;
}
.swiperNomina {
padding: 72px 0;
}
.swiper-container2 {
width: 100%;
height: 100%;
position: relative;
}
.swiperNomina .swiper-button-next {
color: transparent;
}
.swiperNomina .swiper-button-prev {
color: transparent;
}
.swiperNomina .swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
background-size: 27px 44px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.tdc {
transition: .5s all;
filter: blur(2px);
}
.thr {
transform: scale(0.6);
z-index: 60;
}
.sec {
transform: scale(0.8);
z-index: 80;
}
.selected {
transform: scale(1.4);
filter: blur(0px);
z-index: 100;
}
.percentajeCard {
width: 140px;
margin: 26px auto 26px;
padding: 16px 48px;
font-size: 24px;
font-family: 'BentonSansBBVA-Medium';
color: var(--darkish-blue);
border: 0px;
text-align: center;
background: #fff;
}
.swiperNomina .tablaPorcentajes {
color: #004481;
font-family: 'BentonSansBBVA-Medium';
font-size: 18px;
text-align: center;
display: block;
cursor: pointer;
text-decoration: underline;
}
.swiperNomina .tablaPorcentajes:hover {
color: #1465a5;
text-decoration: underline;
}
/* Botón animado con gradient */
.icnSize {
font-size: 15px;
}
@media screen and (max-width: 768px){
.selected {
transform: scale(1.2);
}
}
@media (min-width: 992px){
.modal-lg, .modal-xl {
max-width: 560px;
}
}
/************************** Swiper Nomina ***************************/
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url(../images/icons/icn_forward.svg) !important;
right: 0px;
left: auto;
outline: none;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url(../images/icons/icn_back.svg) !important;
left: 0px;
right: auto;
outline: none;
}
.promociones .swiper-button-next {
color: transparent;
right: -13px;
}
.promociones .swiper-button-prev {
color: transparent;
left: -13px;
}