#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(https://en.04.cadwork.com/wp-content/plugins/cadcom-carrousel/assets/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;
} @media screen and (max-width: 950px) {
.carousel-image {
width: 160px;
}
}