* {
    padding: 0;
    margin: 0;
}

.slider-holder {
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
       
.image-holder {
    width: 300%;
    height: 100vh;
    clear: both;
    position: relative;
    display: flex;
           
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}
       
.slider-image1 {
    width: 33.33%;
    height: 100%;
    background: url(../images/slider01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}       

.slider-image2 {
    width: 33.33%;
    height: 100%;
    background: url(../images/slider02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}       

 .slider-image3 {
    width: 33.33%;
    height: 100%;
    background: url(../images/slider03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}       
       
#slider-image-1:target ~ .image-holder {
    left: 0px;
}
       
#slider-image-2:target ~ .image-holder {
    left: -100%;
}
      
#slider-image-3:target ~ .image-holder {
    left: -200%;
}
       
.button-holder {
    position: absolute;
    left: 10%;
    bottom: 30px;
}
       
.slider-change {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: rgb(212, 212, 212);
}

.slider-change:hover {
    height: 12px;
    width: 12px;
    border-radius: 6px;
    background-color: white;
}