﻿.listado {
    padding: 60px 20px;
    color: #787878;
    width: 98%;
    position: relative;
    min-height: 700px;
}

#busqueda {
    opacity: 0.5;
}

    #busqueda.hover {
        opacity: 1;
    }

.listado-seminuevos > div.row > div .seminuevos {
    border: solid 1px #bbb !important;
    margin: 25px 5px;
}

.listado-seminuevos div .seminuevos .foto {
    /* height: 431px; */
}

.listado-seminuevos > div.row > div .seminuevos.NoHover {
    background-color: #ccc;
    opacity: 0.5;
}

.listado-seminuevos > div.row > div .seminuevos.Hover .info-general h3 {
    font-size: 22px;
}

.listado-seminuevos > div.row > div .seminuevos.Hover #preciosSeminuevos span {
    font-size: 15px;
}

.listado-seminuevos > div.row > div .seminuevos .slick-arrow {
    display: none !important;
    z-index: 999;
    width: 40px !important;
    height: 40px;
}

    .listado-seminuevos > div.row > div .seminuevos .slick-arrow:before {
        content: '';
    }

    .listado-seminuevos > div.row > div .seminuevos .slick-arrow.slick-prev {
        background: url(/assets/img/Icono_Flecha_Izq.png);
        background-size: cover;
        left: 10px;
    }

    .listado-seminuevos > div.row > div .seminuevos .slick-arrow.slick-next {
        background: url(/assets/img/Icono_Flecha_Der.png);
        background-size: cover;
        right: 10px;
    }

.listado-seminuevos > div.row > div .seminuevos.Hover .slick-arrow {
    display: block !important;
}

#preciosSeminuevos {
    padding-bottom: 20px;
}

.listado article .btn-cotizacion, .listado article .btn-general {
    margin-bottom: 20px
}
/*
.listado article button {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    text-align: left;
    padding: 8px 20px 5px !important;
}*/

.listado article button i {
    position: absolute;
    right: 10px
}

.listado article.promociones h3 {
    font-size: 2.6rem
}

    .listado article.promociones h3 span {
        font-family: "Myriad Pro Bold",sans-serif;
        margin-top: -10px !important
    }

.listado article.seminuevos {
    margin-bottom: 40px;
    padding-bottom: 0
}

    .listado article.seminuevos .info-general {
        margin-top: 20px;
        /* border-bottom: 1px solid #000; */
        padding-bottom: 20px;
        margin-bottom: 10px;
        margin: 15px;
    }

        .listado article.seminuevos .info-general h3 {
            font-size: 20px;
            padding: 7px 0 10px 0;
            margin: 0;
            color: black;
        }

        .listado article.seminuevos .info-general .price {
            background-color: #334E8B;
            text-align: right;
            color: black;
            font-size: 2rem;
            font-family: "Myriad Pro Bold",sans-serif;
            padding: 6px 10px 1px 20px;
            position: relative
        }

            .listado article.seminuevos .info-general .price:before {
                content: "";
                width: 15px;
                height: 50px;
                position: absolute;
                background-color: black;
                bottom: -1px;
                left: -5px;
                transform: rotate(15deg)
            }

    .listado article.seminuevos .info-detalles {
        font-size: 13px !important;
        color: black;
        font-family: 'Roboto-Regular';
    }

.info-detalles .col-4 {
    position: relative;
    font-size: 11px;
}

.listado article.seminuevos .info-detalles .separadorSeminuevos {
    width: 1px;
    height: 20px;
    background: black;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    position: absolute;
    right: 4px;
}

.listado article.seminuevos .precioAnterior {
    margin: 0 auto;
    text-align: center;
}

.listado article.seminuevos .datosDist {
    text-align: center;
    border-top: solid 1px #ccc;
    font-size: 14px;
    padding: 15px 0;
    border-bottom: solid 1px #ccc;
}

#preciosSeminuevos span {
    display: block;
    font-size: 14px;
    font-family: 'Roboto-Regular';
}

#preciosSeminuevos .precio {
    color: black;
    font-size: 14px;
    font-family: 'Roboto-Bold';
}

#preciosSeminuevos .precioAnterior .precio {
    color: red;
    text-decoration: line-through;
}

.slick-slider .slick-list.draggable, .slick-slider .slick-list.draggable .slick-track, .slick-slider .slick-list.draggable .slick-track img {
    max-height: 431px;
}

.slick-slider .slick-track {
    display: flex;
    align-items: center;
}

.listado input[type="submit"] {
    display: block;
    margin: 0 auto;
    font-size: 12px;
}

.listado #filtrosActivosSeminuevos input[type="submit"] {
    font-size: 10px;
    background: url('/assets/img/close_icon.png');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: right 5px center;
    padding: 10px 15px 10px 10px;
    border-radius: 10px;
    border: solid 1px red;
    /* width: 100%; */
    white-space: normal;
    margin: 0 15px 0 0;
}

    .listado #filtrosActivosSeminuevos input[type="submit"].nox {
        background: transparent;
    }

#filtrosText {
    padding: 0;
}

#filtrosActivosSeminuevos {
    margin-left: 0px;
}

#filtros img {
    width: 18px;
}

#filtros strong {
    font-family: 'Roboto-Bold';
    vertical-align: middle;
}

#filtros {
    padding: 50px 20px 0 20px;
}

    #filtros #btnLimpiar {
        color: #a1a1a1;
        border: none;
        background: transparent;
    }

        #filtros #btnLimpiar:hover {
            color: #505050;
        }

    #filtros .nopading {
        border-bottom: solid 1px #000;
        padding-bottom: 10px;
    }

        #filtros .nopading input {
            text-align: right;
            display: block;
            margin: auto 0 0 auto;
        }

#loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.5;
}

    #loading > div {
        margin-top: 40%;
    }

        #loading > div > div {
            font-size: 50px;
            width: 100px;
            height: 100px;
            color: white !important;
        }

#filtros #listFiltros input[type='submit'] {
    border: none;
    text-align: left;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: right !important;
    font-family: 'Roboto-Bold';
    padding: 10px 5px;
    border-bottom: solid 1px;
    color: black;
}

    #filtros #listFiltros input[type='submit'].close {
        background: url('/assets/img/arrow_right_icon.png');
    }

    #filtros #listFiltros input[type='submit'].open {
        background: url('/assets/img/arrow_left_icon.png');
        background-position: left !important;
        padding: 10px 5px 10px 20px;
        border-bottom: none;
    }

#listFiltros {
    padding-right: 0px;
}

#panelUbicacion {
    padding-top: 20px
}

#btnKilometraje {
    display: none;
}
/*
#errorFiltros {
    position: absolute;
    left: 100%;
    font-size: 10px;
    color: red;
    z-index: 1;
    width: 100px;
    background: white;
    border-radius: 10px;
    border: solid 1px #ccc;
}
*/
#rangekilometraje, #rangeprecio {
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
    height: 11px;
    border-radius: 11px;
    background: linear-gradient(to right,rgb(197 20 12) 0,#eee 1%,#eee 50%,#eee 100%);
}

    #rangekilometraje:focus, #rangeprecio:focus {
        outline: 0
    }

    #rangekilometraje::-webkit-slider-runnable-track, #rangeprecio::-webkit-slider-runnable-track {
        width: 100%;
        height: 11px;
        cursor: pointer;
        animate: .2s;
        box-shadow: 0 0 0 rgb(197 20 12);
        border-radius: 5px;
        border: 0 solid rgb(197 20 12)
    }

    #rangekilometraje::-webkit-slider-thumb, #rangeprecio::-webkit-slider-thumb {
        box-shadow: 0 0 1px rgb(197 20 12);
        border: 1px solid rgb(197 20 12);
        height: 25px;
        width: 25px;
        border-radius: 25px;
        background: rgb(197 20 12);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -7.5px
    }

    #rangekilometraje::-moz-range-track, #rangeprecio::-moz-range-track {
        width: 100%;
        height: 11px;
        cursor: pointer;
        animate: .2s;
        box-shadow: 0 0 0 rgb(197 20 12);
        background: 0 0;
        border-radius: 5px;
        border: 0 solid rgb(197 20 12)
    }

    #rangekilometraje::-moz-range-thumb, #rangeprecio::-moz-range-thumb {
        box-shadow: 0 0 1px rgb(197 20 12);
        border: 1px solid rgb(197 20 12);
        height: 25px;
        width: 25px;
        border-radius: 25px;
        background: #fff;
        cursor: pointer
    }

    #rangekilometraje::-ms-track, #rangeprecio::-ms-track {
        width: 100%;
        height: 11px;
        cursor: pointer;
        animate: .2s;
        background: 0 0;
        border-color: transparent;
        color: transparent
    }

    #rangekilometraje::-ms-fill-lower, #rangeprecio::-ms-fill-lower {
        background: #eee;
        border: 0 solid rgb(197 20 12);
        border-radius: 10px;
        box-shadow: 0 0 0 rgb(197 20 12)
    }

    #rangekilometraje::-ms-fill-upper, #rangeprecio::-ms-fill-upper {
        background: #eee;
        border: 0 solid rgb(197 20 12);
        border-radius: 10px;
        box-shadow: 0 0 0 rgb(197 20 12)
    }

    #rangekilometraje::-ms-thumb, #rangeprecio::-ms-thumb {
        box-shadow: 0 0 1px rgb(197 20 12);
        border: 1px solid rgb(197 20 12);
        height: 25px;
        width: 25px;
        border-radius: 25px;
        background: #fff;
        cursor: pointer
    }

    #rangekilometraje:focus::-ms-fill-lower, #rangeprecio:focus::-ms-fill-lower {
        background: #eee
    }

    #rangekilometraje:focus::-ms-fill-upper, #rangeprecio:focus::-ms-fill-upper {
        background: #eee
    }

#limitesKilometraje, #limitesPrecio {
    position: relative;
    display: block;
}

    #limitesKilometraje span:first-child, #limitesPrecio span:first-child {
        left: 0;
    }

    #limitesKilometraje span, #limitesPrecio span {
        font-size: 12px;
        position: absolute;
        right: 0;
        top: -20px;
    }

#upListaSeminuevos {
    min-height: 800px;
}

.slick-slide {
    height: auto !important;
}

.hidden {
    display: none;
}

@media (max-width:768px) {
    #listFiltros {
        display: none;
    }
}
