@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.xm-cue-player {
    position: relative;
    height: auto !important;;
    overflow: hidden;
}
.xm-cue-player.container {
    position: relative;
    font-family: 'Fira Sans', sans-serif;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    visibility: hidden;
}

.xm-cue-player .vjs-tech {
    pointer-events: none;
}

.xm-cue-player .preloader {
    position: absolute;
    width: 0%;
    height: 2px;
    top: 1px;
    left: 0;
    /* background-color: red; */
}

.xm-cue-player .slider-cont {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    padding: 10px 40px 80px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.80) 100%);
}

.xm-cue-player .my-slider {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    /* background: rgba(255,255,255,0.1); */
    border-radius: 8px;
}

.xm-cue-player .my-slider:before {
    content: '';
    width: calc(100% - 30px);
    position: absolute;
    bottom: 13px;
    margin: 0 15px;
    border-bottom: solid 5px #ffffff;
    display: flex;
    justify-content: space-between;
}

.xm-cue-player .my-slider button {
    border: none;
    position: relative;
    background-color: transparent;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

.xm-cue-player .my-slider button:before {
    content: ' ';
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: #3a3a3a;
    border-radius: 50%;
}

.xm-cue-player .my-slider button.past:before {
    background-color: #fff;
}

.xm-cue-player .my-slider button:hover:before {
    background-color: #fff;
    width: 16px;
    height: 16px;
}

.xm-cue-player .my-slider .select {
    position: absolute;
    width: calc(100% - 30px);
    margin: 0 15px;
    top: 15px;

}

.xm-cue-player .my-slider .select .circle {
    left: calc(0%);
    content: ' ';
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: #fff !important;
    border-radius: 50%;
    transition: left 0.5s ease-in-out;
    /* border: px solid transparent; */
    /* outline: 1px solid rgb(221, 35, 35); */
}
.xm-cue-player .my-slider .select .circle::after {
    content: ' ';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 30px;
    height: 30px;
    border: 1.5px solid rgb(255, 255, 255) ;
    border-radius: 50%;
}

.xm-cue-player .my-slider .select .progress {
    width: calc(0%);
    content: ' ';
    height: 5px;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    bottom: -2px;
    background-color: #2D3494 !important;
    transition: width 0.5s ease-in-out;
}

.xm-cue-player .my-slider button .feature-name {
    position: absolute;
    top: 36px;
    z-index: 55;
    left: -40px;
    line-height: 18px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    width: 14ch;
}

.xm-cue-player .header {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    background-color: #00000066;
    color: #ffffffdd;
    font-weight: 300;
    font-size: 12px;
    padding: 12px;
    box-sizing: border-box;
    display: none;
}

.xm-cue-player .slides .slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 999999999999;
    position: absolute;
    width: 18%;
    min-width: 118px;
    max-width: 285px;
    min-height: 90px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 30px;
    transform: translate(-150%, -40%);
    border: 1px solid #b9c8e5;
}

.xm-cue-player .slides .slide h1 {
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 28px;
    font-weight: 400;
    font-family: 'Fira Sans', sans-serif;

}

.xm-cue-player .slides .slide p {
    color: #fff;
    padding: 0;
    font-size: 20px;
    font-weight: 300;
    margin: 0;
    margin-top: 15px;
    font-family: 'Fira Sans', sans-serif;
}

.xm-cue-player .slide .line {
    width: 50%;
    height: 2px;
    position: absolute;
    background-color: #dddddd99;
    left: 100%;
}

.xm-cue-player .slide2 .line {
    width: 100%;
    height: 2px;
    position: absolute;
    top: 108px;
    background-color: #dddddd99;
    left: -100% !important;
}

.xm-cue-player .slide3 .line {
    transform: rotate(269deg);
    transform-origin: left top;
    top: 0;
    left: 45%;
    width: 140px;
}

.xm-cue-player .slide .line .point {
    width: 7px;
    height: 7px;
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
    background-color: #15285a;
}

.xm-cue-player .slide2 .line .point, .xm-cue-player .slide1 .line .point {
    right: unset !important;
}

.xm-cue-player .slide1 .line {
    width: 45%;
    height: 2px;
    position: absolute;
    top: 77px;
    background-color: #dddddd99;
    left: -45%;
}

.myPlayer-dimensions{
    height: 700px!important;
    width: 100%!important;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}


@media (max-aspect-ratio: 470/625) {
    .xm-cue-player .slider-cont{
        padding:8px 4px 64px 4px !important;
    }

    .xm-cue-player .slide {
        transform: translate(-24%, 50%) !important;
    }

    .xm-cue-player .slide .line {
        width: 1px;
        height: 50%;
        position: absolute;
        top: -50%;
        background-color: #dddddd99;
        left: 24%;
    }

    .xm-cue-player .slide .line .point {
        right: -2px;
    }

    .xm-cue-player .slide.m-bottom {
        transform: translate(-24%, -150%) !important;

    }

    .xm-cue-player .slide.m-bottom .line {
        top: 100%;
    }

    .xm-cue-player .slide.m-bottom .line .point {
        top: 100%;
    }

    .xm-cue-player .slide0 {
        top: 50%;
        left: 56%;
    }

    .xm-cue-player .slide1 {
        top: 52%;
        left: 35%;
    }

    .xm-cue-player .slide2 {
        top: 50%;
        left: 45%;
    }

    .xm-cue-player .slide3 {
        top: 46%;
        left: 38%;
    }

    .xm-cue-player .slide4 {
        top: 41%;
        left: 61%;
    }

    .xm-cue-player .slide5 {
        top: 48%;
        left: 54%;
    }

    .xm-cue-player .slide6 {
        top: 60%;
        left: 53%;
    }

    .xm-cue-player .slide7 {
        top: 54%;
        left: 34%;
    }

    .xm-cue-player .slide8 {
        top: 41%;
        left: 61%;
    }

    .xm-cue-player .slide9 {
        top: 42%;
        left: 58%;
    }
 }


@media (min-aspect-ratio: 470/625) {
    .xm-cue-player .slide.a-left {
        transform: translate(50%, -36%);
    }

    .xm-cue-player .slide.a-left .line {
        left: 0%;
        transform: translate(-100%, 0px);
    }

    .xm-cue-player .slide.a-left .line .point {
        right: unset;
        left: 0;
    }

    .xm-cue-player .slide0 {
        top: 34%;
        left: 62%;
    }

    .xm-cue-player .slide1 {
        top: 42%;
        left: 65%;
        transform: translate(10px, 10px) !important;
    }

    .xm-cue-player .slide2 {
        top: 27%;
        left: 76%;
        transform: translate(10px, 10px) !important;

    }

    .xm-cue-player .slide2 .line {
        top: 109px !important;
        width: 51%;
        left: -54% !important;
        transform: translate(10px, 10px);
    }

    .xm-cue-player .slide3 {
        top: 38%;
        left: 33%;
    }

    .xm-cue-player .slide4 {
       top: 46%;
       left: 55%;
       max-width: 300px !important;
       width: 50% !important;
    }

    .xm-cue-player .slide4 .line{
        top: 122px;
        left: 0% !important;
        width: 47%;
    }

    .xm-cue-player .slide5 {
        top: 36%;
        left: 36%;
    }

    .xm-cue-player .slide6 {
        top: 38%;
        left: 15%;
        transform: translate(50%, -76%) !important;
    }

    .xm-cue-player .slide6.a-left .line {
        left: 35%;
        transform: translate(5%, 0px);
        transform: rotate(270deg);
    }

    .xm-cue-player .slide6 .line {
        top: 107%;
        width: 15%;
    }

    .xm-cue-player .slide7 {
        top: 52%;
        left: 32%;
    }

    .xm-cue-player .slide8 {
        top: 25%;
        left: 61%;
    }

    .xm-cue-player .slide9 {
        top: 29.5%;
        left: 44%;
    }

}

@media (min-width: 1281px){
    .xm-cue-player .slide0 {
        top: 41%;
        left: 62%;
    }

    .xm-cue-player .slide2 {
        top: 19%;
        left: 71%;
        transform: translate(10px, 10px) !important;
    }

    .xm-cue-player .slide9 {
        top: 38%;
        left: 43%;
    }

    .xm-cue-player .slide9 .line {
        top: unset;
    }


    @media (max-width: 1800px) {
        .xm-cue-player .slide9 {
            top: 35%;
            left: 43%;
        }
    }

    @media (max-width: 1550px) {
        .xm-cue-player .slide9 {
            top: 40.5%;
            left: 43%;
        }
    }

    @media (max-width: 1350px) {
        .xm-cue-player .slide9 {
            top: 38%;
            left: 43%;
        }
    }
}

@media (max-width: 1650px) and (min-width: 1450px) {
    .xm-cue-player .slide4 {
        top: 46%;
        left: 55%;
    }
}

@media (max-width: 1450px) and (min-width: 1280px) {
    .xm-cue-player .slide4 {
        top: 46%;
        left: 57%;
    }
}

@media (max-width: 1366px) and (min-width: 1300px) {
    .slide.slide7.m-bottom.slide71 {
          top: 56%;
          left: 60%;
    }
}

@media (max-width: 1200px) {
    .xm-cue-player .slide .line{
        display: none;
    }
    .xm-cue-player .slides .slide.current {
        max-width: none !important;
        width: initial !important;
    }
    .xm-cue-player .slides .slide {
        display: block;
        flex-direction: unset;
        justify-content: unset;
        position: unset;
        width: unset;
        min-width: unset;
        max-width: unset;
        min-height: unset;
        height: unset;
        background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(255,255,255,0)));
        position: initial;
        left: 0;
        right: 0;
        top: -196px;
        padding: 10px 20px !important;
        /* border: solid 1px #d7cccc82; */
        transform: unset;
        border: unset;
    }
    .xm-cue-player .slide {
        transform: unset !important;
    }
    .xm-cue-player .slide.m-bottom {
        transform: unset !important;
    }
    div#myPlayer {
        position: relative !important;
    }
    .xm-cue-player .slider-cont{

        position: absolute;
        bottom:0%;
        z-index: 99999;
    }
    .xm-cue-player .slides .slide h1, .xm-cue-player .slides .slide p{
        color: #000 !important;
    }
    .myPlayer-dimensions {
        width: 1920px;
    }
    .xm-cue-player .slides .slide h1{
        font-size: 22px !important;
        padding-top: 12px;
        font-weight: 500 !important;
    }
    .xm-cue-player .slides .slide p{
        font-size: 16px !important;
    }
    .xm-cue-player .my-slider button .feature-name {
        font-size: 10px;
        width: 14ch;
    }

    .vjs-tech {
        height: 700px ;
        width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

}


@media screen and (max-width:1366px) and (max-height:657px){
    .xm-cue-player .slide9{
        top: 39%;
    }
}
@media screen and (max-width:1366px) and (max-height:625px){
    .xm-cue-player .slide9{
        top: 41%;
    }
}
@media screen and (max-width:1366px) and (max-height:568px){
    .xm-cue-player .slide9{
        top: 45%;
    }
}

/* tablet */
@media (max-width: 991px) and (orientation: landscape)  {
    .myPlayer-dimensions{
        height: 480px!important;
        width: 100%!important;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }
}

@media (max-width: 991px)  {
    .xm-cue-player .slides .slide.current {
        max-width: none !important;
        width: initial !important;
    }
    .xm-cue-player .slide .line{
        display: none;
    }
    .xm-cue-player .slides .slide {
        display: block;
        flex-direction: unset;
        justify-content: unset;
        position: unset;
        width: unset;
        min-width: unset;
        max-width: unset;
        min-height: unset;
        height: unset;
        background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(rgba(255,255,255,0)));
        position: initial;
        left: 0;
        right: 0;
        top: -196px;
        padding: 10px 20px !important;
        transform: unset;
        border: unset;
    }
    .xm-cue-player .slide {
        transform: unset !important;
    }
    .xm-cue-player .slide.m-bottom {
        transform: unset !important;
    }
    div#myPlayer {
        position: relative !important;
    }
    .xm-cue-player .slider-cont {
        position: absolute;
        z-index: 9999;
        width: 100%;
        bottom: 0px;

    }
    .xm-cue-player .slides .slide h1, .xm-cue-player .slides .slide p{
        color: #000 !important;
    }
    .myPlayer-dimensions {
        width: 1920px;

     }

        .myPlayer-dimensions{
            /* height: 1024px!important; */
            width: 100%!important;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }


    .xm-cue-player .slides .slide h1{
        font-size: 28px !important;
        padding-top: 12px;
        font-weight: 500 !important;
    }
    .xm-cue-player .slides .slide p{
        font-size: 16px !important;
    }
    .xm-cue-player .vjs-tech {
        /* height: 1024px !important; */
        /* object-fit: cover; */
        width: 100% !important;
        position: absolute;
        top: 50%;
        left: 50%;
        /* object-fit: cover; */
        transform: translate(-50%, -50%);
    }



    .xm-cue-player .slides .slide3, .xm-cue-player .slides .slide7, .xm-cue-player .slide4 {
        max-width: initial !important;
        width: initial !important;
    }
    .slides {
        /* height: 295px; */
        height: 145px;
    }
}

/* mobile */

@media (max-width: 768px) {

    .xm-cue-player .slider-cont {
        position: absolute;
        bottom: 0px;
        z-index: 9999;
        width: 100%;
    }

    .slides {
        height: 155px;
    }


    .xm-cue-player .my-slider button .feature-name {

        display: none;

}

}



/* new css */


@media screen  and (max-width:2000px) and (max-height:1100px){
    /* .myPlayer-dimensions{
        height: 950px!important;
    } */
    .vjs-tech{
        height: 1000px!important;
        width:100%!important;
        position: absolute;
        top: 50%;
        left: 50%;
        /* object-fit: cover; */
        transform: translate(-50%,-50%);
    }
    .xm-cue-player .slide9 {
        top: 38%;
        left: 47%;
    }
    .xm-cue-player .slide8 {
        top: 40%;
        left: 61%;
    }
    .xm-cue-player .slide1 {
        top: 42%;
        left: 63%;
        transform: translate(10px, 10px) !important;
    }
    .xm-cue-player .slide0 {
        top: 43%;
        left: 57%;
    }
    .xm-cue-player .slide3 {
        top: 65%;
        left: 83%;
    }
}
@media screen  and (max-width:500px) {
    #myPlayer.myPlayer-dimensions{
        height: 700px!important;
    }
}

@media screen  and (max-width:2000px) and (max-height:900px){
    .myPlayer-dimensions{
        height: 800px!important;
    }
    .vjs-tech{
        height: 1000px!important;
        width: 100%!important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* object-fit: cover; */
    }
    .xm-cue-player .slide9 {
        top: 35%;
        left: 46%;
    }
    .xm-cue-player .slide8{
        top: 40%;
        left: 61%;
    }
    .xm-cue-player .slide7 {
        top: 55%;
        left: 32%;
    }
    .xm-cue-player .slide6 {
        top: 35%;
        left: 17%;
        /* transform: translate(50%, -76%) !important; */
    }
    .xm-cue-player .slide5 {
        top: 36%;
        left: 36%;
    }
    .xm-cue-player .slide4 {
        top: 45%;
        left: 55%;
    }
    .xm-cue-player .slide3 {
        top: 63%;
        left: 83%;
    }
    .xm-cue-player .slide2 {
        top: 12%;
        left: 70%;
        transform: translate(10px, 10px) !important;
    }
    .xm-cue-player .slide1 {
        top: 41%;
        left: 64%;
        transform: translate(10px, 10px) !important;
    }
    .xm-cue-player .slide0 {
        top: 42%;
        left: 56%;
    }
}

@media screen  and (max-width:1600px) and (max-height:800px){
    .myPlayer-dimensions{
        height: 630px!important;
    }
    .vjs-tech{
        height: 800px!important;
        width: 100%!important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(1.1);
    }
    .xm-cue-player .slide9 {
        top: 36%;
        left: 46%;
    }
    .xm-cue-player .slide8{
        top: 40%;
        left: 61%;
    }
    .xm-cue-player .slide7 {
        top: 55%;
        left: 32%;
    }
    .xm-cue-player .slide6 {
        top: 34%;
        left: 15%;
        /* transform: translate(50%, -76%) !important; */
    }
    .xm-cue-player .slide5 {
        top: 36%;
        left: 36%;
    }
    .xm-cue-player .slide4 {
        top: 30%;
        left: 60%;
    }
    .xm-cue-player .slide3 {
        top: 64%;
        left: 104%;
    }
    .xm-cue-player .slide2 {
        top: 12%;
        left: 74%;
        transform: translate(10px, 10px) !important;
    }
    .xm-cue-player .slide1 {
        top: 38%;
        left: 60%;
        transform: translate(10px, 10px) !important;
    }
    .xm-cue-player .slide0 {
        top: 38%;
        left: 62%;
    }
}


.slides{
    display: none;
}

@media screen and (max-width : 906px){
    .slides{
        display:block !important;
    }
}