#video{
	width: 720px;
}
	
#video-container {
	width: 720px;
	margin: 0 auto;
	position: relative;
}

#video-controls {
	border-radius: 0 0 8px 8px;
	box-shadow: 0 3px 5px rgba(0,0,0,.4);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 7px 5px 4px 5px;
	background: #7c7c7c
}

button {
	background: rgba(0,0,0,.5);
	border: 0;
	color: #EEE;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

button:hover {
	cursor: pointer;
}

#seek-bar {
	width: 86%;
	height: 8px;
	background: transparent;
}

#volume-bar {
	width: 60px;
}

.play {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAMAAABDEo1gAAAAOVBMVEV7e3twcHB3d3dnZ2djY2NqampQUFB0dHRzc3NtbW1ubm5aWlq7u7tdXV1gYGBWVlbAwMC3t7dTU1PJcbyqAAAArElEQVQ4y5XTyxKDMAiF4QPE5kIJ2vd/2CbtuFFnxO9s/yVgqKr+uuGqFRN/eiPGDabWP7NSQS6FbpSSIQqIgZhxi5lgAs1UEJIpKxwLBy1wKISDBPo8TzkoQWFI5WBd13IlwcY6Haw/dNJnfM7fu1M+Z+3g37YTG3GC1YNt2+oVQxrTJUif5wKXIIc8zStbTyHduM6zdIvU5iMFGrO/Apy5YYi+R6H9bUMYwBc2IhFPn4D/LwAAAABJRU5ErkJggg==') no-repeat center center
}
.play:hover {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAMAAABDEo1gAAAAZlBMVEVwcHB3d3dra2t7e3sA/wBnZ2dzc3NQUFBkZGRjY2PNzc1bW1tgYGDMzMxdXV1YWFhUVFQA7QBGm0U8gDwA5gAA4QBBpj9qemlhg2FSlVFOXk0/cj80iTMfqxsYyhIA+AAA1gAAygDTiwB3AAAAzklEQVQ4y5XSyxKDIAyF4ZCAVUMR1Nr77f1fsme61Dqm/7D8WEBCIsKqebdRVmVQEpdv71fxG5XX+5YduN7H6XyijU7nabyrUBieR+dkM+eOzyGQHvpKTFX9Qanz7Iyx78CDlQdw/YcreF0Zq8HTkrdtu8ITeKRZ4IgWRfC4xtGCx++VWftvtCiBNz7xLFj+VfIN4blsDJ8I3ll5B45RBWNYAPBs5RmcxyHWpuIwMmEtL9oY0gtWnYQe5bozdC0PYBHqizdUJlgccWTKgX4ATfEURjFvU8AAAAAASUVORK5CYII=') no-repeat center center
}

.pause {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAMAAABDEo1gAAAAOVBMVEV7e3twcHB3d3dnZ2djY2NqampQUFB0dHRzc3Nubm5tbW1aWlpeXl7AwMC7u7tWVlZgYGC3t7dTU1PvqP0uAAAAr0lEQVQ4y5XTOxKDMAxF0WfJxB8JBNn/YiOPJ40pEEczr7qlDddF7PPARDoG+mpLhAeUmn5HJYxSa3pQawELwIpEhEdECcqQkipCSioCw0ZBm8cCpiCGvM9zCcoeK3Jd7Ps+Z5GhfmdaeDlncY74nh/HMeeWj9O28HLOQj3O0L64rmvOQpH9ZAuS9znDOMjAb/NOeuaQU6mPZ2kSqdU8BRqRfQKMqMHFv8f/24YQgB8j7hFSN8WRfwAAAABJRU5ErkJggg==') no-repeat center center
}

.pause:hover {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAMAAABDEo1gAAAAZlBMVEVwcHB3d3dra2t7e3sA/wBnZ2d0dHRQUFBkZGRjY2PMzMxbW1tgYGBdXV1YWFjOzs5UVFQA7QBGm0U8gDwA5gAA4QBBpj9qemlhg2FSlVFOXk0/cj80iTMfqxsYyhIA+AAA1gAAygD8PsSbAAAAzElEQVQ4y5XSyRaDIAyF4YSAVQMKTp2n93/J3tPu7ML4H8jq2zCQiDjVfNgoqzpQEs6396v4jcrrfcsMrvdpOZ9oo9N5me4qFMbnkVk2Yz4+x0A6DySmqmFW6rxjY8534MHKA7ju4QpeV8Zq8PTP+77/jn+ewCOtatv2N1ZF8LiHR+xk5Qm88cmtgvyNVck3hOM6Y7hE8M7KO3A8VTCGDwCerTyDu2mMtak4To7wLS/aGNLLPFQk9CjXg6FreQCL0FC8obLAYgmTKQb9ADYCFDn+Z9QoAAAAAElFTkSuQmCC') no-repeat center center
}

.mute {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAOVBMVEV7e3txcHBnZ2d0c3NjY2N4eHhqampQUFB2dXVsbGzMzMzOzc1vb25ZWVlcXFtgYGBeXl3KyspWVlYyetZNAAAAx0lEQVQoz13KgbKEIAiFYRAxXdHM93/Ye8juuO1PycynhFLvx661oK56nMy0YxtHxu6BsvBORENTCoNYlHY5m+JtF5aN6rFJo0lJf0vQRkE1r2pdO0Dhsqr3vz0+XKH4UKSOiexV+HMBH5gT+kHVb9nP05VOM4PWytgYMxhmlFI+nu/iZ4dG6sWDOz8eMS3dXVe6cCbUvh308O2BZvjvutaeUPfd9qLjjO/G0ELCMseL+4QRWdZ2fNc0GyFcvhNeO7OZ8S7D/gA/NQty4brdCwAAAABJRU5ErkJggg==') no-repeat center center
}

.mute:hover {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAb1BMVEUA/wBnZ2d7e3twb29jY2Nqamp4eHh0dHRQUFBycXFsbGzNzMx2dnVcXFxhYWFZWVnOzs4A4wDMy8vKyspWVlZBpj87gDsA1gBGmkVfgV5SlVE/cj8ziTIeqxoYyhIA+AAA7wAA6QBOXk1NXUxFmUSwiUu4AAAA4UlEQVQoz13JCXLDIAxAUSEMNpjVe/ak7f3PWAF1cfJZNPMEiCis7WreM4kIKLvrukJtXa+dIbe3OJ957TzHm5fAlseplVgz5vRYGNi4qYoypX6ihwmE/EyQemBSmlIIZTJS8rYU8qveqFwIKqQF1YClU7zvg0oa/t0pxftU2qr0u6TgOC+eJk8/GR2rtc5Oc6Cjtd09bYaBmOafN+BFbhzFIOhSnjR7WeS3O4OJ7Y1jmRNp8lp1HRfXvGeXqKHd4pd1zh34O24tIL+/Lt2xy+vOERD5/IRjz5ljcjT8PUP2C+lJEM3i5HuWAAAAAElFTkSuQmCC') no-repeat center center
}

.unmute {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAQlBMVEV7e3twcG92dnZpaWl0dHNjY2NycXFnZ2ZQUFBtbWx5eXhra2u8u7tZWVldXV1gYGBbW1vAv79WVla2trbExMSxsbDvdAhsAAAAyklEQVQoz13PW3KFIBBF0X4JAgERzfynmoPES8jqD3BLFQWB1rpPNftIIPvhHE2Oyy5Yqycxnsyiz5G0EJvQJMKxeKrGbsbYOXaZGqnElwyKmtFXvWeMt+G2TsA/fXOP+3b2C7diRj/P89M3Khg8i1HRX0evdOAxX91Y8IWGKSGEp4dXP71RTQGu60rp2aWEOzE5dXpdqmnIo+vwra/ePTXsPOhHQ1Vq/r+GGmI5tlUpMZCxtbLk2tCIgkje/8oigQA/V8ZjFV4J2g/seQwM6KIvcAAAAABJRU5ErkJggg==') no-repeat center center
}

.unmute:hover {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAdVBMVEVxcXEA/wB1dHRra2t7e3t4eHhjY2Nubm1nZ2ZQUFBoaGhaWlphYWHAv79cXFy8vLy6urq2trZXV1e8u7tGmkVBpj87gDsA7gAA5gAA4QAA1gDExMReXl5UVFNfgV5SlVFNXUw/cj8ziTIYyhKxsbAfqxsdqho5HmGaAAAA40lEQVQoz13P2XLDIAxAUQkLQxB26n3P2vb/P7FybWKSM2JGum8AETnm04HZaSIgvTzGEQ/j+Dgp6fzTN1c4XJv+lzW4Fi9K00GrC7YWeKghiiuoB4YSE/3JYQmMTjalZIK92/2cVGCRpafwb5oAop7vPcuykFWKOczotyo98DjL88aY6izAnKuqkkua9Fy2r5UJ8q0niexFUSTB2lPk7Yg6Yxq6c+77rVsspVnhXkq04HCxnxZ0kPStT9/lbZ+Aqofb7L2P8m2oFZB5dvdT7N49DQERNB3GukaiDCmQf8FBSfsD3E8Px3hnFgYAAAAASUVORK5CYII=') no-repeat center center
}

#video-controls button{
	outline: none;
	border: none;
}

#play-pause {
	width: 47px;
	height: 23px;
}

#mute {
	width: 23px;
	height: 23px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 0 0 #898989, 0 -1px 0 #666;
  background: #757575;
  background: -webkit-linear-gradient(top,  #757575 0%,#5d5d5d 100%);
  background: linear-gradient(to bottom,  #757575 0%,#5d5d5d 100%);
  margin-top: -10px
}
input[type=range]::-webkit-slider-thumb {
  height: 5px;
  width: 7px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFBAMAAAB7tOvrAAAAGFBMVEV8fHzR0dG8vLyMjIzAwMChoaGBgYGrq6v1rYYkAAAAIUlEQVQI12NgSGZgYGALMWBgSBV0ZmAIFBQxYFBSUioAACK+AyMRrm3AAAAAAElFTkSuQmCC') no-repeat center bottom;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 7px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 0 0 #898989, 0 -1px 0 #666;
  background: #757575;
  background: -moz-linear-gradient(top,  #757575 0%, #5d5d5d 100%);
  background: linear-gradient(to bottom,  #757575 0%,#5d5d5d 100%);
}

input[type=range]::-moz-range-thumb {
	height: 18px;
	width: 7px;
	background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFBAMAAAB7tOvrAAAAGFBMVEV8fHzR0dG8vLyMjIzAwMChoaGBgYGrq6v1rYYkAAAAIUlEQVQI12NgSGZgYGALMWBgSBV0ZmAIFBQxYFBSUioAACK+AyMRrm3AAAAAAElFTkSuQmCC') no-repeat center bottom;
	cursor: pointer;
	border: none
}

input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #757575;
  background: linear-gradient(to bottom,  #757575 0%,#5d5d5d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#5d5d5d',GradientType=0 );
  box-shadow: 1px 1px 0 0 #898989, 0 -1px 0 #666;
}

input[type=range]::-ms-fill-upper {
  background: #757575;
  background: linear-gradient(to bottom,  #757575 0%,#5d5d5d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#5d5d5d',GradientType=0 );
  border-radius: 2.6px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-thumb {
  height: 5px;
  width: 7px;
  cursor: pointer;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFBAMAAAB7tOvrAAAAGFBMVEV8fHzR0dG8vLyMjIzAwMChoaGBgYGrq6v1rYYkAAAAIUlEQVQI12NgSGZgYGALMWBgSBV0ZmAIFBQxYFBSUioAACK+AyMRrm3AAAAAAElFTkSuQmCC') no-repeat center bottom;
  margin-top: 7px;
}
input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper {
  background: #757575;
  background: linear-gradient(to bottom,  #757575 0%,#5d5d5d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#5d5d5d',GradientType=0 );
}