/**
CAROUSSEL HOME
*/

#carousel {
    height: 21vh;
}

.carousel-image span.description.close{
    display: none;
    animation: 0.5s ease-out closeanimation;
}

.carousel-image span.description{
    animation: 0.5s ease-out displayanimation;
    display: block;
    position: absolute;
    z-index: 50;
    padding: 15px;
    width: 300px;
    font-size: 14px;
    background: white;
    box-shadow: 0 0 25px white;
    border-radius: 5%;
    cursor: pointer;
}

@keyframes displayanimation {
    0% {
        opacity: 0;
    }
    100% {
       opacity: 100%;
    }
}

@keyframes closeanimation {
    0% {
        opacity: 100%;
    }
    100% {
       opacity: 0;
    }
}



.carousel-image a {
    max-height: 100%!important;
    color: #154094!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-user-drag: none;
}

.carousel-image {
    
    overflow: inherit;
    height: 20vh;
    max-height: 200px;
    position: absolute;
    left: 50%;
    border-radius: 10%!important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,
        inset -0.5em -1em 0.8em rgba(139, 141, 196, 0.3),
        inset -0.3em -0.8em 0.8em rgba(163, 165, 231, 0.5),
        inset 2px 2px 0.8em white,
        inset 2em 2em 0.8em #F7F9FF!important
	;
	background-color: white!important;
    width: 200px;
    height: 165px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 10px 20px 10px;
    text-align: center;
}

.carousel-image .info {
    content: url('./info.svg');
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
}

.carousel-image img {
    pointer-events: none ;
    cursor: pointer;
    max-height: 80%;
    width: auto;
}

#carousel-image-12 img {
    max-height: 70%;
    margin-top: 8px;
}

.carousel-image span {
    font-weight: bold;
}


#carousel-image-0 {
    transform: translateX(-50%)  translateY(-53%) scale(0.65);
    filter: brightness(80%);
    opacity: 1;
    z-index: 1;
}

#carousel-image-1 {
    transform: translateX(-50%) translateX(-60%) translateY(-45%) scale(0.75);
    filter: brightness(85%);
    opacity: 1;
    z-index: 2;
}

#carousel-image-2 {
    transform: translateX(-50%) translateX(-120%) translateY(-35%) scale(0.85);
    filter: brightness(90%);
    opacity: 1;
    z-index: 3;
}

#carousel-image-3 {
    transform: translateX(-50%) translateX(-180%) translateY(-25%) scale(0.9);
    filter: brightness(95%);
    opacity: 1;
    z-index: 4;
}

#carousel-image-4 {
    transform: translateX(-50%) translateX(-100%) translateY(-10%) scale(0.95);
    filter: brightness(98%);
    opacity: 1;
    z-index: 5;
}

#carousel-image-5 {
    transform: translateX(-50%) scale(1);
    filter: brightness(100%);
    opacity: 1;
    z-index: 6;
}

#carousel-image-6 {
    transform: translateX(-50%) translateX(100%) translateY(-10%) scale(0.95);
    filter: brightness(98%);
    opacity: 1;
    z-index: 5;
}

#carousel-image-7 {
    transform: translateX(-50%) translateX(180%) translateY(-25%) scale(0.9);
    filter: brightness(95%);
    opacity: 1;
    z-index: 4;
}

#carousel-image-8 {
    transform: translateX(-50%) translateX(120%) translateY(-35%) scale(0.85);
    filter: brightness(90%);
    opacity: 1;
    z-index: 3;
}

#carousel-image-9 {
    transform: translateX(-50%) translateX(60%) translateY(-45%) scale(0.75);
    filter: brightness(85%);
    opacity: 1;
    z-index: 2;
}

#carousel-image-10 {
    opacity: 0;
}


#carousel-image-11 {
    opacity: 0;
}

#carousel-image-12 {
    opacity: 0;
}

/**
*/

@keyframes mv0to1 {
    0% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        transform: translateX(-50%) translateX(-60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 2;
    }
}

@keyframes mv1to2 {
    0% {
        transform: translateX(-50%) translateX(-60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 2;
    }
    100% {
        transform: translateX(-50%) translateX(-120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 3;
    }
}

@keyframes mv2to3 {
    0% {
        transform: translateX(-50%) translateX(-120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 3;
    }
    100% {
        transform: translateX(-50%) translateX(-180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 4;
    }
}

@keyframes mv3to4 {
    0% {
            transform: translateX(-50%) translateX(-180%) translateY(-25%) scale(0.9);
    filter: brightness(95%);
    opacity: 1;
    z-index: 4;
    }
    100% {
        transform: translateX(-50%) translateX(-100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 5;
    }
}

@keyframes mv4to5 {
    0% {
        transform: translateX(-50%) translateX(-100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: translateX(-50%) scale(1);
        filter: brightness(100%);
        opacity: 1;
        z-index: 6;
    }
}

@keyframes mv5to6 {
    0% {
        transform: translateX(-50%) scale(1);
        filter: brightness(100%);
        opacity: 1;
        z-index: 6;
    }
    100% {
        transform: translateX(-50%) translateX(100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 5;
    }
}

@keyframes mv6to7 {
    0% {
        transform: translateX(-50%) translateX(100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: translateX(-50%) translateX(180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 4;
    }
}

@keyframes mv7to8 {
    0% {
        transform: translateX(-50%) translateX(180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 4;
    }
    100% {
        transform: translateX(-50%) translateX(120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 3;
    }
}

@keyframes mv8to9 {
    0% {
        transform: translateX(-50%) translateX(120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 3;
    }
    100% {
        transform: translateX(-50%) translateX(60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 2;
    }
}

@keyframes mv9to10 {
    0% {
        transform: translateX(-50%) translateX(60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 2;
    }
    100% {
        opacity: 0;
    }
}

@keyframes mv10to11 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes mv11to12 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes mv12to0 {
    0% {
        opacity: 0;
    }
    100% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 1;
        z-index: 1;
    }
}
/**
*/

@keyframes mv0to12 {
    0% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 1;
        z-index: 2;
    }
    80% {
        opacity: 40%;
    }
    100% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 0;
        z-index: 2;
    }
}

@keyframes mv12to11 {
    0% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 1;
        z-index: 2;
    }
    80% {
        opacity: 40%;
    }
    100% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 0;
        z-index: 2;
    }
}

@keyframes mv10to9 {
    0% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 0;
        z-index: 2;
    }
    20% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(-50%) translateX(60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 3;
    }
}

@keyframes mv9to8 {
    0% {
        transform: translateX(-50%) translateX(60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 3;
    }
    100% {
        transform: translateX(-50%) translateX(120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 4;
    }
}

@keyframes mv8to7 {
    0% {
        transform: translateX(-50%) translateX(120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 4;
    }
    100% {
        transform: translateX(-50%) translateX(180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 5;
    }
}

@keyframes mv7to6 {
    0% {
        transform: translateX(-50%) translateX(180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: translateX(-50%) translateX(100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 6;
    }
}

@keyframes mv6to5 {
    0% {
        transform: translateX(-50%) translateX(100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 6;
    }
    100% {
        transform: translateX(-50%) scale(1);
        filter: brightness(100%);
        opacity: 1;
        z-index: 7;
    }
}

@keyframes mv5to4 {
    0% {
        transform: translateX(-50%) scale(1);
        filter: brightness(100%);
        opacity: 1;
        z-index: 7;
    }
    100% {
        transform: translateX(-50%) translateX(-100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 6;
    }
}

@keyframes mv4to3 {
    0% {
        transform: translateX(-50%) translateX(-100%) translateY(-10%) scale(0.95);
        filter: brightness(98%);
        opacity: 1;
        z-index: 6;
    }
    100% {
        transform: translateX(-50%) translateX(-180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 5;
    }
}

@keyframes mv3to2 {
    0% {
        transform: translateX(-50%) translateX(-180%) translateY(-25%) scale(0.9);
        filter: brightness(95%);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: translateX(-50%) translateX(-120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 4;
    }
}

@keyframes mv2to1 {
    0% {
        transform: translateX(-50%) translateX(-120%) translateY(-35%) scale(0.85);
        filter: brightness(90%);
        opacity: 1;
        z-index: 4;
    }
    100% {
        transform: translateX(-50%) translateX(-60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 3;
    }
}

@keyframes mv1to0 {
    0% {
        transform: translateX(-50%) translateX(-60%) translateY(-45%) scale(0.75);
        filter: brightness(85%);
        opacity: 1;
        z-index: 3;
    }
    100% {
        transform: translateX(-50%)  translateY(-53%) scale(0.65);
        filter: brightness(80%);
        opacity: 1;
        z-index: 2;
    }
}


.mv0to12 {
    display: none;
    animation: 0.3s ease-out mv0to12;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv12to11 {
    display: none;
    animation: 0.3s ease-out mv12to11;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv11to10 {
    
    display: none;
    animation: 0.3s ease-out mv11to10;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv10to9 {
    animation: 0.3s ease-out mv10to9;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv9to8 {
    animation: 0.3s ease-out mv9to8;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
}

.mv8to7 {
    animation: 0.3s ease-out mv8to7;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv7to6 {
    animation: 0.3s ease-out mv7to6;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv6to5 {
    animation: 0.3s ease-out mv6to5;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv5to4 {
    animation: 0.3s ease-out mv5to4;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv4to3 {
    animation: 0.3s ease-out mv4to3;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


.mv3to2 {
    animation: 0.3s ease-out mv3to2;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv2to1 {
    animation: 0.3s ease-out mv2to1;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv1to0 {
    animation: 0.3s ease-out mv1to0;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/**
*/

.mv0to1 {
    animation: 0.3s ease-out mv0to1;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv1to2 {
    animation: 0.3s ease-out mv1to2;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv2to3 {
    animation: 0.3s ease-out mv2to3;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv3to4 {
    animation: 0.3s ease-out mv3to4;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
}

.mv4to5 {
    animation: 0.3s ease-out mv4to5;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv5to6 {
    animation: 0.3s ease-out mv5to6;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv6to7 {
    animation: 0.3s ease-out mv6to7;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv7to8 {
    animation: 0.3s ease-out mv7to8;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv8to9 {
    animation: 0.3s ease-out mv8to9;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


.mv9to10 {
    animation: 0.3s ease-out mv9to10;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv10to11 {
    animation: 0.3s ease-out mv10to11;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.mv11to12 {
    animation: 0.3s ease-out mv11to12;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.mv12to0 {
    animation: 0.3s ease-out mv12to0;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* At the top level of your code */
@media screen and (max-width: 950px) {
    .carousel-image {
        width: 160px;
    }
  }