.campaignvideo {
    background: var(--purple);
    position: relative;
}

.campaignvideo video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.campaignvideo .video-controls {
    display: flex;
    position: absolute;
    right: 30px;
    bottom: 30px;
    gap: 20px;
}

.video-controls button {
    text-indent: -9999px;
    cursor: pointer;
    all: unset;
    display: inline-block;
    cursor: pointer;
    height: 45px;
    width: 45px;
    border-radius: 100px;
    background: var(--green);
}

.video-controls button#playpause {
    background: var(--green) url('../images/icon-play.svg') no-repeat center center;
    background-size: contain;
}

.video-controls button#playpause.is-pause {
    background: var(--green) url('../images/icon-pause.svg') no-repeat center center;
    background-size: contain;
}

.video-controls button#muteunmute {
    background: var(--green) url('../images/icon-unmute.svg') no-repeat center center;
    background-size: contain;
}

.video-controls button#muteunmute.is-muted {
    background: var(--green) url('../images/icon-mute.svg') no-repeat center center;
    background-size: contain;
}

.video-controls button#subtoggle {
    background: var(--green) url('../images/icon-subtitles-on.svg') no-repeat center center;
    background-size: contain;
}

.video-controls button#subtoggle.is-subs-off {
    background: var(--green) url('../images/icon-subtitles-off.svg') no-repeat center center;
    background-size: contain;
}