/**MODULO DIGITAL**/

@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;
    --white: #ffffff;
    --pm-yellow: #FFC600;
    --light-orange: #FF690F;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;    
}
body.op-0{
    transition-property: all;
    transition-duration: 1200ms;
    opacity: 0;
}
h5.text-orange{
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

header.website{
    padding-top: 1.5rem;
    background-color: var(--livid-10);
}
header.website.tmkt{
    background-color: var(--ta-blue);
    padding-bottom: 2rem;
}
footer{
    background-color: var(--ta-black);
    padding: 5rem;
}
footer p{
    color: var(--gray-20);
}
#side-header{
    background-color: var(--livid-10);
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.card{
    padding: 2rem;
    border: none;
    border-radius: 1rem;
    position: relative;
    min-height: 500px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) ;
}
.card a{
    color: var(--ta-black);
    font-weight: 700;
    text-decoration: underline;
}
.capsule-orange{
    padding: .5rem 1rem;
    background-color: var(--orange-10);
    color: var(--ta-orange);
    max-width: max-content;
}
button.btn-primary{
    background-color: var(--ta-orange);
    border-color: var(--ta-orange);
    border-radius: 2rem;
    padding: .8rem;
}

button.btn-outline-secondary{
    color: var(--ta-orange);
    border-color: var(--ta-orange);
    border-radius: 2rem;
}

h2{
    font-size: 3.5rem;
    position: relative;
    top: 5rem;
    color: var(--ta-blue);
    font-weight: 700;
}

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

.entities img{
    width: auto;
    height: 30px;
    display: inline-block;
}

.background-gray{
    background-color: var(--livid-5);
}

a{
    text-decoration: none;
}
.items-right{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.items-between{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.help-buttons a:last-child{
    margin-left: 2rem;
}
.entities-logos img{
    margin-left: 2rem;
}
.landus-logos img{
    margin-right: 2rem;
}
#formulary-benefits{
    background: linear-gradient(
    to right,
    var(--ta-orange) 0%,
    var(--ta-orange) 30%,
    var(--ta-blue) 30%,
    var(--ta-blue) 100%
  );    
}
.background-orange{
    background-color: var(--ta-orange);
    color:var(--white);
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.background-orange h3{
    padding-left: 3rem;
    font-weight: 700;
}
.beneficts{
    padding-top: 2rem;
    padding-bottom: 1rem;
}
.beneficts strong.text-orange{
    font-size: 2rem;
}
.beneficts p{
    color: var(--white);
}
.beneficts > div{
    margin-left: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30%;
}
.beneficts .text-container{
    max-width: 180px;
    margin-left: 1rem;
}
.beneficts img{
    padding-top: .5rem;
}
#formulary-steps{
    padding-top: 11rem;
    padding-bottom: 11rem;
}

h3, h5{
    font-weight: 700;
}
.text-blue{
    color: var(--ta-blue);
}
.text-xl{
    font-size: 4rem;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.top-numbers{
    font-weight: 700;
    font-size: 3rem;
    color: var(--white);
    background-color: var(--livid-20);
    max-width: 4rem;
    text-align: center;
    border-radius: 1rem;
    margin-bottom: 4rem;
}
.top-numbers.odd{
    display: block;
    position: relative;
    right: 0;
    margin-left: 84%;
}
#formulary-steps .col-4{
    position: relative;
}
.title-step{
    font-size: 3rem;
    line-height: 3rem;
    width: 72px;
    max-width: 200px;
}
.text-gray{
    color: #818FA0;
}
.step-instruction{
    font-size: 1.5rem;
    position: relative;
    top: 1rem;
}
.mb-rem-5{
    margin-bottom: 5rem;
}
#banner.last-chance{
    background-color: var(--ta-orange);
    background-image: url(../images/assets/last-chance.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 6rem 4rem;
}
#banner.last-chance h3{
    font-size: 3rem;
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
}
#banner.last-chance p{
    color: var(--white);
    font-weight: 400;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
}
#banners.telemarketing{
    margin-top: 9rem;
}
.link-blue{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    background-color: var(--ta-blue);
    border-radius: 2rem;
    text-align: center;
    padding: .5rem;
    color: var(--white);
}
.step-image img{
    position: relative;
    display: block;
    margin: 0 auto;
    margin-bottom: 5rem;
}
#creditcard-uses{
    padding-top: 9rem;
    padding-bottom: 9rem;
}
#creditcard-uses img{
    width: 80px;
    margin-bottom: 2rem;
}
#creditcard-uses p{
    font-size: 2rem;
}
#banners{
    padding-bottom: 9rem;
}
.banner{
    min-height: 380px;
    width: 100%;
    padding: 3rem;
    position: relative;
    margin-bottom: 2rem;
    background-color: var(--livid-10);
    border-radius: 1.5rem;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner h4{
    font-size: 1.8rem;
    font-weight: 500;
}
.banner-1{
    background-image: url(../images/assets/usos-background-1.png);
}
.banner-2{
    background-image: url(../images/assets/usos-background-2.png);
    background-color: var(--ta-orange);
}
.banner-3{
    background-image: url(../images/assets/usos-background-3.png);
    height: 790px;
}
.banner-4{
    background-image: url(../images/assets/usos-background-4.png);
}
.banner-5{
    background-image: url(../images/assets/usos-background-5.png);
}
.banner-6{
    background-image: url(../images/assets/usos-background-6.png);
}
.banner-7{
    background-image: url(../images/assets/usos-background-7.png);
    background-color: var(--ta-blue);
}

.banner-1 h4{
    margin-top: 9rem;
}
.banner-2 h4{
    max-width: 300px;
    color:var(--white);
}
.banner-4 h4{
    max-width: 200px;
}
.banner-6 h4{
    text-align: left;
    max-width: 300px;
    position: absolute;
    left: 3rem;
}
.banner-7 h4{
    color: var(--white);
}
.appear {
    transition: all 0.8s;
    opacity: 0;
    transform: translateY(40px);
}
.appear.inview {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}
.only-mobile{
    display: none;
}
#newModal .modal-dialog .modal-content{
    background-color: transparent;
}

small.super{
    vertical-align: super;
    font-size: 1rem;
}
.mt-rem-4{
    margin-top: 4rem;
}
.mt-rem-2{
    margin-top: 2rem;
}
.carousel-indicators{
    bottom: -4rem;
}

.carousel-indicators [data-bs-target]{
    background-color: var(--ta-blue);
}
.carousel-control-next, .carousel-control-prev{
    color: var(--ta-blue);
    align-items: flex-end;
    bottom: -3rem;
}
.carousel-control-next{
    right: 2rem;
}
.carousel-control-prev{
    left: 1rem;
}
.carousel-control-prev-icon{
    background-image: url(../images/assets/prev-icon.png);
}
.carousel-control-next-icon{
    background-image: url(../images/assets/next-icon.png);
}
.carousel-control-next-icon, .carousel-control-prev-icon{
    width: 2.5rem;
    height: 2.5rem;
}

.btn:hover {
    color: var(--white);
    background-color: var(--ta-orange);
    border-color: var(--ta-orange);
}
.hidden{
    display: none;
}
#success .container{
    max-width: 700px;
    padding-top: 8rem;
    padding-bottom: 8rem;

}
.msg-success{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.msg-success p{
    font-size: 1.5rem;
    text-align: center;
}
.msg-success h3{
    font-size: 3rem;
}
.msg-success .tick-icon{
    margin-bottom: 2rem;
}
.msg-success button{
    padding: .5rem 5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.tmk-asesor{
    margin-right: 2rem;
}
.vl{
    display: block;
    width: 1px;
    background-color: var(--ta-black);
    height: 5rem;
}
#prevBtn{
    position: absolute;
    top: 2rem;
    cursor: pointer;
}
#prevBtn img{
    width: 2rem;
}
#title-mv{
    margin-top: 0 !important;
}
.modal-content{
    border: none;
}
#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;
}
.image-error{
    display: block;
    margin: 2rem auto;
}
@media screen and (max-width: 725px){
    h2{
        font-size: 2rem;
    }
    .only-desktop{
        display: none;
    }
    .beneficts > div {
        width: 100%;
    }
    .text-xl{
        font-size: 2rem;
    }
    h5.text-orange{
        font-size: 1.2rem;
        text-align: center;
    }
    #banner.last-chance{
        padding: 5rem 1rem;
    }
    #banner.last-chance h3{
        font-size: 2rem;
    }
    #banner.last-chance p{
        font-size: 1.5rem;
    }
    footer {
        padding: 2rem 1rem;
    }
    #formulary-steps .text-right{
        text-align: center;
        margin-bottom: 2rem;
    }
    .top-numbers.odd, .top-numbers {
        display: block;
        position: relative;
        right: 0;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    .text-gray.step-instruction{
        margin-bottom: 2rem;
    }
    #creditcard-uses p{
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    #creditcard-uses .mb-rem-5{
        margin-bottom: 2rem;
    }
    .only-mobile{
        display: block;
    }
    .socialmedia{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 2rem;
    }
    .items-right.entities-logos{
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }
    .items-right.entities-logos img{
        width: auto;
        height: 40px;
        display: inline-block;
        margin-bottom: 2rem;
        margin-left: 0;

    }
    h2{
        top: 0;
    }
    .background-orange h3.title-now{
        text-align: center;
        padding-left: 0;
    }
    .section-header .img-fluid{
        max-width: 70%;
        margin-left: 15%;
    }
    #formulary-benefits{
        background: linear-gradient(
        to right,
        var(--ta-blue) 0%,
        var(--ta-blue) 30%,
        var(--ta-blue) 30%,
        var(--ta-blue) 100%
      );    
    }
    .banner-2{
        background-image: url(../images/assets/usos-background-2-m.png);
    }
    .banner-2 h4{
        position: relative;
        left: -1rem;
    }
    .banner-6 {
        background-image: url(../images/assets/usos-background-6.png);
        background-size: 120%;
        background-position: bottom right;
    }
    .msg-success h3{
        font-size: 2rem;
        text-align: center;
        margin-bottom: 3rem;
    }
    .msg-success p{
        font-size: 1.2rem;
    }
    #success .container{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .items-right.help-buttons{
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
    .tmk-asesor{
        display: block;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    .capsule-orange{
        margin: 1rem auto;
    }
    .requisitos{
        text-align: center;
        font-weight: 700;
    }
    #mobile-mssg.background-orange{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    #mobile-mssg.background-orange h3{
        padding-top: 1rem;
        padding-left: 0;
        font-size: 1.5rem;
        max-width: 13rem;
    }
    #mobile-mssg.background-orange .tmk-asesor{
        margin-bottom: 0;
    }
    header.website.tmkt{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    header.website.tmkt .logo{
        height: 50px;
        padding-left: 1rem;
    }
    #side-header{
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
    }
}