:root{
	--selected-button-color: rgb(129, 128, 128);
	--selected-button-shadow:0px 0px 2px 2px #6e6e6eb6;
}

.carousel {
	position: relative;
	/* width:100vw; */
	height: 30vh;
    
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	display: flex;
	flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
	/* touch-action: none; */
	
}
.slide-container {
	/* overflow-x: hiden;
    overflow-y: hidden; */
	display: inline;
	font-size: 0;
	white-space: nowrap;
	padding: 0px;
	margin: 0px;
    display: flex;
    /* flex-basis: 100%; */
    flex-shrink: 0;
	width: 100%;
	height: 95%;
	/* stop scrolling while swiping*/
    
	transition: all 0.3s ease-out;
}
.slide {
	font-size: 1rem;
	flex-shrink: 0;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-items: center;
	width: 100%;
	height: 100%;
    max-height: 100%;
	transition: all 0.25s ease-in;
	padding: 0px;
	margin: 0px;
	filter: blur(50%) grayscale(100%);
}

.slide img {
	max-height: 90%;
	max-width: 100%;
	min-height: 90%;
	object-fit: contain;
}

.carousel-arrow{
	font-size: 50px;
	position: absolute;
	color:whitesmoke;
	left:0;
	z-index: 2;
	cursor: pointer;
	filter: opacity(.7);
	font-family: Arial, Helvetica, sans-serif;
	transition: all .25s ease-in-out;
}

.carousel-arrow:hover{
	filter: opacity(1);
	
}
.carousel-arrow-right{
	left: auto;
	right: 0px;
}



.slide-buttons-container {
	/* position:absolute;
    width: 100%; */
    bottom: 0px;
    display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px;
    z-index: 20;
}
.slide-button {
	height: 10px;
	width: 10px;
	background-color: white;
	/* border: 2px solid transparent; */
	box-shadow: 0px 0px 3px 2px #33333354;
	border-radius: 1000px;
	cursor: pointer;
	transition: all 0.5s ease-in;
	scale: 1;
}

.selected-slide {
	filter: blur(0%) grayscale(0%);
    top:0;
}
.selected-button {
	/* border: 2px solid blue; */
	background-color: var(--selected-button-color);
	box-shadow: none;
   
	scale: 1.2;
}

/* remove transition effects while dragging*/
.is-dragging{
	transition: none;
}



@media only screen and (max-width: 600px) {
    .slide-button{
        height: 10px;
        width:10px;
    }

	.carousel-arrow{
		display: none;
	}
}