.main_title {
    font-family: var(--cgm);
    font-weight: bold;
    font-size: calc(2vw + 2pt);
    line-height: calc(2vw + 17px);
    text-transform: lowercase;
}

.main_title::first-letter {
    text-transform: uppercase;
}

.pointer_active {
    font-family: var(--cgm);
}

.finder_results_container {
    margin: 0 auto;
}

/* Filters -----------------------------------------------------------------------------------------------------------*/

.search_nav {
    /*position:sticky;*/
    top: 85px;
    width: 100%;
    z-index: 100;
    /*box-shadow: 2px 5px 7px -4px #c3c3c3;*/
    background-color: var(--grey-topnav);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 90px);
}

.search_nav *,
.search_nav *::placeholder {
    font-size: 1rem;
}

.filter_inputs {
    display: flex;
    flex-direction: column;
}

.finder-dropdown {
    display: none;
}

.finder-dropdown-content {
    display: none;
    z-index: 100;
    background-color: var(--grey-95);
}

.filter_container {
    max-width: 100%;
    width: 260px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}

.name_left {
    flex-grow: 2;
    display: flex;
    padding: 7px;
}

.name_left .custom_icon_sm {
    display: none;
}

.filter_container>span {
    padding: calc(7px + .5vw) calc(5px + .5vw) calc(6px + .3vw);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .3s ease-in-out;
}

.filter_container>span svg {
    position: absolute;
    right: 16px;
}

.filter_container>span p {
    border-bottom: 1px solid var(--black-text);
    padding: 0 0 4px;
    /*text-transform: uppercase;*/
    font-family: var(--cgl);
    width: 100%;
}

.input_space {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid var(--main-green);
    display: flex;
    flex-grow: 2;
}

.filter.filter_style {
    display: inline-flex;
    margin: 0 0 16px 16px;
    align-items: center;
    padding: 10px;
    background-color: var(--main-yellow);
}

.filter_container.filter_selected>span {
    background-color: var(--grey-95) !important;
}

.filter_container.filter_selected,
.filter_selected .finder-dropdown-content {
    box-shadow: 2px 5px 11px rgba(0, 0, 0, .2);
}

.name_search {
    display: none;
    /* Originally is in flex mode */
    align-items: center;
    background-color: var(--black-text);
}

.name_search.mobile {
    margin: 12px auto;
}

.name_search svg {
    margin: 0 16px 0 9px;
    align-self: center;
}

.other_filters {
    display: flex;
    width: 100%;
    flex-direction: column;
    /*padding: 0 0 12px;*/
    background-color: var(--grey-topnav);
    padding: 40px 0;
}

.other_filters_header {
    display: none;
}


#name {
    border-bottom: 0;
    padding: 0;
    background-color: transparent;
    line-height: 1.3;
    flex-grow: 2;
}

.name_search input:-webkit-autofill,
.name_search input:-webkit-autofill:hover,
.name_search input:-webkit-autofill:focus {
    background-color: var(--black-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--black-text) inset;
    -webkit-text-fill-color: var(--grey-95) !important;
}


.name_button {
    padding: 0 15px;
    display: flex;
    align-items: center;
    background-color: var(--main-yellow);
    font-family: var(--cgm);
    text-align: center;
    justify-content: center;
    align-self: stretch;
    transition: .3s;
}

.name_button.hover {
    justify-content: center;
    width: calc(4% + 70px);
}

.name_button:hover {
    background-color: var(--main-red);
}

#model,
#brand {
    display: none;
}

.model_results {
    display: flex;
    flex-wrap: wrap;
}

.model_results>p,
#brand>p {
    padding: 10px;
}

.back_to_brands {
    padding: 10px;
    display: flex;
    width: 100%;
    align-items: baseline;
    background-color: var(--main-red);
}

.back_to_brands i {
    margin-right: 10px;
}

.back_to_brands p {
    font-family: var(--cgm);
}


#model.flex,
#brand.flex {
    display: flex;
    flex-wrap: wrap;
}

.price_search .content,
.year_search .content,
.km_search .content {
    padding: 15px 20px 20px;
}

.price_search .ui-slider,
.year_search .ui-slider,
.km_search .ui-slider {
    margin: 0 auto;
    width: 94%;
    background-color: white !important;
}

.type_filter_option,
.license_filter_option {
    width: 100%;
    padding: 10px 16px 10px;
}

.type_filter_option:hover,
.license_filter_option:hover {
    font-family: var(--cgm);
}

/* Apply filters */
.apply_filters_container {
    padding: 12px 20px;
    display: none;
}

#apply_filters {
    padding: 5px 45px;
    display: flex;
    align-items: center;
    background-color: var(--main-yellow);
    font-family: var(--cgm);
    text-align: center;
    width: fit-content;
    transition: .3s;
    margin: 0 auto;
    border-radius: 4px;
    text-transform: uppercase;
}

#apply_filters:hover {
    background-color: var(--main-red);
}

/* Filter box */
#filters {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.filter svg {
    margin-right: 10px;
}

.input_values {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 15px;
}

.input_values>div {
    width: 45%;
    position: relative;
}

.input_values>div input {
    font-size: calc(.7vw + 15px);
    text-align: left;
}

.input_values span {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}




/* Sorting -----------------------------------------------------------------------------------------------------------*/

.sort_container {
    margin: 2.5rem auto;
}

.sort {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sort_title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sort_title img {
    width: 100%;
    max-width: 300px;
}

.sorting_container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sort_option {
    margin-right: 10px;
    display: inline-flex;
    align-items: baseline;
    position: relative;
}

.sort_option p {
    font-size: calc(8% + 9pt);
}

.sort_option.sorting p {
    font-family: var(--cgb);
    color: var(--black-text);
}

.sort_options>p {
    margin-right: 10px;
    opacity: .3;
    font-size: .8rem;
}

.sort_options {
    display: inline-flex;
    align-items: center;
}

.sort_option:hover,
.filter:hover {
    cursor: pointer;
}

.sort_option i {
    position: absolute;
    margin: 0 7px 0 5px;
    top: 2px;
    color: var(--main-red)
}

.sort_option p {
    margin-left: 20px;
}

.sort_click_bait {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    /*height: 15px;*/
    /*max-*/
    height: 100%;
    border-radius: 100%;
    margin-right: 5px;
    position: absolute;
    /*top: 2px;*/
}

.sort_click_bait_center {
    height: 5px;
    width: 5px;
    border-radius: 100%;
}

.sort_click_bait::before,
.sort_click_bait::after {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-yellow);
}

.sort_click_bait::before {
    animation: 1.5s ease-in-out .45s infinite background-grow;
}

.sort_click_bait::after {
    animation: 1.5s ease-in-out infinite background-grow;
}

@keyframes background-grow {
    0% {
        opacity: 0;
        height: 0;
        width: 0;
    }

    20% {
        opacity: 100%;
    }

    30% {
        opacity: 50%;
    }

    100% {
        opacity: 0%;
        height: 15px;
        width: 15px;
    }
}

#number-results {
    display: none;
    margin: 10px 0 20px;
}

.results_col {
    display: flex;
    flex-direction: column;
}

/* Ajax Loading ------------------------------------------------------------------------------------------------------*/

#fail {
    margin: 0 1.4%;
    padding: 0 10px 40px;
}

#fail h1 {
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center;
    height: 40vh;
}

.ajax-loading {
    display: none !important;
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
}

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid var(--main-yellow);
    border-color: var(--main-yellow) transparent var(--main-yellow) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile product cards change */
.rotate-180 {
    transform: rotate(180deg);
}

#aux_layout {
    display: none;
}

/* Results ---------------------------------------------------------------------------------------------------------- */




.banner_container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.banner_container img.banner_img {
    width: auto;
    height: auto;
    max-width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.banner_container>* {
    text-align: center;
}

.banner_container .banner_content {
    padding: 14px 15px;
}

.banner_container .banner_title {
    margin-top: 30px;
    font-size: calc(20% + 14pt);
    font-family: var(--cgm);
}

.banner_container .banner_description {
    font-size: calc(15% + 12pt);
    margin-top: 10px;
}



.filter_results_container {
    display: none;
    box-shadow: 0 0 0 transparent, 0 3px 31px var(--black-text);
}

#results {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#results>div.result_container {
    width: 100%;
    max-width: 80%;
}

#results .result_container.banner {
    display: none;
    box-shadow: none;
}

#results .result_container .right {
    padding: 12px;
}


/* Media queries ---------------------------------------------------------------------------------------------------- */

@media (min-width:345px) {
    .result_container {
        margin: 0 1.6% 3.2%;
    }
}

@media (max-height: 441px) and (orientation: landscape) {

    /* Filters */
    .filter_inputs {
        max-height: calc(100vh - 50px);
        overflow-y: scroll;
    }

    #filters {
        overflow-y: scroll;
    }

}

@media (min-width: 414px) {

    /* Product card */

    .no_discount_price {
        font-size: calc(11px + 1vw);
    }

}

@media (min-width:500px) {

    /* search nav */

    .search_nav {
        top: 0;
        max-height: calc(100vh - 90px);
    }

    /* Searcher inputs */
    .name_left .custom_icon_sm {
        display: block;
    }

    /* Sort by */
    .sort_option p {
        font-size: calc(8% + 12pt);
    }

    .sort_options>p {
        margin-right: 20px;
        margin-left: 20px;
    }


    /* Results */

    #results>div.result_container.banner {
        width: calc(50% - 3.3%);
    }

}

@media (min-width: 653px) {
    #results>div.result_container {
        width: calc(50% - 3.3%);
    }
}

/* Tablet and up */
@media (min-width: 768px) {

    #sota_nav {
        padding-top: 0;
    }

    /* Filters */

    .other_filters {
        flex-direction: row;
        padding: 5px;
    }

    .filter_container>span svg {
        right: 6px;
    }

    /* Filter inputs */
    .filter_inputs {
        justify-content: space-between;
        align-items: flex-start;
    }

    .input_values {
        flex-direction: column;
    }

    .input_values>div {
        width: 100%;
    }

    .finder-dropdown-content {
        position: absolute;
        border-bottom: 6px solid var(--grey-70);
        width: 100%;
        left: 0;
    }

    .search_nav_sticky {
        position: sticky;
        top: 0;
    }

    .search_nav_sticky .finder-dropdown-content {
        width: 100%;
        left: 0;
    }

    .search_nav_sticky .filter_container:not(:first-child) {
        border: none;
    }

    .price_search .content,
    .year_search .content,
    .km_search .content {
        padding: 15px 10px 20px;
    }

    .filter_inputs .name_search {
        width: 100%;
    }

    /* Sort */

    .sorting_container {
        flex-direction: row;
        justify-content: space-between;
    }

    .sort_title {
        display: flex;
    }

    #number-results {
        margin: 0;
    }

    .sort span {
        margin-bottom: 0;
    }

    .sort_option {
        margin-bottom: 0;
        display: inline-flex;
        align-items: baseline;
        position: relative;
    }

    .sort_option:last-child {
        margin-right: 0;
    }

    .sort {
        flex-direction: column-reverse;
    }

    .sort_container {
        margin-top: 7px;
    }

    .sort_title {
        margin-top: .8rem;
    }

    #fail h1 {
        font-size: 1.8rem;
    }

    /* Results */
    #results .result_container.banner {
        display: block;
    }

    /* Product card */

    .no_discount_price {
        font-size: calc(9px + 0.8vw);
    }

    .result_total .result_left,
    span.result_price>span.result_left {
        padding: 10px;
    }

}

/* Low laptop screen / iPad Pro*/
@media (min-width: 992px) {

    /* Title */

    .main_title {
        margin-bottom: 10px;
    }

    h2.h1 {
        font-size: calc(2vw + 10pt);
        margin-bottom: 0;
    }

    /* Filters */
    .finder-dropdown {
        display: block;
    }

    .other_filters {
        flex-direction: row;
        padding: 0;
        max-width: 100%;
        width: fit-content;
    }

    .other_filters_header,
    .name_search.mobile {
        display: none;
    }

    .name_search.desktop {
        display: flex;
    }

    #filters {
        margin-top: 10px;
    }

    .filter_results_container {
        display: block;
        box-shadow: none;
    }



    /* results */

    #results>div.result_container,
    #results>div.result_container.banner {
        width: calc(33.333% - 3.3%);
    }
}

@media (max-width: 992px) {

    div.other_filters_header {
        padding-top: 10px;
        padding-bottom: 4px;
        text-align: center;
    }

    div.other_filters_header>span {
        font-size: 1.3rem;
        font-weight: bold;
        padding-right: 8px;
    }

    #aux_layout {
        width: 100%;
        height: 100vh;
        background: transparent;
        z-index: 2;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .other_filters {
        transition: height 1s ease-in;
    }

    .backdrop_filter {
        backdrop-filter: brightness(50%);
    }

    .h-100 {
        height: 100% !important;
    }
}

/* Medium laptop screen */
@media (min-width: 1200px) {

    /* Product card */

    .price_search .content,
    .year_search .content,
    .km_search .content {
        padding: 15px calc(10px + .2vw) 20px;
    }

    .no_discount_price {
        font-size: 12pt;
    }

}

/* Very High laptop screen */
@media (min-width: 1400px) {

    /* Title */

    /* filters */
    .price_search .content,
    .year_search .content,
    .km_search .content {
        padding: 15px calc(1px + .2vw) 20px;
    }

    .input_values {
        /*flex-direction: row;*/
    }

    .input_values>div {
        /*width: 45%;*/
    }

    .other_filters {
        justify-content: flex-end;
        margin-left: auto;
        padding-right: 2rem;
    }

    .filter_container>span {
        width: 200px;
    }

    .filter_container>span svg {
        right: 16px;
    }


    .filter_container {
        width: fit-content;
    }

    /* results */

    #results {
        padding: 10px 20px;
    }

    #results>div.result_container,
    #results>div.result_container.banner {
        width: calc(25% - 3.3%);
    }
}

/* Super very high laptop screen**/
@media (min-width:1800px) {}