@font-face {
    font-family: "Bi-NeoIndustrial";
    src:url(../fonts/BiNeoIndustrial-Bold.ttf);

}
@font-face {
    font-family:'AndesNeue-Book';
    src:url(../fonts/AndesNeue-Book.otf);

}
body, h1, h2, h4, h5, h6, strong, span, ul,a, li, i, button {
    font-family: Bi-NeoIndustrial;
}

/*body {
    background: #F4F4F4;
}*/

h1{
	color: #053865;
	font-size: 25px;
	text-align: center;
}

h3{
    font-size: 18px;
    font-family:AndesNeue-Book !important;
    font-weight: 100;


}

p.textmodal1{
   font-family: AndesNeue-Book !important; 
}

h5{
	font-size: 12px;
	color: #4A4949CC;
	text-align: center;
}



body.w3-progressbar {
    background-color: #F4F4F4;
}

#regForm {
    background-color: #F4F4F4;
  
}

img.test {
    max-width: 15rem;
    padding: 1rem;
}

.margintop{
	margin-top: 10rem;
}

h6.anterior {
    margin-left: 25PX;
    font-size: 14px;
}

i.anterior.testleft-arrow {
    margin-top: 1px;
    position: absolute;
}

img.modaltextoimg {
    max-width: 28rem;
    margin-bottom: 20px;
}

img.modaltextoimg2 {
    max-width: 25rem;
}

p.textop {
    color: #8D8D8D;
    font-size: 14px;
    text-align: center;
}
.margintoparrow{
	margin-top: 3rem;
}

i.siguiente.testright-arrow {
    position: absolute;
    margin-left: 99px;
    margin-top: 3px;
}

h4.modalfirtstext {
    color: #4A4949CC;
    font-size: 16px;
    margin-top: 2rem;
}

/*buttons */


.button, .button-2 {
  display: inline-block;
  width: 17em;
  box-sizing: border-box; 
  color: #fefefe;
  border-radius: 10px;
  padding: 12px 30px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.button {
    background-color: #053865;
}

.button-2 {
  background-color: #2D8C9E;
}


.button:hover, .button:focus {
    background-color: #00C1D4;
    color: #fefefe;
     border-radius: 10px;
}



.button-2 {
    
  background-color: #2D8C9E;
  color: #fefefe;
  border-radius: 10px;
  padding: 12px 30px;
}

.button-2:hover, .button:focus {
  background-color: #00C1D4;
  color: #fefefe;
   border-radius: 10px;
}

/* fin buttons */

a {
    text-decoration: none;
    color: #2D8C9E;

} 

a:hover, a:focus {
    color: #053865;
}










/*Efecto*/
.modalmask {
    position: fixed;
   
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   background: rgb(0 0 0 / 36%);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalmask:target {
    opacity:1;
    pointer-events: auto;
}

/*Formato de la ventana*/
.modalbox{
    width:63rem;
    position: relative;
    padding: 5px 20px 20px 20px;
    background: #fff;
    border-radius:3px;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
     border-radius: 30px 0px 30px 0px;
}

/*Movimientos*/
.movedown {
    margin: 0 auto;
}
.rotate {
    margin: 10% auto;
    -webkit-transform: scale(-5,-5);
    transform: scale(-5,-5);
}
.resize {
    margin: 10% auto;
    width:0;
    height:0;
 
}
.modalmask:target .movedown{       
    margin:10% auto;
}
.modalmask:target .rotate{     
    transform: rotate(360deg) scale(1,1);
        -webkit-transform: rotate(360deg) scale(1,1);
}
 
.modalmask:target .resize{
    width:400px;
    height:200px;
}

/*Boton de cerrar*/
.close {
    color: #003865;
    line-height: 25px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    font-size: 21px;
}
 
.close:hover {
   
    color:#003865;
}



ul {
    list-style: none;
}



.reveal {
    z-index: 1006;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: none;
    padding: 1rem;
    border: 1px solid #cacaca;
    border-radius: 3px;
    background-color: #fefefe;
    position: relative;
    top: 100px;
    margin-right: auto;
    margin-left: auto;
    overflow-y: auto;
}

/*prueba de hover imagenes uno */




/*MONETARIA*/


.picture {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/Monetaria.png') no-repeat;
  background-size: contain;
  padding: 9rem;
}


.picture:hover {
  background: url('../im/MONETARIA/hover-cuenta-monetaria.webp') no-repeat;
  background-size: contain;
}


.picture2 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/Ahorro.png') no-repeat;
  background-size: contain;
  padding: 9rem;
}


.picture2:hover {
  background: url('../im/AHORRO/hover-cuenta-ahorro.webp') no-repeat;
  background-size: contain;
}



.picture3 {
  width: 210px;
  height: 200px;
  background: url('../im/INVERSIONES/Inversiones.png') no-repeat;
  background-size: contain;
  padding: 9rem;
}


.picture3:hover {
  background: url('../im/INVERSIONES/hover-cuenta-inversiones.webp') no-repeat;
  background-size: contain;
}


.picture4 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/que-moneda-utilizaras-dolares.webp') no-repeat;
  background-size: contain;
}


.picture4:hover {
  background: url('../im/INVERSIONES/plazo-fijo-inversion-dolares-default.png') no-repeat;
  background-size: contain;
}


/*.picture5 {
  width: 210px;
  height: 200px;
  background: url('../im/INVERSIONES/Quetzales-hover.png') no-repeat;
  background-size: contain;
}


.picture5:hover {
  background: url('../im/AHORRO/Quetzales.png') no-repeat;
  background-size: contain;
}*/


.picture5 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/cuenta-de-ahorro-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture5:hover {
  background: url('../im/MONETARIA/que-moneda-utilizaras-quetzales.webp') no-repeat;
  background-size: contain;
}



.picture6 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/cuenta-monetaria-default-q50.webp') no-repeat;
  background-size: contain;
}


.picture6:hover {
  background: url('../im/MONETARIA/cuenta-monetaria-hover-q50.webp') no-repeat;
  background-size: contain;
}


.picture7 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/cuenta-monetaria-default-q50-super-cuenta.webp') no-repeat;
  background-size: contain;
}


.picture7:hover {
  background: url('../im/MONETARIA/cuenta-monetaria-hover-q50-super-cuenta.webp') no-repeat;
  background-size: contain;
}

.picture8 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/cuenta-monetaria-default-q50-cuenta-oro-quetzales.webp') no-repeat;
  background-size: contain;
}


.picture8:hover {
  background: url('../im/MONETARIA/cuenta-monetaria-hover-q50-cuenta-oro-quetzales.webp') no-repeat;
  background-size: contain;
}



/*AHORRO HOVER */


/*PRIMER FLUJO*/

.picture9 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/Menor-de-edad.png') no-repeat;
  background-size: contain;
  padding: 9rem;
}


.picture9:hover {
  background: url('../im/AHORRO/cuenta-de-ahorro-menor-de-edad-hover.webp') no-repeat;
  background-size: contain;
}


.picture10 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/Mayor-de-edad.png') no-repeat;
  background-size: contain;
  padding: 9rem;
}


.picture10:hover {
  background: url('../im/AHORRO/cuenta-de-ahorro-mayor-de-edad-hover.webp') no-repeat;
  background-size: contain;
}



/*SEGUNDO FLUJO*/

.picture11 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/que-moneda-utilizaras-dolares.webp') no-repeat;
  background-size: contain;
}


.picture11:hover {
  background: url('../im/INVERSIONES/plazo-fijo-inversion-dolares-default.png') no-repeat;
  background-size: contain;
}

.picture12 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/cuenta-de-ahorro-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture12:hover {
  background: url('../im/MONETARIA/que-moneda-utilizaras-quetzales.webp') no-repeat;
  background-size: contain;
}


/*TERCER FLUJO*/
.picture13 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/cuenta-de-ahorro-mayor-de-edad-default-10dolares.webp') no-repeat;
  background-size: contain;
}


.picture13:hover {
  background: url('../im/AHORRO/cuenta-de-ahorro-mayor-de-edad-hover-10dolares.webp') no-repeat;
  background-size: contain;
}

.picture14 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/cuenta-de-ahorro-mayor-de-edad-default-500dolares.webp') no-repeat;
  background-size: contain;
}


.picture14:hover {
  background: url('../im/AHORRO/cuenta-de-ahorro-mayor-de-edad-hover-500dolares.webp') no-repeat;
  background-size: contain;
}


/*CUARTO FLUJO */

.picture15 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/ahorro-corriente-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture15:hover {
  background: url('../im/AHORRO/hover-ahorro-corriente-quetzales-default.webp') no-repeat;
  background-size: contain;
}



.picture16 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/beneficio-triple-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture16:hover {
  background: url('../im/AHORRO/hover-beneficio-triple-quetzales-default.webp') no-repeat;
  background-size: contain;
}



.picture17 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/super-cuenta-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture17:hover {
  background: url('../im/AHORRO/hover-super-cuenta-quetzales-default.webp') no-repeat;
  background-size: contain;
}



.picture18 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/ahorro-sos-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture18:hover {
  background: url('../im/AHORRO/hover-ahorro-sos-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture19 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/ahorro-seguro-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture19:hover {
  background: url('../im/AHORRO/hover-ahorro-seguro-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture19-2 {
  padding: 4em !important;
  width: 8em !important;
  height: 4em !important;
  height: 200px;
  background: url('../im/AHORRO/ahorro-5-estrellas-quetzales-default.webp') no-repeat;
  background-size: contain;
}


.picture19-2:hover {
  background: url('../im/AHORRO/hover-ahorro-5-estrellas-quetzales-default.webp') no-repeat;
  background-size: contain;
}


/*QUINTO FLUJO */

.picture20 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/participa-en-sorteos-si.webp') no-repeat;
  background-size: contain;
}


.picture20:hover {
  background: url('../im/AHORRO/hover-si-cuenta.png') no-repeat;
  background-size: contain;
}


.picture21 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/participa-en-sorteos-no.webp') no-repeat;
  background-size: contain;
}


.picture21:hover {
  background: url('../im/AHORRO/participa-en-sorteos-no-hover.webp') no-repeat;
  background-size: contain;
}


/*INVERSIONES*/

.picture22 {
  width: 210px;
  height: 200px;
  background: url('../im/INVERSIONES/plazo-fijo-inversion-dolares-hover.webp') no-repeat;
  background-size: contain;
}


.picture22:hover {
  background: url('../im/INVERSIONES/plazo-fijo-inversion-dolares-default.png') no-repeat;
  background-size: contain;
}


.picture23 {
  width: 210px;
  height: 200px;
  background: url('../im/INVERSIONES/inversion-plazo-fijo-quetzales-hover.png') no-repeat;
  background-size: contain;
}


.picture23:hover {
  background: url('../im/INVERSIONES/inversion-plazo-fijo-quetzales-default.webp') no-repeat;
  background-size: contain;
}


/*prueba de hover imagenes */
/*
.picture {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/Monetaria.png') no-repeat;
  background-size: contain;
}


.picture:hover {
  background: url('../im/AHORRO/Ahorro-hover.png') no-repeat;
  background-size: contain;
}



.picture2 {
  width: 210px;
  height: 200px;
  background: url('../im/MONETARIA/Monetaria.png') no-repeat;
  background-size: contain;
}


.picture2:hover {
  background: url('../im/AHORRO/Ahorro-hover.png') no-repeat;
  background-size: contain;
}

.picture3 {
  width: 210px;
  height: 200px;
  background: url('../im/AHORRO/Ahorro.png') no-repeat;
  background-size: contain;
}


.picture3:hover {
  background: url('../im/AHORRO/Ahorro-hover.png') no-repeat;
  background-size: contain;
}*/
/*imagen modal */

img.imgmodal1 {
    width: 28rem;
    padding: 0px !important;
    margin-top: -10px;
}

img.imgmodal1:hover {
transition: none !important;
-webkit-transform: inherit;
}


img.imgmodal1-2 {
  width: 22em;
  padding: 0px !important;
  margin-top: -10px;
}

img.imgmodal1-2:hover {
transition: none !important;
-webkit-transform: inherit;
}
img.imgmodal2 {
    width: 30rem;
    padding: 0px !important;
    margin-top: 13px;
}

img.imgmodal2:hover {
    -webkit-transform: inherit;
}

p.textmodal1{
    color: #8D8D8D;
    margin-bottom: 35px;
    font-size: 20px;
}


/*pasos*/

li.imgpaso1 {
   
    display: grid;

    justify-content: center;
  
    margin-top: -72px;
}

img.imgpasos {
    width: 240px;
    -webkit-transform: inherit;
    padding: 0px;
    margin-top: 11px;

}


@media (max-width: 640px){

  img.imgmodal1 {
    width: 21rem;
    padding: 0px !important;
    margin-top: 0px;
}



  img.imgmodal2 {
    width: 17rem;
    padding: 0px !important;
    margin-top: 13px;
    margin-left: 3rem;
}

    .modalmask:target .movedown {
    margin: 40% auto !important;


}


.modalbox {
    width: 369px!important;
 }

img.imgpasos {
  
    margin-top: 65px;
}

.picture,
.picture2,
.picture3,
.picture15,
.picture16,
.picture17,
.picture18,
.picture19,
.picture19-2{
  padding: 7em !important;
}


.picture6,
.picture7,
.picture8,
.picture4,
.picture5,
.picture9,
.picture10,
.picture11,
.picture12,
.picture13,
.picture14,
.picture15,
.picture16,
.picture17,
.picture18,
.picture19,
.picture19-2,
.picture20,
.picture21,
.picture22,
.picture23{
  padding: 6em !important;
}

img.imgmodal1-2{
  width: 17em !important;
}

img.imgmodal1{
  width: 19em !important;
}


    }


@media (max-width: 1024px){

  p.textmodal1 {
    color: #8D8D8D;
    margin-bottom: 35px;
    font-size: 16px;
}


.modalmask:target .movedown {
    margin: 10% auto !important;
}

.modalbox {
    width: 40rem;
    
}
}
.section-size-privado {
    width: 100%;
    min-height: calc(130vh - 467px);
    margin-bottom: 40px;
    margin-top: 15px;
}

.textbuttonmodal {
    font-size: 13px !important;
}

h3.tucuentaes {
    color: #8d8d8d;
    font-size: 23px;
    margin-top: 39px;
}