.carousel-item {
    opacity: 0;
    display: none;
}

.carousel-item.active {
    opacity: 1;
    display: inherit;
    animation-name: carouselFadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}

.carousel-indicators > button:hover {
    transform: scale(1.1);
}

.carousel-indicators > button {
    cursor: pointer;
    background-color: var(--main-colour);
    border: 1px solid var(--main-colour);
    border-radius: 25%;
    opacity: 0.5;
    min-width: 25px;
}

.carousel-indicators > button.active {
    opacity: 1;
}

.carousel-control-prev {
    cursor: pointer;
    background-color: var(--main-background-colour);
    border: none;
    background-image: url('/static/images/left-arrow.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    width: 40px;
}

.carousel-control-next {
    cursor: pointer;
    background-color: var(--main-background-colour);
    border: none;
    background-image: url('/static/images/left-arrow.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(180deg);
    height: 40px;
    width: 40px;
}

.carousel-control-prev span,
.carousel-control-next span {
    display: none
}

.carousel-control-next:hover {
    transform: scale(1.1) rotate(180deg);
}
.carousel-control-prev:hover {
    transform: scale(1.1);
}

@keyframes carouselFadeInOpacity {
	0% {
		opacity: 0.2;
    }
	100% {
		opacity: 1;
	}
}