﻿/*Blue #6B8BDB*/



body {
    padding-top: 50px;
    padding-bottom: 20px;
    padding: 0;
}

html,
body,
.navbar-fixed-top {
    min-width: 210px;
    background:#000;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.dl-horizontal dt {
    white-space: normal;
}


input,
select,
textarea {
    max-width: 280px;
}

html {
    height: 100%;

}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: url('../Image/radio_wallpaper.jpg') no-repeat center center fixed;
    background: url('../Image/radio_wallpaper.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

footer {
    background-color: #6B8BDB;
    color: #fff;
}

footer div {
    margin: 5px auto;
}

#cookieConsent {
    width:100%;
    background:#000;
    color:yellow;
    /*z-index:5000;
    position:absolute;*/
    position:relative;
    text-align:center;
    padding:15px;
    margin-bottom:10px;
    display:none;
}

#cookieConsent #acceptBtn,
#cookieConsent #acceptBtn:visited {
    background: green;
    color: #fff;
    position: relative;
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    margin: 10px;
    display: inline-block
}
#cookieConsent .cookiePolicyLink {
    color:white;
}

#cookieConsent .cookiePolicyLink:hover,
#cookieConsent #acceptBtn:hover {
    opacity: 0.8;
}


#homepage{
    height:0;
    width:0;
}
.homepage #homepage{
    width:100%;
    height:auto;
    border:2px solid yellow;
}

.pageWrapper{
    border:0;
    padding: 0 20px;
    width:100%;
    float:left;
    overflow:hidden;
    max-height:0;
}

.pageWrapper.showpage{
    border:0;
    max-height:5000px;
    padding: 20px;
}

.facebook-wrapper {
    min-width: 320px;
}

.facebook-wrapper-narrow {
    min-width: 320px;

}
.newyearbanner {
    width:100%;
    height:auto;
    max-height:300px;
}
.newyearbanner img {
    width: 100%;
    height: auto;
}

.xmas {
    background: red !important;
    font-weight: bold !important;
}

.newYear {
    background: #FFD700 !important;
    color: #000 !important;
    font-weight: bold !important;
}


.sponsorLink {
    float: right;
    clear: both;
    color: grey;
    margin: 0 -10px 0 0;
    font-size: 0.9em
}
.merry-christmas {
    width: 100%;
    height: auto;
    display: inline-block;
}

    .merry-christmas img {
        width: 100%;
        height: auto;
    }
.preXmas .merry-christmas {
    display: none;
    overflow: hidden;
    min-height: 0;
}

.preXmas .countdown-title,
.preXmas #clockdiv {
    min-height:200px;
}





.countdown {
    /*border: 1px solid red;*/
    width: 70%;
    margin: -20px 15% 10px;
    float: left;
}
    .countdown .countdown-title {
        border: 1px solid #E31B22;
        width: 50%;
        float: left;
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        background: #E31B22;
        min-height: 100px;
        padding: 30px 10px;
        border-radius: 5px;
        text-align: center;
    }


#clockdiv {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
    float:right;
    width:50%;
}

    #clockdiv > div {
        padding: 10px;
        border-radius: 3px;
        background: #00BF96;
        background: #E31B22;
        display: inline-block;
    }

    #clockdiv div > span {
        padding: 15px;
        border-radius: 3px;
        background: #00816A;
        background: #000;
        display: inline-block;
    }

.smalltext {
    padding-top: 5px;
    font-size: 16px;
}




.notification {
    z-index: 99;
    position: fixed;
    bottom: 10px;
    float: none;
    min-width: 80%;
    background: #3af;
    padding: 10px 15px;
    margin: 5px auto;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #999999;
}

.notification-error {
    background: #ff1010;
    color: #ffffff;
}

.notification-alert {
    background: #3af;
    color: #000000;
}

.notification-info {
    background: #a4beff;
    color: #000000;
}

#close {
    text-decoration: none;
    float: right;
}

a,
a:visited {
    color: #6B8BDB;
}

footer a,
footer a:visited {
    color: #eee;
    margin-left: 20px;
}

footer a:hover {
    color: #020202;
}

a:hover {
    color: #999;
}

a {
    color: #6B8BDB;
}

.container.body-content {
    flex: 1;
}

.navbar-inverse {
    background-color: #6B8BDB;
    border-color: #6B8BDB;
}

.navbar-nav {
    width: calc(100% - 300px);
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > .MenuLink{
    color: #eee;
	font-weight: normal;
}
/*.navbar-inverse .navbar-nav > li > a{
    margin-top: 4px;
}*/
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > .MenuLink {
    color: #eee;
    line-height: 20px;
    position: relative;
    display: block;
    padding: 15px;
    cursor: pointer;
    border: 0;
    margin-top: 5px;
}


    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-nav > li > .MenuLink.selected,
    .navbar-inverse .navbar-nav > li > .MenuLink:hover,
    .navbar-inverse .navbar-nav > li > .MenuLink:focus {
        color: #ffffff;
        background-color: rgba(0,0,0,0.1);
    }



.navbar-brand {
    background: url('../Image/CRCLogo.png') no-repeat;
    background-size: 100%;
    background-position: 50%;
    height: 100px;
    width: 250px;
    margin-right: 20px;
}

body {
}

.social-media,
.search-wrapper {
    float: left;
    color: #fff;
    margin-top: 10px;
}

.search-wrapper {
    margin-top: -95px;
}

.search-wrapper input {
    margin-right: 5px;
    padding: 3px 6px;
    border: 1px solid #f8f8f8;
    margin-top: 5px;
    color: yellow;
}

.search-wrapper input:hover {
    background: #fff;
    border: 1px solid #000;
    color: red;
}

.social-media-list a,
.social-media-list a:visited {
    color: #fff;
    font-size: 1.3em;
    opacity: 0.8;
    padding: 5px;
}

.social-media-list li:hover a {
    opacity: 1;
    background:rgba(0,0,0,0.1);
}

.social-media-list li {
    float: right;
    padding:5px;
}

header #listenLive,
#popoutlink {
    border: 0px solid green;
    float: right;
    height:50px;
}

header #listenLive #listenLiveLink,
header #listenLive #listenLiveLink img {
    vertical-align: top;
}

.audio-wrapper {
    overflow: hidden;
    max-width: 0;
    border: 0px solid green;
    transition: max-width 1s;
    display: inline-block;
    margin-bottom: 10px;
    color: #fff;
}

.contactNumber,
.contactEmail {
    font-size: 30px;
    margin-bottom: 0;
    width:auto;
}

.contactNumber-lines {
    font-size: 15px;
    margin: 0 0 20px 90px;
}
.contactEmail {

    margin-bottom: 20px;

}

#popoutWarning {
    background: #6B8BDB;
    position: absolute;
    border: 0 solid #000;
    top: 90px;
    padding: 0 10px 0 10px;
    width: 220px;
    right: 20px;
    font-size: 14px;
    color: #fff;
    max-height: 0;
    overflow: hidden;
}
#popoutWarning #popoutlink2 a {
    width: 20px;
    margin: -15px -20px 0;
    float: right;
}

.line2 {
    margin: 5px 20px 15px 5px;
}

#speaker_icons.listen #popoutWarning,
#speaker_icons.listen:hover #popoutWarning {
    padding: 0 10px 0 10px;
    max-height: 0;
    -webkit-animation-name: display; 
    -webkit-animation-duration: 15s; 
    animation-name: display;
    animation-duration: 15s;
}

@-webkit-keyframes display {
    0% {
        max-height: 0;
    }

    15% {
        max-height: 100px;
    }

    85% {
        max-height: 100px;
    }

    100% {
        max-height: 0;
    }
}
@keyframes example {
    0% {
        max-height: 0;
    }

    15% {
        max-height: 100px;
    }

    85% {
        max-height: 100px;
    }

    100% {
        max-height: 0;
    }
}


#popoutlink {
    top: 70px;
    color: yellow;
    z-index: 10;
    right: 10px;
}

.listen .audio-wrapper {
    overflow: hidden;
    max-width: 400px;
}

#llVolume {
    margin-top: 30px;
}

#volText {
    padding: 10px 0 0 20px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-bottom: 20px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    margin-top: -2px;
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 22px;
    background: #000;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    margin-top: 10px;
    width: 10px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.popout-player .slider::-webkit-slider-thumb {
    margin-top: 10px;
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 25px;
    background: #000;
    border: 1px solid #fff;
    cursor: pointer;
}

.popout-player .slider::-moz-range-thumb {
    margin-top: 10px;
    width: 10px;
    height: 25px;
    background: #000;
    border: 1px solid #fff;
    cursor: pointer;
}

.llVolValue {
    display: none;
}

.popout-player #listenLiveLink {
    display: none;
}

.popout-player #listenLive {
    border: 0px solid yellow;
    margin: 150px auto;
    max-width: 250px;
    width: 80%;
    height: 300px;
    background: rgba(0,0,0,0.3);
    padding: 15px;
}

.popout-player #logo,
.popout-player #listenLiveLinkAudio {
    width: 100%;
    margin-bottom: 20px;
}

header #listenLiveLinkAudio {
    width: 0;
    overflow: hidden;
    border: 1px solid red;
}

.popout-player .listen .audio-wrapper {
    overflow: hidden;
    max-width: 600px;
    width: 100%;
    color: #fff;
}

.popout-player .listen .audio-wrapper > div {
    margin-left: 10px;
}

.popout-player #homeLink {
    width: 100%;
    text-align: center;
    display: inline-block;
    color: #fff !important;
}

.speaker {
    width: 70px;
    height: 40px;
   /* background-image: url('../Image/SpeakerImages/speaker1.png'), url('../Image/SpeakerImages/speaker2.png'), url('../Image/SpeakerImages/speaker3.png'),url('../Image/SpeakerImages/speaker4.png');*/
   background-image: url('/Image/SpeakerImages/speaker1.png'), url('/Image/SpeakerImages/speaker2.png'), url('/Image/SpeakerImages/speaker3.png'),url('/Image/SpeakerImages/speaker4.png');
    background-position: 50%;
    background-size: cover;
    float: right;
    border: 0px solid red;
    opacity: 0.8;
}

.speaker:hover {
    opacity: 1;
}

.listen .speaker {
    animation: pulse 3s infinite;
    opacity: 1;
}

.element {
    animation: pulse 5s infinite;
}

@keyframes pulse {
    0% {
        background-image: url('../Image/SpeakerImages/speaker1.png');
    }

    25% {
        background-image: url('../Image/SpeakerImages/speaker1.png'), url('../Image/SpeakerImages/speaker2.png');
    }

    45% {
        background-image: url('../Image/SpeakerImages/speaker1.png'), url('../Image/SpeakerImages/speaker2.png'), url('../Image/SpeakerImages/speaker3.png');
    }
    100% {
        background-image: url('../Image/SpeakerImages/speaker1.png'), url('../Image/SpeakerImages/speaker2.png'), url('../Image/SpeakerImages/speaker3.png'),url('../Image/SpeakerImages/speaker4.png');
    }
}

.popout-Link {
    display:none !important;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: #fff !important;
    opacity: 0.8;
    text-decoration: none;
    background: url('../Image/SpeakerImages/speakerPopOut.png') no-repeat;
    background-size: 100%;
    background-position: 50%;
    height: 25px;
    width: 25px;
}

.popout-Link:hover {
    opacity: 1;
    font-size: 1.5em;
    text-decoration: none;
}

.crcfmImageLink {
    width:80%;
    margin:20px 10%;
    max-width:120px;
}

.crcfmImageLink:hover {
    width: 82%;
    margin: 20px 9%;
    opacity:0.8;
}

#speaker_icons {
    position: absolute;
    top: 10px;
    right: 10px;
}

header #weather_widget {
    position: absolute;
    bottom: -120px;
    right: 10px;
}

#paypalDonate {
    background: url('../Image/x-click-but04.gif')no-repeat;
    background-size: 100%;
    background-position: 50%;
    height: 50px;
    width: 80px;
    margin-top: -50px;
    float: right;
    display: none;
}

#homeLinkfromMP_Img {
    background: url('../Image/CRCfm_blue_square.png')no-repeat;
    background-size: 100%;
    background-position: 50%;
    width: 150px;
    height: 150px;
    margin: 20px auto 0;
}

.map-wrapper {
    margin:20px 0 30px;
    display:inline-block;
    width:100%;
}

#map {
    height: 400px; 
    width: 100%;
}
.container.body-content {
    border: 0px solid orange;
    margin-top: 138px;
}

.pageTitle {
    padding: 10px 15px;
    background: #fff;
    color: #6B8BDB;
    font-weight: bold;
    margin: 0 0 0 -15px;
    display: inline-block;
}

.body-content > .row {
    float: left;
    position: relative;
    clear: both;
}

.fullWidthWrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border: 0px solid yellow;
    margin-top: -48px;
    margin-bottom: 15px;
    float: left;
    background: #fff;
    text-align: center;
}
.fullWidthWrapper:before {
    content: '\200B';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#mainCarousel {
    width: 100%;
    max-width: 1250px;
    display: inline-block;
    vertical-align: middle;
}

    #mainCarousel .item,
    #mainCarousel .item > img {
        width: 100%;
    }

.black {
    background: #000;
}

.transBackground {
    background: transparent;
}
.grey {
    background: #999;
}

.blue {
    background: #6B8BDB;
}

.white {
    background: #fff;
}

.row.white {
    padding: 15px;
    margin-bottom: 50px;
}

.row-spacer {
    min-height: 30px;
}

.rhs {
    width: 90%;
    margin: 20px 5%;
    float: left;
}

#NewsWidget {
    height: 500px;
    overflow: hidden;
    border: 1px solid #6B8BDB;
    border-width: 0 1px 1px;
}
#VacancyTitle,
#NewsWidgetTitle,
#facebookWidgetTitle {
    padding: 10px 15px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    background: #6B8BDB;
}

#VacancyTitle {
    padding: 10px 15px;
    text-align:center;
    font-size:30px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    background: #000;
}

span.job-title {
    font-weight: bold;
    float: left;
    clear: both;
    margin-top: 20px;
    text-transform:uppercase;
}

span.job-desciption {
    font-weight: normal;
    float: left;
    clear: both;
}

.moreBtn {
    padding: 10px 15px;
    color: #fff;
    background: #6B8BDB;
    width:auto;
    float:left;
    cursor:pointer;
    margin-top:20px;
}
.moreBtn:hover {
    opacity:0.8;
}

#VacancieslinkPage li {
    padding: 0 0 10px;
}
#vacancies p{
	color:#333;
}
#vacancies ol{
    list-style-type: decimal;
}
#vacancies b{
    font-weight:bold;
}

#facebookWidgetTitle {
    min-width: 320px;
    width: 100%;
}

.panel-body img {
    max-width:100%;
    height: auto;
/*border:1px solid red;*/
}

.clearPanel {
    color: #fff;
}
.clearPanel p {
    max-width:100%;
}

.clearPanel.tint {
    background:rgba(0,0,0,0.95);
    padding:20px;
    margin: 0 30px 15px 0 ;

}
.clearPanel.tint2 {
    background: rgba(0,0,0,0.7);
    padding: 20px;
    margin: 0;
}
.clearPanel.tint2 img {
    width:100%;
    height:auto;
}

.displayPanel.tinted {
    background: rgba(0,0,0,0.7);

}

.displayPanel.tinted > ul{
    /*background: rgba(0,0,0,0.7);*/
    padding: 20px;
    margin: 0;
    color:#fff;
}

.panelTitle {
    padding-bottom: 15px;
    font-size: 1.2em;
}

.displayPanel {
    background: #fff;
    /*padding-bottom: 10px;*/
    margin-bottom: 15px;
}

.displayPanel ul,
.displayPanel li{
    margin: 2px;
    padding: 2px;
}

.displayPanel li{
    /* border-bottom: 1px solid #eee;*/
}

.displayPanel ul {
    margin: 0;
}


.SchedulePanel .displayPanel {

    padding-bottom: 0;
    margin-bottom: 15px;
    color:#000;
}

.displayPanel.pagePanel {
    padding: 15px;
}

.displayPanel .displayPanel-title {
    background: #6B8BDB;
    color: #fff;
    padding: 10px 15px;
    text-transform: uppercase;
}

.displayPanel ul {
    border: 1px solid #6B8BDB;
    border-width: 0 1px 1px;
}

.displayPanel .li-title,
.displayPanel .li-description {
    color: #666;
    padding: 10px 15px 5px;
    font-size: 0.85em;
    font-weight: bold;
}

.displayPanel .li-description {
    font-weight: normal;
    padding: 5px 15px 10px;
}

.displayPanel > ul > li .li-description {
    border-bottom: 1px solid #eee;
}

.displayPanel > ul > li:last-of-type .li-description {
    border-bottom: 0;
}

.listenBackPanel li {
    padding: 10px;
    background: #6B8BDB;
    margin-bottom:15px;
    padding: 10px 15px;
        max-width: 500px;
}

.listenBackPanel li:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    float: right;
    color: #fff;
    margin-top: -23px;
}

.listenBackPanel li.disabled {
    padding: 10px;
    background: #666;
    margin-bottom: 15px;
    padding: 10px 15px;
    opacity:0.8;
}
.listenBackPanel li:hover {
    opacity:0.8;
}

#director-panel {
    padding-bottom: 0;
}

#Directors .row,
#Directors .name-row {
    margin: 0;
}


#Directors .name-row {
    margin: 0;
    padding: 10px 15px;
}

#Directors .name-row,
#AboutUs li {
    font-size: 18px;
}

.name-row strong{
    font-weight:bold;
    margin-right:20px;
}

#AboutUs > li {
    font-size: 18px;
}

#AboutUs ul {
    border:0;
}

.listenBackPanel ul{

}

.listenBackPanel li a {
    color: #fff;
    padding: 5px 15px;
    text-transform: uppercase;
    width: 100%;
    text-decoration: none;
    display: inline-block;
}

.dynamic-image {
    width: 100%;
    height: auto;
}
.float-right {
    float:right;
}
.float-left {
    float:left;
}

.footer-links {
    color:#fff;
    font-size:0.8em;
}

.footer-links .MenuLink,
.footer-links a{
    margin: 0 10px;
    display: inline-block;
    cursor:pointer;
}

.footer-links .MenuLink:hover{
    text-decoration: underline;
    color:#000;
}

.li-ScheduleTime {
    margin-left: 10px;
    text-align: right;
    font-weight:bold;
    padding-left:0;
}

.li-ScheduleTime,
.li-ScheduleShow {
    display: inline-block;
    padding: 5px;
    min-width: 95px;
    vertical-align: top;
    margin-bottom:3px;
    color:#000;
}

.li-ScheduleTime {
    color: #383838;
}
.li-ScheduleShow {
    width: calc(90% - 80px);
    border: 0px solid green;
}

.li-ScheduleShow .name {
    font-weight:bold;

}
.li-ScheduleShow .presenter {
    font-weight: normal;
}
.li-ScheduleShow .description {
    font-weight: normal;
    font-style: italic;
    color: #383838;
}
.displayPanel .accordion-toggle:after {
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
    color: #fff; 
}

.displayPanel .accordion-toggle.collapsed:after {
    content: "\e080"; 
}

.progLi.NowShow
{
    border:2px solid #000;
    box-shadow: 5px 10px 18px #888888;
    /*float:left;*/
    margin: 15px 5px;
        width: 98%;
}
.progLi.NowShow .notice,
#liveSlide .notice
{
    width:auto;
    float:right;
    padding: 5px 10px;
    color:#fff;
    background:red;
    margin:5px;
    font-weight:bold;
    border:2px solid #000;


}
    .progLi.NowShow .notice {
        width: 120px;
        float: none;
    }
        #liveSlide .notice
{
    width: 300px;
    float: left;
    padding: 5px 10px;
    color: #fff;
    background: red;
    margin: 5px;
    font-weight: bold;
    border: 2px solid #000;
    position: absolute;
    top: 100px;
    left: 300px;
    font-size: 50px;

}
#liveSlide #nowShow{
    position: absolute;
    top: 50px;
    left: 150px;
    right: 150px;
    font-size: 30px;
    color:#000;
}
    #liveSlide #nowShow .progLi.NowShow {
        margin-top: 200px;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        list-style-type: none;
        min-height: 120px; 
    }

    #liveSlide #nowShow .progLi.NowShow {
        margin-top: 200px;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }

#liveSlide #nowShow .progLi.NowShow .name{
    width:100%;
    font-size: 40px;
}

#liveSlide #nowShow .progLi.NowShow .sponsorLink{
    font-size: 20px;
    margin-top:40px;
}

#crcLogo1 {
    width: 277px;
    margin: 0 auto;
    background: #6B8BDB;
    padding: 30px 20px;
    margin-top: 20px;
    position: relative;
    display: inherit;
    max-width: 100%;
    height:auto;
}
#liveSlide{

}
.container {
    max-width: 1450px;
}
#listenLiveText {
    cursor:pointer;
    float: right;
    color: #fff;
    line-height: 35px;
}
#listenLiveText:hover {
    opacity:0.8;
}

#PrivacylinkPage h2,
#DisclaimerlinkPage h2{
    font-weight: bold;
    margin: 15px 0 10px;
}
.carousel-indicators {
    background: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    width: 120px;
    /* margin: 50px auto -50px auto; */
    bottom: -20px;
    left: calc(50% - 50px);
    margin-left: 0;
}


.viz {
/*border:1px solid red;*/
width:100%;
min-height:0;
margin-bottom:50px;
overflow:hidden;
}

.listenLive .viz{
    min-height: 200px;
    transition: all 0.5s;
}

#fullscreen {
    border: 1px solid yellow;
    color:yellow;
    background:#000;
    width:150px;
    text-align:center;
    padding:5px 10px;
    cursor:pointer;
}

#fullscreen:hover {
opacity:0.8;
}
    .fullscreen.viz {
    /*border: 1px solid yellow;*/
    height: 100vh;
    width: 100vw;
}
/*.viz h1 {
    font-size: 24px;
    color: yellow;
}*/
#viz {
    /*border: 1px solid yellow;*/
    width: 100%;
    height: 0;
}

.listenLive #viz {
    /*border: 1px solid green;*/
    height: 200px;
}

.listenLive .fullscreen.viz,
.listenLive .fullscreen.viz #viz {
   /* border: 1px solid orange;
    height: 100vh;
    width: 100vw;*/
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:100;
}
    .listenLive .fullscreen.viz #defaultCanvas0 {
        height: 100vh !important;
        width: 100vw !important;
    }

@media screen and (max-width: 1480px) {
    .container {
        max-width: 1450px;
    }

    header #weather_widget {
        display: none;
    }

    header .navbar-collapse {
        width: calc(100% - 80px);
    }
}
@media screen and (max-width: 1100px) {
    .countdown {
        /*border: 1px solid red;*/
        width: 100%;
        margin:0;

    }

}
@media screen and (max-width: 980px) {
    .navbar-brand {
        height: 40px;
        width: 100px;
        margin: 5px 10px;
    }
    .navbar-nav {
        width: 60%;
    }
    .social-media-list a,
    .social-media-list a:visited {
        font-size: 1.2em;
        opacity: 0.8;
        padding: 5px 10px;
    }

    .search-wrapper {
        clear: both;
        margin: -40px 115px 0 0;
        font-size: 1em;
    }

    .search-wrapper input {
        display: none;
    }

    .navbar-inverse .navbar-toggle {
        border-color: transparent;
    }

    #paypalDonate {
        margin-right: 50px;
    }
    #popoutWarning {
        top: 40px;

    }
    .clearPanel.tint {
        padding: 20px;
        margin: 0;
    }

    .navbar-inverse .navbar-nav > li > a, 
    .navbar-inverse .navbar-nav > li > .MenuLink {
        padding: 5px 15px;
    }
    .pageWrapper.showpage{
        max-height:8000px;
    }
    #liveSlide .notice
{
    width: 200px;
    float: left;
    padding: 5px 10px;
    color: #fff;
    background: red;
    margin: 5px;
    font-weight: bold;
    border: 2px solid #000;
    position: absolute;
    top: 50px;
    left: 10px;
    font-size: 30px;

}
#liveSlide #nowShow{
    position: absolute;
    top: 70px;
    left: 150px;
    right: 150px;
    font-size: 20px;

    
}
#liveSlide #nowShow .progLi.NowShow{
    margin-top:120px;
}

#liveSlide #nowShow .progLi.NowShow .name{
    width:100%;
    font-size: 30px;
}

#liveSlide #nowShow .progLi.NowShow .sponsorLink{
    font-size: 10px;
    margin-top:20px;
}


    
    
    .countdown {
        /*border: 1px solid red;*/
        width: 104%;
        margin: 5px 0 5px -2%;
    }

        .countdown .countdown-title {
            border: 1px solid #E31B22;
            width: 50%;
            float: left;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            background: #E31B22;
            min-height: 100px;
            padding: 35px 10px;
            border-radius: 5px;
            text-align: center;
        }


    #clockdiv {
        font-family: sans-serif;
        color: #fff;
        display: inline-block;
        font-weight: 100;
        text-align: center;
        font-size: 30px;
        float: right;
        width: 50%;
    }
    
}
@media screen and (max-width: 768px) {
    .navbar-nav {
        width: 90%;
    }
    .container.body-content {
        margin-top: 100px;
    }

    .social-media {
        margin: 0 0 0 3px;
    }

    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color:rgba(0,0,0,0.1);

    }
    .search-wrapper {
        clear: both;
        margin: -40px 165px 0 0;
        font-size: 1em;
    }

    #speaker_icons {
        position: absolute;
        top: 10px;
        right: 155px;
    }

    .popout-Link {
        height: 20px;
        width: 20px;
        margin-top: 2px
    }

    header #listenLive {
        right: 120px;
        top: 12px;
    }
    header #listenLive .speaker {
        width: 50px;
        height: 30px;
    }

    #llVolume {
        margin-top: 0;
    }

    #volText {
        padding: 0 0 0 15px;
        font-size: 12px;
    }

    .slider::-webkit-slider-thumb {
        margin-top: -5px;
        -webkit-appearance: none;
        appearance: none;
        width: 10px;
        height: 15px;
        background: #000;
        cursor: pointer;
    }

    .popout-Link:hover {
        opacity: 1;
        font-size: 1em;
    }
    .white {
        background: rgba(0,0,0,0.5);
    }
    
   #liveSlide .notice
{
    width: 200px;
    float: left;
    padding: 5px 10px;
    color: #fff;
    background: red;
    margin: 5px;
    font-weight: bold;
    border: 2px solid #000;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;

}
#liveSlide #nowShow{
    position: absolute;
    top: 30px;
    left: 150px;
    right: 150px;
    font-size: 15px;
        left: 50px;
        right: 50px;
    }

    #liveSlide #nowShow .progLi.NowShow {
        min-height: 0;
    }




#liveSlide #nowShow .progLi.NowShow{
    margin-top:90px;
}

#liveSlide #nowShow .progLi.NowShow .name{
    width:100%;
    font-size: 20px;
}

    #liveSlide #nowShow .progLi.NowShow .notice {
        width: 100%;
        font-size: 25px;
    }

#liveSlide #nowShow .progLi.NowShow .sponsorLink{
    font-size: 10px;
    margin-top:10px;
}
    .countdown .countdown-title {
       
        width: 100%;
        float:left;
        margin-bottom:10px;
        min-height:40px;
        padding:5px 10px;
      
    }


    #clockdiv {
        width: 100%;
        float: left;
    }
    #listenLiveText {
        line-height: 25px;
    }
}

@media screen and (max-width: 550px) {
    header .listen .audio-wrapper {
        width: 90px;
    }

    .navbar-nav {
        width: 100%;
    }
    .listenBackPanel,
    .SchedulePanel,
    .AboutPanel,
    .AdvertisingPanel,
    .ContactPanel {
        margin: 0 -15px;
    }

    .SchedulePanel .col-md-6 {
        padding:0;
    }

    .pageTitle {
        margin: 0;
    }

    .listenBackPanel ul {
        width: 100%;
        padding: 0;
    }
    .contactNumber{
        width:100%;
    } 

    .clearPanel.tint {
        margin: 0 !important;
    }

    footer {
        padding:0 10px;
    }
    .panelTitle{
            padding-left: 0;
    }
    
     #liveSlide .notice
{
    width: 200px;
    float: left;
    padding: 5px 10px;
    color: #fff;
    background: red;
    margin: 5px;
    font-weight: bold;
    border: 2px solid #000;
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 10px;

}
    #liveSlide #nowShow .progLi.NowShow .notice {
        text-align: left;
        width: auto;
        font-size: 15px;
        margin-top: -5px;
    }

#liveSlide #nowShow{
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    font-size: 15px;

    
}
#liveSlide #nowShow .progLi.NowShow{
    margin:20px 5% 0 5%;
    width:90%;
}




    #liveSlide #nowShow .progLi.NowShow .name {
        width: 100%;
        font-size: 20px;
    }

#liveSlide #nowShow .progLi.NowShow .sponsorLink{
    font-size: 10px;
    margin-top:10px;
}
    #mainCarousel .item > img {
        width: 80%;
        margin: 0 10%;
    }
    .carousel-control.right{
        right:10px;
    }
    .carousel-control.left {
        left: -12px;
    }
    
}

@media screen and (max-width: 450px) {
    #llVolume,
    #volText {
        display: none;
    }
    .container.body-content {
        margin-top: 70px;
    }

    header .navbar-collapse {
        width: 100%;
    }
    .clearPanel.tint {
        margin: 0 -30px;
    }
    .li-ScheduleTime{
        min-width:68px;
		    width: 100%;
    text-align: left;
    }
	.li-ScheduleShow {
    width: 100%;
}
.facebook-wrapper {
    margin-left: -30px;
}
    .carousel-indicators {
        bottom: -20px;
    }

    #liveSlide #nowShow .progLi.NowShow .notice {
        text-align: left;
        width: auto;
        font-size: 12px;
        margin-top: -5px;
    }
    #liveSlide #nowShow .progLi.NowShow .name {
        width: 100%;
        font-size: 18px;
    }
    .li-ScheduleTime {
        font-size:12px;
    }
    .li-ScheduleTime, .li-ScheduleShow {
        padding: 0 5px;
    }
}

@media screen and (max-width: 360px) {
    header .listen .audio-wrapper {
        display: none;
    }
    #speaker_icons {
        right: 62px;
    }
    #map {
        height: 320px; 
        width: 100%; 
    }
}
