@import url('telegraf.css');
	
			
			header {
				max-width: none;
				padding: 0 0 0;
				width: 100%;
				background-color: transparent;
				margin-bottom: 0px;
				margin: 0px 0px 0px 0px;
			}

			.headerUAB {
				max-width: none;
				position: relative;
				display: flex;
				width: 100%;
				height: 4rem;
				z-index: 1;
				background: linear-gradient(to right, white, #d4d8de);
				padding: 0px 0px 0px 30px;
				justify-content: flex-start;

			}
			
			header nav:before {
				display: none;
			}

			header nav{
				padding: 0px 0px 0px 40px;
				background-color: #008539;
			}

			header nav .open {
				max-width: none;
				position: relative;
				display: flex;
				width: 100%;
				z-index: 1;
				background-color: black;
				padding: 10px;
				justify-content: space-between;
				
			}
			@import url('css@family=Oswald%253A500.css');
			.menu_title {
				font-family: 'Oswald', sans-serif;
				text-transform: uppercase;
			}
			
			.menu_title:hover {
				color:black !important;
			}
			header nav.open {
				margin: 15px 0 0px;
			}

			header nav ul.navigation {
				margin-left: -7.5px;
				position: static;
				display: flex;
				align-items: flex-end;
				height: auto;
			}
			
			header nav ul.navigation>li {
				margin-right: 0px;
				padding-left: 10px;
				padding-right: 10px;
				float: none;
				border-bottom: 0px solid #dedede;
			}
			
			
			header nav ul.navigation>li a {
				color: white;
				padding-left: 5px;
    			padding-right: 5px;
				text-decoration: none;
                opacity: 100%; 
				font-size: 20px;
				font-weight: bold;
				border: 2px solid transparent;
			}
			header nav ul.navigation>li a:hover {
				border: 2px solid white;
				
			}
			
			header nav ul.navigation>li.parent a:hover {
				border: 2px solid white;
				border-width: 40%;
			}
			
			/*-----------------------------------------*/
			
			
			header nav ul.navigation>li ul li a {
				    color: black;
					text-decoration: none;
					opacity: 100%;
					line-height: 25px;
					font-size: 16px;
					font-weight: bold;
					max-width: 300px;
			}
			
			header nav ul.navigation>li ul li a:hover {
				color: #008539;
			}
			
			h1.site-title {
				font-size: 32px;
				height: 50px;
				padding: 0;
				padding-right: 0px;
    			padding-left: 30px;
				margin: 0;
				overflow: hidden;
				
				line-height:0px;
				line-height:50px;
				
				color: #008539;
				font-family:'Telegraf', sans-serif;
				text-decoration: none;
                opacity: 100%;
			}

			header nav ul.navigation>li>ul {
				background-color: #fff;
				padding: 0;
				list-style: none;
				width: 100%;
				padding: 14px 0 6.5px;
				z-index: 1;

			}
			
			#search{
    			top: 12px;
				left: 80%;
    			margin-right: 75px;
				border: 1px solid #dedede;
				display: none;
			}
			
			/*-------------Contingut de la p脿gina-----------*/
			#content{
				max-width:1280px;
				margin:0 auto;
				margin-top:2%;
				padding-left: 0px;
				padding-right: 0px;
				padding-top: 0px;
				padding: 0px;
				display: flex;
				flex-direction: column;
			}
			
			.sub-menu{
				margin-right: 50px;
				margin-top: 50px;
				width: 100%;
				max-width: 150px;
			}
			
			.sub-menu ul{
				    border-bottom: 0px solid #dedede;
			}
			
			.sub-menu li{
				width: 140px;
				border-top: 0px solid black;
    			padding-top: 0px;
				margin-bottom: 5px;
				border-bottom: 1px solid black;
			}
			
			.blocks{
				padding: 0px;
				max-width: 1350px;
			}
			
			.site-page-pagination{
					display: none;
			}
			
			
			/*--------------------ITEMS----------------------------*/
			
			#contentItem{
				display: flex;
				flex-direction: column;
				max-width: 1500px;
				margin-top: 90px;
				margin-left: 310px;
				padding-right: 190px;
				
				
			}
			
			dt{
				font-size: 25px;
				color: #008539;
				margin-bottom: 8px;

				text-decoration: none;
                opacity: 100%;
				
			}
			.media-embeds{
				/*text-align: center;*/
			}
			
			/*-------------------Pare del sub menu-----------------------------*/
			 header nav ul.navigation li.parent {
				/*display: flex;*/
				position: static;
				/*flex-direction: column;*/
				padding-bottom: 0px;
			}

			header nav>ul>li>a {
				margin: 7.5px
			}

			header nav>ul>li>.parent-link {
				display: inline-block;
				width: 75%
			}

			header nav>ul>li>.parent-link>a {
				margin: 7.5px;
				width: 120%;
				padding-left: 5px;
				padding-right: 35px;
			}

			/*-------------------Bot贸 del sub menu------------------------*/
			
			header nav ul .child-toggle {
				display: none;
			}
			
			.subSwitch{
				cursor: pointer;
			}
			
			.fa-solid {
				font-size: 25px;
    			color: white;
    			margin-top: 10px;
				margin-right: 10px;
				margin-left: 5px;
			}
			
			.fa-solid:hover{
				color: white;
			}
			

			/*-------------------Contingut del sub menu------------------------*/
			
			.subMenuClosed {
				display: none !important;
			}
			
			.subMenuOpen {
				display: block;
			}
		
			 header nav ul.navigation li ul:before {
				display: none;
			}
			
		
			header nav ul.navigation>li>ul>li {
				width: 100%;
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 10px;
				padding-top: 10px;
			}
			
			header nav ul.navigation>li>ul>li:last-child {
    			border-bottom: 0px solid;
				margin-bottom: 0px;
			}
		
			
			header nav ul.navigation>li:not(:last-child) {
				margin-right: 0px;
				border-bottom: 0px solid white;
			}

			header nav ul.navigation>li>ul {
				    display: flex;
					position: absolute;
					background-color: white;
					box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.2);
					list-style: none;
					max-width: 225px;
					padding: 0px 20px 0px 20px;
					flex-direction: column;
					flex-wrap: nowrap;
			}
			
		
			header nav ul.navigation>li.parent>ul>li:hover a{
				color: #cccccc;
			}

			header nav ul.navigation ul ul {
				height: 0
			}
			
			
			/*-----------------------Sub-Menu (dins de la pagina)-------------------------------*/
			
			.breadcrumbs {
				font-size: 18px;
				font-family: 'Telegraf', sans-serif;
				margin: 30px 0 15px 0px;
				padding-left:10px;
				width: auto;
				display: inline-block;
				background-color: #e3e3e3;
			}
			
			/*------------------------------------------------------------*/
			
			header>* {
    			padding: 0;
			}

            .banner {
				background-size: 100% <?php echo $bannerHeight; ?>;
				margin-top: 0px;
            }
			
			.noImageBanner {
				display: flex;
			}
			
			
            @keyframes collapsed {
				
  				from {
    				/*width: 0%;*/
					transform: translateX(0px);
					width: auto;
  				}

  				to {
    				/*width: 341px;*/
					transform: translateX(341px);
					width: 0%;
  				}
			
				
			}
			
			header nav ul.navigation.collapsed {
				display: none;
    			position: absolute;
    			right: 0;
    			margin-right: 0px;
    			padding-top: 7px;
    			top: 64px;
    			background-color: #008539;
				width:550px;
				line-height: 60px;
				animation: collapsed 0.5s;
			}
			
			
			@keyframes pressed {
				
  				from {
    				/*width: 0%;*/
					transform: translateX(341px);
  				}

  				to {
    				/*width: 341px;*/
					transform: translateX(0px);
  				}
			
				
			}
			
			header nav ul.navigation.pressed {
    			display: block;
    			position: absolute;
    			right: 0;
    			margin-right: 0px;
    			padding-top: 0px;
    			top: 64px;
    			background-color: black;
				width: auto;
				width:550px;
				height: 1415px;
				line-height: 60px;
				animation: pressed 0.5s;
			}
			
			@keyframes fa {
  				0% { transform: scale(1); }
  				50% { transform: scale(0.8); }
 				100% { transform: scale(1); }
			}
			
			.fa {
				width:32px;
    			color: black;
    			margin-top: 0px;
				margin-right: 10px;
				margin-left: 5px;
				cursor: pointer;
				animation: fa 0.15s;
			}
			
			
			.fa:hover {
				filter: brightness(1.2);
				cursor: pointer;
			}
			@keyframes fa-window-close {
  				0% { transform: scale(1); }
  				50% { transform: scale(0.8); }
 				100% { transform: scale(1); }
			}
			
			.fa-window-close{
				width:32px;
    			color: black;
    			margin-top: 0px;
				margin-right: 10px;
				margin-left: 5px;
				animation: fa-window-close 0.15s;
			}
			
			/*----Text del banner----*/
			
			.bannerText {
  				text-align: center;
  				position: absolute;
  				top: 50%;
  				left: 50%;
  				transform: translate(-50%, -50%);
  				width: 750px;
			}
			
			.bannerText p{
				color: white;
			}
			
			.bannerText h2{
				margin-top: 50px;
				color: white;
			}
			
			/*-------------header-----------------*/
			
			.logoContainer{
				display:flex;
				text-align: center;
				justify-content: center;
				height: 70px;
				max-width:999999px;
				background-color: transparent;
			}
			
			.idk{
				margin-top: 5px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			
			.logoImg {
				height: 35px;
				margin: 15px 10px 0 0;
			}
			
			.logoImg:hover {
				filter: brightness(1.2)!important;
			}
			
			.logoUab{
				font-family: 'Hubot Sans';
				font-size: 13px;
				color: #008539;
				font-weight: bold;
				height: 20px;
			}
			.logoUab2{
				font-family: 'Hubot Sans';
				font-size: 26px;
				font-weight: bold;
				color: #008539;
			}
			
			.uab_logo_bib:hover{
				text-decoration: none;
				filter: brightness(1.2)!important;
			}
			
			.menu_div{
				display: flex;
				margin: 12px 0px 12px 0px;
				align-items: center;
			}
			
			.menu_div_title{
				display: inline;
				padding-right: 10px;
				font-size: 20px;
			}
			
			
			
				.title_div{
				padding: 15px 40px 0px 30px;
			}
			.site-title{
				font-family: 'Mona-Sans', sans-serif;
				font-size: 30px;
				font-weight: bold;
				color: black !important;
				margin: 10px 0px 10px 0px;
			}
			
			.site-title:hover{
				color: #008037 !important;
				cursor: pointer;
			}
			.sub-title{
				color: gray;
				font-family: 'Telegraf', sans-serif;
				margin: 10px 0px 10px 0px;
			}
			
/*-------------items-----------------*/


.item.resource.show > #content .title,
.item.resource.show > #content h2 ~ h3,
.item.resource.show .item-sets,
.item.resource.show .site-pages {
    display: none;
}

.item.resource.show #content {
    margin: 0 auto;
    padding: 0 3%;
}

.item.resource.show .with-sidebar.item {
    display: flex;
    flex-wrap: wrap;
}

.item.resource.show .with-sidebar.item > .media-embeds {
    flex: 1;
    max-width: 100%; /* Changed to 100% for smaller screens */
    box-sizing: border-box; /* Added box-sizing */
    padding: 1rem; /* Added padding */
}

.item.resource.show .with-sidebar.item > .detalls {
    flex: 1; /* Changed to 1 so both elements take equal width */
    max-width: 100%; /* Changed to 100% for smaller screens */
    box-sizing: border-box; /* Added box-sizing */
    border-left: 2px solid #ccc; 
   
    padding: 1rem; /* Added padding */
}

.detalls .property dt {
    font-size: 1.1em;
    font-weight: bold;
     padding-left: 3%; /* Removed negative margin */
}

.detalls .value-content {
    margin-left: -40px; /* Removed negative margin */
     padding-left: 3%; /* Removed negative margin */
}

/* Estilo para el caso específico .document */
.item.resource.show .with-sidebar.item.document {
    flex-direction: column; /* Fuerza la disposición en columna */
}

.item.resource.show .with-sidebar.item.document > .media-embeds,
.item.resource.show .with-sidebar.item.document > .detalls {
    flex: 1; /* O flex: 0 0 auto; si quieres que el tamaño dependa del contenido */
    max-width: 100%; /* Asegura que ocupen todo el ancho */
    border-left: none; /* Elimina el borde izquierdo en .detalls */
}

/* Opcional: Espacio entre los elementos en columna */
.item.resource.show .with-sidebar.item.document > .media-embeds + .detalls {
    margin-top: 1rem; /* Ajusta el espaciado según necesites */
/* Media query for smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .item.resource.show .with-sidebar.item > .media-embeds,
    .item.resource.show .with-sidebar.item > .detalls {
        border-left: none; /* Removed border on smaller screens */
        margin-left: 0; /* Removed negative margin */
        flex: 1 1 100%; /* Each takes full width */
        max-width: 100%; /* Ensure full width */
        padding: 1rem; /* Consistent padding */
    }
    .item.resource.show .with-sidebar.item {
        flex-direction: column; /* Stack elements vertically */
    }
}

/*-------------Media-----------------*/


.media.resource.show > #content .title,
.media.resource.show > #content h2 ~ h3,
.media.resource.show .item-sets,
.media.resource.show .site-pages,.media-parent-item {
    display: none;
}

.media.resource.show #content {
    margin: 0 auto;
    padding: 0 3%;
}

.media.resource.show .with-sidebar.item {
    display: flex;
    flex-wrap: wrap;
}

.media.resource.show .with-sidebar.item > .media-embeds {
    flex: 1;
    max-width: 100%; /* Changed to 100% for smaller screens */
    box-sizing: border-box; /* Added box-sizing */
    padding: 1rem; /* Added padding */
}

.media.resource.show .with-sidebar.item > .detalls {
    flex: 1; /* Changed to 1 so both elements take equal width */
    max-width: 100%; /* Changed to 100% for smaller screens */
    box-sizing: border-box; /* Added box-sizing */
    border-left: 2px solid #ccc; 
   
    padding: 1rem; /* Added padding */
}


/* Estilo para el caso específico .document */
.media.resource.show .with-sidebar.item.document {
    flex-direction: column; /* Fuerza la disposición en columna */
}

.media.resource.show .with-sidebar.item.document > .media-embeds,
.media.resource.show .with-sidebar.item.document > .detalls {
    flex: 1; /* O flex: 0 0 auto; si quieres que el tamaño dependa del contenido */
    max-width: 100%; /* Asegura que ocupen todo el ancho */
    border-left: none; /* Elimina el borde izquierdo en .detalls */
}

/*Espacio entre los elementos en columna */
.media.resource.show .with-sidebar.item.document > .media-embeds + .detalls {
    margin-top: 1rem; /* Ajusta el espaciado según necesites */
    
/* Media query for smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .media.resource.show .with-sidebar.item > .media-embeds,
    .media.resource.show .with-sidebar.item > .detalls {
        border-left: none; /* Removed border on smaller screens */
        margin-left: 0; /* Removed negative margin */
        flex: 1 1 100%; /* Each takes full width */
        max-width: 100%; /* Ensure full width */
        padding: 1rem; /* Consistent padding */
    }
    .media.resource.show .with-sidebar.item {
        flex-direction: column; /* Stack elements vertically */
    }
}

/*-------------------Galería---------------------------*/
/*..... important: els elements de la Galeria els trobarem al layout, ja que te preferència el css del mòdul blocks....*/		

/*--FOOTER--*/

footer {
    display: flex;
    justify-content: center;
    background-color: black;
    clear: both;
    overflow: hidden;
    padding: 24px;
    margin-top: 24px;
    border-top: 1px solid #000;
    width: 100%;
}

address {
    line-height: 1.5;
    margin: 0 0 2rem 0;
    font-style: normal;
}

.footerContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 90%; /* Changed to percentage */
    max-width: 1850px; /* Added max-width */
    flex-wrap: wrap; /* Added flex-wrap */
}

.contactInfo,
.legal {
    width: 45%; /* Changed to percentage */
    box-sizing: border-box; /* Added box-sizing */
    padding: 1rem; /* Added padding */
}

.contactInfo {
    margin-right: 0; /* Removed fixed margin */
    margin-bottom: 2rem; /* Added margin for smaller screens */
}

.contactTitle,
.legalTitle {
    color: white;
    font-weight: 400;
    border-bottom: solid white;
}

.legalList {
    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
}

.legalList li {
    display: inline-block;
    padding: 0.35rem 0;
    margin: 0 1rem 0 0;
}

.legalList li a {
    font-size: 16px;
    text-decoration: none;
    color: #00cb1b;
    border-bottom: 0.2rem solid;
}

.footerLogo {
    background-image: url(logo_n_2.svg);
    width: 12rem;
    height: 7rem;
    background-repeat: no-repeat;
    order: -1; /* Place logo at the top on smaller screens */
    flex: 1 1 100%; /* Make logo take full width */
    margin-bottom: 2rem;
}

.contactLinks {
    text-decoration: none;
    color: #00cb1b !important;
    border-bottom: 0.2rem solid;
}

address p {
    color: white !important;
    margin-bottom: 0px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .contactInfo,
    .legal {
        width: 100%; /* Full width on smaller screens */
        margin: 1rem 0; /* Adjusted margin */
    }

    .footerContent {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center content horizontally */
    }
    .footerLogo {
      order: -1; /* Ensure logo is first */
    }
}	
/*--------------iframe block external content----*/
.item.resource300{width:640px!important;height:320px!important}
.item.resource300 >iframe{width:420px!important;height:315px!important}
/*--------------block html----*/		
.column2{columns:2}
.column3{columns:3}