.slider {
    display: block;
    line-height: 0;
    font-size: 0;
    position: relative;
    margin-top: 30px;
}

.slider-display-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-element {
    max-height: 800px;
    max-width: 100%;
}


    .slider figcaption {
        display: block;
        width: 100%;
    }

        .slider figcaption a {
            display: block;
            transition: 1s opacity;
            float: left;
            width: 25%;
            padding: 15px;
        }

            .slider figcaption a.selected {
                opacity: 1;
            }

            .slider figcaption a img{
                width: 100%;
                height: auto;
            }

            .slider figcaption a:hover {
                opacity: 1;
            }

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px 20px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    background: transparent;
}

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarouselContainer {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

        .MultiCarousel .MultiCarousel-inner .item img {
            margin: 0;
            box-sizing: border-box;
            border: 2px solid transparent;
        }

        .MultiCarousel .MultiCarousel-inner .item .play-button-overlay-small {
            margin: 5px;
            width: calc(100% - 30px);
            height: calc(100% - 30px);
            position: absolute;
            z-index: 996;
            top: 10px;
            left: 10px;
            background: var(--black);
            opacity: 0.33;
        }

        .MultiCarousel .MultiCarousel-inner .item.selected .play-button-overlay-small {
            display: none;
        }

    .MultiCarousel .leftLst, .MultiCarousel .rightLst {
        position: absolute;
        width: 55px;
        cursor: pointer;
        display: block;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        height: calc(100% - 40px);
        top: 0;
        line-height: 100%;
        vertical-align: middle;
        color: white;
        text-align: right;
        border: 0;
        opacity: 0.4;
    }

.slider .MultiCarousel .leftLst, .slider .MultiCarousel .rightLst {
    top: 15px;
}

    .MultiCarousel .leftLst {
    left: 0;
    transform: rotate(180deg);
}

    .MultiCarousel .rightLst {
        right: 0;
    }

        .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over {
            display: none;
        }

        .MultiCarousel .leftLst:not(.over):hover, .MultiCarousel .rightLst:not(.over):hover {
            opacity: 1;
        }

        .MultiCarousel .leftLst div, .MultiCarousel .rightLst div {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
        }

@media handheld, only screen and (max-width: 767px) {
   


    .MultiCarousel .leftLst, .MultiCarousel .rightLst {
        height: calc(100% - 20px);
        width: 20px;
    }

        .MultiCarousel .leftLst svg, .MultiCarousel .rightLst svg {
            width: 6px;
        }

    .MultiCarousel {
        padding: 10px 20px;
    }

    .slider figcaption a {
        padding: 5px;
    }

    .slider-display-block {
        width: 100%;
        height: auto;
    }

    .main-element {
        max-height: initial;
        width: 100%;
    }
}



/*Updated video with buttons*/


.MultiCarousel .MultiCarousel-inner .item .overlay {
    position: absolute;
    z-index: 996;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background: var(--black);
    opacity: 0.33;
}

.MultiCarousel .MultiCarousel-inner .item.selected .overlay {
    display:none;
}


.MultiCarousel .MultiCarousel-inner .item.selected img {
    opacity: 1;
    border: solid 2px #004c96;
}

.slider figcaption a {
    position: relative;
}




@media handheld, only screen and (max-width: 768px) {
    .MultiCarousel {
        border: none;
    }

   
    .MultiCarousel .MultiCarousel-inner .item .overlay {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        top: 5px;
        left: 5px;
    }
}