@font-face {
    font-family: 'Futura Std';
    src: url(fonts/FuturaStd-Heavy.woff2) format('woff2'), url(fonts/FuturaStd-Heavy.woff) format('woff'), url(fonts/FuturaStd-Heavy.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: latoregular;
    src: url(fonts/lato-regular.woff2) format('woff2'), url(fonts/lato-regular.woff) format('woff'), url(fonts/lato-regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: latobold;
    src: url(fonts/lato-bold.woff2) format('woff2'), url(fonts/lato-bold.woff) format('woff'), url(fonts/lato-bold.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: slick;
    src: url(fonts/slick.woff) format('woff'), url(fonts/slick.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

div {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent
}

article {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

main {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

footer,
header,
main {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-family: latoregular, sans-serif;
    font-weight: 400;
    background: #fff;
    line-height: 1.4 rem;
    overflow-x: hidden
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: #ec0000
}

input {
    border: none;
    outline: 0
}

strong {
    font-family: latobold, sans-serif;
    font-weight: 400
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

p {
    margin: 0;
    padding: 0;
    line-height: 1
}

.layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem
}

.row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -.5 rem;
    margin-left: -.5 rem
}

.column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.row-no-margin {
    margin-right: 0;
    margin-left: 0
}

.header-portada {
    background: 0 0;
    position: relative
}

.portada-logo-bcopp {
    margin: 20px 0 0 0;
    width: 178px;
    height: 32px
}

.portada-logo-sinfilas {
    width: 288px;
    height: 63px;
    margin: 20px 0 20px 0
}

.portada-titulo {
    font-family: latobold, sans-serif;
    font-size: 1em;
    line-height: 1.3;
    color: #00549b;
    margin: 0 0 20px 0
}

.portada-btn {
    width: 130px;
    height: 45px;
    border: 1px solid #00549b;
    border-radius: 8px;
    margin: 5px
}

.portada-btn:hover {
    border: 2px solid #00549b;
    -webkit-box-shadow: -1px -1px 4px 0 rgba(0, 84, 155, .2), 1px 1px 4px 0 rgba(0, 84, 155, .2);
    box-shadow: -1px -1px 4px 0 rgba(0, 84, 155, .2), 1px 1px 4px 0 rgba(0, 84, 155, .2)
}

.activo#listaCompras,
.activo#listaConsulta,
.activo#listaDepositos,
.activo#listaEnvios,
.activo#listaPagos,
.activo#listaRetiros {
    border: 2px solid #00549b;
    -webkit-box-shadow: -1px -1px 4px 0 rgba(0, 84, 155, .2), 1px 1px 4px 0 rgba(0, 84, 155, .2);
    box-shadow: -1px -1px 4px 0 rgba(0, 84, 155, .2), 1px 1px 4px 0 rgba(0, 84, 155, .2)
}

.linea-btn {
    width: 122px;
    height: 3px;
    background: #fff
}

ul#listaPortada li {
    cursor: pointer
}

ul#listaPortada li:hover .linea-btn {
    background: #00549b
}

ul#listaPortada li.activo:hover .linea-btn,
ul#listaPortada li:active .linea-btn {
    background: #fcd43c
}

.activo#lineaCompras,
.activo#lineaConsulta,
.activo#lineaDepositos,
.activo#lineaEnvios,
.activo#lineaPagos,
.activo#lineaRetiros {
    background: #fcd43c
}
.icon-consultas {
    background: url(../images/svgs/menu-portada-consultas.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-envios {
    background: url(../images/svgs/menu-portada-envios.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-pagos {
    background: url(../images/svgs/menu-portada-pagos.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-depositos {
    background: url(../images/svgs/menu-portada-depositos.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-retiros {
    background: url(../images/svgs/menu-portada-retiros.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-compras {
    background: url(../images/svgs/menu-portada-compras.svg) 0 0 no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}
.icon-portada-btn {
    width: 28px;
    height: 33px
}

.icon-portada-btn__pagos {
    width: 29px;
    height: 34px
}

.portada-btn-texto {
    font-size: 15.3px;
    color: #00549b;
    width: 73px;
    height: 20px;
    font-family: latobold, sans-serif
}

.activo#textoCompras,
.activo#textoConsulta,
.activo#textoDepositos,
.activo#textoEnvios,
.activo#textoPagos,
.activo#textoRetiros,
ul#listaPortada li:hover .portada-btn-texto {
    font-family: latobold, sans-serif
}

ul#listaPortada li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

ul#opciontesLista li {
    pointer-events: none
}

.btns-iconos-texto {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    height: 31px;
    margin: 0 0 3px 0
}

.internas-btns {
    height: 182px;
    width: 100%;
    background-color: transparent
}

.portada-opcion {
    width: 132px;
    height: 33px;
    background-color: transparent
}

.activo#opcionAlianzas,
.activo#opcionBcopp,
.activo#opcionCajeros,
.activo#opcionCat,
.activo#opcionWhat,
.activo#opcionChat,
.activo#opcionConsultas,
.activo#opcionExpress,
.activo#opcionMovil {
    background: #e8e8e7;
    cursor: pointer;
    pointer-events: all;
    border-radius: 5px
}

.opcion-texto {
    font-family: latobold, sans-serif;
    font-size: .8rem;
    text-align: center;
    line-height: 1;
    color: #d8d8d8
}

.activo#textoAlianzas,
.activo#textoBcopp,
.activo#textoCajeros,
.activo#textoCat,
.activo#textoWhat,
.activo#textoChat,
.activo#textoConsultas,
.activo#textoExpress,
.activo#textoMovil {
    color: #00549b
}

.opcion-icono {
    width: 91px;
    height: 87px;
    margin: 0 0 13px 0
}

.opcion-icono-impar {
    width: 91px;
    height: 87px;
    margin: 13px 0 0 0
}

#accordion {
    list-style: none;
    float: left;
    padding: 0 !important;
    border: 0 !important;
    width: 80%;
    margin: 30px 0 0 0
}

#accordion li {
    border: 0 !important;
    padding: 0 !important;
    border-radius: 5px;
    width: 100%
}

#accordion li .item {
    display: block;
    float: left;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    border: 1px solid #d1d1d1;
    border-radius: 5px
}

#accordion li ul {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

#accordion ul div {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

#accordion .item {
    margin-top: 10px
}

#accordion .cabeza-item {
    padding: 10px 0
}

#accordion li div.active {
    color: #000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0 solid #d1d1d1
}

#accordion ul {
    list-style: none;
    padding: 16px 0 10px 0 !important;
    margin: 0 !important;
    display: none;
    float: left;
    width: 100% !important;
    border: 1px solid #d1d1d1;
    border-top: 0
}

#accordion ul li {
    font-weight: 400;
    width: auto !important;
    background-image: none !important;
    padding: 0 10px 0 0 !important;
    margin: 0 !important
}

#accordion a {
    text-decoration: none;
    padding: 7px 0 7px 41px;
    width: 198px;
    float: left;
    font-size: 12px;
    color: #2b5c7c
}

.lista-contenido div span:before {
    content: '';
    height: 10px;
    width: 12px;
    position: absolute;
    left: 57px;
    background-image: url(../images/svgs/checado.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 6px
}

#accordion .lista-item {
    padding: 0 0 0 43px;
    text-align: left;
    font-size: 14px;
    color: #636464;
    margin: 0 0 5px 0
}

.secc-contenido {
    margin-top: 85px
}

.box {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 1rem;
    margin-bottom: 0;
    overflow: hidden;
    text-align: center
}

.box-container {
    padding: .5rem
}

.header {
    background: #225aa7;
    height: 135px
}

.logos-header-contenedor {
    padding-top: 17px
}

.footer {
    background: #d1d1d1
}

.ocultar {
    display: none
}

.visible {
    visibility: visible;
    -webkit-animation: aparece .5s ease-out;
    animation: aparece .5s ease-out
}

.margen-fila {
    margin-left: 0;
    margin-right: 0
}

.lh-0 {
    line-height: 0
}

.mb-20 {
    margin-bottom: 20px
}

.fs-18 {
    font-size: 18px
}

.color-azul {
    color: #225aa7
}

#menu a li {
    font-family: latobold, sans-serif;
    font-size: .9rem;
    color: #225aa7
}

#menuToggle {
    display: block;
    position: absolute;
    top: 21px;
    right: 22px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    -webkit-transform-origin: 4px 0;
    transform-origin: 4px 0;
    -webkit-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease;
    transition: transform .5s cubic-bezier(.77, .2, .05, 1), background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1)
}

#menuToggle span:first-child {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

#menuToggle span:nth-last-child(2) {
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

#menuToggle input:checked~span {
    opacity: 1;
    -webkit-transform: rotate(45deg) translate(-2px, -1px);
    transform: rotate(45deg) translate(-2px, -1px);
    background: #225aa7
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    -webkit-transform: rotate(0) scale(.2, .2);
    transform: rotate(0) scale(.2, .2)
}

#menuToggle input:checked~span:nth-last-child(2) {
    opacity: 1;
    -webkit-transform: rotate(-45deg) translate(0, -1px);
    transform: rotate(-45deg) translate(0, -1px)
}

#menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 0;
    padding: 50px;
    padding-top: 125px;
    right: -100px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: transform .5s cubic-bezier(.77, .2, .05, 1);
    transition: transform .5s cubic-bezier(.77, .2, .05, 1), -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
    -webkit-box-shadow: -5px 6px 8px -4px rgba(0, 0, 0, .33);
    box-shadow: -5px 6px 8px -4px rgba(0, 0, 0, .33);
    border-radius: 5px
}

#menu li {
    padding: 10px 0;
    font-size: 1.2 rem;
    font-family: latobold, sans-serif;
    color: #225aa7;
    border-bottom: 1px solid rgba(1, 1, 0, .1)
}

#menuToggle input:checked~ul {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1
}

.encabezado-fijo {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5
}

.encabezado {
    width: 100%;
    height: 70px;
    background: #225aa7;
    padding-right: 20%
}

.logo-bancoppel-hdr {
    width: 107px;
    height: 21px
}

.logo-sinfilas-hdr {
    width: 114px;
    height: 21px
}

.menu-logos-contenedor {
    height: 83px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 9px 7px 0 8px
}

.sprite-menu-logos {
    background: url(../images/sprt.menu.png) no-repeat
}

.btn-sinfilas {
    background: url(../images/svgs/btn-sinfilas.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.texto-menu-9800,
.texto-menu-alianzas,
.texto-menu-bancoppel-com,
.texto-menu-bancoppel-express,
.texto-menu-bancoppel-movil,
.texto-menu-cajeros,
.texto-menu-cat,
.texto-menu-chat,
.texto-menu-compras {
    font-size: 14px;
    color: #006fb9;
    position: relative;
    width: 150px;
    text-align: center;
    top: 83px;
    left: -35px;
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    pointer-events: none
}

.btn9800-logo:hover>.texto-menu-9800,
.btnAlianzas-logo:hover>.texto-menu-alianzas,
.btnBancoppelCom-logo:hover>.texto-menu-bancoppel-com,
.btnBancoppelExpress-logo:hover>.texto-menu-bancoppel-express,
.btnBancoppelMovil-logo:hover>.texto-menu-bancoppel-movil,
.btnCajeros-logo:hover>.texto-menu-cajeros,
.btnCat-logo:hover>.texto-menu-cat,
.btnChat-logo:hover>.texto-menu-chat,
.btnCompras-logo:hover>.texto-menu-compras {
    top: 90px;
    opacity: 1
}

.btnBancoppelCom-logo {
    background: url(../images/svgs/btn-menu-reposo-bcom.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnBancoppelCom>.activo,
.btnBancoppelCom-logo:hover {
    background: url(../images/svgs/btn-menu-activo-bcom.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnBancoppelMovil-logo {
    background: url(../images/svgs/btn-movil-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnBancoppelMovil>.activo,
.btnBancoppelMovil-logo:hover {
    background: url(../images/svgs/btn-movil-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnBancoppelExpress-logo {
    background: url(../images/svgs/btn-express-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnBancoppelExpress>.activo,
.btnBancoppelExpress-logo:hover {
    background: url(../images/svgs/btn-express-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnCajeros-logo {
    background: url(../images/svgs/btn-atm-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnCajeros>.activo,
.btnCajeros-logo:hover {
    background: url(../images/svgs/btn-atm-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnCat-logo {
    background: url(../images/svgs/btn-cat-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnCat>.activo,
.btnCat-logo:hover {
    background: url(../images/svgs/btn-cat-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btn9800-logo {
    background: url(../images/svgs/btn-98000-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btn9800>.activo,
.btn9800-logo:hover {
    background: url(../images/svgs/btn-98000-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnAlianzas-logo {
    background: url(../images/svgs/bnt-alianzas-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnAlianzas>.activo,
.btnAlianzas-logo:hover {
    background: url(../images/svgs/bnt-alianzas-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnChat-logo {
    background: url(../images/svgs/btn-chatbancoppel-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnChat>.activo,
.btnChat-logo:hover {
    background: url(../images/svgs/btn-chatbancoppel-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.btnCompras-logo {
    background: url(../images/svgs/btn-compras-rep.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

#btnCompras>.activo,
.btnCompras-logo:hover {
    background: url(../images/svgs/btn-compras-act.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%
}

.bcopp-titulo {
    font-family: latobold, sans-serif;
    color: #225aa7;
    padding: 0 10px
}

.bcopp-titulo--principal {
    font-size: 2rem;
    font-family: 'Futura Std', sans-serif;
    line-height: 1
}

.bcopp-titulo--principal .subtitulo {
    font-size: 1.5 rem;
    color: #f9ac18
}

.bcopp-titulo--punto {
    color: #f9ac18
}

.bcopp-titulo--secundario {
    font-size: 1.2 rem;
    text-align: center;
    margin: 10px 0
}

.secundario-cat {
    width: 248px;
    position: relative;
    z-index: -1
}

.bcopp-titulo--secundario .cat-tel {
    font-size: 1rem;
    color: #626363;
    margin: 5px 0 -4px 0
}

.bcopp-titulo--secundario span {
    color: #626363;
    padding: 0 3px
}

.menu-bancoppel {
    margin: 45px 0 28px 0;
    padding: 0 160px
}

.btn-bancoppel {
    width: 140px;
    height: 46px;
    background: #fff;
    border: 1px solid #a3a3a4;
    border-radius: 7.98px;
    font-size: 15px;
    color: #00549b;
    cursor: pointer
}

.btn-bancoppel:hover {
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 3px 5px 0 rgba(192, 201, 204, .9);
    box-shadow: 0 3px 5px 0 rgba(192, 201, 204, .9);
    border-radius: 7.98px;
    font-family: latobold, sans-serif
}

.btn-bancoppel:active {
    height: 44px;
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

.btn-bancoppel--activo,
.btn-bancoppel--activo:hover {
    color: #44c5e4;
    font-family: latobold, sans-serif;
    height: 46px;
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

#accordion .btn-bancoppel--texto {
    margin: 0 0 0 15px;
    text-align: left;
    font-size: 1.1 rem;
    color: #225aa7
}

#accordion .btn-bancoppel--texto.activo {
    color: #44c5e4;
    font-family: latobold, sans-serif
}

.btn-bancoppel--texto-ajuste {
    margin-left: 5px
}

.btn-bancoppel .row {
    height: 46px
}

#accordion .btn-bancoppel--consultas {
    background: url(../images/svgs/consultas-inactivo.svg) no-repeat;
    background-size: auto;
    width: 30px;
    height: 30px
}

#accordion #iconoConsultaBc.activo {
    background: url(../images/svgs/consultas-activo.svg) no-repeat
}

#accordion .btn-bancoppel--transfer {
    background: url(../images/svgs/transfer-inactivo.svg) no-repeat;
    background-size: auto;
    width: 30px;
    height: 30px
}

#accordion #iconoTransferBc.activo {
    background: url(../images/svgs/transfer-activo.svg) no-repeat
}

#accordion .btn-bancoppel--pagos {
    background: url(../images/svgs/pagos-inactivo.svg) no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px
}

.btn-bancoppel--pagos-slide {
    width: 28px;
    height: 33px;
    margin-left: 23px
}

#accordion #iconoPagosBc.activo {
    background: url(../images/svgs/pagos-activo.svg) no-repeat;
    background-size: contain
}

#accordion .btn-bancoppel--otros {
    background: url(../images/svgs/otros-inactivo.svg) no-repeat;
    background-size: auto;
    width: 30px;
    height: 30px
}

#accordion #iconoOtrosBc.activo {
    background: url(../images/svgs/otros-activo.svg) no-repeat
}

.bcopp-contenido {
    position: relative;
    height: 559px
}

.bcoppcom-pie {
    font-family: latoBold, sans-serif;
    font-size: .9rem;
    color: #636464;
    margin: 20px 0 20px 0
}

.bancoppel-com-mov-consultas,
.bancoppel-com-mov-otros,
.bancoppel-com-mov-pagoserv,
.bancoppel-com-mov-transferencias {
    display: inline-block;
    background: url(../images/pantallas/bancoppel-sprite.png) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left
}

.bancoppel-com-mov-consultas {
    background-position: -250px -1360px;
    width: 121px;
    height: 260px
}

.bancoppel-com-mov-transferencias {
    background-position: -373px -1360px;
    width: 121px;
    height: 259px
}

.bancoppel-com-mov-pagoserv {
    background-position: -126px -1360px;
    width: 122px;
    height: 260px
}

.bancoppel-com-mov-otros {
    background-position: -2px -1360px;
    width: 122px;
    height: 260px
}

.otros-lista-slide {
    margin: 18px 30px 0 50px !important
}

.icon-movil-consulta {
    width: 50px;
    height: 50px;
    background-size: contain
}

.movil-lista {
    width: 70%;
    height: 355px;
    margin: 10px 0 20px 0;
    z-index: -1
}

.movil-lista-express {
    width: 85%;
    /*height: 355px;*/
    height: auto;
    margin: 10px 0 30px 0;
    z-index: -1
}

.texto-movil-item {
    font-family: latobold, sans-serif;
    font-size: .8rem;
    color: #626363;
    text-align: left;
    width: 67%;
    line-height: 1.2;
    margin: 0 0 0 20px
}

.texto-movil-item_express {
    width: 73%
}

.texto-movil-item span {
    font-family: latobold, sans-serif;
    font-size: .8rem;
    color: #225aa7
}

.movil-titulo {
    text-align: right;
    font-family: 'Futura Std', sans-serif
}

.bcopp-subtitulo__movil {
    color: #f9ac18;
    text-align: right
}

.bcopp-movil-sprite {
    background: url(../images/pantallas/pant-bmovil-sprite.png) no-repeat
}

.bcopp-movil-box {
    height: 640px;
    width: 452px;
    padding: 40px 7px 0 0
}

.bcopp-movil-box ul li {
    font-size: 15px;
    color: #626363;
    text-align: right;
    position: relative;
    cursor: pointer
}

.bcopp-movil-icono-box {
    width: 76px;
    height: 76px;
    margin-left: 22px
}

.bcopp-movil-icono-box .icono {
    width: 100%;
    height: 100%
}

.bcopp-movil-box ul li .icono {
    width: 72px;
    height: 72px;
    cursor: pointer
}

.bcopp-movil-box ul li .texto {
    margin-right: 20px
}

.bcopp-movil-box ul li:hover {
    font-family: latobold, sans-serif
}

.bcopp-movil-box ul li .token {
    background: url(../images/svgs/bcopp-movil-icono-token.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.token {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.token {
    background: url(../images/svgs/bcopp-movil-icono-token-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.bcopp-movil-box ul li .tarjeta {
    background: url(../images/svgs/bcopp-movil-icono-tarjeta.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.tarjeta {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.tarjeta {
    background: url(../images/svgs/bcopp-movil-icono-tarjeta-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.bcopp-movil-box ul li .consulta {
    background: url(../images/svgs/bcopp-movil-icono-consulta.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.consulta {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.consulta {
    background: url(../images/svgs/bcopp-movil-icono-consultas-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.bcopp-movil-box ul li .transfer {
    background: url(../images/svgs/bcopp-movil-icono-transfer.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.transfer {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.transfer {
    background: url(../images/svgs/bcopp-movil-icono-transfer-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.bcopp-movil-box ul li .cvv {
    background: url(../images/svgs/bcopp-movil-icono-cvv.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.cvv {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.cvv {
    background: url(../images/svgs/bcopp-movil-icono-cvv-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.bcopp-movil-box ul li .pagos {
    background: url(../images/svgs/bcopp-movil-icono-pagoserv.svg) no-repeat;
    background-size: cover;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.bcopp-movil-box ul li:hover>.pagos {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bcopp-movil-box ul li:active>.pagos {
    background: url(../images/svgs/bcopp-movil-icono-pagoser-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.linea-token-box {
    position: absolute;
    top: 70px;
    right: 94px;
    z-index: -1
}

.linea-token-box .token-linea {
    stroke-dasharray: 6;
    stroke-dashoffset: 1000;
    stroke: #cfcfcf
}

.linea-activa {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke: #44c5e4
}

#bcopp-movil-tabs li:hover .token-linea {
    stroke-dasharray: 6;
    stroke-dashoffset: 1000;
    stroke: #44c5e4
}

@-webkit-keyframes progreso-linea {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes progreso-linea {
    to {
        stroke-dashoffset: 6000
    }
}

.bcopp-pie {
    font-family: latoBold, sans-serif;
    font-size: 18px;
    color: #636464;
    margin: 43px 0 0 0
}

.icon-app-store {
    background: url(../images/svgs/appStore.svg) no-repeat;
    background-size: contain;
    width: 100px;
    height: 32px
}

.icon-play-store {
    background: url(../images/svgs/GooglePlay.svg) no-repeat;
    background-size: contain;
    width: 100px;
    height: 32px
}

.tiendas-box {
    width: 200px;
    margin: 0 0 20px 0
}

.icono-9800 {
    width: 116px;
    height: 61px
}

.consultas-titulo {
    font-size: 1rem;
    color: #00549b;
    font-family: latobold, sans-serif
}

.consultas-titulo span {
    font-size: 24px;
    color: #626363;
    padding: 0 5px
}

.consultas-tab-box {
    width: 90%;
    margin: 20px 0 25px 0
}

.consultas-considerar-box {
    margin: 32px 0 8px 0
}

.consultas-considerar-box>div {
    width: 76%
}

.consultas-considerar-texto {
    font-size: .9rem;
    color: #626363;
    text-align: left;
    line-height: 18px;
    width: 178px
}

.consultas-considerar-texto span {
    font-family: latobold, sans-serif
}

.consultas-icono-considerar {
    width: 45px;
    height: 72px
}

.consultas-icono-sms {
    width: 45px;
    height: 73px
}

.consulta-items-box {
    margin: 0 0 20px 0
}

.consulta-pantallas-box {
    position: relative;
    z-index: -1
}

.globo-cliente .mensaje-cliente-box {
    height: 77px
}

.globo-banco .mensaje-banco-box {
    padding: 0 15px 0 9px;
    height: 101px
}

.globo-cliente .mensaje {
    font-family: latobold, sans-serif;
    font-size: 21px;
    color: #225aa7;
    width: 115px
}

.globo-banco .mensaje {
    font-size: 14px;
    color: #636464;
    width: 204px;
    line-height: 1.2;
    font-family: latobold, sans-serif
}

.consulta-pantallas-box .globo-cliente {
    background: url(../images/svgs/9800-globo-cell-cliente.svg) no-repeat;
    background-size: cover;
    width: 247px;
    height: 92px;
    float: right
}

.consulta-pantallas-box .globo-banco {
    background: url(../images/svgs/9800-globo-cell-banco.svg) no-repeat;
    background-size: cover;
    width: 286px;
    height: 115px;
    float: left
}

.icon-9800-avatar {
    width: 48px;
    height: 48px
}

ul#consultaTabs li {
    width: 96px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

ul#consultaTabs li .icono {
    width: 66px;
    height: 66px;
    border-radius: 66px;
    z-index: -1
}

ul#consultaTabs li .globo-box {
    width: 178px;
    height: 46px
}

.consulta-items-box ul li .texto {
    font-size: 15px;
    color: #a5a5a5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 9px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:active .texto {
    font-family: latobold, sans-serif;
    font-size: 16px;
    color: #44c5e4
}

.activo#iconoAclaracionGlobo,
.activo#iconoCelularGlobo,
.activo#iconoExtravioGlobo,
.activo#iconoInversionGlobo,
.activo#iconoPagoGlobo,
.activo#iconoRoboGlobo,
.activo#iconoSaldoGlobo,
.activo#iconoSolicitudGlobo,
.consulta-items-box ul li:active .globo {
    font-family: latobold, sans-serif;
    font-size: 16px;
    color: #44c5e4
}

.consulta-items-box ul li .saldo {
    background: url(../images/svgs/9800-icon-saldo.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .saldo {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoSaldo,
.consulta-items-box ul li:active .saldo {
    background: url(../images/svgs/9800-icon-saldo-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .pago {
    background: url(../images/svgs/9800-icon-pago.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .pago {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoPago,
.consulta-items-box ul li:active .pago {
    background: url(../images/svgs/9800-icon-pago-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .solicitud {
    background: url(../images/svgs/9800-icon-solicitud.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .solicitud {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoSolicitud,
.consulta-items-box ul li:active .solicitud {
    background: url(../images/svgs/9800-icon-solicitud-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .inversion {
    background: url(../images/svgs/9800-icon-inversion.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .inversion {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoInversion,
.consulta-items-box ul li:active .inversion {
    background: url(../images/svgs/9800-icon-inversion-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .celular {
    background: url(../images/svgs/9800-icon-celular.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .celular {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoCelular,
.consulta-items-box ul li:active .celular {
    background: url(../images/svgs/9800-icon-celular-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .aclaracion {
    background: url(../images/svgs/9800-icon-aclaracion.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .aclaracion {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoAclaracion,
.consulta-items-box ul li:active .aclaracion {
    background: url(../images/svgs/9800-icon-aclaracion-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .robo {
    background: url(../images/svgs/9800-icon-robo.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .robo {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoRobo,
.consulta-items-box ul li:active .robo {
    background: url(../images/svgs/9800-icon-robo-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.consulta-items-box ul li .extravio {
    background: url(../images/svgs/9800-icon-extravio.svg) no-repeat;
    background-size: cover;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.consulta-items-box ul li:hover .extravio {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.activo#iconoExtravio,
.consulta-items-box ul li:active .extravio {
    background: url(../images/svgs/9800-icon-extravio-robo-on.svg) no-repeat;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.avion-saldo-box {
    position: absolute;
    top: 69px;
    left: 256px
}

.avion-pago-box {
    position: absolute;
    top: 51px;
    left: 249px
}

.avion-solicitud-box {
    position: absolute;
    top: -24px;
    left: 249px
}

.avion-inversion-box {
    position: absolute;
    top: -120px;
    left: 249px
}

.avion-celular-box {
    position: absolute;
    top: -230px;
    left: 249px
}

.express-titulo {
    text-align: right;
    font-family: 'Futura Std', sans-serif
}

.express-titulo .titulo {
    font-size: 40px;
    color: #225aa7;
    line-height: 1.4
}

.express-titulo .subtitulo {
    font-size: 20px;
    color: #f9ac18
}

.express-tiendas-box {
    margin: 17px 365px 26px
}

.disclaimer-box {
    border: 1px solid #f0a01a;
    border-radius: 7px;
    margin: 25px 0 40px 0
}

.disclaimer-box--texto {
    font-size: .7rem;
    color: #626363;
    padding: 15px 10px;
    width: 80%;
    margin-left: 20px;
    text-align: left;

}

.express-tabs-box {
    min-height: 582px;
    position: relative
}

.express-tabs-box ul {
    margin: 0;
    padding: 0;
    text-indent: 0;
    list-style-type: none
}

.express-tabs {
    position: relative;
    width: 100%;
    height: 611px
}

.express-tabs li .item-consulta {
    position: absolute;
    left: 65px;
    top: 40px
}

.icono#iconoCcvExpress:hover~.texto,
.icono#iconoCodiExpress:hover~.texto,
.icono#iconoConsultaExpress:hover~.texto,
.icono#iconoEnvioExpress:hover~.texto,
.icono#iconoIdExpress:hover~.texto,
.icono#iconoPagosExpress:hover~.texto {
    font-family: latobold, sans-serif;
    font-size: 18px
}

.icono#iconoConsultaExpress {
    background: url(../images/svgs/express-consulta-saldo.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}

.icono#iconoCcvExpress:hover,
.icono#iconoCodiExpress:hover,
.icono#iconoConsultaExpress:hover,
.icono#iconoEnvioExpress:hover,
.icono#iconoIdExpress:hover,
.icono#iconoPagosExpress:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.icono#iconoCcvExpress:active,
.icono#iconoCodiExpress:active,
.icono#iconoConsultaExpress:active,
.icono#iconoEnvioExpress:active,
.icono#iconoIdExpress:active,
.icono#iconoPagosExpress:active {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.activo#iconoConsultaExpress {
    background: url(../images/svgs/express-consulta-saldo-ON.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.express-tabs li .item-pagos {
    position: absolute;
    left: 65px;
    top: 213px
}

.icono#iconoPagosExpress {
    background: url(../images/svgs/pagoTarjetas.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer;
    top: 12px
}

.activo#iconoPagosExpress {
    background: url(../images/svgs/express-pago-tarjeta-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoCcvExpress {
    background: url(../images/svgs/express-cvv.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer;
    top: 13px
}

.activo#iconoCcvExpress {
    background: url(../images/svgs/express-cvv-ON.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoEnvioExpress {
    background: url(../images/svgs/express-envio-dinero.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}

.activo#iconoEnvioExpress {
    background: url(../images/svgs/express-envio-dinero-ON.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.express-tabs li .item-codi {
    position: absolute;
    right: 67px;
    top: 213px
}

.icono#iconoCodiExpress {
    background: url(../images/svgs/express-codi.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer;
    top: 12px
}

.activo#iconoCodiExpress {
    background: url(../images/svgs/express-codi-ON.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.express-tabs li .item-id {
    position: absolute;
    right: 67px;
    top: 400px
}

.icono#iconoIdExpress {
    background: url(../images/svgs/express-id.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}

.activo#iconoIdExpress {
    background: url(../images/svgs/express-id-ON.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoConsultaEstadoCuenta {
    background: url(../images/svgs/express-consulta-estado-on.svg) no-repeat;
    /*background-color: #00418b;*/
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoConsultaEstadoCuenta {
    background: url(../images/svgs/express-consulta-estado-on.svg) no-repeat;
    /*background-color: #00418b;*/
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoBloqueo {
    background: url(../images/svgs/express-bloqueo-tarjeta-on.svg) no-repeat;
    /*background-color: #00418b;*/
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoBloqueo {
    background: url(../images/svgs/express-bloqueo-tarjeta-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoRecarga {
    background: url(../images/svgs/express-recargas-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoRecarga {
    background: url(../images/svgs/express-recargas-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoPagosServiciosExpress {
    background: url(../images/svgs/express-pagos-servicios-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoPagosServiciosExpress {
    background: url(../images/svgs/express-pagos-servicios-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoCobroRemesasExpress {
    background: url(../images/svgs/express-cobro-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoCobroRemesasExpress {
    background: url(../images/svgs/express-cobro-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.icono#iconoCuentaClickExpress {
    background: url(../images/svgs/express-clic-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoCuentaClickExpress {
    background: url(../images/svgs/express-clic-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}
.icono#iconoPortabilidad {
    background: url(../images/svgs/express-portabilidad-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoPortabilidad {
    background: url(../images/svgs/express-portabilidad-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}


.icono#iconoDisposicionPrestamoExpress {
    background: url(../images/svgs/express-dispocision-prestamo-on.svg) no-repeat;
    width: 91px;
    height: 91px;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    cursor: pointer
}
.activo#iconoDisposicionPrestamoExpress {
    background: url(../images/svgs/express-dispocision-prestamo-on.svg) no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain
}

.sprite-express {
    background-image: url(../images/pantallas/sprite-express.png);
    background-repeat: no-repeat;
    display: block
}

@-webkit-keyframes aparece {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes aparece {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes escala {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes escala {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes rotacion {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

@keyframes rotacion {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

.cat-titulo {
    text-align: right;
    font-family: 'Futura Std', sans-serif
}

.cat-titulo .titulo {
    font-size: 40px;
    color: #225aa7;
    line-height: 1.4
}

.cat-titulo .subtitulo {
    font-size: 30px;
    color: #f9ac18
}

.cat-tel {
    padding: 0 20px
}

.cat-subtitulo {
    font-size: 20px;
    color: #00549b;
    text-align: center;
    font-family: latobold, sans-serif;
    margin: 17px 0 0 0
}

.cat-subtitulo span {
    font-size: 24px;
    color: #626363;
    padding: 0 20px
}

.cat-numeros-tel {
    font-family: latobold, sans-serif;
    font-size: .9rem;
    position: absolute;
    left: 118px;
    top: 41px;
    letter-spacing: 2px
}

.globo-cat-box {
    position: relative;
    margin: 0 24%;
    z-index: -1
}

.cat-globo-mov {
    width: 191px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top: 10px
}

.texto#catGloboTexto {
    position: absolute;
    top: 37px;
    left: 10px;
    height: 93px;
    width: 186px;
    font-size: 15px;
    color: #225aa7;
    line-height: 19px;
    font-family: latobold, sans-serif
}

ul#catTabs {
    width: 85%;
    margin: 17px 0 0 0
}

#catTabs li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    width: 140px;
}
#catTabs li:nth-child(4),
#catTabs li:nth-child(5) {
    margin-top: 16px;
}

.cat-item-box {
    width: 66px;
    height: 66px;
    background-size: contain;
    border-radius: 100%
}

#catTabs .texto {
    font-size: 15px;
    color: #a3a3a4;
    margin-top: 10px
}

.icono#catIconoConsulta {
    background-image: url(../images/svgs/CAT-consultas-off.svg);
    background-repeat: no-repeat;
    -webkit-transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out, -webkit-transform .3s ease-out
}

.activo#catIconoConsulta {
    background-image: url(../images/svgs/CAT-consultas-on.svg);
    background-repeat: no-repeat
}

.activo#catTextoAclaraciones,
.activo#catTextoConsulta,
.activo#catTextoDudas,
.activo#catTextoAesoriaServicios,
.activo#catTextoReporteTarjetas {
    font-family: latobold, sans-serif;
    color: #44c5e4
}

.icono#catIconoDudas {
    background-image: url(../images/svgs/CAT-dudas-off.svg);
    background-repeat: no-repeat;
    -webkit-transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out, -webkit-transform .3s ease-out
}

.activo#catIconoDudas {
    background-image: url(../images/svgs/CAT-dudas-on.svg);
    background-repeat: no-repeat
}

.icono#catIconoAclaraciones {
    background-image: url(../images/svgs/CAT-aclaraciones-off.svg);
    background-repeat: no-repeat;
    -webkit-transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out, -webkit-transform .3s ease-out
}

.activo#catIconoAclaraciones {
    background-image: url(../images/svgs/CAT-aclaraciones-on.svg);
    background-repeat: no-repeat
}

.icono#catIconoAesoriaServicios {
    background-image: url(../images/svgs/CAT-aclaraciones-off.svg);
    background-repeat: no-repeat;
    -webkit-transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out, -webkit-transform .3s ease-out
}
.activo#catIconoAesoriaServicios {
    background-image: url(../images/svgs/CAT-aclaraciones-on.svg);
    background-repeat: no-repeat
}

.icono#catIconoReporteTarjetas {
    background-image: url(../images/svgs/CAT-aclaraciones-off.svg);
    background-repeat: no-repeat;
    -webkit-transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: aparece .3s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out;
    transition: transform .3s ease-out, aparece .3s ease-out, -webkit-transform .3s ease-out
}
.activo#catIconoReporteTarjetas {
    background-image: url(../images/svgs/CAT-aclaraciones-on.svg);
    background-repeat: no-repeat
}


.disclaimer-cat-box {
    border: 1px solid #f0a01a;
    border-radius: 7px;
    margin: 20px 0 20px 0;
    width: 90%
}

@-webkit-keyframes onda-inicial {
    from {
        stroke: #44c5e4
    }

    50% {
        stroke: #d1d1d1
    }

    to {
        stroke: #d1d1d1
    }
}

@keyframes onda-inicial {
    from {
        stroke: #44c5e4
    }

    50% {
        stroke: #d1d1d1
    }

    to {
        stroke: #d1d1d1
    }
}

.alianza-tab-cont {
    width: 100%
}

.icon-alianzas-logo-on {
    width: 158px;
    height: 99px
}

.icon-alianzas-coppel-logo-on {
    width: 158px;
    height: 56px
}

.alianza-tabs {
    margin: 0;
    padding: 0;
    height: 80px;
    width: 89%
}

.btn-alianza--activo {
    color: #44c5e4;
    font-family: latobold, sans-serif;
    height: 46px;
    border: 0 solid #44c5e4;
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

.btn-alianza {
    width: 138px;
    height: 46px;
    background: #fff;
    border: 1px solid #a3a3a4;
    border-radius: 7.98px;
    font-size: 14px;
    color: #00549b;
    cursor: pointer
}

.btn-alianza .row {
    height: 46px
}

.btn-alianza--texto {
    margin-left: 5px;
    width: 70px
}

.btn-alianza--texto-ajuste {
    margin-left: 5px;
    font-size: 11px
}

.alianzas-pagos-box {
    height: 201px;
    margin: 10px 0 20px 0
}

.alianza-retiro-par {
    width: 100%;
    padding: 10px 0
}

.alianza-retiro-impar {
    width: 100%;
    padding: 10px 0;
    background-color: #f5f5f5
}

.alianzas-item-texto {
    font-size: .9rem;
    color: #686969;
    text-align: left;
    line-height: 18px;
    width: 201px;
    margin: 0 0 0 24px
}

.btn-alianza:hover {
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 3px 5px 0 rgba(192, 201, 204, .9);
    box-shadow: 0 3px 5px 0 rgba(192, 201, 204, .9);
    border-radius: 7.98px;
    font-family: latobold, sans-serif
}

.activo#btnAlianzaPago,
.activo#btnAlianzaRetiro {
    color: #44c5e4;
    font-family: latobold, sans-serif;
    height: 46px;
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

.btn-alianza:active {
    height: 44px;
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

.btn-alianza--pagos {
    background: url(../images/svgs/alianzas-btn-pagosydep-off.svg) no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px
}

.activo#iconoAlianzaPagos {
    background: url(../images/svgs/alianzas-btn-pagosydep-on.svg) no-repeat;
    background-size: contain
}

.btn-alianza--retiro {
    background: url(../images/svgs/alianzas-btn-retiros-off.svg) no-repeat;
    background-size: contain;
    width: 40px;
    height: 30px;
    margin: 6px 0 0 0
}

.activo#iconoAlianzaRetiro {
    background: url(../images/svgs/alianzas-btn-retiros-on.svg) no-repeat;
    background-size: contain
}

.pagos-logo-bcopp {
    background: url(../images/svgs/logo-coppel.svg) no-repeat;
    background-size: contain;
    width: 135px;
    height: 60px;
    margin: 0 auto
}

.pagos-logo-oxxo {
    background: url(../images/svgs/oxxo.svg) no-repeat;
    background-size: contain;
    width: 135px;
    height: 60px;
    margin: 0 auto;
}

.pagos-logo-eleven {
    background: url(../images/svgs/logo_seven.svg) no-repeat;
    background-size: contain;
    width: 135px;
    height: 30px;
    margin: 30px auto 0 auto
}

.icon-alianzas-logo-coppel {
    width: 152px;
    height: 60px
}

.pagos-texto {
    font-family: latobold, sans-serif;
    font-size: .9rem;
    color: #00549b;
    margin: 0 0 20px 0
}

.pagos-pasos {
    position: relative;
    height: 257px;
    width: 612px;
    margin: 20px 0 44px 0
}

.pagos-pasos .item-1 {
    position: absolute;
    top: -7px;
    left: 49px
}

.pagos-pasos .item-2 {
    position: absolute;
    top: 22px;
    left: 386px
}

.pagos-pasos .item-3 {
    position: absolute;
    top: 242px;
    left: 310px
}

.pagos-pasos .item-4 {
    background: url(../images/svgs/alianzas-circle.svg) no-repeat;
    width: 222px;
    height: 222px;
    position: absolute;
    top: 20px;
    left: 178px
}

.pagos-pasos .item-5 {
    width: 72px;
    height: 73px;
    position: absolute;
    top: 20px;
    left: 196px
}

.icon-alianzas-money {
    background: url(../images/svgs/alianza-money.svg) no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px
}

.pagos-pasos .item-6 {
    width: 50px;
    height: 50px
}

.icon-alianzas-tarjetas {
    background: url(../images/svgs/alianza-tarjetas.svg) no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px
}

.pagos-pasos .item-7 {
    width: 72px;
    height: 73px;
    position: absolute;
    top: 201px;
    left: 239px
}

.icon-alianzas-comp-conf {
    background: url(../images/svgs/confirmacion-operacion.svg) no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px
}

.pagos-pasos .item-8 {
    background: url(../images/pantallas/alianza-tarjeta_bcopp_credito.png) no-repeat;
    width: 113px;
    height: 73px;
    position: absolute;
    top: 102px;
    left: 232px
}

.retiros-item {
    width: 175px;
    height: 165px;
    margin: 0 0 20px 0
}

.retiro-contenido {
    height: 410px
}

.retiros-logo {
    width: 146px;
    height: 104px;
    margin: 8px 14px 0 14px;
    cursor: pointer
}

.retiro-texto-box {
    opacity: 0
}

.retiro-texto {
    font-size: 15px;
    color: #00549b
}

.retiro-texto-montos {
    font-size: .9rem;
    color: #686969
}

.disclaimer-alianza-box {
    border: 1px solid #f0a01a;
    border-radius: 7px;
    position: absolute;
    bottom: -69px;
    left: 38px
}

.disclaimer-alianza-box .disclaimer-box--texto {
    font-size: 15px;
    color: #626363;
    padding: 15px 10px;
    width: 90%;
}

.loader-movil {
    background: url(../images/svgs/loader.svg) no-repeat;
    width: 40px;
    height: 40px;
    background-size: contain;
    position: absolute;
    top: 40%
}

.atm-contenido-box {
    margin: 0 0 50px 0
}

.atm-box {
    width: 535px;
    height: 634px;
    position: relative
}

.atm-info-box {
    width: 355px;
    height: 632px;
    margin: 0 11px 0 0
}

.atm-info-box-principal {
    width: 372px;
    height: 632px;
    margin: 0
}

.atm-btn {
    background: #006fb9;
    -webkit-box-shadow: inset 2px -2px 0 0 #44c5e4;
    box-shadow: inset 2px -2px 0 0 #44c5e4;
    border-radius: 3.15px 3.15px 3.15px 3.15px;
    width: 122px;
    height: 42px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.3;
    letter-spacing: 1px;
    cursor: pointer
}

.atm-btn:hover {
    -webkit-box-shadow: inset 2px -2px 0 0 #00418b;
    box-shadow: inset 2px -2px 0 0 #00418b
}

.atm-btn-texto {
    font-size: 11px;
    color: #fff
}

.atm-tab-principal {
    width: 450px;
    margin: 65px 30px 0 30px
}

.atm-logo-bancoppel {
    background: url(../images/svgs/CAT-logo-bcopp.svg) no-repeat;
    width: 172px;
    height: 34px;
    background-size: contain;
    margin: 35px 0
}

.atm-titulo-margen {
    padding: 0 0 16px 0
}

.express-titulo .titulo-atm {
    font-size: 34px
}

.express-titulo .subtitulo-atm {
    font-size: 17px
}

.atm-cuerpo-texto {
    font-size: 18px;
    color: #636464
}

.atm-parrafo-margen {
    margin: 25px 0
}

.atm-cuerpo-iconos {
    width: 300px;
    height: 440px
}

.atm-icono-texto {
    width: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    font-size: 1rem
}

.atm-icono-box {
    width: 50px;
    height: 50px
}

.atm-icono-consulta {
    background: url(../images/svgs/atm-consultar.svg) no-repeat;
    background-size: contain
}

.atm-icono-retiro {
    background: url(../images/svgs/atm-retirar.svg) no-repeat;
    background-size: contain
}

.atm-icono-nip {
    background: url(../images/svgs/atm-cambiarNIP.svg) no-repeat;
    background-size: contain
}

.atm-icono-transferir {
    background: url(../images/svgs/transferir.svg) no-repeat;
    background-size: cover
}
.atm-icono-retiro-sin-tarjeta {
    background: url(../images/svgs/atm-retirar-sin-tarjeta.svg) no-repeat;
    background-size: cover
}
.atm-icono-prestamo-digital {
    background: url(../images/svgs/atm-prestamo-digital.svg) no-repeat;
    background-size: cover
}
.atm-icono-pago-coppel {
    background: url(../images/svgs/atm-pago-coppel.svg) no-repeat;
    background-size: cover
}
.atm-icono-ventanilla-electronica {
    background: url(../images/svgs/atm-ventanilla-electronica.svg) no-repeat;
    background-size: cover
}



.atm-cuerpo-iconos strong:after {
    content: " "
}

.atm-ubica {
    font-size: 15px;
    color: #636464;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0 0 0
}

.atm-ubica a {
    color: #44c5e4;
    text-decoration: underline
}

.atm-ubica--icono {
    background: url(../images/svgs/atm-ubic.svg) no-repeat;
    width: 23px;
    height: 33px;
    display: inline-block
}

.atm-ubica--texto {
    margin: 10px 0 25px 0
}

.btn-atm {
    width: 138px;
    height: 45px;
    font-size: 14px;
    line-height: 1
}

.btn-atm:active {
    height: 45px
}

.atm-tabs-box {
    padding: 0;
    margin: 20px 0 0 0;
}

#tabsAtmInterno .atm-btn-item {
    height: 45px
}

.btn-atm--consulta {
    background: url(../images/svgs/atm-retirar.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}

.activo#iconoAtmRetiro {
    background: url(../images/svgs/atm-icn-retiro-on.svg) no-repeat;
    background-size: contain
}

.btn-atm--nip {
    background: url(../images/svgs/atm-cambiarNIP.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}

.btn-atm--transf {
    background: url(../images/svgs/atm-transferencias.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}

.btn-atm--mov {
    background: url(../images/svgs/atm-consulta.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}

.btn-atm--retiro-sin-tarjeta {
    background: url(../images/svgs/atm-retirar-sin-tarjeta.svg) no-repeat;
     /*background-color: #00418b;*/
    background-size: contain;
    width: 31px;
    height: 31px
}
.btn-atm--prestamo-digital {
    background: url(../images/svgs/atm-prestamo-digital.svg) no-repeat;
    /*background-color: #00418b;*/
    background-size: contain;
    width: 31px;
    height: 31px
}
.btn-atm--paga-credito-coppel {
    background: url(../images/svgs/atm-pago-coppel.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}
.btn-atm--depositos-ventanilla {
    background: url(../images/svgs/atm-ventanilla-electronica.svg) no-repeat;
    background-size: contain;
    width: 31px;
    height: 31px
}

.activo#iconoAtmNip {
    background: url(../images/svgs/atm-icn-cambioNIP-on.svg) no-repeat;
    background-size: contain
}

.activo#iconoAtmMovimientos {
    background: url(../images/svgs/atm-consulta-over.svg) no-repeat;
    background-size: contain
}

.activo#iconoAtmTransf {
    background: url(../images/svgs/atm-transferencias-over.svg) no-repeat;
    background-size: contain
}
.activo#iconoRetiroSinTarjeta {
    background: url(../images/svgs/atm-retirar-sin-tarjeta-on.svg) no-repeat;
    /*background-color: #44c5e4;*/
    background-size: contain
}
.activo#iconoPrestamoDigital {
    background: url(../images/svgs/atm-prestamo-digital-on.svg) no-repeat;
    background-size: contain
}
.activo#iconoPagaCreditoCoppel {
    background: url(../images/svgs/atm-pago-coppel-on.svg) no-repeat;
    background-size: contain
}
.activo#iconoDepositosVentanilla {
    background: url(../images/svgs/atm-ventanilla-electronica-on.svg) no-repeat;
    background-size: contain
}

.activo#btnAtmConsulta,
.activo#btnAtmMovimientos,
.activo#btnAtmNip,
.activo#btnAtmTransf,
.activo#btnRetiroSinTarjeta,
.activo#btnPrestamoDigital,
.activo#btnPagaCreditoCoppel,
.activo#btnDepositosVentanilla
{
    color: #44c5e4;
    font-family: latobold, sans-serif;
    height: 45px;
    border: 1px solid rgba(68, 197, 228, 0);
    -webkit-box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    box-shadow: 0 2px 5px 0 rgba(68, 197, 228, .9);
    border-radius: 7.98px
}

.atm-internas-box {
    width: 90%;
    height: 440px;
    position: relative;
    z-index: -1
}

.atm-linea {
    width: 4px;
    height: 362px;
    background-color: #eaeaea;
    position: absolute;
    top: 31px;
    left: 33px
}

.atm-lista-box {
    position: absolute;
    top: 20px;
    left: 15px;
    width: 90%
}

.atm-lista-interna {
    height: 390px
}
#atmTransfPagoCreditoCoppel.atm-internas-box,
#atmTransfDepositosVentanillaElec.atm-internas-box {
    height: 605px;
}
#atmTransfPagoCreditoCoppel .atm-lista-interna,
#atmTransfDepositosVentanillaElec .atm-lista-interna{
    height: 560px;
}
#atmTransfPagoCreditoCoppel .atm-linea,
#atmTransfDepositosVentanillaElec .atm-linea {
    height: 512px;
}

#consMovAtmLista .icono,
#consultaAtmLista .icono,
#nipAtmLista .icono,
#transfCuentasAtmLista .icono,
#atmTransfRetiroSinTarjeta .icono,
#atmTransfPrestamoDigital .icono,
#atmTransfPagoCreditoCoppel .icono,
#atmTransfDepositosVentanillaElec .icono,
#atmActTDC .icono
{
    cursor: pointer;
    width: 30px;
    height: 30px;
    color: #a7a7a7;
    font-size: 16px;
    background-color: #fff;
    border: 5px solid #eaeaea;
    border-radius: 100px;
    text-align: center;
    line-height: 30px
}

#consMovAtmLista .icono:hover,
#consultaAtmLista .icono:hover,
#nipAtmLista .icono:hover,
#transfCuentasAtmLista .icono:hover,
#transfRetiroSinTarjetaAtmLista .icono:hover,
#transfPrestamoDigitalAtmLista .icono:hover,
#transfPagoCreditoCoppelAtmLista .icono:hover,
#transfDepositosVentanillaElecAtmLista .icono:hover,
#ActTDCLista .icono:hover
{
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

ul#consMovAtmLista li,
ul#consultaAtmLista li,
ul#nipAtmLista li,
ul#transfCuentasAtmLista li,
ul#transfRetiroSinTarjetaAtmLista li,
ul#transfPrestamoDigitalAtmLista li,
ul#transfPagoCreditoCoppelAtmLista li,
ul#transfDepositosVentanillaElecAtmLista li,
ul#ActTDCLista li
{
    height: 50px
}

.atm-disclaimer-consulta {
    font-size: .8rem;
    color: #636464;
    margin: 20px 0 0 0
}

.activo#itemConsultaIcono1,
.activo#itemNipIcono1,
.activo#itemTransfCuentasIcono1,
.activo#itemconsMovIcono1,
.activo#itemTransfRetiroSinTarjetaIcono1,
.activo#itemTransfPrestamoDigitalIcono1,
.activo#itemTransfPrestamoDigitalIcono1,
.activo#itemTransfDepositosVentanillaElecIcono1,
.activo#itemActTDCIcono1
{
    cursor: pointer;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
    font-family: latobold, sans-serif;
    background-color: #0080b7;
    border: 0 solid #eaeaea;
    line-height: 40px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-animation: shadow-pulse 1.5s infinite;
    animation: shadow-pulse 1.5s infinite
}

.activo#itemConsultaIcono2,
.activo#itemConsultaIcono3,
.activo#itemConsultaIcono4,
.activo#itemConsultaIcono5,
.activo#itemNipIcono2,
.activo#itemNipIcono3,
.activo#itemNipIcono4,
.activo#itemNipIcono5,
.activo#itemNipIcono6,
.activo#itemNipIcono7,
.activo#itemTransfCuentasIcono2,
.activo#itemTransfCuentasIcono3,
.activo#itemTransfCuentasIcono4,
.activo#itemTransfCuentasIcono5,
.activo#itemTransfCuentasIcono6,
.activo#itemTransfCuentasIcono7,
.activo#itemconsMovIcono2,
.activo#itemconsMovIcono3,
.activo#itemconsMovIcono4,
.activo#itemconsMovIcono5,
.activo#itemTransfRetiroSinTarjetaIcono2,
.activo#itemTransfPrestamoDigitalIcono2
.activo#itemTransfPrestamoDigitalIcono2,
.activo#itemTransfPrestamoDigitalIcono3,
.activo#itemTransfPrestamoDigitalIcono4,
.activo#itemTransfPrestamoDigitalIcono5,
.activo#itemTransfPrestamoDigitalIcono6,
.activo#itemTransfPrestamoDigitalIcono7,
.activo#itemTransfPrestamoDigitalIcono8,
.activo#itemTransfPrestamoDigitalIcono9,
.activo#itemTransfDepositosVentanillaElecIcono2,
.activo#itemActTDCIcono2,
.activo#itemActTDCIcono3,
.activo#itemActTDCIcono4
{
    cursor: pointer;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
    font-family: latobold, sans-serif;
    background-color: #0080b7;
    border: 0 solid #eaeaea;
    line-height: 40px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

#consMovAtmLista .texto,
#consultaAtmLista .texto,
#nipAtmLista .texto,
#transfCuentasAtmLista .texto,
#transfRetiroSinTarjetaAtmLista .texto,
#transfPrestamoDigitalAtmLista .texto,
#transfPagoCreditoCoppelAtmLista .texto,
#transfDepositosVentanillaElecAtmLista .texto,
#ActTDCLista .texto
{
    width: 75%;
    text-align: left;
    font-size: 1rem;
    color: #636464
}

.activo#itemConsultaTexto1,
.activo#itemConsultaTexto2,
.activo#itemConsultaTexto3,
.activo#itemConsultaTexto4,
.activo#itemConsultaTexto5,
.activo#itemNipTexto1,
.activo#itemNipTexto2,
.activo#itemNipTexto3,
.activo#itemNipTexto4,
.activo#itemNipTexto5,
.activo#itemTransfCuentasTexto1,
.activo#itemTransfCuentasTexto2,
.activo#itemTransfCuentasTexto3,
.activo#itemTransfCuentasTexto4,
.activo#itemTransfCuentasTexto5,
.activo#itemTransfCuentasTexto6,
.activo#itemTransfCuentasTexto7,
.activo#itemconsMovTexto1,
.activo#itemconsMovTexto2,
.activo#itemconsMovTexto3,
.activo#itemconsMovTexto4,
.activo#itemconsMovTexto5,
.activo#itemTransfRetiroSinTarjetaTexto1,
.activo#itemTransfRetiroSinTarjetaTexto2,
.activo#itemTransfPrestamoDigitalTexto1,
.activo#itemTransfPrestamoDigitalTexto2,
.activo#itemTransfPrestamoDigitalTexto1,
.activo#itemTransfPrestamoDigitalTexto2,
.activo#itemTransfPrestamoDigitalTexto3,
.activo#itemTransfPrestamoDigitalTexto5,
.activo#itemTransfPrestamoDigitalTexto6,
.activo#itemTransfPrestamoDigitalTexto7,
.activo#itemTransfPrestamoDigitalTexto8,
.activo#itemTransfPrestamoDigitalTexto9,
.activo#itemTransfDepositosVentanillaElecIcono1,
.activo#itemTransfDepositosVentanillaElecIcono2,
.activo#itemActTDCIcono1,
.activo#itemActTDCIcono2,
.activo#itemActTDCIcono3,
.activo#itemActTDCIcono4
{
    font-family: latobold, sans-serif
}

.btn-atm--texto {
    margin-left: 5px;
    width: 99px;
    font-size: 11px
}

.activar-pulso {
    -webkit-animation: shadow-pulse 1.5s infinite;
    animation: shadow-pulse 1.5s infinite
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        opacity: 0
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.delay-03s {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.animated.delay-06s {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.animated.delay-09s {
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}

.animated.delay-12s {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.animated.delay-15s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.animated.delay-18s {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}
.animated.delay-21s {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s
}
.animated.delay-24s {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s
}
.animated.delay-27s {
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s
}
.animated.delay-30s {
    -webkit-animation-delay: 3.0s;
    animation-delay: 3.0s
}
.animated.delay-33s {
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s
}
.animated.delay-36s {
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s
}
.animated.delay-39s {
    -webkit-animation-delay: 3.9s;
    animation-delay: 3.9s
}

@-webkit-keyframes shadow-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(34, 90, 167, .8);
        box-shadow: 0 0 0 0 rgba(34, 90, 167, .8)
    }

    100% {
        -webkit-box-shadow: 0 0 0 8px transparent;
        box-shadow: 0 0 0 8px transparent
    }
}

@keyframes shadow-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(34, 90, 167, .8);
        box-shadow: 0 0 0 0 rgba(34, 90, 167, .8)
    }

    100% {
        -webkit-box-shadow: 0 0 0 8px transparent;
        box-shadow: 0 0 0 8px transparent
    }
}

.chat-titulo {
    font-size: 40px;
    color: #225aa7
}

.chat-subtitulo {
    font-size: 30px;
    color: #f9ac18;
    line-height: 28px;
    margin: 0 0 0 8px
}

.chat-respuesta-logo {
    background: url(../images/svgs/chat-ventana-movil.svg) no-repeat;
    background-size: contain;
    width: 84px;
    height: 31px;
    position: absolute;
    top: 99px;
    right: 4px
}

.chat-pc {
    background: url(../images/svgs/chat-globo.svg) no-repeat;
    background-size: contain;
    width: 254px;
    height: 96px;
    position: relative;
    margin: 0 0 45px 0
}

.chat-pc-texto {
    font-family: latobold, sans-serif;
    font-size: 1rem;
    line-height: 19px;
    color: #00549b;
    text-align: left;
    position: absolute;
    top: 9px;
    left: 6px;
    width: 231px;
    height: 63px
}

.chat-texto-lista {
    width: 206px;
    font-size: .9rem;
    color: #626363;
    margin: 0 0 0 16px;
    line-height: 1.2;
    text-align: left;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.chat-texto-box {
    height: 42px;
    margin: 13px 0 0 10px
}

.chat-texto-box-saludo {
    height: 42px;
    margin: 20px 0 0 10px
}

.chat-texto-box-ubica {
    height: 42px;
    margin: 4px 0 0 10px
}

.chat-lista-box {
    margin: 10px 0 10px 0;
    height: 241px
}

.barras-chat {
    width: 215px;
    height: 45px;
    padding: 10px 0 0 15px
}

.barra-chat-uno {
    width: 0;
    height: 7px;
    background-color: #b1b1b2;
    -webkit-animation: progreso .5s linear 0s forwards;
    animation: progreso .5s linear 0s forwards
}

.barra-chat-dos {
    width: 0;
    height: 7px;
    background-color: #b1b1b2;
    -webkit-animation: progreso .5s linear .5s forwards;
    animation: progreso .5s linear .5s forwards
}

.barra-chat-tres {
    width: 0;
    height: 7px;
    background-color: #b1b1b2;
    -webkit-animation: progreso-medio .5s linear 1s forwards;
    animation: progreso-medio .5s linear 1s forwards
}

.activo#chatTextoAsesoria,
.activo#chatTextoIngreso,
.activo#chatTextoRobo,
.activo#chatTextoUbica {
    font-family: latobold, sans-serif;
    color: #44c5e4
}

.chat-icono-box {
    width: 55px;
    height: 55px;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 100%
}

.chat-icono-box:active {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.icono#chatIconoIngreso {
    background: url(../images/svgs/chat-ingresa.svg) no-repeat;
    background-size: contain
}

.activo#chatIconoIngreso {
    background: url(../images/svgs/chat-ingresa-on.svg) no-repeat;
    background-size: contain
}

.icono#chatIconoAsesoria {
    background: url(../images/svgs/chat-asesoria.svg) no-repeat;
    background-size: contain
}

.activo#chatIconoAsesoria {
    background: url(../images/svgs/chat-asesoria-on.svg) no-repeat;
    background-size: contain
}

.icono#chatIconoRobo {
    background: url(../images/svgs/chat-robo-extravio.svg) no-repeat;
    background-size: contain
}

.activo#chatIconoRobo {
    background: url(../images/svgs/chat-robo-extravio-on.svg) no-repeat;
    background-size: contain
}

.chat-icono-robo {
    background: url(../images/svgs/chat-robo-extravio.svg) no-repeat;
    background-size: contain
}

.icono#chatIconoUbica {
    background: url(../images/svgs/chat-ubica.svg) no-repeat;
    background-size: contain
}

.activo#chatIconoUbica {
    background: url(../images/svgs/chat-ubica-ON.svg) no-repeat;
    background-size: contain
}

.anima {
    overflow: hidden;
    white-space: nowrap;
    margin: 0
}

.uno {
    -webkit-animation: typing .7s steps(30, end);
    animation: typing .7s steps(30, end)
}

.dos {
    -webkit-animation: typing .7s steps(30, end), mostrar .1s forwards;
    animation: typing .7s steps(30, end), mostrar .1s forwards
}

@-webkit-keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@-webkit-keyframes mostrar {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mostrar {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes progreso {
    0% {
        width: 0
    }

    100% {
        width: 200px
    }
}

@keyframes progreso {
    0% {
        width: 0
    }

    100% {
        width: 200px
    }
}

@-webkit-keyframes progreso-medio {
    0% {
        width: 0
    }

    100% {
        width: 100px
    }
}

@keyframes progreso-medio {
    0% {
        width: 0
    }

    100% {
        width: 100px
    }
}

.compras-titulo-box {
    margin: 0 45px
}

.titulo-compras {
    font-size: 40px;
    color: #225aa7;
    text-align: right
}

.subtitulo-compras {
    font-family: latobold, sans-serif;
    font-size: 20px;
    color: #00549b;
    text-align: center
}

.tarjetas-inicio {
    position: relative;
    margin: 20px 0 30px 0;
    width: 353px;
    height: 157px
}

.tarjetas-inicio-internas {
    height: 345px;
    margin: 45px 0;
    position: absolute;
    top: -90px;
    left: 0
}

.limite-pago {
    background-image: url(../images/compras-pagoTDC.png);
    width: 235px;
    height: 95px
}

.infoTarjetasBox {
    width: 95%;
    margin: 0 0 20px
}

.tarjetas-inicio-box {
    height: 345px;
    width: 826px;
    margin: 45px 45px 45px 69px
}

.disclaimer-compras-box {
    border: 1px solid #f0a01a;
    border-radius: 7px
}

.disclaimer-ajuste-compras {
    padding: 15px 10px
}

.tarjeta-credito {
    position: absolute;
    -webkit-box-shadow: 5px 5px 13px 0 rgba(0, 0, 0, .3);
    box-shadow: 5px 5px 13px 0 rgba(0, 0, 0, .3);
    border-radius: 12px;
    -webkit-transform: rotate(-11deg);
    transform: rotate(-11deg);
    top: 7px;
    left: 9px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    cursor: pointer
}

.credito-activa {
    -webkit-transform: rotate(-11deg) scale(1.2) translate(27px, 0);
    transform: rotate(-11deg) scale(1.2) translate(27px, 0);
    z-index: 1;
    opacity: 1
}

.credito-inactiva {
    opacity: .3;
    -webkit-transform: rotate(-11deg) scale(1);
    transform: rotate(-11deg) scale(1);
    z-index: 0
}

.tarjeta-debito {
    position: absolute;
    -webkit-box-shadow: 10px 10px 26px -2px rgba(0, 0, 0, .3);
    box-shadow: 10px 10px 26px -2px rgba(0, 0, 0, .3);
    border-radius: 12px;
    -webkit-transform: rotate(-11deg) scale(1);
    transform: rotate(-11deg) scale(1);
    top: 7px;
    left: 146px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    cursor: pointer
}

.debito-activa {
    -webkit-transform: rotate(-11deg) scale(1.2) translate(-27px, 0);
    transform: rotate(-11deg) scale(1.2) translate(-27px, 0);
    z-index: 1;
    opacity: 1
}

.debito-inactiva {
    opacity: .3;
    -webkit-transform: rotate(-11deg) scale(1);
    transform: rotate(-11deg) scale(1);
    z-index: 0
}

.tarjeta-internas {
    -webkit-box-shadow: 4px 4px 9px 0 rgba(0, 0, 0, .3);
    box-shadow: 4px 4px 9px 0 rgba(0, 0, 0, .3);
    border-radius: 12px
}

.compras-filas-box {
    height: 425px;
    margin: 0 0 20px 0
}

.compras-item {
    width: 45%
}

.compras-icono {
    height: 55px
}

.info-pago-tdc {
    background: url(../images/compras-pagoTDC.png) no-repeat
}

.compras-sprite {
    background: url(../images/copras-sprite-iconos.png) no-repeat
}

.compras-solicita-tarjeta {
    width: 37px;
    height: 52px;
    background-position: -85px -111px
}

.compras-nip {
    width: 43px;
    height: 52px;
    background-position: -3px -153px
}

.compras-cvv {
    width: 71px;
    height: 49px;
    background-position: -5px -1px
}

.compras-contactless {
    width: 43px;
    height: 55px;
    background-position: -84px -1px
}

.compras-pagoadelantado {
    width: 33px;
    height: 55px;
    background-position: -123px -110px
}

.compras-docts {
    width: 58px;
    height: 48px;
    background-position: -3px -105px
}

.compras-aperturas {
    width: 63px;
    height: 49px;
    background-position: -6px -54px
}

.compras-sorteo {
    width: 40px;
    height: 53px;
    background-position: -84px -57px
}

.tdc-home-rep {
    background: url(../images/compras-tarjeta-credito.png) no-repeat;
    background-size: contain;
    width: 193px;
    height: 122px
}

.tdd-home-rep {
    background: url(../images/compras-tarjeta-debito.png) no-repeat;
    background-size: contain;
    width: 193px;
    height: 122px
}

.interna-info-box {
    width: 571px;
    height: 264px;
    background: #fff;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0, 84, 155, .56);
    box-shadow: 0 1px 5px 0 rgba(0, 84, 155, .56);
    border-radius: 88px;
    position: relative;
    padding: 33px 0 48px 0
}

.titulo-slider {
    font-family: latobold, sans-serif;
    font-size: 1rem;
    color: #44c5e4
}

.division-slider {
    width: 100%;
    height: 1px;
    background: #e8e8e7;
    margin: 5px 0 20px 0
}

.compras-slider-box {
    width: 550px;
    height: 200px
}

.compras-icon-aperturas,
.compras-icon-contactless,
.compras-icon-nip,
.compras-icon-pagoadelantado,
.compras-icon-solicita,
.compras-icon-sorteo {
    background: url(../images/pantallas/copras-sprite-iconos.png) no-repeat
}

.compras-icon-aperturas {
    background-position: -2px -87px;
    width: 112px;
    height: 84px
}

.compras-icon-nip {
    background-position: -2px -254px;
    width: 71px;
    height: 85px
}

.compras-icon-contactless {
    background-position: -2px -341px;
    width: 70px;
    height: 91px
}

.compras-icon-sorteo {
    background-position: -2px -434px;
    width: 65px;
    height: 88px
}

.compras-icon-solicita {
    background-position: -2px -524px;
    width: 62px;
    height: 86px
}

.compras-icon-pagoadelantado {
    background-position: -66px -524px;
    width: 54px;
    height: 89px
}

.compras-slide-texto {
    font-size: .8rem;
    color: #626363;
    line-height: 1.1;
    margin: 8px 0 8px 0
}

.compras-slide-texto span {
    font-size: 10px
}

.legales-compras-movil {
    font-size: 10px;
    color: #626363;
    margin: 25px 45px 10px;
    line-height: 13px
}

.legales-compras-movil a {
    color: #225aa7 !important;
    text-decoration: underline !important
}

.logos-footer-contenedor {
    height: 70px
}

.logo-facebook-ftr {
    width: 37px;
    height: 37px
}

.logo-youtube-ftr {
    width: 37px;
    height: 37px;
    margin-left: 12px
}

.logo-bancoppel-ftr {
    width: 189px;
    height: 37px
}

.bloquea-portrait {
    background-image: url(../images/gira-dispositivo.png);
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 6;
    position: fixed;
    top: 0;
    left: 0
}

.aviso-local-storage {
    height: 100vh;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    z-index: 1
}

.ovarlay-capa {
    background: rgba(0, 0, 0, .4)
}

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: dash 4s linear alternate forwards;
    animation: dash 4s linear alternate forwards
}

.avion {
    opacity: 0;
    -webkit-animation: aparicion .3s linear forwards;
    animation: aparicion .3s linear forwards;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 1000
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000
    }

    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes aparicion {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes aparicion {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.img-logo-bcopp {
    background: url(../images/deteccion-explorer/logo-bcpp.png) no-repeat;
    float: left;
    width: 291px;
    height: 53px;
    margin: 0 0 20px 0
}

.img-logo-sinfilas {
    background: url(../images/deteccion-explorer/bancoppel-sin-filas.png) no-repeat;
    float: right;
    width: 279px;
    height: 53px;
    margin: 0 0 20px 0
}

/* Sección WhatsApp */
#whatsappLista {
    height: 390px;
    margin-bottom: 30px;
}
.whatsapp-titulo-descripcion {
    color: #00549b;
    font-family: 'latobold', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    margin: 16px 0;
}
.whatsapp-titulo-descripcion img {
    width: 28px;
}
.whatsapp-icono-box {
    border-radius: 100%;
    width: 58px;
    height: 58px;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}
.whatsapp-icono-box:hover~.chat-texto-lista {
    font-family: latobold, sans-serif
}
.whatsapp-icono-box:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}
.whatsapp-icono-box:active {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.whatsapp-parrafo {
    font-family: 'latobold', sans-serif;
    font-size: 15px;
    text-align: center;
    color: #00549b;
    line-height: 1.5;
    padding: 20px;
}
.whatsapp-icono-disposicion-prestamos {
    background: url(../images/svgs/atm-ventanilla-electronica.svg) no-repeat;
    background-size: cover
}

.activo .whatsapp-icono-disposicion-prestamos {
    background: url(../images/svgs/atm-ventanilla-electronica-activo-whatsapp.svg) no-repeat;
    background-size: cover
}

.whatsapp-icono-app-bancoppel {
    background: url(../images/svgs/atm-retirar-sin-tarjeta.svg) no-repeat;
    background-size: contain
}
.activo .whatsapp-icono-app-bancoppel {
    background: url(../images/svgs/atm-retirar-sin-tarjeta-activo-whatsapp.svg) no-repeat;
    background-size: contain
}

.whatsapp-icono-ubica-sucursal {
    background: url(../images/svgs/chat-ubica.svg) no-repeat;
    background-size: contain
}
.activo .whatsapp-icono-ubica-sucursal {
    background: url(../images/svgs/chat-ubica-activo-whatsapp.svg) no-repeat;
    background-size: contain
}

.whatsapp-icono-simula-prestamo {
    background: url(../images/svgs/atm-pago-coppel.svg) no-repeat;
    background-size: contain
}
.activo .whatsapp-icono-simula-prestamo {
    background: url(../images/svgs/atm-pago-coppel-activo-whatsapp.svg) no-repeat;
    background-size: contain
}

.whatsapp-icono-resuelve-dudas {
    background: url(../images/svgs/resuelve-dudas-whatsapp.svg) no-repeat;
    background-size: cover
}
.activo .whatsapp-icono-resuelve-dudas {
    background: url(../images/svgs/resuelve-dudas-whatsapp-activo.svg) no-repeat;
    background-size: cover
}

.whatsapp-icono-dudas-prestamo {
    background: url(../images/svgs/atm-prestamo-digital.svg) no-repeat;
    background-size: cover
}
.activo .whatsapp-icono-dudas-prestamo {
    background: url(../images/svgs/atm-prestamo-digital-activo-whatsapp.svg) no-repeat;
    background-size: cover
}
.whatsapp-icono-promociones {
    background: url(../images/svgs/9800-icon-pago.svg) no-repeat;
    background-size: cover
}
.activo .whatsapp-icono-promociones {
    background: url(../images/svgs/9800-icon-pago-activo-whatsapp.svg) no-repeat;
    background-size: cover
}
.whatsapp-texto-lista {
    font-size: 15px;
    color: #626363;
    margin: 0 0 0 16px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    width: 206px;
}
.activo .whatsapp-texto-lista {
    font-family: 'latobold', sans-serif;
    color: #44c5e4;
}
.whatsapp-icono-box:hover~.whatsapp-texto-lista {
    font-family: 'latobold', sans-serif;
}
.icono-whatsApp {
    background: url(../images/svgs/logo_whatsapp.svg) no-repeat;
    width: 52px;
    height: 49px;
}

.whatsapp-texto-asterisco {
    width: 206px;
    font-size: .9rem;
    color: #626363;
    margin:  16px;
    line-height: 1.2;
    text-align: left;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.phone-whatsapp {
    padding-top: 30px;
}