/*@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');*/


@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Magra:wght@400;700&display=swap');

html{
	width: 100%;
	height: 100%;
}
body { 	
	height: 100%; 
	width: 100%; 
	margin: 0;
	border: 0 none;
	background-color:#FFF;
	/*background-color:#f3f6f9;*/
}
#header-veracruz{
	display:block;
}
#header-villahermosa{
	display:none;
}
a{
	color:#000000;
	text-decoration:none;
	-webkit-transition: all 0.2s;
  	   -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
         -o-transition: all 0.2s;
            transition: all 0.2s;
}
a:hover{
	text-decoration:none;
}

.fp-float{
	width:300px;
	height:100px;
	left:none !important;
	position:fixed;
	right:0;
	z-index:9999;
	bottom:0;
}


.class-button{
	/*border: 1px solid #13aa52;*/
	border:none;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	outline: 0;
	text-align: center;
	transform: translateY(0);
	transition: transform 150ms, box-shadow 150ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.button-border-white{
	border: 1px solid #FFFFFF;
}

.head-pad-container{
	/*padding-top:110px;*/
	margin-top:95px;
}

.portada-mid-esp{
	height:250px;
}
@media screen and (max-width: 1199px){
	.portada-mid-esp{
		height:100px;
	}
}
@media screen and (max-width: 991px){
	.portada-mid-esp{
		height:10px;
	}
	.head-pad-container{
		margin-top:90px;
	}
}

#show{
	display: none;
}

.bottomright {
	position:sticky;
	bottom: 8px;
	right: 16px;
}


/* -----------------------------------
:: RADIOPLAYER - PLAY BTN
------------------------------------*/
.player-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0px;
}

 .visualizer {
	position: absolute;
	width: 100px;
	height: 100px;
}

.play-btn {
	width: 61px;
	height: 61px;
	border: none;
	border-radius: 50%;
	background: red;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease;
	position: relative;
}

 .play-btn:hover {
	background: red;
}

 .play-btn svg {
	width: 24px;
	height: 24px;
	fill: white;
}

/* BOTON PLAYER FLOAT */

.wrapper {
  position: relative;
  width: 50px;
  height: 50px;
  /*margin: 0 auto;*/

  .circle {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: #FF0000;
    margin: auto;
    transform: scale(1, 1);

    &.pulse {
      animation-timing-function: ease;
      animation: pulse 2s infinite;
      background-color: lighten(#FF0000, 25%);
    }
  }

  svg {
    fill: darken(#FF0000, 12%);
    stroke: darken(#FF0000, 12%);
    stroke-linejoin: round;
    stroke-width: 5;
    transition: all 0.3s;

    &:hover {
      cursor: pointer;
      fill: darken(#FF0000, 17%);
      stroke: darken(#FF0000, 17%);
      transform: scale(1.2, 1.2);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* EFECTO BOTTON */

.effect1 {
  color: #FFF;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 24px;
  position: relative;
  padding: 10px 50px 10px 20px;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

  -webkit-transform: scale(3);

      -ms-transform: scale(3);

          transform: scale(3); /*change scale(3) to scale(1)*/
}

.effect1 .bg {
  background: #FF0000;
  width: 30px;
  height: 2px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  z-index: -1;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;
}

.effect1:hover {
  padding-right: 20px;
  color: #FFF;
}

.effect1:hover .bg {
  height: 100%;
  width: 100%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.effect1 .bg:before, .effect1 .bg:after {
  content: '';
  height: 2px;
  width: 10px;
  background: #FF0000;
  position: absolute;
  right: -2px;      
  -webkit-transition: all 0.3s;      
  -o-transition: all 0.3s;      
  transition: all 0.3s;
}

.effect1 .bg:before {
  bottom: 3px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.effect1 .bg:after{
  top: 3px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.effect1:hover .bg:before,
.effect1:hover .bg:after{
  right: 0;
}

.effect1:hover .bg:before{
  bottom: 6px;
}

.effect1:hover .bg:after{
  top: 6px;
}


/* BARS */

.middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.bar {
  width: 10px;
  height: 70px;
  background: #fff;
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
  animation: loader 1.2s linear infinite;
}
.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}
.bar5 {
  animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}
.bar7 {
  animation-delay: 0.7s;
}
.bar8 {
  animation-delay: 0.8s;
}

@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: ;
  }
  50% {
    transform: scaleY(1);
    background: red;
  }
  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}



/* -----------------------------------
:: RADIOPLAYER - BODY
------------------------------------*/

.rp-content{
	height:630px;
}
.rp-btn-zone{
	top:50%; 
	left:50%; 
	transform: translate(-50%, -55%);
}
.rp-song-zone{
	margin:0; 
	width:100%; 
	height:70px;
}
@media screen and (max-width: 1399px){
	.rp-content{
		height:600px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -85%);
	}
}
@media screen and (max-width: 1199px){
	.rp-content{
		height:630px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -65%);
	}
}
@media screen and (max-width: 991px){
	.rp-content{
		height:560px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -105%);
	}
	.rp-song-zone{
		height:100px;
	}
}
@media screen and (max-width: 767px){
	.rp-content{
		height:990px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -25%);
	}
	.rp-song-zone{
		height:100px;
	}
}
@media screen and (max-width: 575px){
	.rp-content{
		height:1045px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -20%);
	}
}
@media screen and (max-width: 550px){
	.rp-btn-zone{
		transform: translate(-50%, -40%);
	}	
}
@media screen and (max-width: 530px){
	.rp-btn-zone{
		transform: translate(-50%, -60%);
	}	
}
@media screen and (max-width: 500px){
	.rp-btn-zone{
		transform: translate(-50%, -90%);
	}	
}
@media screen and (max-width: 470px){
	.rp-btn-zone{
		transform: translate(-50%, -120%);
	}	
}
@media screen and (max-width: 450px){
	.rp-btn-zone{
		transform: translate(-50%, -140%);
	}	
}
@media screen and (max-width: 430px){
	.rp-content{
		height:850px;
	}
	.rp-btn-zone{
		transform: translate(-50%, -65%);
	}	
}
@media screen and (max-width: 414px){
	.rp-btn-zone{
		transform: translate(-50%, -75%);
	}	
} 
@media screen and (max-width: 412px){
	.rp-btn-zone{
		transform: translate(-50%, -80%);
	}	
} 
@media screen and (max-width: 400px){
	.rp-btn-zone{
		transform: translate(-50%, -90%);
	}	
}
@media screen and (max-width: 390px){
	.rp-btn-zone{
		transform: translate(-50%, -100%);
	}	
}
@media screen and (max-width: 375px){
	.rp-btn-zone{
		transform: translate(-50%, -115%);
	}	
}
@media screen and (max-width: 370px){
	.rp-btn-zone{
		transform: translate(-50%, -120%);
	}	
}
@media screen and (max-width: 360px){
	.rp-btn-zone{
		transform: translate(-50%, -130%);
	}	
}
@media screen and (max-width: 350px){
	.rp-btn-zone{
		transform: translate(-50%, -140%);
	}	
}
@media screen and (max-width: 350px){
	.rp-btn-zone{
		transform: translate(-50%, -160%);
	}	
}
/* -----------------------------------
:: IMAGENES
------------------------------------*/
.portada-img{
	height:760px;
}
.portada-img-style{
	background-position:center; 
	background-size:cover;	
}

.portada-main-logo{	
	height:240px;
}
.portada-img-logo-movil{
	height:100px;
}
@media (max-width: 479px) {
   .portada-img-logo-movil{
    display: none;
  }
}
.portada-notas-main{
	width:100%;
	height:350px;		
}
.portada-espacio-new{
	height:450px;	
}
.portada-notas-main-content{
	height:350px;
	overflow: hidden;
}
.portada-notas-main-content img{
	transition: transform .5s ease;
}
.portada-notas-main-content:hover img{
  transform: scale(1.5);
}

.portada-notas-sec{
	width:100%;
	height:250px;
}
.portada-notas-sec-rp{
	width:100%;
	height:250px;
}
.seccion-notas-main{
	width:100%;
	height:400px;
}
.seccion-notas-main-two{
	width:100%;
	height:270px;
}
.seccion-notas-sec{
	width:100%;
	height:130px;
}
.nota-mas-visto{
	width:100%;
	height:200px;
}
.widget-mas-viral{
	width:100%;
	height:80px;
}

.seccion-musica-nueva-sec{
	width:100%;
	height:180px;	
}

.promocion-min-img{
	width:400px; 
	height:400px;
}
.promocion-registro-img{
	width:100%;
	height:400px;	
}
.seccion-fblive-main{
	width:100%;
	height:400px;
}
.seccion-fblive-side{
	width:100%;
	height:210px;
}
.logo-footer{	
	width:100%;
	height:auto;
}
.loc-portada-pro{
	width:100px;
	height:80px;
}
.loc-widget-player{
	width:100%;
	height:84px;
}

.loc-program{
	height:200px;
}
.wget-promoh{
	width:100%;
	/*height:84px;*/
}

@media screen and (max-width: 3840px){
	.portada-img{
		/*height:1600px;*/
	}
}	
@media screen and (max-width: 1199px){
	.portada-img{
		height:600px;
	}
	.portada-notas-sec-rp{		
		height:150px;
	}
	.loc-program{
		height:115px;
	}
	.portada-espacio-new{
		height:320px;	
	}
}
@media screen and (max-width: 991px){
	.portada-img{
		height:450px;
	}
	.portada-notas-sec-rp{		
		height:200px;
	}
	.seccion-notas-main{	
		height:350px;
	}
	.seccion-notas-main-two{	
		height:200px;
	}
	.loc-program{
		height:95px;
	}
	.widget-mas-viral{
		height:150px;
	}
	.portada-espacio-new{
		height:220px;	
	}
}

@media screen and (max-width: 767px){
	.portada-img{
		height:400px;
	}
	.logo-footer{
		width:30%;
		margin:auto;
	}
	.seccion-notas-main-two{
		height:350px;
	}
	.widget-mas-viral{		
		height:200px;
	}
}
@media screen and (max-width: 576px){
	.loc-program{
		height:90px;
	}
	.seccion-musica-nueva-sec{		
		height:250px;	
	}
}
@media screen and (max-width: 430px){
	.loc-program{
		height:100px;
	}
}
/* -----------------------------------
:: 1.0 FUENTES
------------------------------------*/
/* TYPES */
.fuente-main{
	font-family: "Freeman", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.fuente-primaria{
	font-family: "Magra", sans-serif;	
	font-style: normal;
	/*
	font-family: 'Patua One', cursive;
	font-optical-sizing: auto;
	font-style: normal;
	*/
}

.fuente-secundaria{
	font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	/*
	font-family: 'Roboto', sans-serif;	
	font-optical-sizing: auto;	
	font-style: normal;
	*/
}
/* WEIGHT */
.p900{
	font-weight:900;
}
.p700{
	font-weight:700;
}
.p500{
	font-weight:500;
}
.p400{
	font-weight:400;
}
/* SIZES */
.s-0p7-rem{
	font-size:0.7rem !important;
}
.s-1-rem{
	font-size:1rem !important;
}
.s-1p3-rem{
	font-size:1.3rem !important;
}
.s-1p5-rem{
	font-size:1.5rem !important;
}
.s-2-rem{
	font-size:2rem !important;
}
.s-2p4-rem{
	font-size:2.2rem !important;
}
.s-3-rem{
	font-size:3rem !important;
}
.s-3p5-rem{
	font-size:3.5rem !important;
}
.s-4-rem{
	font-size:4rem !important;
}

@media screen and (max-width: 1199px){
	.s-2-rem{
		font-size:1.8rem !important;
	}
}

@media screen and (max-width: 991px){
	.s-3-rem{
		font-size:2.5rem !important;
	}
	.s-4-rem{
		font-size:3rem !important;
	}	
}
@media screen and (max-width: 767px){
	.s-3-rem{
		font-size:1.7rem !important;
	}
	.s-4-rem{
		font-size:2rem !important;
	}
}

/* fuentes especificas */
/* TITULOS PROGRAMAS PORTADA NEW */
.s-titulo-programas-portada{
	font-size:3.5rem;
}

.s-titulos-main-menu{
	font-size:1.2rem;
}
.s-titulos-notas{
	font-size:3rem;
}
.s-texto-notas{
	font-size:1.2rem;
}
.s-titulos-main-seccion{
	font-size:2.5rem;
}
.s-titulos-inter-seccion{
	font-size:1.5rem;
}
.s-titulos-inter-seccion-rp{
	font-size:1.5rem;
}
.s-text-inter-seccion-small{
	font-size:.8rem;
}
.s-footer-grande{
	font-size:1rem;
}
.s-footer-medio{
	font-size:1rem;
}
.s-footer-chica{
	font-size:.8rem;
}
.head-no-upper{
	text-transform:capitalize !important;
}
.rp-programa-name{
	font-size:1.5rem;
}
.rp-size-loc-hr{
	font-size:1rem;
}
.rp-titulo-comunica{
	font-size:1.5rem;
}
.rp-text-comunica{
	font-size:1rem;
}
.rp-icono-comunica{
	font-size:2rem;
}

/* VARIOS SECCIONES */
.s-titulos-all-secs{
	font-size:3rem;
}
.s-titulos-all-widg{
	font-size:1.5rem;
}
.s-masviral-tit-widg{
	font-size:1rem;
}
/* SECCION MÁS VIRAL */
.s-titulos-seccion-main{
	font-size:2.5rem;
}
.s-titulos-seccion-main-sub{
	font-size:2rem;
}
.s-titulos-seccion-sec{
	font-size:1.5rem;
}
/* PROGRAMACION */
.s-programacion-titulo-horario{
	font-size:2rem;
}
.s-programacion-locutor{
	font-size:1.5rem;
}
.s-programacion-wa-msj-live{
	font-size:1rem;
}
/* PROMOCIONES */
.s-promos-btn-txt{
	font-size:1rem;
}
/* PORTADA */
.p-program-name{
	font-size:3rem;
}
.p-play-plaza{
	font-size:1.5rem;
}
.p-play-escucha{
	font-size:1rem;
}
.p-play-prog-bottom{
	font-size:1.5rem;
}

@media screen and (max-width: 1399px){
	.p-program-name{
		font-size:2.5rem;
	}
	.s-titulos-main-menu{
		
	}
	.s-titulos-seccion-main{
		font-size:2.3rem;
}
	.s-titulos-seccion-main-sub{
		font-size:1.7rem;
	}
	.s-titulos-seccion-sec{
		font-size:1.2rem;
	}
	.s-programacion-wa-msj-live{
		font-size:.8rem;
	}
}
@media screen and (max-width: 1301px){
	.s-titulos-main-menu{
		font-size:1.1rem;
	}
}
@media screen and (max-width: 1233px){
	.s-titulos-main-menu{
		font-size:1rem;
	}
}	
@media screen and (max-width: 1199px){
	.s-titulo-programas-portada{
		font-size:3rem;
	}
	.s-titulos-main-menu{
		font-size:1rem;
	}
	.s-titulos-all-secs{
		font-size:2.5rem;
	}
	.s-titulos-all-widg{
		font-size:1.5rem;
	}
	.s-titulos-inter-seccion-rp{
		font-size:1.2rem;
	}
	.s-titulos-seccion-main{
		font-size:2rem;
	}	
	.s-titulos-seccion-main-sub{
		font-size:1.5rem;
	}
	.s-programacion-titulo-horario{
		font-size:1.2rem;
	}
	.s-programacion-locutor{
		font-size:1rem;
	}
}
@media screen and (max-width: 1175px){
	.p-play-plaza{
		font-size:1.3rem;
	}
}
@media screen and (max-width: 1102px){
	.s-titulos-main-menu{
		font-size:.9rem;
	}
}
@media screen and (max-width: 1034px){
	.s-titulos-main-menu{
		font-size:.8rem;
	}
	.p-play-plaza{
		font-size:1.2rem;
	}
}
@media screen and (max-width: 991px){
	.s-titulos-main-menu{
		font-size:2rem;
	}
	.s-titulos-seccion-main{
		font-size:1.5rem;
	}
	.s-titulos-all-widg{
		font-size:2rem;
	}
	.s-masviral-tit-widg{
		font-size:1.5rem;
	}
	.s-titulos-inter-seccion{
		font-size:1.2rem;
	}
	.rp-programa-name{
		font-size:1rem;
	}
	.rp-size-loc-hr{
		font-size:.8rem !important;
	}
	.rp-text-comunica{
		font-size:.8rem;
	}
	.rp-icono-comunica{
		font-size:1.3rem;
	}
	.s-programacion-wa-msj-live{
		font-size:.5rem;
	}
	.p-play-prog-bottom{
		font-size:1.3rem;
	}
}
@media screen and (max-width: 965px){
	.p-play-plaza{
		font-size:1rem;
	}
}	
@media screen and (max-width: 767px){
	.rp-programa-name{
		font-size:2.5rem;
	}
	.rp-size-loc-hr{
		font-size:2rem !important;
	}
	.rp-titulo-comunica{
		font-size:2rem;
	}
	.rp-text-comunica{
		font-size:1.5rem;
	}
	.rp-icono-comunica{
		font-size:3rem;
	}
	.s-titulos-all-widg{
		font-size:1.5rem;
	}
	.s-masviral-tit-widg{
		font-size:1.2rem;
	}
}
@media screen and (max-width: 767px){
	
}
@media screen and (max-width: 450px){
	.rp-size-loc-hr{
		font-size:1.5rem !important;
	}
}
@media screen and (max-width: 437px){
	.s-promos-btn-txt{
		font-size:.8rem;
	}
}
@media screen and (max-width: 430px){
	.s-programacion-titulo-horario{
		font-size:1rem;
	}
	.s-programacion-wa-msj-live{
		font-size:.8rem;
	}
}
@media screen and (max-width: 390px){
	.s-promos-btn-txt{
		font-size:.7rem;
	}
}
@media screen and (max-width: 390px){
	.s-promos-btn-txt{
		font-size:.5rem;
	}
}
@media screen and (max-width: 380px){
	.rp-programa-name{
		font-size:2rem;
	}
}
@media screen and (max-width: 360px){
	.rp-size-loc-hr{
		font-size:1.5rem !important;
	}
}


/* SHADOWS */
.fuente-shadow{
	text-shadow: 2px 2px 2px rgba(0,0,0,0.7);	
}
.opt-shadow-elem{
	box-shadow: rgba(189, 45, 162, 0.5) -3px 3px;	
}
.opt-shadow-elem-1{
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	/* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
}
.opt-shadow-txt{
	text-shadow: rgba(189, 45, 162, 0.5) -3px 3px;	
}
.smoke-titles{
	text-shadow: 0px 0px 5px #3c3c3c;
}
.shadow-abajo-btn{
	box-shadow: rgba(0, 0, 0) 0px 5px;	
}
.shadow-abajo-btn-white{
		
}
.shadow-abajo-btn-white:hover{
	box-shadow: rgba(250, 250, 250) 0px 5px;
}
.shadow-box-promo{
	-webkit-box-shadow: 3px -1px 10px 2px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px -1px 10px 2px rgba(0,0,0,0.75);
	box-shadow: 3px -1px 10px 2px rgba(0,0,0,0.75);
}	
/* -----------------------------------
:: 1.1 COLORES
------------------------------------*/
/* COLORS */
.color-black{
	color:#000;
}
.color-black-txt{
	color:#212121;
}	
.color-white{
	color:#FFF;
}
.color-grey{
	color:#cccccc;
}
.color-red{
	color:#ed1c24;
}
.color-blue-op{
	color:#172a38;
}
.color-ya-pal-1{
	color:#feac00;
}
.color-ya-pal-2{
	color:#b929a2;
}
.color-ya-pal-3{
	color:#3f73fd;
}
.color-ya-pal-4{
	color:#0fbdf8;
}
.color-ya-pal-5{
	color:#7614d0;
}
.color-ya-pal-6{
	color:#c7d83a;
}
.color-ya-pal-7{
	color:#44d9d7;
}

/* BACKGROUNDS */
.bg-white{
	background:#FFF;
}
.bg-black{
	background:#000;
}
.bg-sgray{
	background:#2d2d2d;
}
.bg-gray{
	background:#999;
}
.bg-rojo{
	background:#ed1c24;
}
.bg-gris{
	background:#0F0B0C;
}
.bg-azul{
	background:#26547c;
}
.bg-blue-op{
	background:#172a38;
}
.bg-gris-op{
	background:#d9d9d9;
}	
.bg-ya-pal-1{
	background:#feac00;
}
.bg-ya-pal-2{
	background:#b929a2;
}
.bg-ya-pal-3{
	background:#3f73fd;
}
.bg-ya-pal-4{
	background:#0fbdf8;
}
.bg-ya-pal-5{
	background:#7614d0;
}
.bg-wa-color{
	background-color: #00bc68;
}

.rainbow{
	width:200px;
	height:5px;
	/*
	background: -webkit-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);
	background: -moz-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
	background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
	background: -ms-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet,red);
	*/
	background: linear-gradient(to right, #88f99d,#4540b8,#ff049e,#ff3a32);
	background-repeat:repeat-x;
  
  /*
  -webkit-animation:go 1s linear infinite;
  -moz-animation:go 1s linear infinite;
  -o-animation:go 1s linear infinite;
  -ms-animation:go 1s linear infinite;
  animation:go 1s linear infinite;
  
  GRADIENTE rojo-rosa:	ff3a32 - ff049e
  negro - gris: 000000 - 2f2f2f
  f7ce99 - (990099) - 2b0837
  */
}


.deg-ver-blu{
	background: linear-gradient(to right, #02b567, #12a28d, #268db9);
}

.deg-mor-red{
	background: linear-gradient(to right, #2b0837, #990099, #fe0000);
}

.deg-red-mor{
	background: linear-gradient(to right, #fe0000, #990099, #2b0837);
}

.deg-black-red-v{
	background: linear-gradient(to bottom, #020101, #770824);
}


.deg-red-redp{
	background: linear-gradient(to right, #de3434, #972323, #801e1e);
}

.deg-blk-gryp{
	background: linear-gradient(to right, #171717, #2f2f2f, #3e3e3e);
}

.deg-org-mor{
	/*
	background: -webkit-linear-gradient(to right, #f7ce99, #2b0837);
	background: -moz-linear-gradient(to right, #f7ce99, #2b0837);
	background: -o-linear-gradient(to right, #f7ce99, #2b0837);
	background: -ms-linear-gradient(to right, #f7ce99, #2b0837);
	*/
	background: linear-gradient(to right, #f7ce99, #990099, #2b0837);
	/*
	background-repeat:repeat-x;
	height:5px;
	*/
}
.deg-red-ros{
	background: -webkit-linear-gradient(to right, #ff3a32, #ff049e);
	background: -moz-linear-gradient(to right, #ff3a32, #ff049e);
	background: -o-linear-gradient(to right, #ff3a32, #ff049e);
	background: -ms-linear-gradient(to right, #ff3a32, #ff049e);
	background: linear-gradient(to right, #ff3a32, #ff049e);
	
	background-repeat:repeat-x;
	height:1px;
}
.deg-red-ros-tr{
	background: -webkit-linear-gradient(to right, #ff3a32, #ff049e);
	background: -moz-linear-gradient(to right, #ff3a32, #ff049e);
	background: -o-linear-gradient(to right, #ff3a32, #ff049e);
	background: -ms-linear-gradient(to right, #ff3a32, #ff049e);
	background: linear-gradient(to right, #ff3a32, #ff049e);
	
	background-repeat:repeat-x;
	height:3px;
}
.deg-ros-red{
	background: -webkit-linear-gradient(to right, #ff049e, #ff3a32);
	background: -moz-linear-gradient(to right, #ff049e, #ff3a32);
	background: -o-linear-gradient(to right, #ff049e, #ff3a32);
	background: -ms-linear-gradient(to right, #ff049e, #ff3a32);
	background: linear-gradient(to right, #ff049e, #ff3a32);
	background-repeat:repeat-x;
	height:1px;
}
.deg-red-dark{
	background: -webkit-linear-gradient(to right, #fe0000, #580000);
	background: -moz-linear-gradient(to right, #fe0000, #580000);
	background: -o-linear-gradient(to right, #fe0000, #580000);
	background: -ms-linear-gradient(to right, #fe0000, #580000);
	background: linear-gradient(to right, #fe0000, #580000);
	background-repeat:repeat-x;
	height:3px;
}

.deg-neg-gris{
	background: linear-gradient(180deg, #000000, #2f2f2f);
}
/*
.deg-red-dark{
	background: linear-gradient(to right, #fe0000, #580000);	
	height:2px;
}
*/
@-webkit-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-moz-keyframes go{
  0%{background-position:0;}
  50%{background-position:100px 0;}
  100%{background-position:200px 0;}

}
@-o-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@-ms-keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}
@keyframes go{
  0%{background-position:0;}
  100%{background-position:200px 0;}

}

/*EFECTOS */
.ef-blur{
	/*filter: blur(8px) inherit; 
	-webkit-filter: blur(8px) inherit;
	*/
	backdrop-filter: opacity(20%);
}


/* -----------------------------------
:: 1.2 MODULOS
------------------------------------*/

/*VIDEO*/
.portada-caption{
	left:50%;
	bottom:5%;
	top:auto;
	transform:translate(-50%,0);
	position:absolute;
	z-index:2;
	width:100%;
	text-align:left;
	padding:0 5%;
}
.portadas-text-titulo{
	color:#FFF;	
	text-transform:uppercase;
	outline-color:#FFF;
	outline-style:none;
	outline-width:0px;	
	font-stretch:100%;	
	text-align:left;
	margin:0;	
}
.portadas-text-titulo a{
	background-color:#26547c;
	box-decoration-break:clone;
	box-shadow:#26547c 10px 0px 0px 0px, #26547c -10px 0px 0px 0px;
	color:#FFF;		
	-webkit-transition-delay:0s;
			transition-delay:0s;
	-webkit-transition-duration:0.2s;
			transition-duration:0.2s;
	-webkit-transition-property:color;
			transition-property:color;
	-webkit-transition-timing-function:ease;
			transition-timing-function:ease;
}
.portadas-text-titulo a:hover{
	text-decoration:underline;	
	-webkit-transition-delay:0s;
			transition-delay:0s;
	-webkit-transition-duration:0.2s;
			transition-duration:0.2s;
	-webkit-transition-property:color;
			transition-property:color;
	-webkit-transition-timing-function:ease;
			transition-timing-function:ease;
}
.portada-video-img-prin{
	width:100%;
	height:450px;
}
.portada-video-img-sec{
	width:100%;
	height:200px;
	position:relative;
}
.video-play-prin{
	position:absolute;
	top:50%; 
	left:50%;
	z-index:3;
	pointer-events:none;
	background:#b929a2;
	width:75px; 
	height:75px; 
	text-align:center;
	border-radius:50%; 
	padding-top:24px; 
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
.video-play-prin > i{
	color:#feac00; 
	font-size:30px;	
}



/* -----------------------------------
:: 1.3 ENCABEZADOS STYLE 
------------------------------------*/
.w-encabezado{
	width:800px;
}

h1.titulos-style-line{
	position:relative;
	margin-top:0px;
	text-align:center;	
}
.titulos-style-line {
  margin-top: 0;
}
.titulos-style-line:before {
  content: "";
  display: block;
  border-top: solid 1px black;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.titulos-style-line span {
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 5;
}


.no-border{
	border:none !important;
}
.no-radius{
	border-radius:0;
}
.portada-logo{
	height:85px;
}
.portada-logo-movil{
	height:70px;
}


/* -----------------------------------
:: 2.0 HEADER STYLE
------------------------------------*/
.header {
	/*
	padding-top: .8rem;
	padding-bottom: .8rem;
	*/
	/*background:#000000;*/
}
.header .nav-link,
.header .navbar-brand,
.header .navbar-toggler i {
  color: #FFFFFF;
  transition: color 0.2s linear;
}
.header .nav-link:hover,
.header .navbar-brand:hover,
.header .navbar-toggler i:hover {
  color: #ed1c24;
}
.header .navbar-brand {
  font-size: 1.8rem;
}
.header .navbar-toggler {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
}
.header .navbar-toggler i {
  font-size: 1.5rem;
}
.header.headroom {
  transition: all 0.2s linear;
}
.header.headroom--top, .header.headroom--top.headroom--pinned {
  background-color: #000000;
}
.header.headroom--not-top.headroom--pinned {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgba(255, 255, 255, 0.9);
}
.header.headroom--not-top.headroom--pinned .nav-link,
.header.headroom--not-top.headroom--pinned .navbar-brand,
.header.headroom--not-top.headroom--pinned .navbar-toggler i {
  color: black;
}
.header.headroom--pinned {
  transform: translateY(0%);
}
.header.headroom--unpinned {
  transform: translateY(-100%);
}

.offcanvas .fa-close {
  font-size: 1.8rem;
}
.offcanvas.show .row {
  padding-top: 2rem !important;
}
.offcanvas.show .nav-link {
  color: black;
}

.cover-image {
  min-height: 600px;
  color: white;
  background: url("") no-repeat center;
  background-size: cover;
}
.cover-image__title {
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.cover-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%);
}

@media (max-width: 767px) {
  p.lead {
    font-size: 1rem;
  }
}
/*
@media (min-width: 1200px) {
  [class*=container] {
    max-width: 1000px;
  }
}
*/
.mouse {
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 47px;
  border: 2px solid white;
  border-radius: 14px;
}
.mouse .mouse-scroll {
  top: 10px;
  left: 11px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  -webkit-animation: mouse 1.5s ease-out infinite;
          animation: mouse 1.5s ease-out infinite;
}

@-webkit-keyframes mouse {
  0% {
    top: 4px;
    opacity: 0;
    height: 4px;
  }
  50% {
    top: 8px;
    opacity: 1;
    height: 10px;
  }
  to {
    top: 12px;
    opacity: 0;
    height: 4px;
  }
}

/* RAINBOW EFFECT */

/* Estilos para la línea rainbow */
.rainbow-container {
	position: relative;
	height: 4px;
	width: 100%;
	overflow: hidden;
}
.rainbow-bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
}

/* Overlay rojo que se mostrará gradualmente con el scroll */
.red-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	
	/* Inicialmente no cubre nada */
	background-color: red;
	transition: width 0.1s ease;
	z-index: 1;
}

/* Máscara para el haz de luz - solo muestra la parte que cruza el rojo */
.neon-mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	/* Se ajustará con el scroll */
	z-index: 2;
	overflow: hidden;
}

/* Efecto de luz neón que recorre toda la barra */
.neon-light {
	position: absolute;
	top: 0;
	height: 100%;
	width: 20%;
	background: linear-gradient(to right,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.9) 50%,
			rgba(255, 255, 255, 0) 100%);
	filter: blur(1px);
	animation: neonLight 1.5s linear infinite;
	pointer-events: none;
	
	/* El haz recorre toda la anchura de la barra */
	left: -20%;
}



@keyframes neonLight {
	0% {
		left: -20%;
	}
	100% {
		left: 100%;
	}
}

/* ANIMACION FRECUENCIA */
	.audio-container {
		display: flex;
		align-items: center;
		justify-content: center;
		/*width: 400px;*/
		width: 100%;
		height: 100px;
		gap: 4px;
    }
    
    .bar {
      background-color: #ff0000;
      border-radius: 3px;
      width: 10px;
      height: 70px;
      animation-name: sound;
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    
    .bar:nth-child(1) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(2) {
      animation-duration: 0.7s;
    }
    
    .bar:nth-child(3) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(4) {
      animation-duration: 0.3s;
    }
    
    .bar:nth-child(5) {
      animation-duration: 0.5s;
    }
    
    .bar:nth-child(6) {
      animation-duration: 0.3s;
    }
    
    .bar:nth-child(7) {
      animation-duration: 0.6s;
    }
    
    .bar:nth-child(8) {
      animation-duration: 0.3s;
    }
    
    .bar:nth-child(9) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(10) {
      animation-duration: 0.7s;
    }
    
    .bar:nth-child(11) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(12) {
      animation-duration: 0.5s;
    }
    
    .bar:nth-child(13) {
      animation-duration: 0.6s;
    }
    
    .bar:nth-child(14) {
      animation-duration: 0.5s;
    }
    
    .bar:nth-child(15) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(16) {
      animation-duration: 0.65s;
    }
    
    .bar:nth-child(17) {
      animation-duration: 0.35s;
    }
    
    .bar:nth-child(18) {
      animation-duration: 0.55s;
    }
    
    .bar:nth-child(19) {
      animation-duration: 0.45s;
    }
    	
    .bar:nth-child(20) {
      animation-duration: 0.5s;
    }
	
	/* */
	/*
	.bar:nth-child(21) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(22) {
      animation-duration: 0.65s;
    }
    
    .bar:nth-child(23) {
      animation-duration: 0.35s;
    }
    
    .bar:nth-child(24) {
      animation-duration: 0.55s;
    }
    
    .bar:nth-child(25) {
      animation-duration: 0.45s;
    }
    
    .bar:nth-child(26) {
      animation-duration: 0.5s;
    }
	.bar:nth-child(27) {
      animation-duration: 0.4s;
    }
    
    .bar:nth-child(28) {
      animation-duration: 0.65s;
    }
    
    .bar:nth-child(29) {
      animation-duration: 0.35s;
    }
    
    .bar:nth-child(30) {
      animation-duration: 0.55s;
    }
    
    .bar:nth-child(31) {
      animation-duration: 0.45s;
    }
    
    .bar:nth-child(32) {
      animation-duration: 0.5s;
    }
	*/
    
    @keyframes sound {
      0% {
        height: 10px;
        opacity: 0.7;
      }
      100% {
        height: 100px;
        opacity: 1;
      }
    }
