.slider-container {
    position: relative
}

.slider-wrapper {
    height: 300px;
    padding: 0 37px;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 1
}

.slider-overlay img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover
}

.slider-wrapper h1 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    line-height: 1
}

.slider-caption {
    z-index: 2;
    color: #fff;
    position: absolute;
    bottom: 0;
    padding: 80px 40px 80px;
    margin-bottom: 0
}

.slider-caption .caption-button {
    border: 1px solid #fff;
    color: #fff;
    width: fit-content;
    padding: 20px 40px;
    font-weight: 800;
    font-size: 1.125rem;
    text-transform: uppercase;
    line-height: 1
}

.slider-caption .caption-button:hover {
    border-color: #fff;
    background: #fff;
    color: #9912b1
}

.slider-container video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    z-index: 4;
    position: relative;
    min-height: 870px;
    max-height: 1200px
}

.slider-container video.image-hidden {
    display: none
}

.slider-container imgs {
    z-index: 3;
    height: 100%;
    width: 100%;
    margin-top: -125px;
    min-height: 870px;
    max-height: 1200px
}

.slider-container imgs>div {
    height: 100%;
    width: 100%;
    display: none
}

.slider-container imgs>div:nth-child(1) {
    display: block
}

.slider-container imgs>div.image-hidden {
    display: none !important
}

.slider-container imgs>div.image-visible {
    display: block !important;
    min-height: 870px;
    max-height: 1200px
}

.slider-container imgs>div img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    min-height: 870px;
    max-height: 1200px;
    display: block
}

.button-container {
    position: absolute;
    display: block;
    top: 20%;
    right: 5%;
    z-index: 7;
    direction:ltr;
}

.button-container button {
    padding: 0 4px 0 15px!important;
    width: 170px!important;
    flex-direction: row!important;
    height: 50px!important;
    display: flex!important;
    font-size: .875rem!important;
    line-height: 1!important;
    justify-content: space-between!important;
    border-radius: 25px!important;
    border: 5px solid #b23ac7!important;
    background: transparent linear-gradient(0deg, #9912b1 0%, #7a178c 100%) 0 0 no-repeat padding-box!important;
    font-weight: 800!important;
    text-transform: uppercase!important;
    color: #fff!important;
    cursor: pointer!important;
    align-items: center!important;
}

.button-container button .scene-label {
    text-align: left
}

.button-container button .scene-label>span {
    display: none
}

.button-container button .scene-label>span:nth-child(1) {
    display: inline
}

.button-container button .scene-icon span {
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    transition: all .3s ease-in-out
}

.button-container button .scene-icon span svg {
    width: 20px;
    height: 20px
}

.button-container button .scene-icon span svg path[class=fill] {
    fill: #9912b1 !important
}

.button-container button .scene-icon span svg path[class=fill] {
    fill: #9912b1 !important
}

button.music-button {
    border-color: #4d4c4c !important;
    background: transparent linear-gradient(180deg, #2e2e2e 0%, #545454 100%) 0 0 no-repeat padding-box !important;
}

.music-button .scene-icon span {
    background: #9912b1 !important;
    display: flex
}

.music-button .scene-icon span svg [class=stroke] {
    stroke: #fff !important
}

.music-button .scene-icon span svg [class=fill] {
    fill: #fff !important
}

.music-button:hover .scene-icon span {
    background: #fff !important
}

.music-button:hover .scene-icon span svg [class=stroke] {
    stroke: #9912b1 !important
}

.music-button:hover .scene-icon span svg [class=fill] {
    fill: #9912b1 !important
}

button.music-button.music-on {
    flex-direction: row-reverse!important;
    padding: 0 15px 0 4px!important;
    justify-content: flex-end!important;
}

.music-button.music-on .scene-label {
    margin-left: 8px
}

.music-button.music-on .scene-label>span:nth-child(1) {
    display: none
}

.music-button.music-on .scene-label>span:nth-child(2) {
    display: flex
}

.scene-button {
    margin-bottom: 10px
}

.scene-button .scene-icon>span {
    display: none
}

.scene-button .scene-icon>span:nth-child(1) {
    display: flex
}

.scene-button .scene-icon svg [class=fill] {
    fill: #9912b1 !important
}

.scene-button .scene-icon svg [class=stroke] {
    stroke: #9912b1 !important
}

.scene-button.day-scene {
    flex-direction: row-reverse!important;
    padding: 0 15px 0 4px!important;
    justify-content: flex-end!important;
}

.scene-button.day-scene .scene-label {
    margin-left: 8px
}

.scene-button.day-scene .scene-label>span:nth-child(1) {
    display: none
}

.scene-button.day-scene .scene-label>span:nth-child(2) {
    display: flex
}

.scene-button.day-scene .scene-icon>span {
    display: none
}

.scene-button.day-scene .scene-icon>span:nth-child(2) {
    display: flex
}

.scene-button.day-scene .scene-icon svg [class=fill] {
    fill: #9912b1 !important
}

.scene-button.day-scene .scene-icon svg [class=stroke] {
    stroke: #9912b1 !important
}

.scene-button:hover .scene-icon span {
    background: #9912b1 !important
}

.scene-button:hover .scene-icon span svg [class=fill] {
    fill: #fff !important
}

.scene-button:hover .scene-icon span svg [class=stroke] {
    stroke: #fff !important
}

.slider-container+.iq {
    position: absolute;
    margin-top: -80px;
    z-index: 4
}

.slider-container+.iq svg {
    fill: #fff
}

[id=wpcontent] .ox {
    margin-top: 0
}

/*@media (min-width: 576px) {*/
/*    .button-container {*/
/*        top: auto;*/
/*        bottom: 24%*/
/*    }*/
/*}*/

@media (min-width: 768px) {
    /*.button-container {*/
    /*    bottom: 20%*/
    /*}*/

    .slider-container+.iq {
        margin-top: -120px
    }
}

@media (min-width: 992px) {
    .slider-container {
        margin-top: -76px;
        display: flex
    }

    .slider-wrapper {
        height: auto;
        flex-direction: column;
        position: relative;
        width: 370px;
        padding: 125px 40px 85px
    }

    .slider-overlay {
        height: 100%
    }

    .slider-caption {
        position: relative;
        height: auto;
        padding: 0;
        bottom: 0;
        background: 0
    }

    .slider-container video {
        max-height: none;
        min-height: 0;
        width: calc(100% - 370px);
        position: absolute;
        right: 0
    }

    .slider-container imgs {
        display: none
    }

    .slider-container imgs>div:nth-child(1) {
        display: none
    }

    .slider-container imgs>div:nth-child(2) {
        display: block
    }

    /*.button-container {*/
    /*    bottom: 27%;*/
    /*    left: 340px*/
    /*}*/

    .music-button {
        display: flex !important
    }

    .slider-container+.iq {
        margin-top: -110px
    }
    
  
}

@media (min-width: 1201px) {
    .slider-container {
        margin-top: -82px
    }

    .slider-wrapper {
        width: 480px;
        padding: 125px 55px 85px;
        min-height: 700px
    }

    .slider-wrapper h1 {
        font-size: 3rem
    }

    .slider-container video {
        width: calc(100% - 480px)
    }

    /*.button-container {*/
    /*    left: 440px*/
    /*}*/

    .slider-container+.iq {
        margin-top: -120px
    }
}

@media (min-width: 1401px) {
    .slider-wrapper {
        width: 600px;
        padding: 125px 95px 85px
    }

    .slider-wrapper h1 {
        font-size: 3.125rem
    }

    .slider-container video {
        width: calc(100% - 600px)
    }

    /*.button-container {*/
    /*    left: 560px*/
    /*}*/
}

@media (max-width: 991px) {
    .day-scene+.h_ .slider-caption {
        color: #2e2e2e;
        background: #fff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 100%)
    }

    .day-scene+.h_ .slider-wrapper .caption-button {
        color: #2e2e2e;
        border-color: #2e2e2e
    }

    .day-scene+.h_ .slider-wrapper .caption-button:hover {
        color: #9912b1;
        border-color: #fff
    }
     
    .button-container {
        bottom:10%;
        top:auto;
    }
    .button-container button {
        padding: 0 4px 0 15px!important;
        width: 135px!important;
        height: 40px!important;
        font-size: .675rem!important;
    }
    .scene-button.day-scene {
        padding: 0 0px 0 4px!important;
    }
    .button-container button .scene-icon span {
        width: 25px;
        height: 25px;
    }
    
    .button-container button .scene-icon span svg {
        width: 15px;
        height: 15px
    }

}