*{box-sizing: border-box;}

.videocontainer:hover .controls,
.audiocontainer:hover .controls{
    opacity: 0.6;
}
.videocontainer,
.audiocontainer{
    position: relative;
}
.videocontainer video,
.videocontainer img,
.audiocontainer img{
    max-width: 100%;
    vertical-align: bottom;
}
.controls {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor:pointer;
    z-index: 300;
}
.pause{
    display: none;
}
.controlBar > .button,
.controlBar > .button.pauseButton
{
    display:none !imortant;
}
.additional-controls{
    background: black;
    opacity: 0.7;
    position: absolute;
    bottom: 5px;
    width: 90%;
    padding: 0% 2.5% 0 2.5%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
    z-index: 300;
    
}
.custom-seekbar,
.custom-volumebar{  
  cursor: pointer;
  height: 8px;
  outline: thin solid black;
  overflow: hidden;
  position: relative;
  width: 46%;
  float:left;
  background: gray;
  border-radius: 6px;
  margin-top: 8px;
}
.custom-volumebar{
    width: 100%;
}
.audio .custom-seekbar{
    width: 54%;
}
.custom-seekbar span,
.custom-volumebar span{
  background: whitesmoke;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;
}
.custom-volumebar span{
   background: #aaff7f;
   background-image: url(/assets/playercontrols/volume.png);
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
}
.custom-volume{
    width: 34%;
    float: left;    
    padding-top: 1px;
}
.soundonoff{
    width: 12%;
    float: left;
    text-align: right;
    padding: 2px 6px;
    line-height: 21px;
}
.soundonoff button{
    padding: 0;
}
.fullscreen{
    width: 8%;
    float: left;
    padding-left: 4px;
    text-align: right;
}
.bt_full{
    vertical-align: middle !important;
    cursor: zoom-in;
}
/* Volumeslider */
.additional-controls input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}
.additional-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.additional-controls input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
.additional-controls input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

.additional-controls input[type=range] {
  width: 100%;
  margin: 1px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
.additional-controls input[type=range]:focus {
  outline: none;
}
.additional-controls input[type=range]::-webkit-slider-runnable-track {
  background: #fbfcfc;
  border: 01px solid #010101;
  border-radius: 50px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
.additional-controls input[type=range]::-webkit-slider-thumb {
  margin-top: -1px;
  width: 16px;
  height: 10px;
  background: #9f9f9f;
  border: 1px solid #000000;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
.additional-controls input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
.additional-controls input[type=range]::-moz-range-track {
  background: #fbfcfc;
  border: 1px solid #010101;
  border-radius: 50px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
.additional-controls input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 10px;
  background: #9f9f9f;
  border: 1px solid #000000;
  border-radius: 0px;
  cursor: pointer;
}
.additional-controls input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 1.8px 0;
  color: transparent;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
.additional-controls input[type=range]::-ms-fill-lower {
  background: #ecf1f1;
  border: 1px solid #010101;
  border-radius: 100px;
}
.additional-controls input[type=range]::-ms-fill-upper {
  background: #fbfcfc;
  border: 1px solid #010101;
  border-radius: 100px;
}
.additional-controls input[type=range]::-ms-thumb {
  width: 16px;
  height: 10px;
  background: #cacbcb;
  border: 1px solid #000000;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
.additional-controls input[type=range]:focus::-ms-fill-lower {
  background: #fbfcfc;
}
.additional-controls input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  .additional-controls input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}


button{
    cursor: pointer;
}
.additional-controls .mutebtn.mute{
    background: url(../playercontrols/bt_mute.png) no-repeat center 100%;
    height: 18px;
    width: 18px;
    border: none;
    vertical-align: middle;
}

.additional-controls .mutebtn.unmute{
    background: url(../playercontrols/bt_unmute.png) no-repeat center 100%; 
    height: 18px;
    width: 18px;
    border: none;
    vertical-align: middle;
}
.additional-controls:full-screen{
    display: block;
}
.description h3{
    color: white !important;
}
.description p{
    font-size: 0.8em !important;
    line-height: 1.4em !important;
    color: white !important;
    margin: 8px 0;
}

.description{
    padding: 4%;   
    position: absolute;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(127,127,127);
    background: rgba(127,127,127, 0.9);
    display: none;
    z-index: 200;
    overflow: hidden;
/*     overflow-y: auto; */
}
.audiocontainer:hover .description,
.videocontainer:hover .description{
/*     display: block; */
}
.vid_poster {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
}