/*
Theme Name: BardWP Child
Theme URI: http://bard.qodeinteractive.com
Description: A child theme of Bard Theme
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.1
Text Domain: bardwp
Template: bardwp
*/
body {
    background: black;
    background-color: black;
}

body>div.mkdf-wrapper {
    padding: 0 !important;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(9) {
    background: black;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(10) {
    background: black;
}

.mkdf-el-date-separated * {
    color: white;
}

.mkdf-event-list-holder.mkdf-el-simple .mkdf-event-list-holder-inner .mkdf-event-list-item div {
    border-color: white;
}

.mkdf-eli-title-holder * {
    color: white;
}

.mkdf-btn.mkdf-btn-outline .mkdf-btn-line {
    background-color: white !important;
}

.mkdf-btn-solid span.mkdf-btn-text {
    color: black;
}

.mkdf-btn.mkdf-btn-outline {
    color: white !important;
    background-color: transparent;
}

.gallery-marguier .owl-next {
    transform: translate(150%, calc(-60% - 21px)) !important;
}

.gallery-marguier .owl-prev {
    transform: translate(-150%, calc(-60% - 21px)) !important;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>header.mkdf-page-header {
    position: absolute;
}



@media screen and (max-width: 600px) {

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div>div:nth-child(1)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div {
        padding: 20px !important;
    }


    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div>div:nth-child(1)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div p {
        text-align: left !important
    }

    #infoBox {
        padding: 20px !important;
    }

    #infoBox p {
        text-align: left !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(2)>div>div>div:nth-child(2)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div {
        padding: 20px !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(2)>div>div>div:nth-child(2)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div p {
        text-align: left !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div>div:nth-child(2)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div {
        padding: 20px !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div>div:nth-child(2)>div>div>div.mkdf-elements-holder.mkdf-one-column.mkdf-responsive-mode-768>div>div>div>div>div>div>div p {
        text-align: left !important
    }

    /* Padding section */

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(2)>div {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100%;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100%;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(10)>div {
        margin: 0;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(10)>div>div>div>div>div>div>div>div.container {
        height: 300px;
    }

    .fluidvids {
        padding: 0 !important;
        position: static !important;
        width: 85% !important;
        height: 60% !important;
    }

    #close-button {
        position: absolute;
        top: 10% !important;
        right: 10% !important;
        cursor: pointer;
        background-color: transparent;
        border: none;
    }

    .containerVideo {
        height: 300px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        background-image: url(https://antoine-marguier.ch/wp-content/uploads/2018/04/OdN-36-scaled.jpg);
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(10)>div {
        margin: 0;
        width: 100%;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>header.mkdf-mobile-header>div {
        top: 0px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        left: 0px !important;

    }

    #contact>div>div>div>div>div:nth-child(1)>div>div {
        padding: 0 10px !important;
    }

    #contact>div>div>div>div>div:nth-child(2)>div>div {
        padding: 0 10px !important;
    }

    #contact>div>div>div>div>div:nth-child(1)>div {
        margin-bottom: 50px;
    }

    #contact a {
        font-size: 12px !important;
    }


    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div.vc_row.wpb_row.vc_row-fluid.vc_custom_1690987729002.mkdf-content-aligment-center {
        padding: 0 !important;
    }

    .none-mobile {
        display: none;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div {
        padding-bottom: 0 !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(5)>div>div>div:nth-child(1)>div>div>div>div>div>div {
        padding-top: 0 !important;
    }

    .reverse {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .Timeline-grid div.mkdf-awards-items-holder>div {
        padding: 25px 0 !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(9)>div>div {
        padding-bottom: 0 !important;
    }

    #contact>div>div>div>div>div>div>div>div>div>div.mkdf-veh-content>div>div>div.vc_custom_1524562145080 {
        padding: 30px 20px !important;
    }

    #contact.vc_custom_1691048060170 {
        padding-bottom: 0 !important;
    }

    #contact>div>div {
        padding: 0 !important;
    }

}


@media only screen and (max-width: 480px) {

    .mkdf-container-inner,
    .mkdf-grid,
    .mkdf-row-grid-section {
        width: 90% !important;
    }
}

.mkdf-mobile-header .mkdf-mobile-header-inner {
    background: black !important;
    background-color: black !important;
    border: 0 !important;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>header.mkdf-mobile-header>div>div>div>div>div>div.mkdf-mobile-menu-opener.mkdf-mobile-menu-opener-icon-pack>a>span>span:before {
    color: white;
}

@media only screen and (max-width: 768px) {
    .mkdf-event-list-holder.mkdf-el-simple .mkdf-event-list-holder-inner {
        padding: 20px !important;
    }
}

.fluidvids {
    padding: 0 !important;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(8) {
    background: black !important;
}

@media only screen and (max-width: 2000px) and (min-width: 1200px) {

    #btimeline-5763>div>div>div {
        height: 700px !important;
    }
}

#nav-menu-item-5799-en>a>span {
    display: flex !important;
    align-items: center;
    align-content: center;
}

li.lang-item>a>span {
    display: flex !important;
    align-items: center;
    align-content: center;
}

#nav-menu-item-5567>a>span {
    display: flex !important;
    align-items: center;
    align-content: center;
}


div.mkdf-event-list-holder-inner h4.mkdf-eli-title {
    text-transform: none !important;
}

div.mkdf-event-list-holder-inner h4.mkdf-eli-title::first-letter {
    text-transform: capitalize;
}

div.mkdf-event-list-holder-inner h6.mkdf-eli-subtitle {
    text-transform: unset !important;
}


body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7) {
    background: black
}


#concerts>div>div>div>div>div>div>div>div>div>div.mkdf-eli-read-more-holder.clearfix>a.mkdf-btn.mkdf-btn-small.mkdf-btn-solid.mkdf-btn-animation.mkdf-btn-show {
    display: none;
}

#concerts>div>div>div>div>div>div>div>div>div>div.mkdf-eli-read-more-holder.clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
}

#concerts>div>div>div>div>div>div>div>div>div>div.mkdf-eli-read-more-holder.clearfix>a.mkdf-btn.mkdf-btn-small.mkdf-btn-outline.mkdf-btn-animation.mkdf-btn-show {
    width: 70%;
}

body.page-id-5928 .wpb_wrapper * {
    color: white !important;
}


#block-9>p * {
    color: white !important;
}

#block-9>p {
    color: white !important;
}


#contact p.p1 {
    position: relative;
}


#contact p.p1 a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;

    display: inline-block;
    position: relative;
}

#contact p.p1 a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}



p a {
    color: #fff;
    text-decoration: none !important;


    display: inline-block;
    position: relative;
}

p a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

p a:hover:after {
    width: 100%;
    left: 0;
}


#contact p.p1 a:hover:after {
    width: 100%;
    left: 0;
}

@media only screen and (max-width: 1400px) and (min-width: 800px) {
    .timeline__item {
        min-width: 350px;
    }

    .timeline__items {
        height: 700px !important;
    }
}

@media screen and (min-width: 767px) {
    .owl-prev>i {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        font-size: 40px;
        line-height: 1;
        color: #fff;
        margin-left: 14px;
        margin-right: 0 !important;
        transform: translateX(-40px) !important;
    }

    div.owl-nav {
        display: block !important;
    }

}

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

    .mkdf-ils-holder .mkdf-ils-item-subtitle,
    .mkdf-image-gallery .owl-nav {
        display: block !important;
    }

    .gallery-marguier .owl-prev {
        transform: translate(-64%, calc(-60% - 21px)) !important;
    }

    .gallery-marguier .owl-next {
        transform: translate(67%, calc(-60% - 21px)) !important;
    }
}

@media only screen and (max-width: 780px) and (min-width: 600px) {


    .timeline__item {
        width: 350px !important;
    }

    .timeline__wrap {
        overflow: visible !important;
    }

    .timeline--horizontal {
        overflow: visible !important;
    }
}

img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/OdN-72-1-scaled.jpg"] {
    object-position: 0 10%;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
    width: 100vw;
    height: 100vh;
}

body {
    margin: 0;
}

div.container-slides {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

div.container-slides .slide {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    position: relative;
    width: 100%;
    flex-direction: column;
    height: 100%;
}

div.container-slides .slide img {
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
}

div.container-slides .slide h2 {
    text-align: center;
    z-index: 999;
    color: white;
    padding: 0;
    font-size: 180%;
    line-height: revert;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: fit-content;
    margin: 0;
    margin-bottom: 2%;
}

div.container-slides .slide h3 {
    text-align: center;
    z-index: 999;
    color: white;
    padding: 0;
    font-size: 150%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: fit-content;
    margin: 0;
    margin-bottom: 5rem;
}

.slick-list {
    height: 100% !important;
}

.slick-list .slick-track {
    height: 100% !important;
}

.slick-next:before {
    content: "";
    display: none !important;
}

.slick-prev:before {
    content: "";
    display: none !important;
}

.slick-next {
    right: 1% !important;
    z-index: 99999;
    width: fit-content !important;
}

.slick-prev {
    left: 1% !important;
    z-index: 99999;
    width: fit-content !important;
}

@media only screen and (max-width: 770px) {
    div.container-slides .slide h2 {
        width: 90%;
        font-size: 160%;
    }


    div.slick-arrow svg {
        width: 40px;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: unset;
    }

    div.container-slides {
        width: 100vw;
        height: 85vh;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/antoine-2.jpg"] {
        object-position: 30% 0%;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/am-filtrenoir.jpg"] {
        object-position: 35% 0%;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/OdN-72-1-scaled.jpg"] {
        object-position: 35% 0%;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/2023-04-08_Healing-Arts-Concert___WHO-A.Tardy-286-min-scaled.jpg"] {
        object-position: 6% 0%;
    }


    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/A70D9020PSRScut-modifie-2-min-scaled.jpg"] {
        object-position: 65% 0%;
    }

}

@media only screen and (max-width: 1100px) and (min-width: 1000px) {
    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/2023-04-08_Healing-Arts-Concert___WHO-A.Tardy-286-min-scaled.jpg"] {
        object-position: 2% 0% !important;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/am-filtrenoir.jpg"] {
        object-position: 15% 0% !important;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/OdN-72-1-scaled.jpg"] {
        object-position: 30% 0% !important;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/antoine-2.jpg"] {
        object-position: 30% 0% !important;
    }

    img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/A70D9020PSRScut-modifie-2-min-scaled.jpg"] {
        object-position: 70%;
    }


}


body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(8)>div {
    z-index: 1 !important;
}

.fluidvids {
    width: 90% !important;
}


body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div {
    background: black;
}

* a {
    color: white !important;
}

* ul#menu-menu-pierre-2 a {
    color: black !important;
}

.shadow {
    width: 100%;
    position: absolute;
    height: 100%;
    background: rgb(0 0 0 / 15%);
    z-index: 1;
}

.containerVideo {
    width: 100vw;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div>div>div {
    padding-right: 0;
    padding-left: 0;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div>div {
    width: 100%;
}

body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(6)>div {
    margin: 0;
    width: 100% !important;
    display: flex;
    justify-content: center;
}


@media only screen and (max-width: 800px) {
    #hero-banner {
        padding-top: 0 !important;
    }

    body #hero-banner div.custom-prev-arrow.slick-arrow {
        left: 1rem !important;
    }

    body #hero-banner div.custom-next-arrow.slick-arrow {
        right: 2rem !important;
    }
}




@media only screen and (max-width: 820px) and (min-width: 780px) {
    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div>div>div>div>div:nth-child(9) {
        display: none;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(3)>div>div {
        margin-bottom: none !important;
        padding-bottom: none !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/antoine-2.jpg"] {
        object-position: 30% 0% !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: fit-content !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/am-filtrenoir.jpg"] {
        object-position: 30% !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/2023-04-08_Healing-Arts-Concert___WHO-A.Tardy-286-min-scaled.jpg"] {
        object-position: 10% !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/A70D9020PSRScut-modifie-2-min-scaled.jpg"] {
        object-position: 65% !important;
    }

    div.container-slides .slide h3 {
        margin: 0;
        margin-bottom: 25% !important;
    }


    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: fit-content;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div {
        margin-top: -70px;
    }

    div.container-slides .slide h2 {
        width: 70% !important;
    }

}

@media only screen and (max-width: 850px) and (min-width: 820px) {
    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div>div>div>div>div:nth-child(9) {
        display: none;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(3)>div>div {
        margin-bottom: none !important;
        padding-bottom: none !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/am-filtrenoir.jpg"] {
        object-position: 20% !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: fit-content !important;
    }


    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/2023-04-08_Healing-Arts-Concert___WHO-A.Tardy-286-min-scaled.jpg"] {
        object-position: left !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/A70D9020PSRScut-modifie-2-min-scaled.jpg"] {
        object-position: 65% !important;
    }

    #hero-banner img[src="https://antoine-marguier.ch/wp-content/uploads/2018/04/antoine-2.jpg"] {
        object-position: 30% !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: fit-content;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div {
        margin-top: -70px;
    }

    div.container-slides .slide h2 {
        width: 70% !important;
    }
}

@media only screen and (max-width: 1050px) and (min-width: 850px) {
    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div>div>div>div>div:nth-child(9) {
        display: none;
    }

    div.container-slides .slide h2 {
        width: 70% !important;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(7)>div {
        height: fit-content;
    }

    body>div.mkdf-wrapper>div.mkdf-wrapper-inner>div>div>div>div>div>div>div:nth-child(4)>div>div>div:nth-child(1)>div>div>div>div>div>div {
        margin-top: -70px;
    }
}

#block-9>p>a:nth-child(2) {
    white-space: nowrap;
}

#block-9>p {
    text-align: left;
}

#menu-menu-anglais-2 * {
    color: black !important;
}

body.error404 a.mkdf-side-menu-button-opener {
    display: none !important;
}

.containerVideo {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-image: url(https://antoine-marguier.ch/wp-content/uploads/2018/04/IMG_3876-1.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#local-video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#local-video.controls {
    display: block;
}

#play-button {
    position: absolute;
}

.video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
}

.video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #4D39D8;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #4D39D8;
    border-radius: 50%;
    transition: all 200ms;
}

.video-play-button:hover:after {
    background-color: darken(#4D39D8, 10%);
}

.video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #4D39D8;
    border-radius: 50%;
    transition: all 200ms;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

.video-play-button:hover::before {
    background-color: white;
}

.video-play-button:hover::after {
    background-color: white;
}

.video-play-button:hover {
    cursor: pointer;
}

.video-play-button:hover span {
    border-left: 32px solid #4D39D8;
}