/* New homepage Feb 2024 */
.homepage-feature {
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    margin-top: 100px
}

    .homepage-feature div:nth-child(1) {
        padding: 30px 50px;
        flex-basis: 60%
    }

    .homepage-feature div:nth-child(2) {
        position: relative;
        flex-basis: 36%
    }

    .homepage-feature img {
        position: absolute;
        bottom: 0px;
        width: 100%
    }

@media only screen and (max-width: 768px) {
    .homepage-feature {
        flex-direction: column-reverse;
        margin-top: 15px
    }

        .homepage-feature div:nth-child(1) {
            padding: 20px 30px;
        }

        .homepage-feature img {
            position: relative !important
        }
}

@media only screen and (max-width: 480px) {
    .grid {
        padding: 30px 0 30px !important
    }
}

@media only screen and (max-width: 768px) {
    .grid {
        padding: 30px 0 30px !important
    }
}

.gradient-hover {
    border-radius: 10px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
    padding: 30px 50px;
    transition: .2s;
}

    .gradient-hover:hover {
        background: linear-gradient(135deg, #008CFF, #674CD7 60%);
        box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3);
        transform: scale(101%)
    }

    .gradient-hover p, h3, a {
        color: #1d1d1d
    }

    .gradient-hover:hover h3, .gradient-hover:hover p, .gradient-hover:hover a, .gradient-hover:hover .homepage-link {
        color: #fff !important;
    }

    .gradient-hover .homepage-link {
        border-bottom: 1px solid #fff !important;
    }

    .gradient-hover img {
        padding: 20px 0;
    }

@media only screen and (max-width: 768px) {
    .gradient-hover {
        padding: 30px;
    }

    .contact-buttons {
        flex-direction: column;
    }
}

.block.grid.grid--compact {
    padding: 40px 0 0 !important;
}

/* Contact page 2024 */
.contact-buttons {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-bottom: 1em;
}

/* Product page 2024 */
.gradient-hover-light {
    min-height: 900px;
    border-radius: 10px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
    padding: 30px 50px;
    transition: .2s;
}

    .gradient-hover-light:hover {
        background: linear-gradient(135deg, #CCE7FF, #E4DFFF 60%);
        box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3);
        transform: scale(101%)
    }

    .gradient-hover-light p, h3, a {
        color: #1d1d1d
    }

    .gradient-hover-light:hover h3, .gradient-hover-light:hover p, .gradient-hover-light:hover a, .gradient-hover-light:hover .homepage-link {
        color: #1d1d1d !important;
    }

    .gradient-hover-light .homepage-link {
        border-bottom: 1px solid #fff !important;
    }

    .gradient-hover-light img {
        padding: 20px 0;
    }

.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.feature-pod {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
    padding: 40px 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    height: 620px;
}

    .feature-pod h3, .feature-pod p {
        text-align: center;
    }

    .feature-pod img {
        position: absolute;
        bottom: 0;
        max-height: 450px;
    }

.feature-hero a {
    margin-bottom: 16px
}

.feature-hero h5 {
    color: #008cff !important
}

.feature-hero h1 {
    font-size: 2rem !important
}

.feature-hero p:first-child {
    color: #008cff !important;
    font-size: 1.2rem !important;
    margin-bottom: 0.5em !important;
    font-weight: 600;
}

.pod-heading p {
    font-weight: 600;
    margin-bottom: 0.5em !important;
    line-height: 1.3
}

.pod-heading span {
    font-size: 1.2rem
}

@media only screen and (max-width: 768px) {
    .gradient-hover-light {
        padding: 30px;
        min-height: auto
    }

    .feature-pod {
        height: auto;
    }

        .feature-pod img {
            position: relative;
            bottom: auto;
            max-height: none;
        }
}

.container img {
    align-self: center;
    margin-top: auto; /* Pushes the image to the bottom */
}


.review-box {
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/*Video button move (product pages)
.btn-video-move .container {position: relative}
.btn-video-move .row {position: relative; top: -10px}
.btn-video-move .row div:nth-child(2) {position: absolute; left: 0px; bottom: 70px}
.btn-video-move .row div:nth-child(3) {position: absolute; left: 180px; bottom: 95px}
.btn-video-move .row div:nth-child(3) a {border: 1px solid #674CD6; background: #fff; color: #674CD6!important}
@media only screen and (max-width: 1300px) {
    .btn-video-move .row div:nth-child(2) {bottom: 40px}
    .btn-video-move .row div:nth-child(3) {bottom: 65px}
}
@media only screen and (max-width: 1160px) {
    .btn-video-move .row div:nth-child(2) {bottom: 20px}
    .btn-video-move .row div:nth-child(3) {bottom: 45px}
}
@media only screen and (max-width: 1070px) {
    .btn-video-move .row div:nth-child(2) {bottom: 0px}
    .btn-video-move .row div:nth-child(3) {bottom: 25px}
}

@media only screen and (max-width: 992px) {
    .btn-video-move .row div:nth-child(2) {position: relative; left: auto; bottom: auto}
    .btn-video-move .row div:nth-child(3) {position: relative; left: auto; bottom: auto}
}*/


/*Video modal anchor
.video-anchor .col-50:first-child {anchor-name: --anchor-vid;}
.video-anchor .col-100 {position: absolute; position-anchor: --anchor-vid; bottom: anchor(bottom, -50px); left: anchor(left); margin-left: 180px; margin-bottom: 24px;}*/

/*Turns bullet points into ticks - used on Demo page and Claudia's landing pages*/
.list-ticks ul {
    list-style: none;
    padding-left: 0
}

    .list-ticks ul li:before {
        content: '\2714';
        position: absolute;
        left: 0;
        width: 1em;
        height: 1em;
    }

    .list-ticks ul li {
        position: relative;
        padding-left: 1.5em;
        margin-bottom: 1em;
        font-size: 1rem !important
    }

/*Buttons 2024*/
html .button.button--dark {
    background: #674CD7 !important;
    border: 1px solid #674CD7 !important
}

    html .button.button--dark:hover {
        background: #5742B1 !important;
        border: 1px solid #5742B1 !important
    }

html .button.button--light {
    background: #fff !important;
    border: 1px solid #674CD7 !important;
    color: #674CD7 !important
}

    html .button.button--light:hover {
        border: 1px solid #5742B1 !important;
        color: #5742B1 !important;
        box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3)
    }

/* Hyperlinks 2024 */
.homepage-link {
    border-bottom: 1px solid #fff;
    color: #674CD7;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem
}

    .homepage-link:hover {
        color: #5742B1;
        border-bottom: 1px solid #5742B1;
    }

.homepage-link-white {
    border-bottom: 1px solid rgba(255,255,255,0);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-decoration: none;
    font-weight: 600;
    color: #fff !important;
    font-size: 1.1rem !important
}

    .homepage-link-white:hover {
        border-bottom: 1px solid #fff;
    }

/* Sets padding at top of page when Nav Bar is set to transparent*/
main#content > div:first-child {
    padding-top: 130px !important;
}

@media only screen and (max-width: 768px) {
    main#content {
        padding: 80px 0 30px !important;
    }

    .main-nav .button {
        background: #674CD7 !important;
        border: 1px solid #674CD7 !important;
        font-size: 1rem;
    }
}

/* Text 2024 and highlighted text */
p, li {
    font-size: 1rem !important
}

h1 {
    font-size: 3rem !important;
    margin-bottom: 1.2rem !important
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.1rem;
}

h1, h2, h3, h4, h5, h6, footer.footer--light h6, .act-heading {
    color: #1d1d1d;
    line-height: 1.3 !important
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important
}

strong {
    font-weight: 600 !important
}

.light-color h1, .light-color h2, .light-color h3, .light-color h4, .light-color h5, .light-color h6, .light-color {
    color: #1d1d1d
}

.highlight-blue {
    color: #008CFF !important
}

.text-white {
    color: #fff
}

.highlight-gradient {
    background-image: linear-gradient(135deg, #008CFF, #674CD7);
    color: transparent;
    -webkit-background-clip: text; /* Webkit browsers (Safari, Chrome) */
    background-clip: text; /* Standard syntax */
}

.aria-gradient {
    background-image: linear-gradient(135deg, #F7B500, #B620E0, #32C5FF);
    color: transparent;
    -webkit-background-clip: text; /* Webkit browsers (Safari, Chrome) */
    background-clip: text; /* Standard syntax */
}

.white-quote blockquote::before {
    color: #fff !important
}

@media only screen and (max-width: 992px) {
    .main-nav > ul > li.btn {
        text-align: left !important;
    }
}

/*Blog demo banner */
.demo-blog {
    padding: 30px;
    border-radius: 10px;
    display: block;
    position: relative;
    transition: .1s;
    text-align: center;
    margin-bottom: 15px
}

    .demo-blog h3, .demo-blog h4 {
        color: #fff
    }

.demo-blog-grad-1 {
    background: rgb(0,140,255);
    background: linear-gradient(135deg, rgba(0,140,255,1) 0%, rgba(103,76,215,1) 50%, rgba(255,90,152,1) 100%);
}

.demo-blog-grad-2 {
    background: rgb(0,140,255);
    background: linear-gradient(135deg, rgba(0,140,255,1) 0%, rgba(103,76,215,1) 100%);
}

.demo-blog-grad-3 {
    background: rgb(103,76,215);
    background: linear-gradient(135deg, rgba(103,76,215,1) 0%, rgba(255,90,152,1) 100%);
}

.demo-blog .overlay {
    background: #674cd7;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    opacity: 0;
}

.demo-blog:hover .overlay {
    opacity: .6;
}

.demo-blog .button {
    margin-top: 10px;
}

.demo-blog .content {
    z-index: 3;
    position: relative
}

.demo-blog:hover .content div {
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3);
}


/*Gradients 2024*/
.darkgradient-background {
    background: linear-gradient(135deg, #008CFF, #674CD7 60%)
}

.darkgradient-background-pink {
    background: linear-gradient(135deg, #008CFF, #674CD7, #E61464)
}

.feature-gradient-background {
    background: linear-gradient(to right, #0453B2, #8061FF);
}

.light-gradient-background {
    background: linear-gradient(to bottom, #FFFFFF, #EFEBFF, #DFF0FE, #FFFFFF);
}

.light-gradient-background-test {
    background: linear-gradient(to bottom, #EFEBFF, #DFF0FE);
}

.bluelight-gradient-bg {
    background: linear-gradient(to bottom, #DAEDFF, #fff);
}

.light-grad-bg {
    background: linear-gradient(to bottom, #E9E5FA, #DAEDFF);
}

.blue-white-bg {
    background: linear-gradient(to bottom, #DAEDFF, #fff);
}

.light-grad-white-bg {
    background: linear-gradient(to bottom, #E9E5FA, #DAEDFF, #fff);
}

.aria-bg {
    background: linear-gradient(to bottom, #D9ECFF, #E8E4F9, #FFE6F0);
}

.aria-pink-white-bg {
    background: linear-gradient(to bottom, #FFE6F0, #fff);
}

.purple-gradient {
    background: linear-gradient(to bottom, #E9E5F9, #E3E8FC);
}

.purple-blue-gradient {
    background: linear-gradient(to bottom, #E3E8FC, #D9ECFF);
}

.blue-blue-gradient {
    background: linear-gradient(to bottom, #D9ECFF, #EDF6FE);
}

.blue-white-gradient {
    background: linear-gradient(to bottom, #EDF6FE, #fff);
}

.purple-white-gradient {
    background: linear-gradient(to bottom, #fff, #E9E5F9);
}

/*Facebook Landing Page 2024*/
@media only screen and (max-width: 768px) {
    .paddingtopheader#content {
        padding-top: 10px !important;
    }

    .splitgradbagimg {
        background: none !important
    }

    .mobbackgroundgradient {
        background-image: url("https://oakdigitalworkplace.azurewebsites.net/media/efupb2tf/gradfulbg.png") !important;
        background-repeat: no-repeat !important;
        background-size: 100%;
        background-color: #fff;
    }

    .splitgradbagimg#content {
        padding: 20px !important;
    }

    .marginremove {
        margin: 0 !important;
        padding: 0 !important
    }

    .centertext {
        text-align: center !important;
    }
}
/* Facebook Landing Page Split Background */
.paddingtopheader#content {
    padding-top: 100px !important;
}

.splitgradbagimg {
    background-image: url("https://oakdigitalworkplace.azurewebsites.net/media/efupb2tf/gradfulbg.png");
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-color: #fff;
}

.lineheight14 {
    line-height: 1.4 !important;
}

.lineheight12 {
    line-height: 1.2 !important;
}

.nobtmpadding {
    padding-bottom: 0px !important;
}


/* 2024 KEEP */
.pre-top.pre-top--scroll-bg, .pre-top {
    background: rgb(130,97,255) !important;
    background: linear-gradient(-45deg, #FF5A98, #674CD7, #008CFF 100%) !important;
}

    .pre-top.pre-top--scroll-dark a {
        color: #fff !important;
        font-family: 'Poppins' !important
    }

    .pre-top li, .pre-top a {
        color: #fff !important;
        font-family: 'Poppins' !important
    }

        .pre-top a::after {
            content: '\2192' !important
        }

    .pre-top .pre-top__list--right {
        margin-right: auto;
    }

.main-nav .show--m {
    display: none !important
}


/* 2024 END */

.blog-cta {
    padding: 24px 30px;
    border-radius: 20px;
    align-items: center;
    display: flex
}

.cs-cta p, .blog-demo-cta p {
    transition: .2s
}

.blog-cta h3 {
    margin: 7px 0
}

.blog-cta h6 {
    font-size: .8em !important
}

.cs-cta:hover p {
    box-shadow: 0px 0px 30px 0px rgba(3,84,178,.3);
    background-color: #023c80;
    border: 1px solid #023c80;
    transform: scale(1.05);
}

.blog-demo-cta:hover p {
    box-shadow: 0px 0px 30px 0px rgba(255,255,255,.3);
    transform: scale(1.05)
}

.blog-cta .row {
    width: 100%;
}

    .blog-cta .row p {
        align-self: center;
        margin: 7px 0;
        padding: 1em 2em;
        font-size: .9em !important;
        border-radius: 50px;
        font-weight: bold;
    }

.blog-cta .col-50:nth-child(2), .blog-cta .col-30 {
    justify-content: flex-end;
    display: flex;
}

.cs-cta {
    background: rgb(254,248,229);
    background: linear-gradient(135deg, rgba(229,224,252,1) 10%, rgba(211,238,234,1) 50%, rgba(254,248,229,1) 90%);
}

.blog-demo-cta {
    background: rgb(26,162,223);
    background: linear-gradient(135deg, rgba(26,162,223,1) 0%, rgba(125,99,254,1) 100%);
}

    .blog-demo-cta h3, .blog-demo-cta h6 {
        color: #fff !important
    }

    .blog-demo-cta p {
        background: #fff;
        border: 1px solid #fff;
        color: #0354b2
    }

.cs-cta p {
    background: #0354b2;
    border: 1px solid #0354b2;
    color: #fff
}

.about-us-hero p {
    margin-bottom: 0px !important
}

.about-us-hero .row .col-100 {
    display: none !important;
}

.about-us-hero .row .col-90 {
    position: relative;
    top: -135px;
}

.about-us-hero .wrap {
    text-align: left !important;
    margin-bottom: 30px !important
}

    .about-us-hero .wrap a {
        color: #03B099 !important;
        background-color: rgba(255,255,255,0);
        border: white;
        border-bottom: 2px solid #03B099;
        border-radius: 0 !important;
        padding: 16px 0 4px;
    }

p.aria-wand::after {
    background-image: url('/media/atilu3tw/aria.png');
    background-size: 16px 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
    content: "";
    margin-left: 0.3em;
    margin-top: 0.1em
}

.pricing-bespoke {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
}

.feature-pod-img-height h5 {
    min-height: 60px
}

aria {
    background: rgb(50,197,255);
    background: linear-gradient(45deg, rgba(50,197,255,1) 10%, rgba(182,32,224,1) 50%, rgba(247,181,0,1) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.padding-top-50 {
    padding-top: 30px !important
}

.img-max-150 img {
    max-width: 150px
}

.pre-title span {
    background: #fff;
    color: #777;
    border: 1px solid #c9c9c9;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 1rem
}

.custom-nav-selected {
    background: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    margin: 0 5px
}

.custom-nav-unselected:hover {
    background: #fff;
}

.custom-nav-unselected {
    margin: 0 5px;
    padding: 10px 12px;
    border-radius: 12px;
}

.pricing-silver .pricing-header span {
    background: #fff;
    color: #777;
    border: 1px solid #c9c9c9
}

.pricing-gold .pricing-header span {
    background: #D4AF37;
    color: #fff;
    background: linear-gradient(135deg, rgba(254,218,98,1) 0%, rgba(232,195,73,1) 30%, rgba(232,195,73,1) 70%, rgba(254,218,98,1) 100%);
}

.pricing-gold {
    box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.3) !important;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.3) !important;
    -moz-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.3) !important;
    position: relative;
    top: -20px
}

.pricing-recommended {
    background: #D4AF37;
    color: #fff;
    background: linear-gradient(135deg, rgba(254,218,98,1) 0%, rgba(232,195,73,1) 30%, rgba(232,195,73,1) 70%, rgba(254,218,98,1) 100%);
    border-radius: 15px 15px 0 0;
    padding: 5px;
    text-align: center;
    height: 36px
}

    .pricing-recommended p {
        color: #fff;
        margin-bottom: 0;
    }

.pricing-platinum .pricing-header span {
    background: #E5E4E2;
    color: #555
}

.pricing-platinum-plus .pricing-header span {
    background: rgb(245,245,245);
    background: linear-gradient(135deg, rgba(245,245,245,1) 6%, rgba(213,213,213,1) 18%, rgba(229,228,226,1) 25%, rgba(247,247,247,1) 49%, rgba(229,228,226,1) 73%, rgba(245,245,245,1) 85%, rgba(229,228,226,1) 97%);
    color: #555
}

.pricing-container {
    border-radius: 15px;
    background: #fff;
    box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    -webkit-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    position: relative
}

.pricing-header {
    padding: 50px 20px 30px;
}

    .pricing-header h5 {
        padding-bottom: 20px;
        margin: 0 auto;
        text-align: center;
    }

    .pricing-header span {
        border-radius: 100px;
        padding: 8px 20px
    }

    .pricing-header h3 {
        text-align: center;
        font-size: 1.3rem !important;
        margin-top: 20px
    }

.pricing-divider {
    border-top: 1px solid #E9E9E9;
    width: 81%;
    margin: 0 auto;
    min-height: 28px;
}

    .pricing-divider p {
        font-size: 0.8rem !important;
        text-align: center;
        position: relative;
        top: -11px;
        margin-bottom: 5px
    }

    .pricing-divider span {
        background: #fff;
        padding: 0 5px
    }

.pricing-body {
    padding: 0 30px 30px;
    min-height: 375px
}

    .pricing-body p {
        margin-bottom: 7px
    }

.pricing-btn {
    display: flex;
    justify-content: center;
    position: relative;
    top: 25px;
}

.custom-pods {
    border-radius: 20px;
    background: #f5f5f5;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

    .custom-pods .tick-bullets {
        flex-basis: 48%;
        border-radius: 15px;
        background: #f5f5f5;
        padding: 20px;
        border: 1px solid #f5f5f5
    }

    .custom-pods .white-pod-bg {
        background: #fff !important;
        padding: 20px 30px !important;
        border: 1px solid #e9e9e9 !important
    }

.plyr--video .plyr__controls {
    border-bottom-left-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.pod-container {
    border-radius: 10px;
    background: #fff;
    box-shadow: -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
}

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    .cs-cta .col-50:nth-child(2), .blog-cta .col-30 {
        justify-content: flex-start !important
    }

    .about-us-hero .row .col-90 {
        display: none !important;
    }

    .about-us-hero .row .col-100 {
        display: block !important;
    }

    .custom-pods {
        flex-direction: column;
        padding: 10px !important
    }

        .custom-pods .tick-bullets {
            flex-basis: 100% !important
        }

    .pricing-header, .pricing-body {
        min-height: auto;
    }

    .pricing-gold {
        top: 0
    }

    .pricing-container {
        margin-bottom: 30px;
    }

    .pod-container {
        flex-direction: column
    }

    .quote-container-2 {
        display: block !important;
        justify-content: left;
    }

        .quote-container-2 p:first-child {
            text-align: center
        }

        .quote-container-2 img {
            margin: 0 auto
        }
}


.cookie-consent {
    z-index: 10002
}

.margin-bottom-0 {
    margin-bottom: 0 !important
}

.padding-top-solutions {
    padding-top: 50px !important
}

.bg-100pc-top .block__background {
    background-size: 100% !important;
    background-position: top !important
}

.bg-100pc-bottom .block__background {
    background-size: 100% !important;
    background-position: bottom !important
}

.bg-100pc-center .block__background {
    background-size: 100% !important;
    background-position: center !important
}

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    .bg-100pc-top .block__background {
        background-image: none !important
    }

    .bg-100pc-center .block__background {
        background-image: none !important
    }

    .content-padding-top {
        padding-top: 80px !important
    }

    .pod-height-248 .grid-item--boxed article {
        min-height: auto !important;
        position: relative;
    }

    .g-recaptcha {
        float: none !important;
        position: relative;
        top: 0px !important;
        margin-bottom: 20px
    }

    .margin-top-20 {
        margin-top: 20px
    }

    .video-cta {
        flex-direction: column;
        gap: 0em !important
    }

        .video-cta .wrap {
            text-align: left;
        }

    .center-cta {
        align-items: center
    }
}

.captcha {
    background: #f5f5f5;
    border-radius: 10px;
    min-height: 102px;
    border: 1px solid #e9e9e9;
    padding: 15px;
    width: 100%;
}

.g-recaptcha {
    float: right;
    position: relative;
    top: -45px;
}




.block__body + .button-wrap {
    margin-top: 10px;
}



/* General */
.video-cta {
    display: flex;
    gap: 1em
}

    .video-cta .wrap a {
        border: 1px solid #674CD6;
        background: #fff;
        color: #674CD6 !important
    }

.center-cta {
    justify-content: center;
}

.careers-desc li {
    margin-bottom: .5em;
    padding-left: .5em;
    font-size: 1rem !important
}

.careers-desc h4 {
    margin-top: 1.5em;
    font-size: 1.3rem
}

.careers-desc h1 {
    font-size: 2rem !important;
    margin-bottom: .3em !important
}

.careers-desc h2 {
    font-size: 1.2rem;
    color: #008cff
}

.notes-box {
    background: #f5f5f5;
    padding: 8px 15px;
    border-radius: 5px;
}

    .notes-box p {
        font-size: .9rem !important;
        font-weight: 500
    }

.hidden .wrap {
    visibility: hidden !important
}

.padding-bottom-0 {
    padding-bottom: 0 !important
}

.policy-table {
    border: 1px solid #e6e6e6;
    margin-bottom: 30px;
    background: #fff;
}

    .policy-table p {
        margin-bottom: 0
    }

    .policy-table tr:first-child {
        background: #e6e6e6;
    }

.img-border-radius img {
    border-radius: 16px
}

.hide-video-controls .plyr__controls {
    display: none !important
}

.no-video-shadow .grid-item--video.video-shadow video {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.video-shadow .plyr--video {
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px
}

.main-nav .menu-content {
    line-height: 1.3
}

.main-nav .wrap .icon-list p {
    padding: 10px 0 0 !important;
    color: #333
}

.main-nav .wrap li.icon-list {
    padding: 5px
}

.icon-header.nm {
    display: none
}

.icon-ul {
    padding: 0 20px 20px !important
}

    .icon-ul a {
        color: #555
    }

.icon-list > a:first-child {
    font-size: 16px;
}

.main-nav .wrap li.icon-list a {
    padding: 10px !important
}

.resource__body {
    max-width: 1400px !important
}

.logos.block {
    padding: 0 20px 30px !important
}

.desktop-hide {
    display: none
}

.grid-item--pod {
    border-radius: 8px
}

.hide-content {
    display: none;
    visibility: hidden;
    max-height: 0;
    line-height: 0;
}

.grid-item--pod p, li {
    font-size: .9rem !important
}

.button {
    border-radius: 100px !important;
    letter-spacing: 0em !important
}

input[type=submit] {
    border-radius: 30px !important;
    letter-spacing: 0em !important
}

.hero {
    background: #fff !important
}

.main-nav ul li.selected > a {
    color: #008CFF !important
}

.button.button--grey {
    color: #d6d6db !important
}

.button.button--dkbluetxt {
    color: #0354B2 !important
}

    .button.button--dkbluetxt:hover {
        color: #0354B2 !important;
        background: #EDEDED !important
    }

.button.button--dual {
    color: #A9DFF6 !important
}

figcaption {
    display: none !important;
}

ul.logos li {
    padding: 10px 20px !important;
    margin: 0 10px !important
}

.footer-grid .col-10:nth-child(4) li {
    display: flex;
    align-items: baseline
}

    .footer-grid .col-10:nth-child(4) li:before {
        background-image: url(/media/ffzf2wwq/up-right-from-square.png);
        background-size: 12px 12px;
        width: 16px;
        height: 12px;
        content: "";
        background-repeat: no-repeat;
    }

.footer-item p {
    font-size: 0.8rem !important
}

.footer-item h2 {
    font-size: 0.8rem !important
}

.footer-item li, .footer-item.footer-item--links li a {
    font-size: 0.8rem !important
}

.footer-item.footer-item--links li a {
    padding: 0.5em 0 !important;
    line-height: 1.1em !important;
    display: block;
}

.footer-item--logos ul li a img, .footer-item--logos ul li > div img {
    padding: 10px 0 !important;
    width: 90% !important
}

.igloo-symbol {
    display: none !important
}

.to-top {
    display: none !important
}

.footer-grid {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

    .footer-grid .col-10 {
        flex-basis: 15% !important;
        max-width: 15% !important
    }

.footer-item .footer-item--logos .text-right img {
    width: 100% !important
}

.top--light .main-nav > ul > li a {
    color: #1D1D1D;
    font-weight: 500
}

.top--light .main-nav > ul > li ul li a {
    color: #1D1D1D
}

.scroll .top--light .main-nav > ul > li > a {
    color: #1D1D1D
}

.top--light .main-nav > ul > li:hover {
    background: #F2F9FF
}

.cookie-consent button {
    border-color: #fff !important
}

.submitted-message {
    border: 1px solid #e9e9e9;
    padding: 15px;
    transition: 1s;
    border-radius: 3px;
    background: #fff;
}

.share-facebook, .share-google {
    display: none !important
}

.generic-hover:hover {
    background: rgb(40,39,39,0.2)
}

select {
    height: 40px !important;
    padding: 0 1em !important;
    border-radius: 30px !important
}

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    .footer-grid .col-10:nth-child(4) li {
        display: block;
    }

        .footer-grid .col-10:nth-child(4) li:before {
            background-image: none;
            background-size: auto;
            width: auto;
            height: auto;
            content: "";
            background-repeat: no-repeat;
        }

    .umbraco-forms-navigation {
        margin-top: 20px
    }
}


/* Forms */
input[type="text"] {
    border-radius: 30px !important;
    height: 40px !important;
    border: 1px solid #e9e9e9 !important;
    margin: .5em 0
}

.umbraco-forms-field-wrapper select {
    margin: .5em 0
}

h4.umbraco-forms-caption {
    margin-bottom: 1em;
}

.umbraco-forms-fieldset {
    padding: 0 !important;
    margin-bottom: 1.5em;
}

.field-validation-error {
    padding: 0 !important;
    margin: 0 !important
}

.umbraco-forms-navigation {
    padding: 0 !important
}

.umbraco-forms-field-wrapper textarea {
    border: 1px solid #e9e9e9 !important;
    border-radius: 10px;
}

.demo-form .umbraco-forms-fieldset:nth-child(4), .demo-form .umbraco-forms-fieldset:nth-child(6) {
    display: none
}

.captcha-form .umbraco-forms-fieldset:nth-child(5) {
    margin-bottom: 0 !important
}


.pod-shadow article {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    box-shadow: 0px 0px 30px 0px rgba(40,39,39,0.1);
    transition: .2s;
    border-radius: 8px
}


/* Features */
.features-row {
    display: flex;
    border-bottom: 1px solid #c9c9c9;
    padding: 20px;
    align-self: center
}

    .features-row p {
        width: 33%;
        margin-bottom: 0;
    }

        .features-row p:nth-child(2) {
            text-align: center;
            padding: 0 10px
        }

        .features-row p:nth-child(3) {
            text-align: center;
            padding: 0 10px
        }



/* Customer Stories */
.customer-story-details p {
    font-size: 0.9rem !important;
}

.customer-story-details .pod .pod__image i {
    font-size: 2rem;
}

.customer-story-details .pod .pod__text {
    margin-top: 0;
}

.customer-story-text .pod .pod__image img {
    padding: 0 30px
}

.customer-story-text .pod.grid-item--boxed .pod__text {
    padding: 0 30px 30px;
    min-height: 240px;
    position: relative;
    bottom: 0;
    font-size: 0.9rem;
}

.customer-story-pod .button-wrap {
    position: absolute;
    bottom: 30px
}

.customer-pod-blue-bg .col-s-100:nth-child(1) article {
    background: #0354b2;
}

.customer-pod-blue-bg article {
    min-height: 250px;
    border-radius: 8px
}

.customer-pod .grid-item--boxed article {
    min-height: 560px;
    position: relative;
}

.customer-pod .grid-item--boxed h4 {
    height: 55px;
}

    .customer-pod .grid-item--boxed h4 img {
        max-height: 55px;
        width: auto;
        max-width: 33%;
    }

.customer-pod .grid-item--boxed h6 {
    position: absolute;
    bottom: 28px
}

.customer-pod .homepage-link {
    border-bottom: 1px solid #fff;
    color: #674CD7;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem
}

    .customer-pod .homepage-link:hover {
        color: #5742B1;
        border-bottom: 1px solid #5742B1;
    }

.pod__image {
    border-radius: 8px 8px 0 0
}

.feature-customer-pod .grid-item--boxed article {
    min-height: 660px !important;
    position: relative;
}

.feature-customer-pod h4 {
    margin-bottom: 30px !important
}

.pod-height-560 .grid-item--boxed article {
    min-height: 560px;
    position: relative;
}

.pod-height-520 .grid-item--boxed article {
    min-height: 520px;
    position: relative;
}

.pod-height-500 .grid-item--boxed article {
    min-height: 500px;
    position: relative;
}

.pod-height-430 .grid-item--boxed article {
    min-height: 430px;
    position: relative;
}

.pod-height-480 .grid-item--boxed article {
    min-height: 480px;
    position: relative;
}

.pod-height-460 .grid-item--boxed article {
    min-height: 460px;
    position: relative;
}

.pod-height-440 .grid-item--boxed article {
    min-height: 440px;
    position: relative;
}

.pod-height-420 .grid-item--boxed article {
    min-height: 420px;
    position: relative;
}

.pod-height-400 .grid-item--boxed article {
    min-height: 400px;
    position: relative;
}

.pod-height-380 .grid-item--boxed article {
    min-height: 380px;
    position: relative;
}

.pod-height-360 .grid-item--boxed article {
    min-height: 360px;
    position: relative;
}

.pod-height-340 .grid-item--boxed article {
    min-height: 340px;
    position: relative;
}

.pod-height-320 .grid-item--boxed article {
    min-height: 320px;
    position: relative;
}

.pod-height-300 .grid-item--boxed article {
    min-height: 300px;
    position: relative;
}

.pod-height-280 .grid-item--boxed article {
    min-height: 280px;
    position: relative;
}

.pod-height-260 .grid-item--boxed article {
    min-height: 260px;
    position: relative;
}

.pod-height-240 .grid-item--boxed article {
    min-height: 240px;
    position: relative;
}

.button-bottom .button-wrap {
    position: absolute;
    bottom: 30px;
}

/* Blog */
.feed.gray-bg {
    background: rgb(247,247,248);
    background: -moz-linear-gradient(0deg, rgba(247,247,248,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(247,247,248,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(247,247,248,1) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f8",endColorstr="#ffffff",GradientType=1);
}

.post__body {
    max-width: 800px !important
}

.post__image img {
    width: 80%;
}

article.box {
    border-radius: 8px
}

    article.box .box__image img {
        border-radius: 8px 8px 0 0
    }

.post__meta {
    font-weight: normal;
}

.post-header {
    padding: 100px 0 90px 0;
    margin-bottom: 5rem
}

@media only screen and (min-width: 768px) {
    .table-of-contents {
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
    }
}

.table-of-contents {
    margin-bottom: 25px;
}

    .table-of-contents li {
        font-size: 0.8em !important;
        margin-bottom: 8px
    }

.author-box .wrapper {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 15px;
}

.author-box .share h6 {
    text-align: left;
}

.author-box .wrapper img {
    margin-bottom: 10px;
}

.author-box .wrapper h6 {
    margin-bottom: 10px;
}

.author-box .share ul.share-list {
    justify-content: start;
}

.tag-list {
    padding: 0;
    margin: 0 0 25px 0;
    list-style-type: none;
    display: block;
}

    .tag-list li {
        display: inline-block;
        margin: 0 5px 8px 0;
    }

        .tag-list li a {
            display: block;
            padding: 0.5em 1.5em;
            border-radius: 2em;
            border: 1px solid #674CD7;
            background: #674CD7;
            color: #fff;
            font-size: 0.9em;
        }

            .tag-list li a:hover {
                background: #fff;
                color: #674CD7;
            }
/* Footer */
.footer-title, .footer-item .h6 {
    margin-bottom: 1em;
    font-size: 0.8rem;
    color: #0354B2;
    font-weight: 600;
}

.footer-item ul {
    color: #1d1d1d
}

footer .footer-item--links .navigation ul li a {
    font-weight: 400;
    color: #1d1d1d;
}

p .tag-item {
    display: inline-block;
    padding: 0 8px 0;
    border-right: 1px solid #dfdfdf;
}

    p .tag-item:last-child {
        border-right: 0;
    }





/*backgrounds to overwrite padding */
.bg-gray {
    background-color: #f7f7f8 !important;
}

.bg-white {
    background-color: #ffffff !important;
}


/* Media Queries */
@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    .no-mobile-bg .block__background {
        background: none !important
    }

    .icon-list > a:first-child {
        margin: 0px 0 0px 20px !important;
    }

    .min-height-801 {
        min-height: auto
    }

    .min-height-815 {
        min-height: auto
    }

    .min-height-500 {
        min-height: auto
    }

    .icon-ul {
        padding: 0 20px 0px !important
    }

    .post__image img {
        width: 100% !important;
    }

    .customer-pod .grid-item--boxed article {
        min-height: auto;
    }

    .customer-pod .grid-item--boxed h4 {
        height: auto;
    }

        .customer-pod .grid-item--boxed h4 img {
            max-height: 55px;
            width: auto;
            max-width: 50%;
        }

    .customer-pod .grid-item--boxed h6 {
        position: relative;
        bottom: auto
    }

    .feature-customer-pod .grid-item--boxed article {
        min-height: auto !important
    }

    .pod-height-520 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-500 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-430 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-480 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-460 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-440 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-420 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-400 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-380 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-360 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-340 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-320 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-300 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-280 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-260 .grid-item--boxed article {
        min-height: auto;
    }

    .pod-height-240 .grid-item--boxed article {
        min-height: auto;
    }

    .main-mobile-only {
        display: block !important
    }

    .customer-story-text .pod.grid-item--boxed .pod__text {
        min-height: 0;
    }

    .customer-story-text .button-wrap, .button-bottom .button-wrap {
        position: relative;
        bottom: 0
    }

    .customer-story-details .col-20.col-m-33.col-s-100 {
        flex-basis: 50% !important
    }

    .customer-story-details .col-25.col-m-50.col-s-100 {
        flex-basis: 50% !important
    }

    .mobile-reverse .row {
        display: flex !important;
        flex-direction: column-reverse !important
    }

    .footer-grid .col-10 {
        flex-basis: 50% !important;
        max-width: 50% !important
    }

    .grid-item--text p, h3, h4, h5, h6 {
        text-align: centre !important
    }

    .cookie-consent__text {
        margin-bottom: 10px !important
    }

    #conversations-wrap {
        display: none !important
    }

    .blog-form .checkboxlist {
        flex-direction: column !important;
    }

    .blog-form .cb-wrap {
        margin-bottom: 15px !important;
    }

    .mobile-hide {
        display: none
    }

    .desktop-hide {
        display: block !important
    }
}

@media only screen and (max-device-width: 1140px), only screen and (max-width: 1140px) {
    .customer-story-text .pod.grid-item--boxed .pod__text {
        min-height: 0;
    }

    .customer-story-pod .button-wrap {
        position: relative;
        bottom: 0px
    }

    .pricing-min-height .pod.grid-item--boxed .pod__text {
        min-height: 0;
    }

    .pricing-min-height .button-wrap {
        position: relative;
        bottom: 0px
    }
}

.button, input[type="submit"], input[type="button"] {
    line-height: 1.3;
}

@media (max-width: 800px) {
    .block.extra .cb__wrapper {
        background-color: rgb(255 255 255) !important;
        padding: 8px;
    }
}

.pod .pod__image i {
    color: #674cd7;
}


.block > .button-wrap {
    display: flex;
    justify-content: center;
}

.resource__body {
    max-width: 850px;
    padding: 0 20px;
    margin: 0 auto;
}

.block__body .post__image img {
    width: 80%;
}




.umbraco-forms-field-wrapper input[type="text"],
.umbraco-forms-field-wrapper input[type="email"],
.umbraco-forms-field-wrapper input[type="url"],
.umbraco-forms-field-wrapper input[type="tel"],
.umbraco-forms-field-wrapper input[type="password"], .umbraco-forms-field-wrapper input[type="search"],
.umbraco-forms-field-wrapper input[type="number"], .umbraco-forms-field-wrapper input[type="date"], .umbraco-forms-field-wrapper textarea, .umbraco-forms-field-wrapper select {
    margin-bottom: 0 !important;
}


.addthis_24x24_style .at-icon {
    stroke: none;
}

.modal-dialog {
    max-width: 800px;
    margin: 30px auto !important;
}

.gallery {
    margin-bottom: 25px;
}


.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}



.white-bg .grid-item--boxed {
    background: white !important;
}

.resource .block__header {
    padding: 60px 20px 0 !important;
}

.pod.grid-item--boxed .pod__text {
    margin: 0;
    padding: 30px;
}

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], textarea, select {
    background: white !important;
}

.box .box__text {
    padding: 30px !important;
    position: relative;
}

html div.pod div.pod__text p,
html div.pod div.pod__text p:first-of-type {
    margin-bottom: 1.5em !important;
}

.umbraco-forms-form textarea {
    height: 250px;
}

.grey-box-border-radius .container {
    background: #F8F8F8;
    border-radius: 20px;
}

.grey-border-grid .grid-item {
    background: #F8F8F8;
    border-radius: 20px;
    margin-bottom: 0;
}

/************

PJYR from retox.css 

*************/

@keyframes plyr-progress {
    to {
        background-position: 25px 0;
        background-position: var(--plyr-progress-loading-size, 25px) 0
    }
}

@keyframes plyr-popup {
    0% {
        opacity: .5;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes plyr-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.plyr svg {
    stroke: none;
}

.plyr {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    align-items: center;
    direction: ltr;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-family: var(--plyr-font-family, inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-weight: var(--plyr-font-weight-regular, 400);
    line-height: 1.7;
    line-height: var(--plyr-line-height, 1.7);
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease;
    z-index: 0;
    border-radius: 8px;
}

    .plyr audio,
    .plyr iframe,
    .plyr video {
        display: block;
        height: 100%;
        width: 100%
    }

    .plyr button {
        font: inherit;
        line-height: inherit;
        width: auto
    }

    .plyr:focus {
        outline: 0
    }

.plyr--full-ui {
    box-sizing: border-box
}

    .plyr--full-ui *,
    .plyr--full-ui :after,
    .plyr--full-ui :before {
        box-sizing: inherit
    }

    .plyr--full-ui a,
    .plyr--full-ui button,
    .plyr--full-ui input,
    .plyr--full-ui label {
        touch-action: manipulation
    }

.plyr__badge {
    background: #4a5464;
    background: var(--plyr-badge-background, #4a5464);
    border-radius: 2px;
    border-radius: var(--plyr-badge-border-radius, 2px);
    color: #fff;
    color: var(--plyr-badge-text-color, #fff);
    font-size: 9px;
    font-size: var(--plyr-font-size-badge, 9px);
    line-height: 1;
    padding: 3px 4px
}

.plyr--full-ui ::-webkit-media-text-track-container {
    display: none
}

.plyr__captions {
    animation: plyr-fade-in .3s ease;
    bottom: 0;
    display: none;
    font-size: 13px;
    font-size: var(--plyr-font-size-small, 13px);
    left: 0;
    padding: 10px;
    padding: var(--plyr-control-spacing, 10px);
    position: absolute;
    text-align: center;
    transition: transform .4s ease-in-out;
    width: 100%
}

    .plyr__captions span:empty {
        display: none
    }

@media(min-width:480px) {
    .plyr__captions {
        font-size: 15px;
        font-size: var(--plyr-font-size-base, 15px);
        padding: 20px;
        padding: calc(var(--plyr-control-spacing, 10px)*2)
    }
}

@media(min-width:768px) {
    .plyr__captions {
        font-size: 18px;
        font-size: var(--plyr-font-size-large, 18px)
    }
}

.plyr--captions-active .plyr__captions {
    display: block
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
    transform: translateY(-40px);
    transform: translateY(calc(var(--plyr-control-spacing, 10px)*-4))
}

.plyr__caption {
    background: rgba(0, 0, 0, .8);
    background: var(--plyr-captions-background, rgba(0, 0, 0, .8));
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #fff;
    color: var(--plyr-captions-text-color, #fff);
    line-height: 185%;
    padding: .2em .5em;
    white-space: pre-wrap
}

    .plyr__caption div {
        display: inline
    }

.plyr__control {
    background: 0 0;
    border: 0;
    border-radius: 3px;
    border-radius: var(--plyr-control-radius, 3px);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    padding: 7px;
    padding: calc(var(--plyr-control-spacing, 10px)*.7);
    position: relative;
    transition: all .3s ease
}

    .plyr__control svg {
        fill: currentColor;
        display: block;
        height: 18px;
        height: var(--plyr-control-icon-size, 18px);
        pointer-events: none;
        width: 18px;
        width: var(--plyr-control-icon-size, 18px)
    }

    .plyr__control:focus {
        outline: 0
    }

    .plyr__control.plyr__tab-focus {
        outline: 3px dotted #0354b2;
        outline: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #0354b2))) dotted 3px;
        outline-offset: 2px
    }

a.plyr__control {
    text-decoration: none
}

    .plyr__control.plyr__control--pressed .icon--not-pressed,
    .plyr__control.plyr__control--pressed .label--not-pressed,
    .plyr__control:not(.plyr__control--pressed) .icon--pressed,
    .plyr__control:not(.plyr__control--pressed) .label--pressed,
    a.plyr__control:after,
    a.plyr__control:before {
        display: none
    }

.plyr--full-ui ::-webkit-media-controls {
    display: none
}

.plyr__controls {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    text-align: center
}

    .plyr__controls .plyr__progress__container {
        flex: 1;
        min-width: 0
    }

    .plyr__controls .plyr__controls__item {
        margin-left: 2.5px;
        margin-left: calc(var(--plyr-control-spacing, 10px)/4)
    }

        .plyr__controls .plyr__controls__item:first-child {
            margin-left: 0;
            margin-right: auto
        }

        .plyr__controls .plyr__controls__item.plyr__progress__container {
            padding-left: 2.5px;
            padding-left: calc(var(--plyr-control-spacing, 10px)/4)
        }

        .plyr__controls .plyr__controls__item.plyr__time {
            padding: 0 5px;
            padding: 0 calc(var(--plyr-control-spacing, 10px)/2)
        }

            .plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
            .plyr__controls .plyr__controls__item.plyr__time + .plyr__time,
            .plyr__controls .plyr__controls__item.plyr__time:first-child {
                padding-left: 0
            }

    .plyr [data-plyr=airplay],
    .plyr [data-plyr=captions],
    .plyr [data-plyr=fullscreen],
    .plyr [data-plyr=pip],
    .plyr__controls:empty {
        display: none
    }

.plyr--airplay-supported [data-plyr=airplay],
.plyr--captions-enabled [data-plyr=captions],
.plyr--fullscreen-enabled [data-plyr=fullscreen],
.plyr--pip-supported [data-plyr=pip] {
    display: inline-block
}

.plyr__menu {
    display: flex;
    position: relative
}

    .plyr__menu .plyr__control svg {
        transition: transform .3s ease
    }

    .plyr__menu .plyr__control[aria-expanded=true] svg {
        transform: rotate(90deg)
    }

    .plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
        display: none
    }

.plyr__menu__container {
    animation: plyr-popup .2s ease;
    background: hsla(0, 0%, 100%, .9);
    background: var(--plyr-menu-background, hsla(0, 0%, 100%, .9));
    border-radius: 4px;
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, .15));
    color: #4a5464;
    color: var(--plyr-menu-color, #4a5464);
    font-size: 15px;
    font-size: var(--plyr-font-size-base, 15px);
    margin-bottom: 10px;
    position: absolute;
    right: -3px;
    text-align: left;
    white-space: nowrap;
    z-index: 3
}

    .plyr__menu__container > div {
        overflow: hidden;
        transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1)
    }

    .plyr__menu__container:after {
        border: 4px solid transparent;
        border-top-color: hsla(0, 0%, 100%, .9);
        border: var(--plyr-menu-arrow-size, 4px) solid transparent;
        border-top-color: var(--plyr-menu-background, hsla(0, 0%, 100%, .9));
        content: "";
        height: 0;
        position: absolute;
        right: 14px;
        right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);
        top: 100%;
        width: 0
    }

    .plyr__menu__container [role=menu] {
        padding: 7px;
        padding: calc(var(--plyr-control-spacing, 10px)*.7)
    }

    .plyr__menu__container [role=menuitem],
    .plyr__menu__container [role=menuitemradio] {
        margin-top: 2px
    }

        .plyr__menu__container [role=menuitem]:first-child,
        .plyr__menu__container [role=menuitemradio]:first-child {
            margin-top: 0
        }

    .plyr__menu__container .plyr__control {
        align-items: center;
        color: #4a5464;
        color: var(--plyr-menu-color, #4a5464);
        display: flex;
        font-size: 13px;
        font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
        padding: 4.66667px 10.5px;
        padding: calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);
        -webkit-user-select: none;
        user-select: none;
        width: 100%
    }

        .plyr__menu__container .plyr__control > span {
            align-items: inherit;
            display: flex;
            width: 100%
        }

        .plyr__menu__container .plyr__control:after {
            border: 4px solid transparent;
            border: var(--plyr-menu-item-arrow-size, 4px) solid transparent;
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%)
        }

    .plyr__menu__container .plyr__control--forward {
        padding-right: 28px;
        padding-right: calc(var(--plyr-control-spacing, 10px)*.7*4)
    }

        .plyr__menu__container .plyr__control--forward:after {
            border-left-color: #728197;
            border-left-color: var(--plyr-menu-arrow-color, #728197);
            right: 6.5px;
            right: calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))
        }

        .plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,
        .plyr__menu__container .plyr__control--forward:hover:after {
            border-left-color: currentColor
        }

    .plyr__menu__container .plyr__control--back {
        font-weight: 400;
        font-weight: var(--plyr-font-weight-regular, 400);
        margin: 7px;
        margin: calc(var(--plyr-control-spacing, 10px)*.7);
        margin-bottom: 3.5px;
        margin-bottom: calc(var(--plyr-control-spacing, 10px)*.7/2);
        padding-left: 28px;
        padding-left: calc(var(--plyr-control-spacing, 10px)*.7*4);
        position: relative;
        width: calc(100% - 14px);
        width: calc(100% - var(--plyr-control-spacing, 10px)*.7*2)
    }

        .plyr__menu__container .plyr__control--back:after {
            border-right-color: #728197;
            border-right-color: var(--plyr-menu-arrow-color, #728197);
            left: 6.5px;
            left: calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))
        }

        .plyr__menu__container .plyr__control--back:before {
            background: #dcdfe5;
            background: var(--plyr-menu-back-border-color, #dcdfe5);
            box-shadow: 0 1px 0 #fff;
            box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
            content: "";
            height: 1px;
            left: 0;
            margin-top: 3.5px;
            margin-top: calc(var(--plyr-control-spacing, 10px)*.7/2);
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 100%
        }

        .plyr__menu__container .plyr__control--back.plyr__tab-focus:after,
        .plyr__menu__container .plyr__control--back:hover:after {
            border-right-color: currentColor
        }

    .plyr__menu__container .plyr__control[role=menuitemradio] {
        padding-left: 7px;
        padding-left: calc(var(--plyr-control-spacing, 10px)*.7)
    }

        .plyr__menu__container .plyr__control[role=menuitemradio]:after,
        .plyr__menu__container .plyr__control[role=menuitemradio]:before {
            border-radius: 100%
        }

        .plyr__menu__container .plyr__control[role=menuitemradio]:before {
            background: rgba(0, 0, 0, .1);
            content: "";
            display: block;
            flex-shrink: 0;
            height: 16px;
            margin-right: 10px;
            margin-right: var(--plyr-control-spacing, 10px);
            transition: all .3s ease;
            width: 16px
        }

        .plyr__menu__container .plyr__control[role=menuitemradio]:after {
            background: #fff;
            border: 0;
            height: 6px;
            left: 12px;
            opacity: 0;
            top: 50%;
            transform: translateY(-50%) scale(0);
            transition: transform .3s ease, opacity .3s ease;
            width: 6px
        }

        .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
            background: #0354b2;
            background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #0354b2)))
        }

        .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
            opacity: 1;
            transform: translateY(-50%) scale(1)
        }

        .plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,
        .plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
            background: rgba(35, 40, 47, .1)
        }

    .plyr__menu__container .plyr__menu__value {
        align-items: center;
        display: flex;
        margin-left: auto;
        margin-right: calc(-7px - -2);
        margin-right: calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2);
        overflow: hidden;
        padding-left: 24.5px;
        padding-left: calc(var(--plyr-control-spacing, 10px)*.7*3.5);
        pointer-events: none
    }

.plyr--full-ui input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: 0 0;
    border: 0;
    border-radius: 26px;
    border-radius: calc(var(--plyr-range-thumb-height, 13px)*2);
    color: #0354b2;
    color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #0354b2)));
    display: block;
    height: 19px;
    height: calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));
    margin: 0;
    min-width: 0;
    padding: 0;
    transition: box-shadow .3s ease;
    width: 100%
}

    .plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
        background: 0 0;
        background-image: linear-gradient(90deg, currentColor 0, transparent 0);
        background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0));
        border: 0;
        border-radius: 2.5px;
        border-radius: calc(var(--plyr-range-track-height, 5px)/2);
        height: 5px;
        height: var(--plyr-range-track-height, 5px);
        -webkit-transition: box-shadow .3s ease;
        transition: box-shadow .3s ease;
        -webkit-user-select: none;
        user-select: none
    }

    .plyr--full-ui input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #fff;
        background: var(--plyr-range-thumb-background, #fff);
        border: 0;
        border-radius: 100%;
        box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2);
        box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
        height: 13px;
        height: var(--plyr-range-thumb-height, 13px);
        margin-top: -4px;
        margin-top: calc(var(--plyr-range-thumb-height, 13px)/2*-1 - var(--plyr-range-track-height, 5px)/2*-1);
        position: relative;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        width: 13px;
        width: var(--plyr-range-thumb-height, 13px)
    }

    .plyr--full-ui input[type=range]::-moz-range-track {
        background: 0 0;
        border: 0;
        border-radius: 2.5px;
        border-radius: calc(var(--plyr-range-track-height, 5px)/2);
        height: 5px;
        height: var(--plyr-range-track-height, 5px);
        -moz-transition: box-shadow .3s ease;
        transition: box-shadow .3s ease;
        user-select: none
    }

    .plyr--full-ui input[type=range]::-moz-range-thumb {
        background: #fff;
        background: var(--plyr-range-thumb-background, #fff);
        border: 0;
        border-radius: 100%;
        box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2);
        box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
        height: 13px;
        height: var(--plyr-range-thumb-height, 13px);
        position: relative;
        -moz-transition: all .2s ease;
        transition: all .2s ease;
        width: 13px;
        width: var(--plyr-range-thumb-height, 13px)
    }

    .plyr--full-ui input[type=range]::-moz-range-progress {
        background: currentColor;
        border-radius: 2.5px;
        border-radius: calc(var(--plyr-range-track-height, 5px)/2);
        height: 5px;
        height: var(--plyr-range-track-height, 5px)
    }

    .plyr--full-ui input[type=range]::-ms-track {
        color: transparent
    }

    .plyr--full-ui input[type=range]::-ms-fill-upper,
    .plyr--full-ui input[type=range]::-ms-track {
        background: 0 0;
        border: 0;
        border-radius: 2.5px;
        border-radius: calc(var(--plyr-range-track-height, 5px)/2);
        height: 5px;
        height: var(--plyr-range-track-height, 5px);
        -ms-transition: box-shadow .3s ease;
        transition: box-shadow .3s ease;
        user-select: none
    }

    .plyr--full-ui input[type=range]::-ms-fill-lower {
        background: 0 0;
        background: currentColor;
        border: 0;
        border-radius: 2.5px;
        border-radius: calc(var(--plyr-range-track-height, 5px)/2);
        height: 5px;
        height: var(--plyr-range-track-height, 5px);
        -ms-transition: box-shadow .3s ease;
        transition: box-shadow .3s ease;
        user-select: none
    }

    .plyr--full-ui input[type=range]::-ms-thumb {
        background: #fff;
        background: var(--plyr-range-thumb-background, #fff);
        border: 0;
        border-radius: 100%;
        box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2);
        box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
        height: 13px;
        height: var(--plyr-range-thumb-height, 13px);
        margin-top: 0;
        position: relative;
        -ms-transition: all .2s ease;
        transition: all .2s ease;
        width: 13px;
        width: var(--plyr-range-thumb-height, 13px)
    }

    .plyr--full-ui input[type=range]::-ms-tooltip {
        display: none
    }

    .plyr--full-ui input[type=range]::-moz-focus-outer {
        border: 0
    }

    .plyr--full-ui input[type=range]:focus {
        outline: 0
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
        outline: 3px dotted #0354b2;
        outline: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #0354b2))) dotted 3px;
        outline-offset: 2px
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
        outline: 3px dotted #0354b2;
        outline: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #0354b2))) dotted 3px;
        outline-offset: 2px
    }

    .plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
        outline: 3px dotted #0354b2;
        outline: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #0354b2))) dotted 3px;
        outline-offset: 2px
    }

.plyr__poster {
    background-color: #000;
    background-color: var(--plyr-video-background, var(--plyr-video-background, #000));
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease;
    width: 100%;
    z-index: 1
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
    opacity: 1
}

.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
    display: none
}

.plyr__time {
    font-size: 13px;
    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px))
}

    .plyr__time + .plyr__time:before {
        content: "⁄";
        margin-right: 10px;
        margin-right: var(--plyr-control-spacing, 10px)
    }

@media(max-width:767px) {
    .plyr__time + .plyr__time {
        display: none
    }
}

.plyr__tooltip {
    background: hsla(0, 0%, 100%, .9);
    background: var(--plyr-tooltip-background, hsla(0, 0%, 100%, .9));
    border-radius: 3px;
    border-radius: var(--plyr-tooltip-radius, 3px);
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, .15));
    color: #4a5464;
    color: var(--plyr-tooltip-color, #4a5464);
    font-size: 13px;
    font-size: var(--plyr-font-size-small, 13px);
    font-weight: 400;
    font-weight: var(--plyr-font-weight-regular, 400);
    left: 50%;
    line-height: 1.3;
    margin-bottom: 10px;
    margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
    opacity: 0;
    padding: 5px 7.5px;
    padding: calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s ease .1s, opacity .2s ease .1s;
    white-space: nowrap;
    z-index: 2
}

    .plyr__tooltip:before {
        border-left: 4px solid transparent;
        border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
        border-right: 4px solid transparent;
        border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
        border-top: 4px solid hsla(0, 0%, 100%, .9);
        border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, hsla(0, 0%, 100%, .9));
        bottom: -4px;
        bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
        content: "";
        height: 0;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 0;
        z-index: 2
    }

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr .plyr__control:hover .plyr__tooltip,
.plyr__tooltip--visible {
    opacity: 1;
    transform: translate(-50%) scale(1)
}

.plyr .plyr__control:hover .plyr__tooltip {
    z-index: 3
}

.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip,
.plyr__controls > .plyr__control:first-child .plyr__tooltip {
    left: 0;
    transform: translateY(10px) scale(.8);
    transform-origin: 0 100%
}

    .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before,
    .plyr__controls > .plyr__control:first-child .plyr__tooltip:before {
        left: 16px;
        left: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)
    }

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
    left: auto;
    right: 0;
    transform: translateY(10px) scale(.8);
    transform-origin: 100% 100%
}

    .plyr__controls > .plyr__control:last-child .plyr__tooltip:before {
        left: auto;
        right: 16px;
        right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);
        transform: translateX(50%)
    }

.plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
.plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip,
.plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
    transform: translate(0) scale(1)
}

.plyr__progress {
    left: 6.5px;
    left: calc(var(--plyr-range-thumb-height, 13px)*.5);
    margin-right: 13px;
    margin-right: var(--plyr-range-thumb-height, 13px);
    position: relative
}

    .plyr__progress__buffer,
    .plyr__progress input[type=range] {
        margin-left: -6.5px;
        margin-left: calc(var(--plyr-range-thumb-height, 13px)*-.5);
        margin-right: -6.5px;
        margin-right: calc(var(--plyr-range-thumb-height, 13px)*-.5);
        width: calc(100% + 13px);
        width: calc(100% + var(--plyr-range-thumb-height, 13px))
    }

    .plyr__progress input[type=range] {
        position: relative;
        z-index: 2
    }

    .plyr__progress .plyr__tooltip {
        font-size: 13px;
        font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
        left: 0
    }

.plyr__progress__buffer {
    -webkit-appearance: none;
    background: 0 0;
    border: 0;
    border-radius: 100px;
    height: 5px;
    height: var(--plyr-range-track-height, 5px);
    left: 0;
    margin-top: -2.5px;
    margin-top: calc(var(--plyr-range-track-height, 5px)/2*-1);
    padding: 0;
    position: absolute;
    top: 50%
}

    .plyr__progress__buffer::-webkit-progress-bar {
        background: 0 0
    }

    .plyr__progress__buffer::-webkit-progress-value {
        background: currentColor;
        border-radius: 100px;
        min-width: 5px;
        min-width: var(--plyr-range-track-height, 5px);
        -webkit-transition: width .2s ease;
        transition: width .2s ease
    }

    .plyr__progress__buffer::-moz-progress-bar {
        background: currentColor;
        border-radius: 100px;
        min-width: 5px;
        min-width: var(--plyr-range-track-height, 5px);
        -moz-transition: width .2s ease;
        transition: width .2s ease
    }

    .plyr__progress__buffer::-ms-fill {
        border-radius: 100px;
        -ms-transition: width .2s ease;
        transition: width .2s ease
    }

.plyr--loading .plyr__progress__buffer {
    animation: plyr-progress 1s linear infinite;
    background-image: linear-gradient(-45deg, rgba(35, 40, 47, .6) 25%, transparent 0, transparent 50%, rgba(35, 40, 47, .6) 0, rgba(35, 40, 47, .6) 75%, transparent 0, transparent);
    background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 75%, transparent 75%, transparent);
    background-repeat: repeat-x;
    background-size: 25px 25px;
    background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
    color: transparent
}

.plyr--video.plyr--loading .plyr__progress__buffer {
    background-color: hsla(0, 0%, 100%, .25);
    background-color: var(--plyr-video-progress-buffered-background, hsla(0, 0%, 100%, .25))
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
    background-color: rgba(193, 200, 209, .6);
    background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6))
}

.plyr__volume {
    align-items: center;
    display: flex;
    max-width: 110px;
    min-width: 80px;
    position: relative;
    width: 20%
}

    .plyr__volume input[type=range] {
        margin-left: 5px;
        margin-left: calc(var(--plyr-control-spacing, 10px)/2);
        margin-right: 5px;
        margin-right: calc(var(--plyr-control-spacing, 10px)/2);
        position: relative;
        z-index: 2
    }

.plyr--is-ios .plyr__volume {
    min-width: 0;
    width: auto
}

.plyr--audio {
    display: block
}

    .plyr--audio .plyr__controls {
        background: #fff;
        background: var(--plyr-audio-controls-background, #fff);
        border-radius: inherit;
        color: #4a5464;
        color: var(--plyr-audio-control-color, #4a5464);
        padding: 10px;
        padding: var(--plyr-control-spacing, 10px)
    }

    .plyr--audio .plyr__control.plyr__tab-focus,
    .plyr--audio .plyr__control:hover,
    .plyr--audio .plyr__control[aria-expanded=true] {
        background: #0354b2;
        background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #0354b2)));
        color: #fff;
        color: var(--plyr-audio-control-color-hover, #fff)
    }

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
    background-color: rgba(193, 200, 209, .6);
    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
    background-color: rgba(193, 200, 209, .6);
    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
    background-color: rgba(193, 200, 209, .6);
    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
}

.plyr--audio .plyr__progress__buffer {
    color: rgba(193, 200, 209, .6);
    color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6))
}

.plyr--video {
    overflow: hidden
}

    .plyr--video.plyr--menu-open {
        overflow: visible
    }

.plyr__video-wrapper {
    background: #fff;
    background: var(--plyr-video-background, var(--plyr-video-background, #fff));
    height: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
    aspect-ratio: 16/9
}

@supports not (aspect-ratio:16/9) {

    .plyr__video-embed,
    .plyr__video-wrapper--fixed-ratio {
        height: 0;
        padding-bottom: 56.25%;
        position: relative
    }
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
    padding-bottom: 240%;
    position: relative;
    transform: translateY(-38.28125%)
}

.plyr--video .plyr__controls {
    background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(51,51,51,.9) 30%);
    background: var(--plyr-video-controls-background, linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(51,51,51,.9) 30%));
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    bottom: 0;
    color: #fff;
    color: var(--plyr-video-control-color, #fff);
    left: 0;
    padding: 5px;
    padding: calc(var(--plyr-control-spacing, 10px)/2);
    padding-top: 20px;
    padding-top: calc(var(--plyr-control-spacing, 10px)*2);
    position: absolute;
    right: 0;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out;
    z-index: 3
}

@media(min-width:480px) {
    .plyr--video .plyr__controls {
        padding: 10px;
        padding: var(--plyr-control-spacing, 10px);
        padding-top: 35px;
        padding-top: calc(var(--plyr-control-spacing, 10px)*3.5)
    }
}

.plyr--video.plyr--hide-controls .plyr__controls {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%)
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: #0354b2;
    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #674CD7)));
    color: #fff;
    color: var(--plyr-video-control-color-hover, #fff)
}

.plyr__control--overlaid {
    background: #674CD7;
    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #674CD7)));
    border: 0;
    border-radius: 100%;
    color: #fff;
    color: var(--plyr-video-control-color, #fff);
    display: none;
    left: 50%;
    opacity: .9;
    padding: 15px;
    padding: calc(var(--plyr-control-spacing, 10px)*1.5);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
    z-index: 2
}

    .plyr__control--overlaid:before {
        background: none;
        border: 2px solid #674CD7;
        content: "";
        display: block;
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        pointer-events: none;
        border-radius: 120px;
    }

    .plyr__control--overlaid svg {
        left: 2px;
        position: relative
    }

    .plyr__control--overlaid:focus,
    .plyr__control--overlaid:hover {
        opacity: 1
    }

.plyr--playing .plyr__control--overlaid {
    opacity: 0;
    visibility: hidden
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: block
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
    background-color: hsla(0, 0%, 100%, .25);
    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, hsla(0, 0%, 100%, .25)))
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
    background-color: hsla(0, 0%, 100%, .25);
    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, hsla(0, 0%, 100%, .25)))
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
    background-color: hsla(0, 0%, 100%, .25);
    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, hsla(0, 0%, 100%, .25)))
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, hsla(0, 0%, 100%, .5))
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, hsla(0, 0%, 100%, .5))
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
    box-shadow: 0 1px 1px 0 0 0 1px rgba(35, 40, 47, .15) rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, hsla(0, 0%, 100%, .5))
}

.plyr--video .plyr__progress__buffer {
    color: hsla(0, 0%, 100%, .25);
    color: var(--plyr-video-progress-buffered-background, hsla(0, 0%, 100%, .25))
}

.plyr:-webkit-full-screen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:fullscreen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:-webkit-full-screen video {
    height: 100%
}

.plyr:fullscreen video {
    height: 100%
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
    display: none
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
    display: none
}

.plyr:-webkit-full-screen.plyr--hide-controls {
    cursor: none
}

.plyr:fullscreen.plyr--hide-controls {
    cursor: none
}

@media(min-width:1024px) {
    .plyr:-webkit-full-screen .plyr__captions {
        font-size: 21px;
        font-size: var(--plyr-font-size-xlarge, 21px)
    }

    .plyr:fullscreen .plyr__captions {
        font-size: 21px;
        font-size: var(--plyr-font-size-xlarge, 21px)
    }
}

.plyr--fullscreen-fallback {
    background: #000;
    border-radius: 0 !important;
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10000000
}

    .plyr--fullscreen-fallback video {
        height: 100%
    }

    .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
        display: block
    }

        .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
            display: none
        }

    .plyr--fullscreen-fallback.plyr--hide-controls {
        cursor: none
    }

@media(min-width:1024px) {
    .plyr--fullscreen-fallback .plyr__captions {
        font-size: 21px;
        font-size: var(--plyr-font-size-xlarge, 21px)
    }
}

.plyr__ads {
    border-radius: inherit;
    bottom: 0;
    cursor: pointer;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

    .plyr__ads > div,
    .plyr__ads > div iframe {
        height: 100%;
        position: absolute;
        width: 100%
    }

    .plyr__ads:after {
        background: #23282f;
        border-radius: 2px;
        bottom: 10px;
        bottom: var(--plyr-control-spacing, 10px);
        color: #fff;
        content: attr(data-badge-text);
        font-size: 11px;
        padding: 2px 6px;
        pointer-events: none;
        position: absolute;
        right: 10px;
        right: var(--plyr-control-spacing, 10px);
        z-index: 3
    }

    .plyr__ads:empty:after {
        display: none
    }

.plyr__cues {
    background: currentColor;
    display: block;
    height: 5px;
    height: var(--plyr-range-track-height, 5px);
    left: 0;
    opacity: .8;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    z-index: 3
}

.plyr__preview-thumb {
    background-color: hsla(0, 0%, 100%, .9);
    background-color: var(--plyr-tooltip-background, hsla(0, 0%, 100%, .9));
    border-radius: 3px;
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, .15));
    margin-bottom: 10px;
    margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
    opacity: 0;
    padding: 3px;
    padding: var(--plyr-tooltip-radius, 3px);
    pointer-events: none;
    position: absolute;
    transform: translateY(10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s ease .1s, opacity .2s ease .1s;
    z-index: 2
}

.plyr__preview-thumb--is-shown {
    opacity: 1;
    transform: translate(0) scale(1)
}

.plyr__preview-thumb:before {
    border-left: 4px solid transparent;
    border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
    border-right: 4px solid transparent;
    border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
    border-top: 4px solid hsla(0, 0%, 100%, .9);
    border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, hsla(0, 0%, 100%, .9));
    bottom: -4px;
    bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 2
}

.plyr__preview-thumb__image-container {
    background: #c1c8d1;
    border-radius: 2px;
    border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
    overflow: hidden;
    position: relative;
    z-index: 0
}

    .plyr__preview-thumb__image-container img {
        height: 100%;
        left: 0;
        max-height: none;
        max-width: none;
        position: absolute;
        top: 0;
        width: 100%
    }

.plyr__preview-thumb__time-container {
    bottom: 6px;
    left: 0;
    position: absolute;
    right: 0;
    white-space: nowrap;
    z-index: 3
}

    .plyr__preview-thumb__time-container span {
        background-color: rgba(0, 0, 0, .55);
        border-radius: 2px;
        border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
        color: #fff;
        font-size: 13px;
        font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
        padding: 3px 6px
    }

.plyr__preview-scrubbing {
    bottom: 0;
    filter: blur(1px);
    height: 100%;
    left: 0;
    margin: auto;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .3s ease;
    width: 100%;
    z-index: 1
}

.plyr__preview-scrubbing--is-shown {
    opacity: 1
}

.plyr__preview-scrubbing img {
    height: 100%;
    left: 0;
    max-height: none;
    max-width: none;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%
}

.plyr--no-transition {
    transition: none !important
}

.plyr__sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    border: 0 !important;
    height: 1px !important;
    overflow: hidden;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}

.plyr [hidden] {
    display: none !important
}