/* ====================================================================================== */
/* PADDOCK */
#PADDOCK {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#PADDOCK-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s ease;
}

#PADDOCK-TEXT {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s ease;
}

#PADDOCK:hover,
#PADDOCK:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#PADDOCK:hover #PADDOCK-TEXT,
#PADDOCK:focus #PADDOCK-TEXT {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#PADDOCK:hover #PADDOCK-SUBTEXT,
#PADDOCK:focus #PADDOCK-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s ease;
}
/* FIN PADDOCK */
/* ====================================================================================== */
/* ====================================================================================== */
/* VIP */

#VIP {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#VIP-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s;
}

#VIP-TEXT-1 {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s;
}

#VIP-TEXT-2 {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s;
}

#VIP:hover,
#VIP:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#VIP:hover #VIP-TEXT-1,
#VIP:focus #VIP-TEXT-1 {
    opacity: 0;
    transition: opacity 0.2s;
}

#VIP:hover #VIP-TEXT-2,
#VIP:focus #VIP-TEXT-2 {
    opacity: 0;
    transition: opacity 0.2s;
}

#VIP:hover #VIP-SUBTEXT,
#VIP:focus #VIP-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s;
}

/* FIN VIP */
/* ====================================================================================== */
/* ====================================================================================== */
/* BOXES */
#BOXES {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#BOXES-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s ease;
}

#BOXES-TEXT {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s ease;
}

#BOXES:hover,
#BOXES:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#BOXES:hover #BOXES-TEXT,
#BOXES:focus #BOXES-TEXT {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#BOXES:hover #BOXES-SUBTEXT,
#BOXES:focus #BOXES-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s ease;
}
/* FIN BOXES */
/* ====================================================================================== */
/* ====================================================================================== */
/* GRADAS PREMIUM ESTE */
#GRADAPRE {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#GRADAPRE-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s ease;
}

#GRADAPRE-TEXT {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s ease;
}

#GRADAPRE:hover,
#GRADAPRE:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#GRADAPRE:hover #GRADAPRE-TEXT,
#GRADAPRE:focus #GRADAPRE-TEXT {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#GRADAPRE:hover #GRADAPRE-SUBTEXT,
#GRADAPRE:focus #GRADAPRE-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s ease;
}
/* FIN GRADAS PREMIUM ESTE */
/* ====================================================================================== */
/* ====================================================================================== */
/* CAMPO */
#CAMPO {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#CAMPO-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s ease;
}

#CAMPO-TEXT {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s ease;
}

#CAMPO:hover,
#CAMPO:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#CAMPO:hover #CAMPO-TEXT,
#CAMPO:focus #CAMPO-TEXT {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#CAMPO:hover #CAMPO-SUBTEXT,
#CAMPO:focus #CAMPO-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s ease;
}
/* FIN CAMPO */
/* ====================================================================================== */
/* ====================================================================================== */
/* GRADAS PREMIUM OESTE */

#GRADAPRO {
    /* will-change: filter; */
    filter: saturate(100%);
    transition: filter 0.5s ease;
}

#GRADAPRO-SUBTEXT {
    /* will-change: opacity; */
    opacity: 0;
    transition: opacity 0.2s;
}

#GRADAPRO-TEXT-1 {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s;
}

#GRADAPRO-TEXT-2 {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s;
}

#GRADAPRO-TEXT-3 {
    /* will-change: opacity; */
    opacity: 1;
    transition: opacity 0.7s;
}

#GRADAPRO:hover,
#GRADAPRO:focus {
    filter:saturate(200%);
    transition: filter 0.5s ease;
}

#GRADAPRO:hover #GRADAPRO-TEXT-1,
#GRADAPRO:focus #GRADAPRO-TEXT-1 {
    opacity: 0;
    transition: opacity 0.2s;
}

#GRADAPRO:hover #GRADAPRO-TEXT-2,
#GRADAPRO:focus #GRADAPRO-TEXT-2 {
    opacity: 0;
    transition: opacity 0.2s;
}

#GRADAPRO:hover #GRADAPRO-TEXT-3,
#GRADAPRO:focus #GRADAPRO-TEXT-3 {
    opacity: 0;
    transition: opacity 0.2s;
}

#GRADAPRO:hover #GRADAPRO-SUBTEXT,
#GRADAPRO:focus #GRADAPRO-SUBTEXT {
    opacity: 1;
    transition: opacity 0.7s;
}

/* FIN GRADAS PREMIUM OESTE */
/* ====================================================================================== */