@font-face {
	font-family: "Nimbus";
	src: url("font/nimbus-sans-l_bold.ttf") ;
	font-weight: bold;
/*	font-variant-ligatures: no-common-ligatures;*/
}

@font-face {
	font-family: "Nimbus";
	src: url("font/nimbus-sans-l_regular.ttf") ;
	font-weight: regular;
	font-style: normal;
	
}

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
/*	font-family: "Nimbus";*/
	font-family: "Nimbus";
	font-variant-ligatures: no-common-ligatures;
	color: white;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 1.1vw;
/*	background-color: blue;*/
	background: linear-gradient(136deg, #14a7df, #f7f7f7, #1da9dd, #1320db, #101010, #1b28e3, #ce2525, #4e25ce, #0cf20b, #ffffff);
	background-size: 1200% 1200%;
	animation: gradient 105s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



[data-tab-content] {
	display:none;
}

.main{
	display:block;
}

.active[data-tab-content] {
	display:block;
}


div, a, span, li, ul, audio {
	/*border: 1px dashed #00ff00;*/
	border: 1px solid transparent;
	border-radius: 25px 25px 25px 25px;
	background-color: rgb(0, 0, 0, 0.2);
}

#temp {
	display: none;
}

/* general
------------------------------------------*/

.menu-container > ul > li:hover {
	cursor: pointer;
	border: 1px solid white;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#exit {
	display: none;
}

.mobile-btn {
	display: none;
}


/* container // general
------------------------------------------*/
.container {
	width: 100vw;
	height: 100vh;
	display: grid;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(10, 1fr);
	grid-auto-flow: dense;
	border: none;
	background-color: transparent;
}

.container > * {
	grid-column: 1 / span 12;
}

/* header - logo - player - playing now
------------------------------------------*/

#logo, #player, #pl-now, #worm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: center;
  margin-top: 20px;
}

#logo {
	grid-column: 1 / 4;
	grid-row: 1 / 1;
	border: none;
	border-radius: 0px;
	background-color: transparent;
	margin-right: 20px;
	margin-left: 20px;
}

#logo > img {
	height: auto;
	width: 100%;
	border-radius: 0px;
}

#player {
	grid-column: 4 / 5;
	grid-row: 1 / 1;
	box-shadow: inset 0 0 10px hotpink;
	margin-right: 10px;
	margin-left: 20px;
}

#play-pause   {
  cursor: pointer;
  padding: 12px 18px;
  z-index: 2;
  background-image: url(img/audio-player/play.png);
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: 16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px;
  background-color: transparent;
  border: none;
}

#player-container {
	border: none;
	background-color: transparent;
}

.play {
  background-image: url(img/audio-player/play.png);
}
.pause {
   background-image: url(img/audio-player/pause.png)!important;
}

#pl-now {
	grid-column: 5 / 10;
	grid-row: 1 / 1;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	font-size: 1.3vw;
	margin-right: 20px;
/*  justify-content: revert;*/
/*	background-color: yellow;*/

}

.playing-now {
	font-weight: bold;
	box-shadow: inset 0 0 10px hotpink;
}

.playing-now > span {
	overflow: hidden;
	background-color: transparent;
}

#pl-now > marquee {
	width: 75%;
}

#pnt {
	border: none;
	border-radius: 0;
	width: 15%;
/*	float: right;*/
	text-align: right;
	margin-right: 10px;
}

.oa-st, .oa-rm {
	border: none;
	font-weight: normal;
}

.oa-st {
	/*padding: 10px;*/
	background-color: transparent;
}

.oa-rm {
	font-size: 1vw;
	margin-left: 6px;
	background-color: transparent;
}



#worm {
	grid-column: 9 / 10;
	grid-row: 1 / 1;
	border: none;
/*	background-color: yellow;*/
	margin-right: 20px;
	margin-left: 10px;
}

#worm > img, #worm > a {
	border: none;
	background-color: transparent;
}


/* schedule
------------------------------------------*/

#schedule {
	grid-column: 1 / 4;
	grid-row: 2 / 11;
	z-index: 12;
	overflow-y: scroll;
	margin: 20px;
	border: none;
	position: relative;
}

#day-schedule {
	display: flex;
	width: 100%;
	height: auto;
	margin-top: 5px;
	max-width: 100%;
	text-align: center;
	border: none;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	background-color: transparent;
		
}

#day-schedule > span {
	margin-bottom: 25px;
	width: 90%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
  justify-content: space-evenly;
  background-color: transparent;
  text-align: center !important;


}

#day-schedule > span > span{
	text-align: center;
	margin: 5px 
	x;
/*	padding: 5px 18px 5px 18px;*/

}

.day-header {
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	width: 100%;
	margin: 15px 0px !important;
	font-size: 1.3vw; /*18*/
	border-radius: inherit;
	padding: 5px 18px 5px 18px;
}

.time {
	padding: 5px 15px 5px 15px;
	text-align: center !important;
	width: 25%;
}

.showtitle {
	float: left;
/*	display: inline-block;*/
	text-align: left;
	width: 70%;
	padding:  5px 10px 5px 25px;
	margin-bottom: 10px;
/*	border: 1px solid pink;*/

}

.showtitle > p {
	margin: 0;
	padding: 0;
	text-align: left;
}

.showmaker {
	font-size: 0.9vw; /*12*/
}

/* menu-container
------------------------------------------*/

.menu-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	margin-top: 10px;
	padding: 0;
	z-index: 0;
	text-transform: uppercase;
	border: none;
	background-color: transparent;
}

.menu-container > ul {
	font-weight: bold;
	font-size: 1.5vw; /*22*/
	display: flex;
	align-items: center;
  justify-content: space-evenly;
	width: 100%;
	float: left;
	border: none;
	margin: 10px;
	background-color: transparent;
}

ul > li {
	display: flex;
/*	flex-wrap: wrap;
	flex-direction: row;*/
	align-items: center;
	justify-content: center;
	width: 30%;
	height: 100%;
	float: left;
	padding: 2px 0px;
}

/* preview-container
------------------------------------------*/
.preview-container{
	grid-column: 4 / 10;
	grid-row: 2 / 12;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: none;
	margin: 20px;
}

#preview {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: transparent;
	border: none;
	/*justify-content: center;*/
	overflow-x: hidden;
}

#preview > div {
/*	margin: 10px;*/
	padding: 10px;
	padding-top: 20px;

}

/* news ++ about
------------------------------------------*/
#news, #story{
	padding: 0;
	margin: 0;
	width: 96%;
	background-color: transparent;
}

#news > span > h3, h5, #story > h3, h5{
	padding: 0;
	margin: 0;
	text-align: left;
	width: 96%;
}

#news > span > h5{
	margin-bottom: 5px;
	margin-top: 50px;
}

#news > span > h3{
	text-align: left;
	margin-bottom: 10px;
}

#news > span > p, #story > span > p {
	text-align: left;
	margin: 40px 10px 0px 10px;
	width: 96%;
}

#news > span > p {
	white-space: pre-wrap;
  word-wrap: break-word;
}

.news-text, .about-text {
 max-width: 96% !important;
 white-space: pre-wrap !important;
 word-wrap: break-word !important;
}

#news > span, #story > span {
	width: 100%;
	margin-bottom: 20px;
	padding: 0px 50px 50px 50px;
	border-radius: inherit;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
  justify-content: space-evenly;
}

#news > span > span {
	width: 100%;
}

#story {
/*	width: 90%;*/
}

#story > span > span {
	margin-top: 50px;
}

#story > span > p {
	word-wrap: break-word;
  white-space: pre-wrap;
}

#news > span > p > a, #story > span > p > span {
	padding: 0px 5px;
	background-color: rgb(0, 0, 0, 0.2);
	text-decoration: none;
	color: inherit;
}

#news > span > p > a:hover, #story > span > p > span:hover {
	cursor: pointer;
	border: 1px solid white;

}

.news-img-span {
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
  justify-content: space-evenly;
}

.news-img-none {
	display: none;
}

.news-img {
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: auto;
}

.about-img-double{
	width: 49%;
/*	height: 100%;*/
	margin: 0;
	padding: 0;
}

.about-img-single{
	width: 99%;
/*	height: 100%;*/
	margin: 0;
	padding: 0;
}

.img-caption {
	padding: 10px 20px;
	margin: 0;
	width: 100%;
	max-width: 100%;
	float: left !important;
	display: block;
	font-size: 0.9vw; /*12*/
	background-color: transparent;
	text-align: left !important;
	word-wrap: break-word;
  white-space: pre-wrap;
}

.caption-none{
	display: none;
}


/* radiomakers
------------------------------------------*/
#radiomakers{
	border: none;
	background-color: transparent;
}

#rm-list {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
  justify-content: space-evenly;
  word-wrap: break-word;
  white-space: pre-wrap;
}

#rm-list > span {
	position: relative;
	width: 47%;
	height: 100%;
	margin: 0px 0px 20px 0px;
	padding: 20px 20px 20px 20px;
	text-align: center;
}

#rm-list > span:hover {
	cursor: pointer;
	border: 1px solid white;
}

.rm-page {
	display: block;
	width: 70% !important;
	float: right;
	border: none !important;
	background-color: transparent !important;
	border-radius: inherit;
	padding-bottom: 0px;
	padding-right: 20px ;
}


.all-titles{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: space-evenly;
	width: 100%;
	border: none;
	border-radius: inherit;
	font-size: 1.3vw;
	background-color: transparent;
}

.all-titles > span {
	width: 100%;
	background-color: transparent;
	padding: 0px 5px;
	position: relative;
	text-align: center;
}

.rm-page-title{
	width: 30%;
	float: left;
	font-size: 1.3vw;
	padding: 20px 20px 0px 10px;
	font-weight: bold;
}

.rm-maker {
	display: none;
	width: 100%;
	text-align: left;
	font-size: 1vw;
	font-weight: normal;
}

.rm-desc, .rm-bio {
	text-align: left;
	padding-bottom: 0;
	font-size: 1.1vw;
}

.rm-bio-hidden {
	display: none;
}

.rm-img {
	display: block;
	width: 100%;
	float: center;
	border-radius: inherit;
	padding-top: 20px;
	
}

.rm-schedule, .rm-links {
	text-align: center;
	display: none;
	font-weight: normal;
	font-size: 1vw;
	float: center;
}

.rm-schedule{
	margin-bottom: 20px;
}

.links-span{
/*	width: 100%;*/
	background-color: transparent;
/*	background-color: red;*/
	float: left;
	margin-bottom: 10px;
}

.rm-links{
	display: inline-block;
	margin-right: 5px;
	padding: 5px 10px;
	color: white;
	text-decoration: none;
	margin-top: 10px;
}

.rm-links:hover {
	border: 1px solid white;
}

.non-links {
display: none !important;
}

.img-square {
	border-radius: unset;
	padding-bottom: 20px;
}


/* chat
------------------------------------------*/

.chat {
	grid-column: 10 / 13;
	grid-row: 1 / 9;
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 20px;
	border: none;
}

.chat-frame {
	display: block;
	width: 90%;
	height: 100%;
	margin: 20px;
	padding: 10px 10px;
	border: none;
	border-radius: 25px;
/*	opacity: 0.8;*/
	text-align: center;
	/*background-color: transparent;*/
}

#FTR_LEFT {
	display: none !important;
/*	background-color: white !important;*/
}

#OMW {
	background-color: transparent;
}
/* socials
------------------------------------------*/

.socials {
	grid-column: 10 / 13;
	grid-row: 9 / 12;
	z-index: 12;
	border: none;
	font-size: 1.1vw;
	margin: 20px;
	margin-top: 0;
	padding: 0;
	border: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: space-evenly;
}

.socials > a {
  	text-decoration: none;
  	text-transform: uppercase;
  	color: white;
  	text-align: center;
  	padding: 10px;
}

.socials > a:hover {
	border: 1px solid white;
}

a > img {
	display: block;
	height: 20px;
}

#newsletter{
	width: 60%;
}

#mixcloud {
	width: 60%;
}