/*  { видео */
div.videoplayer-frame {
	position: relative;
}

div.videoplayer-source-choice-div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	background-image: url(../images/common/video-choice-bg.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

div.videoplayer-source-choice-separator {
	position: absolute;
	top: 7.5%;
	left: 49.5%;
	background-color: #888;
	width: 1%;
	height: 55%;
	border-radius: 3px;
}

button.videoplayer-source-choice-button {
	position: absolute;
	height: 50%;
	width: 45%;
	top: 10%;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	border-radius: 7.14%/11.4%;
}
button.videoplayer-source-choice-button:focus {
	outline: 3px solid #4a4;
}
button.videoplayer-source-choice-button:active {
	box-shadow: inset 0px 0px 21px 0px #040;
}
button.videoplayer-source-choice-button[data-src="yt"] {
	left: 2.5%;
	background-image: url(../images/other/youtube-big.png);
}
button.videoplayer-source-choice-button[data-src="rt"] {
	right: 2.5%;
	background-image: url(../images/other/rutube-big.png);
}

div.videoplayer-frame:not([data-player-selected="YT"]) iframe[data-src="yt"], div.videoplayer-frame:not([data-player-selected="RT"]) iframe[data-src="rt"], div.videoplayer-frame[data-player-selected="YT"] div.videoplayer-source-choice-div, div.videoplayer-frame[data-player-selected="RT"] div.videoplayer-source-choice-div {
	display: none;
}
/*  видео } */

/*  { стандартные видеопроигрыватели */
/*  { дерево */
div.videoplayer-tree-div {
	position: relative;
	font-size: 0px;
	overflow: hidden;
	text-align: center;
	width: 100%;
	margin: 30px 0px;
}

div.videoplayer-tree-wrapper {
	width: 200%;
}
@media (min-width: 981px) {
div.videoplayer-tree-wrapper {
	position: relative;
	left: -50%;
}
}
@media (max-width: 980px) {
div.videoplayer-tree-wrapper {
	width: 100%;
}
}

div.videoplayer-tree-margin {
	width: 25%;
	display: inline-block;
	background-repeat: repeat-x;
	vertical-align: middle;
	height: 445.9px;
	background-image: url(../images/lesson/tree-margin.jpg);
	background-size: 323.4px 445.9px;
}
@media (max-width: 980px) {
div.videoplayer-tree-margin {
	display: none;
}
}
div.videoplayer-tree-margin[data-side="left"] {
	background-position: right;
}
div.videoplayer-tree-margin[data-side="right"] {
	background-position: left;
}

div.videoplayer-tree-center {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 980px;
}
@media (max-width: 980px) {
div.videoplayer-tree-center {
	width: 100%;
}
}

img.videoplayer-tree-background {
	position: relative;
	z-index: -1;
	width: 100%;
}

a.videoplayer-tree-arrow-href {
	display: inline-block;
}

div.videoplayer-tree-arrow {
	position: absolute;
	width: 8.33%;
	height: 45%;
	top: 18%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}
a.videoplayer-tree-arrow-href:not([href]) div.videoplayer-tree-arrow {
	cursor: default;
}
div.videoplayer-tree-arrow[data-side="left"] {
	background-image: url(../images/common/arrow-left-green.png);
	left: 11.5%;
}
div.videoplayer-tree-arrow[data-side="right"] {
	background-image: url(../images/common/arrow-right-green.png);
	right: 11.5%;
}
a.videoplayer-tree-arrow-href:not([href]) div.videoplayer-tree-arrow[data-side="left"] {
	background-image: url(../images/common/arrow-left-gray.png);
}
a.videoplayer-tree-arrow-href:not([href]) div.videoplayer-tree-arrow[data-side="right"] {
	background-image: url(../images/common/arrow-right-gray.png);
}

div.videoplayer-frame[data-style="tree-tv"] {
	position: absolute;
	width: 60%;
	height: 74.175%;
	top: 14.5%;
	left: 20%;
	background-size: 100% 100%;
	border: none;
	outline: none;
}

div.videoplayer-frame[data-style="tree-tv"] button.videoplayer-change-source-button {
	position: absolute;
	width: 9.18%;
	height: 16.32%;
	top: 67%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	box-shadow: 0px 0px 2px 2px rgb(170, 160, 155);
	border-radius: 24%;
}
div.videoplayer-frame[data-style="tree-tv"] button.videoplayer-change-source-button:focus {
	box-shadow: 0px 0px 3px 3px rgb(255, 255, 255), 0px 0px 3px 3px rgb(255, 255, 255);
}
div.videoplayer-frame[data-style="tree-tv"] button.videoplayer-change-source-button:active {
	box-shadow: inset 0px 0px 10px 0px rgb(56, 32, 14), inset 0px 0px 3px 3px rgb(56, 32, 14), 0px 0px 3px 3px rgb(255, 255, 255), 0px 0px 3px 3px rgb(255, 255, 255);
}
div.videoplayer-frame[data-style="tree-tv"] button.videoplayer-change-source-button[data-src="yt"] {
	left: -11.5%;
	background-image: url(../images/other/youtube-button-brown.png);
}
div.videoplayer-frame[data-style="tree-tv"] button.videoplayer-change-source-button[data-src="rt"] {
	right: -11.5%;
	background-image: url(../images/other/rutube-button-brown.png);
}
/*  дерево } */

/*  { телефон */
div.videoplayer-phone-container {
	width: 100%;
	max-width: 100%;
	text-align: center;
	font-size: 0px;
	margin: 27px 0px 0px;
}

div.videoplayer-phone-wrapper {
	display: inline-block;
	position: relative;
	width: 800px;
	max-width: 100%;
}

img.videoplayer-phone-img {
	width: 100%;
}

div.videoplayer-frame[data-style="phone"] {
	position: absolute;
	top: 6.125%;
	left: 11%;
	width: 78%;
	height: 87.75%;
}

div.videoplayer-frame[data-style="phone"] button.videoplayer-change-source-button {
	position: absolute;
	width: 8.98%;
	height: 15.96%;
	top: 72.5%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	border-radius: 24%;
}
div.videoplayer-frame[data-style="phone"][data-style-color="brown"] button.videoplayer-change-source-button {
	box-shadow: 0px 0px 2px 2px rgb(170, 160, 155);
}
div.videoplayer-frame[data-style="phone"][data-style-color="cyan"] button.videoplayer-change-source-button {
	box-shadow: 0px 0px 2px 2px rgb(165, 185, 175);
}
div.videoplayer-frame[data-style="phone"] button.videoplayer-change-source-button:focus {
	box-shadow: 0px 0px 3px 3px rgb(255, 255, 255), 0px 0px 3px 3px rgb(255, 255, 255);
}
div.videoplayer-frame[data-style="phone"][data-style-color="brown"] button.videoplayer-change-source-button:active {
	box-shadow: inset 0px 0px 10px 0px rgb(56, 32, 14), inset 0px 0px 3px 3px rgb(56, 32, 14), 0px 0px 3px 3px rgb(255, 255, 255), 0px 0px 3px 3px rgb(255, 255, 255);
}
div.videoplayer-frame[data-style="phone"][data-style-color="cyan"] button.videoplayer-change-source-button:active {
	box-shadow: inset 0px 0px 10px 0px rgb(90, 105, 95), inset 0px 0px 3px 3px rgb(90, 105, 95), 0px 0px 3px 3px rgb(255, 255, 255), 0px 0px 3px 3px rgb(255, 255, 255);
}
div.videoplayer-frame[data-style="phone"] button.videoplayer-change-source-button[data-src="yt"] {
	left: -11.5%;
}
div.videoplayer-frame[data-style="phone"] button.videoplayer-change-source-button[data-src="rt"] {
	right: -11.5%;
}
div.videoplayer-frame[data-style="phone"][data-style-color="brown"] button.videoplayer-change-source-button[data-src="yt"] {
	background-image: url(../images/other/youtube-button-brown.png);
}
div.videoplayer-frame[data-style="phone"][data-style-color="brown"] button.videoplayer-change-source-button[data-src="rt"] {
	background-image: url(../images/other/rutube-button-brown.png);
}
div.videoplayer-frame[data-style="phone"][data-style-color="cyan"] button.videoplayer-change-source-button[data-src="yt"] {
	background-image: url(../images/other/youtube-button-cyan.png);
}
div.videoplayer-frame[data-style="phone"][data-style-color="cyan"] button.videoplayer-change-source-button[data-src="rt"] {
	background-image: url(../images/other/rutube-button-cyan.png);
}
/*  телефон } */
/*  стандартные видеопроигрыватели } */