html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.simple-background-video {
    position: relative;
    background-color: #000;
    display: flex;
}


#full-screen-video {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.video-container {
    position: relative;
    display: flex;
    max-width: 100vw;
/*    min-height: 50vh;*/
    z-index: 2;
    overflow: hidden;
}

#full-screen-video.video-contained {
    position: absolute;
    display: block;
    width: 100%;
    min-height: 100%;
    z-index: 2;
    overflow: hidden;
}

#full-screen-video-data {
  display: none;
}

.video-controls {
    display: none;
    position: absolute;
    z-index: 1;
    padding: 10px;
    width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
    align-self: center;
    margin: 0 auto;
}

.video-controls.active {
    display: table;
}

.video-controls.animate-controls {
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.video-controls.animate-controls a {
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*top left*/

.video-controls.top-left {
    top: 20px;
    left: 20px;
}

.video-controls.animate-controls.top-left {
    animation-name: topLeft;
}

.video-controls.animate-controls.top-left a {
    animation-name: topLeftAnchor;
}


/*top right*/

.video-controls.top-right {
    top: 20px;
    right: 20px;

}

.video-controls.animate-controls.top-right {
    animation-name: topRight;
}

.video-controls.animate-controls.top-right a {
    animation-name: topRightAnchor;
}


/*bottom right*/

.video-controls.bottom-right {
    right: 20px;
    bottom: 20px;
}

.video-controls.animate-controls.bottom-right {
    animation-name: bottomRight;
}

.video-controls.animate-controls.bottom-right a {
    animation-name: bottomRightAnchor;
}


/*bottom left*/

.video-controls.bottom-left {
    left: 20px;
    bottom: 20px;
}

.video-controls.animate-controls.bottom-left {
    animation-name: bottomLeft;
}

.video-controls.animate-controls.bottom-left a {
    animation-name: bottomLeftAnchor;
}


/*bottom center*/

.video-controls.bottom-center {
    left: calc(50% - 75px);
    bottom: 20px;
}

.video-controls.animate-controls.bottom-center {
    animation-name: bottomCenter;
}

.video-controls.animate-controls.bottom-center a {
    animation-name: bottomCenterAnchor;
}

/*no animation*/

.video-controls.no-animate-controls {
    align-self: inherit;
    opacity: 0.5;
    width: 150px;
}

.video-controls.no-animate-controls a {
    height: 25px;
    width: 42px;
}

.video-controls.no-animate-controls.mute-only {
    width: 50px;
    border: none;
    background: transparent;
    align-self: inherit;
}

.video-controls.no-animate-controls.mute-only a.btn-start-over,
.video-controls.no-animate-controls.mute-only a.btn-play,
.video-controls.no-animate-controls.mute-only a.btn-pause {
    visibility: hidden;
    width: 0;
}

.video-controls.no-animate-controls.mute-only a.btn-mute {
    width: 100%;;
}

.video-controls a {
    color: #fff;
    display: inline-block;
    float: left;
    width: 33.3%;
    text-align: center;
    height: 80px;
    /*height: 25px;*/
}

.video-controls a.btn-start-over {
    background-image: url(../images/start-over.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    text-indent: -9999px;
}

.video-controls a.btn-play {
    background-image: url(../images/play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    text-indent: -9999px;
}

.video-controls a.btn-pause {
    background-image: url(../images/pause.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    text-indent: -9999px;
}

.video-controls a.btn-play.active, .video-controls a.btn-pause.active {
    visibility: hidden;
    width: 0;
}

.video-controls a.btn-mute {
    background-image: url(../images/speaker.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    text-indent: -9999px;
}

.video-controls a.btn-mute.active {
    background-image: url(../images/speaker-off.svg);
}

/*top left animation */

@keyframes topLeft {
    50% {
        width: 150px;
    }
    100% {
        align-self: inherit;
        margin: 20px auto 20px 20px;
        opacity: 0.5;
        width: 150px;
    }
}

@keyframes topLeftAnchor {
    100% {
        height: 25px;
    }
}

/*top right animation */

@keyframes topRight {
    50% {
        width: 150px;
    }
    100% {
        align-self: inherit;
        margin: 20px 20px 20px auto;
        opacity: 0.5;
        width: 150px;
    }
}

@keyframes topRightAnchor {
    100% {
        height: 25px;
    }
}

/*bottom right animation */

@keyframes bottomRight {
    50% {
        width: 150px;
    }
    100% {
        align-self: inherit;
        margin: auto 20px 20px auto;
        opacity: 0.5;
        width: 150px;
    }
}

@keyframes bottomRightAnchor {
    100% {
        height: 25px;
    }
}

/*bottom left animation */

@keyframes bottomLeft {
    50% {
        width: 150px;
    }
    100% {
        align-self: inherit;
        margin: auto 20px 20px 20px;
        opacity: 0.5;
        width: 150px;
    }
}

@keyframes bottomLeftAnchor {
    100% {
        height: 25px;
    }
}

/*bottom center animation */

@keyframes bottomCenter {
    50% {
        width: 150px;
    }
    100% {
        align-self: flex-end;
        margin-bottom: 20px;
        opacity: 0.5;
        width: 150px;
    }
}

@keyframes bottomCenterAnchor {
    100% {
        height: 25px;
    }
}