.slider {
	width: 100%; height: 100%; overflow: hidden; position: relative;
}
.slider__slides {
	transition:transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1), transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); width: 400%; height: 100%; position: relative; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); will-change: transform;
}
[data-pos='0'].slider .slider__slides {
	transform: translateX(0%); -webkit-transform: translateX(0%);
}
[data-pos='1'].slider .slider__slides {
	transform: translateX(-25%); -webkit-transform: translateX(-25%);
}
[data-pos='2'].slider .slider__slides {
	transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
[data-pos='3'].slider .slider__slides {
	transform: translateX(-75%); -webkit-transform: translateX(-75%);
}
.slider__slide {
	width: 25%; height: 100%; float: left;
}
.slider__dots {
	left: 50%; bottom: 1.5em; display: flex; position: absolute; transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.slider__dot {
	background: rgb(204, 0, 0); margin: 0px 0.5em; border-radius: 100px; width: 1em; height: 1em; display: block;
}
.slider__indicator {
	background: rgb(204, 0, 0); margin: 0px 0.5em; border-radius: 100px; width: 1em; height: 1em; display: block;
}
.slider__indicator {
	background: white; width: auto; position: absolute;
}
.slider__indicator--left {
	transition:left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.1s; -webkit-transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.slider__indicator--right {
	transition:left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.1s, right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15); -webkit-transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
[data-pos='0'].slider .slider__indicator {
	left: 0em; right: 6em;
}
[data-pos='1'].slider .slider__indicator {
	left: 2em; right: 4em;
}
[data-pos='2'].slider .slider__indicator {
	left: 4em; right: 2em;
}
[data-pos='3'].slider .slider__indicator {
	left: 6em; right: 0em;
}
.center {
	height: 335px; display: flex; justify-content: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-align-items: center;
}
.slider {
	max-height: 305px; max-width: 1040px; box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}