#controles {
  background: #333;
  padding: 2%;
  color: #ccc;
}

#mi_video {
  width: 550px;
  height: 320px;
}

#contenedor{
  width: 40%;
  background: #000;
  margin: 0px auto;
}

#btnplaypause{
  background:url("https://s3.amazonaws.com/online.fliphtml5.com/book/template/Handy/style/icon/autoPlay.png" ) no-repeat;
	border:none;
	width:4%;
	height:18px;
	cursor:pointer;
/*	margin-top:0.2em;*/
}

#btnplaypause:hover{ opacity:0.7; }

#mutebtn{
  background:url("http://www.academia.org.mx/aml_static/dm2/style/icon/soundOn.png" ) no-repeat;
	border:none;
	width:4%;
	height:18px;
	cursor:pointer;
  margin-left:1%;
  margin-right:1%;
}

#mutebtn:hover{ opacity:0.7; }

#pantcompl{
  background:url("http://findicons.com/files/icons/2315/default_icon/18/full_screen_inv.png" ) no-repeat;
	border:none;
	width:4%;
	height:18px;
	cursor:pointer;
  margin-left:1%;
  margin-right:1%;
}

#pantcompl:hover{ opacity:0.7; }

#navbar{
  width:30%;
}

#volumenbar{
  width:20%;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
	  border:#666 1px solid;
    height:4px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height:15px;
    width:15px;
	  border-radius:100%;
	  cursor:pointer;
}