/*
Minify this after your changes and put it in css/hpcss-slider.css
if you dont have any minifier: https://cssminifier.com/
*/

.slider-container {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.slider {
  white-space: nowrap;
  transition: 0.8s;
}

.slide-item{
  display: inline-block;
  vertical-align: top;
  position:relative;
  width:100%;
}

.slide-item img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  object-fit: cover;
}

/* bullets */
.bullets {
  position: absolute;
  bottom: 0;
  padding-bottom: 10px;
  width: 100%;
}

.bullets > a {
  display: inline-block;
  width:30px;
  height:30px;
  background: rgba(255, 255, 255, 1);
  transition: 0.3s;
}

.bullets > a+a,.slider-container >s:target ~ .bullets >* {background: rgba(255, 255, 255, 0.5);}
.bullets > a:hover {background: rgba(255, 255, 255, 0.7);}

#s1:target ~ .bullets >*:nth-child(1),
#s2:target ~ .bullets >*:nth-child(2),
#s3:target ~ .bullets >*:nth-child(3),
#s4:target ~ .bullets >*:nth-child(4),
#s5:target ~ .bullets >*:nth-child(5),
#s6:target ~ .bullets >*:nth-child(6){
  background: rgba(255, 255, 255,   1);
}

/* active */
#s1:target ~ .prev-next-container >*:nth-child(1),
#s2:target ~ .prev-next-container >*:nth-child(2),
#s3:target ~ .prev-next-container >*:nth-child(3),
#s4:target ~ .prev-next-container >*:nth-child(4),
#s5:target ~ .prev-next-container >*:nth-child(5),
#s6:target ~ .prev-next-container >*:nth-child(6){
  visibility: visible;
}

/* slide effect */
#s1:target ~ .slider {transform: translateX(0%);}
#s2:target ~ .slider {transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%);}
#s4:target ~ .slider {transform: translateX(-300%);}
#s5:target ~ .slider {transform: translateX(-400%);}
#s6:target ~ .slider {transform: translateX(-500%);}

/* text */
.slide-item p{
  font-size: 1.6em;
  transform: translate(0%, 0%);
  margin-top: 35%;
  margin-bottom: 50px;
}

.slider .slide-item div{
  margin-top: 15px;
  font-size: 3em;
  transform: translate(0%, 0%);
}

.slider-container a{
  border-radius: 50%;
  margin: 0 3px;
}

/* arrows */
.prev-next-container {
  position: absolute;
  top: 50%;
  width: 100%;
}

.prev-next-container > div+div {
  visibility: hidden;
}

.prev-next-container a {
  background:#fff;
  position:absolute;
  width:60px;
  height:60px;
  opacity:0.7;
  transition:0.3s;
  transform:translateY(-50%);
  left:0;
}

.prev-next-container a:hover {
  opacity: 1;
}

.prev-next-container a+a {
  left: auto;
  right: 0;
}

.slider-prev:before,.slider-next:before{
  top: 11px;
  position:absolute;
  content:"";
  border:18px solid transparent;
  border-top-color: #000000c7;
}

.slider-prev:before{
  transform: rotate(90deg);
  display: block;
}

.slider-next:before{
  right:0;
  transform: rotate(270deg);
}

@media only screen and (max-width: 768px) {
  .slide-item p{
    visibility: hidden;
  }
  .slider .slide-item div{
    font-size: 1.4em;
  }
}