@import url('https://fonts.cdnfonts.com/css/telegraf');
			a{
				font-family: 'Telegraf', sans-serif;
			}

			a:link,
            a:visited {
                color: blue;
				font-family: 'Telegraf', sans-serif;
            }
			
            <?php //endif; ?>
			
			a:hover {
                color: blue;
				text-decoration: underline;
                opacity: .75;
            }
			
			body{
				background-color: white;
			}
			
			h1, h2{
					color: #008539;
					font-family: 'Telegraf', sans-serif;
				}
			h3{
					color: #008539;
					font-family: 'Telegraf', sans-serif;
			
			}
			h4, h5, h6{
					color: black;
					opacity: .75;
					font-family: 'Telegraf', sans-serif;
				}
			
			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: 115px;
				z-index: 1;
				padding: 0px 280px 0px 350px;
				justify-content: flex-start;

			}
			
			header nav:before {
				display: none;
			}

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

			header nav .open {
				max-width: none;
				position: relative;
				display: flex;
				width: 100%;
				z-index: 1;
				background-color: transparent;
				padding: 10px;
				justify-content: space-between;
				
			}
			@import url('https://fonts.googleapis.com/css?family=Oswald:500');
			.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: 0%;
				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{
				display: flex;
				flex-direction: row;
				max-width: 1250px;
				margin:0 auto;
				margin-top: -220px;
				background-color: white;
				padding-left: 0px;
				padding-right: 0px;
				padding-top: 0px;
				padding: 0px;
			}
			
			.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: 1545px;
				width: 90%;
				margin-top: 20px;
			}
			
			.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: #008539;
			}

			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: 30px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			
			.logoImg {
				height: 40px;
				margin: 40px 10px 0 0;
			}
			
			.logoImg:hover {
				filter: brightness(1.2)!important;
			}
			
			.logoUab{
				font-family: 'Hubot Sans';
				font-size: 15px;
				color: #008539;
				font-weight: bold;
				height: 24px;
			}
			.logoUab2{
				font-family: 'Hubot Sans';
				font-size: 30px;
				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: 10px 40px 0px 280px;
			}
			.site-title{
				font-family: 'Telegraf', 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;
			}

			/*--------------------HUB-----------*/
			.list-of-sites{
				background-color: #FFFFFF;
			}
			.list-of-sites .site-list{
				display:flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: flex-start;
			}
			.list-of-sites .site-list .site:first-child {
				margin: 10px;
				width:450px;
				height: 180px;
			}
			.list-of-sites .site-list .site:last-child {
				margin: 10px;
				width:450px;
				height: 180px;
			}
			
			.list-of-sites .site-list .site-link {
				display: block !important;
			}
			.list-of-sites .site-list .site{
				margin: 10px;
				width: 450px;
				height: 180px;
				padding: 25px;
				overflow: hidden !important;

				box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
			}
			.list-of-sites .site-list .site:hover{
				transform: scale(1.035);
				z-index: 999;
				
			}
			.site-thumbnail-image{
				height:100px;
				width:100px;
			}

			.site-summary {
				/*-------Aquest codi es el qur retalla el text------*/
				display: block;
 				text-overflow: ellipsis;
  				word-wrap: break-word;
  				overflow: hidden;
  				max-height: 3.8em;
  				line-height: 1.8em;
			}
			.filter{
				width: 25%;
				margin-right: 15px;
				margin-left: 20px;
				margin-top: 20px;
			}
			button {
				border-radius: 2px;
				font-size: 14px;
				padding: 7.5px;
				border: 0;
				cursor: pointer;
			}
			
/*-------------items-----------------*/
body.resource #content>h2:first-of-type+h3, body.resource #content>.item-sets{display:none}