@charset "utf-8";
/* CSS Document
https://www.nieknijland.nl/blog/make-a-responsive-carousel-with-just-css

*/
.list {
  display: flex;
  gap: 8px;
  padding: 16px;

  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.item {
  flex-shrink: 0;
  width: 80%;
  height: 50vh;

 /* background-color: #FFF;*/

  scroll-snap-align: center;
}

.contentSlide {
  display: flex;
  /*	align-items: center;*/
  justify-content: center;
  height: 100%;
	color: #fff;
  font-style: normal !important;
  font-family: sans-serif;
  font-size: 34px;
  font-weight: bold;
}

.list {
  /* ... */
  
  /* Hide scrollbar in Firefox */
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
  display: none;
}

.list-wrapper {
  position: relative;
}

.buttonSl {
  position: absolute;
  top: 50%;
color: #fff;
  width: 3rem;
  height: 3rem;
		font-style: normal !important;
	background-color: transparent;

 transform: translateY(-50%); 
}

.button--previous {
  left: 1.5rem;
	background-color: transparent;
	border: none;
	font-size: 40px;
	font-weight: bolder;
	font-style: normal !important;

  transform: rotate(180deg); 
}

.button--next {
  right: 1.5rem;
background-color: transparent;
	border: none;
	font-size: 40px;
	font-weight: bolder;
	font-style: normal !important;
}