.slider {
	margin: 0 auto;
	position: relative;
	max-width: 1170px;
	max-height: 700px;
	margin-top: 30px;
}

.slider>img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20%;
	height: auto;
	transition: transform .5s;
	transform: translate(-50%, -50%)scale(1);
	z-index: 0;
}

.slider>img.left, .slider>img.center, .slider>img.right {
	display: inline-block;
	opacity: 1;
}

.slider>img.left {
	transform: translate(-155.25%, -50%);
	z-index: 0;
}

.slider>img.center {
	z-index: 2;
	transform: translate(-50%, -50%) scale(1.1);
}

.slider>img.right {
	transform: translate(55.25%, -50%);
	z-index: 0;
}

.slider>.navContainer {
    width: 49%;
    position: relative;
    display: inline-flex;
    z-index: 500;
    top: 50%;
}

.slider>.navContainer>.leftClass, .slider>.navContainer>.rightClass {
	height: 50px;
	width: 50px;
	background-position-x: 0;
	position: absolute;
	opacity: 1;
	border-radius: 50%;
	background: #63aae2;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.slider>.navContainer>.rightClass {
	right: 0;
}

.slider>.navContainer>.rightClass::before {
	content: "\f054";
	font-family: 'FontAwesome';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
}

.slider>.navContainer>.leftClass {
	left: 0;
}

.slider>.navContainer>.leftClass::before {
	content: "\f053";
	font-family: 'FontAwesome';
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}