.player { background:transparent; box-sizing: border-box; border-radius: 5px; height: 70px; -moz-box-sizing: border-box; float: left; font-family: Arial, sans-serif; position: absolute; padding: 0; bottom: 20px; z-index: 2; opacity: 1; box-shadow: 0 0 10px rgba(0,0,0,0.3); -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
.video { position: relative; margin: 0px auto; }
.video:hover .player { opacity: 1; }
.player .progress { width: 60%; height: 3px; border-radius: 5px; background: #676767; box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1); float: left; cursor: pointer; margin:33px 0 0 50px; padding: 0; position: relative; font-variant: normal; }
.player .progress-bar { background: #FFCA2F; box-shadow: inset -30px 0px 69px -20px #FFCA2F; border-radius: 5px; height: 100%; position: relative; z-index: 999; width: 0; }
.player .button-holder { position: relative; left: 10px; }
.player .progress-button { background: #FFCA2F; top:-8px; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 30px; width: 20px; height: 20px; position: absolute; left: -20px; text-decoration: overline; }
.player [class^="buffered"] { background: rgba(255,255,255,0.1); position: absolute; top: 0; left: 30px; height: 100%; border-radius: 5px; z-index: 1; }
.player .play-pause { display: inline-block; font-size:22px; float: left; text-shadow: 0 0 0 #fff; color: rgba(137, 137, 137, 0.8); width: 4%; padding:0; height:100%; cursor: pointer; font-variant: small-caps; position:absolute; top:20px; left:10px;}

.player .play, .player .pause-button { -webkit-transition: all 0.2s ease-out; }
.player .play .pause-button, .player .pause .play-button { display: none; }
.player .pause-button { padding: 7px 2px 0; box-sizing: border-box; -moz-box-sizing: border-box; height:43px;}
.player .pause-button span { background: rgba(137, 137, 137, 0.8); width: 3px; height:14px; float: left; display: block; }
.player .pause-button span:first-of-type { margin: 0 4px 0 0; }
.player .time { color: #fff; font-weight: bold; font-size: 1.2em; position: absolute; right: -120px; top: -8px; }
.player .stime, .ttime { color: #444; }
.player .play:hover { text-shadow: 0 0 2px #fff; }
.player .play:active, .pause-button:active span { text-shadow: 0 0 2px #fff; }
.player .pause-button:hover span { box-shadow: 0 0 2px #fff; }
.player .pause-button:active span { box-shadow: 0 0 2px #fff; }
.player .volume { position: relative; float: left; width: 8%; margin: 0 0 0 4%; height: 100%; display:none; }
.player .volume-icon { padding: 1.5%; height: 100%; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all 0.15s linear; }
.player .volume-icon-hover { background-color: #4f4f4f; }
.player .volume-holder { height: 100px; width: 100%; background: black; position: absolute; display: none; background: #4f4f4f; left: 0; border-radius: 5px 5px 0 0; top: -100px; }
.player .volume-bar-holder { background: #333; width: 20px; box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3); margin: 15px auto; height: 80px; border-radius: 5px; position: relative; cursor: pointer; }
.player .volume-button { background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 30px; width: 20px; height: 20px; }
.player .volume-button-holder { position: relative; top: -10px; }
.player .volume-bar { background: #33b5d5; box-shadow: inset -30px 0px 69px -20px #89f6f5; border-radius: 5px; width: 100%; height: 100%; position: absolute; bottom: 0; }
.player .fullscreen { width: 5%; cursor: pointer; position:absolute; right:10px; height: 100%; }
.player .fullscreen a { width: 19px; height: 17px; border-radius: 3px; display: block; position: relative; top: 27px; margin: 0px auto; background-position:-85px 0; }
.player .volume-icon span { width: 20%; height: 13%; background-color: #fff; display: block; position: relative; z-index: 1; font-weight: bold; top: 40%; color: #fff; left: 22%; }
.player .volume-icon span:before, .player .volume-icon span:after { content: ''; position: absolute; }
.player .volume-icon span:before { width: 0; height: 0; border: 1em solid transparent; border-left: none; border-right-color: #fff; z-index: 2; top: -2px; left: 10%; margin-top: -40%; }
.player .volume-icon span:after { width: 2%; height: 2%; border: 1px solid #fff; left: 190%; border-width: 0px 0px 0 0; top: 5px; border-radius: 0 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); font-variant: small-caps; }
.player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }
.player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }
.player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }
.player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }
.player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }
.player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }
.player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }
.player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }
.player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }
.player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }
.player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }
.player .v-change-1 span:after { content: '+'; -webkit-transform: rotate(45deg); font-size: 20px; top: -6px; left: 25px; }

@media (min-width:320px) and (max-width:640px){
	/*************  @CUSTOM VIDEO *************/ 
.player{ height:40px;}
.player .progress{ width:35%;}
.player .play-pause{font-size: 18px; left: 0px; top:24px;}
.player .time{ font-size:12px; top: -6px; right: -75px;}
.player .pause-button{ width:20px;}
	}