#houses {
	background-color: #eae7e7;
	caret-color: transparent;
	margin: 0;
}

#carousel {
    width: 100%;
    max-width: 100vw;
    height: 40vh;
    position: relative;
    top: 50%;
    transform: translateY(25%);
    overflow: hidden;
}

.carousel-image {
    height: 20vh;
    min-height: 200px;
    max-height: 200px;
    max-width: 300px;
    min-width: 300px;
    position: absolute;
    left: 50%;
    /* border-radius: 7%; */
    box-shadow: #00000059 0px 5px 15px;
    border: 4px #9b3432 solid;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to left, #30574d, white, #9b3432);
}

#carousel-image-0 {
    transform: translateX(-50%) translateX(-120%) scale(0.6);
    filter: brightness(40%);
    z-index: 1;
}

#carousel-image-1 {
    transform: translateX(-50%) translateX(-80%) scale(0.8);
    filter: brightness(65%);
    opacity: 1;
    z-index: 2;
}

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

#carousel-image-3 {
    transform: translateX(-50%) translateX(80%) scale(0.8);
    filter: brightness(65%);
    opacity: 1;
    z-index: 2;
}

#carousel-image-4 {
    transform: translateX(-50%) translateX(120%) scale(0.6);
    filter: brightness(40%);
    opacity: 1;
    z-index: 1;
}

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

/* FORWARD */
.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;
}

/* BACKWARD */
.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;
}

/* KEY FRAME TO ANINMATE */
@keyframes mv0to5 {
    0% { transform: translateX(-50%) translateX(-120%) 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(120%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index: 2 }
}

@keyframes mv4to3 {
    0% { transform: translateX(-50%) translateX(120%) scale(0.6); filter: brightness(40%); opacity: 1; z-index: 2; }
    100% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
}

@keyframes mv3to2 {
    0% { transform: translateX(-50%) translateX(80%) 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(-80%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
}

@keyframes mv1to0 {
    0% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }        
    100% { transform: translateX(-50%) translateX(-120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
}

@keyframes mv0to1 {    
    0% { transform: translateX(-50%) translateX(-120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
    100% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }    
}

@keyframes mv1to2 {
    0% { transform: translateX(-50%) translateX(-80%) 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(80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
}

@keyframes mv3to4 {    
    0% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
    100% { transform: translateX(-50%) translateX(120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
}

@keyframes mv4to5 {    
    0% { transform: translateX(-50%) translateX(120%) 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(-120%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index:2}    
}

/* ARROW FOR FORWARD AND BACKWARDS */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-150%);
    cursor: pointer;
    z-index: 2;

    font-size: 72px;
    background: -webkit-linear-gradient(#9b3432, #9b3432, #30574d, #30574d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#prev-arrow {
    left: 15px;
}

#next-arrow {
    right: 15px;
}