/* Required to hold the caption, or any closest parent selector to  .osx-slick-caption */
.slick-slide {
    position: relative;
}

/* Add some space below the carousel */
.slick-slider {
    margin-bottom: 1.625em;
}

/* Customise left and right arrows */
.slick-prev:before, .slick-next:before {
    color: black;
}

/* Text caption overlay for new items */
.osx-slick-caption {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 6px;
    margin: 6px;
    max-width: 10vw;
    min-width: 10vw;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0.75em;
}

/* Text caption overlay for screenshots */
.osx-slick-caption-screenshot {
    position: relative;
    bottom: 0;
    color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 6px;
    margin: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0.75em;
}


.osx-slick-slide:hover .osx-slick-caption {
    visibility: visible!important;
    opacity: 1;
    cursor: pointer;
    pointer-events: none;
    z-index: 2;
}

/* Carousel image for new items */
img.osx-slick-image {
    border: 1px solid #ddd;
    padding: 6px;
    margin: 6px;
    max-width: 10vw;
}

/* Carousel image for screenshots */
img.osx-slick-image-screenshot {
    padding: 6px;
    margin: 6px;
}

div.slick-screenshots {
    width: 500px;
    float: right
}

div.threejs-container {
    display: block;
    height: 500px;
}

@media (min-width: 651px) {
    div.threejs-container, div.threejs-container > canvas {
        width: 500px;
        float: right;
    }
}

@media (max-width: 650px) {
    div.threejs-container, div.threejs-container > canvas {
        width: 100%;
        float: none;
    }
}