body{
background-color: darkgoldenrod;
text-align: center;
}

.slides{
    width: 99%;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
    position: relative ;
}

.slides img{
    width:98%;
    height: auto;
 
    
    display: none ;
    border: 5px solid black;
    border-radius: 2%;
}

.slides button  {
    position: absolute ;
    top: 55%;
    
    font-size:100%;
    padding: 3% 6%;
    background-color: darkgoldenrod;
    opacity: .6;
    color: black;
    border: none;
    cursor: pointer;
}

.prev{
    left:2% ;    
}
.next{
    right: 2%;
}
.optie button{
    position: absolute ;
    top: 70%;
    transform: translateY(00%);
    font-size:100%;
    padding: 3% 6%;
    background-color: darkgoldenrod;
    opacity: .6;
    color: black;
    border: none;
    cursor: pointer; 
}
.km{ 
    
    right : 2%;
      
    display: none; 
    transform: translatey(100%);

}
.fotonr{
    position: absolute;
    top: 0;
    transform: translatey(-80%);
    left: 0cm;   
    width: 10%;
    height: 10%;
    padding: 10px 10px;
    font-size: 200%;
    background: none;
    border: none;
    opacity: 1;
}
.meterng{
    position: absolute;
    bottom: 0;
    transform: translatey(+65%);
    left: 3%;   
    width: 95%;
    height: 20%;
    font-size: 120%;
    background: darkgoldenrod ;
    border: none;
    opacity: .9;
}
.labelor, .labelnr{
    position: absolute;    
    display: none;
    padding: 3% 3%;
    right: 16%;   
    width: 25%;
    height: 5%;
    font-size: 120%;
    background: darkgoldenrod ;
    color: black ;
    border: none;
    opacity: .7;
}

.labelor{
    top: 50%;
}
.labelnr{
    top: 65%;
}


img.displaySlide{
    display: block;
    animation-name: fade;
    animation-duration: 0s;
}
@keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
}