/*
    Removes white gap between slides - chagnge to base color of slide images
    Elimina el espacio en blanco entre las imagenes., cambia al color base de las imagenes de slides
*/

.contenedor-previsualizar {
    width: 100%;
    /* background: red; */
    text-align: center;
    /* position: relative; */
    margin-bottom: 0;
}

.previsualizarProducto {
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem auto;

}
.itemSlide {
    overflow: hidden;
}

.icon-append {
    text-align: center;
    width: 20px !important;
}

.slide {
    position: relative;
    margin: auto;
    width: 100%;
    overflow: hidden;
    padding: 0;
}
.slide {
    background: #F5F5F5;
}

/*
    Forzar la imagen para que tenga el 100% de ancho y no un ancho máximo del 100%
    ya que el max-width hace que no rellene del todo.
*/

.slide .img-responsive {
    width: 100%;
}

/* 
    anchors are inline so you need ot make them block to go full width
*/

.slide a {
    display: block;
    width: 100%;
}

h4.box-title {
    margin-top: 8px !important;
}

.carousel-caption {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    color: #fff;
}

/* .carousel-caption .opcionesSlide {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-caption .opcionesSlide .imagenSlide {
    position: absolute;
    width: 50%;
}

.carousel-caption .opcionesSlide .textosSlide {
    position: absolute;
} */

.carousel-caption .opcionesSlide {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-caption .slideOpcion1 .imagenSlide {
    position: absolute;
}

.carousel-caption .slideOpcion1 .textosSlide {
    position: absolute;
}

.carousel-caption .slideOpcion2 .imagenSlide {
    position: absolute;
}

.carousel-caption .slideOpcion2 .textosSlide {
    position: absolute;
    text-align: right;
}

.carousel-caption .slideOpcion3 .imagenSlide {
    position: absolute;
}

.carousel-caption .slideOpcion3 .textosSlide {
    position: absolute;
    text-align: center;
}



/*
    Asignarle un tiempo de retraso por defecto a las animaciones de los h1, h2, h3 y botones
    y alguna otra opcion que de desee
*/

.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3 {
    animation-delay: 1s;
    background: rgba(0, 0, 0, .1);
    padding: 1rem 2rem;
}

.carousel-caption h1 {
    animation-delay: 1s;
}
.carousel-caption h2 {
    animation-delay: 2s;
}
.carousel-caption h3 {
    animation-delay: 3s;
}

.carousel-caption p {
    animation-delay: 3s;
    background: rgba(0, 0, 0, .1);
    padding: 1rem 2rem;
}

.carousel-caption span {
    animation-delay: 4s;
}

/* TODO POSIBLEMENTE AGREGAR MEDIA QUERIES */