.bg-rojo {
    background-color: #da262f;
}

.bg-negro {
    background-color: #000;
}

.bg-verde {
    background-color: #024617;
}

.color-rojo {
    color: #da262f;
}

.color-negro {
    color: #000;
}

.color-verde {
    color: #024617;
}

.bg-ruleta {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.has-patronus {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: absolute;
}

@media (min-width: 576px) {
    .features-carousel .swiper-container:after {
        width: unset !important;
    }
}

@media (min-width: 768px) {
    .partners img {
        opacity: 1 !important;
    }
}


input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.input-group-text {
    padding: 0.575rem 0.75rem;
}

/* MENU CUSTOM CSS START */

@media (min-width: 1200px) {
    .navigation.fixed-top {
        background-color: transparent;
    }

    .navigation.navbar-sticky {
        background-color: #ffffff;
        top: 0;
    }
    
    .st-nav .st-nav-menu {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
      }

    .st-nav .st-nav-section.st-nav-primary,
    .st-nav .st-nav-section.st-nav-secondary {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .st-nav .st-nav-section.st-nav-mobile {
        display: none;
    }

    .st-nav .st-dropdown-root {
        display: block;
    }
}

/* MENU CUSTOM CSS END */

/* CSS CUSTOM TRIO ACTIVO START */

.line1 {
    width: 100%;
    height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 25% 0 0 0;
}

.line2 {
    width: 100%;
    height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 0;
}

.num1 {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 0%;
}

.num2 {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 15%;
}

.num3 {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 15%;
}

.image1 {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 0%;
}

.image2 {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 10%;
}

.image3 {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    margin: 0% 0 0 10%;
    ;
}

.outline {
    width: 200px;
    height: 200px;
    display: inline-block;
    border: none;
    margin: 5% 0 0 5%;
    background-size: contain;
}

.trio-res {
    width: 4.5rem;
}

.trio-num {
    width: 2.5rem;
}

@media (max-width: 480px) {
    .line1 {
        height: 2rem;
    }

    .line2 {
        height: 2.6rem;
    }

    .num2,
    .num3 {
        margin: 0% 0 0 10%;
        ;
    }

    .image2,
    .image3 {
        margin: 0% 0 0 4%;
        ;
    }

    .outline {
        width: 165px;
        height: 165px;
        display: inline-block;
        border: none;
        margin: 5% 0 0 5%;
        background-size: contain;
    }

    .trio-res {
        width: 3.6rem;
    }

    .trio-num {
        width: 2rem;
    }
}

#main-trio .line1 {
    height: 2rem;
}

#main-trio .line2 {
    height: 2.6rem;
}

#main-trio .num2,
#main-trio .num3 {
    margin: 0% 0 0 10%;
    ;
}

#main-trio .image2,
#main-trio .image3 {
    margin: 0% 0 0 4%;
    ;
}

#main-trio .outline {
    width: 160px;
    height: 160px;
    display: inline-block;
    border: none;
    margin: 0% 0 0 0%;
    background-size: contain;
}

#main-trio .trio-res {
    width: 3.6rem;
}

#main-trio .trio-num {
    width: 2rem;
}

/* CSS CUSTOM TRIO ACTIVO END */

.btn-outline-morado {
    color: #64099d;
    border-color: #64099d;
}

.btn-outline-morado:hover {
    color: #ffffff;
    background-color: #64099d;
    border-color: #64099d;
  }

  .text-morado {
    color: #6500a0 !important;
}
  .animate-pote {
    animation: color-change 1s infinite !important;
  }
  
  @keyframes color-change {
    0% { color: white; }
    50% { color: #6500a0; }
    100% { color: orange; }
  }