/* Mobile background images here */
.slide1 {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), to(rgba(0, 0, 0, 0.61))), url('../images/slide1-mobile.jpeg');
    background-image: linear-gradient(180deg, transparent 47%, rgba(0, 0, 0, 0.61)), url('../images/slide1-mobile.jpeg');
    background-position: 30% 50%;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
}

.slide2.visible {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.19)), to(rgba(0, 0, 0, 0.19))), url('../images/slide2a-mobile.jpeg');
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.19)), url('../images/slide2a-mobile.jpeg');
    background-position: 0px 0px, 50% 80%;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
}

@media (min-width: 480px) {

    .slide1 {
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(47%, transparent), to(rgba(0, 0, 0, 0.61))), url('../images/slide1.jpg');
        background-image: linear-gradient(180deg, transparent 47%, rgba(0, 0, 0, 0.61)), url('../images/slide1.jpg');
        background-position: 0px 0px, 50% 35%;
        background-size: auto, cover;
        background-repeat: repeat, no-repeat;
    }

    .slide2.visible {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.19)), to(rgba(0, 0, 0, 0.19))), url('../images/slide2a.jpg');
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.19)), url('../images/slide2a.jpg');
        background-position: 0px 0px, 50% 80%;
        background-size: auto, cover;
        background-repeat: repeat, no-repeat;
    }

}