/*=============== General ===============*/

body {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	max-width: 900px;
	margin: 0 auto;
}

.lt-ie7 body {
	width: 865px;
}

a {
	text-decoration: none;
	color: #000;
}

a img {
	border: 0;
}
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}
.focus-visible {
	outline: 3px #3A3A3A dashed;
}
a.focus-visible {
	box-shadow: 0 0 0 3px white;	
}

/*=============== Header ===============*/
#header {
	margin-bottom: 10px;
	overflow: hidden;
}
#logo-container {
	padding: 10px;
}
#logo-container a {
	display: inline-block;
}
#logo-container img {
	display: block;
}
.no-logo #header {
	display: none;
}
/*========= Nav menu =========*/

#sections {
	padding: 8px 10px;
	background-color: #3B3B3D;
	box-sizing: border-box;
}

#sections ul {
	list-style-type: none;
	text-align: right;
	padding: 0;
	margin: 0;
}
#sections ul li {
	font-size: 73%;
	display: inline-block;
	padding-left: 2px;
	text-transform: uppercase;
}
#sections ul li a {
	display: inline-block;
	padding: 5px 8px 5px 8px;
	color: #FFFFFF;
	background: #FF3300;
}
#sections ul li a:hover {
	background-color: #000;
	text-decoration: underline;
}


/*=============== Main section ===============*/

#two-columns {
	display: flex;
}

/*========= Radios list =========*/

#radios {
	flex-grow: 1;
	margin-bottom: 10px;
	overflow: hidden;
}
.no-image #radios {
	margin-bottom: 0;
}
#radios ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#radios li {
	line-height: 0.5em;
}

#player-container {
	margin-left: 10px;
	flex-shrink: 1;
}
.no-image #player-container {
	display: none;
}

#player-image picture {
	position: relative;
	padding-top: 65%;
	margin-bottom: 10px;
	background: #fff;
	background-color: white;
	width: 500px;
	display: inline-block;
}
#player-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.banner {
	text-align: center;
}
.no-image .banner {
	display: none;
}
.new-stream-title {
	padding: 5px 0;
	text-align: center;
	font-size: 120%;
	line-height: 1.2em;
	color: #f30;
	max-width: 500px;
}
.new-stream-message {
	padding: 5px 0;
	text-align: left;
	font-size: 105%;
	line-height: 1.2em;
	color: #444;
	max-width: 500px;
}

@media (max-width: 520px) {
	.new-stream-message,
	.new-stream-title {
		padding: 5px 15px;
	}
}

.no-support-message {
	padding: 20px 0;
	text-align: center;
	font-size: 86%;
	line-height: 1.2em;
	color: #444;
}
.no-support-message a {
	border-bottom: 1px solid #aaa;
}



/*========= Responsive =========*/

@media (max-width: 767px) {
	#two-columns {
		display: initial;
		max-width: 500px;
	}
	#player-container {
		max-width: 500px;
		margin: 0 auto;
	}
	#player-image picture {
		width: auto;
	}
}

@media (max-height: 240px) {
	body {
		max-width: none;
	}
	.banner,
	.no-support-message,
	.new-stream-message,
	.new-stream-title {
		display: none;
	}
}

@media (min-height: 120px) {
	#player-container {
		width: auto !important;
	}
}

@media (max-height: 120px) {
	html {
		overflow: hidden;
		height: 100%;
	}
	body {
		height: 100%;
		position: relative;
	}
	#player-container {
		display: block;
	}

	#two-columns {
		max-width: unset;
		height: 100%;
		display: flex;
	}
	#radios {
		height: 100%;
		margin-bottom: 0;
	}
	#radios ul,
	#radios li,
	#radios li > a {
		height: 100%;
	}
	#player-container {
		height: 100%;
		width: auto;
		margin: 0;
	}
	#player-image {
		height: 100%;
	}
	#player-image picture {
		height: 100%;
		width: auto;
		margin-bottom: 0;
		padding-top: 0;
		margin-left: 0;
		border-radius: 3px;
		overflow: hidden;
		margin-left: 1px;
	}
	#player-image img {
		display: block;
		position: static;
		width: 153.87px;
	}
}

@media (max-height: 90px) {
	#logo-container {
		display: none;
	}
}

@media (min-height: 100px) {
	#player-image img {
		width: auto;
		height: 100%;
	}
}

@media (max-height: 120px) and (max-width: 414px) {
	#player-container {
		display: none;
	}
}



/*========= Player =========*/

.jp-container *:focus {
	/* Disable the browser focus highlighting. */
	outline: none;
}

.jp-container button::-moz-focus-inner {
	/* Disable the browser CSS3 focus highlighting. */
	border: 0;
}


/* @group CONTROLS */

.jp-container {
	position: relative;
}

.jp-controls {
	padding: 10px 10px 17px 52px;
	border-radius: 3px;
	display: block;
	position: relative;
	box-sizing: border-box;
	min-height: 61px;
}
.jp-controls:hover,
.jp-controls.playing,
.jp-controls.paused {
	background-color: #f1f1f1;
}
.jp-controls:hover .description,
.jp-controls .jp-play.focus-visible + .jp-details .description,
.jp-controls.playing .description,
.jp-controls.paused .description {
	color: #000;
}

.jp-controls::before {
	content: "";
	float: right;
	width: 68px;
	height: 15px;
}
.download .jp-controls::before {
	width: 106px;
}

.jp-controls button {
	display: block;
	/* hide text */
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	border: 0;
	border: none;
	cursor: pointer;
}

.jp-play {
	background: #3A3A3A url("../images/play.png?ver=20200605") no-repeat scroll 10px -1px;
	position: absolute;
	top: 12px;
	left: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	z-index: 2;
}
.jp-controls:hover .jp-play,
.jp-controls .jp-play.focus-visible,
.jp-controls.playing .jp-play,
.jp-controls.paused .jp-play {
	color: #FFFFFF;
	background-color: #FF3300;
	background-position: 10px -37px;
}
.jp-controls .jp-play.focus-visible {
	border: 3px dashed #3A3A3A;
	height: 40px;
	width: 40px;
	margin: -3px 0 0 -3px;
	transition: border-color .1s linear;
	background-clip: padding-box;
}
.jp-controls.playing .jp-play {
	background-position: 9px -72px;
}
.jp-controls.loading .jp-play {
	background-image: url("../images/loading.gif?ver=20200605");
	background-position: 9px -72px;
}
.jp-controls.loaded .jp-play {
	background-position: 9px -108px;
}

.jp-controls.playing .jp-play,
.jp-controls.paused .jp-play {
	transition: background 0.3s;
}


.jp-stop {
	display: none !important;
}

.jp-title {
	font-size: 100%;
	display: block;
	line-height: 1.10em;
	margin-bottom: 2px;
	margin-top: 4px;
	padding-top: 0;
	transition: color 0.1s;
}
.jp-controls:hover .jp-title,
.jp-controls .jp-play.focus-visible + .jp-details .jp-title,
.jp-controls.playing .jp-title,
.jp-controls.paused .jp-title {
	color: #FF3300;
}
.jp-controls .jp-play.focus-visible + .jp-details .jp-title {
	text-decoration: underline;
}

.jp-details span {
	font-size: 78%;
	line-height: 1.2em;
	color: #444444;
}

@media (max-height: 120px) {
	.jp-container:not(.active) {
		display: none;
	}
	.playlist-item .jp-controls {
		padding-left: 108px
	}
	.active .jp-controls {
		background-color: #f1f1f1;
	}
	.active .jp-controls:hover {
		background-color: #ececec;
	}
	.active .jp-controls .jp-play {
		color: #FFFFFF;
		background-color: #FF3300;
		background-position: 10px -37px;
	}
	.active .jp-controls .jp-title {
		color: #FF3300;
	}
	.active .jp-controls.playing .jp-play,
	.active .jp-controls.loading .jp-play {
		background-position: 9px -72px;
	}
	.active .jp-controls.loaded .jp-play {
		background-position: 9px -108px;
	}
	.playlist-item .jp-play {
		left: 37px;
	}
}

@media (max-height: 120px) and (max-width: 414px) {
	.playlist-item .jp-controls {
		padding-left: 92px
	}
	.playlist-item .jp-play {
		left: 29px;
	}
}


/* @end */
/* @group progress bar */
.jp-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.15);
	width: 100%;
	height: 5px;
	border-radius: 0 0 3px 3px;
	display: none;
}
.jp-controls.playing ~ .jp-progress,
.jp-controls.paused ~ .jp-progress {
	display: block;
}
.jp-container:hover .jp-progress {
	height: 10px;
	transition: height .1s linear;
}
.jp-seek-bar {
	width: 0px;
	height: 27px;
	position: absolute;
	bottom: -10px;
	cursor: pointer;
}
.jp-play-bar {
	background-color: #FF3300;
	height: 5px;
	margin-top: 12px;
	border-radius: 0 0 0 3px;
}
.jp-controls:not(.loading) ~ .jp-progress .jp-play-bar {
	min-width: 2px;
}
.jp-container:hover .jp-play-bar {
	height: 10px;
	margin-top: 7px;
	transition: all .1s linear;
}

@media (max-height: 120px) {
	.jp-progress {
	  bottom: 10px;
	  right: 9px;
	  left: 52px;
	  width: auto;
	  height: 10px;
	  border-radius: 0;
	}
	.playlist-item .jp-progress {
		left: 108px
	}
	.jp-seek-bar {

	}
	.jp-play-bar {
		height: 10px;
		margin-top: 7px;
		border-radius: 0;
	}
}

@media (max-height: 120px) and (max-width: 414px) {
	.playlist-item .jp-progress {
		left: 92px
	}
}

/* @end */
/* @group features */
.jp-features {
	position: absolute;
	top: 0;
	right: 84px;
	width: 72px;
	display: none;
}
.jp-container .playing ~ .jp-features,
.jp-container .paused ~ .jp-features {
	display: block;
}
.jp-features a {
	float: right;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 18px;
	padding: 5px;
	box-sizing: content-box;
	border: 3px solid transparent;
	border-radius: 9px;
	background-clip: padding-box;
}
.jp-features a:hover,
.jp-features a.focus-visible {
	background-color: rgba(0, 0, 0, .05);
	box-shadow: none;
}
.jp-features a.focus-visible {
	border: 3px #3a3a3a dashed;
}
.jp-download {
	background: url("../images/play.png?ver=20200605") no-repeat scroll 7px -498px;
}
/* @end */
/* @group volume controls */
.jp-state-no-volume .jp-volume-controls {
	display: none;
}

.jp-volume-controls {
	position: absolute;
	top: 0;
	right: 0px;
	width: 87px;
	display: none;
}
.jp-container:not(.jp-state-no-volume) .playing ~ .jp-volume-controls,
.jp-container:not(.jp-state-no-volume) .paused ~ .jp-volume-controls {
	display: block;
}

.jp-volume-controls button {
	display: block;
	position: absolute;
	overflow: hidden;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 18px;
	padding: 5px;
	box-sizing: content-box;
	border: 3px solid transparent;
	border-radius: 9px;
	background-clip: padding-box;
}
.jp-volume-controls button:hover,
.jp-volume-controls button.focus-visible {
	background-color: rgba(0, 0, 0, .05);
}
.jp-mute {
	background: url("../images/play.png?ver=20200605") no-repeat scroll 7px -186px;
}
.jp-unmute {
	background: url("../images/play.png?ver=20200605") no-repeat scroll 7px -149px;
}

.jp-volume-range {
	-webkit-appearance: none;
	padding: 0 5px;
	margin: 4px;
	border-radius: 4px;
	width: 44px;
	background: transparent;
	cursor: pointer;
	height: 26px;
	float: right;
}
.jp-volume-range:hover,
.jp-volume-range.focus-visible {
	background-color: rgba(0, 0, 0, .05);
}

.jp-volume-range.focus-visible,
.jp-volume-controls button.focus-visible {
	border: 3px #3a3a3a dashed;
}
.jp-volume-range.focus-visible {
	margin-top: 1px;
	transform: translateX(3px);
}

.jp-volume-range::-webkit-slider-runnable-track {
	width: 100%;
	height: 0;
	animate: 0.2s;
	border-radius: 1px;
	border: 1px solid #444;
}
.jp-volume-range::-webkit-slider-thumb {
	height: 36px;
	width: 9px;
	background: url("../images/play.png?ver=20200605") no-repeat scroll -4px -216px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -18px;
	border: none;
}
.jp-volume-range:focus::-webkit-slider-runnable-track {
	background: #444;
}
.jp-volume-range::-moz-range-track {
	width: 100%;
	height: 0;
	cursor: pointer;
	animate: 0.2s;
	border-radius: 1px;
	border: 1px solid #444;
}
.jp-volume-range::-moz-range-thumb {
	height: 36px;
	width: 9px;
	background: url("../images/play.png?ver=20200605") no-repeat scroll -4px -216px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -18px;
	border: none;
}
.jp-volume-range::-ms-track {
	width: 100%;
	height: 0;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}
_:-ms-fullscreen, :root .jp-volume-range::-ms-track {
	/* IE 11 */
	margin-top: -3px;
}
.jp-volume-range::-ms-fill-lower {
	background: transparent;
	border-radius: 1px;
	border: 1px solid #444;
}
.jp-volume-range::-ms-fill-upper {
	background: transparent;
	border-radius: 1px;
	border: 1px solid #444;
}
.jp-volume-range::-ms-thumb {
	height: 36px;
	width: 9px;
	background: url("../images/play.png?ver=20200605") no-repeat scroll -4px -216px;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 0;
	border: none;
}
.jp-volume-range:focus::-ms-fill-lower {
	background: transparent;
}
.jp-volume-range:focus::-ms-fill-upper {
	background: transparent;
}


/* @end */
/* @group current time and duration */
.jp-time-holder {
	position: absolute;
	bottom: 7px;
	right: 9px;
	width: 59px;
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	background: #f1f1f1;
	box-shadow: 0 -2px 2px 2px #f1f1f1;
}
.jp-controls.playing ~ .jp-time-holder,
.jp-controls.paused ~ .jp-time-holder {
	display: block;
}
.jp-container:hover .jp-time-holder {
	bottom: 13px;
	transition: bottom .1s linear;
}
.jp-current-time,
.jp-duration {
	font-size: .64em;
}
.jp-current-time {
	position: absolute;
	right: 34px;
	text-align: right;
}
.jp-duration {
	float: right;
	text-align: right;
}
.jp-duration::before {
	content: "/";
	position: absolute;
	right: 29px;
}


@media (max-height: 120px) {
	.jp-time-holder {
		bottom: 23px !important;
	}
	.no-image:not(.no-logo) .jp-progress,
	.no-image:not(.no-logo) .jp-time-holder {
		right: 88px;
	}
}
@media (max-height: 120px) and (max-width: 414px) {
	.jp-container:not(.no-logo) .jp-progress,
	.jp-container:not(.no-logo) .jp-time-holder {
		right: 88px;
	}
}

/* @end */
/* @group skip buttons prev/next */

.jp-skip-controls {
	display: none;
}
@media (max-height: 120px) {
	.playlist-item .jp-skip-controls {
		display: block;
		position: absolute;
		top: 15px;
		left: 0;
		z-index: 1;
	}
	.jp-skip-controls button {
		display: block;
		position: absolute;
		overflow: hidden;
		text-indent: -9999px;
		border: none;
		cursor: pointer;
		width: 10px;
		height: 12px;
		padding: 5px;
		box-sizing: content-box;
		border: 3px solid transparent;
		border-radius: 9px;
		background-clip: padding-box;
	}
	.jp-skip-controls .focus-visible {
		border: 3px dashed #3A3A3A;
		height: 13px;
		transition: border-color .1s linear;
		background-clip: padding-box;
	}
	.jp-skip-prev {
		background: url("../images/play.png?ver=20200605") no-repeat scroll 3px -254px;
		left: 6px;
	}
	.jp-skip-controls [disabled] {
		filter: grayscale(1);
		opacity: .4;
		cursor: default;
	}
    .jp-skip-next {
    	background: url("../images/play.png?ver=20200605") no-repeat scroll 3px -287px;
    	left: 75px;
    }
}
@media (max-height: 120px) and (max-width: 414px) {
	.jp-skip-prev {
		left: 4px;
	}
    .jp-skip-next {
    	left: 61px;
    }
}

/* @end */

.jp-jplayer audio,
.jp-jplayer {
	width: 0px;
	height: 0px;
}

.jp-jplayer {
	background-color: #000000;
}