.player-wrapper{
	position: relative;
	padding-bottom: 56.2%;
}
.subtitles-wrapper{
/*	position: relative;
	padding-bottom: calc(100vh - 56.2% - 56px - 36px);*/
}
.player-wrapper .player/*, .subtitles-wrapper .subtitles*/{
	position: absolute;
	width: 100%;
	height: 100%;
}
.subtitles{
/*        min-height: 30px;*/
	height: 112px;
	overflow-x: hidden;
	overflow-y: auto;
	overflow: auto;
	border: 1px solid silver;
}
.player img{
	width: 100%;
}
.videonote{
	color: #5a247d;
	text-align: center;
	font-weight: bold;
}
.subtitles, .tasks, .videonote{
	margin: 0 auto;
	padding-bottom: 8px;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
}
.subtitles p{
	margin: 0;
}
.subtitles font:hover{
	background-color: orange;
}
.subtitles span:hover{
	cursor: pointer;
	background-color: gold;
}
.subtitles .current/*, .tasks .current*/{
	background-color: yellow;
}
.subtitles span:hover, .subtitles font:hover, .subtitles .current, .tasks .current{
	border-radius: 3px;
}
.tasks{
	overflow: hidden;
	clear: both;
}
.tasks, .tasks select{
	font-size: 12px;
}
.tasks .task{
	padding: 4px 10px;
}
.tasks .task a.insert, .tasks .task a.remove{
	padding: 0 0 0 16px;
	border: none;
	vertical-align: top;
  	line-height: 16px;
  	font-size: 14px;
	margin-left: 4px;
	cursor: pointer;
}
.tasks .speed-section, .tasks .pause-section, .tasks .repeat-section{
	display: inline-block;
	line-height: 25px;
	padding-left: 30px;
}
.tasks .speed-section{
	background: url(../img/speed.png) 0 50% no-repeat;
	width: 33%;
	min-width: 151px;
}
.tasks .pause-section{
	background: url(../img/delay.png) 0 50% no-repeat;
	width: 33%;
	min-width: 142px;
}
.tasks .repeat-section{
	background: url(../img/repeat.png) 0 50% no-repeat;
	min-width: 142px;
}
.tasks .speed-section span, .tasks .pause-section span, .tasks .repeat-section span{
	display: inline-block;
	vertical-align: middle;
}
.tasks .speed-section span.select, .tasks .pause-section span.select, .tasks .repeat-section span.select{
	width: 90px;
}
.tasks .speed-section span.help, .tasks .pause-section span.help, .tasks .repeat-section span.help{
	display: inline-block;
	vertical-align: middle;
	width: 13px;
	height: 15px;
	background: url(../img/help.png) 0 0 no-repeat;
	cursor: default;
	margin-left: 4px;
}
.tasks .task a.insert{
	background: url(../img/add.gif) 0 0 no-repeat;
}
.tasks .task a.remove{
	background: url(../img/delete.gif) 0 0 no-repeat;
}
.tasks .task:first-child a.remove{
	visibility: hidden;
}
.wide.tasks .task a.wide, .tasks .task a.normal,
.tasks .task a.remove, .tasks .task a.insert{
	display: none;
}
.wide.tasks .task a.normal, .tasks .task a.wide{
	background: url(../img/expand.png) 0 0 no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	display: inline-block;
	float: right;
	margin-top: 7px;
}
.wide.tasks .task a.normal{
	background-image: url(../img/contract.png);
	border-color: #fff;
	position: fixed;
	right: 57px;
	bottom: 80px;
	z-index: 30000;
}
.wide.player{
	position: fixed;
	top: 0;
	height: calc(100vh - 110px);
	max-height: none;
	left: 0;
	right: 0;
	width: 100vw;
	max-width: none;
	z-index: 30000;
	background-color: #000;
}
.wide.subtitles > *{
	text-align: center;
	font-family: Arial, Serif;
	background-color: #000;
	color: silver;
}
.wide.subtitles{
	clear: both;
	font-size: 30px;
	line-height: 35px;
	position: fixed;
	bottom: 0;
	height: 110px;
	max-height: none;
	left: 0;
	right: 0;
	min-width: 100vw;
	width: 100vw;
	max-width: none;
	z-index: 20000;
	background-color: #000;
	border: none;
	border-bottom: solid 8px #000;
}
.wide.subtitles::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

.wide.subtitles::-webkit-scrollbar-thumb {
    background: gray;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.wide.subtitles::-webkit-scrollbar-corner {
    background: #000;
}
.wide.subtitles .current/*, .tasks .current*/{
	background-color: silver;
	color: #000;
}
.wide.subtitles span:hover{
	background-color: #fff;
	color: #000;
}
html.wide{
	overflow: hidden;
}
