.slideshow {
    background-size: cover;
    margin: 0;
    background-position:center;
    background-repeat: no-repeat;
    animation: slideshow 15s ease-in-out infinite;
    height:33vw;
    width:100vw !important;
}
.slideshow background-image {
    width: 100%;
    /*height: 100%;*/
    /*mask-image: linear-gradient(to bottom, black 80%, transparent 100%);*/
    /*-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); */

}

@keyframes slideshow {
    /*0% { background-image: url('../images/SlideShowSaddlebackSunrise.jpg'); }*/
    /*33% { background-image: url('../images/SlideShowRepeaterMountaintop.jpg'); }*/
    /*66% { background-image: url('../images/SlideShowAlphaMoutaintop.jpg'); }*/
    /*100% { background-image: url('../images/SlideShowSaddlebackSunrise.jpg'); }*/

    0% { 
        background-image: url('../images/SlideShowSaddlebackSunrise.jpg'); 
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); /* For cross-browser compatibility */
    }
    33% {
        background-image: url('../images/SlideShowRepeaterMountaintop.jpg');
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); /* For cross-browser compatibility */
    }
    66% { 
        background-image: url('../images/SlideShowAlphaMoutaintop.jpg'); 
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); /* For cross-browser compatibility */
    }
    100% { 
        background-image: url('../images/SlideShowSaddlebackSunrise.jpg'); 
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); /* For cross-browser compatibility */
    }