style-home.css

body, input, textarea {
	font-family: rubik, sans-serif;
}
.clearfix:after {
	content: "";
	display: none;
	clear: both;
}
.kz-title {
	font-size: 40px;
	font-weight: 900;
}
.kz-subtitle {
	font-family: rubik, sans-serif;
	font-size: 30px;
	font-weight: 700;
}

#main {
	width: 100%;
	max-width: 100%;
	border: solid 6px #000;
}
#wrapper-home .main-banner {
	position: relative;
	border-bottom: solid 3px #000;
}
#wrapper-home .main-banner #show-link-curr {
	display: block;
}
#wrapper-home .main-banner #show-image-curr {
	width: 100%;
	height: 600px;
	max-height: 60vh;
    object-fit: cover;
}

#wrapper-home .main-banner .show-details {
	position: absolute;
	bottom: 0;
	right: 0;
	color: #fff;
}
#wrapper-home .main-banner .show-details .blck-bg {
	display: block;
}
#wrapper-home .main-banner .show-details .blck-bg:nth-last-child(2) {
	float: right;
}
#wrapper-home .main-banner .show-details .play-btn {
	position: absolute; left: -50px; bottom: 24%;
  margin-right: 20px;
	transform: scale(1) translateY(40%);
    animation-name: play-btn;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
	/*animation-direction: alternate;*/
	animation-timing-function: ease-in-out;

}
#wrapper-home .main-banner .show-details .play-btn img {
	height: 58px;
	width: 44px;
}

@keyframes play-btn {
    
    0%   {transform: scale(1) translateY(40%);}
    15%  {transform: scale(1.1) translateY(40%);}
	30%  {transform: scale(1) translateY(40%);}
	100%  {transform: scale(1) translateY(40%);}
}

#wrapper-home .main-banner .show-details .blck-bg > * {
	display: inline-block;
}
#wrapper-home .main-banner .show-details .now-label {
	padding: 4px 8px;
	font-size: 16px;
	font-weight: 500;
	background: #ff2f3b;
}
#wrapper-home .main-banner .show-details .show-name {
	padding: 0 6px 6px 16px;
	font-size: 80px;
	font-weight: 900;
	background: #000;
}
#wrapper-home .main-banner .show-details .dj-name {
	padding: 0 8px 0 12px;
	font-family: Henri, sans-serif;
	font-size: 41px;
	line-height: .9;
	font-weight: 400;
	background: #000;
}
#wrapper-home .next-shows .next-show-item {
	position: relative;
	float: right;
	height: 300px;
	width: 33.33%;
	overflow: hidden;
	box-sizing: border-box;	
	border-bottom: solid 3px #000;
}
#wrapper-home .next-shows .next-show-item + .next-show-item {
	border-right: solid 6px #000;
}


/*@media all and (min-width: 1024px) {*/
	#wrapper-home #shows-curr-and-next {
		height: calc(100vh - 167px);
	}
	#wrapper-home .main-banner #show-image-curr {
		height: calc(65vh - 167px*0.6);
	}
	#wrapper-home .next-shows {
		height: calc(35vh - 167px*0.4);
	}
	#wrapper-home .next-shows .next-show-item {
		height: 100%;
	}
/*}*/
@media all and (max-width: 1099px) {
	#wrapper-home #shows-curr-and-next {
		height: calc(100vh - 199px);
	}
	#wrapper-home .main-banner #show-image-curr {
		height: calc(62vh - 199px*0.6);
	}
	#wrapper-home .next-shows {
		height: calc(38vh - 199px*0.4);
	}
}

@media all and (max-width: 767px) {
	#wrapper-home .next-shows,
	#wrapper-home #shows-curr-and-next {
		height: auto !important;
	}
}


/*#wrapper-home .next-shows .next-show-item img {/* turn images to black and white */
	/*-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	/*filter: grayscale(100%);
}*/
#wrapper-home .next-shows .next-show-item img {
	position: absolute;
	top: 50%;
	left: 50%;
	height: auto;
	width: auto;
	min-width: 100%;
	max-width: 150%;
	transform: translateX(-50%) translateY(-50%);
}

@media all and (max-height: 760px) and (max-width: 1499px) {
	#wrapper-home .next-shows .next-show-item img {
		max-width: 100%;
	}
}

#wrapper-home .next-shows .next-show-item .wrapper {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
}
/*#wrapper-home .next-shows .next-show-item .show-overlay {
	position: absolute;
    top: 0;
    left: 0;
	z-index: 2;
    width: 100%;
	height: 100%;
    mix-blend-mode: multiply;
}*/
#wrapper-home .next-shows .next-show-item .wrapper .blck-bg {
	display: block;
	color: #fff;
}
#wrapper-home .next-shows .next-show-item .wrapper .blck-bg > * {
	display: inline-block;
	background: #000;
}
#wrapper-home .next-shows .next-show-item .next-show-label {
	padding: 3px 12px;
	font-size: 14px;
}
#wrapper-home .next-shows .next-show-item .next-show-name {
	padding: 4px 8px;
	font-size: 52px;
	font-weight: 700;
}
#wrapper-home .next-shows .next-show-item .next-show-dj {
	padding: 3px 9px;
	font-family: Henri, sans-serif;
	font-size: 21px;
}
#wrapper-home .next-shows .next-show-item .next-show-time {
	padding: 4px 8px 3px;
	font-size: 12px;
}

#wrapper-home .full-schedule-link {
	display: block;
	padding: 30px;
	text-align: center;
	color: #75ffc0;
	background: url(theme/images/section-3-bg.jpg) no-repeat center;
	background-size: cover;
	border: 6px solid #000;
	border-top-width: 3px;
	border-bottom: none;
}

#wrapper-home .main-banner .show-details .blck-bg a:hover, 
#wrapper-home .next-shows .next-show-item .wrapper .blck-bg a:hover {
	background: #ffffff;
	color: #000000;
	text-decoration: none;
}

#wrapper-home .full-schedule-link a {
	display: inline-block;
	padding: 10px 16px;
	font-size: 28px;
	color: #2a2a2a;
	background: #75ffc0;
	border-radius: 14px;
	box-shadow: 4px 4px 1px 1px rgba(0,0,0,.8);
	transition: all .2s ease-in-out;
}
#wrapper-home .full-schedule-link a:hover {
	text-decoration: none;
	background: #2a2a2a;
	color: #75ffc0;
}
.broadcasters {
	padding: 50px 0 30px;
	text-align: center;
	background: url(theme/images/bg.jpg) no-repeat center;
	background-size: cover;
}
.broadcasters .wrapper {
	width: 970px;
	min-width: 67.4%;
	max-width: 100%;
	margin: 0 auto;
}
.broadcasters .kz-title {
	margin-bottom: 40px;
	text-align: center;
	color: #fff;
}
.broadcasters .all-djs-reference {
	text-align: center;
	color: #aaa;
	font-size: 16px;
}
.broadcasters .all-djs-link {
	text-decoration: underline;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	transition: all .2s ease-in-out;
	padding: 2px;
}
.broadcasters .all-djs-link:hover {
	background-color: #FF2F3B;
}
.broadcasters .items {
	-webkit-display: flex;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-right: -90px;
}
.broadcasters .items .item {
	margin-right: 46px;
	margin-bottom: 33px;
	list-style-type: none;
}
.broadcasters .items .item a {
	display: block;
	position: relative;
}
/*.broadcasters .items .item a .dj-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
	height: 120px;
	border-radius: 50%;
    mix-blend-mode: multiply;
}*/
/*#wrapper-home .broadcasters .items .item a img {/* turn images to black and white */
	/*-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	/*filter: grayscale(100%);
}*/
.broadcasters .items .item a img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	transform: rotate(0);
	transition: transform .6s ease-in-out;
}
.broadcasters .items .item a:hover img {
	transform: rotate(-360deg);
}
.broadcasters .items .item a .dj-name {
	position: relative;
	display: block;
	width: 120px;
	margin: -11px auto 0;
	line-height: 23px;
	font-family: Henri, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: #000;
}
#wrapper-home .on-demand-and-video {
	padding: 59px 0 20px;
	background: url(theme/images/bg-home-od.jpg) no-repeat top center;
	background-size: cover;
}
#wrapper-home .on-demand-and-video .kz-title {
	margin-bottom: 27px;
	text-align: center;
	color: #1b1d1c;
}
#wrapper-home .on-demand-and-video .kz-video .kz-title {
	color: #fff;
}
#wrapper-home .on-demand-and-video .want-more {
	margin-top: 18px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	color: #fff;
}
#wrapper-home .on-demand-and-video .want-more a {
	text-decoration: underline;
}
#wrapper-home .on-demand-and-video .kz-video {
	padding: 65px 0 27px;
	text-align: center;
	color: #fff;
}
#wrapper-home .on-demand-and-video .kz-video .kz-title {
	margin-bottom: 30px;	
}
#wrapper-home .on-demand-and-video .kz-video .hold-on {
	margin-top: 21px;
	font-size: 16px;
	font-weight: 500;
}
#wrapper-home .on-demand-and-video .kz-video .hold-on a {
	text-decoration: underline;
	transition: all .2s ease-in-out;
	padding: 2px;
}
#wrapper-home .on-demand-and-video .kz-video .hold-on a:hover {
	background-color: #FF2F3B;
}

#wrapper-home .featured-banner {
	position: relative;
}
#wrapper-home .featured-banner img {
	width: 100%;
}
#wrapper-home .featured-banner .mobile-only {
	display: none;
}
#wrapper-home .featured-banner .featured-banner-link {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	width: 182px;
	height: 50px;
	margin: 0 auto;
	font-family: Rubik, sans-serif;
	font-weight: 900;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #2a2a2a;
	background: #fbfde7;
	border-radius: 8px;
	box-shadow: 4px 4px 0px 1px #2a2a2a;
	transition: all .2s ease-in-out;
}
#wrapper-home .featured-banner .featured-banner-link:hover {
	text-decoration: none;
	color: #fbfde7;
	background: #2a2a2a;
	box-shadow: 5px 5px 0px 1px #fbfde7;
}

#ctas-strip {
	padding: 56px 0 0;
	background: url(theme/images/bg.jpg) no-repeat;
	background-size: cover;
	border-bottom: 6px solid #000;
}
#ctas-strip .apps-and-form {
	display: flex;
	flex-direction: row-reverse;
	width: 960px;
	margin: 0 auto;
	max-width: 100%;
}
#ctas-strip .ways-to-listen {
	width: 50%;
	padding: 20px 20px 56px;
	background: #b8e986;
	font-family: Henri, serif;
	text-align: center;
	border: 6px solid #000;
	border-left-width: 3px;
}
#ctas-strip .ways-to-listen .apps {
	margin: 31px 0 47px;
}
#ctas-strip .ways-to-listen .apps .apps-btns a {
	display: inline-block;
	margin: 0 3px;
}
#ctas-strip .ways-to-listen .apps-title {
	margin-bottom: 17px;
}
#ctas-strip .ways-to-listen .apps-icons {
	direction: ltr;
}
#ctas-strip .ways-to-listen .apps-icons a {
	display: inline-block;
	margin: 0 5px;
}
#ctas-strip .ways-to-listen .streaming-w {
	margin-bottom: 43px;
}
#ctas-strip .form-wrapper {
	width: 50%;
	padding: 20px;
	text-align: center;
	color: #fff;
	background: #fc3c2d;
	border: 6px solid #000;
	border-right-width: 3px;
}
#ctas-strip .form-wrapper .kz-title {
	margin-bottom: 10px;
}
#ctas-strip .form-wrapper .desc {
	margin: 27px 12px 20px;
	font-family: henri, serif;
	text-align: right;
}
#ctas-strip .form-wrapper form {
	max-width: 320px;
	margin: 0 auto;
}
#ctas-strip .form-wrapper input[type="text"],
#ctas-strip .form-wrapper input[type="email"] {
	width: 100%;
	margin-bottom: 13px;
	padding: 4px 13px;
	font-size: 22px;
	font-weight: 500;
	border: 6px solid #000;
	border-radius: 0;
}
#ctas-strip .form-wrapper input[type="submit"] {
	margin-top: 16px;
	padding: 10px 26px;
	font-size: 18px;
	font-weight: 500;
	color: #000;
	background: #faca0c;
	border: none;
	border-radius: 8px;
}
#ctas-strip .atem {
	width: 960px;
	max-width: 100%;
	margin: 52px auto;
	padding: 10px 76px 30px;
	background: url(theme/images/bg-atem.jpg) no-repeat center;
	background-size: cover;
}
#ctas-strip .atem:after {
	content: "";
	display: block;
	clear: both;
}
#ctas-strip .atem .textual-area {
	float: left;
	width: 46.4%;
	text-align: center;
	color: #fff;
}
#ctas-strip .atem .textual-area .title-wrapper {
	text-align: right;
}
#ctas-strip .atem .textual-area .title-wrapper .kz-big-title {
	display: inline-block;
	font-size: 72px;
	font-weight: 700;
	line-height: .95;
	color: #fff;
}
#ctas-strip .atem .textual-area .title-wrapper .show-time {
	display: inline-block;
	margin-right: 14px;
	padding: 6px 14px;
	transform: translateY(-6px);
	font-size: 16px;
	color: #fff;
	background: #2e2d2d;
}
#ctas-strip .atem .textual-area .main-text {
	font-family: Henri, sans-serif;
	font-size: 16px;
	text-align: right;
}
#ctas-strip .atem .textual-area .main-text p {
	margin-bottom: 24px;
	line-height: 1.6;
}
#ctas-strip .atem .textual-area .cta-btn, #ctas-strip .apps-and-form .form-wrapper .cta-btn {
	display: inline-block;
	max-width: 210px;
	height: 48px;
	line-height: 36px;
	padding: 6px 12px;
	box-sizing: border-box;
	font-weight: 500;
	color: #000;
	border-radius: 8px;
	background: #82ffe2;
	transition: all .2s ease-in-out;
}
#ctas-strip .atem .textual-area .cta-btn:hover, #ctas-strip .apps-and-form .form-wrapper .cta-btn:hover {
	background: #000;
	color: #82ffe2;
	text-decoration: none;
}

@media all and (max-width: 1440px) {
  	#wrapper-home .main-banner .show-details .show-name { font-size: 64px; }
	#wrapper-home .next-shows .next-show-item .next-show-name { font-size: 36px; }
}

@media all and (max-width: 1199px) {
  	#wrapper-home .main-banner .show-details .show-name { font-size: 48px; }
	#wrapper-home .next-shows .next-show-item img {
		max-width: 250%;
	}
}
@media all and (max-width: 767px) {
  
	.kz-subtitle { font-size: 22px; }

	#wrapper-home .main-banner { height: 100%; }
		#wrapper-home .main-banner #show-image-curr { height: 100%; max-height: none; }
		#wrapper-home .main-banner #show-link-curr { height: 100%; }
  
  	#wrapper-home .featured-banner .desktop-only { display: none; }
	#wrapper-home .featured-banner .mobile-only { display: block; }
	#wrapper-home .featured-banner .featured-banner-link { width: 114px; height: 28px; line-height: 28px; font-size: 15px; transform: translateX(-4px); bottom: 14px; box-shadow: 2px 2px 0px 1px #2a2a2a; }
	#wrapper-home .main-banner .show-details { left: 0; }
      #wrapper-home .main-banner .show-details .blck-bg:nth-last-child(2) {  float: none; }
      #wrapper-home .main-banner .show-details .show-name { max-width: calc(100% - 50px); font-size: 32px; font-weight: 700; }
      #wrapper-home .main-banner .show-details .dj-name { font-size: 34px }
		#wrapper-home .main-banner .show-details .play-btn { position: absolute; bottom: 20px; left: 20px; width: 24px; }
	#wrapper-home .next-shows .next-show-item { height: 240px; width: auto; float: none; }
		#wrapper-home .next-shows .next-show-item img { max-width: 200%; }
		#wrapper-home .next-shows .next-show-item .next-show-name { font-size: 32px; }
		#wrapper-home .next-shows .next-show-item .next-show-dj { font-size: 16px; }
	
	#wrapper-home .full-schedule-link a { font-size: 18px; border-radius: 6px; }
	
	#wrapper-home .on-demand-and-video { padding: 30px 8px 20px; }
		#wrapper-home .on-demand-and-video .kz-title { font-size: 26px; }
	
  	#wrapper-home .on-demand-items { overflow: hidden; }
	#wrapper-home  .kz-vid-iframe { height: 202px; }
	
	#ctas-strip .apps-and-form { display: block; }
	#ctas-strip .ways-to-listen { border-top: 4.5px solid #000; width: 100%;  border: none; margin-bottom: 26px; }
	  	#ctas-strip .ways-to-listen .apps { margin: 20px 0 40px; }
  		#ctas-strip .ways-to-listen .apps .apps-btns a { width: 108px; }

	  	#ctas-strip .ways-to-listen .apps-title { margin-bottom: 12px; font-size: 14px; }
		#ctas-strip .ways-to-listen .apps-icons a { width: 36px; }
		#ctas-strip .ways-to-listen .on-tv img { width: 108px; }
  
  	#ctas-strip .form-wrapper {  width: 100%;  border: none;  }
		#ctas-strip .form-wrapper .desc { font-size: 14px; }
		#ctas-strip .form-wrapper form { max-width: 75%; }
		#ctas-strip .form-wrapper input[type="text"], #ctas-strip .form-wrapper input[type="email"] { padding: 1px 12px; border-width: 4px; } 
  		#ctas-strip .form-wrapper input[type="submit"] { font-size: 12px; }
	
	#ctas-strip .atem { margin: 36px auto; padding: 20px 36px 30px; }
		#ctas-strip .atem .textual-area { width: auto; }
		#ctas-strip .atem .textual-area .title-wrapper .kz-big-title { font-size: 55px; }
		#ctas-strip .atem .textual-area .title-wrapper .show-time { margin-right: 0; font-size: 15px; }
		#ctas-strip .atem .textual-area .main-text { font-size: 14px; }
		#ctas-strip .atem .textual-area .cta-btn { font-size: 14px; height: 36px; line-height: 28px; }
}


/* DEBUG */
body.debug > * {
	opacity: .7;
}
body.home.debug {
	background: url(debug/home.jpg) no-repeat center 21px;
}


/* additional player css - start */
.jp-progress{
border-radius: 30px;
}

.jp-audio, .jp-video, .jp-audio:focus, .jp-video:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;
    /*IE*/
}
.jp-ball {
    position: absolute;
z-index: 999;
    border-radius: 30px;
    top: -2px;
    left: 0;
    width: 1em;
    height: 1em;
    margin: -0.2em 0px 0px -0.5em;
    width: 14px;
    height: 14px;
  
    width: 0.9333em;
    height: 0.9333em;
    margin: -0.175em 0px 0px -0.466em;
/*     background-color: #fff; */
    padding: 0px;
    /* z-index: 1; */
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
}

.jp-audio .jp-progress 
{
	top: 35px;
    height: 12px;
}

.jp-seek-bar 
{
	background-color: #ddd;
	 height: 6px;
}

@media only screen and (min-width: 700px) 
{
	.jp-progress-override
	{
		top:30px;
	}
}

@media only screen and (max-width: 700px) 
{
	.jp-progress-override
	{
		top:15px;
	}
}
/* additional player css - end */


/* Decade Chart Strip */
body.home #decade {
	position: relative;
	height: 500px;
	padding: 40px 20px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
body.home #decade .btns-wrapper {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
}
body.home #decade .btns-wrapper .kz-red-btn {
	display: inline-block;
	margin: 0 12px;
	padding: 8px 22px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff;
	background: #fc3c2d;
	border-radius: 10px;
	box-shadow: 3px 3px 1px 1px rgba(0,0,0,.8);
    transition: all .2s ease-in-out;
}
body.home #decade .btns-wrapper .kz-red-btn.white {
	color: #fc3c2d;
	background: #fff;
	text-decoration: none;
}
body.home #decade .btns-wrapper .kz-red-btn:hover {
	color: #fc3c2d;
	background: #fff;
	text-decoration: none;
}
body.home #decade .btns-wrapper .kz-red-btn.white:hover {
	color: #fff;
	background: #fc3c2d;
}

@media all and (max-width: 767px) {
	body.home #decade {
		height: 350px;
	}
	body.home #decade .btns-wrapper .kz-red-btn { margin: 12px;}
}