﻿.user-header img {
    max-height: 130px;
}

#filterForm {
    min-width: 100%;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
#filterForm label {
    color:#777;
}
    #filterForm select {
        color: #666;
        background-color: transparent;
        border: solid 1px #333;
        font-family: Arial;
        min-width: 16%;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    #filterForm select option {
        background-color: #222 !important;
        color: #666 !important;
    }
    #filterForm select option:hover {
        background-color: #333 !important;
        color: #666 !important;
    }
.filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.filter-row div {
    min-width: 14%;
}
    .filter-row div #clearFilters {
        min-width: 2% !important;
    }

.socials-section {
    min-width: 100%;
    background: linear-gradient( to bottom, rgba(26,26,27,0.8) 0%, rgba(0,0,0,0) 100% );
    margin-top: 6px;
}

.setups {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.setup-card {
    max-width: 25vw;
    min-width: 100%;
}

#clearButton {
    color:red;
    padding: 5px;
    background-color: #333;
    border-radius: 3px;
    height: 30px;
    margin-top: 30px;
}
.top-section {
    margin-top: 0px;
}
.image-container::after {
    background: linear-gradient( to top, rgba(26,26,26,1) 35%, rgba(0,0,0,0) 100% ) !important;
}

@media (max-width: 1200px) {
    .setups {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .setups {
        grid-template-columns: 1fr 1fr;
    }

    .backdrop-image {
        height: 80%;
    }

    .image-container {
        top: 2%;
    }
        .image-container:after {
            background: linear-gradient(to top, rgba(26, 26, 26, 1) 46%, rgba(0, 0, 0, 0) 75%) !important;
            margin-bottom: 195px;
        }
}

@media (max-width: 500px) {
    .setups {
        grid-template-columns: 1fr;
    }

    .backdrop-image {
        height: 47%;
        top: 22%;
    }

    .image-container {
        top: 0%;
    }

        .image-container:after {
            background: linear-gradient(to top, rgba(26, 26, 26, 1) 10%, rgba(0, 0, 0, 0) 60%) !important;
            margin-bottom: 647px;
        }
}

@media (max-width: 470px) {
    .backdrop-image {
        height: 58%;
    }
    .image-container:after {
        background: linear-gradient(to top, rgba(26, 26, 26, 1) 10%, rgba(0, 0, 0, 0) 60%) !important;
        margin-bottom: 590px;
    }
}

@media (max-width: 364px) {
    .backdrop-image {
        height: 68%;
    }

    .image-container:after {
        background: linear-gradient(to top, rgba(26, 26, 26, 1) 10%, rgba(0, 0, 0, 0) 60%) !important;
        margin-bottom: 530px;
    }
}
