:root {
    --bluePrime: #444290;
    --grayPrime: rgb(74, 74, 74);
    --redPrime: rgb(237, 50, 55);
    --numberElements: 5;
}

/* SERVICIO */
.section-servicio {
    font-family: 'Poppin', 'Arial';
    font-size: 16pt;
}

.section-servicio span:nth-child(2) {
    font-weight: 400;
    font-size: 1.2em;
    color: var(--grayPrime);
    padding-top: 0px !important;
    margin-bottom: -12px;
}

.section-servicio span:nth-child(2n + 1) {
    font-weight: 900;
    font-size: 2em;
    color: var(--doradoGreen);
    padding-top: 0px !important;
    margin-top: -12px;
}

.section-servicio .col-image .align-self-center {
    border-radius: 10px;
    box-shadow: -1px 0px 4px 4px rgba(74, 74, 74, 0.4),
        1px 0px 4px 4px rgba(74, 74, 74, 0.4);
}

.section-servicio .openGallery,
.section-gallery .closeGallery {
    background-color: var(--redPrime);
}

@media screen and (min-width: 768px) {
    /* GALLERY */

    /* ********* titulos de servicio ********** */

    .section-gallery .row-service {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section-gallery .row-service img {
        height: 6em;
        width: auto;
        text-align: center;
    }

    /* contenedor de imagenes ***********************/
    .section-gallery .contenedor {
        margin: 10%;
    }

    .section-gallery .content-images {
        font-size: 0pt;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .section-gallery .box-image {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .section-gallery .card {
        transition: margin 0.5s 0s ease;
        margin: 5%;
        border-radius: 10px;
        box-shadow: 1px 0px 2px 2px rgba(74, 74, 74, 0.5),
            -1px 0px 2px 2px rgba(74, 74, 74, 0.5);
        overflow: hidden;
    }

    .section-gallery .card:hover {
        transition: margin 0.5s 0s ease;
        margin: 0%;
    }

    .section-gallery .card img {
        width: 100%;
        height: auto;
    }

    .section-gallery .row-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section-gallery .closeGallery {
        width: 33.33%;
        margin: 2em auto;
        box-shadow: 1px 1px 1px 1px rgba(74, 74, 74, 0.2),
            -1px -1px 1px 1px rgba(74, 74, 74, 0.2);
    }

    .section-gallery .closeGallery:hover {
        box-shadow: 1px 1px 1px 1px rgba(74, 74, 74, 0.6),
            -1px -1px 1px 1px rgba(74, 74, 74, 0.6);
    }

    /* ********** flechas ********** */
    .section-gallery .row-carriers {
        position: relative;
    }

    .section-gallery .row-carriers .arrow {
        position: absolute;
        top: 0px;
        bottom: 0px;
        background-color: transparent;
        opacity: 0.4;
        font-size: 0.8em;
    }

    .section-gallery .row-carriers .arrow:hover {
        opacity: 0.9;
    }

    .section-gallery .row-carriers .arrow-left {
        right: 100%;
    }

    .section-gallery .row-carriers .arrow-right {
        left: 100%;
    }

    /* animaciones ************ */

    .animation-toRight {
        animation-name: moveToRight;
        animation-duration: 0.8s;
        animation-timing-function: ease-in;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    @keyframes moveToRight {
        100% {
            transform: translateX(100%);
        }
    }

    .animation-toLeft {
        animation-name: moveToLeft;
        animation-duration: 0.8s;
        animation-timing-function: ease-in;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    @keyframes moveToLeft {
        100% {
            transform: translateX(-100%);
        }
    }
}