@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: local('Roboto Thin'), local('Roboto-Thin'), url('../fonts/Roboto/Roboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

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

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold Italic'), local('Roboto-Bold-Italic'), url('../fonts/Roboto/Roboto-Bold-Italic.ttf') format('truetype');
}

:root{
    --ta-blue: #0047BB;
    --ta-orange: #FF7F32;
    --ta-black: #0F1824;
    --gray-100: #818FA0;
    --gray-80: #C7C7C7;
    --gray-60: #E1E1E1;
    --gray-40: #EDEDED;
    --gray-20: #F8F8F8;
    --green-100: #037D5B;
    --green-80: #038B65;
    --green-60: #039B70;
    --green-40: #04AC7C;
    --green-20: #04BF8A;
    --livid-100: #243B59;
    --livid-80: #3F5B80;
    --livid-60: #6883A6;
    --livid-40: #B0C3DD;
    --livid-20: #D5E0EF;
    --livid-10: #E5EDF8;
    --livid-5: #F2F6FB;
    --navy-100: #041E42;
    --navy-80: #002F7B;
    --sky-100: #0056E2;
    --sky-80: #0099FF;
    --sky-60: #5DB4FF;
    --sky-40: #ABD8FF;
    --sky-20: #E9F6FF;
    --orange-10:#FEEADF;
    --orange-20: #FBD1B9;
    --purple-40: #ECCFE2;
    --purple-20: #F3E8EF;
    --purple-text: #8A1B61;
    --white: #ffffff;
    --pm-yellow: #FFC600;
    --purple-ta: #8D1B60;
    --light-orange: #FF690F;
    --amiritmo-back: #DDEAF6;
}
html{
    font-size: 16px;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;    
}
body.op-0{
    transition-property: all;
    transition-duration: 1200ms;
    opacity: 0;
}

body > header {
    background-color: var(--ta-blue);
    background-image: url(../images/assets/menu-background.png);
    background-repeat: repeat-x;
    display: block;
    padding: 24px 120px;
    transition: all;
}
body > header.opa-0{
    opacity: 0;
    transition-property: all;
    transition-duration: 500ms;
    transition-delay: 20ms;
}
body > header.fixxed{
    position: fixed;
    width: calc(100vw - 220px);
    opacity: 1;
    z-index: 99;
    box-sizing: initial;
}
body > header > .logo{
    width: 94px;
    height: auto;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
}

.mt-body{
    position: relative;
    top: 108px;
}
.slide a{
    color: var(--ta-orange);
}
.slide a.orange-link{
    color: var(--white);
}
ul li {
    font-size: 2rem;
}
#headcopy{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--livid-5);
    padding: 80px;
    background-image: url(../img/background-1.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.opa-0{
    opacity: 0;
}
#headcopy h3{
    color:#041E42;
    font-size: 32px;
    font-weight: 400;
    max-width: 636px;
    text-align: center;
    margin: 0 0 2.5rem 0;
}

footer {
    background-color: var(--navy-100);
}

footer a{
    color: #fff;
    padding-right: 16px;
    font-weight: 700;
    text-decoration: none;
}

footer section.logos, footer section.legals, footer section.logos.map{
    padding: 5rem 7rem;
}

#atentioncenter{
    padding: 10rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
}

#atentioncenter > h3{
    font-size: 24px;
    color: #FF7F30;
    margin: 0px;
}

#atentioncenter > h2{
    font-size: 64px;
    color:var(--ta-blue);
    margin: 48px 0px 0px 0px;
}

#atentioncenter > p{
    font-size: 24px;
    color: #041E42;
}
#atentioncenter .column-3 article > p{
    font-size: 1.4rem;
}
.column-3{
    display: flex;
    flex-direction: row;
    align-items: top;
    margin-top: 80px;
}

.column-3 article{
    width: 30%;
    margin-right: 3%;
}

.column-3 article > div{
    background-color: #F2F6FB;
    padding: 38px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 24px;
}

.column-3 article > div h5{
    font-size: 24px;
}

.column-3 article > div button{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #FF7F30;
    color: #fff;
    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 28px;
    font-weight: 500;
    cursor: pointer;
}

.column-3 article > p{
    font-size: 24px;
    max-width: 380px;
    text-align: center;
}
.img-fluid{
    max-width: 100%;
}
.text-gray{
    color: #818DA0;
}
.text-white{
    color: var(--gray-20);
}
.text-blue{
    color: var(--ta-blue);
}
.text-gray-light{
    color: var(--livid-40);
}
.text-black{
    color: var(--ta-black);
}
.medium-text{
    font-size: 1.4rem;
}
#faq{
    background-color: #F2F6FB;
    margin-top: 80px;
    padding: 172px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#faq > section{
    max-width: 732px;
    width: 100%;
}

#faq > h3{
    font-size: 24px;
    color: #FF7F30;
    margin: 0px;
}

#faq > h2{
    font-size: 64px;
    color:var(--ta-blue);
    margin: 48px 0px 0px 0px;
}

#faq > p{
    font-size: 24px;
    color: #041E42;
    margin: 32px 0 0 0;
}
#faq header {
    display: flex;
    margin-top: 80px;
}
#faq header > button{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #D5E0EF;
    border-radius: 8px;
    width: calc(50% - 8px);
    padding: 24px;
    text-align: left;
    background-color: transparent;
    font-weight: 500;
    font-size: 24px;
    color: #041e42;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#faq header > button:nth-child(1){
    margin-right: 24px;
}
#faq header > button > img{
    width: 48px;
    height: auto;
    margin-right: 16px;
}
#faq header > button.active{
    border: 2px solid #0047BA;
}
.faq-wrapper{
    margin: 24px 0px;
}
.faq-wrapper article{
    display: flex;
    background-color: #E5EDF8;
    color: #041E42;
    max-width: 732px;
    padding: 32px;
    margin-bottom: 16px;
    border-radius: 16px;
    justify-content: space-between;
    align-items: center;
}
.faq-wrapper article p{
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.faq-wrapper article button{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    padding: 0px;
    width: 48px;
    height: 48px;
}

#download-app{
    display: flex;
    justify-content: center;
}

#download-app div.holder{
    background-color: #041E42;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 80%;
    max-width: 1200px;
    border-radius: 32px;
    position: relative;
    top: -80px;
}

#download-app h3{
    font-size: 24px;
    color: #FF7F30;
    margin: 0px;
}

#download-app h2{
    font-size: 32px;
    color: #ffffff;
    margin: 48px 0px 32px 0px;
}

#download-app p{
    font-size: 24px;
    color: #ffffff;
    margin: 0px 0px 32px 0px;
}

#download-app div.holder .app-logo{
    position: relative;
    top: -60px;
}

#download-app .column-2{
    margin-bottom: 172px;
}

#download-app .column-2 img:first-child{
    margin-right: 40px;
}

#download-app #qr{
    position: absolute;
    top: 464px;
}

#new-features{
    margin-top: 270px;
    display: flex;
    justify-content: center;
}
#new-features h3{
    font-size: 32px;
    color: #FF7F30;
    margin: 0px;
}
#new-features .column-2{
    display: flex;
    max-width: 960px;
}
#new-features .column-2 article:first-child{
    width: 55%;
}
#new-features .column-2 article{
    width: 45%;
}
#new-features article .orange-section{
    position: relative;
    background-color: #FF7F30;
    border-radius: 16px;
    color: #fff;
    margin-top: 54px;
    padding: 48px 48px 0px 48px;
    min-height: 190px;
}
#new-features article .orange-section img.infographic{
    position: relative;
    margin-top: 24px;
    top: 4px;
}

#new-features article .orange-section span{
    color: #041E42;
}

#new-features .column-2 article:first-child{
    margin-right: 24px;
}

#new-features article .blue-section{
    position: relative;
    background-color: #E5EDF8;
    border-radius: 16px;
    color: #041E42;
    padding: 48px 48px 16px 48px;
    margin-top: 24px;
    min-height: 210px;
}

#new-features article .blue-section h2{
    margin-top: 24px;
}

#new-features article .blue-section h2 span{
    color: #0047BA;
}

#new-features .column-2 .info-principal{
    position: relative;
    background-color:#F2F6FB;
    border-radius: 16px;
    padding: 48px 48px 0px 48px;
    margin-top: 16px;
}
#new-features .column-2 h4{
    color: #0047BA;
    font-size: 32px;
    margin: 0px;
}
#new-features .column-2 p{
    font-size: 24px;
    margin: 32px 0px 0px 0px;
}

#new-features .img-holder{
    margin-top: 32px;
}

#new-features h2{
    font-size: 32px;
    margin: 0;
}
#new-features .column-2 .floating-link{
    position: absolute;
    top:48px;
    right: 48px;
}
#socialmedia{
    background-color: var(--ta-blue);
    color:#fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 172px;
    padding: 112px 24px;
    background-image: url(../img/background-2.png);
    background-repeat: no-repeat;
}

#socialmedia h2{
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    max-width: 636px;
    text-align: center;
}

#socialmedia h3{
    font-size: 32px;
    font-weight: 400;
}

#socialmedia nav{
    margin-top: 32px;
}

#socialmedia nav a img{
    border-right: 1px solid #fff;
    margin-right: 32px;
    padding-right: 32px;
}

#socialmedia > nav > a:last-child > img{
    border-right: none;
}

.img-holder .mobile{
    display: none;
}

#map{
    margin-top: 3rem;
    margin-left: 2rem;
}
.right-divider{
    border-right: 2px solid var(--gray-20);
    margin-right: 1.5rem;
}
.left-divider{
    border-left: 2px solid var(--gray-20);
    margin-left: 1.5rem;
    padding-left: 1.5rem;
}
.max-w-500{
    max-width: 500px;
}
.max-w-600{
    max-width: 600px;
}
.max-w-700{
    max-width: 700px;
}
.max-w-800{
    max-width: 800px;
}
.max-w-900{
    max-width: 900px;
}
.max-w-1000{
    max-width: 1000px;
}
.max-w-1100{
    max-width: 1100px;
}
.max-w-1200{
    max-width: 1200px;
}
/********** INICIA ESTILOS GENERALES ************/
.hidden{
    display: none;
}

button{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: .8rem 2rem;
    border-radius: 2rem;
    cursor: pointer;
}
button.primary {
    background-color: var(--ta-orange);
    color: var(--gray-20);
}
button.transparent {
    background-color: #ffffff00;
    color: var(--gray-100);
}

header.website{
    position: relative;
    padding: 1.5rem 7rem;
    display: flex;
    width: calc(100vw - 14rem);
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    box-sizing: initial;
}

header.website nav{
    text-align: right;
}

header.website nav a{
    position: relative;
    text-decoration: none;
    font-weight: 400;
    color: var(--gray-20);
    font-size: 1.1rem;
    margin-right: 3rem;
    padding-top: 1rem;
}
header.website nav a.selected{
    font-weight: 700;
}
header.website .logo{
    padding-left: 1rem;
    padding-top: .5rem;
}
.back-gray{
    background-color: var(--livid-5);
}

.back-darkblue{
    background-color: var(--navy-100);
}

.back-orange{
    background-color: var(--ta-orange);
}

h2 {
    font-size: 4rem;
    color: var(--ta-blue);
}

p{
    font-size: 2rem;
    color: var(--navy-100)
}

main{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}
main section{
    width: 100%;
}
main section.section-content{
    max-width: 1000px;
    padding: 5rem 0;
 }

 .text-orange{
    color: var(--ta-orange);
 }

 .text-yellow{
    color: var(--pm-yellow);
 }

 .text-blue{
    color: var(--ta-blue);
 }
 .text-navy{
    color: var(--navy-100);
 }
 .text-white {
    color: var(--gray-20)
 }
 .text-purple{
    color: var(--purple-text);
 }
 .container{
    display: flex;
    padding: 5rem;
    max-width: 1000px;
 }
 .container-nopadding{
    display: flex;
    padding: 0rem;
    max-width: 1000px;
 }
 .col-3{
    display: inline-block;
    width: 24%;
 }
 .col-4{
    display: inline-block;
    width: 32%;
 }
 .col-5{
    display: inline-block;
    width: 40%;
 }
 .col-6{
    display: inline-block;
    width: 49%;
 }
 .col-7{
    display: inline-block;
    width: 58%;
 }
 .col-8{
    display: inline-block;
    width: 65%;
 }
.col-9{
    display: inline-block;
    width: 74%;
}
 .responsive-img{
    width: 100%;
 }
 h3{
    font-size: 3rem;
    margin: 3rem 0;
    text-align: center;
}
.items-align-top{
    display: inline-flex;
    align-items: baseline;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center !important;
}
.text-left{
    text-align: left;
}
.row{
    display: flex;
    align-items: start;
}
.row-space-around{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-around;
}
.row-space-between{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-between;
}
.row-space-evenly{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-evenly;
}
.row-flex{
    display: flex;

}
.max-space{
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
}
.max-center{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
}
.max-left{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    max-width: 1000px;
}
.max-right{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    max-width: 1000px;
}
.max-center-btn{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    flex-direction: column;
    align-items: center;
}
.max-row{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 1000px;
}
.no-padding{
    padding: 0rem;
}

.center-content{
    flex-wrap: wrap;
    justify-content: center;
}
.column.center-content{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
main section.section-content.flagship{
    max-width: 1200px;
}
.flex-wrapper{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}
.container.flagship{
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.margin-1{
    margin: 1rem;
}

.margin-tb-1{
    margin: 1rem 0;
}
.space-between{
    display: flex;
    justify-content: space-between;
}
.arrow-next{
    background-image: url(../images/assets/arrow-next.png);
    width: 1rem;
    height: 2rem;
    background-repeat: no-repeat;
    position: absolute;
    top: 1rem;
    right: 0.5rem;
}

.navigation-indicator{
    width: 100%;
    height: 0.5rem;
    position: absolute;
    bottom: -3.4rem;
    left: 0;
    background-color: var(--ta-orange);
    border-radius: 0.5rem;
}
.navigation-indicator.yellow-indicator{
    background-color: var(--pm-yellow);
}
#subfooter{
    background-color: var(--ta-orange);
    display: flex;
    justify-content: center;
    padding: 1.5rem;
}
#subfooter nav{
    margin-right: 1.5rem;
}

footer .main-content{
    display: block;
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 4rem;
    max-width: 1200px;
}
footer p, footer a, footer h5{
    color: var(--gray-20);
    font-size: 1em;
}

footer #logos .logo-landus{
    border-right: 2px solid var(--gray-20);
    margin-right: 1.5rem;
    padding-right: 1.5rem;
}

.items-right{
    display: inline-flex;
    justify-content: right;
}
.linklist a{
    display: block;
    font-weight: 400;
    width: 100%;
    margin-bottom: 1rem;
}
#legals{
    margin-top: 1.5rem;
}
#legals div p{
    max-width: 320px;
}
footer .socialmedia{
    margin-top: 2rem;
}
footer .entities {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 5rem;
}
footer .entities div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
footer .entities img{
    margin-right: .8rem;
    width: auto;
}
button.min-button{
    min-width: 260px;
}
.card{
    padding: 3rem;
    border-radius: 1.5rem;
    background-color: var(--gray-20);
    /**box-shadow: 0rem  -.1rem .6rem var(--livid-40);**/
}
.card-blue{
    background-color: var(--ta-blue);
    color: var(--gray-20);
}
.card-blue p{
    background-color: var(--ta-blue);
    color: var(--gray-20);
}
.card-gray{
    background-color: var(--livid-5);
}
.card.center{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
}
.card.no-shadow{
    box-shadow: none;
    border: 2px solid var(--livid-10);
}
figure {
    width: 100%;
    margin: 0;
}
figure img{
    width: 100%;
    margin: 0;
}
.next-button button{
    background-color: transparent;
    padding: 0;
}
.secondary{
    background-color: var(--ta-blue);
    color: var(--gray-20);
}

.secondary.ghost{
    background-color: transparent;
    color: var(--ta-blue);
    border: 2px solid var(--ta-blue);
}
.secondary.ghost.boton-modulo-digital{
    background-color: transparent;
    color: var(--ta-orange);
    border: 2px solid var(--ta-orange);
    width: calc(100% - 5rem);
}
.card-flat-blue{
    background-color: var(--livid-5);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.8s;
}
.card-tag{
    display: inline-block;
    padding: 1rem;
    background-color: var(--gray-80);
    text-align: center;
    position: relative;
    top: -3.5rem;
    border-radius: 8px;
    color: var(--gray-20);
    font-weight: 700;
}

.card-tag.blue{
    background-color: var(--ta-blue);
}
.card-tag.orange{
    background-color: var(--ta-orange);
}
.card-tag.green{
    background-color: var(--green-20);
}
.card-tag.purple{
    background-color: var(--purple-ta);
}
.card-flat-blue figure img{
    width: auto;
}
.card-flat-blue:hover{
    background-color: var(--livid-10);
}
.card-flat-blue.outline-blue{
    background-color: var(--white);
    border: 2px solid var(--ta-blue);
}
.card-flat-blue.outline-blue:hover{
    background-color: var(--livid-10);
    border: 2px solid var(--ta-blue);
}
.card-flat-blue.purple-tint{
    background-color: var(--purple-20);
}
.card-flat-blue.purple-tint:hover{
    background-color: var(--purple-40);
}
.card-flat-softorange{
    background-color: var(--orange-10);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.8s;
}
.card-flat-blue h3, .card-flat-softorange h3{
    font-size: 1.8rem;
    text-align: left;
    margin: 2rem 0 1rem 0;
    font-weight: 500;
}
.card-flat-blue p, .card-flat-softorange p{
    font-size: 1.2rem;
    text-align: left;
}

.card-flat-softorange:hover{
    background-color: var(--orange-20);
}

.card-ghost{
    background-color: #FFFFFF;
    border-radius: 1rem;
    border: 2px solid #BFD1EE;
    padding: 2rem 0.5rem;
    transition: all 0.8s;
    margin-right: 2rem;
}
.card-ghost figure {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.card-ghost figure img{
    width: auto;
}
.card-ghost:hover{
    border: 2px solid var(--ta-blue);
}
.card-ghost h3{
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
}

.card-ghost h3{
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin: 1.5rem 0 2rem 0;
}

.card-ghost a{
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    width: 100%;
    display: block;
    color: var(--ta-blue);
}

.flex-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
}
.flex-col-center{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.keywords-1{
    font-size: 1.5rem;
    text-align: center;
}

.title-section{
    color: var(--ta-blue);
    font-weight: 700;
    margin: 1.5rem 0 3rem 0;
}
footer .entities div.row{
    --bs-gutter-x: 0;
}
.mb-0{
    margin-bottom: 0;
}

.mb-1{
    margin-bottom: 1rem;
}
.mb-2{
    margin-bottom: 2rem;
}
.mb-3{
    margin-bottom: 3rem;
}
.mb-4{
    margin-bottom: 4rem;
}
.mb-5{
    margin-bottom: 5rem;
}

.mt-0{
    margin-top: 0;
}
.mt-1{
    margin-top: 1rem;
}
.mt-2{
    margin-top: 2rem;
}
.mt-3{
    margin-top: 3rem;
}
.mt-4{
    margin-top: 4rem;
}
.mt-5{
    margin-top: 5rem !important;
}
.mt-6{
    margin-top: 6rem;
}
.mt-7{
    margin-top: 7rem;
}
.mt-8{
    margin-top: 8rem;
}

.ml-0{
    margin-left: 0;
}
.ml-1{
    margin-left: 1rem;
}
.ml-2{
    margin-left: 2rem;
}
.ml-3{
    margin-left: 3rem;
}
.ml-4{
    margin-left: 4rem;
}

.mr-0{
    margin-right: 0;
}
.mr-1{
    margin-right: 1rem;
}
.mr-2{
    margin-right: 2rem;
}
.mr-3{
    margin-right: 3rem;
}
.mr-4{
    margin-right: 4rem;
}
/* Padding classes */
.p-0 {
    padding: 0;
  }
  
  .p-1 {
    padding: 1rem;
  }
  
  .p-2 {
    padding: 2rem;
  }
  
  .p-3 {
    padding: 3rem;
  }
  
  .p-4 {
    padding: 4rem;
  }
  
  .p-5 {
    padding: 5rem;
  }
  
  /* Padding Top classes */
  .pt-0 {
    padding-top: 0;
  }
  
  .pt-1 {
    padding-top: 1rem;
  }
  
  .pt-2 {
    padding-top: 2rem;
  }
  
  .pt-3 {
    padding-top: 3rem;
  }
  
  .pt-4 {
    padding-top: 4rem;
  }
  
  .pt-5 {
    padding-top: 5rem;
  }
  
  /* Padding Bottom classes */
  .pb-0 {
    padding-bottom: 0;
  }
  
  .pb-1 {
    padding-bottom: 1rem;
  }
  
  .pb-2 {
    padding-bottom: 2rem;
  }
  
  .pb-3 {
    padding-bottom: 3rem;
  }
  
  .pb-4 {
    padding-bottom: 4rem;
  }
  
  .pb-5 {
    padding-bottom: 5rem;
  }
  
  /* Padding Left classes */
  .pl-0 {
    padding-left: 0;
  }
  
  .pl-1 {
    padding-left: 1rem;
  }
  
  .pl-2 {
    padding-left: 2rem;
  }
  
  .pl-3 {
    padding-left: 3rem;
  }
  
  .pl-4 {
    padding-left: 4rem;
  }
  
  /* Padding Right classes */
  .pr-0 {
    padding-right: 0;
  }
  
  .pr-1 {
    padding-right: 1rem;
  }
  
  .pr-2 {
    padding-right: 2rem;
  }
  
  .pr-3 {
    padding-right: 3rem;
  }
  
  .pr-4 {
    padding-right: 4rem;
  }
 
.pl-20{
    padding-left: 20%;
}

.blue-card{
    background-color: var(--ta-blue);
    border-radius: 2rem;
    position: relative;
}
.blue-card{
    padding: 3rem;
    color: var(--gray-20);
}
.blue-card p{
    color: var(--gray-20);
    font-size: 1.5rem;
}
.blue-card p.text-orange{
    color: var(--ta-orange);
    font-size: 1.5rem;
}

.light-blue-card{
    background-color: var(--amiritmo-back);
    border-radius: 1.5rem;
    padding: 3rem;
    color: var(--navy-100);
    position: relative;
    min-height: 440px;
}
.light-blue-card p{
    color: var(--ta-blue);
    font-size: 1.5rem;
}
.light-blue-card p.text-orange{
    color: var(--ta-orange);
    font-size: 1.5rem;
}
.amiritmo-new-banner .next-button{
    position: absolute;
    bottom: 2.5rem;
}
.logo-amiritmo-banner{
    max-width: 240px;
    margin-bottom: 0.8rem;
}
.elements-right{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
}
.font-1{
    font-size: 1rem;
}
.font-1s{
    font-size: 1.2rem;
}
.font-1m{
    font-size: 1.5rem;
}
.font-2{
    font-size: 2rem;
}
.font-3{
    font-size: 3rem;
}
.font-4{
    font-size: 4rem;
}
.promo-3{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.logos-promos img{
    margin-right: 1rem;
}
.main-promo{
    padding: 0;
    overflow: hidden;
    max-height: 480px;
}
.main-promo image{
    width: 100%;
    height: auto;
}

.promo-3 h3{
    max-width: 435px;
    font-weight: 400;
    font-size: 2rem;
}
.float-corner{
    position: absolute;
    width: 140px;
    right: 0;
    bottom: -2px;
}
.float-logo-amiritmo{
    position: absolute;
    left: 3rem;
    bottom: 12rem;
}
ol li{
    font-size: 2rem;
    color: var(--navy-100)
}
.orange-link{
    text-decoration: none;
    background-color: var(--ta-orange);
    border-radius: 2rem;
    color: var(--white);
    padding: 0.8rem 2rem;
    min-width: 260px;
    border: none;
    cursor: pointer;
    position: relative;
}
.blue-link{
    text-decoration: none;
    background-color: var(--ta-blue);
    border-radius: 2rem;
    color: var(--white);
    padding: 0.8rem 2rem;
    min-width: 260px;
    border: none;
    cursor: pointer;
    position: relative;
}
.link-text{
    color: var(--ta-blue);
    text-decoration: underline;
}
.orange-link .icon-tutorial{
    position: relative;
    top: .4rem;
    margin-right: 1rem;
}
#register-app-ta{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding-bottom: 5rem;
}
.legals{
    max-width: 1200px;
    margin-top: 4rem;
    margin-bottom: 5rem;
    padding-top: 3rem;
    border-top: 2px solid var(--livid-10);
}
#other-products{
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    box-shadow: 0rem 0.2rem 0.6rem var(--livid-40);
    border-radius: 0 0 2rem 2rem;
}
#other-products .card.card-blue h3{
    font-size: 1.5rem;
    margin: 1rem 0;
}
#other-products .card p{
    font-size: 1.5rem;
    margin: 1rem 0;
    font-weight: 700;
    line-height: 2.1rem;
}
#other-products > .row{
    align-items: stretch;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    position: relative;
    padding-top: 3rem;
}
#other-products .card{
    position: relative;
    box-shadow: none;
    margin-left: .8rem;
}
#other-products .card.store{
    background-color: var(--livid-5);
}
#other-products .card.insurance{
    background-color: var(--sky-20);
}
#other-products .card button{
    position: absolute;
    top: 2rem;
    right: 2rem;
}
.secondary-list{
    list-style: disc;
}
#other-products #close-other-products{
    position: absolute;
    width: 100px;
    right: 0px;
    top: -25px;
}
/********** TERMINA ESTILOS GENERALES ************/

/********** INICIA ANIMACIONES ************/
.appear {
    transition: all 0.8s;
    opacity: 0;
    transform: translateY(40px);
  }
  
.appear.inview {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}
/********** TERMINAN ANIMACIONES ************/

/********** INICIA Quienes Somos ************/

#we-are-header{
    display: flex;
    padding: 5rem 5rem 0 5rem;
    justify-content: center;
}
#we-are-header h2{
    font-size: 4rem;
    text-align: right;
}
#we-are-header.affiliate h2{
    text-align: left;
    margin-top: 1rem;
}
#we-are-map{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 8rem;
}

#we-are-map .col-6.text-right > h3{
    text-align: right;
    margin: 0px 0px 32px 0px;
}

#we-are-banner{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding-top: 8rem;
}
#we-are-banner .center-content{
    max-width: 1300px;
}
#we-are-banner .know-more{
    font-size: 3rem;
    margin: 0;
}

#we-are-banner .row > h3{
    text-align: left;
}

#we-are-banner .asesores{
    position: relative;
    top: 0.3rem;
}
#we-are-banner .blue-link{
    padding: 1rem 5rem;
    margin-top: 2rem;
    display: inline-block;
    min-width: 0;
}
#we-are-banner .font-2{
    line-height: normal;
}
#we-are-benefits {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
}
#we-are-benefits nav{
    margin-top: 1rem;
}
#we-are-benefits nav button{
    margin-bottom: 2rem;
    font-size: 1.2rem;
    text-align: left;
    position: relative;
}

#we-are-benefits nav button.selected{
    color: var(--navy-100);
    font-weight: 700;
}
#we-are-benefits .col-9 .show{
    padding-left: 4rem;
    border-left: solid 2px var(--livid-10);
    position: relative;
}

#we-are-carrers{
    padding-top: 8rem;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

#we-are-carrers .carrers-formulary{
    margin-right: 5rem;
    
}
#we-are-carrers .carrers-formulary h3{
    text-align: left;
    margin-top: 4rem;
}

.slide .text-icons{
    position: relative;
    top: .5rem;
    margin-right: .5rem;
}

/********** TERMINA Quienes Somos ************/

/********** INICIA Ayuda ************/
#help-header{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 5rem;
}
#help-header h2{
    margin: 0;
}

#help-header h4{
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: 400;
}

#selection-faq-selector{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
}
#selection-faq-selector nav{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-between;
}
#selection-faq-selector nav button.transparent{
    display: flex;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
    font-weight: 700;
    color: var(--navy-100);
}
#selection-faq-selector nav button.transparent.selected{
    color: var(--ta-orange);
}
#selection-faq-selector nav button.transparent img{
    margin-bottom: 1rem;
}
#selection-faq-selector nav button.transparent .navigation-indicator{
    bottom: -.2rem;
}
#faq-questions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 10rem;
}
#faq-questions .slide{
    width: 100%;
    max-width: 1000px;
}
#faq-questions .slide p{
    font-size: 1.5rem;
}
#faq-questions article{
    background-color: var(--livid-5);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
}
#faq-questions article div{
    margin-top: 3rem;
    margin-bottom: 1rem;
}
#faq-questions article h4{
    margin: 0;
    position: relative;
}
#faq-questions ol li{
    font-size: 1.5rem;
}
.toggle-show{
    position: absolute;
    right: 2rem;
    top: 2rem;
    background-color: transparent;
    padding: 0;
}
.toggle-show.down img{
    rotate: 0deg;
    transition-property: all;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.toggle-show.up img{
    rotate: -180deg;
    transition-property: all;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/********** Termina Ayuda ************/

/********** INICIA Promociones ************/
#promo-header{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-bottom: 2px solid var(--livid-10);
    background-image: url(../images/assets/promos-background.png);
    background-repeat: repeat-x;
    position: relative;
}
#promo-header h2{
    text-align: left;
    margin-bottom: 1rem;
}
#promo-header h4{
    max-width: 550px;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 400;
}

#promos-list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
    top: -10rem;
}
#promos-list.seguros{
    top: -5rem;
}
#security-header{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0 11rem 0;
    border-bottom: 2px solid var(--livid-10);
    background-image: url(../images/assets/promos-background.png);
    background-repeat: repeat-x;
    position: relative;
}
#security-header h4{
    max-width: 700px;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 400;
}
#security-header a.orange-link img, .card a.orange-link img{
    position: relative;
    top: 0.5rem;
    padding-right: 0.5rem;
}
#security-header a.orange-link{
    margin-right: 1rem;
}
#security-header small{
    font-size: 1rem;
}
#security-header p.hours, .card p.hours{
    font-size: 1rem;
    position: relative;
    top: 1rem;
}
.card .header-card{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card .header-card h4{
    margin: .4rem 1rem;
    font-size: 1.4rem;
}

.card-blue .header-card h4{
    color: var(--gray-20);
}
#promo-legals{
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -6rem;
    
}
#promo-legals .center-content{
    width: 100%;
    max-width: 1200px;
    display: flex;
}
#promo-legals p{
    font-size: 1.4rem;
    border-top: 2px solid var(--livid-10);
    padding-top: 3rem;
}

/********** Termina Promociones ************/

/********** INICIA Side pages ************/
#side-header{
    padding: 5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
#side-header .side-title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}
#side-header .side-title h2{
    margin-left: 3rem;
}
#side-content{
    display: flex;
    padding-top: 5rem;
    padding-bottom: 8rem;
    max-width: 1200px;
}
#side-content.pt-0{
    padding-top: 0;
}
#side-content.hidden{
    display: none;
}
#legal-promos{
    display: flex;
    padding-top: 0rem;
    padding-bottom: 8rem;
    max-width: 1200px;
    flex-direction: column;
    flex-wrap: wrap;
}
#legal-promos .column {
    max-width: 1200px;
    width: 100%;
}
.buttons-cta{
    display: flex;
    margin-top: 5rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.buttons-cta button{
    margin-right: 2rem;
}
.site-map{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#side-content .column{
    width: 1200px;
}
.site-map nav{
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
}
.site-map h4{
    font-size: 2rem;
}
.site-map nav a{
    color:var(--ta-blue);
    font-size: 2rem;
    text-decoration: none;
    margin-bottom: 2rem;
}
/********** TERMINA Side pages ************/

/********** INICIA Home ************/
#home-header{
    background: linear-gradient(0deg, #012681, #0147BB);
    padding: 5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    position: relative;
}
.back-lines{
    /*background-image: url(../images/assets/lineas.png);*/
    background-repeat: no-repeat;
    background-size: contain;
}
.other-lines{
    background-image: url(../images/assets/lines-home.png);
    background-repeat: repeat-x;
}

#selection-quick-access{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
}
#selection-quick-access nav{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-between;
}
#selection-quick-access nav button.transparent{
    display: flex;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
    font-weight: 400;
    color: var(--navy-100);
}
#selection-quick-access nav button.transparent:hover{
    color: var(--ta-orange);
}
#selection-quick-access nav button.transparent img{
    margin-bottom: 1rem;
}
#selection-quick-access nav button.transparent .navigation-indicator{
    bottom: -.2rem;
}
.banner-home{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#home-header h1{
    font-size: 4rem;
    color: var(--gray-20);
    margin: 0 0 5rem 0;
}
.copy-header{
    display: flex;
    flex-direction: column;
}
.qr-copy{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-decoration: none;
}
.qr-copy h2{
    color: var(--gray-20);
    font-weight: 400;
    font-size: 1.5rem;
    margin-left: 2rem;
}
#beneficts{
    max-width: 1200px;
    
}
#beneficts article.card-flat-softorange, #beneficts article.card-flat-blue{
    margin-right: 1.5rem;
    margin-bottom: 2rem;
    min-height: 490px;
    position: relative;
}
#beneficts article.card-flat-softorange:last-child, #beneficts article.card-flat-blue:last-child{
    margin-right: 0;
}
#beneficts article.col-3{
    width: calc(25% - 1rem);
}
#beneficts article.col-6{
    width: calc(50% - 0.5rem);
}
#beneficts article.col-9{
    width: calc(75%);
}
#beneficts article.card-flat-softorange h3{
    margin: 0;
}
#beneficts .card-flat-blue.purple-tint h3 {
    margin: 0;
}
#beneficts .next-button{
    position: absolute;
    bottom: 2rem;
}
#use-cases{
    padding-bottom: 10rem;
}
#atm{
    padding-top: 8rem;
}
#atm h3{
    max-width: 40rem;
    margin-top: 0;
}
#atm p{
    max-width: 52rem;
}
#atm .red-logos{
    margin-bottom: 2rem;
}
.red-logos img{
    margin-right: 1rem;
}

picture.tpv-ta{
    position: relative;
    top: -13rem;
    z-index: 97;
}

picture.success-tpv{
    position: relative;
    top: -10rem;
    right: -9.5rem;
    z-index: 98;
}

picture.tcta{
    position: relative;
    top: -19rem;
    right: -6.8rem;
    z-index: 95;
}

.atm-text{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
}

#atm-section{
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -14rem;
}
#atm{
    padding-bottom: 14rem;
}
#atm .text-center{
    text-align: center;
    font-size: 1.4rem;
    max-width: 1200px;
    margin-top: 5rem;
}
#atm .tips{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
    top: -14rem;
}
#app-ta{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 9rem;
}
#app-ta h4{
    font-size: 1.5rem;
    margin: 1.5rem 0;
}
#app-ta h3.title-section{
    margin: 1.5rem 0 1rem 0;
}
#app-ta article p, #app-ta article h3{
    max-width: 400px;
    line-height: normal;
}
.app-ta-description{
    max-width: 800px;
    margin-bottom: 8rem;
}

#app-ta button.primary{
    margin-top: 2rem;
}

#calendar-payments{
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.calendar-list{
    list-style-image: url(../images/icons/tick-circle.png);
}

.calendar-list li{
    font-weight: 400;
    padding-left: 2rem;
}
#modulos{
    padding-top: 9rem;
}
#modulos.section-content{
    padding-bottom: 0;
}
#modulos .card-flat-blue{
    margin-right: 2rem; 
}
#offers{
    padding-top: 9rem;
    padding-bottom: 9rem;
}
#offers .float-offers-btn{
    position: absolute;
    bottom: 2rem;
    left: 2rem;
}
.card-white{
    background-color: #FFFFFF;
    border-radius: 2rem;
    padding: 2rem;
    position: relative;
}

.float-promotion{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}
#security{
    background-color: var(--ta-orange);
    border-radius: 1rem;
    position: relative;
    padding: 0;
    top: -20rem;
}
#security .main-section{
    padding: 4rem;
}

#security .slide-recommendations{
    padding: 4rem;
    background-color: var(--light-orange);
    border-radius: 0 0 1rem 1rem;
}
#security h2{
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
#security h3{
    margin: 0 0 8rem 0;
    font-size: 4rem;
}
#security .item-security p{
    font-size: 2rem;
}
#security  .new-credit-design{
    position: relative;
    top: -6rem;
    left: 3rem;
}
#security .item-right{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}
.slide-recommendations h4{
    font-size: 2rem;
    margin-bottom: 2rem;
}
#security  .item-atr{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-right: 2rem;
}
#security  .item-atr p{
    font-size: 1.1rem;
}
#security .slide-recommendations img{
    max-width: 70px;
}
#security .close-recommendations, #security .open-recommendations{
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#security .open-recommendations{
    padding: 2rem;
    background-color: var(--light-orange);
    border-radius: 0 0 1rem 1rem;
}
#security .open-recommendations.hidden{
    display: none;
}
#security button.close-slide, #security button.open-slide{
    background-color: transparent;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.img-promo-background{
    background-image: url(../images/assets/nuevofacebook/banner-home-desktop.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/********** TERMINA Home ************/
/********** EMPIEZA Mapa de módulos ************/
#map-header{
    padding-top: 5rem;
    padding-bottom: 10rem;
}
#map-results{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: left;
    position: relative;
    top:-10rem;
}
#map-filter{
    position: relative;
    top:-10rem;
    background-color: var(--white);
    border-radius: 1rem;
    padding: 2rem 3rem;
}
#map-google{
    position: relative;
    top: -15rem;
    z-index: -9;
}
#map-google #map{
    margin: 0;
}
.modulos-title{
    font-size: 2rem;
    margin-bottom: 2rem;
}
#map-results strong.text-orange{
    font-size: 1.5rem;
}
#map-results address{
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-top: 1rem;
    font-style: normal;
}
#map-results .flex-row{
    border-bottom: 1px solid var(--livid-40);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}
#map-results button.transparent{
    background-color: transparent;
    border: 2px solid var(--ta-orange);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ta-orange);
}
.numerals{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 9rem;
}
.numerals a{
    margin: 1rem;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--gray-100);
}
.numerals a.selected{
    color: var(--ta-blue);
}

.numerals button{
    background-color: transparent;
}
/********** TERMINA Mapa de módulos ************/
/********** INICIA Despachos externos ************/
.despachos{
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border-bottom: 2px solid var(--livid-40);
}
.despachos a{
    color: var(--ta-blue);
    text-decoration: none;
    margin-right: 2rem;
}
.despachos address{
    display: inline-block;
    font-style: normal;
    font-size: 2rem;
}
/********** TERMINA Despachos externos ************/

/********** EMPIEZA Usos ************/

#uses-header{
    padding-top: 6rem;
    padding-bottom: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
#uses-header h4{
    font-size: 1.5rem;
}
#uses-header h3{
    margin-top: 0;
}
#uses-info{
    padding-top: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    max-width: 1200px;
}
#uses-info div p{
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.8rem;
    width: 100%;
}
#uses-info > p{
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0.8rem;
    width: 100%;
}
#uses-info div.uses-exp p{
    font-size: 2rem;
}
.error-msj-webpage{
    margin-bottom: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.error-msj-webpage .btn-error{
    color: var(--ta-orange);
    border-color: var(--ta-orange);
    border-radius: 2rem;
    margin-top: 4rem;
    text-decoration: none;
    padding: .8rem 2rem;
}
#uses-info div p.principal-error-msj{
    margin-top: 2rem;
    margin-bottom: 1rem;
}
#uses-info div h4.error-title{
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
/********** TERMINA Usos ************/


/********* Empieza Comisiones ******/
.note-comisions{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}
.note-comisions > article{
    max-width: 1000px;
}
.soft-table{
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}
.soft-table .principal-header{
    border-radius: 1rem 1rem 0 0;
    position: relative;
    border-bottom: 4px solid var(--ta-blue);
}
.soft-table .secondary-header{
    border-radius: 0;
    position: relative;
}
.soft-table .secondary-header.rounded{
    border-radius: 0 0 1rem 1rem;
}
.soft-table .principal-header.rounded{
    border-radius: 1rem;
}
.soft-table strong{
    font-size: 1.5rem;
    text-align: left;
    display: block;
    width: 100%;
}
.soft-table .header-blue{
    background-color: var(--ta-blue);
    color: var(--gray-20);
    padding: 2rem;
}
.soft-table .header-orange{
    background-color: var(--ta-orange);
    color: var(--gray-20);
    
    padding: 2rem;
}
.soft-table .header-yellow{
    background-color: var(--pm-yellow);
    color: var(--gray-20);
    padding: 2rem;
}
.soft-table .btn-comisions{
    background-color: transparent;
    position: absolute;
    right: 1rem;
    top: 1.2rem;
}
.soft-table .btn-comisions.up img{
    rotate: -180deg;
    transition-property: all;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.soft-table .btn-comisions.down img{
    rotate: -0deg;
    transition-property: all;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.table-item{
    padding: 1rem;
    background-color: var(--livid-10);
}

.table-item.even{
    background-color: var(--livid-5);
}
.soft-table .table-item p{
    font-size: 1.2rem;
}
.row-space-around .col-6{
    width: 47%;
}
.table-content{
    padding-top: .5rem;
}
.table-content > div:last-child > div{
    border-radius: 0 0 0 1rem;
}
.table-content > div:last-child > div.even{
    border-radius: 0 0 1rem 0 ;
}
.main-concept{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: var(--livid-20);
}
.table-content p{
    font-size: 1.2rem;
    text-align: center;
}
.main-concept p{
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy-80);
    text-align: center;
}
.table-content .row{
    overflow: hidden; 
    --bs-gutter-x: 0rem;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
}

.table-content .row [class*="col-"]{
    border-right: 4px solid white;
}
.table-content .col-sm-12 > .row:last-child {
    border-bottom: none;
}
.table-content .row .even{
    border-right: none;
}

.table-content [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}
.main-concept small{
    font-size: .8rem;
    font-weight: 500;
}
.pt-6{
    padding-top: 6rem;
}
.pt-7{
    padding-top: 7rem;
}
.pt-8{
    padding-top: 8rem;
}
.pt-9{
    padding-top: 9rem;
}
.pt-10{
    padding-top: 10rem;
}
.pt-11{
    padding-top: 11rem;
}
.pt-12{
    padding-top: 12rem;
}
.pt-13{
    padding-top: 13rem;
}
.pt-14{
    padding-top: 14rem;
}
.pt-15{
    padding-top: 15rem;
}
.pt-18{
    padding-top: 15rem;
}
.pt-24{
    padding-top: 24rem;
}
.soft-table nav{
    margin-top: 1rem;
}
.soft-table nav.table-selector button{
    color: var(--ta-blue);
    border: 2px solid var(--ta-blue);
    background-color: transparent;
    font-weight: 400;
    padding: .5rem 1rem;
    margin-right: 1rem;
}
.soft-table nav.table-selector button.active{
    background-color: var(--ta-blue);
    color: white;
    font-weight: 700;
}
.table-content .row.rounded-left .row:last-child{
    border-radius: 0 0 1rem 0;
}
.table-content .row.rounded-left{
    border-radius: 0 0 0 1rem;
}
/********* Termina Comisiones ******/

/********* Empieza Landing Seguros de vida ******/

.family-img{
    position: absolute;
    right: calc(20% - 4rem);
    top: 5rem;
}
/********* Termina Landing Seguros de vida ******/

/********* Empieza Landing Retiro de efectivo ******/

#cash-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 2rem 5rem 8rem 5rem;
    border-bottom: 2px solid var(--livid-10);
    background-image: url(../images/assets/orange-background.png);
    background-repeat: repeat-x;
    position: relative;
    overflow: hidden;
}
.retiro-efectivo-img{
    position: absolute;
    right: calc(20% - 4rem);
    top: 4rem;
}
#cash-header .title-text{
    font-size: 2rem;
    font-weight: 400;
    max-width: 36rem;
}
#tutorial-cash {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.navigation-cash{
    padding: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.navigation-cash nav{
    display: flex;
    flex-direction: row;
}
.navigation-cash nav a{
    font-size: 1.1rem;
    margin-left: 2rem;
    text-decoration: none;
    color: var(--ta-black);
}
#tutorial-cash .column,
#retiroTarjeta .column,
#retiroEfectivo .column{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
#retiroTarjeta, #retiroEfectivo, #app-tutorial{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
    padding: 5rem 0;
}
#retiroTarjeta{
    padding: 5rem 0 0 0;
}
#app-tutorial{
    padding-top: 5rem;
    padding-bottom: 12rem;
    margin-bottom: 8rem;
}
#app-tutorial .img-retiro-appstore img, #app-tutorial .img-retiro-playstore img{
    max-width: 240px;
}
#cash-uses{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
#cash-uses .wrapper-uses{
    max-width: calc(80% - 4rem);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
#cash-uses .wrapper-uses .card{
    width: calc(37% - 8rem);
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    box-shadow: none;
    background-color: white;
}
#cash-uses .wrapper-uses .card p{
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}
#cash-uses h3{
    font-size: 2rem;
}
.floating-logo-up{
    position: absolute;
    top:-3rem;
}
.floating-logo-down{
    position: absolute;
    bottom:-9rem;
}
.floating-logo-down img{
    max-width: 240px;
}
.steps{
    margin-top: 3rem;
    display: flex;
    position: relative;
    flex-direction: column;
    border: 2px solid var(--ta-blue);
    border-radius: 1rem;
    padding: 2rem;
    min-width: 989px;
    align-items: center;
    justify-content: space-between;
}
.steps p.steps-title{
    font-size: 1.8rem;
    color: var(--ta-blue);
    margin: 0;
    display: block;
    width: 100%;
}
.steps button.transparent{
    padding: 0;
}
.steps-instructions{
    font-size: 1.5rem;
    max-width: calc(100% - 4rem);
    margin: 2rem 0 2rem 0;
}
.next-cash{
    font-size: 1.5rem;
    text-decoration: none;
    position: relative;
}
.next-cash img{
    position: relative;
    top: 1rem;
    margin-right: 1rem;
}
/********* Termina Landing Retiro de efectivo ******/
/********* Empieza Landing App TA ******/
#app-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 2rem 5rem 11rem 5rem;
    border-bottom: 2px solid var(--livid-10);
    background-image: url(../images/assets/orange-background.png);
    background-repeat: repeat-x;
    position: relative;
}
.apps-text{
    font-size: 1.5rem;
}
#app-header h2{
    margin-bottom: 1rem;
}
#app-header .title-text{
    font-size: 1.5rem;
    margin-top: 0px;
}
.qr-code-app{
    position: absolute;
    bottom: 6rem;
    right: 41%;
    bottom: -34px;
    max-width: 200px;
}
.navigation-app{
    padding: 3rem calc(15% - 3rem);
    background-color: var(--livid-10);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.navigation-app nav{
    display: flex;
    flex-direction: row;
}
.navigation-app nav a{
    font-size: 1.5rem;
    margin-left: 2rem;
    text-decoration: none;
    color: var(--ta-blue);
}

.navigation-app nav a span{
    top: -0.3rem;
    position: relative;
    margin-left: 2rem;
}

.app-img {
    position: absolute;
    right: calc(20% - 9rem);
    top: 4rem;
    z-index: 9;
}

#uses-app {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

#uses-app .card h4{
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#uses-app .card p{
    font-size: 1.5rem;
    text-align: center;
}
#uses-app .card small{
    font-size: 1.1rem;
    color: var(--gray-100);
    margin-bottom: 2rem;
    text-align: center;
}

#uses-app .card button span{
    position: relative; 
    top: -0.3rem;
}
#control-app {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}
#control-app h3{
    margin-top: 2rem;
    margin-bottom: 1rem;
}
#control-app .blue-card{
    width: 100%;
    max-width: 1200px;
}
#control-app .blue-card p.text-orange{
    font-size: 2rem;
} 

.consulta-item{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.consulta-item figure{
    width: auto;
    margin-right: 2rem;
}
.consulta-item figure img{
    width: 3rem;
}
.consulta-item .title-item{
    margin-top: 0px;
}
.consulta-item .title-item a{
    display: block;
    margin-top: 1.5rem;
    font-size: 1rem;
    color: white;
    text-decoration: none;
    position: relative;
}
.consulta-item .title-item a img{
    position: relative;
    top: 0.3rem;
}
#pagoTarjeta{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
#pagoTarjeta .subtitle{
    font-size: 2rem;
    font-weight: 400;
}
.content-text{
    font-size: 1.5rem;
    font-weight: 400;
}
.info-despachos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}
.info-despachos p{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.info-despachos p.mail{
    display: list-item;
    padding-left: 1rem;
    list-style-image: url(../images/icons/email-icon.png);
}
.info-despachos p.phone{
    display: list-item;
    padding-left: 1rem;
    list-style-image: url(../images/icons/phone-icon.png);
}
.info-despachos p.direction{
    display: list-item;
    padding-left: 1rem;
    list-style-image: url(../images/icons/direction-icon.png);
}
.info-despachos p.hours{
    display: list-item;
    padding-left: 1rem;
    list-style-image: url(../images/icons/hour-icon.png);
}
/********* Termina Landing App TA ******/
/********* Empieza Bolsa de trabajo ******/

#carrers-title{
    display: flex;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #AAD8FF;
    padding: 0 3rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#carrers-title h2{
    color: var(--navy-100);
    text-align: center;
}
.carrer-option {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}
#carrers-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 1rem;
}
.carrer-option.col-6 {
    width: 46%;
}
.carrer-option:first-child {
    border-right: 2px solid var(--livid-10);
}
.title-carrers{
    font-size: 2rem;
    width: 100%;
    text-align: center;
}
.carrer-option a{
    text-align: center;
}
.carrer-option p{
    font-size: 1.5rem;
    margin-right: 1rem;
}
.carrers-options-title{
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
}
#carrers-content{
    padding-bottom: 0;
}
.carrers-content{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}
.carrer-img{
    display: block;
    margin: 0 auto;
}
.tick-list li{
    font-size: 1.5rem;
    margin-bottom: 1rem;
    list-style-image: url(../images/icons/tick-circle-list.png);
    padding-left: 1rem;
}
.carrers-footer{
    display: block;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    max-width: 1200px;
    border-top: 1px solid var(--white);
}
.carrers-footer div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: center;
    justify-content: space-evenly;
}
.carrers-footer div h4{
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
}
.carrers-footer div a{
    display: inline-block;
    text-align: center;
    margin-left: 3rem;
    font-size: 1rem;
    font-weight: 500;
    min-width: 200px;
}
.mobile-menu{
    display: none;
}
.only-mobile{
    display: none;
}
.wide-btn{
    width: calc(100vw - 2rem);
}
.legal-terms-btn{
    position: relative;
    margin-top: 5rem;
    border-top: 2px solid var(--livid-10);
    padding: 2rem 0 2rem 0;
}
.legal-terms-btn p{
    margin: 0 0 2rem 0;
}
.flex-column{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

#selection-comisions-selector {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    padding-top: 1rem;
    align-content: center;
    justify-content: center;
    border-top: 2px solid var(--livid-10);
}

#selection-comisions-selector nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    justify-content: space-around;
}

#selection-comisions-selector nav button.transparent {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
    font-weight: 700;
    color: var(--navy-100);
}
#selection-comisions-selector nav button.transparent img {
    margin-bottom: 1rem;
}
#selection-comisions-selector nav button.transparent .navigation-indicator {
    bottom: -0.2rem;
}
#comision-notes{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 5rem;
    padding-bottom: 8rem;
    align-content: center;
}
#comision-notes p{
    max-width: 960px;
}
#animated-images > div{
    opacity: 1;
    transition: all;
}
#animated-images > div.op{
    opacity: 0;
    position: absolute;
    transition-property: all;
    transition-duration: 500ms;
    transition-delay: 0ms;
}
.line-gray-background{
    background-image: url(../images/assets/lines-gray.png);
    background-size: contain;
    background-origin: padding-box;
    padding: 6rem 0 0 0;
}
#app-ta, #calendar-payments, #modulos{
    position: relative;
    top:-12rem;
}
.sticky-division{
    position: relative;
}
.sticky-logo{
    position: absolute;
    left: calc(-15vw - 4rem);
}
.sticky-logo img{
    position: absolute;
    left: -35%;
    top: 50px;
}

.modal-overlay {
    background: rgba(0,0,0,.8);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.modal-overlay.hidden{
    display: none;
}
.modal-group {
    background: var(--gray-20);
    border-radius: 0.5rem;
    top: 8rem;
    height: auto;
    padding: 1.2rem;
    position: relative;
    width: max-content;
    z-index: 101;
}
.modal-header{
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    justify-content: right;
    flex-wrap: wrap;
    align-content: flex-end;
}
.portal-video{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.spacer{
    display: block;
    height: 110px;
    width: 100%;
}
.modal-header .close{
    cursor: pointer;
}
article.buzon{
    max-width: 790px;
    display: block;
    margin: 0 auto;
}
article.buzon p{
    font-size: 1.5rem;
}
.buzon-title h2{
    font-size: 2rem;
    font-weight: 700;
    margin-left: 0;
    text-align: center;
}
#side-header.buzon-title{
    padding: 3rem;
}

#side-header.buzon-title .max-space {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-content: center;
}
.form-check-container{
    align-items: center;
    display: flex;
    flex-direction: column;
}
.form-check-container a{
    color: var(--ta-black);
    font-weight: 600;
}
.buzon-buttons .secondary.ghost{
    background-color: transparent;
    color: var(--ta-orange);
    border: 2px solid var(--ta-orange);
    min-width: 260px;
}
.buzon-buttons div:first-child{
    display: flex;
    flex-direction: row-reverse;
}
#terminosModal .modal-header{
    background-color: var(--livid-5);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#terminosModal p{
    font-size: 1.2rem;
}
#terminosModal button.btn-close{
    position: absolute;
    right: 2rem;
    top: 1.5rem;
}
#terminosModal .modal-body{
    padding: 2rem;
}
#terminosModal .modal-footer{
    align-items: center;
    justify-content: center;
}
#terminosModal .modal-footer .secondary.ghost {
    background-color: transparent;
    color: var(--ta-orange);
    border: 2px solid var(--ta-orange);
    min-width: 260px;
}
.modal-msj-content img{
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: block;
}
.btn-center{
    display: block;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#mensajeModal .modal-footer, #errorModal .modal-footer{
    border-top: none;
}
#mensajeModal .modal-content, #errorModal .modal-content{
    border-radius: 2rem;
}
#mensajeModal p.text-center, #errorModal p.text-center{
    font-size: 1.5rem;
}
#home-page .bg-element{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
}
#home-header .max-space{
    z-index: 2;
}
#side-content.comision-table{
    padding-bottom: 0;
}
.product-close{
    display: hidden;
}
p.display-6{
    font-size: 1.5rem;
    line-height: 3rem;
}
/** BREAKPOINTS **/
@media (max-width: 1450px) {

}
/*** Small Desktops ***/
@media (max-width: 1300px) {
    header.website nav a {
        font-size: 1rem;
        margin-right: 1.8rem;
    }
    #home-header h1{
        font-size: 3.5rem;
    }
    footer .main-content {
        max-width: 1024px;
    }
    .entities img{
        max-width: 80px;
    }
    main > section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #atentioncenter{
        padding: 10rem 2rem;
    }
    #selection-faq-selector nav{
        max-width: 1024px;
    }
    #control-app .blue-card{
        max-width: 1024px;
    }
    .app-img {
        right: calc(10% - 4rem);
        top: 4rem;
    }
    .qr-code-app {
        bottom: 5rem;
        right: 38%;
        max-width: 160px;
    }
    #side-content{
        max-width: 1024px;
    }
    #side-content .column{
        max-width: 1024px;
    }
    .side-title img{
        max-width: 100px;
    }
    #side-header .side-title h2 {
        margin-left: 2rem;
        font-size: 3rem;
    }
    #uses-header h3{
        font-size: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .table-content .row-space-around .col-6{
        width: 46%;
    }
    .retiro-efectivo-img {
        position: absolute;
        right: calc(5% - 4rem);
        top: 4rem;
    }
    #cash-uses .wrapper-uses img{
        max-width: 100%;
    }
    #cash-uses .wrapper-uses p{
        font-size: 1.5rem;
    }
    .family-img {
        position: absolute;
        right: calc(10% - 4rem);
        top: 13rem;
    }
    .sticky-logo {
        position: absolute;
        left: calc(-21vw - 4rem);
    }
    #animated-images{
        position: relative;
        bottom: -0.25rem;
    }
    #we-are-header h2 {
        font-size: 3rem;
    }
    footer .row.sm-column{
        flex-wrap: initial;
    }
}
/*** Sliiim Desktop  ***/
@media (max-width: 1180px){
    #we-are-header h2 {
        font-size: 2.5rem;
    }
    .sticky-logo {
        position: absolute;
        left: calc(-21vw - 4rem);
    }
    #we-are-banner .know-more {
        font-size: 2rem;
    }
    #animated-images div img{
        width: 250px;
        position: relative;
        bottom: -2rem;
    }
    #selection-quick-access nav button.transparent{
        padding: 2rem 1rem;
    }
    #security .item-security p{
        font-size: 1.8rem;
    }
    .img-promo-background {
        background-image: url(../images/assets/nuevofacebook/banner-home-tablet.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .qr-code-app {
        bottom: -2rem;
        right: 38%;
        max-width: 160px;
    }
    footer .row.sm-column{
        flex-wrap: initial;
    }
    #cash-uses .wrapper-uses .card{
        width: calc(30% - 6rem);
    }
    #cash-uses .wrapper-uses{
        max-width: 100%;
    }
    #security-header div.max-space{
        padding-left: 2rem;
    }
    .sticky-logo img{
        max-width: 200px;
    }
    #animated-images {
        position: relative;
        bottom: 2rem;
    }
}

@media (min-width: 700px) and (max-width: 1367px)  {
    html{
        font-size: 14px;
    }
    body > header.fixxed {
        position: fixed;
        width: calc(100vw - 195px);
    }
    picture.tcta{
        right: -7.8rem;
    }
    picture.success-tpv{
        right: -11rem;
    }
    #home-header h1 {
        margin: 0 0 8rem 0;
        max-width: 42rem;
    }
}
/*** Tablets ***/
@media (max-width: 1050px){
    header.website{
        padding: 1.5rem 2rem;
        width: calc(100vw - 4rem);
    }
    body > header.fixxed{
        position: fixed;
        width: calc(100vw - 65px);
        opacity: 1;
        z-index: 9999;
    }
    footer .main-content {
        max-width: 980px;
    }
    #home-header h1 {
        font-size: 3rem;
    }
    #selection-quick-access nav button.transparent{
        padding: 1rem;
    }
    #security button.close-slide, #security button.open-slide{
        font-size: 1.2rem;
    }
    .slide-recommendations h4 {
        font-size: 2rem;
    }
    #security .item-security p {
        font-size: 1.5rem;
    }
    #security .new-credit-design {
        position: relative;
        top: -6rem;
        left: 3rem;
        max-width: 244px;
    }

    .calendar-list{
        margin-left: 3rem;
    }
    .calendar-list li{
        font-size: 1.5rem;
        margin-left: 1.5rem;
    }
    .app-img {
        right: calc(10% - 4rem);
        top: 10rem;
        max-width: 300px;
    }
    .qr-code-app {
        bottom: -1rem;
        right: 38%;
        max-width: 160px;
    }
    #side-content {
        max-width: 980px;
    }
    #side-header .side-title h2 {
        font-size: 2rem;
    }
    #we-are-carrers .carrers-formulary h3{
        font-size: 2rem;
    }
    #we-are-banner h3{
        font-size: 2rem;
    }
    .card.card-white, .card.card-blue{
        padding: 2rem;
    }
    .column-3 article > div h5 {
        font-size: 24px;
        text-align: center;
    }
    .flex-row{
        max-width: 980px;
    }
    .qr-code-app {
        bottom: -2rem;
        right: 38%;
        max-width: 160px;
    }
    footer .row.sm-column{
        flex-wrap: initial;
    }
    
}
@media (max-width: 900px), screen and (orientation: portrait){
    body > header {
        width: calc(100vw - 8rem);
        padding: 16px 0px;
    }
    
}
/*** Big Smartphones ***/
@media (max-width: 750px){
    #home-header, #selection-quick-access, #other-products, #beneficts, #use-cases, #atm, #security, #app-ta, #calendar-payments, #modulos, #offers{
        box-sizing: initial;
    } 
    .pt-sma-1{
        padding-top: 1rem;
    }
    #home-page .bg-element{
        display: none;
    }
    #home-header h1{
        font-size: 2rem;
    }
    #headcopy h2{
        font-size: 2rem;
    }
    #atentioncenter h2{
        font-size: 2rem;
        text-align: center;
    }
    #subfooter nav{
        margin-right: 0;
    }
    .left-divider{
        margin-left: 0;
    }
    footer a{
        padding-right: 0;
    }
    .sm-mt-0{
        margin-top: 0;
    }
    .sm-mb-0{
        margin-bottom: 0;
    }
    .sm-mb-1{
        margin-bottom: 1rem;
    }
    .sm-mb-2{
        margin-bottom: 2rem;
    }
    .only-desktop{
        display: none;
    }
    .only-mobile{
        display: block;
    }
    header.website{
        width: 100vw;
        padding: 0rem;
    }
    header.website nav {
        display: none;
    }
    ol li, ul li {
        font-size: 1.5rem;
        color: var(--navy-100);
        margin-bottom: 1rem;
    }
    #side-header .side-title h2 {
        margin-left: 0;
    }
    #side-content .column{
        width: 100%;
    }
    #side-header .side-title{
        flex-direction: column;
    }
    #side-header {
        padding: 2rem 1rem;
    }
    #side-header h2{
        text-align: center;
    }
    #side-header br{
        display: none;
    }
    p{
        font-size: 1.5rem;
    }
    .buttons-cta button {
        margin-right: 0;
        margin-bottom: 2rem;
    }
    #subfooter{
        width: calc(100% - 3rem);
        box-sizing: initial;
    }
    #subfooter nav {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #subfooter nav a{
        margin-right: 0;
        margin-bottom: 2rem;
    }
    .col-sm-12{
        width: calc(100% - 2rem);
        padding: 1rem;
    }
    .sm-column{
        display: flex;
        flex-direction: column !important;
    }
    footer .right-divider {
        border-right: none;
        padding: 0;
    }
    footer .left-divider {
        border-left: none;
        padding: 0;
    }
    footer .items-align-top {
        display: inline-flex;
        align-items: baseline;
        flex-direction: column;
    }
    footer #legals .socialmedia{
        margin: 0 auto;
        display: flex;
        margin-top: 2rem;
        margin-bottom: 3rem;
    }
    #logos .col-sm-12{
        display: inline-flex;
        justify-content: center;
    }
    #logos .col-sm-12.items-right{
        display: flex;
        justify-content: space-evenly;
        margin-top: 1rem;
    }
    .img-promo-background{
        min-height: 327px;
        background-image: url("../images/assets/nuevofacebook/banner-home-mobile.png");
    }
    #offers .blue-card{
        min-height: 420px;
        padding: 2rem;
    }
    #offers .blue-card h3{
        font-size: 2.5rem;
        margin-bottom: 1rem !important;
        margin-top: 1rem !important;
    }
    footer .socialmedia {
        display: inline-flex;
        justify-content: center;
    }
    footer .entities {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 2rem;
        justify-content: center;
    }
    #legals div p {
        margin: 0 auto;
        text-align: center;
    }

    footer #map {
        margin-top: 1rem;
        margin-left: 0;
    }
    footer .row{
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    footer nav.linklist {
        margin-bottom: 2.5rem;
    }
    footer #map h5{
        margin: 0rem 0px 1rem;
    }
    footer #map .col-sm-12{
        padding: 0 1rem 0 2rem;
    }
    #security h3{
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    #security .new-credit-design{
        top: 0;
    }
    #side-content{
        padding-top: 2rem;
    }
    body > header.fixxed{
        width: 100vw;
    }
    .carrers-footer{
        padding: 3rem 1rem;
    }
    .carrers-footer div h4{
        text-align: center;
    }
    .carrers-footer div a{
        margin-left: 0;
    }
    #uses-info iframe{
        width: calc(100vw - 4rem);
        height: calc(60vw - 3rem);
    }
    #uses-header h4{
        text-align: center;
    }
    #selection-faq-selector{
        overflow-x: scroll;
        overflow-y: hidden;
        width: calc(100vw - 4rem);
        height: 131px;
    }
    #selection-faq-selector nav.faq-navigation{
        width: 1024px;
    }
    #help-header{
        padding: 2rem 1rem;
    }
    .sm-pl-0{
        padding-left: 0;
    }
    #faq-questions article h4{
        font-size: 1.2rem;
        font-weight: 400;
        padding-right: 2rem;
    }
    #faq-questions .slide p{
        font-size: 1.2rem;
        font-weight: 400;
    }
    #faq-questions .slide li{
        font-size: 1.2rem;
        font-weight: 400;
    }
    .toggle-show{
        position: absolute;
        right: 1rem;
        top: 2rem;
        background-color: transparent;
        padding: 0;
    }
    .mobile-menu{
        display: inline-block;
        background-color: transparent;
        padding: 1rem;
    }
    body > header > .logo{
        width: 72px;
        margin-left: 1rem;
    }
    .m-menu{
        position: fixed;
        background-color: white;
        padding: 2rem;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        box-sizing: initial;
    }
    .m-menu nav{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .m-menu nav a{
        font-size: 1.5rem;
        text-decoration: none;
        font-weight: 700;
        color: var(--ta-black);
        padding: 1rem 0rem;
    }
    .m-menu nav a.text-orange{
        color: var(--ta-orange);
    }
    #close-menu{
        position: absolute;
        right: 3.5rem;
        top: 1rem;
    }
    #side-content{
        width: calc(100vw - 4rem);
        box-sizing: initial;
    }
    #uses-header h3{
        font-size: 1.5rem;
    }
    .img-fluid{
        max-width: 100%;
    }
    #promo-header{
        padding: 2rem;
    }
    #promo-header h4{
        font-size: 1.5rem;
        text-align: center;
    }
    #promos-list{
        top: -4rem;
    }
    #promos-list .card{
        margin-bottom: 2rem;
    }
    #promo-legals {
        top: -2rem;
    }
    #app-ta{
        margin-bottom: 0;
    }
    #app-ta article p, #app-ta article h3, #app-ta article h4{
        text-align: center;
    }
    #app-ta article h3{
        margin-bottom: 0rem;
    }
    .app-ta-description {
        max-width: 800px;
        margin-bottom: 4rem;
    }
    .card {
        padding: 2rem;
    }
    .card.promo-3 h3{
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .card-promo-3 .logo-promo{
        margin-top: 1rem;
    }
    .card.card-gray button{
        margin-top: 2rem;
    }
    article.site-map h4, article.site-map nav a {
        font-size: 1.5rem;
    }
    .row-space-around .table-item.col-6{
        width: 39%;
        padding: 1rem;
        margin: 0;
    }
    .row-space-around .table-item.col-6{
        font-size: 1rem;
        margin-top: 0.3rem;
    }
    .soft-table .header-orange {
        padding: 1rem;
    }
    .soft-table .table-item p{
        font-size: 1rem;
    }
    .soft-table .btn-comisions {
        right: -1rem;
        top: 0;
    }
    .soft-table strong{
        font-size: 1.2rem;
    }
    .soft-table .header-blue{
        padding: 1rem;
    }
    #carrers-title{
        background-image: none;
        padding: 1rem 1rem 0 1rem;
    }
    main #carrers-content.section-content {
        max-width: calc(100vw - 4rem);
        padding: 3rem 2rem;
    }
    #carrers-options{
        padding-top: 0;
        max-width: 100vw;
    }
    .carrer-option.col-sm-12{
        width: calc(100% - 3rem);
        padding: 2rem;
    }
    .title-carrers{
        font-size: 1.5rem;
    }
    .carrer-option.mr-2{
        margin-right: 0;
        border-right: none;
    }
    .carrer-option.ml-2{
        margin-left: 0;
    }
    #promo-header.security-landing{
        padding-bottom: 17rem;
    }
    .family-img{
        top: 25rem;
        width: 300px;
        right: 4rem;
    }
    .card-white{
        border-radius: 1.5rem;
    }
    #cash-header{
        padding: .5rem 1rem;
        max-width: calc(100vw - 2rem);
    }
    #cash-header h2{
        font-size: 2rem;
        text-align: center;
    }
    #cash-header .title-text{
        font-size: 1.5rem;
        text-align: center;
    }
    #tutorial-cash, #cash-uses, #retiroEfectivo, #app-tutorial, #retiroTarjeta, #promo-legals{
        width: calc(100vw - 2rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .retiro-efectivo-img{
        position: relative;
        width: 90vw;
        right: 0;
        top: 15px;
    }
    .navigation-cash{
        display: none;
    }
    iframe{
        width: calc(100vw - 4rem);
        height: calc(60vw - 3rem);
    }
    .steps{
        min-width: 0;
    }
    .steps-title{
        font-size: 1rem;
    }
    #cash-uses .wrapper-uses{
        flex-direction: column;
    }
    #cash-uses .wrapper-uses .card{
        width: calc(100vw - 2rem);
        margin-left: 0rem;
        margin-bottom: 2rem;
    }
    .steps p.steps-title{
        font-size: 1.2rem;
    }
    /*** Home Mobile ***/
    #home-page{
        flex-direction: column;
    }
    .copy-header {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
    }
    #home-header{
        padding: 0rem 1rem 2rem 1rem;
        max-width: calc(100vw - 2rem);
        background-color: var(--navy-80);
    }
    #home-header h1{
        margin: 0;
        width: 70vw;
        text-align: center;
    }
    #home-header .sm-column{
        padding-left: 0rem;
    }
    #home-header .only-mobile p{
        margin: 3rem 2rem;
    }
    .banner-home img{
        max-width: calc(100vw - 8rem);
    }
    #selection-quick-access nav{
        flex-direction: column;
    }
    #selection-quick-access nav br{
        display: none;
    }
    .mobile-buttons{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #selection-quick-access{
        max-width: calc(100vw - 4rem);
    }
    .sm-pb-2{
        padding-bottom: 2rem;
    }
    #beneficts{
        max-width: calc(100vw - 4rem);
        margin-left: 2rem;
    }
    .mobile-slide{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 500px;
        overflow-x: scroll;
        overflow-y: hidden;
        align-items: stretch;
        justify-content: space-between;
    }
    #beneficts article.card-flat-softorange, #beneficts article.card-flat-blue{
        padding: 2rem;
        max-width: 100vw;
        border-radius: 2rem;
    }
    #use-cases{
        max-width: calc(100vw - 4rem);
        padding-left: 2rem;
    }
    #use-cases .card-ghost{
        min-width: 60vw;
    }
    #home-page .title-section{
        font-size: 2rem;
        margin-top: 1.5rem;
    }

    #atm{
        max-width: calc(100vw - 4rem);
        padding-top: 0;
    }
    #atm p{
        text-align: center;
    }
    .tpv-mobile-ta{
        max-width: 60vw;
        display: block;
        margin: 0 auto;
        position: relative;
        top: -3rem;
    }
    #atm h3{
        font-size: 2rem;
        text-align: center;
        max-width: 70vw;
        display: block;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    #atm-section{
        top: 0;
    }
    #atm-section picture{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 4rem;
        margin-top: 3rem;
    }
    #atm .tips{
        top: 0;
    }
    .red-logos{
        display: flex;
        margin-top: 2rem;
        margin-bottom: 2rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        align-content: center;
    }
    #app-ta{
        width: calc(100vw - 4rem);
        padding: 4rem 2rem;
    }
        
    #calendar-payments{
        width: calc(100vw - 4rem);
        padding: 2rem;
    }
    .calendar-list{
        margin-left: 0;
        padding-left: 0;
    }

    .center-img{
        display: block;
        margin: 0 auto;
    }

    .sm-text-center{
        text-align: center;
    }
    .sm-text-left{
        text-align: left;
    }
    .sm-text-right{
        text-align: right;
    }
    .sm-font-2{
        font-size: 2rem;
    }
    #atm {
        padding-bottom: 4rem;
    }
    .sm-elements-center{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #modulos{
        padding: 2rem;
        width: calc(100vw - 4rem);
    }
    #modulos .card-flat-blue{
        margin-right: 0;
        margin-bottom: 5rem;
    }
    #offers {
        padding: 2rem;
        width: calc(100vw - 4rem);
    }
    #offers .card-white{
        margin: 0 0 2rem 0;
        padding: 2rem;
    }
    #offers .card-white h3{
        font-size: 2rem;
    }
    .float-promotion{
        width: 6rem;
    }
    .promo-3{
        max-width: 100vw;
    }
    .sm-ml-0{
        margin-left: 0;
    }
    #tutorial-cash h3, #cash-uses h3, #retiroEfectivo h3, #app-tutorial h3, #retiroTarjeta h3, #promo-legals h3{
        font-size: 2rem;
    }
    #carrers-title h2{
        font-size: 2rem;
        text-align: center;
    }
    #we-are-content, #we-are-map, #we-are-carrers, #we-are-banner{
        max-width: calc(100vw - 4rem);
        padding: 2rem;
    }
    #we-are-content h3, #we-are-map h3, #we-are-header h3, #we-are-carrers h3, #we-are-banner h3{
        font-size: 1.5rem;
    }
    #we-are-map .flagship{
        width: calc(100% - 2rem);
        padding: 2rem 0;
    }
    #we-are-map .row{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #we-are-carrers .container-nopadding .row{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #we-are-carrers img{
        width: calc(100vw - 2rem);
    }
    #we-are-carrers h3{
        font-size: 1.5rem;
        text-align: center;
    }
    #we-are-banner .row{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }
    #we-are-banner .font-2{
        font-size: 1.5rem;
    }
    #we-are-carrers .carrers-formulary h3{
        font-size: 1.5;
        text-align: center;
    }
    #we-are-carrers .carrers-formulary{
        margin-right: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #animated-images div img {
        width: 290px;
        position: relative;
        bottom: -2rem;
        display: block;
        margin: 0 auto;
    }
    #headcopy h3.contacto-subtitle{
        font-size: 1.5rem;
    }
    #we-are-banner .text-right.subtitle-banner{
        text-align: center;
        margin-top: 1rem;
    }
    .sticky-division h3.text-left.margin-tb-1{
        text-align: center;
    }
    #help-header h2{
        font-size: 2rem;
        text-align: center;
    }
    #app-ta, #calendar-payments, #modulos{
        top:0;
    }
    #uses-info div.uses-exp p{
        font-size: 1.5rem;
    }
    .despachos p{
        font-size: 1.1rem;
    }
    .despachos li{
        font-size: 1.1rem;
    }
    #app-header{
        background-color: #e35201;
    }
    #app-header, #uses-app, #control-app, #pagoTarjeta, #register-app-ta, #pagoTarjeta  {
        max-width: calc(100vw - 4rem);
        padding: 2rem;
    }
    #app-header h2{
        font-size: 2rem;
        text-align: center;
    }
    #app-header h4{
        font-size: 1.5rem;
        text-align: center;
        font-weight: 400;
    }
    #app-header .apps-stores img{
        width: 140px;
    }
    #app-header .app-img {
        right: calc(10% - 4rem);
        position: relative;
        top: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
        max-width: 280px;
    }
    #uses-app h2{
        font-size: 1.5rem;
    }
    #uses-app h3{
        font-size: 2rem;
    }
    #uses-app .row{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
    }
    #uses-app .row .card.col-5{
        width: calc(80vw - 2rem);
        margin-right: 0;
    }
    #uses-app .row .card.col-5:last-child{
        margin-top: 2rem;
    }
    #uses-app .row .card .card-title{
        text-align: center;
    }
    #control-app h3{
        font-size: 2rem;
    }
    #control-app p.text-orange{
        font-size: 1.5rem;
    }
    #control-app .consulta-item figure img{
        width: 5rem;
    }
    #control-app .blue-card{
        border-radius: 0;
    }
    #pagoTarjeta .title-section, #register-app-ta .title-section{
        font-size: 2rem;
    }
    #pagoTarjeta .row{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 4rem);
    }
    #pagoTarjeta .payments-ta-app{
        max-width: 300px;
    }
    #promo-header, #legal-promos, #promos-list{
        width: calc(100vw - 2rem);
        padding: 1rem;
    }
    #legal-promos .legal-terms-btn{
        width: calc(100vw - 2rem);
    }
    #legal-promos .column{
        width: calc(100vw - 2rem);
    }
    #promo-header .pt-sm-0{
        padding-top: 0;
    }
    #promo-header h2{
        margin-top: 1rem;
        font-size: 2rem;
        text-align: center;
    }
    #promo-header h4{
        font-size: 1.1rem;
    }
    #promo-header .line-gray-background{
        width: calc(100vw - 2rem);
        background-image: none;
        padding-top: 2rem;
    }
    #promo-header img{
        width: calc(100vw - 4rem);
    }
    .main-promo.card{
        padding: 0;
        width: 100%;
        max-height: fit-content;
        top: -4rem;
    }
    .main-promo.card img{
        width: 100%;
    }
    .contacto-subtitle{
        font-size: 1.5rem;
    }
    #beneficts article.card-flat-softorange, #beneficts article.card-flat-blue{
        min-height: 530px;
    }
    #security-header {
        padding: 1rem;
    }
    #security-header h2{
        font-size: 2rem;
    }
    #security-header h4{
        font-size: 1.2rem;
        text-align: center;
    }
    #security-header .family-img{
        position: relative;
        top: 0;
        right: 0;
        margin-top: 2rem;
        width: calc(100vw - 6rem);
    }
    .option-small{
        position: relative;
        display: inline-block;
        width: 100%;
        text-align: center;
        top: 1.2rem;
    }
    .col-sm-center{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #security-header a.orange-link{
        margin-left: 10%;
    }
    #promos-list .card .header-card h4{
        font-size: 1.2rem;
    }
    #calendar-payments .primary.min-button{
        display: block;
        margin: 0 auto;
    }
    #we-are-header{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 1rem;
        max-width: calc(100vw - 2rem);
    }
    #we-are-header h2.we-are-title{
        order: 1;
        font-size: 2rem;
        text-align: center;
    }
    #we-are-header #animated-images{
        order: 2;
    }
    #animated-images img{
        width: calc(100vw - 4rem);
    }
    #we-are-carrers img{
        margin-top: 2rem;
    }
    #we-are-banner .know-more{
        font-size: 2rem;
    }
    #we-are-banner .blue-link{
        padding: 1rem 5rem;
        margin: 2rem auto;
        display: block;
        width: 100px;
        text-align: center;
        min-width: 0;
    }
    #we-are-carrers .carrers-formulary{
        order: 2;
    }
    #we-are-carrers img{
        order: 1;
    }
    #we-are-banner{
        padding: 0rem 2rem;
    }
    #we-are-banner .sm-order-1{
        order: 1;
        margin-left: 0;
    }
    #we-are-banner .sm-order-2{
        order: 2;
        padding: 0rem;
    }
    #we-are-banner .know-more{
        text-align: center;
    }
    #we-are-benefits .col-9 .show{
        padding-left: 1rem;
        border-left: none;
    }
    #we-are-header h2.solutions-title{
        font-size: 2rem;
        text-align: center;
    }
    #we-are-benefits {
        padding: 0;
    }
    #we-are-benefits h3{
        font-size: 1.8rem;
    }
    #we-are-benefits p{
        text-align: center;
    }
    #we-are-benefits .font-3{
        font-size: 1.8rem;
    }
    #we-are-benefits article div{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }
    #we-are-benefits article div.only-desktop{
        display: none;
    }
    #we-are-benefits .slide-2 h3{
        text-align: center;
    }
    #we-are-benefits .mail-afil{
        width: 80%;
    }
    #we-are-benefits .slide-2 .orange-link{
        width: 80%;
        text-align: center;
    }
    #cash-uses .wrapper-uses{
        display: flex;
        max-width: calc(100vw - 2rem);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        align-content: center;
    }
     .column-3 {
        display: flex;
        flex-direction: column;
        align-items: top;
        margin-top: 80px;
    }

    .column-3 article {
        width: 100%;
        padding-left: 0px;
    }
    .atm-text {
        align-items: center;
    }
    .atm-text p{
       text-align: center;
    }
    .img-credito-mobile{
        display: block;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    #map-header h3{
        font-size: 2rem;
    }
    #map-filter {
        position: relative;
        top: -10rem;
        background-color: var(--white);
        border-radius: 1rem;
        padding: 2rem 2rem;
    }
    #map-filter .col-sm-12{
        width: 100%;
    }
    #map-results .flex-row{
        flex-direction: column !important;
        align-items: center;
    }
    #map-results button.transparent{
        display: block;
        margin: 0 auto;
        margin-top: 1rem;
    }
    .modulos-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .w100sm.col-sm-12{
        width: 100%;
    }
    .carrers-footer div a.bversion{
        display: block;
        box-sizing: initial;
        max-width: 200px;
        margin: 0 auto;
        margin-top: 2rem;
    }
    #beneficts .carousel-item article.col-sm-12{
        width: 100%;
    }
    .carousel-item .container{
        padding: 12px;
    }
    .carousel-indicators [data-bs-target] {
        background-color: var(--ta-blue);
    }
    .carousel-control-prev-icon {
        background-image: url(../MD/images/assets/prev-icon.png);
    }
    .carousel-control-next-icon {
        background-image: url(../MD/images/assets/next-icon.png);
    }
    .carousel-indicators {
        bottom: -4rem;
    }
    .carousel-control-next, .carousel-control-prev {
        color: var(--ta-blue);
        align-items: flex-end;
        bottom: -3rem;
    }
    .carousel-control-next {
        right: 0rem;
    }
    .carousel-control-prev {
        left: 0rem;
    }
    #beneficts .next-button {
        position: absolute;
        bottom: 2rem;
        z-index: 99;
    }
    
    #securitymobile .carousel-indicators{
        bottom: -1rem;
    }
    #securitymobile .carousel-control-prev, #securitymobile .carousel-control-next{
        display: none;
    }
    #security .orange-background.only-mobile .col-sm-12{
        margin: 0 auto;
    }
    #security-m-wrapper{
        padding: 4rem 0;
        border-radius: 0;
    }
    #security{
        border-radius: 0;
        top: 0rem;
    }
    #securitymobile .carousel-item{
        min-height: 290px;
    }
    .security-icon{
        display: block;
        margin: 0 auto;
        margin-bottom: 2rem;
        max-width: 100px;
    }
    .carousel-inner .carousel-item:first-child .security-icon{
        max-width: 160px;
        margin-top: 2rem;
    }
    .carousel-inner .carousel-item p{
        font-size: 1.4rem;
    }
    .table-content .col-sm-12{
        padding-left: 0;
        padding-right: 0;
    }
    .comision-table .column{
        max-width: 100%;
    }
    .table-content .row.rounded-left{
        border-radius: 0;
    }
    .table-selector{
        width: 851px; 
    }
    .selector-overflow{
        width: 72vw;
        overflow-y: auto;
        overflow-x: scroll;
    }
    .img-promo-background {
        background-image: url(../images/assets/nuevofacebook/banner-home-mobile.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .table-item.col-sm-6{
        width: 50%;
    }
    .table-content .row .col-sm-12{
        width: 100%;
    }
    .table-content .row, .table-content .main-concept{
        border-right: none;
        border-bottom: 4px solid white;
    }
    #other-products {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        z-index: 999;
        background-color: white;
        padding: 0.5rem 2rem;
    }
    #other-products .card.card-blue{
        margin-top: 1rem;
    }
    #other-products .col-6, #other-products .col-5{
        width: calc(100vw - 4rem);
        margin-bottom: 1rem;
    }
    #other-products #close-other-products{
        display: block;
        position: absolute;
        right: 2.5rem;
        top: -1rem;   
    }
    #other-products .card p{
        font-size: 1.4rem;
    }
    #security-header div.max-space{
        padding-left: 0;
    }
    #app-tutorial .img-retiro-appstore img, #app-tutorial .img-retiro-playstore img{
        display: block;
        margin: 0 auto;
    }
}
/*** Medium Screens ***/
@media (max-height: 680px), screen and (orientation: portrait) {
    body{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

     /*body > header{
       width: calc(100vw - 14rem);
        padding: 16px 0px;
    }*/

    #headcopy{
        width: 100vw;
        padding: 80px 0px;
    }

    #headcopy img.helpIllustration{
        width: 244px;
        height: auto;
    }

    /*.column-3 {
        display: flex;
        flex-direction: column;
        align-items: top;
        margin-top: 80px;
    }

    .column-3 article {
        width: 100%;
        padding-left: 0px;
    }*/

    #atentioncenter{
        width: 100%;
        padding: 80px 0px;
    }

    #atentioncenter > p {
        font-size: 24px;
        display: block;
        color: #041E42;
        text-align: center;
    }

    #faq{
        width: 100%;
        padding: 80px 0px;
    }

    #download-app{
        width: 100%;
    }

    #download-app div.holder{
        width: 100%;
        border-radius: 0px;
        padding: 80px 0px;
    }

    #new-features {
        width: 100%;
        margin: 80px 0px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    #new-features .column-2 {
        display: flex;
        max-width: 960px;
        flex-direction: column;
        width: 100%;
        
    }

    #new-features .column-2 article {
        width: calc(100% - 32px);
        margin-right: 0px;
        margin-left: 16px;
    }

    #new-features .column-2 article:first-child{
        width: calc(100% - 32px);
        margin-right: 0px;
        margin-left: 16px;
    }

    #new-features article .orange-section{
        margin-top: 24px;
        margin-left: 0;
    }

    #new-features article .orange-section img.infographic{
        width: 80%;
    }

    #faq header {
        display: flex;
        margin-top: 80px;
        flex-direction: column;
    }

    #faq header > button {
        width: 100%;
    }

    .img-holder .desktop{
        display: none;
    }

    .img-holder .mobile{
        display: block;
    }

    footer{
        width: 100%;
    }

    footer p{
        font-size: 14px !important;
    }

    #socialmedia{
        width: 100%;
        padding: 80px 0px;
        background-image: none;
    }

    #socialmedia h3{
        text-align: center;
    }

    #socialmedia nav a img{
        width: 48px;
        margin-right: 16px;
        padding-right: 16px;
    }
    .buzon-buttons div:first-child{
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }
    .buzon-buttons > div{
        display: flex;
        flex-direction: column;
    }
    
    article.buzon p{
        font-size: 1.2rem;
    }
    article.buzon .col-sm-12{
        width: 100%;
        padding: 0.2rem 1rem;
    }
    .logos-promos{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    #offers .card-white h3{
        font-size: 1.5rem;
    }
    #help-header h4{
        text-align: center;
    }
    .float-logo-amiritmo {
        position: absolute;
        left: 2rem;
        bottom: 12rem;
    }
    .float-corner {
        position: absolute;
        width: 140px;
        right: 0;
        bottom: -2px;
    }
    .logo-amiritmo-banner {
        margin-top: 1rem;
        margin-left: 1rem;
    }
    .light-blue-card p{
        margin-left: 1rem;
    }
}

/*** Medium Smartphones ***/
@media (max-width: 450px){

}
/*** Tiny Smartphones ***/
@media (max-width: 375px){

}