/*
// arnAu bellavista 2022
// RKOR Experience
// Estils CSS Menús, formularis i Modals
*/

@media all{
	
	/* FORMULARIS */
	input[type=text],
	input[type=email],
	select{
		font-family: 'Oswald Light';
		font-size: 14px;
		width: 180px;
		margin: 0 0 var(--marge-mig) 0;
		padding: var(--marge-quart);
		border: 0;
		border-radius: 2px;
		padding: var(--marge-quart) var(--marge-mig);
		color: var(--color-text);
		background-color: var(--color-fons);
		transition: var(--transicio);
	}
	
	input[type=text]::placeholder {
		color: var(--color-text);
		opacity: 0.8;
	}
	
	button{
		font-family: 'Oswald Light';
		margin: var(--marge-quart) 0;
		padding: var(--marge-quart) var(--marge-mig);
		color: var(--color-text);
		border: 0 solid var(--color-gris-fosc);
		border-radius: 2px;
		background-color: var(--color-fons);
		transition: var(--transicio);
		cursor: pointer;
	}
	button:hover{
		opacity: 0.8;
		background-color: var(--color-gris-fosc);
	}
	button:active{
		color: var(--color-fons);
		background-color: var(--color-primer);
	}
	
		#cercaResultats{
			display: flex;
			flex-direction: column;
		}
		.ciutats{
			font-family: 'Oswald Light';
			font-size: 16px;
			text-align: left;
			margin: 1px 0;
			padding: var(--marge-quart) var(--marge-mig);
			color: var(--color-text);
			background-color: var(--color-fons);
			border: 0 solid var(--color-gris-fosc);
			clear: both;
		}
		.ciutats:hover{
			color: var(--color-text);
			background-color: var(--color-gris-fosc);
		}
		.ciutats:active{
			color: var(--color-fons);
			background-color: var(--color-primer);
		}
	

	/* Capes MODALS */
	.info{
		float: right;
		display: flex;
	}
	
	.modalInfo{
		margin: 0;
		padding: 0;
		font-size: 18px;
		color: var(--color-text);
		background-color: var(--color-fons);
		border: 0;
		border-radius: 8px;
		box-shadow: 0px 0px 7px var(--color-fons);
		transition: var(--transicio);
		cursor: pointer;
	}
	.modalInfo:hover{
		opacity: 0.75;
	}
	
	.i{
		display: inline;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		font-size: 25px;
		border-radius: 25px;
	}

	#modalFons{ /* Fons */
		z-index: 20;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.6);
	}

	.modal{
		z-index: 20;
		display: none;
		position: absolute;
		top: 120px;
		left: 10%;
		right: 10%;
		padding: var(--marge);
		/* box-shadow: 0 0 42px 0 var(--color-text); */
		color: var(--color-text);
		background-color: var(--color-fons);
		border-radius: 4px;
	}
		
	.tanca{
		color: var(--color-gris-clar);
		float: right;
		font-size: 32px;
		font-weight: bold;
		transition: var(--transicio);
	}
	.tanca:hover, .tanca:focus{
		color: var(--color-primer);
		text-decoration: none;
		cursor: pointer;
	}
	
}





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

}




@media all and (max-width: 576px){
	.modalInfo{
		width: 28px;
	}
}




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