#video-container {
	width: 640px;
	height: 360px;
	position: relative;
}
#video-container:hover .video-controls {
	opacity: .95;
}
#myPara {
	display: none;
}

.video-controls {
	position: absolute;
	width:200px;
	bottom: 50px;
	right: 30px;
	padding: 5px;
	opacity: 0;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;

}

.video-controls {
	width:130px;
	margin:0px; padding:0px;font-family: arial;
}

.video-controls ul{	list-style-type:none;
	line-height:15px;
	padding: 10px;
}

.video-controls a {	background: rgba(0,0,0,.5);
	display: block;
	margin-bottom:2px;
	font-size:12px;
	font-weight:bold;
	border: 0;
	color: #EEE;
	padding:5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

.video-controls a:hover {
	cursor: pointer;
	Background-color:red;
}

.video-controls-speed2 a {	background: rgba(0,0,0,.5);
padding-left:10px;
}
.video-controls-speed2{display: none; position: absolute;top: -27px; left: 110px; z-index: 1;}


.video-controls-speed3 a {	background: rgba(0,0,0,.5);
padding-left:10px;
}
.video-controls-speed3{display: none; position: absolute;top: -108px; left: -38px; z-index: 1;}

#quailty-select {background-color:red;}
#quailty-unselect {background-color:none;}


.show {display: block;}

@media screen and (max-width: 768px){

.video-controls {
	position: absolute;
	width:150px;
	bottom: 50px;
	right: 30px;

}


.video-controls ul{	list-style-type:none;
	line-height:40px;
}

.video-controls a {
	font-size:24px;
}


.video-controls-speed2{display: none; position: absolute;top: -27px; left: 110px; z-index: 1;}

.video-controls-speed3{display: none; position: absolute;top: -165px; left: -70px; z-index: 1;}
.show {display: block;}
	
}