.hidden {display: none;}



.player {min-height: 50px; display: flex;}
.player>div {padding: 0 5px;}
.player>div.buttons {}
.player>div#waveWrapper {flex-grow: 1;}

/* .video-player-wrap {width: 450px; max-width: 100%;  position: fixed; top: 10px; left: calc((100% - 1127px) / 2); z-index: 100;} */

.video-player-wrap {width: calc(100% / 2 - 110px); position: fixed; top: 0; left: 0; z-index: 100; background: #ccc;}
.video-container {max-width: 100%;}

.block {min-height: 100px; margin: 0 0 20px; padding: 0 0 20px;  display: flex; border-bottom: 1px solid #ccc;}

.block>div {width: 460px; max-width: 100%; border: 1px solid #fff;}

.block>div.left {padding: 0 10px 0 0; vertical-align: top;}
.block>div.left>.img-wrap {position: sticky; top: 70px;}
.block>div.left img {max-width: 100%;}

.block>div.right {padding: 0 0 0 10px; font-size: 1.2em; line-height: 1.5em; flex-grow: 1;}
.block>div.right .p-item {margin: 0 0 10px; scroll-margin-top: 70px;}
.p-time {color: blue; text-decoration: underline; cursor: pointer;}
.p-speak {font-weight: bold;}



.r-name {width: 1000px; max-width: 100%; margin: 0 auto; padding: 10px; text-align: center; font-size: 1.5em;}

.player-wrap {padding: 10px 10px 0 10px; margin-bottom: 20px; background: #fff; border: 0 solid #ccc; border-width: 1px 0; position: sticky; top: 0; z-index: 100;}


@media (max-width: 1199.98px) {
	/* .video-player-wrap {left: calc((100% - 933px) / 2); z-index: 100;} */
}

@media (max-width: 700px) {
	.video-player-wrap {width: 100%; top:0; left: 0; right: 0; background: #000;}
	.video-container {margin: 0 auto;}
	
	.block {flex-direction: column;}
	.block>div {width: 100%;}
	.block>div.left>.img-wrap {width: 450px; max-width: 100%; margin: 0 auto; position: relative; top: auto;}
}


@media print {
    .noprint {display: none;}
    
    .block {}
    .block>div.left>.img-wrap {position: relative; top: 0;}
}