/* Playr customization */
.plyr__video-wrapper,
.plyr__poster {
    /* background around the video */
    background: #fafafa !important;
}
button.plyr__control.plyr__control--overlaid {
    background: white;
    padding: 15%; /* size of white circle */
    box-shadow: 0 0 14px 5px rgba(0, 0, 0, 0.1);
}
button.plyr__control.plyr__tab-focus,
button.plyr__control:hover,
button.plyr__control[aria-expanded="true"],
button.plyr__control.plyr__control--overlaid:hover {
    background: white !important;
    box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.1);
}
.plyr__control svg {
    transform: scale(2); /* size of triangle inside */
    fill: red !important;
}

@media only screen and (min-width: 300px) {
    .plyr__control svg {
        transform: scale(2.3);
    }
}
@media only screen and (min-width: 480px) {
    button.plyr__control.plyr__control--overlaid {
        padding: 13%;
    }
    .plyr__control svg {
        transform: scale(2.9);
    }
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    background-color: white;
    width: 100%;
    height: 100%;
}

.wide-video iframe {
    left: 3vw;
    width: calc(100% - 6vw);
}