/* Large computers: from 1080-1400px*/

@media only screen and (max-width:20000px){
     .social-links-mobile{
        display: none;
    }
    
}
/* Large computers: from 1080-1400px*/

@media only screen and (max-width:1400px){
     .social-links-mobile{
        display: none;
    }
    
}

/* Small tablet to big tablet(portrait) and small computer: from 768-1079px*/

@media only screen and (max-width:1079px){
    
    .social-links-mobile{
        display: none;
    }
    
    .header-nubenegra{
    margin: 20px 0 0 0;
    }
    
    /*Margen bajo la cabecera, bajo la main-nav*/
    .box{
    margin-bottom: 10px; 
    }

    .btn-navega{
    width: 25%;
    margin: 0 0 0 0;
    }
    
    .disc-title-banner{
    padding: 0 0;
    }
    
h1 {font-size: 120%;}
h2 {font-size: 100%;}
h3 {font-size: 100%;
    margin: 0 15%;
    } 
h5 {font-size: 75%;
    } 
    
    .artist-name{
    padding:6px 10px 0 10px;
    }
    .disc-title{
    padding: 2px 0 0 0;
    }    
    .disc-nav {
    padding:9px 5px 2px 5px;
    }

    .disc-nav ul {
    padding: 00;
    }

    .disc-nav li {
    margin: 0 5px;
    font-size: 75%;
    }

    .col-portada {
        width: 100%; 
        text-align: center;
        margin:40px 0;
    }

    .col-portada img{
        margin:0;  
    }
        
    .portada {
        display: inline-block;
        float: left;
        width: 100%;
        text-align: center;
        padding:0 10px 0 0;
        margin:0 0 20px;

    }
    .portada img{
        padding: 0px;
        background-color: #9d9d9d;
        border-radius: 3%;
    }
    .box-reproductor{
        display: inline-block;
        float: left;
        text-align: right;
        padding:0 10px 0 10px;
        width: 50%;
        }    
    
    .box-reproductor:last-child{
        text-align: left;
        } 

    iframe{
        margin: 0;
    }

    .texto{
        width:100%;
        margin:0 0 10px 0;

    }
   
    /*Margen a los lados del texto ppal. estaba en 30px*/
    .long-copy{
        margin:30px 20% 60px 20%;
        font-size: 85%;

    }
     /*Margen a los lados del texto ppal. estaba en 30px*/
    .long-copy:first-child{
        margin:0 20% 60px 20%;
        font-size: 85%;
    } 
footer{
    padding: 15px 0;
}

}

/* PHONES smaller than the ipad and small tablets: from 481-767px*/

@media only screen and (max-width:767px),(max-device-width : 767px){

    .social-links-mobile{
        display: inline;
    }
    
    .header-icon{
    width: 100%;
    height:auto;
    margin:2px 0 0 0;
    padding: 0;
    text-align: center
}
    .header-icon img{
        width: 100%;
    }
    
    .icono-nn img{
    width: 10%;
    }
    
    
    .header-nubenegra{
    width: 80%;
    margin: 5px 10% 0 10%;
    }
    
    .header-nubenegra img{
    width: 90%;
    
    }
    
    /*----social mobile---*/
    
    .header-social{
        display:none;
    }
    .btn-social-mobile-left{
        margin-left: 5%;
        display: inline-block;
        float:left;
        width: 10%;
        height:auto;
    }
    
     .btn-social-mobile-left img{
        margin-top: 15%;
        width: 70%;
    }
    
    .btn-social-mobile-right{
        margin-right: 5%;
        display: inline-block;
        float:right;
        width: 10%;
        height:auto;
    }
    .btn-social-mobile-right img{
         margin-top: 15%;
         width: 70%;
    }
    
    
    .box{
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px; /*Margen bajo la cabecera, bajo la main-nav*/
    padding: 0;
    }

    .main-navi-img{
       width:72%;
        margin:0 14%;
    }
    .vacio{
        width: 5%;
    }
    .vacio-detras{
        width: 5%;
    }

    .btn-navega{
    width: 25%;
    }
    
    
h1 {font-size: 110%;}
h2 {font-size: 80%;}
h3 {font-size: 90%;
    margin: 0 15%;
    } 
h5 {font-size: 75%;
    line-height: 150%;
    padding: 0 3%;
    } 
    
    .titulo-artista{
    width:30%;
    }
    .artist-name{
    padding:7px 0 0 10px;
    text-align: left;
    }
    .disc-title{
    width:40%;  
    padding: 2px 0 0 0;
    }    
    .disc-nav {
    width:30%;
    padding:7px 10px 2px 0;
    }
    .disc-nav-btns{
        text-align: right;
    }

    .disc-nav ul {
    padding: 0;
    }

    .disc-nav li {
    margin: 0 0 0 5px;
    font-size: 65%;
    }

    .col-portada {
        margin:30px 0;
    }

    .col-portada img{
        width: 250px;
        height: auto;     
    }
        
    .portada {
        width: 100%;
        text-align: center;

    }
    .box-reproductor{
        text-align: left;
        padding:10px 7%;
        width: 100%;
        }    
iframe{
        margin: 0;
    }

    .texto{
        margin:0 0 20px 0;

    }
   
    .long-copy{
        margin:20px 7% 40px 7%;/*Margen a los lados del texto ppal. estaba en 30px*/
        font-size: 85%;
    }
    
     .long-copy:first-child{
        margin:0 7% 40px 7%;/*Margen a los lados del texto ppal. estaba en 30px*/
        font-size: 85%;
    }   
footer{
        padding: 20px 0;
        height: 250px;/*no estaba, por defecto 172px*/
        
        
    }
    .footer-nav li{
    margin: 10px 25px ;
}
    .footer-icon img{
        padding: 10px 0;
        width: 12%;
    }
    
    .footer-policies li{
    margin: 20px 50px;
    font-size:90%;
}
    footer p,
    blockquote{margin:0;
        padding: 5px 0;
}

}


/* SMALL PHONES: from 0-480px*/

@media only screen and (max-width:480px){
    .social-links-mobile{
        display: inline;
    }
    
    .span-3-of-3 {
		width: 100%; 
	}
	.span-2-of-3 {
		width: 100%; 
	}
	.span-1-of-3 {
		width: 100%;
	}
    .span-5-of-5 {
		width: 100%; 
	}
	.span-4-of-5 {
		width: 100%; 
	}
	.span-3-of-5 {
		width: 100%; 
	}
	.span-2-of-5 {
		width: 100%; 
	}
	.span-1-of-5 {
		width: 100%; 
	}
.social-links-mobile{
        display: inline;
    }
    
.header-icon{
    width: 100%;
    height:auto;
    margin:2px 0 0 0;
    padding: 0;
    text-align: center
}
.header-icon img{
    width: 100%;
    }
    
.icono-nn img{
    width: 15%;
    }
    
    
.header-nubenegra{
    width: 80%;
    margin: 5px 10% 0 10%;
    }
    
.header-nubenegra img{
    width: 100%;
}
.main-navi{
    width: 90%;
    margin: 0 5%;
    padding:0; 
       
    }
    .main-navi-img{
    width:90%;
        margin:0 5%;
    }
    .vacio{
        display: none;
    }
    .vacio-detras{
        display: none;
    }

.artist-name{

    padding:10px 0 0 0;
    font-size: 110%;
    text-align: center;
    }
    
.disc-title{

    padding: 10px 0 0 0;
    }    
    .disc-nav {
    padding:10px 0 5px 0;
    }
    .disc-nav-btns{
        text-align: center;
    }

    .disc-nav li {
    font-size: 80%;
    }

 .col-portada {
      text-align: center;
        margin:30px 0;
    }

    .col-portada img{
        text-align: center;
        width: 250px;
        height: auto;  
    }
        
    .portada {
        width:100%;
        margin: 0 0 10px 0;
        text-align: center;
        padding: 0 0 0 0;
    }
    .portada img{
        padding: 0;            

    }
    .box-reproductor{
        float: left;
        text-align: center;
        padding:10px 0 0 0;
        width: 100%;
        } 
    .box-reproductor:last-child{
        text-align: center;
        padding:10px 0 10px 0;
        }  
     
    .mobil-no{
            display:none;
    }
footer{
    height: 370px;
  
}
    .footer-navi{
    margin: 0;
    padding: 0;
}
    .footer-navi li{
    width: 100%;
    margin: 5px 0;
    padding: 15px;
    
}
}