.pxl-video-player1 {
    .pxl-video--holder {
        img, .pxl-video--imagebg {
            @include border-radius(15px);
        }
        + .btn-video-wrap {
            position: absolute;
            z-index: 99;
            text-align: center;
            &.p-center {
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
        }
    }
    .btn-video {
        i {
            display: inline-flex;
            @extend .pxl-middle;
        }
        &.style1 { 
            background-color: transparent;
            color: $primary_color;
            z-index: 1;
            border-radius: 75px;
            &:after {
                @extend .pxl-spill;
                background-color: #fff;
                border-radius: inherit;
                z-index: -1;
            }
            &:before {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(#fff, 0.63);
                border-radius: 50%;
                animation: pxl_pulse_border 1500ms ease-out infinite;
                -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
            }
            &:hover, &:focus, &:active {
                &:before {
                    -webkit-animation-play-state: paused;
                    -moz-animation-play-state: paused;
                    -o-animation-play-state: paused;
                    animation-play-state: paused;
                }
            }
        }
        &.style2 {
            min-width: 80px;
            width: 80px;
            height: 80px;
            border: 1px solid $primary_color;
            background-color: #fff;
            color: $primary_color;
            border-radius: 80px;
            font-size: 16px;
            i {
                width: 55px;
                height: 55px;
                background-color: #{'rgba(var(--primary-color-rgb),0.08)'};
                border-radius: 55px;
                align-items: center;
                display: inline-flex;
                justify-content: center;
                @include transition(all 220ms linear 0ms);
            }
            &:before {
                background-color: #fff;
                @extend .pxl-spill;
                border-radius: 100%;
            }
            &:after {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: #{'rgba(var(--primary-color-rgb),0.3)'};
                border-radius: 50%;
                animation: pxl_pulse_border 1500ms ease-out infinite;
                -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
            }
            &:hover i {
                background-color: $primary_color;
                color: #fff;
            }
        }
        &.style3 {
            min-width: 56px;
            width: 56px;
            height: 56px;
            background-color: transparent;
            color: $primary_color;
            border-radius: 56px;
            font-size: 15px;
            border: none;
            &:before {
                background-color: $secondary_color;
                @extend .pxl-spill;
                border-radius: 100%;
            }
            &:after {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: #{'rgba(var(--primary-color-rgb),0.3)'};
                border-radius: 50%;
                animation: pxl_pulse_border 1500ms ease-out infinite;
                -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
            }
        }
        &.style4 {
            background-color: rgba(#273D71, 0.7);
            color: $primary_color;
            min-width: 100px;
            width: 100px;
            height: 100px;
            font-size: 28px;
            border-radius: 100%;
            .line-video-animation {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid rgba(#fff, 0.35);
                @include border-radius(100%);
                animation: pxl_squares 3.9s linear 0s infinite;
                -webkit-animation: pxl_squares 3.9s linear 0s infinite;
                -ms-animation: pxl_squares 3.9s linear 0s infinite;
                -o-animation: pxl_squares 3.9s linear 0s infinite;
                -webkit-animation-play-state: running;
                -moz-animation-play-state: running;
                -o-animation-play-state: running;
                animation-play-state: running;
                opacity: 0;
                &.line-video-2 {
                    -webkit-animation-delay: 1.3s;
                    -moz-animation-delay: 1.3s;
                    -o-animation-delay: 1.3s;
                    animation-delay: 1.3s;
                }
                &.line-video-3 {
                    -webkit-animation-delay: 2.6s;
                    -moz-animation-delay: 2.6s;
                    -o-animation-delay: 2.6s;
                    animation-delay: 2.6s;
                }
            }
            &:hover, &:focus {
                .line-video-animation {
                    -webkit-animation-play-state: paused;
                    -moz-animation-play-state: paused;
                    -o-animation-play-state: paused;
                    animation-play-state: paused;
                }
            }
        }
        &.style5 {
            min-width: 65px;
            width: 65px;
            height: 65px;
            background-color: transparent;
            border-radius: 65px;
            font-size: 18px;
            border: none;
            @include box-shadow(0 10px 60px rgba(#8997BA, 0.25));
            i {
                @extend .text-gradient;
            }
            &:before {
                background-color: #fff;
                @extend .pxl-spill;
                border-radius: 100%;
            }
            &:after {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: #{'rgba(var(--primary-color-rgb),0.3)'};
                border-radius: 50%;
                animation: pxl_pulse_border 1500ms ease-out infinite;
                -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
            }
        }
        &.style6 { 
            width: 80px;
            min-width: 80px;
            height: 80px;
            background-color: $primary_color;
            color: $secondary_color;
            border-radius: 80px;
            &:after {
                content: "";
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: #{'rgba(var(--primary-color-rgb),0.3)'};
                border-radius: 50%;
                animation: pxl_pulse_border 1500ms ease-out infinite;
                -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
            }
        }
        &.style7 { 
            width: 56px;
            min-width: 56px;
            height: 56px;
            background-color: $primary_color;
            color: #fff;
            border-radius: 56px;
            box-shadow: 0 10px 20px #{'rgba(var(--primary-color-rgb),0.35)'};
            font-size: 15px;
        }
        &.style8 {
            width: 144px;
            height: 144px;
            border-radius: 114px;
            background-color: #fff;
            color: $third_color;
            font-size: 44px;
            @media #{$max-sm} {
                font-size: 24px;
                width: 90px;
                height: 90px;
            }
            &:before {
                content: '';
                width: 172px;
                height: 172px;
                border-radius: 172px;
                border: 2px dashed #fff;
                position: absolute;
                top: -14px;
                left: -14px;
                z-index: -1;
                @media #{$max-sm} {
                    width: 110px;
                    height: 110px;
                    top: -10px;
                    left: -10px;
                }
            }
            i {
                margin-left: 5px;
                @media #{$max-lg} {
                    margin: 0;
                }
            }
            &:hover:before {
                animation: pxl_spin 14s linear infinite;
            }
        }
    }
    .pxl-video--inner {
        position: relative;
    }
    &.pxl-video-style2, &.pxl-video-style3, &.pxl-video-style5, &.pxl-video-style6, &.pxl-video-style7 {
        .btn-video-wrap  {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
        }
    }
    &.pxl-video-style5 {
        .pxl-label {
            font-size: 18px;
        }
    }
    &.pxl-video-style7 .pxl-label {
        font-size: 16px;
        color: #2E3D62;
    }
}

.pxl-row-align--left > .elementor-column-gap-extended {
    margin-left: 0 !important;
}

@keyframes ripple5 {
    0% {box-shadow: 0px 0px 0px 0px rgba(255, 143, 31, 0.9);}
    50% {box-shadow: 0px 0px 0px 20px rgba(255, 143, 31, 0);}
    100% {box-shadow: 0px 0px 0px 40px rgba(255, 143, 31, 0);}
}
@keyframes ripple6 {
    0% {box-shadow: 0px 0px 0px 20px rgba(255, 143, 31, 0.3);}
    50% {box-shadow: 0px 0px 0px 40px rgba(255, 143, 31, 0);}
    100% {box-shadow: 0px 0px 0px 0px rgba(255, 143, 31, 0);}
}