/* Section-level structural CSS: containers, header, menu, hero, wrapper, feature grid. */

/* by JoãoZardo */
	.articlesTable2 {
		display: none;
	}

	.imgfull{
		max-width: 100% !important;
	}

/* Containers: the articlesTable1/2 toggle is grid-adjacent, not part of the grid itself,
   and stays until Phase 10 replaces the underlying articlesTable pattern. */

	@media screen and (max-width: 1280px) {

		.articlesTable1 {
			display: none;
		}

		.articlesTable2 {
			display: block;
		}

	}

		/* a class, sub-class of row that affects how the images at the bottom of the about page are formatted */
		.pictureGallery {
			display: flex;
			display: -webkit-flex; /* Safari */
			flex-wrap: wrap;
			justify-content: left;
		}

		.pictureGallery div a h5{
			margin-top: 1.2em;
		}

		.pictureGallery > * {
			float: none;
			display: inline-block;
			position: relative;
			line-height: 1.4em;
			margin: 0 0 2.0em 0;
		}

		.aboutLiLink {
			position: absolute;
			bottom: 1px;
			left: 50%;
		}

		@media screen and (max-width: 980px) {
			.pictureGallery > * {
				max-width: 25%;
			}
		}

		@media screen and (max-width: 736px) {
			.pictureGallery > * {
				max-width: 25%;
				align-content: left;
			}

			.pictureGallery > div .image.round.fit{
				max-width: 80%;
			}
		}

		@media screen and (max-width: 640px) {
			.pictureGallery > * {
				max-width: 25%;
			}
		}

		@media screen and (max-width: 480px) {
			.pictureGallery > * {
				max-width: 33%;
			}
		}

	body {
		background: var(--page-bg);
	}

		body.zero-top-padding {
			padding-top: 0;
		}

		@media screen and (max-width: 980px) {

			body {
				padding-top: 0;
			}

		}

		@media screen and (max-width: 480px) {

			body {
				padding-top: 0;
			}

		}

/* Feature */

	.feature-grid .feature {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2em;
	}

		.feature-grid .feature .image {
			width: 16.67%;
			padding: 0 0 0 2em;
		}

		.feature-grid .feature .content {
			width: 83.33%;
			padding: 0 0 0 2em;
		}

		.feature-grid .feature .image img {
			display: inline;
			max-width: 100%;
		}

		.feature-grid .feature:nth-child(odd) {
			flex-direction: row-reverse;
		}

			.feature-grid .feature:nth-child(odd) .content,
			.feature-grid .feature:nth-child(odd) .image {
				text-align: right;
			}

		.feature-grid .feature:nth-child(even) .content,
		.feature-grid .feature:nth-child(even) .image {
			text-align: left;
		}

		@media screen and (max-width: 736px) {

			.feature-grid .feature {
				margin-bottom: 1em;
			}

				.feature-grid .feature .image,
				.feature-grid .feature .content {
					width: 100%;
					padding: 0 0 1em 0;
				}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}


	section.special p:last-child {
		margin-bottom:0;
	}

	header p {
		color: #aaa;
		position: relative;
		margin: 0 0 1.5em 0;
		text-transform: uppercase;
	}

	header h1 {
		line-height: 0.7em;
	}

	header h2 {
		line-height: 1em;
	}

	header h3 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.5em;
	}

	header h4 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
		line-height: 1.5em;
	}

	header h5 + p,
	header h6 + p {
		font-size: 1.1em;
		margin-top: -0.6em;
		margin-bottom: -0.6em;
		line-height: 1em;
	}

	header.smallmargin h1,
	header.smallmargin h2,
	header.smallmargin h3,
	header.smallmargin h4,
	header.smallmargin h5,
	header.smallmargin h6 {
		margin-top: 0em;
		margin-bottom: 0.3em;
		}

	header.tinymargin {
		margin-top: 0;
		margin-bottom: 0.1em;
		line-height: 1.2em;
		}

	header.tinymargin h1,
	header.tinymargin h2,
	header.tinymargin h3,
	header.tinymargin h4,
	header.tinymargin h5,
	header.tinymargin h6 {
		margin-top: 0em;
		margin-bottom: 0.05em;
		}

	/* Standalone versions: apply directly to a heading, no <header> wrapper
	   needed. New pages should use these; header.smallmargin/tinymargin
	   above stay for existing pages that still use the wrapper pattern. */
	.smallmargin {
		margin-top: 0em;
		margin-bottom: 0.3em;
		}

	.tinymargin {
		margin-top: 0em;
		margin-bottom: 0.05em;
		}

/* Wrapper */

	body.is-touch .wrapper.styleImage {
		background-attachment: scroll;
	}

	.wrapper {
		padding: 3em 0 3em 0;
	}

		div.wrapper {
		padding: 2em 0 2em 0;
		}

		.wrapper.styleWhite {
			background-color: var(--section-bg-white);
		}

		.wrapper.styleGrey {
			background: linear-gradient(var(--topleft-to-bottomright), var(--section-bg-grey1), var(--section-bg-grey2));
		}

		.wrapper.styleTeal {
			background: linear-gradient(var(--topleft-to-bottomright), var(--section-bg-teal1), var(--section-bg-teal2));
		}


		.wrapper.styleImage {
			background-attachment: fixed;
			background-color: #a0a0a0;
			background-position: center center;
			background-size: cover;
			color: var(--text-color-white);
		}

			.wrapper.styleImage.scroll {
				background-attachment: scroll;
			}

			.wrapper.styleImage a {
				color: var(--text-color-white);
			}

			.wrapper.styleImage .teal {
				color: #C4D8E4;
			}

			.wrapper.styleImage header h1,
			.wrapper.styleImage header h2,
			.wrapper.styleImage header h3 {
				margin-bottom: 0;
				color: var(--text-color-white);
			}

			.wrapper.styleImage header h4,
			.wrapper.styleImage header h5 {
				margin-bottom: 0;
				color: #C4D8E4;
			}

			.wrapper.styleImage .largemargin h2{
				margin-top:0.7em;
				margin-bottom:0.3em;
			}

			.wrapper.styleImage .largemargin h4{
				margin-bottom: 1em;
			}

			@supports (-webkit-overflow-scrolling: touch) {
					.wrapper.styleImage { background-attachment: scroll; }
				}

		@media screen and (max-width: 980px) {

			.wrapper {
				padding: 4em 0 2em 0;
			}

		}

		@media screen and (max-width: 736px) {

			.wrapper {
				padding: 3em 0 1em 0;
			}

		}

		@media screen and (max-width: 480px) {

			.wrapper {
				padding: 2em 0 0.1em 0;
			}

		}

/* Header */

	#header {
		background-color: #ffffff;
		border-bottom: solid 1px rgba(144, 144, 144, 0.25);
		box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
		color: #383838;
		cursor: default;
		font-size: 1.25em;
		height: 4.5em;
		left: 0;
		line-height: 4.4em;
		position: fixed;
		text-transform: uppercase;
		top: 0;
		width: 100%;
		z-index: 12;
	}

		#header.fixed {
			position: fixed;
		}

		#header h1 {
			color: #383838;
			font-weight: 400;
			height: inherit;
			line-height: inherit;
			margin: 0 0 0 1.25em;
			padding: 0;
			position: absolute;
			top: 0;
		}

		#header .logo {
			color: #383838;
			font-weight: 400;
			height: inherit;
			line-height: inherit;
			margin: 0 0 0 1.5em;
			padding: 0;
			position: absolute;
			top: 0;
			display: flex;
			align-items: center;
		}

		#header img {
			vertical-align: middle;
		}

		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 1.25em;
			top: 0;
			vertical-align: middle;
		}

			#header nav #last-item {
				padding: 5px 10px;
				display: inline;
				border-radius: 3px;
				box-shadow: inset 0 0 0 1px var(--color-grey-40);
				transition: color 0.1s, background-color 0.1s;
			}

					#header nav #last-item:hover {
						box-shadow: inset 0 0 0 1px var(--color-grey-30);
				}

			#header nav ul {
				list-style: none;
				margin: 0;
				padding-left: 0;
			}

				#header nav ul li {
					border-radius: 4px;
					display: inline-block;
					margin-left: 1.5em;
					padding-left: 0;
				}

						#header nav ul li a {
						-moz-transition: color 0.2s ease-in-out;
						-webkit-transition: color 0.2s ease-in-out;
						-ms-transition: color 0.2s ease-in-out;
						transition: color 0.2s ease-in-out;
							color: var(--color-grey-40);
						display: inline-block;
						text-decoration: none;
					}

							#header nav ul li a:hover {
							color: var(--color-grey-30);
						}

					#header nav ul li:first-child {
						margin-left: 0;
					}

					#header nav ul li .button {
						border-color: rgba(144, 144, 144, 0.25);
						box-shadow: none;
						height: 3em;
						line-height: 2.9em;
						margin-bottom: 0;
						padding: 0 1.5em;
						position: relative;
						top: -0.075em;
						vertical-align: middle;
					}

						/* Dropdown in navbar*/

						/* style the dropdown list */
						#header ul.sub-nav{
							position: absolute;
							display: block;
							opacity: 0;
							transition: opacity .2s;

							list-style-type: none;
							font-size: 0.7em;
							line-height: 3em;
							z-index: 11;

							padding: .4em;
							width: 16em;
							margin-left: -0.6em;
							margin-top: -0.6em;

							color: var(--text-color-regular);
							background-color: #ffffff;
							background-image: url("../../images/dropdown textures/ag-square.png");

							border-style: solid;
							border-width: .5px .5px .8px .7px;
							border-color: black;
							border-radius: 5px;
							-webkit-box-sizing: border-box;
							-moz-box-sizing: border-box;
							box-sizing: border-box;

						}

						/*style the dropdown list items*/
						#header nav .sub-nav li {
							width: 100%;
							box-sizing: border-box;
							margin-left: 0;
							padding: .3em .3em;
							font-size: 1.1em;
							line-height: 1.5em;
							transition: background-color .2s;
						}

						/*add borders between list items*/
						#header nav .sub-nav li:not(:last-child){
							border-bottom: 1px solid #ececec;
						}

						/* style the dropdown list items' links */
						#header .sub-nav li a{
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							color: var(--color-grey-40);
							padding-top: 0.3em;
							padding-left: 0.2em;
							padding-right: 0.2em;
							transition: color .2s;
						}

						/* Ensure dark submenu link text on home page header variant */
						#header.alt .sub-nav li a{
							color: var(--color-grey-40);
						}

						/* show dropdown items on hovering over the dropdown button */
						#header nav li:hover .sub-nav{
							opacity: 0.9;
							display: block;
						}

							/* on hovering over a dropdown item button change the background colour */
							#header nav li .sub-nav li:hover{
								background-color: #ebebeb;
							}

		#header .container {
			position: relative;
		}

			#header .container h1 {
				left: 0;
			}

			#header .container h2 {
				left: 0;
			}

			#header .container nav {
				right: 0;
			}

		#header.alt {
			background-color: transparent;
			border: 0;
			box-shadow: none;
			height: 3.25em;
			line-height: 3.25em;
			position: absolute;
		}

			#header.alt h1 {
				color: var(--text-color-white);
				left: 2.5em;
				top: 2em;
			}

				#header.alt h1 a {
					color: #ffffff;
				}

			#header.alt h2 {
				color: var(--text-color-white);
				left: 2.5em;
				top: 2em;
			}

				#header.alt h2 a {
					color: #ffffff;
				}

			#header.alt nav {
				right: 2em;
				top: 2em;
			}

				#header.alt nav a {
					color: #d0d0d0;
				}

					#header.alt nav a:active, #header.alt nav a:hover {
						color: #ffffff;
					}

					/* Home page submenu: keep dark link color even on hover */
					#header.alt .sub-nav li a { color: var(--color-grey-40); }
					#header.alt .sub-nav li a:hover,
					#header.alt .sub-nav li:hover > a { color: var(--color-grey-30); }

				#header.alt nav #last-item {
				box-shadow: inset 0 0 0 1px var(--color-grey-d0);
			}

					#header.alt nav #last-item:hover {
					box-shadow: inset 0 0 0 1px var(--color-white);
				}


			#header.alt .button {
				border-color: rgba(255, 255, 255, 0.5);
				color: var(--button-text);
			}

		@media screen and (max-width: 980px) {

			#header {
				display: none;
			}

		}

		@media screen and (max-width: 1280px) {

			#header .logo{
				left: 0.7vw;
			}

			#header nav ul li{
				margin-left: 1.75vw;
			}

		}

	/* Offsets the #top jump target so the fixed header does not cover the content it scrolls to. */
	a[name="top"] {
		scroll-margin-top: 4.5em;
	}

/* Menu */

	.navPanelToggle {
		text-decoration: none;
		height: 50px;
		left: 0;
		position: fixed;
		top: 0;
		width: 80px;
		display: none;
		vertical-align: bottom;
		margin-bottom:10px;
		z-index: 15;
	}

		.navPanelToggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
				text-transform: none;
		}

		@media screen and (max-width: 980px) {

			.navPanelToggle {
				display: block;
			}

			#topimage{
				margin-top:20px;
			}

		}

		.navPanelToggle *:before {
			background: rgba(144, 144, 144, 0.65);
			border-radius: 4px;
			color: var(--text-color-white);
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: relative;
			text-align: center;
			top: 0.5em;
			width: 3.5em;
		}

	#navPanel {
		-moz-transform: translateX(-20em);
		-webkit-transform: translateX(-20em);
		-ms-transform: translateX(-20em);
		transform: translateX(-20em);
		-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		left: 0;
		top: 0;
		background: #020202;
		color: #ffffff;
		height: 100%;
		max-width: 70%;
		width: 20em;
		padding: 0.5em 1.25em;
		text-transform: uppercase;
		font-size: 1.3em;
		z-index: 16;
	}

		#navPanel ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

			#navPanel ul li {
				padding: 0.2em;
			}

				#navPanel ul li:first-child a:not(.button), #navPanel ul li:first-child span:not(.button) {
					border-top: 0;
				}

					#navPanel ul li a:not(.button){
				border-top: solid 1px var(--color-grey-40);
					color: var(--color-white);
					display: block;
					padding: 0.75em 0;
					text-decoration: none;
				}


				/* Dropdown Items */

				#navPanel ul li span{
					display: none;
					transition: visibility 0s, opacity 0.5s linear;
				}

				/* don't show borders for sub-list of tools */
				#navPanel ul li > .sub-nav a{
					border-top: 0;
				}

				#navPanel ul li > .sub-nav{
					display: none;
					opacity: 0;
				}

				#navPanel ul li .sub-nav li,
				#navPanel .alt li .sub-nav li{
					margin-left: 1.0em;
					padding: 0;
					font-size: 90%;
					margin-top: -0.3em;
				}

		#navPanel ul li.expanded > .sub-nav {
					display: block;
					opacity: 1;
				}



		#navPanel .button {
			width: 100%;
		}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #a0a0a0;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

			@media screen and (max-width: 736px) {

				#navPanel .close {
					height: 4em;
					line-height: 4em;
				}

			}

		#navPanel.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

/* Top Banner */

	#top-banner {
		background-attachment: fixed;
	}

		body.is-touch #top-banner {
			background-attachment: scroll;
		}

		@supports (-webkit-overflow-scrolling: touch) {
			#top-banner { background-attachment: scroll; }
		}

	#top-banner {
		vertical-align: middle;
		padding: 12vw 0 8vw 0;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: clamp(120%, calc(120% + 100% * (1280px - 100vw) / 960px), 220%);
		position: relative;
		line-height: 1.75;
		min-height: 200px;
		max-height: 850px;
	}

		#top-banner:last-child {
			margin-bottom: 0;
		}

		#top-banner div.container {
			padding-top: 80px;
		}

		#top-banner h1{
			color: var(--text-color-white);
			display: inline-block;
			font-size: clamp(1.497rem, 2.741vw + 0.949rem, 3.827rem);
			line-height: 1.2em;
			margin-bottom: 0.5em;
		}

		#top-banner h2{
			color: #d0f0F8;
			margin-bottom: 1.75em;
			line-height: 1.3em;
		}

		/* Hero variants with a CTA button run taller; trim the gaps around the button to keep the image covering the box. */
		#top-banner.with-buttons div.container {
			padding-top: 40px;
		}

		#top-banner.with-buttons h2{
			margin-bottom: 1.4em;
		}

		@media screen and (max-width: 980px) {

			#top-banner div.container {
				padding-top: 20px;
			}

		}

		@media screen and (max-width: 736px) {

			#top-banner br {
				display: none;
			}

		}

/* Main */

	#main {
		padding-top: 4em;
	}

		@media screen and (max-width: 736px) {

			#main {
				padding-top: 2em;
			}

		}

	#topimage {
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		padding: 0;
	}

		@media screen and (max-width: 980px) {

			#topimage{
				margin-top:20px;
			}

		}

		/* for mobile screen hide the img element and use the image as a background for the container element */

		@media screen and (max-width: 736px) {

			#topimage .image.fit{
				text-align:center;
				background-size: cover;
				background-position: center center;
				width:100%;
				height:220px;
				min-height:130px;
				max-height:300px;
			}

			#topimage .image.fit img{
				display:none;
			}

		}

		@media screen and (max-width: 500px) {

			#topimage .image.fit{
				text-align:center;
				background-size: cover;
				background-position: center center;
				width:100%;
				height:150px;
				min-height:130px;
				max-height:300px;
			}

			#topimage .image.fit img{
				display:none;
			}

		}

	#one {
		padding: 1.5em 0 1em 0;
	}

		@media screen and (max-width: 736px) {

			#one {
				padding: 1em 0 0.8em 0;
			}

		}

	#two {
		padding: 3em 0 3em 0;
	}

		#two .block-container {
			display: -ms-flexbox;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			-moz-justify-content: space-between;
			-webkit-justify-content: space-between;
			-ms-justify-content: space-between;
			justify-content: space-between;
			-ms-flex-pack: justify;
			margin-left: 6em;
			margin-right: 6em;
		}

		#two .block-container article {
			width: 28%;
			display: block;
			padding: 0;
		}

			#two .block-container article h4 {
				margin: 0;
			}

			#two .block-container article p {
				color: var(--text-color-regular);
			}

			#two .block-container article .icon {
				color: #b0b0b0;
				font-size: 3em;
			}


		@media screen and (max-width: 980px) {

				#two .block-container {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					#two .block-container article {
						width: 100%;
						margin: 0 auto;
					}

			}

		@media screen and (max-width: 736px) {

			#two {
				padding: 2em 0 1em 0;
			}

		}

	#three {
		padding: 5em 0 5em 0;
	}

		#three .block-container {
			display: -ms-flexbox;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			-moz-justify-content: space-between;
			-webkit-justify-content: space-between;
			-ms-justify-content: space-between;
			justify-content: space-between;
			-ms-flex-pack: justify;
			margin-left: 6em;
			margin-right: 6em;
		}

		#three .block-container article {
			width: 28%;
			display: block;
			padding: 0;
		}

			#three .block-container article h4 {
				margin: 0;
			}

			#three .block-container article p {
				color: var(--text-color-regular);
			}

			#three .block-container article .icon {
				color: #b0b0b0;
				font-size: 3em;
			}


		@media screen and (max-width: 980px) {

				#three .block-container {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					#three .block-container article {
						width: 100%;
						margin: 0 auto;
					}

			}

		@media screen and (max-width: 736px) {

			#three {
				padding: 3em 0 3em 0;
			}

		}