body {
    background: url(/images/bg.jpg) 0px 534px no-repeat;
    background-position: top center;
    background-color: #000;
}
a {
   color: #cc0000;
}
a:hover, a:visited, a:active, a:focus {
   color: #dd0000 !important;
   text-decoration: none !important;
}
.ta-right {text-align: right;}
.uppercase {text-transform: uppercase;}
.right {text-align: right;}

#top-head {
   background-color: #000;
   height: 157px;
}

.logo{
   display: inline-block;
   float: left;
   position: absolute;
   z-index: 99999999;
   background: url(/images/logo.gif) top left no-repeat;
   background-size: contain;
   width: 257px;
   height: 158px;
   
}

/*player*/
.equalizer{
	position: relative;
	margin:0 auto;
	float:left;
}
.equalizer_bar{
	float: left;
}
.equalizer_bar_component{
	float: left;
	width: 100%;
}
#player {
   margin-top: 30px;
}

.player-skin {
   display: inline-block;
   width: 450px;
   height: 90px;
   margin-left: 309px;
   float: left;
   margin-top: -82px;
}

.player-right, .player-left {
   display: inline-block;
   height: 90px;
   width: 115px;
}

.player-right {
   width: 316px;
}

#player-title {
   display: inline-block;
   width: 300px;
   padding-bottom: 30px;
   color: #666666;
}

#player-time {
   color: #666666;
   width: 54px;
   display: inline-block;
   margin-top: -3px;
   float: left;
}

#volume-bar {
   display: inline-block;
   width: 200px;
   height: 5px;
   background: #666666;
   margin-bottom: 10px;
}

#volume-bar-inner {
   display: inline-block;
   width: 100%;
   height: 5px;
   background: #cc0000;
   float: left;
}

#volume-wrap {
   display: inline-block;
   margin-left: 10px;
}

#volume-down, #volume-up {
   display: inline-block;
   width: 15px;
   height: 20px;
   background: url(/images/volumedown.png) -6px -5px no-repeat;
   background-color: #666;
   margin-right: 0px 5px 0px 5px;
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#volume-up {
   background: url(/images/volumeup.png) 0px -5px no-repeat;
   background-color: #666;
   width: 23px;
}

.player-skin .play, .player-skin .stop {
   display: inline-block;
   width: 42px;
   height: 42px;
   margin-top: 34px;
   float: left;
   background-color: #666;
}
.play {
   background: url(/images/play.png) 0px 0px no-repeat;
}

.stop {
   background: url(/images/stop.png) 0px 0px no-repeat;
   margin-left: 14px;
}

.play:hover, .stop:hover, #volume-up:hover, #volume-down:hover, .stopped, .playing {
   background-color: #cc0000 !important;
}
/*banner*/
.banner-wrapper {
   display: flex;
   flex-wrap:  wrap;
   flex-direction: row;
   justify-content: flex-start;
   margin-top: 45px;
}
.banner-wrapper a {
   align-self: flex-start;
   display: inline-block;
}
.banner-wrapper img {
   width: 90px;
   margin-right: 34px;
   opacity: 0.6;
}
.banner-wrapper img:hover{
   opacity: 1;
}
/*footer elements*/
.phone-img {
   width: 190px;
   margin-top: -130px;
}

.app-store-btn, .google-store-btn {
   width: 150px;
   height: 53px;
   display: inline-block;
   margin-bottom: 18px;
   margin-left: 30px;
   background: url(/images/pakaoradio-app-store.png) 0px 0px no-repeat;
}
.google-store-btn {
   background: url(/images/pakaoradio-app-store.png) 0px -68px no-repeat;
}

.app-store-btn:hover, .google-store-btn:hover{
   opacity: 0.8;
}

.carousel-control {
   opacity: 1 !important;
   width: 30% !important;
}

.carousel-control.left {
   background: url(/images/left.png) center left no-repeat !important;
}

.carousel-control.left:hover {
   background: url(/images/left_hover.png) center left no-repeat !important;
}

.carousel-control.right {
   background: url(/images/right.png) center right no-repeat !important;
}

.carousel-control.right:hover {
   background: url(/images/right_hover.png) center right no-repeat !important;
}

.carousel-border-top {
    background: url(/images/border.png);
    width: 100%;
    height: 69px;
    position: absolute;
    z-index: 9999;
}

.navbar-inverse {
   background-color: transparent !important;
   border: none !important;
   text-transform: uppercase;
}

.navbar-inverse .navbar-nav > li > a {
    color: #FFF;
    font-weight: bold;
}

.copyleft {
   display: inline-block;
   float: right;
   width: 100%;
}

.copyleftsymbol {
  display:inline-block;
  transform: rotate(180deg);
}

#page {
   text-align: center;
   padding-bottom: 60px;
}
.card {
   display: inline-block;
   height: 230px;
   width: 30%;
   margin: 3px;
   text-align: center;
   background-size: cover !important;
   float: left;
   padding: 2px;
   color: white;
   background: black;
}

.card .image {
   display: block;
   height: 162px;
   background-size: cover !important;
   cursor: pointer;
}


.card .title, .card .subtitle {
   display: inline-block;
   width: 100%;
   color: #FFF;
   white-space: nowrap;
}
.card .title, .card .title:hover, .card .title:active, .card .title:focus{
   color: #cc0000 !important;
   text-transform: uppercase;
   font-family: 'Helvetica';
}
.card .subtitle  {
   color: #FFF !important;
   font-family: 'Helvetica';
}

.moreBtn,.moreBtn:hover, .moreBtn:visited, .moreBtn:active, .moreBtn:focus {
    color: #FFF !important;
    text-transform: uppercase;
    font-family: 'Helvetica';
    font-weight: bold;
}

#pakaostrana {
   overflow: hidden;
}

#pakaostrana img {
   max-width: 100% !important;
}

.bantTitle {   
   color: #cc0000;
}
.bantTitle:hover {
   cursor: pointer;
}


@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
} 

.navbar-nav > li > a {
   width: 180px;
   text-align: center;
 }
 
 


@media (max-width:1620px){
.slider-wrapper{width: 1420px !important;}
}


 
@media (max-width:1440px){
   .slider-wrapper{width: 1200px !important;}
}

@media (max-width:1220px){
.slider-wrapper{width: 1100px !important;}
.card {width: 48%; height:260px;}
.card .image {height: 217px;}
}

@media (max-width:1200px){
   .logo{ width: 185px !important;}
   .relative_left{margin: 30px 195px !important;}
   .player-skin{margin-left: 205px!important;}
   .slider-wrapper{width: 1050px !important;}
   .navbar-nav > li > a { width: 150px; }
}

@media (max-width:1120px){
.slider-wrapper{width: 960px !important;}
}

@media (max-width:1020px){
   .slider-wrapper{width: 840px !important;}
   .relative_left{width: 570px !important;}
   .equalizer {
       width: 128px !important;
       height: 52px !important;
       overflow: hidden;
   }
   .player-skin {
       margin-left: 140px!important;
   }
   .navbar-nav > li > a { width: 110px; }
}



@media (max-width:880px){
.logo{
    display: block;
    float: left;
    width: 100% !important;
    position: relative;
    background: url(/images/logo-small.jpg) top center no-repeat;
}
.relative_left{margin-left: 20px !important; height: 55px!important;}
.slider-wrapper, .carousel-border-top{display: none;}
#top-head{height: 245px;}
.navbar-header {background: #000000;}
.phone-img, .social {display: none !important;}
.copyleft {text-align: center;}
}

@media (max-width:628px){
   .equalizer {
      display: none;
   }
   .player-skin {
     margin-top: -34px;
     margin-left: -7px !important;
   }
   .card {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
   }
   .card .image {
      height: 300px;
   }
   
   .relative_left{width: 470px !important;}
   .navbar-nav > li > a { width: 170px; text-align: left; text-indent: 30px; }   
}

@media (max-width:500px) {
   .player-right {
      width: 302px;
      display: block;
      position: relative;
      margin-top: -18px;
      z-index: 9999999999999999999;
  }
  #player-title {
      padding-bottom: 0px;
      padding-top: 10px;
   }
   body {
      overflow-x: hidden;
   }
   .card .image {
      height: auto;
      min-height: 218px;
   }
   .relative_left{width: 370px !important;}
   .navbar-inverse .navbar-toggle {
      margin-top: -78px;
      margin-bottom: 78px;
   }
   .banner-wrapper img {margin-right: 0px;}
}

@media (max-width:300px) {
.app-store-btn, .google-store-btn {margin-left: 15px;}
.banner-wrapper img {margin-right: 29px;}
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form  {
   background: #000000 !important;
   border-color: #00000 !important;   
}

h1, h2, h3, label, p, div {
   color: #ffffff;
}

.ann-subtitle {
   margin-top: -10px;
   font-size: 20px;
}

.carousel-caption {
   text-align: right;
   right: 150px;
   padding-bottom: 0px !important;   
}

.carousel-caption * {
   color:#666 !important;
   font-family: 'Helvetica' !important;
}

iframe {
   border: none !important;
}

.footer {
   margin-top: 130px;
}

.cerror span {
   display: block;
}

.btn-danger {
    color: #fff;
    background-color: #cc0000;
    border-color: #cc0000;
}

.social {
   position: fixed;
   left: 100%;
   margin-left: -47px;
   top:40%;
   display: inline-block;
   width: 48px;
   height: 181px;
   z-index: 9999999;
}
.social_fb, .social_winamp, .social_ytb, .social_tunein {
   background: url(/images/social.png) 0px -2px no-repeat;
   display: inline-block;
   width: 45px;
   height: 45px;
   margin-bottom: -5px;
}

.social_fb {
   margin-bottom: -4px;
}
.social_fb:hover, .social_winamp:hover, .social_ytb:hover, .social_tunein:hover {
   opacity: 0.85;
} 
.social_winamp {
   background: url(/images/social.png) 0px -92px no-repeat;
}

.social_ytb {
   background: url(/images/social.png) 0px -48px no-repeat;
}

.social_tunein {
   background: url(/images/social.png) 0px -136px no-repeat;
}

.tooltip{
   opacity: 1 !important;
}

.ttlink, .ttlink:hover {
   color: #ffffff !important;
   border-bottom: 2px dotted !important;
   border-color: #dd0000 !important;
}