/* Animated Headers/Lines 
(Require any other element with the same animation already on the page so it's enqueued)
*/

.taa-animated-text, .taa-animated-text-inverse{
    display: block;
    animation-duration: 1.25s;
}

.taa-in-viewport.taa-animated-text:nth-child(odd), .taa-in-viewport.taa-animated-text-inverse:nth-child(even){
    animation-name: slideInLeft;
}

.taa-in-viewport.taa-animated-text:nth-child(even), .taa-in-viewport.taa-animated-text-inverse:nth-child(odd){
    animation-name: slideInRight;
}

/* Initially hide elements that will animate */
.taa-animated-text.taa-hidden, .taa-animated-text-inverse.taa-hidden {
    opacity: 0;
    /* Prevents the animation from playing until we want it to */
    animation-play-state: paused !important;
}

/* Play animations when element enters viewport */
.taa-animated-text.taa-in-viewport, .taa-animated-text-inverse.taa-in-viewport {
    opacity: 1;
    animation-play-state: running !important;
}

/* Custom Inputs */

.taa-award-filter {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    padding: 20px 70px 20px 30px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    position: relative;
    background-image: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat, no-repeat;
    background-position: right 60px top 15px, right 20px center;
    background-size: 1px calc(100% - 30px), 24px;
    width: 350px;
    max-width: 100%;
}

.taa-award-filter option {
    background-color: #2c2c2c;
    color: white;
    padding: 10px;
}

@media (max-width: 768px) {
    .taa-award-filter{
        width: 200px;
    }
}