/* BACKGROUNDS */
#backgrounds-main, #backgrounds-footer {
    position: relative;
}

#backgrounds-footer {
    margin-bottom: 22rem;
}

.navbar-nav {
    text-transform: uppercase;
    margin-right: 3rem;
    font: normal normal normal 24px/24px 'Revelia Soft';
    letter-spacing: 1px;

}

.bg-bottom{
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../images/backgrounds/bg-home-bottom.png');
}

.bg-tickets-cards{
    background: linear-gradient(180deg, rgba(248,248,248,1) 0%, rgba(249,247,255,1) 100%);
}

/* BOTONES */
.modal-login {
    font-weight: bold;
    font-size: 17px;
    letter-spacing: -0.42px;
    display: inline-block;
    position: relative;
    outline: none !important;
    margin: 0;
    line-height: 1;
    padding: 12px 34px;
    white-space: normal;
    border-radius: 300px;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    background: #6b776e 0% 0% no-repeat padding-box;
    opacity: 0.9;
    border: none;
    color: #F2E0BF;
}

.modal-login:hover {
    background-color: orange;
    color:#242424
}

.modal-login:after {
    content: url("../images/icons/arrow-link.svg");
    display: inline-block;
    margin-left: 8px;
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.btn-xl{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: none;
    padding: 12px 40px 12px 40px;
    width: auto;
    font-size: 22px;
    letter-spacing: 1.2px;
}

.btn-xl.dark{
    background-color: #1497d5;
    color: #fff;
    text-transform: uppercase;
}

.btn-xl.dark:hover{
    color: #fff;
}

.btn-xl.white{
    text-transform: uppercase;
    background-color: #ffffff;
    color: #484848;
}

.btn-xl.white:hover{
    background-color: #484848;
    color: #ffffff;
}

.btn-xl.outline-white{
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid #F2F2F2;
    color: #F2F2F2;
}

.btn-xl.outline-white:hover{
    background-color: #F2F2F2;
    color: #6DC0D2;
}

.btn-xl.blue{
    text-transform: uppercase;
    background-color: #1497d5;
    color: #fff;
}

.btn-xl.blue:hover{
}

.btn-xl.outline-blue{
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #6DC0D2;
    color: #6DC0D2;
}

.btn-xl.outline-blue:hover{
    color: #F2F2F2;
    background-color: #53a6b9;
}

.btn-xl.outline-dark{
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #242424;
    color: #242424;
}

.btn-xl.outline-dark:hover{
    color: #fff;
    background-color: #1497d5;
}



.btn-md{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px!important;
    border: none;
    padding: 12px 32px 12px 32px;
    width: auto;
    font-size: 16px;
    letter-spacing: 1.2px;
}

.btn-md.outline-white{
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid #F2F2F2;
    color: #F2F2F2;
}

.btn-md.outline-white:hover{
    background-color: #F2F2F2;
    color: #6DC0D2;
}

.btn-md.outline-blue-square{
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    color: #242424;
    font-size: 24px !important;
    text-transform: none !important;
    height: 72px !important;
    border-radius: 8px !important;
}

.btn-md.outline-blue-square:hover{
    color: #242424;
    background-color: #ffb700 !important;
}

.btn-md.blue{
    text-transform: uppercase;
    background-color: #1497d5;
    color: #fff;
}

.btn-md.blue:hover{
    background-color: #e34540;
}

.btn-md.outline-blue{
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    color: #242424;
}

.btn-md.outline-blue:hover{
    color: #fff;
    background-color: #1497d5;
}

.btn-md.outline-blue-active{
    text-transform: uppercase;
    background-color: transparent;
    color: #FFF;
    background-color: #1497d5;
}

.btn-md.disabled{
    font-size: 22px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #484848;
    border: 1px solid #BCBCBC;
    border-radius: 48px;
    background-color: transparent;
}

.btn-md.dark{
    color: #fff !important;
    background: #e34540 !important;
    transition-duration: 0.3s;
}

.btn-md.dark:hover{
    color: #6DC0D2;
}

.btn-md.outline-dark{
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #242424;
    color: #242424;
}

.btn-md.outline-dark:hover{
    color: #F2F2F2;
    background-color: #1497d5;
}

.btn-md.pink{
    text-transform: uppercase;
    background-color: #E87D9B;
    color: #F2F2F2;
}

.btn-md.pink:hover{
    color: #000;
}




.btn-sm{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border: none;
    padding: 12px 16px 12px 16px;
    width: auto;
    font-size: 16px;
}

.btn-sm.white{
    width: auto;
    height: 45px !important;
    justify-content: start !important;
    color: #1A1A1A;
    background-color: #FFF;
    box-shadow: 0px 3px 15px #0000001A;
}

.btn-sm.disabled{
    width: 186px !important;
    height: 45px !important;
    justify-content: start !important;
    color: #BCBCBC;
    background-color: #FFF;
}

.info-banner-moments{
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 80%;
}

.cnt-info-banner-moments{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 45%;
}

.cnt-btn-banner-moments{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 55%;
}

.ttl-banner-moments{
    font-size: 44px;
    letter-spacing: 2.46px;
    text-transform: uppercase;
    color: #FFF;
}

.txt-banner-moments{
    font-size: 29px;
    line-height: 38px;
    color: #FFF;
}

.modal-qr-content{
    width: 100%;
    display: flex;
    justify-content: center;
}


.navbar-mobile .navbar-nav {
    font: normal normal normal 20px/20px 'Revelia Soft';
    letter-spacing: 3px;

}

@media(max-width: 1199px){
    .btn-md.dark{
        padding: 14px;
    }
}

@media(max-width: 800px){
    .cnt-banner-moments{
        height: 495px;
    }
    
    .img-banner-moments{
        height: 495px;
    }

    .info-banner-moments{
        flex-direction: column;
        gap: 40px;
    }

    .cnt-info-banner-moments{
        width: 100%;
    }
    
    .cnt-btn-banner-moments{
        justify-content: center;
        width: 100%;
    }

    .ttl-banner-moments{
        font-size: 40px;
        text-align: center;
    }
    
    .txt-banner-moments{
        font-size: 24px;
        text-align: center;
    }
}

/***************************************/