body{
    padding: 0px;
    margin:0px;
}
#video-container,
#video-container #video-movie{
    width: 100%;
    /*height: 100vh;*/
    max-width:100%;
}

#video-container{
    position:relative;
    line-height: 0px;
}
#video-container #video-sound-controls,
#video-container #video-controls{
    position:absolute;
    width:100%;
    height: 100%;
    display: flex;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#video-container #video-controls #video-play,
#video-container #video-controls #video-pause{
    width: 30%;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
    opacity: .4;
    z-index: 1;
    cursor:pointer;
}
#video-container #video-controls #video-loading{
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
    opacity: .4;
    font-size: 2rem;
    width: 4rem; 
    height: 4rem;
    color: #fff;
}
#video-container #video-controls:hover #video-play,
#video-container #video-controls:hover #video-pause{
    opacity: .6;    
}
#video-container #video-sound-controls #video-mute,
#video-container #video-sound-controls #video-speaker{
    width: 10%;
    /*left: 0;*/
    right: 5%;
    bottom: 5%;
    margin: auto;
    z-index: 1;
    cursor:pointer;
    position: absolute;
    opacity: .4;    
}
#video-container #video-sound-controls:hover #video-mute,
#video-container #video-sound-controls:hover #video-speaker{
    opacity: .6;    
}
#video-container .hidden{
    display:none;
}
#video-container.pause #video-controls #video-play{
    display: block;
}
#video-container.loading #video-controls,
#video-container.pause #video-controls{
    background: rgba(0,0,0,.4);
}
#video-container #video-controls:hover{
    background: rgba(0,0,0,.4);
}
#video-container.play #video-controls:hover #video-pause{
    display: block;
}

#video-container.mute #video-sound-controls #video-speaker{
    display: block;
}
#video-container.speaker #video-sound-controls:hover #video-mute{
    display: block;
}
#video-container.loading #video-controls #video-play,
#video-container.loading #video-controls #video-pause{
    display:none !important;
}
#video-container.loading #video-controls #video-loading{
    display: block;
}
@-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
}
@-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
}
@-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
}
@keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
}