@charset "UTF-8";

/*
///////////////////////////////  GENERIC ///////////////////////////////
*/

body{
	margin:auto;
	font-family: 'Roboto', sans-serif;;
	font-weight: 100;
    background-color: #000000;
    color:#ffffff;
    width: 1680px;
    
}

a{
    color:#ffffff;
    text-decoration: none;
}

h2{
    font-size: 32px;
    font-weight:900;
    
}

/*
///////////////////////////////  MENU ///////////////////////////////
*/

header{
	width:1%; 
	background:#000000; 
	height:60px; 
	line-height:60px;
	
}

.hamburger{
  background: none;
  position: absolute;
  top: 40px;
  
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:6.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}

.cross{
  background:none;
  position:absolute;
  top:40px;
 
  padding:7px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:6.4em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}

.menu{
    z-index:1000000; 
    font-weight:bold; 
    width:100%; 
    background:#f1f1f1;  
    position:absolute; 
    text-align:center; 
    font-size:12px;
}

.menu ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none;
}

.menu li {
    display: block;   
    padding:30px 0 30px 0; 
    border-bottom:#dddddd 1px solid;
    font-size: 24px;
    font-weight: 700;
}

.menu li:hover{
    display: block;    
    background:#ffffff; 
    padding:30px 0 30px 0; 
    border-bottom:#dddddd 1px solid;
}

.menu ul li a { 
    text-decoration:none;  
    margin: 0px; 
    color:#666;}

.menu ul li a:hover {  
    color: #666; 
    text-decoration:none;
}

.menu a{
    text-decoration:none; 
    color:#666;
}

.menu a:hover{
    text-decoration:none; 
    color:#666;
}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}

header{
    display:inline-block; 
    font-size:12px;
}

span{
    padding-left:20px;
}


/*
///////////////////////////////  CFAPSALERA ///////////////////////////////
*/


#cabecera{
    display: flex;
   
}

#logo{
    padding: 20px;
    width: 120px;
}
#logo img{
    height: 100px;
}

#pagina{
    padding: 20px 0;
    width: 80%;
}
#pagina .pagina{
    font-size: 72px;
    font-weight: 900;
}



/*
///////////////////////////////  PODCASTS ///////////////////////////////
*/


#podcasts{
    display: flex;
    padding: 40px;
}

#llista{
    width: CALC(((100% )/ 3 )*2);
    overflow:hidden;
}

#darrers{
    width: CALC((100% )/3);
    overflow:hidden;
}

#llista #llista-cont{
    display:flex;
    width: 100%;
    flex-direction: row; 
    flex-wrap:  wrap;
}

#darrers #darrers-cont{
   width: 100%;
}

#llista #llista-cont .post-col{
    width: 50%;
    padding: 20px 0;
}

#darrers #darrers-cont .post-col{
    width: 100%;
    padding: 20px 0;
}

#llista #llista-cont .podcast{
    width:90%;
    background:#1a1a1a;
    display:flex;
    border-radius: 25px;
    justify-content:space-between;
}

#darrers #darrers-cont .podcast{
    width:90%;
    background:#1a1a1a;
    display:flex;
    border-radius: 25px;
    justify-content:space-between;
}

#llista #llista-cont .podcast .portada{
    width: 100px;
    padding: 20px;
}

#llista #llista-cont .podcast .portada img{
    width: 100%;
}

#darrers #darrers-cont .podcast .portada{
    width: 100px;
    padding: 20px;
}

#darrers #darrers-cont .podcast .portada img{
    width: 100px;
    height:100px;
    border-radius: 50% ;
}

#llista #llista-cont .podcast .dades{
    width: CALC(100% - 160px);
    padding: 10px;
}

#darrers #darrers-cont .podcast .dades{
    width: CALC(100% - 160px);
    padding: 10px;
}

#llista #llista-cont .podcast .dades .titol{
    font-weight: 700;
    font-size: 16px;
    padding: 10px 0;
}

#llista #llista-cont .podcast .dades .cuantos{
    font-weight: 400;
    font-size: 14px;
    padding: 5px 0;
}

#llista #llista-cont .podcast .dades .text{
    font-weight: 100;
    font-size: 12px;
    line-height: 1.4;
}

#darrers #darrers-cont .podcast .dades .titol{
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
}

#darrers #darrers-cont .podcast .dades .cuantos{
    font-weight: 400;
    font-size: 16px;
    padding: 5px 0;
}

#darrers #darrers-cont .podcast .dades .text{
    font-weight: 100;
    font-size: 12px;
    line-height: 1.4;
}


#podcast{
    padding:20px;
}

#podcast .int-podcast{
    padding:20px;
    background:#1a1a1a;
   
    border-radius: 25px;
   
}

#podcast .podcast{
    display:flex;
     justify-content:space-between;
}

#podcast .int-podcast .portada{
    width: 260px;
}

#podcast .int-podcast .portada img{
    width: 100%
        
}

#podcast .int-podcast .dades{
    width: CALC(100% - 280px);
    padding-top: 20px;
}

#podcast .int-podcast  .dades .creador{
    font-weight: 400;
    font-size: 22px;
    padding: 5px 0;
}

#podcast .int-podcast  .dades .cuantos{
    font-weight: 400;
    font-size: 18px;
    padding: 5px 0 10px 0;
}

#podcast .int-podcast  .dades .text{
    font-weight: 100;
    font-size: 16px;
    line-height: 1.4;
}

#podcast .episodis{
    margin-top: 40px;
}

#podcast .episodis .episodis_int{
    display:flex;
    justify-content:space-between; 
    margin-bottom: 40px;
}

#podcast .episodis .episodis_int .portada_episodi{
    width: 240px;
}
#podcast .episodis .episodis_int .portada_episodi img{
    height:120px;
}

#podcast .episodis .episodis_int .player{
    width: 300px;
}
#podcast .episodis .episodis_int .dades_episodi{
    width:CALC(100% - 560px);
}

#podcast .episodis .episodis_int .dades_episodi .titol{
    font-weight: 700;
    font-size: 18px;
}

#podcast .episodis .episodis_int .dades_episodi .text{    
    font-weight: 100;
    font-size: 16px;
}

/*
///////////////////////////////  ELS 13 ///////////////////////////////
*/

#els13{
    display: flex;
    padding: 40px;
}

#actius{
    width: CALC((100% / 3 )*2);
    overflow:hidden;
}

#actius .tots{
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    background:#1a1a1a;
     border-radius: 25px;
    width:CALC(33% - 60px);
    margin-left:20px;
    
}
#destacat{
    width: CALC((100% - 100px)/3);
    overflow:hidden;
    margin-right: 20px;
}

#actius-cont{
    display:flex;
    width: 100%;
    flex-direction: row; 
    flex-wrap:  wrap;
}

#destacat-cont{
    width: 100%;
}

#actius #actius-cont .disco-col{
    background:#1a1a1a;
    border-radius: 25px;
    width:CALC(33% - 60px);
    padding: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

#destacat #destacat-cont .disco-col{
    background:#1a1a1a;
    border-radius: 25px;
}

#actius #actius-cont .disco{
    
}

#destacat #destacat-cont .disco{
   
    padding: 10px;
}

#actius #actius-cont .disco .portada{
    width: 100%;
}

#actius #actius-cont .disco .portada img{
    width: 100%;
}

#destacat #destacat-cont .disco .portada{
    width: 100%;
}

#destacat #destacat-cont .disco .portada img{
    width: 100%;
}

#actius #actius-cont .disco .dades{
    width: 100%;
    padding: 20px 0;
}

#destacat #destacat-cont .disco .dades{
    width: 100%;
    padding: 10px 0;
}

#actius #actius-cont .disco .dades .titol{
    font-weight: 700;
    font-size: 16px;
    height:50px;
}



#actius #actius-cont .disco .dades .text{
    font-weight: 100;
    font-size: 14px;
    line-height: 1.4;
    height:70px;
}

#destacat #destacat-cont .disco .dades .titol{
    font-weight: 700;
    font-size: 24px;
    padding: 10px 0;
}



#destacat #destacat-cont .discot .dades .text{
    font-weight: 100;
    font-size: 12px;
    line-height: 1.4;
}

#disco {
    padding :40px;
    display:flex;
}

#disco #portada{
    width: 600px;
    margin-right: 80px;
}

#disco #portada img{
    width: 100%;
}

#disco #dades{
    width: CALC(100% - 600px);
}

#disco #dades .texte{
    margin-bottom: 60px;
    line-height: 1.4;
    font-size: 16px;
}
  
#pop-rock{
    display:flex;
    width: 1680px;
    overflow:hidden;
   
}

#menu_pop-rock {
    width: 25%;
    background: #1a1a1a;
    border-radius: 25px;
  
}

#menu_pop-rock .menu_int{
    padding:20px;
}

#artistas{
    width:65%;
    margin-left: 40px;
     background: #1a1a1a;
    border-radius: 25px;
}

#portada_concurs{
    width:70%;
    margin-left: 40px;
    background: #1a1a1a;
    border-radius: 25px;
}

#menu_pop-rock ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#menu_pop-rock .uno{
    font-size: 20px;
    font-weight: 400;
    padding: 10px 0;
}

#menu_pop-rock .dos{
    font-size: 18px;
    font-weight: 400;
    padding: 6px 0;
}

#menu_pop-rock .tres{
    font-size: 16px;
    font-weight: 400;
    padding: 4px 0;
}
#artistas #lista{
    padding: 20px;
}

#artistas .artista{
    margin-bottom: 80px;
   
}

#artistas .artista .sup{
    display:flex;
}

#artistas .artista .imagen{
    width: 60%;
}

#artistas .artista .imagen img{
    width: 100%;
}


#artistas .artista .imagen .complementos{
    display:flex;
    margin-top: 20px;
}

#artistas .artista .imagen .complementos .canciones{
    width: 50%;
}

#artistas .artista .datos .nombre{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 400;
}

#artistas .artista .datos .texto p{
    line-height: 1.4;
}

#artistas .artista .imagen .complementos .canciones .cancion .titol{
    padding:4px;
    margin-top:2px;
    margin-right: 40px;
}

#artistas .artista .imagen .complementos .enllac .titol{
    padding: 4px;
    margin-top:2px;
    margin-right: 40px;
}

#artistas .artista .imagen .complementos .enllac .titol:hover,
#artistas .artista .imagen .complementos .canciones .cancion .titol:hover{
    background:#2a2a2a;
    cursor: pointer;
}
#artistas .artista .imagen .complementos .enllacos .titular,
#artistas .artista .imagen .complementos .canciones .titular{
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 5px;
}

#artistas .artista .imagen .complementos .enllacos{
    width: 50%;
}
#artistas .artista .datos{
    width: 40%;
    padding-left: 40px;
}

#artistas .artista audio {
    width: 80%;
    height: 25px;
}

audio::-webkit-media-controls-panel {
    background-color: #a0276e;
}

#portada_concurs .int{
    padding: 20px;
}
#portada_concurs #imatge{
    width: 100%;
}

#portada_concurs #imatge img{
    width: 100%;
}

#portada_concurs #text{
    padding: 20px 100px 80px 40px;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 100px;
}

#especials #especials_int{
    display:flex;
    flex-wrap: wrap;
}

#especials #especials_int .especial{
    width: CALC((100% - 120px)/4);
    margin:10px;
    background: #1a1a1a;
    border-radius: 25px;
}

#especials #especials_int .especial .especial-int{
    margin: 20px;
}

#especials #especials_int .especial .especial-int {
    width: CALC(100% -40px);
    
}

#especials #especials_int .especial .especial-int img{
    width: 100%;
}

#especials #especials_int .especial .especial-int .titol{
    padding: 20px 0;
    font-size: 18px;
    font-weight: 400;
    height: 20px;
    line-height: 1.4;
    
    
}

#especial {
    display:flex;
}

#especial #especial-es{
    width:CALC((100% - 20px) / 4);
   
    margin-right: 20px;
}



#especial #especial-1{
    width:CALC(((100% - 20px) / 4)* 3);
    background: #1a1a1a;
    border-radius: 25px; 
}


#especial #especial-es #especials_int {
    background: #1a1a1a;
    border-radius: 25px;
    margin-bottom: 20px;
}

#especial #especial-es #especials_int .especial {
   padding:20px;
}


#especial #especial-es #especials_int .especial .especial-int img{
    width: 100%;
}

#especial #especial-es #especials_int .especial .especial-int .titol{
    padding: 20px 0;
    font-size: 18px;
    font-weight: 400;
    height: 20px;
    line-height: 1.4;
}

#especial-1 .especial-int{
    padding:20px;
}

#especial-1 .especial-int .imatge{
    width: 100%;
}

#especial-1 .especial-int .imatge img{
    width: 100%;
}

#especial-1 .especial-int .text_curt{
   ;
    font-size: 24px;
    line-height: 1.4;
    margin-top: 40px;
    font-weight: 400;
}
#especial-1 .especial-int .text{
    width: 60%;
    font-size: 18px;
    line-height: 1.4;
    margin-top: 20px;
}

#inici{
    display:flex;
}

#inici h2{
    font-size: 22px;
}
#inici #izda{
    width: CALC(((100% - 20px) / 4) * 4.25);
}

#inici #izda #darrers{
   width:100%; 
}

#inici #izda #darrers #darrers-cont{
    display:flex;
    flex-wrap : wrap;
   
}

#inici #izda #darrers #darrers-cont .podcast {
    width: 100%;
    background: #1a1a1a;
    display: flex;
    border-radius: 25px;
    justify-content: space-between;
}

#inici #izda #darrers #darrers-cont .post-col{
    width:31%;
    padding: 10px;
}

#inici #dcha{
    width: CALC(((100% - 20px) / 4) * .75);
}

#inici #dcha #destacat{
    width:100%;
}

#inici #izda #especials #especials_int .especial .especial-int .titol {
   font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
}


#inici #dcha #disco_semana{
    width:100%;
}

#inici #dcha #destacat-cont {
    width: 100%;
}
#inici #dcha  #destacat-cont .disco-col {
    background: #1a1a1a;
    border-radius: 25px;
}

#inici #dcha  #destacat-cont .disco {
    padding: 10px;
}
#inici #dcha  #destacat-cont .disco .portada {
    width: 100%;
}
#inici #dcha  #destacat-cont .disco .portada img{
    width: 100%;
}
#inici #dcha  #destacat-cont .disco .dades {
    width: 100%;
    padding: 5px 0;
}
#inici #dcha  #destacat-cont .disco .dades .titol {
    font-weight: 700;
    font-size: 14px;
}


#discos_de_la_semana{
    display:flex;
}

#discos_de_la_semana #discos-setmana {
    width: CALC((100% - 40px) / 5); 
    margin-right: 40px;
}

#discos_de_la_semana #disc-setmana {
    width: CALC(((100% - 40px) / 5) * 4);   
}

#discos_de_la_semana #discos-setmana .destacat-cont{
    margin-bottom: 20px;
    background: #1a1a1a;
    border-radius: 25px;    
}

#discos_de_la_semana #discos-setmana .destacat-cont .disco-col{
  padding:20px;
}
#discos_de_la_semana #discos-setmana .destacat-cont .disco-col .portada{
    width: 100%;
}

#discos_de_la_semana #discos-setmana .destacat-cont .disco-col .portada img{
    width: 100%;
}

#discos_de_la_semana #discos-setmana .destacat-cont .disco-col .dades{
    padding: 10px;
}

#discos_de_la_semana #discos-setmana .destacat-cont .disco-col .dades .titol{
    font-size: 16px;
    font-weight: 400;
}

#discos_de_la_semana #disc-setmana #destacat{
    background: #1a1a1a;
    border-radius: 25px;
    width: 100%;
    margin: 0;
}

#discos_de_la_semana #disc-setmana #disco{
    display:flex;
    padding: 20px;
}

#discos_de_la_semana #disc-setmana #disco .portada{
    width: 40%;
    margin-right: 40px;
}
#discos_de_la_semana #disc-setmana #disco .portada img{
    width: 100%
}

#discos_de_la_semana #disc-setmana #disco .dades{
    width: 60%;
}

#discos_de_la_semana #disc-setmana #disco .dades .nom{
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 20px;
}

#discos_de_la_semana #disc-setmana #disco .dades .interpret,
#discos_de_la_semana #disc-setmana #disco .dades .segell,
#discos_de_la_semana #disc-setmana #disco .dades .any{
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 5px;
}

#discos_de_la_semana #disc-setmana #disco .dades .text{
    line-height: 1.4;
}