.clear { clear: both; }

#mobile-camp { display: none; }
@media (max-width: 992px) {
	#mobile-camp { display: block; max-width: 100%; width: 90%; margin: 0 5%; border: 1px solid #ddd; }
	#desktop-camp { display: none !important; border: 1px solid #ddd; }
}

/* Header Sticky Navigation */
#sticky_nav { float: right; height: 60px; width: 100%; position: fixed; top: 0; right: 0; background: #111; z-index: 9999; }
#sticky_nav ul { list-style-type: none; margin-top: 10px; }
#sticky_nav ul li { float: right; display: inline-block; margin-left: 25px; }
#sticky_nav ul li a { color: #fff; font-weight: 500; font-size: 15px; }
#sticky_nav ul li.active a { color: #f6ce17; }
#sticky_nav .container > a { float: left; margin-top: -8px; }

/* Header */
header { float: right; height: 440px; width: 100%; background: #004a80 url('../img/headers/index.png') no-repeat top right; padding-top: 25px; }
@media (min-width: 992px) {
	header ul { list-style-type: none; padding-right: 0; }
	header ul li { display: inline; margin-left: 25px; }
	header ul li a { color: #fff; font-size: 14px; font-weight: bold; }
	header ul li.active { border: 1px solid #fff; border-radius: 30px; padding: 5px 15px 7px; }
	header ul li a:hover { color: #fff; text-decoration: none; }
	header { background-position: top; }
}
header h1 { color: #000; margin-top: 60px; font-size: 58px; font-weight: 400; }
header p { color: #fff; }
header .container > .row { height: 380px; }
header .container > .row > .col:last-child .row { float: left; width: 260px; margin-top: 40px; margin-left: 0; text-align: right; }
header .container > .row > .col:last-child #on_air { float: left; width: 100%; cursor: pointer; background: rgba(255,255,255,0.3); text-align: right; padding: 15px 10px; border-top: 3px solid #fff; }
header .container > .row > .col:last-child #on_air i { float: right; background: #f6ce17; font-size: 24px; width: 20%; border-radius: 50%; text-align: center; line-height: 43px; }
header .container > .row > .col:last-child #on_air div { float: left; width: 80%; padding-right: 10px; }
header .container > .row > .col:last-child #on_air h3 { float: right; width: 100%; font-size: 15px; color: #fff; margin: 0; }
header .container > .row > .col:last-child #on_air h2 { float: right; width: 100%; font-size: 22px; font-weight: 800; color: #f6ce17; margin: 0; }
header .container > .row > .col:last-child #on_air-next { float: right; width: 100%; margin-top: 20px; color: #fff; font-size: 15px; }
header .container > .row > .col:last-child #on_air-next h2 { float: right; font-size: 22px; font-weight: 700; background: #f6ce17; padding: 5px 15px; margin-bottom: 15px; border-radius: 3px; color: black; }
header .container > .row > .col:last-child #on_air-next p { float: right; width: 100%; font-size: 18px; font-weight: 300; margin-top: -5px; }
header .container > .row > .col:last-child #on_air-next p small { float: right; font-size: 12px; margin-top: -5px; color: gray; }

header .container .col a#menu { font-size: 25pt; color: #fff; }
header .container .col a#menu:hover { color: #f6ce17; }
header .container .col:first-child .user-area { margin-top: 8rem; padding-top: 15px; color: #fff; }
header .container .col:first-child .user-area a { color: #fff; font-weight: bold; }

/* Best PLatforms */
#platforms { text-align: center; color: #004a80; margin-top: 45px; }
#platforms i { font-size: 55px; }
#platforms h3 { font-size: 42px; height: 35px; }
#platforms em { margin: 0; font-style: normal; color: #000; font-size: 19px; }
#platforms img { margin-right: -25px; margin-bottom: 5px; transition: all 0.5s ease; filter: grayscale(100%); -webkit-clip-path: polygon(0 0, 94% 0, 100% 100%, 9% 100%); clip-path: polygon(0 0, 94% 0, 100% 100%, 9% 100%); }
#platforms img:hover { filter: grayscale(0%); }

/* Weekly Songs */
#weekly-songs { float: right; width: 100%; margin: 15px 0; }
#weekly-songs h2 { float: right; padding: 7px 25px; border-radius: 5px; background: #333; background: -webkit-linear-gradient(left, #333, #111); background: -o-linear-gradient(right, #333, #111); background: -moz-linear-gradient(right, #333, #111); background: linear-gradient(to right, #333, #111); color: #fff; }
#weekly-songs h2 i { font-size: 32px; }
#weekly-songs .row .col { padding-top: 15px; }
#weekly-songs .row .col span { float: right; background: #acacac; color: #fff; height: 45px; width: 45px; border-radius: 50%; line-height: 47px; margin-top: 5px; text-align: center; margin-left: 10px; }
#weekly-songs .row .col h3 { font-weight: 600; font-size: 23px; margin: 0; }
#weekly-songs .row .col small { font-size: 16px; font-weight: 300; color: gray; }
#weekly-songs .text-center { margin-top: 25px; }
#weekly-songs .text-center a { padding: 7px 15px; font-size: 13px; color: #fff; text-decoration: none; }

/* Facebook Posts */
#facebook-feeds { float: right; width: 100%; margin: 15px 0; }
#facebook-feeds h2 { float: right; padding: 7px 25px; border-radius: 5px; background: #3b62a0; background: -webkit-linear-gradient(left, #3b62a0, #5884dd); background: -o-linear-gradient(right, #3b62a0, #5884dd); background: -moz-linear-gradient(right, #3b62a0, #5884dd); background: linear-gradient(to right, #3b62a0, #5884dd); color: #fff; }
#facebook-feeds h2 i { font-size: 32px; }
#facebook-feeds .row { margin-right: 0; margin-left: 0; margin-top: 10px; }
#facebook-feeds .row .col { padding-top: 15px; padding-bottom: 15px; width: calc(100% / 3 - 10px) !important; display: block; flex: none; background: #fff; min-height: 300px; margin-left: 10px; border: 1px solid #ddd; border-top: 5px solid #4a67ad; border-radius: 3px; box-shadow: 5px 0 10px rgba(0,0,0,0.1); }
#facebook-feeds .row .col:last-child { margin-left: 0; }
#facebook-feeds .row .col > div { float: right; width: 100%; margin: 10px 0 15px; }
#facebook-feeds .row .col > div img { width: 60px; height: 60px; float: right; border: 1px solid #ddd; margin-left: 10px; }
#facebook-feeds .row .col > div h3 { float: right; margin-bottom: 0; }
#facebook-feeds .row .col > div h3 a { font-size: 18px; color: #4a67ad; }
#facebook-feeds .row .col > div small { float: right; width: calc(100% - 70px); color: gray; }
#facebook-feeds .row .col p { margin-top: 10px; font-size: 15px; word-wrap: break-word; }
#facebook-feeds .row .col p iframe { float: right; width: 100%; margin: 15px 0; }
#facebook-feeds .row .col p.story { color: gray; font-size: 14px; }
#facebook-feeds .row .col p .hashtag { font-weight: bold; color: #4a67ad; }

.heading:before, .heading:after { float: right; width: 30%; content: ""; border-top: 1px solid #ddd; margin-top: 25px; }
.heading:after { float: left; }

/* FOOTER */
footer { float: right; min-height: 200px; width: 100%; background: #ebebeb; margin-top: 50px; border-top: 1px solid #ddd; }
footer h4 { font-weight: bold; letter-spacing: -1px; }
footer h4 + .divider { float: right; width: 60px; border-bottom: 3px solid #003663; border-radius: 25px; margin-top: -5px; }
footer ul { list-style-type: none; padding-right: 0; margin: 25px 0; }
footer ul li { margin-top: 5px; }
footer ul li a, footer ul li { color: #666; }
footer #map { width: 454px; height: 273px; }

footer #copyright { float: right; width: 100%; background: #111; color: #fff; padding: 15px 0; font-size: 14px; }
footer #copyright a { color: #fff; font-weight: bold; }
footer #copyright .text-left { direction: ltr; }
footer #copyright .text-left img { margin-top: -8px; }

/* Custom Pages */
.custom h2 { font-size: 32px; margin: 20px 0; }
.custom #schedule { float: right; width: 100%; border: 1px solid #ddd; background: #fff; }
.custom #schedule .col { border-left: 1px solid #ddd; }
.custom #schedule .col:last-child { border-left: none; }
.custom #schedule .col h4 { font-size: 14px; border-bottom: 1px solid #ddd; padding: 10px; margin-bottom: 0; }
.custom #schedule .col.active { background-color: #f9f9f9; }
.custom #schedule .col.active h4 { border-bottom-color: #d2d01b; }
.custom #schedule .col > div { display: flex; justify-content: center; align-items: center; font-size: 14px; border-bottom: 1px solid #ddd; padding: 15px 10px; text-align: center; margin-right: -15px; margin-left: -15px; height: 75px; }
.custom #schedule .col > .hour, .custom #schedule .col > .small { line-height: calc(75px / 2); font-weight: bold; padding: 0; font-size: 15px; height: calc(75px / 2); }
.custom #schedule .col > .small { font-weight: normal; font-size: 13px; }
.custom #schedule .col > .long span { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 10px; font-size: 20pt; width: 100%; padding-right: 40px; color: #444; }
.custom #schedule .col > .long.special { font-size: 12pt !important; }
.custom #schedule .col > .long.special span { font-size: 14pt; padding-top: 0; letter-spacing: 4px; padding-right: 45px; }
.custom #schedule .col > .blank { border: none; }
.custom #schedule .col:first-child .hour:last-child { border-bottom: none; }

.who-us-block { width: calc(100% / 3 - 10px); margin-left: 10px; min-height: 340px; padding: 10px; }
.who-us-block:nth-child(3n) { width: calc(100% / 3); margin-left: 0;  }
.who-us-block h3 { font-size: 20px; border-bottom: 3px solid #f6ce17; padding-bottom: 5px; padding-right: 5px; color: #004a80; }
.who-us-block p { font-size: 14px; margin: 15px; }
.who-us-block ul { list-style-type: none; padding-right: 0; }
.who-us-block ul li { border-bottom: 1px solid #ddd; padding: 5px 10px; font-size: 14px; font-weight: bold; }
.who-us-block ul li strong { float: left; color: gray; font-weight: normal; font-size: 13px; }
.who-us-block ul li:last-child { border-bottom: none; }

.broadcaster { border: 1px solid #ddd; background: #fff; padding: 15px; border-radius: 3px; margin-bottom: 10px; margin-left: 10px; box-shadow: 0 0 7px rgba(0,0,0,0.05); max-width: calc(33.3% - 10px); }
.broadcaster img { float: right; border-radius: 3px; border: 1px solid #ddd; padding: 3px; margin-left: 10px; width: 80px; }
.broadcaster h3 { font-size: 19px; margin-bottom: 0; }
.broadcaster p { font-size: 14px; }
.broadcaster p a { border: 1px solid #ddd; padding: 7px 10px; font-size: 14px; font-weight: bold; border-radius: 3px; transition: all 0.5s ease; margin-top: 10px; }
.broadcaster p a:hover { text-decoration: none; background: #f6f6f6; color: black; }
.broadcaster:last-child { margin-left: 0; max-width: 33.3%; }

.row#weeklySongs { float: right; width: 100%; display: block; }
.row#weeklySongs .col { float: right; width: 50%; }
.row#weeklySongs .col > div { float: right; width: calc(100%); margin-bottom: 15px; padding: 0; border: 1px solid #ccc; height: 80px; background: #f6f6f6; margin-left: 10px; background: -webkit-linear-gradient(left, #fff, #ddd); background: -o-linear-gradient(right, #fff, #ddd); background: -moz-linear-gradient(bottom, #fff, #ddd); background: linear-gradient(to bottom, #fff, #ddd); }
.row#weeklySongs .col > div span { float: right; margin: 15px 15px; background: #acacac; color: #fff; height: 45px; width: 45px; border-radius: 50%; line-height: 47px; text-align: center; margin-left: 10px; }
.row#weeklySongs .col:first-child > div:first-child span { background-color: #f6ce17; }
.row#weeklySongs .col:first-child > div:nth-child(2) span { background-color: #3b62a0; }
.row#weeklySongs .col:first-child > div:nth-child(3) span { background-color: #004a80; }
.row#weeklySongs .col > div h3 { font-size: 22px; font-weight: 500; margin: 13px 0 0; }
.row#weeklySongs .col > div small { font-size: 15px; font-weight: 300; color: #333; }

/* Responsive */
@media (max-width: 992px) {
	header .container > .row h1 { font-size: 28px; margin-top: 55px; margin-bottom: 25px; }
	header ul { list-style-type: none; padding-right: 0; background: #111; border: 1px solid #d2d01b; position: absolute; width: 100%; right: 0; margin-top: 25px; }
	header ul li { padding: 10px; border-bottom: 1px solid #d2d01b; }
	header ul li a { color: #fff; font-weight: bold; transition: all 0.5s ease; }
	header ul li.active { border-bottom: 1px solid #d2d01b; }
	header ul li:last-child { border-bottom: none; }
	header ul li a:hover { text-decoration: none; color: #d2d01b; }
	header ul li.active { background: #222; }
	header ul li.active a { color: #d2d01b; }
	#platforms h3 { height: 20px; }
	#platforms img { width: 40%; margin-right: -15px; }
	.heading:before, .heading:after { display: none; }
	.heading { font-size: 28px !important; }
	#next-platforms h2, #facebook-feeds h2 { text-align: center; width: 100%; }
	#next-platforms .row .col, #facebook-feeds .row .col { width: 100%; flex: none; padding-right: 35px; }
	#facebook-feeds .row .col { padding-right: 15px; }
	footer img { display: none; }
	
	#facebook-feeds .row { display: block; }
	#facebook-feeds .row .col { max-width: 100%; width: 100% !important; margin-bottom: 10px; }
	header .container .col ul { display: none; }
	header .container h1 { font-size: 28px; margin-top: 55px; margin-bottom: 25px; }
	header .container p { margin-bottom: 0; }
	header .container .col:last-child { background: transparent; }
	header .container .row-mobile .col:last-child { display: none; }
	.row.custom { margin: 0 !important; }
	footer .col { width: 100%; flex: none; }
	footer #copyright .col { text-align: center !important; }
	#on-air { float: right; width: 100%; text-align: center; color: #fff; }
	#on-air .playStation { background: #d2d01b; color: #000; border-radius: 50%; width: 45px; height: 45px; line-height: 45px; text-align: center; font-size: 20px; margin-bottom: 5px; cursor: pointer; }
	footer #map { width: 100%; margin-top: 15px; }
}
@media (max-width: 768px) {
	header .container .col:first-child .user-area { margin-top: 6rem; padding-top: 22px; text-align: center; }
	.who-us-block { display: block; width: 100%; max-width: 100%; margin-right: 10px; margin-bottom: 10px; min-height: auto; }
}

@media (min-width: 992px) and (max-width: 1400px) {
	header .container > .row h1 { font-size: 30px; margin-top: 75px; margin-bottom: 25px; }
}

@media (max-width: 768px) and (orientation: landscape) { 
	header .container h1 { margin-top: 50px; }
}
@media (max-width: 400px) {
	#on-air .playStation { width: 42px; height: 42px; line-height: 42px; }
}

@media (min-width: 1920px) {
	header { background-size: cover; }
	header .container > .row { height: 415px; }
	header h1 { margin-top: 6.5rem; }
	header .container .col:first-child .user-area { margin-top: 3rem; }
	header p { margin-top: 2rem; }
}

.divider { float: right; width: 100%; border-bottom: 1px solid #ddd; }