body {
    padding: 0;
    margin: 0;
    background-color: black;
    color: white;
}

.slideshow {
    display: grid;
    grid-template-rows: 9fr 1fr;
    width: 100vw;
    height: 100vh;
}


.main-image {
    grid-area: 1 / 1 / 3 / 2;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.next-image {
    grid-area: 1 / 1 / 3 / 2;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    opacity:0;
    z-index:-1;
}

.left-control {
    position: absolute;
    width: 36px;
    height: 34px;
    top: 40%;
    background: url('img/slideshow_sprite.png') 0px -36px;
    opacity: 0.5;
}

.right-control {
    position: absolute;
    width: 36px;
    height: 34px;
    top: 40%;
    right: 0;
    background: url('img/slideshow_sprite.png') 0px -72px;
    opacity: 0.5;
}

.left-control:hover, .right-control:hover {
    opacity: 1;
}

.thumbnails {
    grid-area: 2 / 1;
    display:grid;
    grid-template-columns: repeat(8, 1fr);
    position:relative;
}

.thumbnails .thumbnail{
    border: 2px solid black;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-align:center;
    background-color: black;
    
}

.thumbnail span{
    color:white;
    text-shadow: 2px 2px 3px black;
    font-size: 2rem;
    text-align: center;
    font-family: Calibri;
    opacity: .5;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.thumbnail.active {
    border: 2px solid white;
}