.slides {
    float: left;
    width: 100%;
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
	.slides div {
		position: absolute;
        transition: opacity 1s, z-index .2s 1s;
        opacity: 0;
		z-index: -1
		top: 0;
		height: 100%;
		width: 100%;
		background-color: #333;
		display: flex;
		justify-content: center;
		align-items: center;
		
		transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
	.slides div.active {
        z-index: 1;
      left: 0%;
        animation: animate 1s forwards;
        transition: opacity 1s, z-index .2s 1s;
        opacity: 1;
    } 




 .slide-controller li {
    cursor: pointer;
    padding: 0 0.5rem;
    width: 8px;
    height: 8px;
    background-color: transparent;
    border-radius: 50px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
     
}
 .slide-controller li.active {

     transition: all 0.4s;
}

li#bordered {
    padding: 0 0rem;
    border: 1px solid white;
    position: absolute;
    left: 3%;
}

.dot {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 40px;
    position: absolute;
    left: 30%;
    top: 30%;
}

	ul.slide-controller {
		display: none;
				align-items: center;
		list-style: none;
		position: absolute;
		bottom: 32px;
			left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
		margin: 0;
		padding: 0;
		color: #fff;
        z-index: 2;
	}
.arrow-button-right,
.arrow-button-left {
			border: none;
			background-color: transparent;
		  padding: 0;
	cursor: pointer;
}
.arrow-button-right{
				position: absolute;
		top:calc(50% - 25px);
			right: 15px;
}
.arrow-button-left{
				position: absolute;
		top:calc(50% - 25px);
			left: 15px;
}
	 .arrow-button-right img,
	 .arrow-button-left img{
		 height: 50px;
		 width: auto;

	 }
	 .arrow-button-right:focus,
	 .arrow-button-left:focus{
    outline: none;
	 }