:root {
	--primary-colour: #37724f;
	--secondary-colour: #fe8f24;
}

* {box-sizing: border-box}

a {color: #335ECA; font-weight: normal; text-decoration: none; transition: 0.3s}
a:hover {color: #B30000}
a.tabledrag-handle .handle {padding: 1em 1em}
body {background: #FFF; color: #444; font-family: Arial; font-size: 18px; line-height: 150%; margin: 0; padding: 0; width: 100%}
h1 {color: #37724f; font-size: 36px; line-height: 130%}
h2 {color: #37724f}
h2.center-rule {display: flex; align-items: center; color: #1f3a2b; font-size: 36px; justify-content: center; margin: 60px 0; text-align: center; width: 100%}
h2.center-rule:before, h2.center-rule:after {border-top: 1px solid #888; content: ''; flex: 1 0 20px; margin: 0 20px 0 0}
h2.center-rule:after {margin: 0 0 0 20px}
h3 {color: #37724f; font-size: 26px; font-weight: normal}
strong {font-weight: bold}
ul {list-style-type: square}

#banner {float: left; width: 100%}
#banner img {height: 600px !important}
#footer-container {background: #F4F4F4}
#main-container #content > div {display: flex; flex-direction: column}

.region-container {float: left; width: 100%}
.region-help {background: #F4F4F4}

/* GENERAL */
* {box-sizing: border-box}

.col-0 {display: none}
.col-1 {width: 8.33%}
.col-2 {width: 16.66%}
.col-3 {width: 25%}
.col-4 {width: 33.33%}
.col-5 {width: 41.66%}
.col-6 {width: 50%}
.col-7 {width: 58.33%}
.col-8 {width: 66.66%}
.col-9 {width: 75%}
.col-10 {width: 83.33%}
.col-11 {width: 91.66%}
.col-12 {width: 100%}

[class*="col-"] {float: left}

#block-htec-local-tasks {border-color: #E4E4E4; border-style: solid; border-width: 2px 0; margin-bottom: 30px; width: 100%}
#block-htec-local-tasks > ul {list-style-type: none; margin: 0; padding: 0}
#block-htec-local-tasks > ul li {display: inline-block}
#block-htec-local-tasks > ul li a {display: block; padding: 10px 20px}
#block-htec-local-tasks > ul li a:hover {background: #E4E4E4}

.views-management {float: left; border-bottom: 1px #E4E4E4; margin-bottom: 30px; padding-bottom: 30px; width: 100%}

div[data-drupal-messages] {background: #E2FDE5; border: 2px solid #9AC69E; color: #587C5B; margin-bottom: 20px; padding: 10px 20px}
.path-frontpage div[data-drupal-messages] {display: none}

/* Views feed pager */
nav.pager {display: flex; justify-content: center; width: 100%}
nav.pager li {display: block; float: left}
nav.pager li[role="presentation"] {cursor: not-allowed}
nav.pager li a, nav.pager li[role="presentation"] {display: block; border: 1px solid #E4E4E4; margin-left: -1px !important; padding: 10px 15px}
nav.pager li.is-active a {background: var(--primary-colour); border-color: var(--primary-colour); color: #FFF}
nav.pager li:hover:not(.is-active) a {background: #F4F4F4}
nav.pager ul {list-style-type: none; padding: 0}

/* Views item admin link */
.view-content .admin-links {position: absolute; right: 5px; top: 5px; display: flex; border: 1px solid #DDD; font-size: 14px; z-index: 1}
.view-content .admin-links a {background: #FFF; padding: 0 5px}
.view-content .admin-links a:hover {background: #AAA; color: #FFF !important}

/* BUTTONS */
.management {margin-bottom: 20px}
.management .view-content > div {width: 100%}
.admin-buttons {display: flex; background: #F4F4F4; gap: 30px; padding: 10px 20px; width: 100%}
.admin-buttons .admin-button {background: #DDD; color: #444; padding: 10px 20px}
.admin-buttons .admin-button:hover {background: #CCC}
.dnfta-button a {display: block; background: #37724f; color: #FFF; font-size: 20px; padding: 10px 20px; text-align: center; transition: 0.3s}
.dnfta-button a:hover, .dnfta-button.admin a:hover {background: #1f3a2b; color: #FFF}
.dnfta-button.admin a {background: #1f3a2b}
.dnfta-button.left {float: left; margin-right: 10px}
.dnfta-button.hollow a {background: none; border: 2px solid var(--primary-colour)}
.dnfta-button.hollow a:hover {background: var(--primary-colour); color: #FFF !important}

/* COOKIE COMPLIANCE */
#sliding-popup {background: #37724f; color: #FFF; padding: 10px; width: 100%}
#sliding-popup a {color: #FFF; text-decoration: underline}
#sliding-popup h2 {color: #FFF; font-size: 20px; margin: 0}
#sliding-popup p {font-size: 16px; margin: 0}
#sliding-popup .eu-cookie-withdraw-tab {float: left; background: #37724f; border: 0; color: #FFF; font-size: 16px; left: 0; padding: 5px 10px; transform: translate(0, -100%)}
#sliding-popup #popup-buttons button {display: block; float: left; background: #FFF; border: 0; border-radius: 30px; color: #37724f; font-size: 20px; margin: 0 5px; padding: 10px 20px; text-align: center; transition: 0.3s}
#sliding-popup button:active, #sliding-popup button:focus, #sliding-popup button:hover {background: #1f3a2b; color: #FFF; outline: none}

/* FEEDS */
.feed-container {display: flex; flex-direction: column; width: 100%}
.feed-container.column .dnfta-button {display: flex; margin-top: 10px}
.feed-container.column .feed-item {border-bottom: 1px dashed #DDD; margin-bottom: 30px; padding-bottom: 30px}
.feed-container.column .feed-image a {display: flex; align-items: center; justify-content: center; max-height: 200px; max-width: 200px}
.feed-container.row .feed-item {flex-direction: column}
.feed-container.row .view-content {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between}
.feed-body p {margin: 10px 0}
.feed-date {color: #888; font-size: 16px}
.feed-image img {height: auto; width: 100%}
.feed-item {position: relative; display: flex}
.feed-tags {color: #888; font-size: 15px}
.feed-subtitle {color: #AAA; font-size: 22px}
.feed-title {color: var(--primary-colour); font-size: 22px}
.feed-title.large {font-size: 30px; line-height: 130%; margin: 0 0 10px}

/* FOOTER */
#block-footersocialmediaandcontact img {float: left; padding: 0 5px}
#block-footersocialmediaandcontact #partners-button a {float: left; background: #888; color: #FFF; font-size: 24px; line-height: 140%; padding: 10px; transition: 0.3s}
#block-footersocialmediaandcontact #partners-button a:hover {background: #37724f}

#footer-content {float: left; width: 100%}

footer nav ul {list-style-type: none; padding: 0; margin: 0}
footer nav ul a {display: block; color: #666; font-size: 16px; padding: 5px 10px}
footer nav ul a:hover {background: #E4E4E4}

/* GALLERY */
.gallery .view-content {display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 30px}
.gallery .gallery-item {width: 31.3333%}
.gallery .gallery-item img {display: block; height: auto; width: 100%}

/* HEADER / PRE-HEADER */
#header-container {position: relative; display: flex; flex-direction: column}
#header-container .centered {display: flex; justify-content: space-between}

#block-htec-branding {max-width: 250px}
#block-htec-branding img {width: 100%}

#block-htec-search {position: absolute; right: 20px; top: 10px}
#block-htec-search #search-block-form div {float: left}
#block-htec-search #edit-keys {background: #F4F4F4; border: 0; font-size: 18px; padding: 6px; width: 250px}
#block-htec-search [id^="edit-submit"] {background: #37724f; border: 0; color: #FFF; cursor: pointer; margin-left: 10px; padding: 6px 15px; transition: 0.3s}
#block-htec-search [id^="edit-submit"]:hover {background: #1f3a2b; cursor: pointer}

#block-membernav {float: right}
#block-altnav {float: left}
.user-logged-in #block-membernav .menu a[title="Member login"] {display: none} /* Can be deleted once login link visibility is fixed in D9.1.x */

#superfish-members-menu {float: right}
#superfish-members-menu a {color: #FFF; font-size: 16px; padding: 10px 15px}
#superfish-members-menu a:hover {background: #1f3a2b}
.user-logged-in #superfish-members-menu a[title="Team login"], .user-logged-out #superfish-members-menu a[title="Project team area"] {display: none}

/* HOMEPAGE */
#intro h2 {color: #000; font-size: 2.2rem; font-weight: 800}
#intro-image img {height: auto; width: 100%}
.path-frontpage #block-htec-content h2 {margin-top: 0}

[id^='block-divider-'] {float: left; width: 100%}

#block-links-homepage .view-content {display: flex; flex-wrap: wrap; justify-content: space-around}
#block-links-homepage .button-link {display: flex; align-items: center; flex-direction: column; text-align: center; max-width: 400px}
#block-links-homepage .button-link h2 {margin: 10px 0}
#block-links-homepage .dnfta-button {margin-top: 10px}

/* IMAGES */
.align-center {text-align: center}

/* MEDIA */
figure {text-align: center}
figure.align-center {margin: auto; max-width: 600px}
figure.align-left, figure.align-right {max-width: 370px}
figure figcaption {background: #F4F4F4; color: #666; font-size: 16px; padding: 3px 10px; text-align: center}
.align-right img, .align-left img {border: 2px solid #EEE; padding: 2px}

[data-entity-type~="media"] iframe {height: 450px; width: 100%}

/* NEWS */
#block-news-homepage footer {margin: 30px auto; width: 100%; max-width: 700px}

/* OUTPUTS */
.outputs-feed .output {float: left; margin-bottom: 40px; width: 100%}
.outputs-feed .output .output-date {color: #1f3a2b; font-size: 22px; border-bottom: 3px solid #37724f; margin-bottom: 5px; padding-bottom: 5px}
.outputs-feed .output .output-title {color: #37724f; font-size: 26px}

#views-exposed-form-outputs-outputs-feed {background: #F4F4F4; margin-bottom: 30px; padding: 20px}
#views-exposed-form-outputs-outputs-feed legend {color: var(--primary-colour); font-size: 20px}
#views-exposed-form-outputs-outputs-feed .form-checkboxes {display: flex; flex-wrap: wrap; margin: 10px 0}
#views-exposed-form-outputs-outputs-feed .form-checkboxes .form-item {padding: 0 10px}

/* TEAM MEMBERS / PARTNERS */
#block-partners-team-logos {float: left; margin-bottom: 20px; width: 100%}

.logo-list h3 {float: left; border-bottom: 2px solid #DDD; margin: 0; padding-bottom: 10px; width: 100%}
.logo-list .feed-title {overflow: hidden; overflow-wrap: break-word; word-wrap: break-word}
.logo-list .feed-title a {font-size: 16px}
.logo-list .partner {align-items: center}
.logo-list .view-content {display: flex; border-bottom: 1px dashed #CCC; gap: 20px; margin-bottom: 30px; padding-bottom: 30px}

/* USER LOGIN FORM */
#user-login-form .form-item {margin-bottom: 15px}
#user-login-form .form-item [id*="-description"] {font-size: 14px}
#user-login-form .form-item input {font-size: 22px; padding: 5px 10px}



/* @MEDIA SCREEN SIZE STYLES */
/* ========================= */

/* MOBILE-ONLY STYLES */
/* ------------------ */
@media only screen and (max-width: 600px) {
	#banner {display: none}
	#content {padding: 20px}
	#right {display: none}
	
	#introicon { display: none; }
	
	/* FOOTER CONTENT */
	footer nav {float: left; padding-right: 5%; width: 50%}
	
	#footer-content {padding: 20px}
	#block-footersocialmediaandcontact {float: left; margin: 20px 0; width: 100%}
	#block-footersocialmediaandcontact img {float: left; width: 50%}
	#block-footersocialmediaandcontact #partners-button a {margin-top: 10px; width: 100%}
	
	/* HEADER */
	#block-htec-search {display: none}
	#block-sitenav {float: left; background: #37724f; margin-top: 150px; padding: 10px 20px 0; width: 100%}
	#block-sitenav a {color: #FFF; font-size: 22px; padding: 15px 0}
	#block-sitenav ul a {font-size: 20px; margin-left: 20px}
	#block-sitenav ul ul a {font-size: 18px; margin-left: 40px}
	
	#superfish-members-menu-accordion .sf-depth-1 {color: #FFF; font-size: 16px; padding: 5px 0 5px 20px}
	#superfish-members-menu-toggle {color: #FFF; font-size: 16px; padding: 5px 20px}
	
	/* HOMEPAGE */
	#block-links-homepage .button-link {float: left; margin: 20px 0; width: 100%}
	#block-twitter-homepage {display: none}
	
	/* MEDIA */
	[data-entity-type~="media"] iframe {height: auto; width: 100%}
	[data-entity-type~="media"][class*="align-"] {float: none; margin: auto}
	[data-entity-type~="media"][class*="align-"] img {height: auto; width: 100%} 
	
	
	/* TEAM MEMBERS / PARTNERS */
	#block-partner-list {text-align: center}
	#block-partner-list .feed-image {width: 100%}
	#block-partner-list .feed-title a {display: block; clear: both}
	#block-partner-list .partner {float: left; margin: 20px 0; width: 100%}

	/* USER LOGIN FORM */
	#user-login-form .form-item, #user-pass .form-item {display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 25px}
	#user-login-form .form-item .description {display: none}
	#user-login-form .form-item input, #user-pass .form-item input {font-size: 22px; padding: 5px 10px; width: 100%}
	#user-login-form .form-item label, #user-pass .form-item label {background: #F4F4F4; font-weight: bold; padding: 10px; text-align: right}
}

/* MOBILE AND TABLET STYLES */
/* ------------------------ */
@media only screen and (max-width: 1024px) {	
	[class*="col-"] {width: 100%}

	#block-breadcrumbs {display: none}
	
	/* COOKIE COMPLIANCE */
	#sliding-popup #popup-buttons {float: left; margin-top: 20px}

	/* FEEDS */
	.feed-container.column .feed-item {display: block}
	.feed-container.column .feed-image {float: right; margin: 0 0 20px 20px; width: 100px}

	/* HEADER */
	#block-main-menu, #preheader {display: none}

	#header-content .centered > div:first-child {flex-basis: 80%}
	#header-content .centered > div:nth-child(2) {display: flex; align-items: stretch; flex-basis: 20%}
	#block-menu-icon {display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; width: 100%}
	#block-menu-icon .icon, #block-menu-icon a:after, #block-menu-icon a:before {background: var(--primary-colour)}
	#block-menu-icon .label {display: none}
	.responsive-menu-toggle-icon:before, .responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon span.icon {height: 5px; width: 30px}
	.responsive-menu-toggle-icon:after {top: 5px}
	.responsive-menu-toggle-icon:before {top: 23px}

	/* HOMEPAGE */
	#intro {margin: 30px 0}
	#intro-image {margin-bottom: 20px}

	/* NEWS */
	.feed-container.row .feed-item {border-bottom: 1px dashed #DDD; margin-bottom: 20px; padding-bottom: 20px}

	/* TEAM MEMBERS / PARTNERS */
	.logo-list .view-content {display: flex; align-items: center; border-bottom: 1px dashed #CCC; flex-direction: column; gap: 20px; margin-bottom: 30px; padding-bottom: 30px}
	.logo-list .partner {display: flex; align-items: center; flex-direction: column; text-align: center}
}


/* TABLET-ONLY STYLES */
/* ------------------ */
@media only screen and (min-width: 601px) and (max-width: 1024px) {

}


/* TABLET AND DESKTOP STYLES */
/* ------------------------- */
@media only screen and (min-width: 601px) {
	/* BANNER */
	#block-banner-homepage {float: left; width: 100%}
	#block-banner-homepage img {height: auto !important; width: 100%}
}


/* DESKTOP-ONLY STYLES */
/* ------------------- */
@media only screen and (min-width: 1024px) {
	/* Breadcrumb */
	#block-breadcrumbs {background: #F4F4F4}
	#block-breadcrumbs nav {font-size: 16px; margin: auto; padding: 5px 0; max-width: 1200px}
	#block-breadcrumbs nav a {color: var(--primary-colour)}
	#block-breadcrumbs nav a:hover {text-decoration: underline}
	#block-breadcrumbs nav li {float: left; padding: 0 10px}
	#block-breadcrumbs nav li:not(:first-child):before {content: "> "; padding: 0 15px 0 0}
	#block-breadcrumbs nav ol {display: flex; list-style-type: none; margin: 0; padding: 0}

	body:not(.path-frontpage) #main-container #content {padding-right: 40px}
	
	/* Remove the horizontal overflow because there was a scrollbar */
	body { overflow-x: hidden; } 

	#main-container {padding: 40px 0; z-index: 10}
	.centered {position: relative; margin: auto; width: 1200px}
	
	/* FEEDS */
	.feed-details {flex-basis: 75%}
	.feed-image {flex-basis: 25%; padding-right: 20px}
	
	/* FOOTER */
	footer nav {float: left; margin-right: 30px}
	
	#block-footersocialmediaandcontact {position: absolute; right: 0; bottom: 0}
	#block-footersocialmediaandcontact #partners-button {float: left; margin-left: 5px}
	#block-footersocialmediaandcontact #partners-button a {height: 150px; width: 120px}
	#footer-content {padding: 40px 0}
	#footer-content .centered > div {position: relative; float: left; width: 100%}
	
	/* HEADER */
	#preheader {float: left; background: #37724f; width: 100%}

	#block-menu-icon {display: none}
	#block-main-menu {position: absolute; bottom: 10px; right: 10px}
	#block-main-menu nav {display: flex}
	#horizontal-menu {display: flex; align-items: stretch; gap: 20px; justify-content: flex-end}
	#horizontal-menu > li {display: flex; align-items: flex-end}
	#horizontal-menu > li.menu-item--active-trail > a {border-color: var(--primary-colour); color: var(--primary-colour); font-weight: bold}
	#horizontal-menu > li > a {border-bottom: 5px solid #FFF}
	#horizontal-menu > li > a:hover {border-color: var(--secondary-colour)}
	#horizontal-menu > li > a.is-active {border-bottom: 5px solid var(--primary-colour); color: var(--primary-colour); font-weight: bold}
	#horizontal-menu > .menu-item > a {display: flex; background: none; box-sizing: content-box; color: #555; font-size: 16px; padding: 5px; text-transform: uppercase; transition: 0.2s}
	#horizontal-menu .sub-nav {background: #EEE}
	#horizontal-menu .sub-nav > .menu-item > a {color: var(--primary-colour); font-size: 16px; padding: 8px 20px; text-transform: none}
	#horizontal-menu .sub-nav > .menu-item > a:hover {background: #D4D4D4}

	/* GAIA removed the margin-top from the logo */
	/* GAIA turned header width resize off */
	body:not(.path-frontpage) #block-htec-branding img {margin-top: 10px; height: auto; } /* width: 180px */
	
	#block-sitenav {position: absolute; top: 102px; right: 0}
	#block-sitenav .menu a {color: #444; font-size: 18px; padding: 15px 20px}
	#block-sitenav .menu a:not(.is-active):hover {background: #dfe6e9}
	#block-sitenav .menu ul {background: #FFF}
	#block-sitenav .menu .is-active {background: #37724f; color: #FFF}
	
	/* HOMEPAGE */
	.flexslider {border: 0}
	
	#intro {display: flex; padding: 20px 150px 60px}
	#intro .dnfta-button {display: flex}
	#intro-image {flex-basis: 35%; padding: 50px 0 0 30px; order: 2}
	#intro-text {flex-basis: 65%; order: 1}
	#block-links-homepage {position: relative; left: 50%; right: 50%; background: var(--primary-colour); color: white; margin-left: -50vw; padding: 60px 20px; width: 100vw}	
	#block-links-homepage .button-link {display: flex; flex-direction: column; padding: 0 30px; width: 33.3333%}
	#block-links-homepage .view-content {margin: auto; width: 1200px}
	#block-links-homepage h2 {color: #FFF}
	
	/* MEDIA */
	[data-entity-type~="media"] iframe {height: 450px; width: 100%}
	.align-right {margin: 5px 0 15px 20px}

	/* NEWS */
	.feed-container.row .feed-item {flex-basis: 31.3333%}

	/* TEAM MEMBERS / PARTNERS */
	.logo-list .view-content {display: flex; flex-direction: column; gap: 20px}
	.logo-list .partner {display: flex; gap: 20px}
	.logo-list .partner .logo {text-align: center; width: 150px}
	.logo-list .partner img {height: auto; width: auto}
	
	/* TEAM AREA */
	#block-forums {border-top: 2px solid #E4E4E4}
	#block-forums header {float: left; margin-bottom: 30px; width: 100%}
	#block-forums table {border-collapse: separate; border-spacing: 4px; width: 100%}
	#block-forums table th {background: #888; color: #FFF; text-align: left}
	#block-forums td, #block-forums th {padding: 5px 10px}
	
	.page-node-type-forum article[id^='comment-'] {float: left; border-left: 5px solid #DDD; clear: both; margin: 20px 0 20px 30px; padding-left: 20px}
	.page-node-type-forum article footer {border-color: #E4E4E4; border-style: solid; border-width: 2px 0; padding: 5px 0; width: 100%}
	.page-node-type-forum h1 {margin-bottom: 10px}
	.page-node-type-forum section > h2 {float: left; border-top: 5px solid #37724f; margin-top: 30px; padding-top: 20px; width: 100%}
	.page-node-type-forum .links.inline {list-style-type: none; padding: 0}
	.page-node-type-forum .links.inline li {float: left; font-size: 14px; margin-right: 10px}
	
	#comment-form {float: left; background: #F4F4F4; padding: 20px; width: 100%}
	#comment-form .js-filter-wrapper {display: none}

	/* User login */
	#user-login-form .form-item input, #user-pass .form-item input {width: 80%}
	#user-login-form .form-item label, #user-pass .form-item label {width: 20%}
}

/* May 2022 by GAIA */

/* Replaced all instances of #60B23C with #37724f */
/* Replaced all instances of #4A9728 with #37724f */
/* Replaced all instances of #C8CA37 with #1f3a2b */
/* Replaced all instances of #dfe6e9 with #a2a2a2 */
/* Replaced all instances of #AF9908 with #1f3a2b */
/* Replaced all instances of #A1C98F with #37724f */
/* Replaced all instances of #1f3a2b with #1f3a2b */
/* Removed all instances of dashed in borders */

/* Misc. changes */
footer a { color: #37724f !important; }
footer a:hover { color: #1f3a2b !important; }
footer nav ul a { color: #666 !important; }
footer nav ul a:hover { color: #333 !important; }
	
#introtext2 { font-weight: bold !important; }	

.introtextheader { font-weight: bold !important; } 

#homepagebutton a { background-color: #fe8f24 !important; }
#homepagebutton a:hover { background-color: #ea791c !important; }

.center-rule { color: black !important; }

a { color: #37724f; }
a:hover { color: #1f3a2b; }

#block-htec-search #edit-keys { font-size: 0.7em;
								width: 200px; }
								
								
#block-divider-news-homepage { padding-top: 35px; }						

/* Changing the overview section to green */

#block-htec-search #edit-submit { font-size: 14px; 
								  padding: 7px 15px !important; }	

#block-links-homepage .dnfta-button a { background-color: #1f3a2b !important; }

.link-image a { background-color: transparent !important; }

.link-image img { padding-top: 6%; 
				  padding-bottom: 3%;
				  width: 80% !important;
				  margin-left: 11% !important;}
				  
#block-footersocialmediaandcontact #partners-button a { color: white !important;
														background-color: #B2B2B2;}
#block-footersocialmediaandcontact #partners-button a:hover { color: #666 !important;
													background-color: #b2b2b2; }
													
#superfish-members-menu a { font-size: 14px; }