/*---------------------------------------------------
	## Videos
----------------------------------------------------*/

.video-play--one {
    z-index: 1;
    font-size: 20px;
    position: relative;
    display: inline-block;
    color: var(--primary-color);
    @include circle(rgba(255, 255, 255, 0.8), 82px);
    &:after {
        position: absolute;
        content: '';
        left: -5px;
        top: -5px;
        z-index: -1;
        border-radius: 50%;
        @include size(calc(100% + 10px));
        border: 2px solid var(--primary-color);
    }
    &:hover {
        color: var(--primary-color);
    }
    @include res-bl(sm) {
        font-size: 16px;
        line-height: 60px;
        @include size(60px);
    }
}

.video-play--two {
    z-index: 1;
    color: white;
    font-size: 20px;
    position: relative;
    display: inline-block;
    border: 6px solid white;
    outline: 3px solid var(--primary-color);
    @include circle(var(--primary-color), 96px);
    line-height: 86px;
    &:hover {
        background: white;
        outline: 3px solid white;
        color: var(--primary-color);
        border-color: var(--primary-color);
    }
    @include res-bl(sm) {
        font-size: 16px;
        line-height: 54px;
        @include size(65px);
    }
}

.video-play--three {
    color: white;
    font-size: 28px;
    text-align: center;
    line-height: 116px;
    position: relative;
    display: inline-block;
    border: 3px solid white;
    border-radius: 0 5px 5px 0;
    @include size(144px, 124px);
    background: var(--primary-color);
    @include res-bl(ms) {
        font-size: 22px;
        line-height: 72px;
        @include size(100px, 80px);
    }
    &:after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--heading-color);
    }
    &:focus,
    &:hover {
        color: white;
    }
}

.video-play--four {
    color: white;
    font-size: 18px;
    transition: 0.5s;
    @include circle(var(--primary-color), 77px);
    outline: 13px solid rgba(255, 255, 255, 0.17);
    @include res-bl(sm) {
        line-height: 60px;
        @include size(60px);
    }
    &:focus,
    &:hover {
        color: white;
        outline: 8px solid rgba(255, 255, 255, 0.17);
    }
}

/* Charity Video */
.charity-video {
    .charity-area-bg {
        left: 0;
        top: 0;
        z-index: -2;
        opacity: 0.08;
        position: absolute;
        @include size(100%);
    }
}

.charity-video-part {
    overflow: hidden;
    border-radius: 10px;
    .video-play {
        z-index: 2;
        @include abs-middle();
    }
    &:before {
        z-index: 1;
        opacity: 0.5;
    }
}

.charity-progressbar {
    display: flex;
    align-items: center;
    @include res-bl(md) {
        flex-wrap: wrap;
    }
    .progress-bar-wrap {
        width: 100%;
        margin-right: 100px;
        @include res-bl(md) {
            margin-right: 0;
            margin-bottom: 25px;
        }
        .cause-price {
            flex-wrap: wrap;
            margin-bottom: 10px;
            font-family: var(--heading-font);
            @include flexcenter(space-between);
        }
        .progress {
            height: 12px;
            overflow: initial;
            position: relative;
            border-radius: 5px;
            background-color: #F6A29D;
            .progress-bar {
                overflow: initial;
                top: 0;
                left: 0;
                height: 100%;
                position: absolute;
                border-radius: 5px 0 0 5px;
                background-color: var(--primary-color);
                &:after {
                    content: '';
                    position: absolute;
                    top: -4px;
                    right: 0;
                    @include size(20px);
                    border-radius: 50%;
                    background: white;
                    outline: 1px solid white;
                    border: 7px solid var(--primary-color);
                }
            }
        }
    }
    .btn {
        flex: none;
    }
}

/* Become Volunteer video */
.become-volunteer-video {
    overflow: hidden;
    border-radius: 15px;
    &:before {
        z-index: 1;
        opacity: 0.4;
    }
    .video-play {
        z-index: 2;
        @include abs-middle();
    }
}