
/* BS Custom */
.slick-slide {
    overflow: hidden;
}

/* New slick.js 1.8.1 adds extra div wrapper arround the slide. so this is needed */
.slick-slide > div,
.slick-slide div.slidechild
{
    position: relative;
    height: 100%;
}

.slick-initialized.slick-slider {
    display: block;
}

.slick-initialized .slimage_container, .slick-initialized .slvideo_container {
    opacity: 1 !important;
}




/* Arrow Query
--------------------*/
@media screen {
    .slick-arrow {
        --btn-size: 30px;
        width: var(--btn-size);
        height: var(--btn-size);
        border-radius: calc(var(--btn-size) / 2);
        overflow: hidden;
        text-indent: -999999px;
        padding: 0;
        margin: 0;
        z-index: 1;
        background: chartreuse;
    }

    .slick-arrow:hover,
    .slick-arrow:focus {
        background-color: #ff0;
        outline: none;
    }

    .slick-arrow:hover:before,
    .slick-arrow:focus:before
    {
        opacity: 1;
    }

    .slick-arrow:before
    {
        line-height: var(--btn-size);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg height='512px' id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpolygon points='160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 '/%3E%3C/svg%3E");        background-size: 80%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .slick-prev:before {
        transform: rotate(-180deg);
    }

    .slick-prev { left: 0 }
    .slick-next { right: 0 }
}

/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .slick-arrow {
        --btn-size: 40px;
    }
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
    .slick-arrow {
        --btn-size: 50px;
    }


    .slick-prev { left: -25px }
    .slick-next { right: -25px }
}

/* Arrow Query ends
--------------------*/

/* Dots
--------------*/
@media screen {
    .slick-dots {
        bottom: 10px;
        display: flex;
        justify-content: center;
        margin: 0 50%;
        width: auto;
        transform: translateX(-50%);
    }
    .slick-dots li {
        margin: 0 5px;
    }
    .slick-dots li button {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .slick-dots li button:before {
        color: chartreuse;
        content: "";
        width: 10px;
        height: 10px;
        -webkit-font-smoothing: none;
        background: none;
        opacity: 0.95;
        border: 3px solid chartreuse;
        border-radius: 10px;
        transform: rotate(45deg);
        transform-origin: center;
    }

    .slick-dots li.slick-active button:before {
        color: #fff;
        background-color: chartreuse;
        opacity: 1;
    }
}
/* Dots Ends
--------------*/





/*BS custom */
.slimage_container,
.slvideo_container {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: static;
    height: 100%;
}

.slick-track .slick-slide img,
.slick-track .slick-slide picture {
    position: absolute ;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    height: auto;
    width: auto;
    z-index: 1;
}

div.slick-slide .mejs__container {
    width: 100%;
    height: 100% !important;
}

.fullfill.slick-slide img,
.fullfill.slick-slide picture {
    max-width: none;
}

.fullfill.slick-slide .slimage_container > .image_container {
    position: absolute;
}

/* play with this scale value to hide other element on youtube video */
.mejs__container iframe {
    transform: scale(1.2);
}

/* think it reduces flikering of last/first slide image * /
.slimage_container {
    position: relative;
    background-color: #fff;
}

.slick-slide .slimage_container > a,
.fullfill.slick-slide .mejs__container {
    width: 100% !important;
}

div.slick-slide .mejs__container video {
    margin: 0 auto;
    display: block;
    object-fit: cover;
}

.slick-slide .slimage_container > a,
.fullfill.slick-slide img,
.fullfill.slick-slide picture,
.fullfill.slick-slide .mejs__container,
.fullfill.slick-slide video,
.mejs__container iframe {
    position: absolute ;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    width: 100%;
    max-width: none;
}

.mejs__container-fullscreen video,
.mejs__container-fullscreen iframe {
    margin-top: auto !important;
}

.slick-slide .slimage_container > a::after,
.slick-slide .slimage_container > a::after {
    display: none !important;
    border: none !important;
}


/*  slideTextContainer*/
.slideTextContainer {
    position : absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    padding: 2rem;
    box-sizing: border-box;
    height: 100%;
    min-height: 100%;
    width: 100%;
    display: table;
    background: none;
    font-size: 2em;
    /* fix for flashing background
    http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d
    -webkit-transform: translate3d(0px, 0px, 0px);
    */
    text-shadow: 1px 0px 2px rgba(150, 150, 150, 0.98);
    z-index: 1;
}

.slideTextContainer [class*='txt-']{
    position: relative;
    display: table-cell;
    background: none;
    color: #fff;
    box-sizing: border-box;
    width: 100%;
}

.slideTextContainer .txt-top {
    vertical-align: top;
}

.slideTextContainer .txt-bottom {
    vertical-align: bottom;
}

.slideTextContainer .txt-middle {
    vertical-align: middle;
}


.slider .mejs__mediaelement iframe {
    pointer-events: none;
}

.mod_bsslider {
    position: relative;
}

.ce_bsslider .slider_meta,
.mod_bsslider .slider_meta {
    position: absolute;
    z-index: 1;
    background: rgba(150, 150, 150, 0.98);
    /* style it individually */
}

.slick-track  {
    min-height: 115px;
    height: 300px;
    width: 100%;
    overflow: hidden;
}
.slick-track  {
    height: 600px;
}

.mejs__layers {
    height: 100% !important;
}

.mejs__overlay {
    max-width: 100vw;
}

/* Ken Burns effect */
/* transition: <property> <duration> <timing-function> <delay>; */
._slick-slide .slimage_container  {
    transform: scale(1.15);
}

._slick-animated .slimage_container {
    transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transform: scale(1);
}

._slideTextContainer {
    opacity: 0;
    transform: scale(0.75);
}

._slick-animated .slideTextContainer {
    opacity: 1;
    transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    transform: scale(1);
}
/* Ken Burns effect ends */

/*
    mediaplayer css
*/
.mejs__overlay-button {
    margin: 0;
    padding: 0;
    background: transparent !important;
}


/* circle ball */
.slick-track .mejs__time-handle-content {
    height: 8px;
    width: 8px;
    top: -5px;
}

/* Start: Progress Bar */
.slick-track .mejs__time-rail {
    padding-top: 1.5rem;
}

/* timeline indicator */
.slick-track .mejs__time-buffering,
.slick-track .mejs__time-current,
.slick-track .mejs__time-float,
.slick-track .mejs__time-float-corner,
.slick-track .mejs__time-float-current,
.slick-track .mejs__time-hovered,
.slick-track .mejs__time-loaded,
.slick-track .mejs__time-marker,
.slick-track .mejs__time-total {
    height: 4px;
}

/* bubble time indicator */
.slick-track .mejs__time-float {
    display: none !important;
}

.slick-track .mejs__time {
    font-size: 11px;
}

/* if video is made full width hide control */
.fullfill.slick-slide .mejs__controls {
    /* display : none !important; */
}
/* mediaplayer css ends */
