@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');
@font-face {
  src: url('fonts/billy-ohio.woff2') format('woff2'),
       url('fonts/billy-ohio.woff') format('woff'),
       url('fonts/billy-ohio.ttf')  format('truetype');
  font-family: 'Billy Ohio';
}
html {font-size: 62.5%;} /* reset font-size to 10px  */
*, *:before, *:after {margin:0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*:focus {outline:0;}
img {border: 0; vertical-align: bottom;}
table {border-collapse: collapse; border-spacing: 0;}
.trans, a {-webkit-transition: all ease 0.2s; -o-transition: all ease 0.2s; transition: all ease 0.2s;}
a {text-decoration: none;}
a:hover {color: var(--lgreen);}
/* end reset */
body {font: 1.6rem/1.4 'Montserrat', sans-serif; color: #6A737B;}
/* comodines*/
:root {
  --dgreen: #007550; --mgreen: #009D0C; --lgreen: #BED73D;
  --crecemujer: #c4007a; --gencolor: #6A737B;
}
.gencontainer {position: relative; overflow: hidden;}
.maxw {width: 100%; max-width: 1340px; margin: auto;}
.w100 {width: 100%;} .h100 {height: 100%;}
.plite {padding: 50px 0;} .pmedium {padding: 80px 0;}
.plarge {padding: 120px 0;} .ptop {padding: 120px 0 0;} .pltop {padding: 50px 0 0;}
.whiteColor {color: #fff;} .dgreen {color: var(--dgreen);} 
.mgreen {color: var(--mgreen);} .lgreen {color: var(--lgreen);}
.gencolor {color: var(--gencolor);}
.crecemujer {color: var(--crecemujer);} .bgdgreen {background: var(--dgreen);}
.parrafo {margin-bottom: 20px;} .tcenter {text-align: center;}
.tright {text-align: right;} .greybg {background: #f4f4f4;}

/* estilo general para botones */
.btn {
	display: inline-block; position: relative; z-index: 1;
	font-size: 1.6rem; overflow: hidden; border: 1px solid transparent;
	margin: 20px 0 0; color: #fff; padding: 12px 45px; cursor: pointer;
}
.btn:before {
	content: ""; position: absolute; width: 0; height: 250px;
	top: 0; bottom: 0; left: 0; right: 0; margin: auto;
	z-index: -1; transform: rotate(35deg); transition: all ease .2s;
}
.btn:hover:before {width: 100%;}
.btnwhite {border-color: #fff;}
.btnwhite:before {background: #fff;}
.btnGreen, .btnwhite:hover {color: var(--dgreen);}
.btnGreen {border-color: var(--dgreen);}
.btnGreen:before {background: var(--dgreen);}
.btnGreen:hover {color: #fff;}
.btnsolidGreen {background: var(--dgreen); border-color: var(--dgreen);}
.btnsolidGreen:before {background: #fff;}
.btnsolidGreen:hover {color: var(--dgreen);}

.btnlgreen {border-color: var(--lgreen);}
.btnlgreen:before {background: var(--lgreen);}
.btnlgreen:hover {color: var(--dgreen);}
/* fin estilo general para botones */
.blackfont {font-weight: 700;}
/* títulos para bloques home */
.title {font-size: 4rem; font-weight: 700;}
.titleblock p {font-size: 1.8rem;}


/* cards home */
.tbtn {
	background: #f9f9f9;
	padding: 35px 20px;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	transition: all ease .2s;
}
.tbtn:hover {background: #eee;}
.tbtn:hover img {
  -webkit-transform: rotate3d(1, 1, -1, 25deg);
  transform: rotate3d(1, 1, -1, 25deg);
/*  box-shadow: -2px 0 10px 5px #000;*/
}
.tbtn img {
	width: 100%;
	max-width: 160px;
	margin-bottom: 20px;
	transition: all ease .2s;
}
.tbtn h2 {font-size: 2rem;}
/* group items */
.itemgroup {padding: 5px;}
.contentgroup {height: 100%; padding: 20px; color: inherit;}
a.contentgroup:hover {    background: rgba(0,0,0,.03); }
.imggroup {
	height: 145px; width: 145px; margin: 0 auto 15px;
	padding: 5px; border-radius: 50%; border: 3px solid var(--dgreen); 
	-webkit-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
}
a.contentgroup:hover .imggroup {border-color: var(--lgreen); box-shadow: 0 2px 15px rgba(0,0,0,.3);}
.textgroup {flex-grow: 1; text-align: center;}
.textgroup h1, .largebtn h1 {font: 2.2rem Arial; margin-bottom: 5px;}

/* cuentas de ahorro Home */
.ahorrosHome {
	padding: 5px; border: 1px solid rgba(0,0,0,.15);
	margin: 10px 0;
}
.ahorrosHome h2 {
	font-size: 1.6rem; font-weight: 500;
	margin-bottom: 8px;
}
.ahorrosHome p {color: var(--gencolor);}
.ahorrotext {padding: 15px; width: calc(100% - 128px);}
.ahorrosHome:hover{background: rgba(0,0,0,.05);}

.ahorroimg {width: 128px;overflow: hidden;}
.ahorroimg img {
  transition: transform .5s, filter 1.5s ease-in-out;
}
.ahorrosHome:hover img {transform: scale(1.1);}

/* botones de gestiones en línea home */
.btns-gestiones, .presolicitud {
/*	border-top: 5px solid var(--lgreen);
	border-bottom: 5px solid var(--lgreen);*/
	background: url(../img/canales-bg-home.jpg) no-repeat center top;
	background-size: cover;
}
.btns-gestiones ul {margin: 25px 0 15px;}
.btns-gestiones ul li {
    list-style-type: none; width: 100%; padding: 2px 8px;
}
.btns-gestiones ul li a {
    height: 100%; padding: 15px; color: #fff;
    -webkit-box-shadow: inset 0 0 rgba(0,0,0,.3);
    box-shadow: inset 0 0 rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.5);
}
.btns-gestiones ul li a:hover {
    -webkit-box-shadow: inset 0 -140px rgba(255,255,255,.2);
    box-shadow: inset 0 - 140px rgba(255,255,255,.2);
}
.textbtn {padding-left: 10px; font-size: 1.4rem;}
.btns-gestiones ul li a h4 {font-size: 1.4rem;}

/* bloque SERVICIOS home */
.btnsblock {margin: 10px 0;}
.contentbtns {
	display: block; height: 100%; color: inherit;
	background: #e4e4e4; padding: 25px 55px;
	border-bottom: 8px solid var(--dgreen);
}
.contentbtns:hover {background: var(--dgreen); color: #fff; border-bottom: 8px solid var(--lgreen);}
.contentbtns:hover h1 {color: var(--lgreen);}
.btnico {width: 100px; height: 94px;}
.btnfedepunto {background: url(../img/ico01.png) no-repeat center top;}
.btremesas {background: url(../img/ico-remesas-home.png) no-repeat center top;}
.btsalud {background: url(../img/ico-salud-home.png) no-repeat center top;}
.btcolectores {background: url(../img/ico-pago-colectores.png) no-repeat center top;}
.btcpyme {background: url(../img/ico-credito-pymes.png) no-repeat center top;}
.btcpopular {background: url(../img/ico-credito-popular.png) no-repeat center top;}
.btcvivienda {background: url(../img/ico-credito-vivienda.png) no-repeat center top;}
.btcmicro {background: url(../img/ico-credito-microempresa.png) no-repeat center top;}
.btcpersonal {background: url(../img/ico-credito-personal.png) no-repeat center top;}
.btcagro {background: url(../img/ico-credito-agropecuario.png) no-repeat center top;}
.btcvista {background: url(../img/ico-ahorro-vista.png) no-repeat center top;}
.btcinfantil {background: url(../img/ico-ahorro-infantil.png) no-repeat center top;}
.btcprogramado {background: url(../img/ico-ahorro-programado.png) no-repeat center top;}
.btcplazo {background: url(../img/ico-deposito-plazo.png) no-repeat center top;}
.contentbtns:hover .btnico {background-position: center bottom;}

.reportbtns {background: #ededed;}
.rbtns {margin: 20px; text-align: center;}
.rbtns a {min-width: 242px; padding: 15px 35px; font-weight: 700;}

/* inicia internas - backgrounds para headers */
.blackbg {
    width: 100%; height: 100%; position: absolute;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.bg-header {
	background-image: var(--bghead); 
	min-height: 315px;
}
.gb-cover {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* créditos */
.titleblock {position: relative;}
.blockimg { 
	overflow: hidden; height: calc(100% - 12px);
	background-image: var(--bgleft);
	box-shadow: 12px 12px var(--lgreen);
	background-repeat: no-repeat;
	background-size: cover;
}
.mw480 {max-width: 480px;}
.tabcontent {padding: 35px 30px; min-height: 450px;}
.tabcontent h3 {font-weight: 500;}
.tabcontent h2, .bottomgreen {
	margin-bottom: 25px; border-bottom: 3px solid var(--lgreen);
	padding-bottom: 5px;
}
.tabcontent h3 {font-size: 1.6rem; margin-bottom: 5px;}
.genlist, .genlist ul {padding-left: 20px;}
.genlist li {margin: 10px 0;}
.genlist li::marker {color: var(--lgreen);}

/* tarjetas de crédito */
.promoSlide .flex-control-paging li a.flex-active {
    background: var(--lgreen);
}
.promoSlide .flex-control-paging li a:hover {
    background: var(--dgreen);
}
.borderslide {border: 2px solid rgba(0,0,0,.2);}
.creditcardslide {
	max-width: 290px; text-align: center; 
	color: var(--dgreen); overflow: hidden;
	margin: auto;
}
.creditcardslide h3 {
	font-size: 2rem;
	font-weight: 900; padding: 0 5px 10px;
}

.genericbox {
	background: #fff; border-radius: 10px;
	box-shadow: 0 0 3px rgba(0,0,0,.1);
	padding: 30px;
}
/* canales electrónicos */
.logocanales {margin: 0 0 20px;}
.downloadapp a {display: inline-block; margin: 5px;}
.downloadapp a:hover {opacity: .4;}
.cajeros {padding: 15px 0;}
.cajeros img {margin-right: 10px;}

.fedechat {
	padding: 20px;
}
.fedechat a {
	font-size: 2.4rem;
	font-weight: 700;
}
/* FEDE PUNTO VECINO */
.fedepunto {
	max-width: 380px; padding: 20px; 
	margin: 15px 0; border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px; background: #fff;
}
.fedepunto h6 {
	padding-bottom: 3px;
	border-bottom: 1px solid var(--lgreen);
}
.fedepunto h3 {margin: 10px 0;}
.fedepunto a:hover {color: var(--lgreen);}
.fedepunto p {flex-grow: 1}

.owl-carousel {
    overflow: hidden;
    max-width: 980px;
    margin: auto;
}
.owl-carousel .owl-nav button {line-height: 1;}
.owl-nav {
    position: absolute; top: 0%; bottom: 0; width: 100%;
    display: flex; font-size: 80px; justify-content: space-between;
    align-items: center;
}
.owl-stage-outer {margin: 0 30px;}

/* contacto */
.contactcontent {padding:  20px 35px;}
.contactdetails {
	border: 1px solid rgba(0,0,0,.1);
	border-top:  3px solid var(--lgreen);
}
.contactblock {
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding: 18px 20px;
}
.contactblock:last-child {border:  none;}
.p20 {padding: 20px;}
.contactsocial {border-bottom: 4px solid var(--dgreen);}
.contactsocial div {
	background: var(--dgreen);
	position: relative;
	padding: 5px 20px 1px;
}
.contactsocial a {
	font-size: 3rem; color: #fff;
	margin:  0 5px;
}
.contactsocial a:hover {color: var(--lgreen);}
.contactsocial div:before {
	position: absolute;
	content: ""; width: 0; height: 0;
	bottom: 0; left: -40px;
	border-width: 0 0 45px 40px;
	border-style: solid;
	border-color: var(--dgreen) transparent;
}
 /* agencias */
.agenciablock {
	padding: 20px;
	border: 1px solid rgba(0,0,0,.2);
	border-bottom: 6px solid var(--lgreen);
	margin-bottom: 20px;
}
/*.agenciainfo {padding: 20px 0;}*/
.agenciainfo h2 {
	font-size: 2.4rem; font-weight: 500;
/*	border-bottom: 1px solid var(--lgreen);*/
	padding-bottom: 5px;
}

/* inmuebles en venta */
.inmuebles {margin-bottom: 20px;}
.inmuebles > div {min-width: 130px;}
.inmuebles > div:first-child h3 {background: var(--lgreen);}
.inmuebles h3 {background: #F2F2F2;}
.inmuebles h3, .inmuebles p {padding: 5px 12px; font-size: 1.5rem;}

/* gobierno corporativo */
.gobbtns li {list-style-type: none; padding: 20px 30px;}
.gobbtns li a {display: block; width: 180px; text-align: center; color: inherit;}
.gobbtns li a p {font-size: 1.2rem; margin: 20px 0;}
.gobimg {
	width: 120px; height: 120px; margin: auto;
	border: 2px solid var(--dgreen);
	-webkit-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
	border-radius: 15px;
}
.gobimg img {
	-webkit-transition: transform .5s ease-in-out;
	-o-transition: transform .5s ease-in-out;
	transition: transform .5s ease-in-out;
}
.gobbtns li a:hover {color: var(--dgreen);}
.gobbtns li a:hover .gobimg {background: #E8E8E8;}
.gobbtns li a:hover img {transform: rotateY(360deg);}
.medios {
	padding: 20px 50px; color: var(--dgreen);
	position: relative; padding-bottom: 50px;
}
.medios h1 {
	text-align: center; padding: 12px 35px 12px 20px;
	background: var(--dgreen); font-size: 1.5rem; color: #fff;
	cursor: pointer; border-radius: 5px;
	transition: all ease .2s; position: relative;
}
.medios h1:before {
	content: ""; position: absolute; width: 0; height: 0;
	top: 20px; right: 15px; border-width: 6px; border-style: solid;
	border-color: #fff transparent transparent transparent;
}
.medios h1:hover {background: var(--dgreen);}
.medios-box {display: none;}
.medios table {width: 100%; height: 100%;}
.medios-box th {
	font-size: 1.6rem; text-align: left; padding: 3px;
	border-bottom: 2px solid var(--dgreen);
}
.medios-box td {
	font-size: 1.4rem; padding: 5px 35px 5px 3px;
	border-bottom: 1px solid var(--dgreen);
}
.mediosBtn {cursor: pointer;}

/* quienes somos */
.borderImage {border: 6px solid var(--lgreen);}
.qsomos h3 {margin-bottom: 10px;}
.qsomosslide {
	background: transparent;
	border: transparent;
}
.qsomosslide p {padding: 0 40px;}
.qsomosslide p span {color: var(--dgreen);}
.misvis {
    height: 100%; padding: 35px 70px;
    background: #fff;
    box-shadow: 0 0 7px rgba(0,0,0,.2);
    border-top: 14px solid var(--lgreen);
}
.sq-subtitle {
    text-align: center; margin: 25px 0;
    position: relative; z-index: 10;
    font-size:3rem;
}
.sq-subtitle::before {
    content: attr(data-title);
    position: absolute; color: #ebebeb;
    left: 0; right: 0; top: -25px;
    margin: auto; font-size: 65px;
    font-weight: 600; z-index: -1;
}
.history ul {
	padding: 0 0 0 25px;
}
/* ofertas de bolsa de trabajo */
.offers {
	max-width: 800px;
	margin: auto;
}

@media screen and (max-width: 1160px) { 
	.int-top {padding: 0;}
}

@media screen and (max-width: 1366px) {
	.generica {padding: 0;}
}
@media screen and (max-width: 1280px) {
	.plarge {padding: 80px 0;}
	.ptop {padding: 80px 0 0;}
	.inttitle {padding: 10px 20px;}
}
	.bgsocilita-infantil, .bg-tarjetas-home {
		background-size: cover;
	    background-position: center;
	}
}
@media screen and (max-width: 1024px) {
	.int-top {padding: 0;}
}
@media screen and (max-width: 980px) {
	.plarge {padding: 60px 0;}
	.ptop {padding: 60px 0 0;}
	.pmedium {padding: 40px 0;}
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 860px) {
	.btns-gestiones ul li a {
		display: block;
		text-align: center;
	}
	.textbtn {padding-left: 0;}
	.contentbtns {padding: 25px 30px;}
	.ahorrosHome p {font-size: 1.4rem;}

@media screen and (max-width: 800px) {
	.title {line-height: 1;}
	.gobbtns li {padding: 20px 5px;}
}
@media screen and (max-width: 768px) {
	.plarge {padding: 40px 0;}
	.ptop {padding: 40px 0 0;}
	.plite {padding: 35px 0;}
	.tabcontent { padding: 0 10px 10px; min-height: auto;}
	.presolicitud {text-align: center;}
	.ahorrosHome {margin: 0;}
	.tabcontent {padding: 25px;}
	.genlist li {margin: 6px 0;}
	.contactcontent {padding: 20px 10px;}
	.misvis {padding: 30px 20px;}
}
@media screen and (max-width: 640px) {
	.plite {padding: 30px 0;}
	.imgmobil {width: 100%;}
	.title {margin-bottom: 10px; font-size: 3.6rem;}
	.titleblock p {font-size: 1.6rem;}
	.tabcontent {padding: 10px 5px;}
	.contactcontent {padding: 20px 0;}
	.genericbox {padding: 10px;}
	.gobbtns li a {width: 150px;}
	.medios {padding: 20px 10px;}
}
@media screen and (max-width: 568px) {
	.plarge, .pmedium {padding: 35px 0;}
	.ptop {padding: 35px 0 0;}
	.plite {padding: 20px 0;}
	.btns-gestiones ul {margin: 0;}
	.btns-gestiones ul li {margin: 15px 0;}
	.contactblock {padding: 18px 10px;}
	.agenciablock {padding: 20px 10px;}
}
@media screen and (max-width: 480px) {
	.itemLeft {padding: 0; border: none;}
	.titleint {font-size: 2.2rem;}
	.contentgroup {padding: 20px 0px;}
	.largebtn {padding: 20px 0 10px; margin: 5px auto;}

	.contentbtns {margin-bottom: 20px;}
} /* max-width: 480px*/
@media screen and (max-width: 425px) {
	.det li {background: none !important; padding-left: 0;}
} /* max-width: 425px*/
@media screen and (max-width: 375px) {
	.title {font-size: 3.5rem;}
}