.grayscale{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);	
}


.partners-container {
    padding-top: 5%;
    padding-bottom:5% ;
    width: 95vw;
    margin: auto;
    display: grid;
    gap: 1rem;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "partner-one partner-one partner-two  partner-three"
        "partner-four partner-five partner-six  partner-seven"
        "partner-eight partner-nine partner-ten partner-eleven"
        "partner-twelve partner-thirteen partner-fourteen partner-fifteen";
}

.partners-gallery {
    width: 210px;
    height: auto;
}


/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 200px;
    height: 100px;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.x-rotator {
    animation: x-rotation 5s linear infinite;
}

.y-rotator {
    animation: y-rotation 5s linear infinite;
    animation-delay: 3s;
}


.x-rotator-backwards {
    animation: x-rotation-backwards 5s linear infinite;
}

.y-rotator-backwards {
    animation: y-rotation-backwards 5s linear infinite;
    animation-delay: 3s;
}

.ghost-element {
    animation: cicliclal-opacity 10s linear infinite;
}

.left-shift {
    animation: left-shifted 10s ease-in-out infinite
}

.right-shift {
    animation: right-shifted 10s ease-in-out infinite
}

.top-shift {
    animation: top-shifted 5s ease-in-out infinite
}

.bottom-shift {
    animation: bottom-shifted 5s ease-in-out infinite
}


@keyframes x-rotation {
    0% {
        transform: rotateX(360deg);
    }

    25% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes x-rotation-backwards {
    0% {
        transform: rotateX(-360deg);
    }

    25% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes y-rotation {
    0% {
        transform: rotateY(360deg);
    }

    25% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes y-rotation-backwards {
    0% {
        transform: rotateY(-360deg);
    }

    25% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes cicliclal-opacity {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes left-shifted {
    0% {
        left: 75%;
    }

    25% {
        left: 0%;
    }

    50% {
        left: 0%;
    }

    75% {
        right: 75%;
    }

    100% {
        right: 50%;
    }
}

@keyframes right-shifted {
    0% {
        left: 0%;
    }


    50% {
        left: 65%;
    }


    100% {
        left: 0%;
    }
}

@keyframes top-shifted {
    0% {
        top: 10%;
    }


    50% {
        top: 65%;
    }


    100% {
        top: 10%;
    }
}

@keyframes bottom-shifted {
    0% {
        bottom: 60%;
    }


    50% {
        bottom: 5%;
    }


    100% {
        bottom: 60%;
    }
}


.partner-one {
    /* background-color: var(--color-pumpking); */
    grid-area: partner-one;
    position: relative;
}

.partner-one>h2 {
    position: absolute;
    bottom: 10%;
    left: 10%;
    right: 10%;
    text-align: center;
}

.partner-two {
    /* background-color: aqua; */
    grid-area: partner-two;
    position: relative;
}

.partner-three {
    /* background-color: blue; */
    grid-area: partner-three;
}

.partner-four {
    /* background-color: green; */
    grid-area: partner-four;
}

.partner-five {
    /* background-color: red; */
    grid-area: partner-five;
}

.partner-six {
    /* background-color: yellow; */
    grid-area: partner-six;
}

.partner-seven {
    /* background-color: yellowgreen; */
    grid-area: partner-seven;
}

.partner-eight {
    /* background-color: purple; */
    grid-area: partner-eight;
    position: relative;
}

.partner-nine {
    /* background-color: peru; */
    grid-area: partner-nine;
}

.partner-ten {
    /* background-color: palegoldenrod; */
    grid-area: partner-ten;
}

.partner-eleven {
    /* background-color: palevioletred; */
    grid-area: partner-eleven;
}

.partner-twelve {
    /* background-color: black; */
    grid-area: partner-twelve;
}

.partner-thirteen {
    /* background-color: papayawhip; */
    grid-area: partner-thirteen;
}

.partner-fourteen {
    /* background-color: lightcoral; */
    grid-area: partner-fourteen;
}

.partner-fifteen {
    /* background-color: pink; */
    grid-area: partner-fifteen;
}

.partner-sixteen {
    /* background-color: brown; */
    grid-area: partner-sixteen;
}

.partner-seventeen {
    /* background-color: fuchsia; */
    grid-area: partner-seventeen;
}