.movie {
	padding: 10px;
}

.movie_btn a:hover {
	cursor: pointer;
}

.movie_btn a.playing {
	background-color: rgba(0, 178, 169, 0.2);
}

.mov_container .movie_btn a>span {
	position: relative;
	margin-right: 1em;
}

.mov_container .movie_btn a>span::before {
	/* display: inline-block; */
	position: absolute;
	top: 50%;
	right: -1.2em;
	transform: translateY(-45%);
	width: 1em;
	height: 1em;
	/* border: 0.05em solid currentColor; */
	border-radius: 50%;
	background-color: #85888b;
	/* font-size: 1em; */
	content: "";
}

.mov_container .movie_btn a>span::after {
	position: absolute;
	top: 50%;
	right: -1.3em;
	transform: translateY(-45%);
	width: 0px;
	height: 0px;
	border: 0.3em solid transparent;
	border-left: 0.5em solid #fff;
	box-sizing: border-box;
	content: "";
}

.mov_container .movie_btn a.playing>span::before,
.mov_container .movie_btn a.playing>span::after {
	position: absolute;
	top: 50%;
	right: -1.3em;
	transform: translateY(-55%);
	width: 0.2em;
	height: 1em;
	box-sizing: border-box;
	background-color: currentColor;
	border: none;
	border-radius: 0;
	content: "";
}

.mov_container .movie_btn a.playing>span::before {
	right: -0.8em;
}

.mov_container .movie_btn a.playing>span::after {
	right: -1.2em;
}

.mobile.mov_container .movie_btn a{
	position: relative;
}

.mobile.mov_container .movie_btn a > div.seek_bar{
	display: block;
	width: 0;
	height: 10%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: rgba(0, 178, 169, 0.5);
}

.mov_ctrl {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	pointer-events: none;
	text-align: right;
	padding: 10px;
	/* mix-blend-mode: difference; */
	opacity: 50%;
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
}

.landing .mov_ctrl::after {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translateX(-25%) translateY(-50%);
	width: 0px;
	height: 0px;
	border: 1.5em solid transparent;
	border-left: 2.5em solid #fff;
	box-sizing: border-box;
	content: "";
}

.playing .mov_ctrl:not(.hidden) {
	pointer-events: none;
}

.playing .mov_ctrl::after,
.playing .mov_ctrl::before {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translateX(-50%) translateY(-55%);
	width: 0.4em;
	height: 2em;
	box-sizing: border-box;
	background-color: #fff;
	border: none;
	border-radius: 0;
	content: "";
}

.playing .mov_ctrl::after {
	right: 48%;
}

.playing .mov_ctrl::before {
	right: 52%;
}

@keyframes opacity-animation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 100%;
	}
}

@keyframes opacity-animation70 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 70%;
	}
}

@keyframes opacity-animation50 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 50%;
	}
}

.mov_thumb>div.ctrls {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 50;
	padding: 0;
	width: 60px;
	text-align: right;
	opacity: 0;
	mix-blend-mode: difference;
	display: none;
	/* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)); */
}

.mov_thumb:not(.fullscr):active{
	opacity: 0.9;
}

.ctrl_color.mov_thumb>div.ctrls {
	mix-blend-mode: screen;
}

.landing .mov_ctrl {
	display: block;
	animation: opacity-animation50 0.5s;
	opacity: 50%;
}

.landing div.ctrls {
	display: block;
	animation: opacity-animation70 0.5s;
	opacity: 70%;
}

.playing .mov_ctrl.hidden,
.playing.mov_thumb>div.ctrls.hidden {
	opacity: 0;
	/* transition: 0.5s; */
	pointer-events: inherit;
	animation: opacity-animation50 0.5s;
	animation-direction: reverse;
}

.playing .mov_thumb>div.ctrls.hidden {
	display: none;
}

.ctrl {
	height: 30px;
	width: 30px;
	position: relative;
	overflow: hidden;
	display: inline-block!important;
	background: transparent;
	/* opacity: 70%; */
}

.playing:not(.fullscr) .ctrls.hidden .ctrl{
	display: none!important;
}

.ctrl.maximize {
	height: 20px;
	width: 20px;
	margin: 5px;
	/* border: 1px #fff solid; */
	background: #000;
}

.ctrl.maximize::before,
.ctrl.maximize::after {
	position: absolute;
	content: "";
	display: block;
	background-color: #000;
	/* border: 1px #000 solid; */
}

.ctrl.maximize::before {
	top: -1px;
	bottom: -1px;
	left: 5px;
	right: 5px;
}

.ctrl.maximize::after {
	top: 5px;
	bottom: 5px;
	left: -1px;
	right: -1px;
}

.ctrl.maximize span {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px #fff solid;
	background: transparent;
}

.fullscr .ctrl.maximize::before,
.fullscr .ctrl.maximize::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	transform: rotate(45deg);
	transform-origin: 0% 50%;
	position: absolute;
	top: calc(14% - 1px);
	left: 14%;
}

.fullscr .ctrl.maximize::after {
	transform: rotate(-45deg);
	transform-origin: 100% 50%;
	left: auto;
	right: 14%;
}

.speaker span {
	display: block;
	width: 8px;
	height: 8px;
	background: #fff;
	margin: 11px 0 0 2px;
}

.speaker span:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	border-width: 10px 14px 10px 15px;
	left: -13px;
	top: 5px;
}

.speaker span:before {
	transform: rotate(45deg);
	border-radius: 0 50px 0 0;
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-style: double;
	border-color: #fff;
	border-width: 5px 5px 0 0;
	left: 18px;
	top: 10px;
	transition: all 0.2s ease-out;
}

.speaker:hover span:before {
	transform: scale(0.8) translate(-3px, 0) rotate(42deg);
}

.speaker.mute span:before {
	transform: scale(0.5) translate(-15px, 0) rotate(36deg);
	opacity: 0;
}

/* .stream .movie_btn{
	font-weight: bold;
	color: #00b2a9;
	border: 1px #00b2a9 solid;
	text-align: center;
	padding: 0.5em;
}

.stream .movie_btn:hover{
	cursor: pointer;
} */

.stream.remodal {
	width: 70%;
	max-width: inherit!important;
}

.stream.remodal.sq {
	width: 50%;
}

.stream.remodal>div {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
}

.stream.remodal.sq>div {
	padding-bottom: 100%;
}

.stream.remodal>div>iframe {
	left: 0;
}

.stream.mobile {
	width: 100%;
	display: block;
	padding: 0!important;
	position: absolute;
	top: 0;
	left: 0;
	/* z-index: 10; */
}

.stream.mobile.hidden {
	display: none;
}

.stream.mobile>button {
	display: none;
}

.stream.mobile>div {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
}

.stream.mobile.sq>div {
	padding-bottom: 100%;
}

.fullscr .stream:not(.hidden)>div {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 150;
	animation: opacity-animation 0.5s;
	padding-bottom: inherit;
}

.fullscr .stream:not(.hidden)>div::before {
	content: "";
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	/* z-index: 145; */
	animation: opacity-animation 0.5s;
	background-color: #000;
}

.fullscr div.ctrls {
	position: fixed;
	z-index: 160;
	transform: scale(1.2);
	transform-origin: top right;
	z-index: 160;
}

.fullscr.playing.mov_thumb>div.ctrls.hidden {
	display: block;
	opacity: 100%;
}

/* .fullscr.playing div.ctrls .ctrl {
	display: inline-block!important;
} */

/* .fullscr div.ctrls .speaker {
	display: none!important;
} */


/* .stream.mobile > div > iframe{
	display: none;
} */