/***************************************************************************************************************************************************************************************/

/*MEDIA PLAYER STYLES*/

/***************************************************************************************************************************************************************************************/

.page-template-page-media-player-demo section {
	padding: 120px 0 80px;
}

.page-template-page-media-player-demo section .container {
	max-width: calc(800px + (var(--container-outer-padding) * 2));
}

.page-template-page-media-player-demo section h1 {
	margin: 0;
}

.page-template-page-media-player-demo section .eyebrow {
	margin: 120px 0 30px;
}

.page-template-page-media-player-demo section iframe[src*="spotify.com"] {
	width: 100%;
}

.page-template-page-media-player-demo footer {
	display: none;
}

.media-player {
    --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
	margin: 0 auto;
    position: relative;
}

.media-player button {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: block;
	outline: none;
	padding: 0;
}

.media-player [data-icon-play-state],
.media-player [data-icon-volume-range],
.media-player [data-icon-cc-state],
.media-player [data-icon-fullscreen-state] {
	color: var(--white);
	display: block;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate3d(-50%, -50%, 0) scale(.95);
	transition: .2s var(--transition-timing-function);
	visibility: hidden;
	width: 16px;
}

.media-player [data-play-state="play"] [data-icon-play-state="pause"],
.media-player [data-play-state="pause"] [data-icon-play-state="play"],
.media-player [data-volume-range="0:0"] [data-icon-volume-range="0:0"],
.media-player [data-volume-range="1:33"] [data-icon-volume-range="1:33"],
.media-player [data-volume-range="34:66"] [data-icon-volume-range="34:66"],
.media-player [data-volume-range="67:100"] [data-icon-volume-range="67:100"],
.media-player [data-cc-state="hidden"] [data-icon-cc-state="hidden"],
.media-player [data-cc-state="showing"] [data-icon-cc-state="showing"],
.media-player [data-fullscreen-state="inline"] [data-icon-fullscreen-state="inline"],
.media-player [data-fullscreen-state="fullscreen"] [data-icon-fullscreen-state="fullscreen"] {
	opacity: 1;
	pointer-events: all;
	transform: translate3d(-50%, -50%, 0) scale(1);
	visibility: visible;
}

.media-player button svg {
	display: block;
}

.media-player .controls {
	align-items: center;
	display: flex;
}

/*Play Button*/

.media-player .play-icon {
	background: var(--black);
	min-width: 60px;
	position: relative;
}

.media-player .play-icon:hover,
.media-player .play-icon[data-play-state="play"] {
	background: var(--red);
}

.media-player .play-icon [data-icon-play-state] {
	height: 22px;
	width: unset;
}

/*Song Title*/

.media-player .song-title {
	color: var(--black);
	display: block;
	margin: 0 20px;
	min-width: var(--song-title-width);
	overflow: hidden;
	position: relative;
	--song-title-width: 330px;
}

.media-player .song-title.marquee:after {
	background: linear-gradient(to right, rgba(246, 244, 241, 0), rgba(246, 244, 241, 1));
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 31px;
	z-index: 1;
}

.media-player .song-title span {
	display: block;
	width: max-content;
}

.media-player .song-title.marquee:after {
	animation: song-title-marquee-after var(--marquee-animation-speed) infinite linear forwards;
}

.media-player .song-title.marquee span {
	animation: song-title-marquee var(--marquee-animation-speed) infinite linear forwards;
} 

.media-player .song-title.marquee:hover::after,
.media-player .song-title.marquee:hover span,
.media-player .play-icon[data-play-state="pause"] ~ .song-title.marquee span {
	animation-play-state: paused;
}

/*Volume Controls*/

.media-player .volume-controls {
	margin: 0 20px;
	position: relative;
	z-index: 1;
}

.media-player .volume-controls:after {
	background: var(--white);
	bottom: -2px;
	box-shadow: 0 4px 20px rgba(31, 31, 31, .25);
	content: '';
	display: block;
	height: calc(100% + 80px + 10px + 4px);
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate3d(-50%, 0, 0);
	transition: .2s var(--transition-timing-function);
	visibility: hidden;
	width: calc(100% + 12px);
	z-index: -1;
}

.media-player .volume-controls .volume-icon {
	height: 22px;
	position: relative;
	width: 16px;
}

.media-player .volume-controls .volume-icon [data-icon-volume-range] {
	color: var(--black);
}


.media-player .volume-controls .volume-slider {
	bottom: calc(80px - 22px + 4px);
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate3d(-50%, 0, 0) rotate(-90deg);
	transition: .2s var(--transition-timing-function);
	visibility: hidden;
	width: 80px;
}

.media-player .volume-controls:hover::after,
.media-player .volume-controls:hover .volume-slider {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

/*Time Output*/

.media-player .time-output {
	align-items: baseline;
	display: flex;
	font-size: calc(14rem / 16);
	line-height: calc(22 / 14);
	margin-right: 20px;
	position: relative;
	top: -1px;
}

.media-player .time-output .current-time {
	text-align: right;
}

.media-player .time-output .divider {
	margin: 0 3px;
}

/*Range Styles*/

.media-player input[type="range"] {
	appearance: none;
    -webkit-appearance: none;
	background: transparent;
    height: 5px;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    width: 100%;
	--slider-track-bkg: linear-gradient(to right, rgba(31, 31, 31, 1) var(--buffered-width), rgba(31, 31, 31, .4) var(--buffered-width));
}

.media-player input[type="range"].volume-slider {
    --slider-track-bkg: var(--black);
}

.media-player input[type="range"]::-webkit-slider-runnable-track {
    background: var(--slider-track-bkg);
    cursor: pointer;
    height: 1px;
    width: 100%;
}

.media-player input[type="range"]::before {
    background-color: var(--red);
    content: '';
    cursor: pointer;
    height: 3px;
    left: 0;
    position: absolute;
    top: 1px;
    width: var(--seek-before-width);
}

.media-player input[type="range"].volume-slider::before {
	width: var(--volume-before-width);
}

.media-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
	background: var(--red);
	border: none;
    cursor: pointer;
    height: 5px;
    position: relative;
	top: -2px;
    width: 5px;
}

.media-player input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

.media-player input[type="range"]::-moz-range-track {
    background: var(--slider-track-bkg);
    cursor: pointer;
    height: 1px;
    width: 100%;
}

.media-player input[type="range"]::-moz-range-progress {
    background-color: var(--red);
}

.media-player input[type="range"]::-moz-focus-outer {
    border: 0;
}

.media-player input[type="range"]::-moz-range-thumb {
	background: var(--red);
	border: none;
	border-radius: 0;
    cursor: pointer;
    height: 5px;
    position: relative;
	top: -2px;
    width: 5px;
}

.media-player input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
}

.media-player input[type="range"]::-ms-track {
    background: transparent;
    border: solid transparent;
    color: transparent;
    cursor: pointer;
    height: 3px;
    width: 100%;
}

.media-player input[type="range"]::-ms-fill-lower {
    background-color: var(--red);
}

.media-player input[type="range"]::-ms-fill-upper {
    background: var(--slider-track-bkg);
	height: 1px;
}

.media-player input[type="range"]::-ms-thumb {
    background: var(--red);
	border: none;
	border-radius: 0;
    cursor: pointer;
    height: 5px;
    position: relative;
	top: -2px;
    width: 5px;
}

.media-player input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
}

/*CC*/

.media-player .cc-icon {
	height: 22px;
	margin: 0 20px 0 0;
    position: relative;
    width: 16px;
}

/*Fullscreen*/

.media-player .fullscreen-icon {
	height: 22px;
	margin: 0 20px 0 0;
    position: relative;
    width: 16px;
}

/***Video***/

.media-player.video video {
	display: block;
	object-fit: cover;
	width: 100%;
}

.media-player.video .controls {
	bottom: 0;
	left: 0;
	position: absolute;
	transform: translate3d(0, 0, 0);
	width: 100%;
	z-index: 1;
}

.media-player.video:not(.embed) .controls:after {
	background: linear-gradient(to bottom, rgba(31, 31, 31, 0), rgba(31, 31, 31, 1));
	content: '';
	display: block;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: .2s var(--transition-timing-function);
	width: 100%;
	z-index: -1;
}

.media-player.video:not(.embed):hover .controls:after {
	opacity: 1;
}

.media-player.video .play-icon {
	background: var(--red);
}

.media-player.video input[type="range"].seek-slider,
#sticky-media-player input[type="range"].seek-slider {
	--slider-track-bkg: linear-gradient(to right, rgba(255, 255, 255, 1) var(--buffered-width), rgba(255, 255, 255, .4) var(--buffered-width));
}

.media-player.video .volume-controls:not(:hover) .volume-icon [data-icon-volume-range],
#sticky-media-player .volume-controls:not(:hover) .volume-icon [data-icon-volume-range] {
	color: var(--white);
}

.media-player.video .time-output,
#sticky-media-player .time-output {
	color: var(--white);
}

.media-player.video .time-output > span,
#sticky-media-player .time-output > span {
	opacity: .5;
}

.media-player.video .time-output > .current-time,
#sticky-media-player .time-output > .current-time {
	opacity: 1;
}

/***Media Embed***/

.media-player[data-dialog-open] {
	cursor: pointer;
}

/***Audio Embed***/

.media-player.audio.embed:hover .btn.icon {
	background: var(--red);
}

.media-player.audio.embed .controls p.btn {
	margin: 0 0 0 20px;
}

.media-player.audio.embed:hover .controls p.btn {
	color: var(--red);
}

/***Inline Audio Button & Sticky Media Player***/

/*Button*/

button[data-sticky-media-player-file] {
	background: transparent;
	border: none;
	display: contents;
	font-weight: 700;
	outline: none;
	padding: 0;
	position: relative;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: .3s var(--transition-timing-function);
	vertical-align: -1px;
	z-index: 0;
}

button[data-sticky-media-player-file]:hover,
button[data-sticky-media-player-file]:focus {
	background-position: left bottom;
	color: var(--red);
}

button[data-sticky-media-player-file] svg {
	padding-right: 4px;
}

/*Sticky Media Player*/

#sticky-media-player {
	background: var(--black);
	bottom: 10px;
	max-width: calc(100vw - 20px);
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 10px;
	transition: .3s var(--transition-timing-function);
	visibility: hidden;
	width: 500px;
	z-index: 99;
}

#sticky-media-player.open {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

#sticky-media-player .song-title {
	color: var(--white);
	min-width: var(--song-title-width);
	width: var(--song-title-width);
	--song-title-width: 150px;
}

#sticky-media-player .song-title.marquee:after {
	background: linear-gradient(to right, rgba(31, 31, 31, 0), rgba(31, 31, 31, 1));
}

#sticky-media-player .play-icon {
	background: var(--red);
}

#sticky-media-player input[type="range"].seek-slider {
	min-width: 60px;
	width: 100%;
}

#sticky-media-player .volume-controls {
	margin-right: 15px;
}

#sticky-media-player .time-output {
	margin-right: 30px;
}

#sticky-media-player .close-sticky-player {
	align-items: center;
	background: var(--gray);
	border: none;
	color: var(--white);
	display: flex;
	font-size: calc(12rem / 16);
	height: 20px;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	z-index: 1;
}

#sticky-media-player .close-sticky-player:hover {
	background: var(--white);
	color: var(--black);
}

/***************************************************************************************************************************************************************************************/

/*ACCESSIBILITY REDUCE MOTIONS*/

/***************************************************************************************************************************************************************************************/

@media (prefers-reduced-motion: no-preference) {

	@keyframes song-title-marquee {
		0% {
			transform: translate3d(0, 0, 0);
		}
		30%,50% {
			transform: translate3d(calc(-100% + var(--song-title-width)), 0, 0);
		}
		80% {
			transform: translate3d(0, 0, 0);
		}
	}
	
	@keyframes song-title-marquee-after {
		0% {
			opacity: 1;
		}
		30%,50% {
			opacity: 0;
		}
	}

}