/* Pruna Amida Base°°
// Estils CSS base
*/
@media all{

	body{
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		min-height: 100vh;
		font-family: var(--font-twcen);
		font-style: normal;
		font-weight: normal;
		font-size: var(--font-size);
		line-height: var(--line-height);
		letter-spacing: var(--letter-spacing);
		color: var(--color-text);
		background-color: var(--color-background);
		transition: var(--transition);
	}
	a:link { color: var(--color-primary); text-decoration: none; }
	a:visited { color: var(--color-primary); text-decoration: none; }
	a:active { color: var(--color-secondary); text-decoration: none; }
	a:hover { color: var(--color-secondary); text-decoration: none; }
	
	/* Text seleccionat */
	::selection {
		color: var(--color-background);
		background: var(--color-primary);
	}
	
	h1, h2, h3, h4{
		margin: var(--margin-half) 0;
		padding: 0;
		font-family: var(--font-berlinsans);
		font-weight: bold;
		letter-spacing: 2px;
		color: var(--color-text);
	}
	h1{ font-size: 28px; line-height: 30px; }
	h2{ font-size: 24px; }
	h3{ font-size: 20px; }
	h4{ font-size: 18px; }
	
	main img,
	article img,
	aside img{
		width: 100%;
	}
	
	a img:hover{
		opacity: 0.5;
		transition: var(--transition);
	}
	
	.general{
		margin: 0 auto;
		padding: 0;
		width: 100%;
		max-width: var(--amplada);
	}
	
	.fons{
		z-index: -4;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.fonsDeg{
		background: linear-gradient(170deg, #f4f4f4f4 0%, #f4f4f4bb 100%);
	}
	.fonsDegHome{
		background: linear-gradient(170deg, #f4f4f4f4 0%, #f4f4f400 50%, #f4f4f44d 100%);
	}
	
	.fontLight{
		font-family: var(--font-twcen);
	}
	.fontRegular{
		font-family: var(--font-twcen);
		font-weight: 500;
	}
	.fontBold{
		font-family: var(--font-twcen);
		font-weight: bold;
	}
	
	header{
		padding: 0;
		font-size: var(--font-size-molt-gran);
		line-height: var(--line-height-high);
		text-align: center;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-text);
	}
	header div{
		padding: var(--margin) var(--margin-double);
	}
	
	/* Barra de navegació */
    nav{
		position: sticky;
		top: 0;
		width: 100%;
		min-height: 45px;
		background-color: transparent;
    }
	nav ul{
        list-style-type: none;
		font-family: var(--font-twcen);
		font-size: var(--font-size);
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        text-align: center;
    }
    nav li{
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    nav li a{
        display: block;
        text-align: left;
        margin: 0;
        padding: var(--margin-three-quarters) var(--margin);
		color: var(--color-text) !important;
        text-decoration: none;
        background-color: transparent;
    }
	nav li div,
	nav li form{
        margin: 0;
        padding: var(--margin-three-quarters) var(--margin-half);
    }
    nav li a:hover{
        color: var(--color-secondary) !important;
    }
	
    nav .dropdown-content{
        display: none;
        position: absolute;
        background-color: var(--color-text-light);
        min-width: 40px;
		margin: 0;
		padding: 0;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
		transform: translate(-25px);
    }
    nav .dropdown-content a{
        text-decoration: none;
        display: block;
		padding: var(--margin-half);
		color: var(--color-text) !important;
        text-align: left;
    }
    nav .dropdown:hover .dropdown-content{
        display: block;
    }
	.hamburguesa,
	.checkboxDes{
		display: none;
	}
	/* fi Barra de navegació */

	/* Inici submenú */
	.subnav{
		padding: 0;
		text-align: center;
		color: var(--color-background) !important;
		background-color: var(--color-primary);
		border-bottom: 1px solid var(--color-background);
	}
	.subnav > div{
		text-align: left;
	}
	.subnav > div > div{
		text-align: left;
		padding: var(--margin-double);
	}
	.subnav ul{
		margin: 0;
		padding: 0;
	}
	.subnav li{
		white-space: nowrap;
		display: inline;
		list-style: none;
		list-style-type: none;
		line-height: var(--font-size-molt-gran);
		margin: 0;
		padding: var(--margin-half) 0;
	}
	.subnav li a{
		text-decoration: none;
		margin: 0;
		padding: var(--margin-quarter) var(--margin);
		color: var(--color-background) !important;
		border: 1px solid var(--color-text-light);
		border-radius: var(--border-radius);
	}
	.subnav li a:hover{
		color: var(--color-background);
		background-color: var(--color-secondary);
	}
	.subnav .actiu{
		background-color: var(--color-text);
	}
	.titolPag{
		font-family: var(--font-twcen);
		font-weight: bold;
		font-size: var(--font-mida-molt-gran);
		line-height: var(--line-height-high);
		text-transform: uppercase
	}
	.titolPag a{
		color: var(--color-background) !important;
	}
	.titolPag a:hover{
		color: var(--color-secondary) !important;
	}
	/* fi Submenú */
	
	main{
		display: flex;
		flex-grow: 1;
		flex-flow: row;
		padding: 0;
		gap: var(--margin-double);
	}
	
	article{
		padding: var(--margin-double) 0 var(--margin-double) var(--margin-double);
		flex: 70%;
	}
	
	/* Quadres */
	.quadre{
		margin-bottom: var(--margin);
		padding: var(--margin);
		color: var(--color-text-light);
		background-color: var(--color-primary);
		border-radius: var(--border-radius);
	}
	.quadre a{
		font-family: var(--font-twcen);
		font-weight: bold;
		color: var(--color-text-light);
	}
	/* fi Quadres */
	
	.logo{
		font-family: var(--font-berlinsans);
		font-weight: bold;
		font-size: var(--font-mida-molt-gran);
	}
	.logo a{
		color: var(--color-text) !important;
	}
	.logo a:hover{
		color: var(--color-text);
	}
	.logo img{
		margin: 0 var(--margin-quarter);
		height: 36px;
		vertical-align: middle;
	}
	
	.iconaNav{
		width: 30px;
		vertical-align: -30%;
	}
	.iconaNav:hover{
		opacity: var(--opacitat);
	}
	
	hr{
		border-top: 1px solid var(--color-text-medium);
		border-bottom: 0 solid var(--color-background);
	}
	
	/* Portada */
	.portadaBlog{
		padding: var(--margin-double);
		display: grid;
		grid-gap: var(--margin);
		grid-template-columns: repeat(4, 1fr);
	}
		.portadaBlog div{
			cursor: pointer;
		}
		.portadaBlog .portadaImBlog{
			width: 100%;
			aspect-ratio: 3 / 2;
			border-radius: var(--border-radius);
			cursor: pointer;
		}
		.portadaBlog .portadaImBlog:hover{
			opacity: 0.5;
			transition: var(--transition);
		}
		.portadaBlog .portadaBlogTitol{
			font-family: var(--font-berlinsans);
			font-weight: bold;
		}
		.portadaBlog .portadablogDescription{
			
		}
		.portadaBlog .portadablogData{
			font-size: var(--font-size-small);
			color: var(--color-text-medium);
		}
	/* fi Portada */

	/* Blog */
	.blog{
		padding: var(--margin-double) 0 var(--margin-double) var(--margin-double);
	}
		.blogQuadre{
			margin: 0 0 var(--margin) 0;
			padding: 0;
			background-color: var(--color-text-medium);
			background-image: linear-gradient(170deg, #f4f4f4f4 0%, #f4f4f4bb 100%);
			border-radius: var(--border-radius);
		}
		.blogImage{
			margin-bottom: var(--margin-half);
			width: 100%;
			aspect-ratio: 16 / 9;
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			cursor: pointer;
		}
		.blogContent{
			padding: var(--margin);
		}
			.blogTitle{
				font-family: var(--font-berlinsans);
				font-weight: bold;
				font-size: var(--font-size-big);
				padding-bottom: var(--margin);
			}
			.blogDescription{
				font-family: var(--font-twcen);
			}
			.blogText{
				padding-bottom: var(--margin);
			}
		.blogDetails{
			padding: var(--margin) var(--margin) var(--margin-double) var(--margin);
			border-top: 1px solid var(--color-text-medium);
		}
		.blogAuthor{
		}
		.blogAuthorImage{
			float: left;
			margin: var(--margin-quarter) var(--margin-half) var(--margin-half) 0;
			width: 30px;
			height: 30px;
		}
	/* fi Blog */
	
	/* Agenda / Esdeveniments */
	.events{
		padding: var(--margin-double) 0 var(--margin-double) var(--margin-double);
	}
	.eventsFlex{
		display: flex;
		flex-direction: column;
		gap: var(--margin-double);
	}
	.eventsQuadre{
		display: flex;
		background-color: var(--color-text-medium);
		background-image: linear-gradient(170deg, #f4f4f4f4 0%, #f4f4f4bb 100%);
		border-radius: var(--border-radius);
		cursor: pointer;
	}
		.eventsQuadre:hover{
			transform-origin: 50% 50%;
			transform: scale(1.02);
			opacity: 0.8;
			transition: var(--transition-double);
		}
	.eventsImage{
		flex: 1;
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}
	.eventsContent{
		flex: 2;
		padding: var(--margin);
	}
		.eventsTitle{
			font-family: var(--font-berlinsans);
			font-weight: bold;
			font-size: var(--font-size-big);
		}
		.eventsData{
			color: var(--color-text-medium);
		}
		.eventsDetalls{
			color: var(--color-text-medium);
			font-size: var(--font-size-small);
		}
	.blogFosc > .eventsQuadre{
		color: var(--color-background);
		background-color: var(--color-text-light);
		background-image: linear-gradient(170deg, #111111f4 0%, #111111bb 100%);
	}
	/* fi Agenda / Esdeveniments */
	
	aside{
		flex: 30%;
		padding: var(--margin-double) var(--margin-double) var(--margin-double) 0;
	}
	
	footer{
		font-family: var(--font-twcen);
		margin-top: auto;
		padding: 0;
		min-height: 240px;
		border-top: 1px solid var(--color-text);
		/* background-color: var(--color-background); */
		/* background: linear-gradient(0deg, var(--color-text) 0%, var(--color-primary) 100%); */
	}
	footer div p{
		padding: var(--margin-double);
		color: var(--color-text-medium);
	}
	footer a:link { color: var(--color-primary); text-decoration: none; }
	footer a:visited { color: var(--color-primary); text-decoration: none; }
	footer a:active { color: var(--color-text-light); text-decoration: none; }
	footer a:hover { color: var(--color-text-light); text-decoration: none; }
	
	.flex{
		display: flex;
		gap: var(--margin);
	}
	.flex1{ flex: 1; }
	.flex2{ flex: 2; }
	.flex3{ flex: 3; }
	.flex4{ flex: 4; }
	.flex5{ flex: 5; }
	.flexOrdre1{ order: 1; }
	.flexOrdre2{ order: 2; }
	.flexOrdre3{ order: 3; }
	.flexOrdre4{ order: 4; }
	.flexOrdre5{ order: 5; }
	
	.esq{
		float: left;
	}
	.dreta{
		float: right;
	}
	
	.pcNo{
		display: none;
	}
	
	.xarxesFooter img{
		padding: var(--margin-half) var(--margin-quarter) 0 0;
		width: 30px;
	}
	
	/* Taula */
	.taula{
		border-collapse: collapse;
	}
	.taula th{
		font-size: var(--font-size);
		line-height: var(--line-height);
		margin: 0;
		padding: var(--margin-half);
		text-align: left;
		vertical-align: top;
	}
	.taula td{
		font-size: var(--font-size);
		line-height: var(--line-height);
		margin: 0;
		padding: var(--margin-half);
		vertical-align: top;
	}
	.taula td,
	.taula th{
		border-bottom: 0 solid var(--color-primary);
	}
	
	.perfil{
		width: 150px;
		height: 150px;
		background-color: var(--color-text-light);
		border-radius: var(--border-radius);
	}
	/* fi Taula */


	/* Paginació */
	.paginacio{
		display: flex;
		margin: var(--margin) 0;
		padding: var(--margin-half) 0;
		gap: var(--margin-quarter);
		background-color: transparent;
	}
	.paginacioNum,
	.paginacioFletxes{
		margin: 0;
		padding: 1px 3px;
		min-width: 24px;
		height: 24px;
		color: var(--color-background);
		text-align: center;
		border-radius: 2px;
	}
		.paginacioNum{
			font-size: 16px;
			line-height: 24px;
			background-color: var(--color-primary);
		}
		.paginacioFletxes{
			font-size: 30px;
			line-height: 17px;
			background-color: var(--color-primary);
		}
		.paginacioActiu{
			color: var(--color-background);
			background-color: var(--color-secondary);
		}
		.paginacioInactiu{
			color: var(--color-background);
			background-color: var(--color-text-light);
			cursor: default;
		}
	.paginacioNum:hover,
	.paginacioFletxes:hover{
		color: var(--color-background);
		background-color: var(--color-secondary);
	}
	/* Fi Paginació */
	
	.gros{
		display: none;
	}
	
	/* Formularis */
	input{
		margin: 0 0 var(--margin-quarter) 0;
		padding: var(--margin-quarter) var(--margin-half);
		font-size: 14px;
		letter-spacing: var(--letter-spacing);
		color: var(--color-text);
		background-color: transparent;
		border: 1px solid var(--color-primary);
		border-radius: var(--border-radius);
	}
	input:hover,
	select:hover{
		color: var(--color-text);
		background-color: var(--color-secondary);
	}
	input:hover::placeholder{
		color: var(--color-background);
	}
	input:focus{
		color: var(--color-text);
		background-color: var(--color-secondary);
		outline: none;
	}
	input:focus::placeholder{
		color: var(--color-secondary);
	}
		input:disabled{
			border: 1px solid var(--color-text-light);
			color: var(--color-text-light);
		}
		input:disabled::placeholder{
			color: var(--color-text-light);
		}
		
	select{		
		margin: 0 0 var(--margin-half) 0;
		padding: var(--margin-quarter) var(--margin-half);
		color: var(--color-text);
		background-color: var(--color-background);
		border: 1px solid var(--color-text-light);
		border-radius: var(--border-radius);
	}
	
	textarea{
		margin: 0;
		padding: var(--margin-half);
		width: calc(100% - var(--margin));
		min-height: 120px;
		resize: none;
		font-size: var(--font-size-small);
		letter-spacing: var(--letter-spacing);
		color: var(--color-text);
		border: 1px solid var(--color-primary);
		background-color: var(--color-background);
		border-radius: var(--border-radius);
	}
	textarea:focus{
		background-color: var(--color-secondary);
		outline: none;
	}
	
	input[type=submit]{
		margin: 0 0 var(--margin-half) 0;
		padding: var(--margin-half) var(--margin-three-quarters);
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 2px;
		color: var(--color-primary);
		background-color: var(--color-secondary);
		border: 1px solid var(--color-primary);
		border-radius: var(--border-radius);
		cursor: pointer;
		transition: var(--transition);
	}
	input[type=submit]:hover{
		color: var(--color-secondary);
		background-color: var(--color-tertiary);
	}
	input[type=submit]:active{
		opacity: 1;
		color: var(--color-primary);
		background-color: var(--color-secondary);
	}
	input[type=submit]:disabled,
	input[type=submit][disabled]{
		background-color: var(--color-text-light);
		cursor: auto;
	}
	/* fi Formularis */
	
	
}


/* Estils per pantalles molt grosses */
@media all and (min-width: 1600px){
	
}





@media all and (max-width: 950px){
	
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		padding-top: 94px !important;
	}

	header{
		z-index: 10;
		position: fixed;
		top: 0;
		right: 0;
		padding: var(--margin-half);
		width: 100%;
		color: var(--color-text);
		background-color: var(--color-background);
	}
	header div{
		padding: var(--margin-half) var(--margin-double);
	}
	
	main{
		display: flex;
		flex-flow: auto;
		flex-direction: column;
	}
	
	article{
		order: auto;
		padding: var(--margin-double);
	}
	
	aside{
		padding: var(--margin) var(--margin-double);
	}
	
	footer div{
		flex-wrap: wrap;
	}
	footer div p{
		flex: 50%;
	}

	.blog{
		padding: var(--margin-double);
	}
	
	.pcNo{
		display: block;
	}
	
	.tauletaNo{
		display: none;
	}
	
	/* Portada */
	.portadaBlog{
		padding: var(--margin-double);
		grid-gap: var(--margin);
		grid-template-columns: repeat(2, 1fr);
	}
	/* fi Portada */	
	/*
	.logo a{
		 filter: brightness(0) invert(1);
	}
	.logo img{
		margin: 0 var(--margin-half);
	}
	.iconaNav{
		filter: invert(1);
	}
	*/
	
	/* Barra navegació mòbil */
	.hamburguesa {
		z-index: 11;
		position: fixed;
		display: inline;
		top: 0;
		right: 0;
		text-align: right;
		transition: all .5s ease;
		cursor: pointer;
	}
	.hamburguesa img{
		padding: var(--margin);
		width: 40px;
		height: 40px;
		/* filter: brightness(0) saturate(100%) invert(53%) sepia(54%) saturate(6882%) hue-rotate(335deg) brightness(109%) contrast(84%); */
	}

	.hamburguesa img:hover {
		opacity: 0.5;
	}
		nav{
			z-index: 12;
			position: fixed;
			width: 100%;
			left: 0;
			top: -100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: var(--color-text);
			background: linear-gradient(140deg, var(--color-text) 0%, var(--color-primary) 100%);
			box-shadow: 0 0 25px rgba(0,0,0,0.6);
			transition: var(--transition-double);
		}
		nav{
			min-height: 55px;
		}
		nav ul {
			top: 0;
			width: 100%;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		nav li {
			float: left;
			width: 100%;
			border-top: 1px solid var(--color-text-medium);
			text-align: left;
		}
		nav li a,
		nav li div,
		nav li form{
			font-size: 22px;
			text-align: left;
			color: var(--color-background) !important;
			padding: var(--margin-half) var(--margin-double);
		}
		nav li a:hover{
			background-color: var(--color-primary);
		}
		nav li a:hover{
			color: var(--color-background) !important;
		}
		
		/* Dropdown */
		nav .dropdown-content{
			display: block;
			position: relative;
			width: 100%;
			background-color: transparent;
			transform: translate(0);
			box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
		}
		nav .dropdown-content a{
			padding: var(--margin-quarter) var(--margin-double);
			color: var(--color-text-light) !important;
		}
		.actual{
			display: block;
		}
		
		/* Hamburguesa i checkbox */
		.checkboxDes:checked ~ nav {
			position: fixed;
			top: 0;
		}
		.checkboxDes:checked ~ .hamburguesa {
			width: 100%;
			height: 100%;
			background-color: var(--color-text);
			opacity: var(--opacitat);
		}
		/* Fem que l'hamburguesa es desplaci enganxada al menú
		.checkboxDes:checked ~ .hamburguesa { 
			position: fixed;
			left: 300px;
		}
		*/
		/* fi Barra navegació mòbil */
}








@media all and (max-width: 750px){
	
	body {
		padding-top: 64px !important;
	}
	
	.flex{
		flex-flow: auto;
		flex-direction: column;
	}
	
	.logo{
		font-size: var(--font-mida-gran);
	}
	.logo img{
		height: 36px;
		margin: 0 var(--margin-quarter);
	}
	
	header div{
		padding: var(--margin-quarter) var(--margin);
	}
	
	nav li a,
	nav li div,
	nav li form{
		padding: var(--margin-half) var(--margin);
	}
	nav .dropdown-content a{
		padding: var(--margin-quarter) var(--margin);
	}
	
	.subnav > div > div{
		padding: var(--margin);
	}
	.subnav li{
		line-height: var(--line-height-high);
	}
	.subnav li a{
		font-size: var(--font-size-small);
		padding: var(--margin-quarter) var(--margin-half);
	}
	
	article{
		padding: var(--margin);
	}
	
	aside{
		padding: var(--margin) var(--margin) var(--margin-double) var(--margin);
	}
	
	.blog{
		padding: var(--margin);
	}
	
	footer div p{
		padding: var(--margin);
	}
	
	.mobilNo{
		display: none;
	}
	
	/* Portada */
	.portadaBlog{
		padding: var(--margin);
		grid-template-columns: repeat(2, 1fr);
	}
	/* fi Portada */

}



@media all and (max-width: 500px){
	/* Portada */
	.portadaBlog{
		grid-template-columns: repeat(1, 1fr);
	}
	/* fi Portada */
}



@media all and (max-width: 314px){
	
}



@media all and (max-width: 250px){
	
}