.fownhope-audio {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 79.6%, black 100%), url(../img/backgrounds/watch_background.jpg) center top / cover #0c0c0c;
	font-family: 'Raleway', sans-serif;
	color: #ffffff;
	position: relative;
}

body.chromeless .fownhope-audio {
	min-height: 100vh;
}

.fownhope-audio.ready .fownhope-audio-thumb{
	max-width: 50%;
	will-change: max-width;
}

.fownhope-audio.started .fownhope-audio-thumb{
	max-width: 100%;
	will-change: max-width;
	position: relative;
}

.fownhope-audio .fownhope-audio-container{
	margin: auto;
	width: 70%;
	max-width: 100%;
	padding-bottom: 20px;
}

.fownhope-audio-enclosure.hidden {
	display: none;
}

.fownhope-audio-controls {
	width: 100%;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 30px;
}

.fownhope-audio-meta {
	width: 100%;
	margin: 40px auto 20px;
	color: #ffffff;
	display: grid;
	grid-template-columns: 30% 65%;
	column-gap: 5%;
}



.fownhope-audio-meta-info {
	margin-top: auto;
	margin-bottom: auto;
}

.fownhope-audio-thumb {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border-radius: 15px;
	transition: 1s;
}

.fownhope-audio-thumb:hover {
	transform: scale(1.02);
}

/* @group Scrubber */

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 3px; /* Specified height */
  background: linear-gradient(to right, #e34700 0%, #e34700 0%, #fff 0%, white 100%); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.3s, background 0.2s, filter 0.3s; /* 0.2 seconds transition on hover */
  transition: opacity 0.3s, background 0.2s, filter 0.3s;
	margin-bottom: 30px;
	border-radius: 100px;
}

.slider[disabled] {
	filter: grayscale(100%);
}

.slider[disabled]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  display: none;
}

.slider[disabled]::-moz-range-thumb {
  display: none;
}



/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider:active {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider:hover::-webkit-slider-thumb {
	border: 4px solid #ffffff;
	transition: 0.3s;
	cursor: grab;
	
}

.slider:active::-webkit-slider-thumb {
	border: 4px solid rgba(255, 255, 255, 0.82);
	transform: scale(0.95);
	transition: 0.3s;
	background-color: #0076c0;
	cursor: grabbing;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
width: 20px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
  background: #008ae0; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100%;
  transition: 0.3s;
	border-width: 0px;
	border-style: solid;
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #008ae0; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100%;
}

.fownhope-audio-scrubber-meta {
	color: #ffffff;
	display: grid;
	grid-template-columns: 70% 30%;
	margin-bottom: 20px;
}

.fownhope-audio-scrubber-meta .player-btn {
	margin-bottom: 0px;
}

.fownhope-audio-scrubber-meta-left {
	text-align: left;
}

.fownhope-audio-scrubber-meta-left .player-btn:first-of-type {
	margin-left: 0!important;
}

.fownhope-audio-scrubber-meta-right {
	text-align: right;
	display: flex;
	  align-items: flex-end;
	  justify-content: flex-end;
}

/*.fownhope-audio-scrubber-meta[data-loading=true] {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

.fownhope-audio-scrubber-meta[data-loading=false] {
	visibility: visible;
	opacity: 1;
}
*/
.fownhope-audio-scrubber-meta[data-loading=true] .fownhope-audio-scrubber-current-position {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

.fownhope-audio-scrubber-meta[data-loading=false] .fownhope-audio-scrubber-current-position {
	visibility: visible;
	opacity: 1;
}

/* @end */

/* @group Player controls */

.player-btn {
	border-radius: 100%;
	width: 50px;
	height: 50px;
	margin-left: 2%;
	margin-right: 2%;
	transition: 0.3s;
	background: transparent;
	cursor: pointer;
	outline: none!important;
	font-size: 0.7em;
	border: 3px solid #ffffff;
}

.fownhope-audio.ready .player-btn{
	opacity: 0;
	visibility: hidden;
}

.player-btn[data-loading=true]{
	transform: translateY(-10%);
}

.player-btn[data-loading=false]{
	opacity: 1!important;
	visibility: visible!important;
	transform: translateY(0%);
}

.fownhope-audio.ready .player-btn[data-play]{
	opacity: 1!important;
	visibility: visible!important;
	transform: translateY(0%);
}

.player-btn[data-play] {
	border-radius: 100%;
	width: 60px;
	height: 60px;
	transition: 0.3s;
	background-color: transparent;
	font-size: 1em;
}

.player-btn:hover {
	background-color: #008ae0;
	transform: scale(1.05);
}

.player-btn:active {
	background-color: #005992;
	transform: scale(0.90)!important;
}

.player-btn[data-loading=true] {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

.player-btn[data-loading=false] {
	visibility: visible;
	opacity: 1;
}

.player-btn[data-rewind] {
	transition: 0.3s!important;
}

.player-btn[data-rewind]:active {
	transform: rotateZ(-60deg);
}

.player-btn[data-forward]:active {
	transform: rotateZ(60deg);
}
.player-btn[data-forward] {
	transition: 0.3s!important;
}

.player-btn:hover:before {
	color: #ffffff;
}

.player-btn:before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font: 1.5em "Font Awesome 5 Free";
	display: flex;
      align-items: center;
      justify-content: center;
	color: #ffffff;
}

.player-btn[data-play]:before {
	content: "\f04b";
	font-weight: 600;
}

.player-btn[data-play=loading]:before {
	content: "\f715";
	font-weight: 600;
	animation-name: spin;
	animation-duration: 1s;
	 animation-iteration-count: infinite;
	 animation-timing-function: linear;
}



@keyframes spin {
  from {transform: rotateZ(0deg);}
  to {transform: rotateZ(360deg);}
}

.player-btn[data-play=paused]:before {
	content: "\f04b";
	font-weight: 600;
}

.player-btn[data-play=playing]:before {
	content: "\f04c";
	font-weight: 600;
}

.player-btn[data-rewind]:before {
	content: "\f0e2";
	font-weight: 600;
}

.player-btn[data-prev] {
	border: hidden;
}

.player-btn[data-next=false], .player-btn[data-prev=false] {
	opacity: 0.45!important;
	cursor: default;
}


.player-btn[data-prev=false]:hover, .player-btn[data-next=false]:hover {
	opacity: 0.45!important;
	background-color: transparent;
	transform: scale(1)!important;
}

.player-btn[data-prev=false]:active, .player-btn[data-next=false]:active {
	opacity: 0.45!important;
	background-color: transparent;
	transform: scale(1)!important;
}

.player-btn[data-next] {
	border: hidden;
}

.player-btn[data-prev]:before {
	content: "\f048";
	font-weight: 600;
}

.player-btn[data-next]:before {
	content: "\f051";
	font-weight: 600;
}


.player-btn[data-forward]:before {
	content: "\f01e";
	font-weight: 600;
}

.player-btn[data-volume]:before {
	font-weight: 600;
	color: #ffffff;
}
.player-btn[data-volume=full]:before {
	content: "\f028";
	font-weight: 600;
	color: #ffffff;
}
.player-btn[data-volume=half]:before {
	content: "\f027";
	font-weight: 600;
	color: #ffffff;
}

.player-btn[data-volume=zero]:before {
	content: "\f026";
	font-weight: 600;
	color: #ffffff;
}

.player-btn[data-volume=muted]:before {
	content: "\f6a9";
	font-weight: 600;
	color: #ffffff;
}

.player-btn[data-volume=muted] input[data-volume] {
	opacity: 0.56;
	filter: grayscale(100%);
}

.player-buttons {
	display: grid;
	grid-template-columns: 20% 60% 20%;
}

.player-buttons-left {
	text-align: left;
}

.player-buttons-left .player-btn:first-of-type {
	margin-left: 0!important;
}


.player-buttons-right {
	display: flex;
}

.player-buttons-right > *{
	margin-left: auto;
}

/* @end */

/* @group topbar */

.fownhope-audio-top {
	text-align: center;
	color: inherit;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	background-color: rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid #383838;
	
}

.fownhope-audio-top a {
	color: inherit;
	text-decoration: none;
}

/* @end */

/* @group Volume */

.player-btn[data-volume]:active {
	transform: scale(1.05);
}

.player-btn[data-volume] .volume-popover {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	height: 30px;
	bottom: 0;
	transition: 0.3s;
	z-index: -1;
	border-radius: 7px;
	transform: rotate(0deg)!important;
	left: 50px;
	width: 120px;
}

.player-btn[data-volume]:hover .volume-popover, .player-btn[data-volume]:active .volume-popover {
	visibility: visible;
	opacity: 1;
}



.slider[data-volume]{
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
	/* Full-width */
  height: 10px; /* Specified height */
  background: linear-gradient(to right, rgba(255, 8, 8, 0.7) 0%, #ffffff 0%, rgba(255, 255, 255, 0.79) 99.8%); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.3s; /* 0.2 seconds transition on hover */
  transition: opacity 0.3s;
	border-radius: 100px;
	width: 120px;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit-d(Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider[data-volume]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #008ae0!important; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100%;
}

.slider[data-volume]::-moz-range-thumb {
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #008ae0!important; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100%;
}

.slider[data-volume]:hover::-webkit-slider-thumb {
	border: 4px solid #ffffff;
	transition: 0.3s;
	cursor: grab;
}

.slider[data-volume]:active::-webkit-slider-thumb {
	border: 4px solid rgba(255, 255, 255, 0.82);
	transform: scale(0.95);
	transition: 0.3s;
	background-color: #ca3f00;
	cursor: grabbing;
}


/* @end */

/* @group Top Buttons */

.fownhope-audio.ready .fownhope-audio-top-buttons{
	transform: translateY(-50%);
	opacity: 0;
	transition: 1s;
}

.fownhope-audio.started .fownhope-audio-top-buttons{
	transform: translateY(0%);
	opacity: 1;
}

.fownhope-audio-top-buttons {
	display: grid;
	grid-template-columns: 50% 50%;
}

.fownhope-audio-top-buttons .player-btn {
	margin-bottom: 0;
}

.fownhope-audio-top-buttons .player-btn:before {
	font-size: 1.5em;
}

.fownhope-audio-top-buttons-right {
	display: flex;
}

.fownhope-audio-top-buttons-right > *{
	margin-left: auto;
}

.player-btn[data-share]:before {
	content: "\f14d";
	font-weight: 600;
}
.player-btn[data-share] {
	border: none;
}

/* @end */

/* @group Player actions */

.player-action {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: 0.3s;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-action-content {
	opacity: 0;
	animation-name: player-action;
	animation-duration: 0.5s;
	background-color: #000000;
	font-size: 2em;
	border-radius: 100%;
	transform: scale(0.5);
	width: 4em;
	height: 4em;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes player-action {
  0% {
  	transform: scale(0.5);
  	opacity: 0;
  }
  50% {
  	opacity: 0.8;
  }
  100% {
  	opacity: 0;
  	transform: scale(1.5);
  }
}

/* @end */

.fownhope-audio-meta {
	
}

@media only screen and (max-width: 600px) {
  .fownhope-audio-meta {
  	width: 70%!important;
  	margin-left: auto;
  	margin-right: auto;
  	color: #ffffff;
  	display: grid;
  	grid-template-columns: 100%;
  	column-gap: 5%;
  	margin-bottom: 20px;
  }
  .fownhope-audio-top-buttons {
  	display: grid;
  	grid-template-columns: 100%;
  }
  .player-buttons {
  	display: grid;
  	grid-template-columns: 100%!important;
  	row-gap: 20px;
  }
  
  .player-buttons .player-btn[](1) {
  	margin-left: 0px!important;
  }
  
  .fownhope-audio-container {
  	width: 90%!important;
  }
  
  .player-buttons-left {
  	display: none;
  }
  
  .player-buttons-right {
  	display: flex;
  }
  
  .player-buttons-right > *{
  	margin-right: auto;
  }
}
