.header-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-width: 888px;
  height: 280px;
  margin: 0 auto;
  background-color: transparent; 
}
.header-slider ul {
  width: 100%; z-index: 50 !important;
  height: 100%; position: relative;
  padding: 0; 
  background-color: #b066ee;
} 
.header-slider ul li {
  height: 100%; 
  float: right;
}

.header-slider ul .slide {
  width: 100%;
  height: 100%;
}
.header-slider ul .test-1 {
  background-color: #0d81ff;
}
.header-slider ul .test-2 {
  background-color: #0ff713;
}
.header-slider ul .test-3 {
  background-color: #ffff33;
}
.header-slider .slide-arrows-container {
  position: absolute;
  bottom: 40%;
  width: 100% !important; 
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.header-slider .slide-arrows-container .slide-arrow {
  background-image: none;
  background-color: transparent;
  width: 54.55px; 
  height: 54.55px;
  cursor: pointer;
}
.header-slider .slide-arrows-container .slide-arrow:before, .header-slider .slide-arrows-container .slide-arrow:after {
  content: "";
  position: absolute;
  height: 5px;
  width: 20px;
  pointer-events: none;
  background: #e7e7e7;
}
.header-slider .slide-arrows-container .slide-arrow:after {
  top: 19px;
  border-radius: 5px;
}
.header-slider .slide-arrows-container .slide-arrow:before {
  bottom: 19px;
  border-radius: 5px;
}
.header-slider .slide-arrows-container .left-arrow {
  position: relative; z-index: 55 !important;
  left: 10px;
  float: left;
}
.header-slider .slide-arrows-container .left-arrow:before {
  transform: rotate(56deg); 
  left: 0;
}
.header-slider .slide-arrows-container .left-arrow:after {
  transform: rotate(-56deg);  
  left: 0;
}
.header-slider .slide-arrows-container .right-arrow {
  position: relative; z-index: 55 !important; 
  right: 10px;
  float: right;
}
.header-slider .slide-arrows-container .right-arrow:before {
  transform: rotate(304deg); 
  right: 0;
}
.header-slider .slide-arrows-container .right-arrow:after {
  transform: rotate(-304deg); 
  right: 0;
}
.header-slider ul:hover ~ .slide-arrows-container {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.header-slider .slider-nav {
  position: absolute;
  bottom: 0;
}
.header-slider .slider-nav .nav-bullet {
  position: relative;
  bottom: 10px;
  display: block;
  float: left;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid white;
  width: 11px;
  height: 11px;
  margin-right: 5.5px;
}
.header-slider .slider-nav .nav-bullet.active {
  background-color: white;
}