.Opening .Image_Opening {
    width: 100%;
    height: 100%;
    
    display: none;
    position: absolute;             /* necessary to stack the images */
    
    animation-name: slide_show_by_opacity;
    animation-fill-mode: forwards;
    animation-duration: 4s;
    
    background-color: var(--background_color_body);
}


@keyframes slide_show_by_opacity {
    from {opacity: 0} 
    to {opacity: 1}
}

/*
 * CSS of SlideShow
 *  - for height and for width is a maximum given
 *      - in landscape mode the image shall be as heigth as possible, but not heigher than the whole screen minus the navigation bar
 *      - in portrait mode the image shall be as width as possible, but not larger than the screen
 *  - if an image has not the same format as the slideshow, than it will be shown centered
 *      - with editing "position:relative" to "Slides_Container" and some other changes the image will be vertical aligned at the top
 */

@media (orientation: landscape) {
    
    .SlideShow.Opening {
        width: 100%;
        max-width: calc( (100vh - var(--navbar_top_row_height) ) / 0.75 );
        height: 100%;
        
        /*max-width: 2400px;*/
        max-height: calc( 2400px * 0.75 );
    }
    
}

@media (orientation: portrait) {
    
    .SlideShow.Opening {
        width: 100%;
        height: 100%;
        max-height: calc( (100vw - var(--navbar_top_row_height) ) * 0.75 );
        
        max-width: 2400px;
        /*max-height: calc( 2400px * 0.75 );*/
    }

}