.images {
    display: flex;
    width: 100%;
    height: 100%;
    transition: 2s;
}

.images img {
    width: 100%;

}

.wrap{
    width: 640px;
    overflow: hidden;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    border-radius: 10px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

#slide-1:target ~.images {
    margin-left: 0px;
}
#slide-2:target ~.images {
    margin-left: -100%;
}
#slide-3:target ~.images {
    margin-left: -200%;
}
#slide-4:target ~.images {
    margin-left: -300%;
}
#slide-5.images ~.images {
    margin-left: -400%;
}

.navigation{
    text-align: center;
    margin-top: -40px;   
}

.navigation a {
    display: inline-block;
    height: 15px;
    width: 15px;
    background-color: whitesmoke;
    font-size: 0px;
    border-radius: 50px;
    margin: 2px;  
    transition: 1s;
}

.navigation a:hover {
    background-color: #666;
}

@media screen and (max-width: 640px){
    .wrap {
        width: 90%;
    }
}