@keyframes appear {
    0% {
        top: 0%;
        opacity: 0;
    }

    25% {
        top: 25%;
        opacity: 0.25;
    }

    50% {
        top: 50%;
        opacity: 0.50;
    }

    100% {
        top: 100%;
        opacity: 1;
    }
}

/* The element to apply the animation to */
.promo-card img {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    transition: all .3s cubic-bezier(0,0,.5,1);
}

    .promo-card img:hover {
        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    }

/* Parent Container */
.content_img {
    position: relative;
}

    /* Child Text Container */
    .content_img .detalles {
        position: absolute;
        top: 0;
        background: black;
        background: -moz-linear-gradient(left, black 0%, transparent 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, black), color-stop(100%, transparent));
        background: -webkit-linear-gradient(left, black 0%, transparent 100%);
        background: -o-linear-gradient(left, black 0%, transparent 100%);
        background: -ms-linear-gradient(left, black 0%, transparent 100%);
        background: linear-gradient(to right, black 0%, transparent 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
        color: white;
        margin-bottom: 5px;
        font-family: sans-serif;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: visibility 0s, opacity 0.5s linear;
        transition: all .3s cubic-bezier(0,0,.5,1);
    }

    /* Hover on Parent Container */
    .content_img:hover {
        cursor: pointer;
    }

        .content_img:hover .detalles {
            width: 150px;
            padding: 8px 15px;
            visibility: visible;
            opacity: 1;
        }

.details-promo {
    position: absolute;
    background-color: white;
    z-index: -1;
    width: 100%;
    background-color: #efefef;
    color: #888888;
    top: 0;
    padding: 1em;
    opacity: 0;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.details-promo-movil {
    background-color: #efefef;
    color: #888888;
}

.details-promo-animation {
    animation-name: appear;
    animation-duration: 0.3s;
    z-index: 1;
    top: 100%;
    opacity: 1;
}

.promo-title {
    font-size: 1.4rem;
    color: #888888;
    text-align: center;
}

.content_img_selected:hover {
    cursor: auto !important;
}

.close-cross {
    cursor: pointer;
}

.tpd-skin-light a:hover {
    color: #ffffff;
}

.tpd-skin-light a {
    color: #000000;
}

.list-item-promotion {
    font-weight: 500;
    color: #6d6d6d;
    line-height: 25px;
    font-size: 1rem;
}

.mosaic {
    transition: 0.3s;
}

    .mosaic:hover {
        transform: scale3d(1.03, 1.03, 1.03);
    }

.nxt {
    margin-left: auto;
    margin-right: 2px;
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/08/7442-arrowright.png);
}

.prv {
    margin-left: 2px;
    margin-right: auto;
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/08/7441-arrowleft.png) !important;
    margin-bottom: 2rem;
    margin-top: 2rem;
}


.img-mosaic {
    height: 231px;
    width: 180px;
    background-position: center;
    background-size: cover;
}

.img-mosaic2 {
    height: 278px;
    width: 227px;
    background-position: center;
    background-size: cover;
}

.img-mosaic2-m {
    height: 201px;
    width: 150px;
    background-position: center;
    background-size: cover;
}

.mosaic {
    transition: all .3s cubic-bezier(0,0,.5,1);
}

.hov {
    color: white;
    font-size: 16px;
    padding: 1px 20px;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    width: 100%;
    height: 45%;
    transition: .5s ease;
    opacity: 0;
    background-color: gray;
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.list-group-item:hover .image {
    opacity: 0.7;
}

.list-group-item:hover .middle {
    opacity: 0.7;
}

@media (min-width: 768px) {
    .ship-banner-border {
        border-right: 1px solid #a7a7a7 !important;
    }
}


/* Mosaicos de home y hovers */
.mos-modelante {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonmodelante.jpg);
}


    .mos-modelante:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonmodelante2.jpg);
    }

.mos-termico {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botontermicas1.jpg);
}

    .mos-termico:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botontermicas2.jpg);
    }

.mos-aroma {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonaromat.jpg);
}

    .mos-aroma:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonaromat2.jpg);
    }

.mos-cuidadop {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botoncuidadop.jpg);
}

    .mos-cuidadop:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botoncuidadop2.jpg);
    }

.mos-perfumes {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonperfume.jpg);
}

    .mos-perfumes:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonperfume2.jpg);
    }

.mos-natural {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonprodsnat.jpg);
}

    .mos-natural:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonprodsnat2.jpg);
    }

.mos-intima {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonintima.jpg);
}

    .mos-intima:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonintim2.jpg);
    }

.mos-ninos {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonninos.jpg);
}

    .mos-ninos:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonninos2.jpg);
    }

.mos-alka {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonagua.jpg);
}

    .mos-alka:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonagua2.jpg);
    }

.mos-hombre {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonhombre.jpg);
}

    .mos-hombre:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonhombre2.jpg);
    }

.mos-pies {
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7333-piesch.jpg);
}

    .mos-pies:hover {
        background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7334-piesch2.jpg);
    }

.mos-var {
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7339-varicesch.jpg);
}

    .mos-var:hover {
        background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7340-varicesch2.jpg);
    }

.mos-moda {
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7328-modach2.jpg);
}

    .mos-moda:hover {
        background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7327-modach.jpg);
    }

.mos-cabello {
    background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7317-cabelloch.jpg);
}

    .mos-cabello:hover {
        background-image: url(https://s3.us-west-2.amazonaws.com/aroma-web/uploads/media/2021/07/7318-cabelloch2.jpg);
    }

.mos-beatle {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botontopb1.jpg);
}

    .mos-beatle:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonpb2.jpg);
    }

.mos-canale {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botoncanale1.jpg);
}

    .mos-canale:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botoncanale2.jpg);
    }

.mos-polar {
    background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonpolar1.jpg);
}

    .mos-polar:hover {
        background-image: url(https://chemisette-web.s3.us-west-2.amazonaws.com/uploads/lchemisette/home/enero2023/botonpolar2.jpg);
    }
/* Fin mosaicos de home y hovers */
.img-mosaic-news {
    height: 305px;
    width: 233px;
    background-position: center;
    background-size: cover;
}

.DeskRowMosaic {
    display: flex;
    justify-content: space-evenly;
}