/* plugin CSS */

div.carousel {
	position: relative;
	height: 100%; width: 100%;
}

div.carousel > .scroll {
	position: relative;
	height: 100%; width: 100%;
	pointer-events: auto;
	overflow: auto hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

div.carousel > .scroll::-webkit-scrollbar {
  display: none;
}

div.carousel > .scroll > .container {
	position: relative;
	height: 100%; width: 100%;
	display: grid;
	grid-template-columns: repeat(4, auto);
}


div.carousel .scroll-panel {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

div.carousel .scroll-panel::-webkit-scrollbar {
  display: none;
}

div.carousel .scroll-button {
	background: rgba(0,0,0,.4);
	position: absolute;
	top: 50%;
	height: 60px;
	width: 60px;
	border-radius: 30px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 60%;
	cursor: pointer !important;
	opacity: 0;
	pointer-events: none;
    transition: ease-in-out .3s;
	transform: translatey(-50%);
}

div.carousel .scroll-button:hover {
	width: 80px;
	height: 80px;
	border-radius: 40px;
}

div.carousel .scroll-button.enabled {
	opacity: 1;
	pointer-events: auto;
}

div.carousel .scroll-button.left {
	left: 20px;
	background-image: url(./img/arrow-left.svg);
}

div.carousel .scroll-button.left:hover {
	left: 10px;
}

div.carousel .scroll-button.right {
	right: 20px;
	background-image: url(./img/arrow-right.svg);
}

div.carousel .scroll-button.right:hover {
	right: 10px;
}