@charset "UTF-8";
/* CSS Document */

@media (max-width: 1200px){
	.fitxa-fons{
		margin-left: 15px;
		margin-right: 15px;
	}
}

@media (max-width: 780px){
	
	#titolDalt{
		height: auto;
		min-width: 180px;
	}
	
	#titolDalt .espaiCercador{
		clear: both;
	}
	
	#titolDalt .espaiCercador .campdecerca{
		margin-right: 0px;
		width: 100%;
	}

	.fitxa-fons{
		margin: 0px;
	}

	.fitxa-superior{
		border-radius: 0px;
	}

	.fitxa-superior-buida{
		border-radius: 0px;
	}

	.foto-autor{
		border-radius: 0px; 
	}
}

@media (max-width: 500px){
	.fitxa-dades{
		grid-template-columns: 1fr;
	}

	.fitxa-dades-esquerra{
		border-radius: 10px 10px 0px 0px; 
		grid-row-start: 1;
		grid-row-end: 1;
		text-align: center;
		width: 100%;
	}

	.dreta-primera-fila{
		border-radius: 0px; 
	}
}

@media (max-width: 480px){
     /* Menys de 480px - potser 320px no cal */
     
     #titolDalt{
          height: auto;
          min-width: 180px;
     }
}


/* ANTERIOR */
/**********************************
//***                           ***
//***       Responsive          ***
//***                           ***
//********************************/

@media (max-width: 1410px){
	/* 
	Menys de 1410px
	Ajustem la graella per iPad Pro 12'', que és de 1366px
	*/
	#contingutPpal .tresDreta{
		grid-gap: 10px;
		margin: 0px;
	}
}

@media (max-width: 1300px){
	/* Menys de 1200px */
	/* Pels botons de les competicions */
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cercaDos{
		margin-bottom: 3px;
		padding: 6px 0px;
		width: 98%;
	}
			
}

@media (max-width: 1200px){
	/* Menys de 1200px */
	/* Proporcions de https://aukera.es/blog/diseno-responsive/ */
	
	#fitxa .fitxaDreta .columnaA .contingutColumna, 
	#fitxa .fitxaDreta .columnaB .contingutColumna, 
	#fitxa .fitxaDreta .columnaUnificada .contingutColumna{
		font-size: 14px;
	}
}

@media (max-width: 1112px){
	/* 
	Menys de 1112px
	Ajustem la graella per iPad Pro 10''
	*/
	#contingutPpal .tresDreta{
		grid-gap: 5px;
		margin-left: 5px;
		margin-right: 5px;
	}
}

@media (max-width: 1024px){
	/* Menys de 1024px */
	#fitxa {
		/*https://lenguajecss.com/p/css/propiedades/grid-css*/
		display: grid;
		grid-template-columns: 40% 60%;
		grid-template-areas: "gridEsquerra gridTrajectoria" "gridEsquerra gridPalmares";
		grid-column-gap: 15px;
	}
	
	#fitxa .fitxaTrajectoria .contingutColumna, 
	#fitxa .fitxaPalmares .contingutColumna{
		font-size: 16px;
	}
	
	#fitxa .fitxaTrajectoria .contingutColumna .vinculat, 
	#fitxa .fitxaPalmares .contingutColumna .vinculat{
		font-size: 11px;
	}
	
	#fitxa .fitxaPalmares .titolColumna, 
	#fitxa .fitxaTrajectoria .titolColumnaSeguent{
		padding-top: 25px;
	}
	
	#fitxa .fitxaTrajectoria .titolColumna, 
	#fitxa .fitxaPalmares .titolColumna, 
	#fitxa .fitxaTrajectoria .titolColumnaSeguent{
		width: 70%
	}
	
	/*#pestanyes{
		height: 40px;;
		padding-left: 30px;
		padding-top: 30px;
	}
	
	#pestanyes a .pestanya,
	#pestanyes .pestanya{
		font-size: 18px;
		width: 140px;
	}*/
	
	#fitxaMedia{
		margin-bottom: 30px;
		margin-left: 30px;
	}
	
	#fitxaEvolucio{
		padding-left: 30px;
		padding-top: 40px;
	}
	
	#fitxaEvolucio .evoTitol{
		color: #5E9666;
		font-weight: 900;
		font-size: 2.6vw;
		margin: 0vw;
	}
	
	#fitxaBio .bioTitol{
		color: #5E9666;
		display: inline-block;
		font-size: 26px;
		font-weight: 900;
		margin-left: 30px;
		padding-right: 0px;
		padding-top: 20px;
		text-align: left;
	}
	
	#fitxaBio .bioTitol .subBio{
		display: inline-block;
		font-size: inherit;
		font-weight: intherit;
		line-height: inherit;
		padding-right: 0;
	}
	
	#fitxaBio .bioText{
		font-size: 18px;
		padding-left: 30px;
		padding-right: 30px;
		width: 100%;
	}
	
	#fitxaEstadistica{
		padding-left: 30px;
		padding-top: 40px;
	}
	
	#fitxaEstadistica .estadTitol, 
	#fitxaEvolucio .evoTitol, 
	#fitxaEstadisticaMillors .estadMTitol{
		font-size: 26px;
	}	
	
	#contingutPpal .tresDreta{
		grid-template-columns: repeat(auto-fit, 120px);
	}
	
	#contingutPpal .tresDreta .fitxaResultat, 
	.areaDarrers .fitxaResultat{
		height: 160px;
		width: 120px;
	}
	
	#contingutPpal .tresDreta .fitxaResultat img, 
	.areaDarrers .fitxaResultat img{
		height: 158px;
		width: 118px;
	}
	
	#contingutPpal .tresDreta .noFoto img{
		border: none;
		height: 158px;
		width: 118px;
	}
	#contingutPpal .tresDreta .fitxaResultat .nomPersonatge, 
	#contingutPpal .tresDreta .fitxaResultat a .nomPersonatge,
	#contingutPpal .tresDreta .fitxaResultat .nomPersonatgeNou, 
	#contingutPpal .tresDreta .fitxaResultat a .nomPersonatgeNou, 
	.areaDarrers .fitxaResultat .nomPersonatge, 
	.areaDarrers .fitxaResultat a .nomPersonatge{
		bottom: 38px;
		font-size: 12px;
		padding: 3px 2px;
		width: 118px;
	}
	
	#contingutPpal .tresEsquerra .titolFiltres, 
	#contingutPpal .tresEsquerra .titolEstadistiques{
		font-size: 17px;
	}
	
	#contingutPpal .tresEsquerra .titolFiltres .textFiltres, 
	#contingutPpal .tresEsquerra .titolEstadistiques .textFiltres{
		padding-top: 3px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre{
		/*background-color: yellow;*/
		font-size: 15px;
		height: 40px;
		padding: 0px 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoText{
		padding-top: 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoSenyal{
		padding-top: 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre{
		padding-right: 10px;
	}
	
	#contingutPpal .avisos .avisosFiltres .contingutAvis{
		font-size: 13px;
		padding: 8px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre select.soflow{
		font-size: 13px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre .textSwitch{
		font-size: 14px;
	}

}

@media (max-width: 780px){
	
	#titolDalt{
		height: auto;
		min-width: 180px;
	}
	
	#titolDalt .espaiCercador{
		clear: both;
	}
	
	#titolDalt .espaiCercador .campdecerca{
		margin-right: 0px;
		width: 100%;
	}
	
	/* Menys de 768px */
	
	#fitxa{
		padding-bottom: 30px;
	}
	
	#fitxa .fitxaTrajectoria, 
	#fitxa .fitxaPalmares{
		margin-right: 10px;
	}
	
	#fitxa .fitxaTrajectoria .titolColumna, 
	#fitxa .fitxaPalmares .titolColumna, 
	#fitxa .fitxaTrajectoria .titolColumnaSeguent{
		font-size: 20px;
		padding-right: 10px;
		width: 100%;
	}
	
	#fitxa .fitxaPalmares .titolColumna, 
	#fitxa .fitxaTrajectoria .titolColumnaSeguent{
		padding-top: 25px;
	}
	
	#fitxa .fitxaTrajectoria .contingutColumna .vinculat, 
	#fitxa .fitxaPalmares .contingutColumna .vinculat{
		font-size: 12px;
	}
	
	/*#pestanyes{
		display: grid;
		grid-template-columns: repeat(3, 33.34%);
		grid-column-gap: 0px;
		
		height: 40px;
		padding-left: 0px;
		padding-top: 0px;
	}
	
	#pestanyes a .pestanya,
	#pestanyes .pestanya{
		font-size: 21px;
		margin-right: 0px;
		padding: 15px 0px;;
		text-align: center;
		width: 100%;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}*/
	
	#fitxaEstadistica{
		padding-left: 10px;
		padding-top: 30px;
		padding-right: 0px;
	}
	
	#contingutPpal{
		display: flex;
		flex-direction: column;
		padding-top: 0px;
	}
	
	#contingutPpal .tresEsquerra{
		float: none;
		max-width: none;
		order: 1;
		padding: 0px;
		width: 100%;
	}
	
	#contingutPpal .tresDreta{
		grid-gap: 5px;
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		order: 2;
	}
	
	#contingutPpal .tresDretaGrup{
		order: 2;
	}
	
	#contingutPpal .avisos{
		display: block;
		order: 3;
	}
	
	#contingutPpal .tresEsquerra .avisosSotaMenu{
		display: none;
	}
	
	#contingutPpal .tresEsquerra a.amagaFiltres{
		color: #5E9666;
		font-size: 18px;
		text-decoration: none;
	}
	
	#contingutPpal .tresEsquerra .titolFiltres .iconaFiltres{
		display: none;
	}
	
	#contingutPpal .tresEsquerra .titolFiltres, 
	#contingutPpal .tresEsquerra .titolEstadistiques{
		background-color: #F0F0F0;
		color: #5E9666;
		display: grid;
		font-size: 16px;
		font-weight: bold;
		grid-template-columns: 95% 5%;
		height: 55px;
		padding: 16px 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre{
		font-size: 14px;
		height: 40px;
		padding-left: 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoText{
		padding-top: 12px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .encapcalamentFiltre .botoSenyal{
		padding-top: 12px;
	}
		
	#contingutPpal .avisos .avisosFiltres .contingutAvis{
		background-color: transparent;
		border: none;
		font-size: 13px;
		margin: 0px;
		padding: 8px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre select.soflow{
		font-size: 13px;
		margin: 0px;
		padding: 4px;
	}
	
	.botonsEstadistiques{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-column-gap: 5px;
		margin: 0px;
		padding: 0px 10px 0px 5px;
	}
	
	/* ESTADÍSTICA DE GRUP */
	#contingutPpal .tresDretaGrup{
		width: 100%;
	}
	
	#contingutPpal .tresDretaGrup .titLiders{
		font-size: 20px;
		padding-bottom: 10px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup{
		font-size: 12px;
		margin: 0 auto;
		padding-left: 0px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .posicio, 
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .posicioRessaltat{
		padding-right: 8px;
		width: 35px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .nom, 
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .nomRessaltat{
		padding-left: 6px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cercaDos{
		margin-bottom: 3px;
		padding: 6px 0px;
		width: 47%;
	}
}

@media (max-width: 480px){
	/* Menys de 480px - potser 320px no cal */
	
	#titolDalt{
		height: auto;
		min-width: 180px;
	}
	
	#fitxa {
		/*https://lenguajecss.com/p/css/propiedades/grid-css*/
		background-color: #EEE;
		background-image: none;
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas: "gridEsquerra" "gridTrajectoria" "gridPalmares";
		grid-column-gap: 0px;
		padding: 10px;
		padding-bottom: 30px;
	}
	
	#fitxa .fitxaTrajectoria, 
	#fitxa .fitxaPalmares{
		margin: 0px 20px;
	}
	
	#fitxa .fitxaTrajectoria .titolColumna{ 
		padding-top: 40px;
	}
	
	#fitxa .fitxaTrajectoria .titolColumna, 
	#fitxa .fitxaPalmares .titolColumna, 
	#fitxa .fitxaTrajectoria .titolColumnaSeguent{
		font-size: 22px;
	}
	
	#fitxa .fitxaTrajectoria .contingutColumna .vinculat, 
	#fitxa .fitxaPalmares .contingutColumna .vinculat{
		font-size: 12px;
	}
	
	.fitxaEsquerra{
		border-right: none;
		padding-right: 0px;
		margin: 0 auto;
		text-align: center;
	}
	
	#fitxa .fitxaEsquerra .superior{
		text-align: center;
	}
	
	#fitxa .fitxaEsquerra .superior .llicencia{
		font-size: 11px;
		text-align: center;
		width: 100%;
	}
	
	#fitxa .fitxaEsquerra .fitxaInfo .dadesPersonals{
		grid-template-columns: repeat(auto-fit, 90px);
		grid-column-gap: 5px;
		justify-content: center;
		padding-top: 6px;
	}
	
	.resultatTrajectoria{
		display: grid;
		grid-template-columns: 81px 8px auto;
	}
	
	#contingutPpal .avisos{
		padding-bottom: 10px;
	}
	
	#contingutPpal .tresEsquerra .nouFiltre .contingutFiltre label.cercaDos{
		margin-bottom: 3px;
		padding: 6px 0px;
		width: 98%;
	}
	
}

@media (max-width: 430px){
	/* 
	Menys de 430px
	*/
	
	/*
	També ho aplicarem a l'ESTADÍSTICA DE GRUP, 
	ja que a partir d'aquestes dimensions no es veu bé
	*/
	#contingutPpal .tresDretaGrup .estadisticaGrup, 
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador{
		width: 300px;
	}
	
	#contingutPpal .tresDretaGrup .titLiders{
		font-size: 20px;
		padding-bottom: 10px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup{
		font-size: 12px;
		margin: 0 auto;
		padding-left: 0px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .posicio, 
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .posicioRessaltat{
		padding-right: 8px;
		width: 35px;
	}
	
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .nom, 
	#contingutPpal .tresDretaGrup .estadisticaGrup .filaJugador .nomRessaltat{
		padding-left: 6px;
		width: 200px;
	}

}

@media (max-width: 375px){
	/* 
	Menys de 375px
	Ajustem la graella per iPhones
	*/
	#contingutPpal .tresDreta{
		grid-gap: 3px;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 5px;
	}
}

@media (max-width: 320px){
	/* Menys de 320px */
	
	#fitxa .fitxaTrajectoria, 
	#fitxa .fitxaPalmares{
		margin: 0px 5px;
	}
	
	/*#pestanyes a .pestanya,
	#pestanyes .pestanya{
		font-size: 17px;
	}*/
}