/* Estils CSS Baseºº */
/* NAVBAR */
@media all{
	/* BARRA DE NAVEGACIÓ SUPERIOR */
	.barramenu nav ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0 40px;
        overflow: hidden;
        background-color: var(--navbar-bgcolor);
		/* background: linear-gradient(to bottom, #cccccc 0%, #eeeeee 100%); */
		/* text-align: center; */
    }
    .barramenu nav li {
        display: inline-block;
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    .barramenu nav li a {
        display: block;
        margin: 0;
        padding: 12px 14px;
		font-size: var(--text-height16);
		line-height: var(--line-height18);
		color: var(--menu-color);
        text-decoration: none;
        text-align: center;
        background-color: transparent;
    }
	
	.barramenu .active{
        background-color: var(--menu-link);
    }
	
    .barramenu nav li a:hover {
        color: var(--menu-link);
        background-color: var(--menu-active-link);
    }
    .barramenu .dropdown-content {
        display: none;
        position: absolute;
        background-color: var(--navbar-bgcolor);
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    .barramenu .dropdown-content a {
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .barramenu .dropdown:hover .dropdown-content {
        display: block;
    }
    .barramenu {
        z-index: 1000;
		position:sticky;
		top: 0;
        width: 100%;
        min-height: 15px;
		background-color: var(--navbar-bgcolor);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    }
	/* Posa el menú a l'esquerra dins del max-width */
	.menudes {
		max-width: var(--page-width);
		margin: 0 auto;
	}
		/* CODI PER LA VERSIÓ MÒBIL */
		.hamburguesa {
			display: none; /* Ocultem l'hamburguesa */
		}
		.barramenu > .checkbox {
			display: none; /* Ocultem el checkbox */
		}
	
	/* Text petit */
	.textbm01{
		display: none;
		color: var(--background-color);
	}
	.textbm01 a:link { color: var(--font-active-link); text-decoration: none}
	.textbm01 a:visited { color: var(--font-active-link); text-decoration: none}
	.textbm01 a:active { color: var(--font-link); text-decoration: none}
	.textbm01 a:hover { color: var(--font-link); text-decoration: none}
}




@media all and (max-width: 780px){
	/* MENÚ VERSIÓ MÒBIL */
	.hamburguesa {
		z-index: 1010;
		position: fixed;
		display: inline;
		top: 20px;
		right:14px;
		width: 75px;
		height: 40px;
		text-align: right;
		background-color: transparent;
		transition: all .5s ease;
			color: var(--menu-color);
			padding: 0px;
			font-family: Times New Roman;
			font-size: 70px;
			font-weight: bold;
	}
	
	.menudes {
		z-index: 1011;
		position: fixed;
		top: 0;
		width: 70%;
		left: -75%;
		height: 100vh;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: var(--navbar-responsive-bgcolor);
		box-shadow: 0px 0px 25px rgba(0,0,0,0.6);
		transition:all .5s ease;
	}
		
		/* BARRA MENÚ DESPLEGABLE */
		.barramenu {
			min-height: 55px;
		}
		.barramenu nav ul {
			top: 0px;
			width: 100%;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			height: 100vh;
			background-color: var(--navbar-responsive-bgcolor);
		}
		.barramenu nav li {
			float: left;
			width:100%;
			border-bottom: 1px solid var(--medium-color);
			text-align: left;
		}
		.barramenu nav li a {
			font-size: var(--text-height20);
			text-align: left;
			padding: 14px 16px;
			background-color: transparent;
		}
		/* Herda les característiques de l'estil general
		.menudes li a:hover:not(.active) {
			background-color: #cccc00;
		}
		*/
		.menudes .active a {
			color: var(--menu-link);
			background-color: var(--menu-color);
		}
			/* HAMBURGUESA i CHECKBOX */
			.checkbox:checked ~ .menudes {
				left: 0px; /* Eliminem el left negatiu perquè el menú torni a la posició original */
				position: fixed; /* Fixem el menú lateral perquè es desplaci quan fem scroll */
			}
			.checkbox:checked ~ .hamburguesa {
				width:100%;
				height:100%;
			}
			/* Fem que l'hamburguesa es desplaci enganxada al menú
			.checkbox:checked ~ .hamburguesa { 
				left:300px;
				position:fixed;
			}
			*/
		.textbm01{
			display: block;
		}
}