/*
// arnAu bellavista 2025
// RKOR Experience
// Estils CSS Menús i Modals
*/

/* Estils Menús i Modals */
@media all{
	/* Menú desplegable */
	.checkboxDes{
		display: none;
	}
	.hamburguesa{
		display: none;
	}

	/* Capes MODALS */
	.modalInfo{
		cursor: pointer;
	}
	.modalIcona{
		display: inline;
		width: 34px;
		margin: 0;
		padding: 0 0 0 var(--marge);
		color: var(--color-text);
		opacity: 0.38;
		transition: var(--transicio);
	}
	.modalIcona:hover{
		opacity: 0.75;
	}

	#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){
	/* Menú desplegable */
	aside{
		position: fixed;
		z-index: 11;
		top: 0;
		right: -75vw;
		width: 75vw;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		transition: all .5s ease;
			display: flex;
			align-items: flex-end;
			background-color: #transparent;
	}
	.desplegableFons{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-color: var(--color-fons);
		opacity: 0.92;
	}
	
	/* Hamburguesa i Checkbox */
	.hamburguesa{
		z-index: 11;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		position: fixed;
		top: 0;
		right: 0;
		width: 70px;
		height: 180px;
		padding: var(--marge-mig);
		font-size: 82px;
		color: var(--color-clar);
		line-height: 39px;
		cursor: pointer;
		transition: all .5s ease;
	}
	.checkboxDes:checked ~ aside {
		right: 0;
	}
	.checkboxDes:checked ~ .hamburguesa {
		right: 75vw;
	}
	/* Fi Menú desplegable */
}




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