.slideshow-container {
    align-self     : center;
    width          : 80%;
    position       : relative;
    height         : 40rem;
    display        : flex;
    flex-direction : row;
}

.slide {
    align-self : center;
    height     : 100%;
    width      : 100%;
    display    : none;
    background : #E0E0E0E0;
}

.slide a {
    display : flex;
    width   : 100%;
}

.slide img {
    margin     : auto;
    /* 100% funktioniert nicht. Danke Chrome... */
    max-width  : 99.9%;
    max-height : 99.9%;
}

/*noinspection CssUnusedSymbol*/
.slide-active {
    display : flex;
}

.prev, .next {
    cursor        : pointer;
    position      : absolute;
    top           : 50%;
    width         : auto;
    margin-top    : -2.5rem;
    padding       : 0.7rem;
    color         : white;
    font-weight   : bold;
    font-size     : xx-large;
    transition    : 0.6s ease;
    border-radius : 0 1.4rem 1.4rem 0;
    user-select   : none;
    line-height   : 110%;
}

.next {
    right         : 0;
    border-radius : 1.4rem 0 0 1.4rem;
}

.prev:hover, .next:hover {
    background-color : rgba(0, 0, 0, 0.9);
}

.caption {
    color          : #F2F2F2;
    font-size      : medium;
    padding        : 1.5rem 1.8rem;
    position       : absolute;
    bottom         : 1.5rem;
    width          : 95%;
    text-align     : center;
    display        : flex;
    flex-direction : column;
}

.caption > span {
    align-self    : center;
    background    : rgba(0, 0, 0, 0.7);
    padding       : 0.5rem;
    border-radius : 0.7rem;
}

.numbertext {
    color         : #F2F2F2;
    font-size     : small;
    padding       : 0.5rem 0.8rem;
    position      : absolute;
    top           : 0;
    background    : rgba(0, 0, 0, 0.9);
    border-radius : 1.5rem;
    margin        : 1rem;
}

/* The dots/bullets/indicators */
.dot {
    cursor           : pointer;
    height           : 1rem;
    width            : 1rem;
    margin           : 0 0.2rem;
    background-color : #BBB;
    border-radius    : 50%;
    display          : inline-block;
    transition       : background-color 0.6s ease;
}

.dot-active, .dot:hover {
    background-color : #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name     : fade;
    -webkit-animation-duration : 1.5s;
    animation-name             : fade;
    animation-duration         : 1.5s;
}

@-webkit-keyframes fade {
    from {
        display : none;
        opacity : .4
    }
    to {
        display : flex;
        opacity : 1
    }
}

@keyframes fade {
    from {
        opacity : .4
    }
    to {
        opacity : 1
    }
}