* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


#myVideo {
	width: 100%;
  	height: auto;
  	display: block;
  	margin: 0 auto;
}
body{
	padding:0px;
	margin:0px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.video{
	position:relative;  width: 100%;
}
.video2{
	position:relative;  width: 100%;
}

#unmuteBtn{
	border:none;
 	background: url(../images/play-button.svg) no-repeat center center;
 	background-size: 58px auto;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
}	
#unmuteBtn.active{
	display:none;
}
::cue {
	color: #fff;
background:transparent;
  text-shadow:
    0 0 2px #000,
    0 0 3px #000,
    0 0 4px #000,
    0 0 5px #000,
    0 0 6px #000;


/*	background: rgba(13, 63, 47, 0.9);*/

/*
	font-size: 25px;
	line-height:1.2em;
	font-family: 'PT Serif',Arial,Helvetica,"Nimbus Sans L",sans-serif;

*/
  white-space: normal !important;
  word-wrap: break-word;
  padding: 5px 10px;

}

@media all and (max-width: 720px) {

/*
::cue {
	font-size: 16px;
	line-height:1.3em;
}*/

}

/* selector quality */

.quality-selectors {
  position: absolute;
  top: 10px;
  left: 100px;
opacity:0;
    -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    -ms-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.video:hover .quality-selectors{
opacity:1;
}

.quality-title{
display:inline-block;
background:#0d3f2f;font-size:15px;line-height:1em;padding:5px 10px;
color:white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
cursor:pointer;
    -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    -ms-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.quality-selectors:hover .quality-title{
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

.quality-title:hover{
background:#135239;
}

.quality-selector{
  gap: 5px;

    -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    -ms-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
opacity:0;  display: flex;align-items:center;

  position: absolute;
  left: 0px;
  padding: 5px;
  background: #0d3f2f;

-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0;
border-radius: 10px;
border-top-left-radius: 0;
}

.quality-title:hover + .quality-selector,
.quality-selector:hover{
opacity:1;
}


.quality-selector button {
  background: transparent;
  color: #fff;
  border: none;
  padding: 4px 8px;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  cursor: pointer;
  font-size: 15px;line-height:1em;

    -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    -ms-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;


}

.quality-selector button:hover {
  background: rgba(255, 255, 255, 0.3); 
}

.quality-selector button.active {
  background: #fff;color:#135239;
}

@media all and (max-width: 720px) {

.quality-selectors {
  position: relative;
  top: 0px;
  left: 0px;
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 5px;  height: 43px;
  background: #0d3f2f;
}

.quality-title,
.quality-title:hover {
  background: transparent;
}

.quality-selector{
  opacity: 1;
  position: relative;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}



}