/* reset default values */
*{margin:0px;padding:0px;}

#testControls {
  padding: 20px;
}

#videoSection {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  height: 675px;
  background-color: #888888;
  line-height:normal;
  text-align:initial;
  text-align:justify;
  overflow: hidden;
}

/* the video context fills the totallity of its parent surface */
#videoContext {
position: relative;
  height: 100% !important;
  background-color: #000000;
  width: 100% !important;
  margin: 0 auto;
}

/* redefine width of videoContext when in fullscreen to get fullscreen video (browser-depending modificator) */
#videoContext:-ms-fullscreen {
  width: 100% !important;
}
#videoContext:fullscreen {
  width: 100% !important;
}
#videoContext:-webkit-full-screen {
  width: 100% !important;
}

/*  the video surface fills the totallity of its parent surface */
#video {
  position: absolute;
  width: 100%;
  height: 100%;
}

video::-webkit-media-controls { 
	opacity: 0;
}

#videoControls {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.svg-icon {
  width: inherit;
  height: inherit;
}