/*https://codepen.io/SitePoint/pen/zqVGQK*/
#slides {
    position: relative;
    height: auto;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

    #slides .slide {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
    }

        #slides .slide.showing {
            opacity: 1;
            z-index: 2;
        }



/*
non-essential styles:
just for appearance; change whatever you want
*/

    #slides .slide {
        font-size: 40px;
        padding: 40px;
        box-sizing: border-box;
        background: #333;
        color: #fff;
    }

        #slides .slide:nth-of-type(1) {
            background: red;
        }

        #slides .slide:nth-of-type(2) {
            background: orange;
        }

        #slides .slide:nth-of-type(3) {
            background: green;
        }

        #slides .slide:nth-of-type(4) {
            background: blue;
        }

        #slides .slide:nth-of-type(5) {
            background: purple;
        }

/*https://codepen.io/keikaavousi/pen/dybXPzK*/
/*#main-image,*/
#thumbnails img {
    box-shadow: 0px 2px 2px 0px #b8b8b8;
    border-radius: 1px;
}

/** {
    transition: all 0.5s ease;
}*/

#thumbnails {
    text-align: center;
}

    #thumbnails img {
        width: 50px;
        height: 35px;
        margin: 10px;
        cursor: pointer;
    }

@media only screen and (max-width: 580px) {
    #thumbnails img {
        width: 30px;
        height: 20px;
    }
}

#thumbnails img:hover {
    transform: scale(1.05);
}

/*#main-image {*/
    /*width: 50%;
    height: 400px;
    object-fit: cover;
    display: block;
    margin: 20px auto;*/
/*}*/

/*@media only screen and (max-width: 480px) {
    #main-image {*/
        /*width: 100%;*/
    /*}
}*/

/*.hidden {
    opacity: 0;
}*/