.btn-veiculo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.btn-veiculo a {
    min-width: 250px;
    max-width: 100%;
    margin: 0 8px 8px 0
}

.calc {
    background: url(../img/icons/calc.png) no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 8px -1px 0
}

.btn-whats {
    background-color: #27ae60;
    margin-top: 10px;
}

.btn-whats i {
    background: url(../img/icons/whatsapp-white.svg) no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    margin-right: 8px
}

.car-card img {
    width: 100%;
    margin: 0 auto;
    max-height: 180px;
    min-height: 180px;
    height: 100%;
    object-fit: cover;
    display: block
}

.jplist-list .car-card img {
    border-radius: 5px;
    margin-top: 0
}

.jplist-list .car-card figure:before {
    height: 100%;
    margin-top: 0;
    border-radius: 5px
}

.jplist-list .card-content {
    align-items: center
}

.jplist-list .card-content h3 {
    min-height: auto;
    margin: 0
}

.jplist-list .card-content p {
    text-align: right;
    padding-right: 12px
}

.jplist-list .list-icons {
    display: block;
    margin-right: 5%
}

.jplist-list .list-icons .car-detail--icons {
    flex-wrap: initial
}

.jplist-list .car-detail--icons p {
    font-weight: 500;
    text-align: center
}

.jplist-list .card-content>p {
    margin-right: 12px
}

.jplist-grid .list-icons {
    display: none
}

.jplist-grid .show-grid {
    display: block
}

.jplist-list .show-grid {
    display: none
}

.jplist-list .show-on-list {
    display: block
}

.jplist-grid .show-on-list {
    display: none
}

.list-wp-icon {
    background: url(../img/icons/whatsapp-black.svg) no-repeat;
    padding-left: 25px;
    color: #333;
    display: block;
    margin: 10px 0 0 25px;
    transition: .4s;
    font-size: .9em
}

.list-wp-icon:hover {
    color: #27ae60;
    transition: .4s
}

iframe.maps {
    min-height: 220px;
    max-height: 220px
}

.header--overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0, rgba(255, 255, 255, 0) 0%)
}

.slides-header--wrap {
    position: absolute;
    z-index: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto
}

.slides-header {
    width: 100%
}

.slider-car {
    max-width: 800px;
    max-height: 600px;
    margin: 0 auto
}

.slider-car img {
    width: 100%;
    margin: 0 auto;
    max-height: 600px;
    height: 100%;
    object-fit: cover;
    display: block
}

.slider-car--thumbs div img {
    max-height: 130px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block
}

@media only screen and (max-width:56em) {
    .header__menu {
        width: 95px;
        flex-direction: row-reverse
    }
}

@media only screen and (max-width:47em) {
    .header {
        height: 100%;
        background-size: fill;
    }

    .search-component {
        margin-top: 0
    }

    .search-component .field-group {
        flex-direction: row
    }

    .search-component .field--half {
        width: 100%
    }

    .slides-header {
        width: 100%
    }

    .slides-header img {
        object-fit: contain
    }

    .slider-car {
        max-height: 280px
    }

    .slider-car img {
        max-height: 280px
    }

    .slider-thumbs div {
        height: 70px
    }

    .slider-car--thumbs div img {
        max-height: 70px
    }

    #marcas {
        grid-auto-flow: column;
        grid-template-columns: 65px;
        grid-auto-columns: 65px;
        overflow-x: scroll;
        overflow-y: hidden;
        grid-gap: 10px;
        width: 80vw;
    }
}

#marcas {
    grid-column-gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr))
}

#marcas .brand {
    background-color: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    color: #171717;
    display: block;
    font-size: .875rem;
    padding: 5px;
    text-align: center;
    margin: 6px 0 6px 0;
    max-width: 260px
}

#marcas .brand.selected,
#marcas .brand:hover {
    background-color: #dcdcdc;
    box-shadow: 0px 0px 1px 1px;
}