/*
==============================================
custom fonts
==============================================
*/
@font-face {
  font-family: 'Gellix';
  font-style: normal;
  font-weight: normal;
  src: url('/css/fonts/Gellix-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'GellixBold';
  font-style: normal;
  font-weight: bold;
  src: url('/css/fonts/Gellix-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'GellixItalic';
  font-style: italic;
  font-weight: normal;
  src: url('/css/fonts/Gellix-RegularItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos';
  font-style: normal;
  font-weight: normal;
  src: url('/css/fonts/tiempos-text-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'TiemposItalic';
  font-style: italic;
  font-weight: normal;
  src: url('/css/fonts/tiempos-text-regular-italic.woff2') format('woff2');
}


/*
==============================================
custom properties
==============================================
*/
:root {  
	--primary-color: #053c40; /* Evergreen */
	--secondary-color: #06e9ae; /* Bright green */  

	--link-color: #3266D5; /* RoyalBlue */
	--link-color-hover: #2853a8; /* Dark RoyalBlue */
	--alert-color: #ff6347; /* Tomato */
	
	--button-bg: #00535c; /* teal */  
	--button-bg-hover: #00434a; /* darker teal */  
	--button-color: #fefefe;
	
	--font-sans-regular: 'Gellix', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--font-sans-bold: 'GellixBold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--font-sans-italic: 'GellixItalic', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	
	--font-serif-regular: 'Tiempos', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--font-serif-italic: 'TiemposItalic', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	
	--color-gray: #f1f2f2;
	--color-black: #383c41;
}



/*
==============================================
brand
==============================================
*/
.button.brand,
.button.brand-dark {
	border-radius: 1.25rem;
	font-family: var(--font-sans-regular);
	padding: 0.5rem 1.5rem;
}
.button.brand {
	color: var(--primary-color);
	background-color: var(--secondary-color);
}
.button.brand-dark {
	color: var(--secondary-color);
	background-color: var(--primary-color);
}

/*
==============================================
helper classes
==============================================
*/
.lead {
	font-size: 135%;
	line-height: 1.35;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.radius {
    border-radius: 0.25rem;
}

/*
==============================================
sticky footer
https://css-tricks.com/a-clever-sticky-footer-technique/
==============================================
*/
html, body {
	height: initial;
	min-height: 100%;
}
body > footer {
	position: sticky;
	top: 100vh;
}



/*
==============================================
website
==============================================
*/
body {
	background-color: #f2f2f2;
	color: var(--primary-color);
	font-family: var(--font-sans-regular);
}

b,
strong {
	font-family: 'GellixBold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
}
em {
  font-style: 'GellixItalic';
}
b {
  font-weight: 600;
}


a {
	color: var(--primary-color);
}
a:hover,
a:focus {
	color: var(--secondary-color);
}

hr {
	height: 1px;
}
hr.brand {
	border-bottom-color: var(--primary-color);
}


h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans-regular);
}
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-family: var(--font-sans-bold);
	font-weight: bold;
}
.heading-styled {
	color: var(--primary-color);
	font-family: var(--font-sans-bold);
	font-weight: bold;
}
.heading-styled--secondary {
	color: var(--secondary-color);
}
h1.heading-styled,
h2.heading-styled {
	letter-spacing: -1px;
}


h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  line-height: 0;
  color: inherit;
}

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.5rem; }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }



/*
==============================================
tables
==============================================
*/
caption {
	font-weight: 600;
	font-size: 1rem;
	text-align: left;
}
tbody td {
	font-size: 0.9rem;
	padding-bottom: 1rem;
	padding-top: 1rem;
}
thead th {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.6;
	padding-bottom: 1rem;
	padding-top: 1rem;
	text-transform: uppercase;
}

/*
==============================================
headers
==============================================
*/
.header-primary {
	background-color: #fff;
	display: block;
	position: sticky;
	top: 0;
	z-index: 999;
}
.header-primary__main {
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
}
.header-primary__main .grid-container {
	padding-left: 0;
	padding-right: 0;
}
.header-primary__logo img {
	display: inline-block;
	max-height: 3.5rem;
}

ul.nav-menu__box {
	display: flex;
	list-style: none;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}
ul.nav-menu__box li {
	padding: 0 0.375rem;
}
ul.nav-menu__box li a {
	font-family: var(--font-sans-bold);
	font-weight: bold;
	padding: 0.75rem;
	position: relative;
}
ul.nav-menu__box li a:hover,
ul.nav-menu__box li a:focus {
	color: inherit;
}
ul.nav-menu__box li a::before {
	content: "\00a0";
	background-image: url(/img/nav-icon.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px 14px;
	left: -6px;
	height: 14px;
	opacity: 0;
	position: absolute;
	top: 13px;
	/* top: 0; */
	/* transition: all 200ms ease; */
	width: 16px;
}
body[ data-nav='home'] ul.nav-menu__box li a[ data-nav='home']::before,
body[ data-nav='about'] ul.nav-menu__box li a[ data-nav='about']::before,
body[ data-nav='projects'] ul.nav-menu__box li a[ data-nav='projects']::before,
body[ data-nav='partners'] ul.nav-menu__box li a[ data-nav='partners']::before,
body[ data-nav='newsroom'] ul.nav-menu__box li a[ data-nav='newsroom']::before,
body[ data-nav='team'] ul.nav-menu__box li a[ data-nav='team']::before,
ul.nav-menu__box li a:hover::before,
ul.nav-menu__box li a:focus::before {
	opacity: 1;
	/* top: 13px; */
}
ul.nav-menu__box li a.header-button {
	color: var(--primary-color);
	background-color: var(--secondary-color);
	border-radius: 1.25rem;
	padding: 0.5rem 1.5rem;
}
ul.nav-menu__box li a.header-button::before {
	display: none;
}

#nav-menu__toggle,
label.nav-menu__btn {
	display: none;
}

@media screen and (max-width: 63.9375em) {
	.header-primary__main {
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
	}
	
	#nav-menu__toggle {
		position: fixed;
		opacity: 0;
		top: -200%;
		right: -100%;
	}
	
	#nav-menu__toggle:checked + label.nav-menu__btn > span {
		transform: rotate(45deg);
	}
	#nav-menu__toggle:checked + label.nav-menu__btn > span::before {
		top: 0;
		transform: rotate(0deg);
	}
	#nav-menu__toggle:checked + label.nav-menu__btn > span::after {
		top: 0;
		transform: rotate(90deg);
	}
	#nav-menu__toggle:checked ~ ul.nav-menu__box {
		right: 0 !important;
	}
	label.nav-menu__btn {
		color: var(--primary-color);
		cursor: pointer;
		display: inline-block;
		height: 26px;
		position: fixed;
		right: 1rem;
		top: 2.125rem;
		width: 26px;
		z-index: 1;
	}
	label.nav-menu__btn > span,
	label.nav-menu__btn > span::before,
	label.nav-menu__btn > span::after {
		background-color: var(--primary-color);
		display: block;
		height: 3px;
		position: absolute;
		transition-duration: .25s;
		width: 100%;
	}
	label.nav-menu__btn > span::before {
		content: '';
		top: -8px;
	}
	label.nav-menu__btn > span::after {
		content: '';
		top: 8px;
	}
	ul.nav-menu__box {
		display: block;
		position: fixed;
		top: 0;
		right: -100%;
		width: 300px;
		height: 100%;
		margin: 0;
		padding: 5rem 0 1rem 0;
		background-color: #fff;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
		transition-duration: .25s;
	}
	ul.nav-menu__box li a {
		display: inline-block;
		font-size: 1.25rem;
		padding: 0.75rem 1.5rem;
	}
	ul.nav-menu__box li a.header-button {
		font-size: 1rem;
		margin-left: 1rem;
		margin-top: 1rem;
	}
	ul.nav-menu__box li a::before {
		left: 4px;
		top: 21px;
	}
}


/*
==============================================
body-content, page-content
==============================================
*/
div.body-content {
	margin-left: auto;
	margin-right: auto;
	max-width: 75rem;
}	
	
/*
==============================================
footer
==============================================
*/
footer.footer-primary {
}
footer.footer-primary a {
	color: inherit;
}
footer.footer-primary a:hover {
	color: #fff;
}
footer.footer-primary p {
	margin-bottom: 0.5rem;
}
footer.footer-primary .footer-primary--left,
footer.footer-primary .footer-primary--right {
	padding: 3.5rem 2.5rem 3.5rem 2.5rem;
}
footer.footer-primary .footer-primary--left {
	background-color: var(--secondary-color);
	font-size: 0.875rem;
}
footer.footer-primary .footer-primary--right {
	background-color: var(--primary-color);
	color: #fff;
	font-size: 0.875rem;
}
footer.footer-primary .footer-primary--right h5 {
	color: var(--secondary-color);
	font-family: var(--font-sans-bold);
	font-weight: bold;
}
footer.footer-primary .footer-primary--right i {
	font-size: 1.25rem;
}

@media screen and (max-width: 63.9375em) {
	footer.footer-primary .footer-primary--left {
		background-color: var(--primary-color);
		color: #fff;
		padding-bottom: 0;
	}
	footer.footer-primary .footer-primary--right {
		padding-top: 0;
	}
}

/*
==============================================
sections
==============================================
*/
.section-page-heading {
	background-color: var(--primary-color);
	padding: 1rem;
	text-align: center;
}
.section-page-heading h1 {
	color: var(--secondary-color);
	font-size: 2rem;
	margin: 0;
}	
	
.section-1x,
.section-2x {
	font-size: 1.25rem;
	line-height: 1.4;
	overflow: auto; /* https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element */
}
.section-2x {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}
.section-2x > div {
	width: 50%;
}
.section-2x--primary {
	background-color: var(--primary-color);
	color: #fff;
}
.section-2x--primary a {
	color: var(--secondary-color);
}
.section-1x--secondary,
.section-2x--secondary {
	background-color: var(--secondary-color);
}
.section-2x--secondary a:hover,
.section-2x--secondary a:focus {
	color: inherit;
}
.section-1x--gray,
.section-2x--gray {
	background-color: var(--color-gray);
}
.section-1x--white,
.section-2x--white {
	background-color: #fff;
}
.section-1x--white a,
.section-2x--white a,
.section-1x--gray a,
.section-2x--gray a {
	color: #3a78fb;
}
.section-1x--white a:hover,
.section-1x--white a:focus,
.section-2x--white a:hover,
.section-2x--white a:focus,
.section-2x--gray a:hover,
.section-2x--gray a:focus {
	color: #2853ae;
}
.section-1x__text,
.section-2x__text {
	padding: 3.5rem;
}
.section-1x--padding {
	padding: 3.5rem;
}
.section-1x--1rem {
	font-size: 1rem;
}
.section-1x__text p {
	margin: 0 auto 1.5rem auto;
	max-width: 52.5rem;
}
.section-1x__text b {
	font-family: inherit;
}
.section-1x__text ul {
	margin: 0 auto 1.5rem auto;
	max-width: 52.5rem;
}
.section-2x__video  > div {
	height: 0;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 56.25%;
}
.section-2x__video > div iframe,
.section-2x__video > div object,
.section-2x__video > div embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.section-2x__image {
	background-position: bottom center;
	background-size: cover;
	align-self: stretch;
	min-height: 22rem;
}
.section-2x__image img {
	object-fit: cover;	
}

@media screen and (max-width: 39.9375em) {
	.section-2x > div {
		width: 100%;
	}		
	.section-2x__text {
		order: 2;
	}
	.section-2x__image,
	.section-2x__video {
		order: 1;
	}
}

.section-newsticker {
	background-color: var(--secondary-color);
	font-family: var(--font-sans-bold);
	font-weight: bold;
	line-height: 1.4;
	padding: 0.5rem 1rem;
	text-align: center;
}
.section-newsticker span {
	font-family: var(--font-sans-regular);
	font-weight: normal;	
}
.section-newsticker a:hover,
.section-newsticker a:focus {
	color: var(--color-black);
}

.section-trusticons {
	background-color: #fff;
	padding: 2rem 1rem 4rem 1rem;
	text-align: center;
}
.section-trusticons img {
	display: block;
	margin: 3rem auto 1.5rem auto;
	max-height: 7.5rem;
	width: auto;
}
.section-trusticons p {
	margin: 0 auto;
	max-width: 90%;
}

.section-articles__container {
	align-items: stretch;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.25rem;
	justify-content: space-evenly;
	padding: 3rem 0 1rem 0;
}
.section-articles__card {
	background-color: #fff;
	border-radius: 1.5rem;
	box-shadow:
		0.7px 0.7px 1.3px rgba(0, 0, 0, 0.02),
		1.6px 1.6px 3.2px rgba(0, 0, 0, 0.028),
		3px 3px 6px rgba(0, 0, 0, 0.035),
		5.4px 5.4px 10.7px rgba(0, 0, 0, 0.042),
		10px 10px 20.1px rgba(0, 0, 0, 0.05),
		24px 24px 48px rgba(0, 0, 0, 0.07);
	margin-bottom: 2rem;
	padding-bottom: 3rem;
	position: relative;
	width: 30%;
}
.section-articles__card__img {
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	display: block;
	margin-bottom: 1.5rem;
}
.section-articles__card__date,
.section-articles__card__title,
.section-articles__card__snippet {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.section-articles__card__date {
	font-family: var(--font-sans-bold);
	font-size: 0.875rem;
	font-weight: bold;
	margin-bottom: 0.25rem;
}
.section-articles__card__title {
	font-family: var(--font-sans-bold);
	font-size: 1.75rem;
	font-weight: bold;
	line-height: 2rem;
	margin-bottom: 1rem;
}
.section-articles__card__snippet {
	color: var(--color-black);
	font-family: var(--font-serif-regular);
	font-size: 1.125rem;
	line-height: 1.4rem;
	padding-right: 4rem;
}
.section-articles__card__button {
	bottom: 0;
	font-size: 3rem;
	left: 0;
	margin-top: -1rem;
	padding-bottom: 0;
	padding-right: 1rem;
	position: absolute;
	right: 0;
	text-align: right;
}

@media screen and (max-width: 39.9375em) {
	.section-articles__container {
		padding-bottom: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 3rem;
	}
	.section-articles__card {
		width: 100%;
	}
}

/*
==============================================
scroll-to-top
==============================================
*/
#scroll-to-top {
	bottom: 0;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.5rem;
	opacity: 0;
	position: fixed;
	right: 0;
	transform: translateY(100px);
	transition: all 0.5s ease;
}
#scroll-to-top.visible {
	opacity: 1;
	transform: translateY(0);
}
#scroll-to-top .fa-circle {
	color: var(--secondary-color);
	opacity: 0.8;
}
#scroll-to-top .fa-stack:hover .fa-circle {
	opacity: 1;
}


/*
==============================================
section banner - 3 columns
==============================================
*/
section.section-banner {
	margin-bottom: 2rem;
}
section.section-banner--transparent {
	background: initial;
}
section.section-banner--border-top {
	border-top: 1px solid rgba(100,100,100,0.1);
}


/*
==============================================
fancybox
==============================================
*/
.fancybox-thumbs {
	background: rgba(0, 0, 0, 0.3);
	bottom: 0;
	height: 95px;
	left: 0;
	padding: 10px 10px 5px 10px;
	right : 0;
	top: auto;
	width: auto;
}
.fancybox-show-thumbs .fancybox-inner {
	bottom: 95px;
	right: 0;
}
.fancybox-thumbs__list {
	margin: 0 auto;
}
.fancybox-thumbs__list a::before {
	border: 2px solid #efefef;
}

/*
==============================================
blockUI
==============================================
*/
div.blockMsg {
	border:0;
	color: #fefefe;
	cursor: wait;
	left: 30%;
	padding: 0;
	text-align:center;
    top: 30%;
    width:40%;
}
div.blockOverlay {
	background:#000;
	opacity:0.7;
}
@media only screen and (max-width:40em) {
	div.blockMsg {
		left: 10%;
		top: 20%;
		width: 80%;	
	}
}



/*
==============================================
notice bar
==============================================
*/
div.notice-bar {
	box-shadow: 0 0 9px #333;
	min-height: 3.5em;
	padding: 1em 2.5em;
	position: fixed;
	text-align: center;
	visibility: hidden;
	width: 100%;
	z-index: 9999;
}
div.notice-bar.alert {
	background-color: #cc4b37;
	color: #fefefe;
	text-shadow:0 1px 1px #681b0f;
}
div.notice-bar.success {
	background-color: #3adb76;
	color: #0a0a0a;
}
div.notice-bar.warning {
	background-color: #ffae00;
	color: #0a0a0a;
}
div.notice-bar div.message {
}
div.notice-bar a.close {
	color: #0a0a0a;
	font-size:2em;
	font-weight:700;
	position:absolute;
	right:1rem;
	top:0.125em;
}
div.notice-bar.alert a.close {
	color: #fefefe;
}

/*
==============================================
media queries
==============================================
*/
@media screen and (max-width: 39.9375em) {
}
@media only screen and (max-width: 64em) { /* max-width 1024px, <= medium screens */
}
@media only screen and (min-width: 40.063em) { /* min-width 641px */
}	
@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px */
}
@media only screen and (width: 768px) { /* iPad portrait · width: 768px */
}	
@media only screen and (min-width: 40.063em) { /* min-width 641px, > mobile screens */
}
@media only screen and (max-width: 64em) { /* max-width 1024px, <= medium screens */
}		
@media only screen and (min-width: 64.063em) { /* min-width 1025px, >= large screens */
}