#carousel {
width: 100%;
height: 60vh;
position: relative;
top: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; 
}
.carousel-video {
top: 5%;
bottom: 5%;
height: 90%; 
position: absolute;
left: 50%;
}
#prevArrow, #nextArrow {
border: none;
outline: none;
color: inherit;
background-color: inherit;
position: relative;
bottom: 0;
}
#prevArrow img, #nextArrow img{
width: 70%;
height: 70%;
}
#prevArrow:hover, #nextArrow:hover {
color: inherit;
background-color: inherit;
position: relative; 
bottom: 0;
}
#prevArrow {
margin-right: 30%;
}
#nextArrow {
margin-left: 30%;
}
#homeButton {
position: absolute;
bottom: 6%;
width: auto;
}
#carousel-controls {
background-color: transparent;
display: flex;
justify-content: center;
}
#carousel-video-0 {
transform: translateX(-50%) translateX(-120%) scale(0.6);
filter: brightness(40%);
z-index: 1;
}
#carousel-video-1 {
transform: translateX(-50%) translateX(-80%) scale(0.8);
filter: brightness(65%);
opacity: 1;
z-index: 2;
}
#carousel-video-2 {
transform: translateX(-50%) scale(1);
filter: brightness(100%);
opacity: 1;
z-index: 3;
}
#carousel-video-3 {
transform: translateX(-50%) translateX(80%) scale(0.8);
filter: brightness(65%);
opacity: 1;
z-index: 2;
}
#carousel-video-4 {
transform: translateX(-50%) translateX(120%) scale(0.6);
filter: brightness(40%);
opacity: 1;
z-index: 1;
}
#carousel-video-5 {
transform: translateX(-50%) scale(1.5);
filter: brightness(40%);
opacity: 0;
z-index: 1;
}
#carousel-video-0, #carousel-video-1, #carousel-video-2, #carousel-video-3, #carousel-video-4, #carousel-video-5{
width: auto;
}
.hidden {
display: none;
} .mv0to5 {
animation: 0.3s ease-out mv0to5;
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;
}
.mv5to0 {
animation: 0.3s ease-out mv5to0;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes mv0to5 {
0% { transform: translateX(-50%) translateX(-60%) scale(0.6); filter: brightness(40%); opacity: 1; z-index: 2}
20% { opacity: 0; }
100% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1}
}
@keyframes mv5to4 {
0% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1 }    
80% { opacity: 0;}
100% { transform: translateX(-50%) translateX(60%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index: 2 }
}
@keyframes mv4to3 {
0% { transform: translateX(-50%) translateX(60%) scale(0.6); filter: brightness(40%); opacity: 1; z-index: 2; }
100% { transform: translateX(-50%) translateX(40%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
}
@keyframes mv3to2 {
0% { transform: translateX(-50%) translateX(40%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
30% { opacity: 1; z-index: 4;}
100% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity: 1; z-index: 4; }
}
@keyframes mv2to1 {
0% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity: 1; z-index: 4; }    
100% { transform: translateX(-50%) translateX(-40%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
}
@keyframes mv1to0 {
0% { transform: translateX(-50%) translateX(-40%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }        
100% { transform: translateX(-50%) translateX(-60%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
}
@keyframes mv0to1 {    
0% { transform: translateX(-50%) translateX(-60%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
100% { transform: translateX(-50%) translateX(-40%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }    
}
@keyframes mv1to2 {
0% { transform: translateX(-50%) translateX(-40%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
30% { opacity:1; z-index:4;}
100% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity:1; z-index:4; }    
}
@keyframes mv2to3 {    
0% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity:1; z-index:4; }
100% { transform: translateX(-50%) translateX(40%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
}
@keyframes mv3to4 {    
0% { transform: translateX(-50%) translateX(40%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
100% { transform: translateX(-50%) translateX(60%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
}
@keyframes mv4to5 {    
0% { transform: translateX(-50%) translateX(60%) scale(0.6);  filter: brightness(40%); opacity:1; z-index:2 }
20% {opacity:0;}
100% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1 }
}
@keyframes mv5to0 {
0% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1}    
80% {opacity:0;}
100% { transform: translateX(-50%) translateX(-60%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index:2}    
}
@media only screen and (max-width: 768px) {
selector {
overflow-x: hidden;
}
#carousel-controls {
display: none;
}
#carousel {
top: 20px;
height: 20vh;
}
#carouselhome
{
height: 250px;
}
.carousel-video {
max-width: 60%;
}
}