html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    padding: 0;
    display: flex;
    background: #2e2e2e;
    min-height: 100vh;
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mask {
    -webkit-mask-image: url(../images/circle340.svg);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: url(../images/circle340.svg);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #fff;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #ccc;
    text-align: center;
    line-height: 1.5;
    max-width: 340px;
    padding-top: 20px;
    margin-top: 0;
}

.player {
    max-width: 280px;
    position: relative;
    font-size: 0;
    overflow: hidden;
}

.player__video {
    width: 280px;
    height: 280px;
}

.progress {
    flex: 10;
    position: relative;
    display: flex;
    flex-basis: 100%;
    height: 5px;
    transition: height 0.3s;
    background: rgba(0, 0, 0, 0.5);
    cursor: ew-resize;
    max-width: 30%;
    margin: 0 auto;
    margin-top: 25px;
}

.progress__filled {
    width: 50%;
    background: #797979;
    flex: 0;
    flex-basis: 50%;
}

/* Because video needed a defined hieght in order for object-fit: fill to work. */

video {
    height: 100%;
    object-fit: fill;
}

/* hide the default Chrome video player styling */

video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}

video::-webkit-media-controls {
    display: none !important;
}

/*  Needed to hide player controls in Safari Only */

video::-webkit-media-controls-panel {
    display: none !important;
}

video::-webkit-media-controls-play-button {
    display: none !important;
}

video::-webkit-media-controls-current-time-display {
    display: none !important;
}

video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

video::-webkit-media-controls-timeline {
    display: none !important;
}

video::-webkit-media-controls-mute-button {
    display: none !important;
}

video::-webkit-media-controls-volume-slider {
    display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video::-internal-media-controls-download-button {
    display: none !important;
}

/* Firefox Shadow DOM Fix */

*::-moz-list-bullet,
*::-moz-list-number {
    display: block !important;
}

*::-moz-meter-bar {
    display: none !important;
}

:-moz-full-screen:not(:root)::backdrop {
    display: block !important;
}

*::backdrop {
    display: block !important;
}

:fullscreen:not(:root) {
    display: block !important;
}

/* New addition to removal of User Agent StyleSheet for Firefox. Removed dotted border around range. */
input[type="range"]::-moz-focus-outer {
    border: 0;
}