/**************************************
 ********* CAROUSEL ESPACIOS **********
 **************************************/

#carousel_espacios {
    position: relative;
    padding: 20px;
    margin-bottom: 2rem;
    background: #ededed;
    width: 100%;
}

#carousel_espacios .control {
    position: absolute;
    top: 100px;
    font-size: 24px;
    color: #4d4d4d;
}

#carousel_espacios .control:hover {
    text-decoration: none;
    color: #069;
}

#carousel_espacios .control.disabled,
#carousel_espacios .control.disabled:hover {
    color: #AAA;
    cursor: default;
}

#carousel_espacios .control.control-prev {
    left: 10px;
}

#carousel_espacios .control.control-next {
    right: 10px;
}

#carousel_espacios .wrapper {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}

#carousel_espacios .wrapper ul {
    list-style: none;
    padding: 0;
    float: left;
    width: 5000px;
}

#carousel_espacios .wrapper ul li {
    float: left;
    width: 178px;
    margin: 0 10px;
}

#carousel_espacios .wrapper ul li h4 {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

#carousel_espacios .wrapper ul li h4 a {
    color: #4d4d4d;
}

#carousel_espacios .wrapper ul li h4 a:hover {

}

#carousel_espacios .wrapper ul li img {
    width: 100%;
    margin-bottom: 10px;
    height: auto;
}

#carousel_espacios .wrapper ul li p {
    font-size: 11px;
}

/*responsive*/
@media (max-width: 1024px) {
    #carousel_espacios .wrapper ul li {
        margin: 0 10px;
        width: 160px;
    }

    #carousel_espacios .wrapper ul li h4 {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    #carousel_espacios .wrapper {
        margin: 0 auto;
        max-width: 550px;
    }
}

@media  (max-width: 767px) {
    #carousel_espacios .wrapper {
        overflow: hidden;
        width: 415px;
    }
    #carousel_espacios .wrapper ul li {
        width: 185px;
    }
}

@media  (max-width: 575px) {
    #carousel_espacios .wrapper {
        width: 203px;
    }
}