/* titulo */
.slider {
    /* border: 1px solid black; */
    width: 100%; 
    max-width: 700px; 
    margin: 0 auto; 
    background-color: rgb(255, 124, 255); 
    border-radius: 25px;
    box-shadow: 1px 1px 3px 3px rgb(160, 82, 74);    
}
.slider-title {
    /* border: 1px solid green; */
    width: 100%;    
}
.slider-title img {
    width: 60%;
    max-width: 618px;
}
.slider-images-big {
    /* border: 1px solid blue; */
    width: 100%;
    height: 65vw;    
}
.imgBig {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.slider-images-small, .slider2-images-small {
    /* border: 1px solid gray; */
    width: 100%;
    height: 12vw;
}
.slider-images-small img {
    width: calc((100% / 7) - (4px)); /* restar pixeles del borde */
    height: 100%;
    float: left;
    object-fit: fill;
    object-position: center;
    margin: 1px 2px;
    border-radius: 5px;
    cursor: pointer;
}
.slider-images-small img.active {
    box-shadow: 0 0 3px 3px blue;
}
.text-slider {
    font-size: 14px;
    text-decoration-style: dashed;
    line-height: 20px;
    padding: 10px 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(160, 82, 74);
}

/**** Medias ******/
#medias {
    /* border: 1px solid black; */
    display: flex;

}
#medias div {
    width: 50%;
    padding: 15px;
}
#medias img {
    width: 100%
}
#medias div img:nth-child(2) {
    height: 75px;
}

#boxers {
    background-color: rgb(209, 233, 255);
    box-shadow: 1px 1px 3px 3px rgb(74, 154, 160);
}

/**** colors ******/
#section-products-colors {
    /* border: 1px solid red;  */
    display: block; 
}
#section-products-colors > div {
    background-color: silver;
    margin: 0 auto;
    max-width: 700px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px gray;
}
#section-products-colors > div > div > p {
    /* border: 1px solid green; */
    width: 100%;
    font-size: 26px; 
    margin-bottom: 10px;  
}
#section-products-colors > div > div:nth-child(2) {
    /* border: 1px solid blue; */
    width: 100%;
    height: 60vw;    
    display: box;    
}
.color-row {
    width: 100%;
    height: calc(100% / 4 - 2px);
}
.color-col {
    /* border: 1px solid black; */
    float: left;
    width: calc(100% / 5 - 2px);
    height: 100%;
    margin: 1px;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px gray;    
}
#r1c1 {  
    background-color: white;
}
#r1c2 {
    background-color: #000B78;
}
#r1c3 {
    background-color: #FF42FF;
}
#r1c4 {
    background-color: #FFFF00;
}
#r1c5 {
    background-color: #FF0000;
}
#r2c1 {  
    background-color: #E8A151;
}
#r2c2 {
    background-color: #B7CECE;
}
#r2c3 {
    background-color: #FF9494;
}
#r2c4 {
    background-color:#00B200;
}
#r2c5 {
    background-color: #FF5704;
}
#r3c1 {  
    background-color: #084300;
}
#r3c2 {
    background-color: #6A6A6A;
}
#r3c3 {
    background-color: #007CB5;
}
#r3c4 {
    background-color: #FFC200;
}
#r3c5 {
    background-color: #FF0247;
}
#r4c1 {  
    background-color: #00011A;
}
#r4c2 {
    background-color: #FFFDC0;
}
#r4c3 {
    background-color: #45012C;
}
#r4c4 {
    background-color: #000000;
}
#r4c5 {
    background-color: #522700;
}

/* limitar altura de las imagenes */
@media screen and (min-width: 800px) {
    .slider-images-big {
        height: 520px;
    }
    .slider-images-small {
        height: 100px;
    }
    /* contenedor de tabla de colores */
    #section-products-colors > div > div:nth-child(2) {
        height: 460px;        
    }
}