body {
    margin: 0;
    padding: 0;
}

.controls:hover, .large-image:hover ~ .controls {
    opacity: 1;
}

.controls {
    opacity: 0;
    position: absolute;
    top: 35%;
    transition: all .15s ease-in-out;
    width: 100%;
}

    .controls .next-button, .controls .prev-button {
        background-color: rgba(0,0,0,.4);
        border-radius: 5px;
        cursor: pointer;
        height: 30px;
        outline: 0;
        padding: 15px;
        position: absolute;
        transition: all .15s ease-in-out;
        width: 30px;
    }

        .controls .next-button:hover, .controls .prev-button:hover {
            background-color: rgba(0,0,0,.5);
        }

    .controls .prev-button {
        left: 10px;
    }

    .controls .next-button {
        right: 10px;
    }

        .controls .next-button.inactive, .controls .prev-button.inactive {
            background-color: rgba(123,123,123,.6);
        }

            .controls .next-button.inactive:hover, .controls .prev-button.inactive:hover {
                background-color: rgba(123,123,123,.7);
            }

    .controls svg {
        fill: #fff;
    }

.thumbnails {
    cursor: grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

    .thumbnails > div.active {
        border: 2px solid #fff;
    }