body {
	 background-color: #000000;
	 overflow: hidden;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: 400; /* 55 Roman corresponds to regular weight */
	}

.background{
	
	width: 99%;
	height: 96%;
	margin-top: 20px;
	position: absolute;
	top: 5vh;

}


.donate {
	position: relative;
	float: left;
	color: #dddddd;
	font-size: 15px;
	text-align: right;
	padding-right: 15px;
padding-left: 10px;
	margin-bottom: 10px;
}


.demo-bg {
  opacity: 0.07;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}


.TL_TABLE {
	 table-layout: fixed;
}


.stime {
	font-size: 17px;
	margin-right: 5px;
	margin-bottom: 15px;
	
	text-align: left;
}


.stime_live {
	font-size: 20px;
	margin-right: 5px;
	margin-bottom: 15px;
	width: 25%;
	animation: blink 2s infinite;
	text-shadow: 2px 2px #810000;
}

.name {
	letter-spacing: 3px;
	transform: scale(1, .8);
	width: 80%;
	margin-left: 3px;
	text-align: left;
	font-size: 20px;
}


.genre {
color: #808080;
font-size: 13px;
position: relative;
top: 0vh;
margin-left: 5px;
width: 20%;
}




.name_live {
	letter-spacing: 3px;
	transform: scale(1, .8);
	font-size: 30px;
	width: 80%;
	animation: blink 2s infinite;
	text-shadow: 2px 2px #810000;
}


.name_long {
	letter-spacing: 1px;
	text-align: left;
	transform: scale(1, .8);
	width: 80%;
	margin-left: 5px;
}



.timezone_text{
	padding-top: 5px;
	color: #dddddd;
	font-size: 40px;
	text-align: center;
	margin-bottom: 10px;
}

.tz_txt{
	position: relative;
	float: right;
	color: #dddddd;
	font-size: 15px;
	text-align: right;
	padding-right: 15px;
	margin-bottom: 10px;
}


.time_slot {
	height: 20px;
	flex: 2 0 2.9vh;
	margin: 0px;
	padding-inline-start:10px;
	font-size: 30px;
	color: #eeeeee;
	width: 100%;
}



.new_day{
	height: 2vh; 
	margin-top: 15px;
	margin-bottom: 8px;
	font-size: 25px;
	width: 100%;
	margin-left: 0px;
letter-spacing: 7px;	
}

.first_day{
	height: 2vh; 
	margin-top: 0px;
	margin-bottom: 8px;
	font-size: 25px;
	width: 100%;
	margin-left: 0px;
	letter-spacing: 7px;	
}

.nday {
	text-align: center;
	text-shadow: 2px 2px #000081;
}

.Monday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Tueday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Wednesday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Thursday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Friday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Saturday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
}

.Sunday{
	color: #d0d0d0;
	text-shadow: 2px 2px #000081;
	
}




.time_slot_live {
	flex: 2 0 2.5vh;
	margin: 0px;
	padding-inline-start:10px;
	font-size: 36px;
	color: #ee2222;
	padding-inline-start:10px;
	width: 90%;
}

.flyer {
	width: 30%;
	position: relative;
	left: 0;
	margin: 0;
	height: 85%;
	display: flex;
  justify-content: left;
  display: none;
}

.flyer_img{ 
	position: relative; 
	max-width: -webkit-fill-available;
	max-width: -moz-available;          /* WebKit-based browsers will ignore this. */
  max-width: fill-available;
}


/* For desktop: */
.col-1 {width: 50vw;}
.col-2 {width: 50vw;}

.timezones_ul li {
    line-height: 0.8;   /* reduce vertical spacing */
}


.timezones_ul {
display: block;
	position: relative;
	height: 99%;
	list-style-type: none;
	padding: 0;
	margin-top: -4px;
	margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  align-items: space-evenly;
  width: 24%;
  left: 1%;
}


.tz_div {
	width: 100%;
	position: absolute;
	top: 0vh;
	left: 00%;
	height: 95.5%;
max-width: 100%;
	background: rgb(0,0,0);
/*background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(129,129,129,1) 50%, rgba(0,0,0,1) 100%); */
background-image: url("background.png");
background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
background-size: 100% 100%;
}

.tz_div_fudge {
	width: 69%;
	position: absolute;
	top: 0vh;
	left: 30%;
	height: 87.5%;
	background: rgb(0,0,0);

}


















@media only screen and (max-width: 768px) {
  /* For mobile phones:    768*/
  [class*="col-"] {
    width: 100%;
}


body {
	 background-color: #000000;
	 overflow: auto;
	 overflow-x: hidden; 
	} 
	
.tz_div {
	left: 0vw;
	position: relative;
	top: 0%;
	float: clear;
	background: rgb(0,0,0);
	text-align: center;
}

.flyer {
	position: relative;
	width: 100%;
	height: 50%;
	max-width: 100%;
	left: 0vw;
	margin: 0;
	
	text-align: center;
	display: block;
}

.timezones_ul {
	height: unset;
	list-style-type: none;
	padding: 0;
	margin: 5px;
	width: 100%;
	text-align: center;
}

.name {
	font-size: 20px;
}


.stime {
	font-size: 20px;
	width: 25%;
	color: #ddfed4;
	letter-spacing: 1px;
	text-align: left;
	margin-right: 5px;
}

.stime_live {
	font-size: 20px;
	width: 25%;
	letter-spacing: 1px;
	animation: blink 2s infinite;
	text-shadow: 2px 2px #810000;
	text-align: left;
}

.name {
	letter-spacing: 1px;
	transform: scale(1, .7);
	font-size: 20px;
	width: 75%;
	text-align: left;
}



.name_long {
	font-size: 20px;
		text-align: left;
		transform: scale(1, .7);
}


.first_day{
	height: 2vh; 
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 25px;
	width: 100%;
	margin-left: 20px;
	letter-spacing: 7px;	
	text-align: left;
	
}


.new_day{
	height: 2vh; 
	margin-top: 20px;
	font-size: 25px;
	margin-bottom: 29px;
	text-align: left;
	width: 100%;
	margin-left: 20px;
}

.genre {
color: #cccccc;
font-size: 15px;
position: relative;
top: 0;
width: 20%;
margin-left: 10px;
}


.flyer_img{
	position: relative;
	max-height: 100%;

	left: 0px;
}


.time_slot {
	height: 20px;
	margin-bottom: 2px;
	font-size: 25px;
	width: 100%;
text-align: left;
}

.time_slot_live {
	font-size: 20px;
	color: #ee2222;
	margin-top: 15px;
	width: 100%;
	animation: blink 2s infinite;
	text-align: left;
}


.timezone_text{
	padding-top: 5px;
	color: #dddddd;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
}

.tz_txt{
	position: relative;
	float: right;
	color: #dddddd;
	font-size: 15px;
	text-align: right;
	padding-right: 15px;
	margin-bottom: 10px;
}


.donate {
	position: relative;
	float: left;
	color: #dddddd;
	font-size: 15px;
	text-align: right;
	padding-right: 15px;
	margin-bottom: 10px;
}



.demo-bg {
  display: none;
}


}
























a {	text-decoration: none; color: unset; }
a:visited {	text-decoration: none;  color: unset; }
















@keyframes blink{
  0% { color: #000000;  }
  10% { color: #222222; }
  20% { color: #444444; }
  30% { color: #666666; }
  40% { color: #888888; }
  50% { color: #aaaaaa; }
  60% { color: #888888; }
  70% { color: #666666; }
  80% { color: #444444; }
  90% { color: #222222; }
  100% { color: #000000;  }
}