﻿/* Utilidades _bpd */

/*Ultramar-Larimar*/
.bg-azul-degradado1{
	background: #012169;
	background: -moz-linear-gradient(45deg, #012169 0%, #00c1d5 100%);
	background: -webkit-linear-gradient(45deg, #012169 0%,#00c1d5 100%);
	background: linear-gradient(45deg, #012169 0%,#00c1d5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012169', endColorstr='#00c1d5',GradientType=1 );
}

/*Ultramar-Entremar#3-Larimar*/
.bg-azul-degradado2{
	background: #012169;
	background: -moz-linear-gradient(45deg, #012169 0%, #00709e 60%, #00c1d5 100%);
	background: -webkit-linear-gradient(45deg, #012169 0%,#00709e 60%,#00c1d5 100%);
	background: linear-gradient(45deg, #012169 0%,#00709e 60%,#00c1d5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012169', endColorstr='#00c1d5',GradientType=1 );
}

/*Ultramar-Entremar#3-Larimar con transparencia*/
.bg-azul-degradado-3{
	background: -moz-linear-gradient(45deg, rgba(1,33,105,1) 0%, rgba(0,112,158,0.9) 70%, rgba(0,165,194,0.8) 100%);
	background: -webkit-linear-gradient(45deg, rgba(1,33,105,1) 0%,rgba(0,112,158,0.9) 70%,rgba(0,165,194,0.8) 100%);
	background: linear-gradient(45deg, rgba(1,33,105,1) 0%,rgba(0,112,158,0.9) 70%,rgba(0,165,194,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012169', endColorstr='#cc00a5c2',GradientType=1 );}


/*Sombra vertical*/
.degradado-sombra{
	background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(229,229,229,0) 100%)!important;
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(229,229,229,0) 100%) !important;
	background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(229,229,229,0) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00e5e5e5',GradientType=1 ) !important;
}

/*Sombra horizontal*/
.degradado-sombra2{
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%) !important;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.6) 100%) !important;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.6) 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ) !important;
}

/*texto*/
.text_thin{
    font-weight: 100;
}

.text_thin_i{
    font-weight: 100;
    font-style: italic;
}

.text_light{
    font-weight: 300;
}

.text_light_i{
    font-weight: 300;
    font-style: italic;
}

.text_regular{
    font-weight: 400;
}

.text_regular_i{
    font-weight: 400;
    font-style: italic;
}

.text_medium{
    font-weight: 500;
}

.text_medium_i{
    font-weight: 500;
    font-style: italic;
}

.text_bold{
    font-weight: 700;
}

.text_bold_i{
    font-weight: 700;
    font-style: italic;
}

.text_black{
    font-weight: 900;
}

.text_black_i{
    font-weight: 900;
    font-style: italic;
}


.text_xs{
	font-size:14px !important;
}

.text_sm{
	font-size:16px !important;
}

.text_md{
	font-size:20px !important;
}

.text_lg{
	font-size:26px !important;
}

.text_light {
    font-weight: 300 !important;
}


.text-shadow{
	text-shadow: 1px 1px 1px #000 !important;
}

a.link-texto-enfoque, a.link-texto-enfoque:hover{
    color: #fff !important;
}

.ultramar {
    background-color: #012169 !important;
}

/*Paleta de colores*/
.black_text{
	color:#000;
}

.white_text{
	color:#fff;
}

.grey_text{
	color:#808080;
}

.larimar{
	background-color:#00c1d5 !important;
}

.larimar_text{
	color:#00c1d5 !important;
}

.entremar1{
	background:#00a5c2 !important;
}

.entremar1_text{
	color:#00a5c2 !important;
}

.entremar2{
	background:#008bb0 !important;
}

.entremar2_text{
	color:#008bb0 !important;
}

.entremar3{
	background:#00709e !important;
}

.entremar3_text{
	color:#00709e !important;
}

.entremar4{
	background:#00558c !important;
}

.entremar4_text{
	color:#00558c !important;
}

.entremar5{
	background:#003b7a !important;
}

.entremar5_text{
	color:#003b7a !important;
}


.ultramar{
	background-color:#012169 !important;
}

.ultramar_text{
	color:#012169 !important;
}

.arena{
	background-color:#e8e6df !important;
}

.arena_text{
	color:#e8e6df !important;
}

.madera{
	background-color:#5e4b3c !important;
}

.madera_text{
	color:#5e4b3c !important;
}


.mamey{
	background-color:#ed8b00 !important;
}

.mamey_text{
	color:#ed8b00 !important;
}

.bermellon{
	background-color:#c8102e !important;
}

.bermellon_text{
	color:#c8102e !important;
}




.link-descarga{
    display: flex;
    align-items: center;
}

/*Enlaces*/
.color_link_bpd{
    color: #00c1d5 !important;
}
.link_bpd{
    font-size:14px;
    color: #00c1d5;
    font-weight: 500;
    display: inline-flex;
    align-items: baseline;
}
.link_bpd:hover{
    color:#003b7a;
}
.link_bpd:before{
    font-family: 'BPD-icon-v2' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '';
    content: "\e901";
    font-size: 0.72em;
}




.cuadrado p{
    font-size: 16px;
}




.btn-primary.focus, .btn-primary:focus {
    box-shadow: none !important;
}

a:hover{
    text-decoration: none !important;
}

.regresar{
    margin-top: 100px;
}



.encabezado{
    margin-top: 50px;
    margin-bottom: 80px;
    text-align: center;
}

.encabezado h1{
    color: #012169;
    font-size: 50px;
    font-weight: 900;
}

.link-descarga{
    display: flex;
    color: #00c1d5 !important;
    font-weight: 500 !important;
}

.link-descarga .BPD-icon2-nav-17{
    font-size: 29px;
    margin-right: 15px;
    font-weight: bold;
}

.arrow{
    width: 20px;
}

.link-descarga span{
    font-size: 20px;
}

.link-descarga .BPD-icon2-nav-17:before{
    color: #00c1d5 !important;
}
.larimar-text{
    color: #00c1d5 !important;
}

.link-bpd .icon{
    width: 29px;
    margin-right: 15px;
}

.bg-banner-video{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover !important;
    margin-top: 70px;
    
}

.reconocimientos h5, .reconocimientos h2{
    color: #012169;
    font-weight: bold;
}

.hero-image{
    text-align: center;
    margin-bottom: 0;
    height: 808px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


.boton-play{
    width: 120px;
}
.padding-0{
    padding: 0;
}


.para-crecer{
    background: url('/Personas/Paginas/informeGestionAnual/BancoPopular/2024/images/enfoques/bg-para-crecer.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* height: 400px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0 170px;
}

svg {
    display: inline !important;
    width: fit-content !important;
    height: fit-content !important;
    margin: 0 auto !important;
}

.hero-image-contenido .titulo h1, .hero-image-contenido > p{
    color:#fff !important;
}



.hero-image-contenido h1{
    font-weight: 900;
    text-align: left;
}

.hero-image-contenido .lineas-titulo{
    width: 200px;
    top: -30px;
    position: absolute;
}

/* .hero-image-contenido{
    margin-top: 170px;
}
*/

.hero-image-contenido p{
    font-size: 28px;
    margin-bottom: 23px;
    text-align: left;
    line-height: 1.2;
}



.hero-image-contenido .row{
 margin-left: 0;
}

.hero-image .container{
    display: flex;
    justify-content: flex-end;
    align-content: space-between;
    flex-wrap: wrap;
}



.cifras-enfoques svg line{
    stroke-width: 12;
}

.link-bpd{
    color: #00c1d5 !important;
    font-weight: 800;
    font-size: 16px;
}
.video > a{
    color: #00c1d5 !important;
    background: transparent !important;
    border: none !important;
    font-weight: 800;
    font-size: 16px;
}

.hero-image .text-shadow{
    text-shadow: 1px 1px 3px #000 !important;
}




#footer{
    padding: 30px;margin: 0px !important;
}

.ultramar {
    background-color: #012169 !important;
}


.video a i{
    margin-right: 0;
}


.cifras h5{
    color: #ED8B00;
    justify-content: center;
    font-size: 25px;
    margin-top: 20px;
    font-weight: 700;
}



.titulo-cifras h4{
    font-size: 24px;
    justify-content: center;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

svg {
    display: inline !important;
    /* width: fit-content !important; */
    width: 100% !important;
    height: fit-content !important;
    margin: 0 auto !important;
}

.cifras p{
    color: #fff;
    margin-bottom: 0
}

.prestamos .cifras img{
    width: 53px;
}

.exportaciones .cifras img{
    width: 62px;
}

.cifras{
    text-align: center;
    /*margin-bottom: 30px;*/
}
.canales-digitales .cifras img, .tarjetas-de-credito .cifras img{
    width: 85%;
   /* height: 110px;*/
}

.cifras a:hover {
    color: #00c1d5 !important;
}


.linea-colorida-abajo{
    position: absolute;
    bottom: 13px;
    right: -151px;
}

.cifras-enfoques{
    background: #012169;
    padding-top: 50px;
}

.svg-opacity{
    opacity: .3;
}

.cuadrado {
   /* background-color: #003B7A; */
    margin-bottom:0px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border-radius: 33px;
    color: white;
    text-align: left;
    max-height: 330px !important;
    height: 150px;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
}

.cifras-enfoques{
    background: #EFEFEF;
}

#footer{
  background: url('/Personas/Paginas/informeGestionAnual/BancoPopular/2024/images/enfoques/2024/bg-footer.webp');
  background-position: 100% center;
  background-size: cover;
  position: relative;
  bottom: 0;
  background-repeat: no-repeat;
}

 iframe{
    width: 100%;
    height: 630px;
}

@media(min-width:1200px){
    
    .btn-volver-container{
        margin-top: -50px;
        position: absolute;
        top: 200px;
        left: 25px;
    }

    .hero-image-contenido .lineas-titulo{
        right: 51px;
    }


    .hero-image-contenido .titulo{
        text-align: left;
        margin-left: -175px;
    }

    /* .hero-image-contenido{
        padding-left: 38vw;
        
    } */

}



@media(max-width:1199px){
    .seccion-video-slider{
        background-color: #f0f7ff !important;
    }
}

@media(min-width: 992px) and (max-width: 1199px){
    .hero-image-contenido .lineas-titulo{
        right: 15px;
    }


    .cuadrado{
        height: 200px;
    }
}


/*@media(max-width:1023px){
    .hero-image .container{
        padding: 0 100px;
    }
}*/



@media(min-width: 992px){

   .hero-image-contenido h1{
    font-size:52pt !important;
   }

}



    .hero-image-contenido{
        margin-top: 0;
        text-align: left;
        /* display: flex;
        flex-flow: wrap; */
    }

    .hero-image-contenido p{
        text-align: left !important;
        font-size: 16px;
    }


    .btn-volver-container{
        margin-bottom: 3rem!important;
    }

    .hero-image-contenido p{
        margin-bottom: 25px;
        font-size: 16px;
    }

    .link-descarga span {
        font-size: 16px;
    }

    .para-crecer{
        background-position: 17% 0;
        height: 400px; 
        padding: 130px 0 60px;
    }

    .hero-image-contenido .titulo h1{
        font-size: 26px;
    }

    .hero-image-contenido > p{
        font-size: 16px;
    }

    .hero-image-contenido{
        margin-top: 0;
    }

    .cifras {
        margin-bottom: 50px !important;
    }

    .hero-image .image-container{
        background-position: 84% 0;
        background-size: 168%;
        height: 240px;
    }

    .hero-image-contenido .lineas-titulo{
        right: 31px;
        width: 150px;
    }
}



@media(max-width:991px){
    .hero-image-contenido {
        margin-top: 50px;
    }
    .link-descarga{
        display: flex;
        justify-content: center;
    }
    .hero-image-contenido p{
        margin-bottom: 25px;
        text-align: center;
    }
}



@media(min-width:768px){
    
    .banner-ideas-innovadoras{
        align-items: center;
        padding-top: 50px;
    }

}

@media(max-width:767px){
    .seccion-video-slider{
        background-color: #f0f7ff !important;
    }
    iframe {
        width: 100%;
        height: 330px;
    }

    .seccion-video-slider{
        padding: 80px 12px !important;
    }

    .container-slider{
        padding: 0;
    }
    .texto-cifras{
        text-align: center;
    }

    #footer .certificaciones img{
        margin-bottom: 30px;
    }
    .bg-banner-video{
        justify-content: flex-start !important;
        align-items: baseline !important;
    }
    .banner-ideas-innovadoras{
        height: 500px;
        align-items: flex-start !important;
        padding-top: 80px !important;
    }
    .bg-banner-video{
        height: 1355px;
    }
    
    .hero-image{
        padding: 300px 0;
        height: 530px;
    }
    .cuadrado{
        height: auto;
    }
    .hero-image{
        height: 550px;
    }
    .hero-image-contenido p{
        font-size: 14pt;
    }
  

    .hero-image-contenido p{
        font-size: 14pt;
    }

    .hero-image .image-container{
        background-size: 160%;
        height: 145px;
        background-position: 76% 0;
    }

    .hero-image-contenido .lineas-titulo {
        right: -1px;
    }

    .linea-colorida-arriba{
        right: -160px;
    }
}

@media(max-width:500px){
    .hero-image-contenido .lineas-titulo {
        right: -15px;
        width: 100px;
        top: -15px;
    }

    .hero-image-contenido h1{
        font-size: 25pt;
    }

    .linea-colorida-arriba {
        right: -75px !important;
        width: 330px !important;
        top: 3px;
    }
}

@media(max-width:320px){
    .banner-ideas-innovadoras{
        padding-top: 50px !important;
    }
}


@media(min-width:1025px){
    .innovacion{
       
        background-position: center;
    }
}

@media(max-width:1024px){
    .innovacion{
       
        background-position: center;
    }
}


@media(max-width:991px){
    .innovacion{
       
        background-position: center;
    }

    .btn-volver-container{
        margin-top: 0;
        margin-bottom: 10px !important;
    }

    .hero-image-contenido p{
        margin-bottom: 25px;
    }

    .innovacion{
        background-position: 22% 0;
        height: 400px; 
        padding: 130px 0 60px;
    }

    .hero-image-contenido{
        margin-top: 0;
    }
    .innovacion .image-container{
        background-position: 71% 37% !important;
        background-size: 168%;
        height: 240px;
    }
}

@media(max-width:767px){
    .innovacion .image-container{
        background-size: 150% !important;
        height: 145px;
        background-position: 69% 0 !important;
        background-repeat: no-repeat !important;
    }
    
    .hero-image-contenido p{
        font-size: 14pt;
    }

    .innovacion{
       
        background-position: center;
    }
}
