@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700|Lato:400,700);
@import url("https://fonts.googleapis.com/css?family=Bungee+Shade");

:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #181717;
}



@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

/****created and maintained  @dasdezine****/

html{
	background: #070a21; overflow-x: hidden;
}

body {
    overflow: hidden;
    color: #070a21;
}

p {
    font-size: 20px;
}

p.small {
    font-size: 16px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
    
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    }

.h3_{
    
}

hr.star-light,
hr.star-primary {
    margin: 20px auto 30px;
    padding: 0;
    max-width: 250px;
    border: 0;
    border-top: solid 5px;
    text-align: center;
}

hr.star-light:after,
hr.star-primary:after {
    content: "\f197";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-family: FontAwesome;
    font-size: 2em;
}

hr.star-light {
    border-color: #212121;
}

hr.star-light:after {
    color: #212121;
    background-color: #FDD200;
}

hr.star-primary {
    border-color: #212121;
}

hr.star-primary:after {
    color: #212121;
    background-color: #fff;
}

.img-centered {
    margin: 0 auto;
}

.header {

    
     
    

}

header .container {
    padding-top: 100px;
    padding-bottom: 50px;
}

header img {
    display: block;
    margin: 0 auto 20px;
}

header .intro-text .name {
    padding-top: 20px;
    display: block;
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 700;
}

header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}

@media(min-width:768px) {
    header .container {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    header .intro-text .name {
        font-size: 4.75em;
    }

    header .intro-text .skills {
        font-size: 1.75em;
    }

    .header{

    }
}

@media(min-width:1024px) {
    header {
        
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center 50px;
        width: 100%;
       height: 300px;
       object-fit: cover;
       object-position: bottom;
    }
    header .container {
        padding-top: 100px;
        padding-bottom: 200px;
    }

    header img.img-bigScreen {
        display: none;
    }

    hr.star-light:after {
    background-color: #F7CC01;
}
}

@media(min-width:1366px) {
    header {
        background-position: center 10px; 
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: bottom;
    }
}

@media (min-width: 1px) and (max-width: 300px){

    

}

@media (min-width: 301px) and (max-width: 350px){

    


}

@media (min-width: 351px) and (max-width: 400px){

   


}

@media (min-width: 401px) and (max-width: 450px){

    

}

@media (min-width: 401px) and (max-width: 450px){

    


}

@media(max-width:768px) {


    .navbar-fixed-top {
        right: 10px;
        padding: 10px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;


    }

    .navbar-color {
    background-color: none;
      }



    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }

    
}

.navbar {
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 800;
}

.navbar-color {
    background-color: transparent;
}

.navbar a:focus {
    outline: 0;
}


.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar-default .navbar-toggle {
    border-color:#fff;
    border:3px solid #fff;
    background: red;
}

.navbar-default .navbar-toggle:hover {
    background-color:#02479f;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color:#fff;
}

.navbar-default .navbar-nav>li>a {
    color:#FF2C75;
    font-family: monospace;
    font-size: 1.6em;
     -webkit-text-stroke: 0px #f1f1f1; /* width and color */

}
.navbar-default .navbar-nav>li>a:hover {
    color: #212121;
}

.navbar-default .navbar-nav>li:hover {
    background: #fff;
}

.navbar-default .navbar-nav>li {
    background: #212121;
}

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus
{
    color: #fff;
    background-color: #02479f;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

section {
    padding: 50px 0;
    background: #070a20;
    color: white;
}

section h2 {
    margin: 0;
    font-size: 3em;
}

section.success {
    color: #fff;
    background: #fad663;
}

@media(max-width:767px) {
    section {
        padding: 25px 0;
    }

    section.first {
        padding-top: 75px;
    }
}

@media(min-width:767px) {
    #portfolio .col-sm-3 {
        padding-right:0;
        padding-left: 0;
    }
}

}

#myLikes .portfolio-item,
#about .about-item {
    text-align: center;
}
#myLikes .portfolio-item p,#about .about-item p {
    
    text-align: center;
    line-height: 1.5;
    padding-bottom: 50px;
}
#myLikes .portfolio-item-Three p, #about .about-item-Three p {
    padding-bottom: 5px;
}

#myLikes .portfolio-item header, #about .about-item header {
    background: none;
}

.about-item .img-responsive {
    margin: 0 auto;
}

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link,
#myLikes .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#myLikes .portfolio-link .fa {
    font-size: 10em;
    padding: 10px 15px;
    color:#212121;
    border-radius:6px;
    border-radius:5px 20px 5px;;
    background-color:#F7CC01;
}

.seeMore-btn .fa, #portfolio .fa, .contact-btn .fa {
    padding-right: 5px;
}

#portfolio * {
    z-index: 2;
}

hr.loc-hr {
    border-top: 2px dashed #212121;
    max-width: 85%;
}

@media(min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
    }
}

.btn-lg {
    padding: 5px 20px;
    line-height: 1.5;
}

div.seeMore-btn {
    margin-top: 25px;
}

div.seeMore-btn .btn-outline {
    background: #fdd200;
}

div.contact-btn .btn-outline {
    background: #d2eae3;
}

div.seeMore-btn .btn-outline, div.contact-btn .btn-outline {
    transition: all .3s ease-in-out;
}

div.seeMore-btn .btn-outline:hover, div.contact-btn .btn-outline:hover {
    background: #fff;
} 

.btn-outline {
    margin-top: 15px;
    border: solid 2px #212121;
    border-radius: 20px;
    font-size: 20px;
    color: #212121;
    background:#fff;
    transition: all .3s ease-in-out;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
    color: #212121;
    background: #fdd200;
}

/*******btn double line style starts***********/

@media(min-width:767px) {

    div.btn-style {
        position: relative;
        z-index:1;
    }

    div.btn-style .btn-styleLine {
        padding:0 0;
        display: inline-block;
    }

    div.seeMore-btn .btn-styleLine {
        background: transparent;
    }

    div.contact-btn .btn-styleLine {
        background: transparent;
    }

    .double-line:before {
        content: "";
        border-top: 2px solid #212121;
        position: absolute;
        top:50%;
        left:25%;
        width: 50%;
        z-index: -1;
    }

    .double-line:after {
        content: "";
        border-bottom: 2px solid #212121;
        position: absolute;
        bottom:25%;
        left:30%;
        width: 40%;
        z-index: -1;
    }
}

@media(min-width:1024px) {
    #portfolio .double-line:before {
        left:32%;
        width:35%;
    }

    #portfolio .double-line:after {
        left:35%;
        width: 30%;
    }
}

@media(min-width:1024px) {
    div.seeMore-btn {
        position: relative;
        top:150px;
        left:10px;
    }
}

/*******btn double line style ends***********/

#contact {
    background: #d2eae3;
}
#contact hr.star-primary:after {
    background-color: #d2eae3;
}

#contact .form-padding {
    padding:0px 10px;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
}

.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease,opacity .3s ease;
    -moz-transition: top .3s ease,opacity .3s ease;
    -ms-transition: top .3s ease,opacity .3s ease;
    transition: top .3s ease,opacity .3s ease;
}

.floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee;
}

.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: #697571;
}

form .floating-label-form-group {
    background: #fad663;
    border: 2px solid #212121;
    border-radius: 6px;
}

footer {
    color: #fff;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-above {
    padding-top: 50px;
    background-color: #070a20;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-below {
    padding: 25px 0;
    background-color: #233140;
}

.btn-social {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
}

.btn:focus,
.btn:active,
.btn.active {
    outline: 0;
}

.scroll-top {
    z-index: 1049;
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
}

.scroll-top .btn {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 28px;
}

.scroll-top .btn:focus {
    outline: 0;
}

/*******codigo extra csss***********/

.anuncios{
    background: #070a20;
    position: relative;
}



.anuncio_hijo{

    position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}

.programas{

    text-align: center;
    font-family: sans-serif;
    margin: 5%;
    letter-spacing: 4px;

}

.img_programas{

    width: 100%;
    height: 100%;
    box-shadow: rgba(1, 71, 159, 0.4) 5px 5px, 
    			rgba(1, 71, 159, 0.3) 10px 10px, 
    			rgba(1, 71, 159, 0.2) 15px 15px, 
    			rgba(1, 71, 159, 0.1) 20px 20px, 
    			rgba(1, 71, 159, 0.05) 25px 25px;
    


}

.boton_bluetooth{

  width: 100%;
  height: 12%;
  background: blue;
  box-shadow: 0 8px 30px 0 rgba(237, 39, 39); 
  padding: 2px;
  padding-left: 12px;
  border-radius: 6px;


  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulse 1s infinite;
    
}

.boton_player {
  position: fixed;
  cursor: pointer;
  bottom: 25px;
  left: 22px;
  display: block;
  width: 70px;
  height: 70px;
  padding: 0;
  margin: 0;
  z-index: 1002;
  overflow: hidden;
  box-shadow: 0 8px 30px 0 rgba(0,0,0,0.3);
  background-color: red;
  animation: border-transform 7s linear infinite;
  transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 1100ms ease,
              width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
              height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: rgba(255, 255, 255, 0.56) 0px 12px 30px 4px;
}

/*
 <nav style="" class="navbar navbar-default navbar-color navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li  class="page-scroll">
                        <a  href="#page-top">Inicio</a>
                    </li>
                    <li class="page-scroll">
                        <a   href="#myLikes">
                             Podcast</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">Locutores</a>
                    </li>
                    <li class="page-scroll">
                        <a style="" href="#contact">Contacto</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    */

    /**********slider***************/
    swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {

      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;

    }

    swiper-container {
      margin-left: auto;
      margin-right: auto;
    }

     .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }

    .sombras{

        box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, 
                    rgba(240, 46, 170, 0.3) 10px 10px, 
                    rgba(240, 46, 170, 0.2) 15px 15px, 
                    rgba(240, 46, 170, 0.1) 20px 20px, 
                    rgba(240, 46, 170, 0.05) 25px 25px;


    }

    .neon {
	color: #fff;
	margin-top: 30%;
	text-shadow:
		0 0 5px rgba(0,178,255,1),
		0 0 10px rgba(0,178,255,1),
		0 0 20px rgba(0,178,255,1),
		0 0 40px rgba(38,104,127,1),
		0 0 80px rgba(38,104,127,1),
		0 0 90px rgba(38,104,127,1),
		0 0 100px rgba(38,104,127,1),
		0 0 140px rgba(38,104,127,1),
		0 0 180px rgba(38,104,127,1);
}

.spotify{

	margin-left: 50%;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 160px;
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    font-family: 'sans-serif';
    padding: -20px 8px;
    color: #fff;
    background-color: #1ED760;
    height: 50px;
    -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
    box-shadow: rgba(255, 255, 255, 1.12) 0px 2px 4px 0px, 
                rgba(255, 255, 255, 1.32) 0px 2px 16px 0px;
           




                
}

.spotify:hover{
	opacity: 0.7;

}

.spotify:active{
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, 
	rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, 
	rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, 
	rgba(0, 0, 0, 0.06) 0px 2px 1px, 
	rgba(0, 0, 0, 0.09) 0px 4px 2px, 
	rgba(0, 0, 0, 0.09) 0px 8px 4px, 
	rgba(0, 0, 0, 0.09) 0px 16px 8px, 
	rgba(0, 0, 0, 0.09) 0px 32px 16px;
	transform: scale(1.1);

}

.spotify:active:after{
	background-color: #1ED760;
}

.icono{
	font-size: 4em;
	color: #fff;
}

.icono:active{

	transform: scale(1);
	color:#03A9F4;

}

.icono:hover{

	transform: scale(1);
	color: #FF5722;
}

.icono:active:after{
	color:#03A9F4;
}


.glitch {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}



.swiper {
      width: 100%;
      height: 80%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 70%;
      height: 70%;
      object-fit: cover;
    }

    .swiper-slide {
      width: 60%;
    }





  

/*Escuchando*/

.onair{

 
  

}

/*onair*/

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.onair {

  width: 80px;
  height: 30px;
  background: #DBD6D5;
  color: #433F3E ;
  font-family: 'sans-serif';
   position: fixed;
  bottom:10px;
  left: 43%;
  z-index: 1002;
  box-shadow: 0 8px 30px 0 rgba(237, 39, 39 
);
  background-color: #E4DDDC;
  display:flex;
  padding: 2px;
  padding-left: 12px;