:root{
    --citi-blue: #056dae /*#002a54*/;
    --light-gray: #dcdde2;
    font-size: 12px;
}
@font-face {
    font-family: Interstate;
    src: url(Interstate-Regular.woff);
  }
img{
    width: 100%;
}
h2 {
    font-size: 2.1rem;
    text-align: center;
    margin: 60px;
    font-weight: normal
}
h3{
    font-size: 1.8rem;
    text-align: center;
    font-weight: normal
}
h5{
	font-size:1.5rem;
    font-weight: normal

}
.font-normal{
	font-size:1.3rem;
	font-weight: normal;
	
}
.font-light{
	font-size: 1.3rem;
	font-weight:light;
}

.main.container {
    background-color: white !important;
}
/*.main.container *{
    font-family: Interstate !important;
}*/
.top.row {
    background-color: var(--citi-blue);
    background: url(../img/Hero-Desktop.jpg);
    background-position: center -1px;
    background-size: cover;
}
div#banner {
    width: 80%;
    height: 280px !important;
    display: grid !important;
    grid-template-columns: 1fr 4fr;
    margin: 0 auto !important;
    float: none;
}
.logo {
    padding-top: 35px;
}
.logo img{
    width: 260px;
}
.headerText {
    padding: 96px;
}
.headerText h2{
    font-size: 2rem;
    color: white;
    text-align: left;
    margin-left: -350px;
    margin-top: 50px;
}
.headerText h2 a {
    font-size: 2rem;
    color: white;
    text-decoration: underline;
}
.beneficios {
    min-width: 1020px;
    max-width: 1280px;
    width: 80%;
    max-height: 350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    /*background-color: var(--light-gray);*/
    /*box-shadow: -6px 12px 18px -4px #989cb6;*/
    margin-bottom: 50px;
    overflow: hidden;
	background-color: #F5F7FC;
}
.cashless{
	width: 80%;
	margin: 0 auto;
}
.benText {
    padding: 15px 70px 0;
    text-align: left;
}
.benText p a {
    font-size: 1.4rem;
    font-weight: bold;
}
.benText p a:hover, a.cta:hover{
	color: black;
	background-color: black;
    background-color: white;
    box-shadow: -6px 14px 20px -2px #878ba5;
}
.benText h3 {
    font-size: 2.3rem;
    margin-bottom: 10px;
	text-align: left;
}
.benText p {
    font-size: 16px;
    line-height: 2.3rem;
}
.benText a{
	color: white;
}
.especial{
	color:black !important;
}

.benIntImg{
	height: 100%;
	width:100%;
}

a.cta {
    background-color: var(--citi-blue);
    padding: 25px 50px;
    border-radius: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    display: block;
    width: 220px;
    margin-top: 20px;
	text-align: center;
    /*box-shadow: -6px 12px 18px -4px #989cb6;*/
}
.infoBlocks {
    padding: 70px 0;
    margin-top: 20px;
    background-color: #F5F7FC;
    background-size: cover;
    /*background-image: url(../img/blue-bg.jpg);*/
	
}
.infoBlockGrid {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}
.cliente{
	background-color: #F5F7FC;
	text-align: left;
	padding: 4% 8%;
	
}
.clientetext{
    margin-top: -20px;
	text-align: left;
	padding: 4% 8%;
}
.infoInterior{
	display:grid;
	grid-auto-flow: column;
    justify-content: flex-start;
	gap:20px;	

}
.citiInterior{
	color: var(--citi-blue);
	font-size: 2.2rem;
	
}

.citiInteriorFooter{
	color: var(--citi-blue);
	font-size: 1.6rem;
}
.citiInteriorFooter:hover{
	color: var(--citi-blue);
}

.infoBlocks h2, .infoBlocks h3{
    color: black;
}
.infoBlocks h2, .solicita h2 {
    margin: 20px;
}
.infoBlocks h3, .solicita h3 {
    font-weight: normal;
    margin-bottom: 80px;
}
.infoBlock h3 {
    color: black;
    font-weight: bold;
    margin-bottom: 30px;
	
}
.infoBlock p {
    color: black;
    text-align: left;
    font-size: 1.3rem;
    line-height: 20px;
	margin-top: -20px;
	margin-left: 50px;
}

.footerInfo{
	font-weight:bold;
	font-size: 1.6rem;
	margin-top:70px;
	text-align:center;
	
}
.solicita {
    margin: 60px auto;
    width: 80%;
   /* text-align: center;*/
}

.solicitaInterior{
	width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}
.solicita img {
    width: 80%;
	margin: 0 auto;
}
.solicitud{
	display:grid;
	row-gap:20px;
	border-radius: 20px;
	box-shadow: 0px 42px 60px -32px rgba(181,190,206,0.71);
	-webkit-box-shadow: 0px 42px 60px -32px rgba(181,190,206,0.71);
	-moz-box-shadow: 0px 42px 60px -32px rgba(181,190,206,0.71);
	padding: 20px;
	
}
.solicitud h4{
	font-size: 1.8rem;
	font-style: normal;
	font-weight: normal;
	
}
.solicitud p{
	font-size: 1.5rem;
	line-height: 20px;
}
.solicitud a{
	
	font-size: 1.5rem;
	color: var(--citi-blue);
	margin-top: -20px;
	
}
.solicitud a:hover{
	
	color:var(--citi-blue);
	
	
}
.solicita a.cta {
    padding: 20px 80px;
    width: 360px;
    font-size: 1.8rem;
    display: block;
    margin-top: 60px;
}
.footerSolicitud{
	font-size: 16px;
	line-height: 20px;
	text-align:left;
	
}
.footerSolicitud  h3{
	font-size: 16px;
	text-align:left;
	margin-bottom:10px;
}
.divFooterSolicitud{
	
	display: flex;
    justify-content: space-between;
    gap: 20px;
	
}
.imgFooterSolicitud{
	padding: 5px;
	width: 70px;
    height: 40px;
}

.citi-link{
	color: #056dae;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 300;
    line-height: inherit;
    position: relative;
}
.citi-link:hover, .citi-link:focus{
	color: #056dae !important;
}
.citi-link-1{
	color: #056dae;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: inherit;
    position: relative;
}
.citi-link-1:hover{
	color: #056dae;
}
.cbx-svg-icon {
    min-height: 20px;
    height: 40px;
    fill: black;
    display: block;
    margin: 0 auto 30px;
}
.carousel{
	display:none !important;
}

	.catprom {
    font-weight: bold !important;	
	font-size:1.5rem;
	}


footer h2, footer h3 {
    text-align: left !important;
}
@media screen and (min-width: 980px) and (max-width: 1420px){
    .beneficios {
        max-height: 350px;
    }
    .benText {
        padding: 20px;
    }

}
@media screen and (min-width: 640px) and (max-width: 980px){
    div#beneficios {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

@media screen and (max-width: 640px){
    
.solicitud{

	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	padding: 20px;
	
}

}
@media screen and (max-width: 980px){
    h2 {
        font-size: 1.8rem;
        margin: 40px 20px;
    }
    h3 {
        font-size: 1.4rem;
    }
    .beneficios, .solicita img {
        min-width: 90%;
        width: 90%;
    }
    .top.row {
        background: url(../img/Hero-Mobile.jpg);
        background-position: bottom;
        background-size: cover;
    }
    div#banner {
        grid-template-columns: 1fr;
        height: 240px !important;
    }
    .beneficios, .infoBlockGrid{
        grid-template-columns: 1fr;
        max-height: none !important;
    }
	.infoInterior{
	display:grid;
	justify-content: stretch;
    align-items: center;
	
	}
	.solicitaInterior{
	display: none !important;
	/*width: 90%;
    grid-template-columns: 1fr 1fr;
    gap: 40px;*/
	}
	

	.footerSolicitud{
	text-align:center;
	}



    .par .benImg {
        order: 1;
    }
    .par .benText {
        order: 2;
    }
    .benText {
        padding: 40px 20px;
    }
    .benText h3 {
        font-size: 1.5rem;
    }
    .benText p {
        font-size: 1.2rem;
        line-height: 28px;
    }
    .logo {
        padding-top: 30px;
    }
    .logo img {
        width: 180px;
    }
    .cta{
        color: var(--citi-blue);
    }
    .headerText {
        padding: 20px 0;
    }
    .headerText br{
        display: none;
    }
    .headerText h2, .headerText h2 a {
        font-size: 2rem;
		margin-left: 5px;
		margin-top: 5px;
    }
    .infoBlocks {
        padding: 60px 20px;
        /*background-image: url(../img/mobile-blue-bg.jpg);*/
    }
    .infoBlocks h3, .solicita h3 {
        margin-bottom: 60px;
    }
    .infoBlock p{
        text-align: left;
        margin-bottom: 10px;
		margin-top: -10px;
		margin-left: 106px;
    }
	.infoBlock h3 {
		text-align: left;
        margin-bottom: 20px;
		margin-top: -10px;
	}
    .infoBlocks h2, .infoBlocks h3, .infoBlock p, .infoBlock h3 {
        color: black;
    }
    .infoBlockGrid, .solicita {
        width: 100%;
    }
	a.cta{
	background-color: var(--citi-blue);
    padding: 20px 50px;
    border-radius: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    display: block;
	width: 100%;
    margin-top: 20px;
    text-align: center;
	}
	
.carousel{
	display:block !important;
}

.carousel-cell {
  width: 70%;
  height: 500px;
  /* flex-box, center image in cell */
  display: -webkit-box;
  display: -webkit-flex;
  display:         flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

.carousel-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* dim unselected */
  opacity: 0.7;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
          transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

/* brighten selected image */
.carousel-cell.is-selected img {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: none;
          filter: none;
}

/* buttons, no circle */
.flickity-prev-next-button {
  width: 60px;
  height: 60px;
  background: transparent;
  opacity: 0.6;
}
.flickity-prev-next-button:hover {
  background: transparent;
  opacity: 1;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: white;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* closer to edge */
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* hide disabled button */
.flickity-prev-next-button:disabled {
  display: none;
}
}