/* --------------------------------------
=========================================
FUENTES
=========================================
-----------------------------------------*/

@font-face {
	font-family: 'gothic';
	src: url('../fonts/gothic.eot');
	src: local('gothic'), url('../fonts/gothic.woff') format('woff'), url('../fonts/gothic.ttf') format('truetype');
}

/* --------------------------------------
=========================================
EFECTOS
=========================================
-----------------------------------------*/
/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.3.2
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Hover.css Copyright Ian Lunn 2017. Generated with Sass.
 */
 /* Grow Shadow */
 .hvr-grow-shadow {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: box-shadow, transform;
   transition-property: box-shadow, transform;
 }

 .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
   box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   border: 1px solid white!important;
   background: #fdc009;
   color: #000000!important;
 }

 /* Float Shadow */
 .hvr-float-shadow {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform;
   transition-property: transform;
 }

 .hvr-float-shadow:before {
   pointer-events: none;
   position: absolute;
   z-index: -1;
   content: '';
   top: 100%;
   left: 5%;
   height: 10px;
   width: 90%;
   opacity: 0;
   background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   /* W3C */
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform, opacity;
   transition-property: transform, opacity;
 }

 .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
   -webkit-transform: translateY(-5px);
   transform: translateY(-5px);
   /* move the element up by 5px */
 }

 .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
   opacity: 1;
   -webkit-transform: translateY(5px);
   transform: translateY(5px);
   /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
 }

 /* Underline From Left */
 .hvr-underline-from-left {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   overflow: hidden;
 }

 .hvr-underline-from-left:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 0;
   right: 100%;
   bottom: 0;
   background: #cb2428 ;
   height: 4px;
   -webkit-transition-property: right;
   transition-property: right;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
 }

 .hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
   right: 0;
 }

/* --------------------------------------
=========================================
GLOBAL
=========================================
-----------------------------------------*/
html{
    background-image: url('../images/background-dot.jpg');
}

body{
	background-color: transparent !important;
    /*font-family: 'gothic' !important;*/
}

.bg-red{
	background-color: #ff0000 !important;
	color: white;
}

.bg-red-219{
	background-color: #db0c17 !important;
}

.bg-red-203{
	background-color: #cb2428 !important;
}

.bg-dark-25{
	background-color: rgba(25,25,25,1) !important;
}

.bg-dark-36{
	background-color: #242424 !important;
}

.bg-green-197{
	background-color: #6fc52d !important;
}

.bg-twitter{
	background-color: #1ca0f1 !important;
	color: white;
}

.bg-facebook{
	background-color: #3b5998 !important;
	color: white;
}

.bg-instagram{
	background-color: #cb222a !important;
	color: white;
}

.bg-fiesta-red {
    background-color: #cc100b !important;
}

.bg-fiesta-yellow {
	background-color: #efc030 !important;
}

.bg-fiesta-blue {
	background-color: #2a63ac !important;
}

.bg-title-1-p1 {
	background-image: url('../images/index/background-title-01-p1.png');
	background-repeat: no-repeat;
	background-position-x: right;;
}

.bg-title-1-p2 {
	background-image: url('../images/index/background-title-01-p2.png');
	background-repeat: repeat-x;
}

.bg-title-1 {
	background-image: url('../images/index/background-title-01.png');
	background-repeat: no-repeat;
}

.bg-title-2 {
	background-image: url('../images/index/background-title-02.png');
	background-repeat: no-repeat;
}

.bg-title-2-p1 {
	background-image: url('../images/index/background-title-02-p1.png');
	background-repeat: no-repeat;
	background-position-x: right;;
}

.bg-title-2-p2 {
	background-image: url('../images/index/background-title-02-p2.png');
	background-repeat: repeat-x;
}

.bg-title-3 {
	background-image: url('../images/index/background-title-03.png');
	background-repeat: no-repeat;
}

.bg-title-3-p1 {
	background-image: url('../images/index/background-title-03-p1.png');
	background-repeat: no-repeat;
	background-position-x: right;;
}

/* --------------------------------------
=========================================
HEADER
=========================================
-----------------------------------------*/

/*---------------------------------------
**   MENU						                -----
-----------------------------------------*/

#headerSocial a.btn, a.btn > i{
	transition: 0.15s;
}
#headerSocial a.btn-facebook:hover, a.btn:hover > i.fa-facebook-f{
	color: #202428;
    background-color: #cc100b;
    border-color: #1a1e21;
}

#headerSocial a.btn-twitter:hover, a.btn:hover > i.fa-twitter{
	color: #202428;
    background-color: #cc100b;
    border-color: #1a1e21;
}

#headerSocial a.btn-instagram:hover, a.btn:hover > i.fa-instagram{
	color: #202428;
    background-color: #cc100b;
    border-color: #1a1e21;
}

#headerNav li.nav-item > a {
	transition: 0.15s;
}

#headerNav li.nav-item:hover > a{
    color: #000000 !important;
    /*background-color: #1c1f23;
    border-color: #1a1e21;*/
}

/*---------------------------------------
**   Logo			                -----
-----------------------------------------*/
#logo {
    background-image: url('../images/background-top.png');
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
	font-family: 'gothic' !important;
}

#logo .card, .card-header, .card-body, .card-footer {
	background-color:transparent !important;
}

/*---------------------------------------
**   Player			                -----
-----------------------------------------*/
#player .escuchando {
    font-size: 1.5em;
    font-weight: 700;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #777;
    line-height: 45px;
}

#player .stations a{
    font-size: calc(1.275rem + .3vw) !important;
    font-weight: 700;
    color: #FFF;
    text-decoration: none;
    transition: 0.15s;
}

@media (max-width: 576px) {
  #player .stations a{
      font-size: calc(1rem + .3vw) !important;
      font-weight: 700;
      color: #FFF;
      text-decoration: none;
      transition: 0.15s;
  }
}

#player .stations a:hover{
  color: #6c757d;
}

#player .stations .active {
    color: #FFCC00;
}

.jw-wrapper, .jw-flag-audio-player {
  background-color: transparent !important;
}

.jw-state-idle .jw-controls {
  background: rgba(0,0,0,0.0) !important;
}

.jw-controls-backdrop {
  background: rgba(0,0,0,0.0) !important;
}
/* --------------------------------------
=========================================
FOOTER
=========================================
-----------------------------------------*/

#Contacto {
	background-image: url('../images/background-footer.png');
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family: Arial, Helvetica, sans-serif;
}

#Contacto a, #Contacto span {
	font-size: 12px;
}

.jw-autostart-mute, .jw-controlbar, .jw-display-icon-container .jw-icon, .jw-nextup-container, .jw-overlays .jw-plugin, .jw-skip {
  pointer-events: all;
  background: #ffc00b!important; 
  border-radius: 10px!important;
  font-size: 24px;
  box-shadow: 2px 10px 50px -17px #faf7fa!important;
}
.jw-flag-audio-player .jw-controlbar .jw-icon-airplay, .jw-flag-audio-player .jw-controlbar .jw-icon-cast, .jw-flag-audio-player .jw-controlbar .jw-icon-next, .jw-flag-audio-player .jw-controlbar .jw-icon-playback, .jw-flag-audio-player .jw-controlbar .jw-icon-rewind, .jw-flag-audio-player .jw-controlbar .jw-icon-volume, .jw-flag-audio-player .jw-controlbar .jw-logo-button, .jw-flag-audio-player .jw-controlbar .jw-text-duration, .jw-flag-audio-player .jw-controlbar .jw-text-elapsed, .jw-flag-audio-player .jw-controlbar .jw-text-live {
  display: flex;
  flex: 0 0 auto;
  /*color: #027cd9;*/
  color: #000000;
}

.items{
  color: #fff!important;
  font-size: 17px;
  font-weight: bold;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #ed1a26;
  border: 1px solid white;
}

.subnav {
  width: 100%!important;
  background-color: #3c3c3c!important;
}
.subnav a {
  color: #999;
}
.subnav a:hover {
  color: rgb(253, 253, 253);
}