/* @group App
------------------------------------ */
.pausable-video,
.video-container {
	position: relative;
	cursor: pointer;
}
.pausable-video::after,
.video-container::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--navy-blue);
	opacity: 0;
	z-index: 1;
	transition: opacity 0.5s;
	mix-blend-mode: multiply;
}
.pausable-video.paused::after,
.video-container.paused::after {
	opacity: 0.15;
}

.pausable-video.paused::after,
.video-container.paused::after {
	opacity: 0.15;
}

.pausable-video .icon-wrapper,
.video-container .icon-wrapper {
	position: absolute;
	inset: 0;
	z-index: 2;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    justify-content: center;
    align-items: center;
    display: flex;
	column-gap: 3rem;
}
.pausable-video .icon-wrapper div {
	position: relative;
	width: 4.8rem;
	height: 4.8rem;
	display: inline-block;
}
.pausable-video .icon-wrapper i,
.video-container .icon-wrapper i {
	position: absolute;
	display: inline-block;
	font-size: 48px;
	opacity: 0;
	transition: opacity 0.5s;
    width: 1em;
    height: 1em;
	pointer-events: none;
}
.pausable-video .pause-play:not(.paused) .icon-stop,
.video-container:not(.paused) .icon-stop {
	opacity: 1;
}
.pausable-video .pause-play.paused .icon-play1,
.video-container.paused .icon-play1 {
	opacity: 1;
}



.bttn-sound {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .pausable-video .icon-wrapper {
		column-gap: 0;
	}
	.pausable-video .icon-wrapper div:first-child {
		margin-right: 3rem;
	}
	.pausable-video .icon-wrapper div {
			width: 48px;
			height: 48px;
		}
	.pausable-video::after {
		width: calc(100% - 7.5em);
	}
    .pausable-video::after {
        left: 3.7em;
    }
}
/* @end */