@charset "UTF-8";
/********

Siren Framework for gulp v4

File Name: Forms

File Purpose: The standard echanced stylings for form elements.

File Notes: 

*********/
/********

File Notes: 
	- This is built from mobile Up
	- All the initial style are for mobile views and everything else is brought in through media-queries


*********/
@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
/*-------------------------*\
  #Mixins-Variables
\*-------------------------*/
/********

Siren Framework v4.0

File Name: Variables

File Purpose:

File Notes: 
	- Do not change the base font size


*********/
/*-------------------------*\
  #Global-Variables
\*-------------------------*/
/*-------------------------*\
  #Font-Size-Bases
\*-------------------------*/
/*-------------------------*\
  #Font-Sizes-And-Line-Heights
\*-------------------------*/
/*-------------------------*\
  #Colors
\*-------------------------*/
/*-------------------------*\
  #Fonts
\*-------------------------*/
@font-face {
  font-family: "titilliumregular";
  src: url("../fonts/Titillium-Regular-webfont.eot");
  src: url("../fonts/Titillium-Regular-webfont-.eot#iefix") format("embedded-opentype"), url("../fonts/Titillium-Regular-webfont.woff2.html") format("woff2"), url("../fonts/Titillium-Regular-webfont.woff.html") format("woff"), url("../fonts/Titillium-Regular-webfont.ttf") format("truetype"), url("../fonts/Titillium-Regular-webfont.svg#titilliumregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "titilliumlight";
  src: url("../fonts/Titillium-Light-webfont.eot");
  src: url("../fonts/Titillium-Light-webfont-.eot#iefix") format("embedded-opentype"), url("../fonts/Titillium-Light-webfont.woff2.html") format("woff2"), url("../fonts/Titillium-Light-webfont.woff.html") format("woff"), url("../fonts/Titillium-Light-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "titilliumbold";
  src: url("../fonts/Titillium-Semibold-webfont.eot");
  src: url("../fonts/Titillium-Semibold-webfont-.eot#iefix") format("embedded-opentype"), url("../fonts/Titillium-Semibold-webfont.woff2.html") format("woff2"), url("../fonts/Titillium-Semibold-webfont.woff.html") format("woff"), url("../fonts/Titillium-Semibold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TitilliumWeb-Light";
  src: url("../fonts/TitilliumWeb-Light.eot");
  src: url("../fonts/TitilliumWeb-Light-.eot#iefix") format("embedded-opentype"), url("../fonts/TitilliumWeb-Light.woff2.html") format("woff2"), url("../fonts/TitilliumWeb-Light.woff.html") format("woff"), url("../fonts/TitilliumWeb-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TitilliumWeb-Regular";
  src: url("../fonts/TitilliumWeb-Regular.eot");
  src: url("../fonts/TitilliumWeb-Regular-.eot#iefix") format("embedded-opentype"), url("../fonts/TitilliumWeb-Regular.woff2.html") format("woff2"), url("../fonts/TitilliumWeb-Regular.woff.html") format("woff"), url("../fonts/TitilliumWeb-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
html {
  font-family: "titilliumregular", "Arial", sans-serif;
  font-style: normal;
}
.font-loaded html, html.font-loaded {
  font-family: "titilliumregular", "Arial", sans-serif;
}

/*-------------------------*\
  #Positioning
\*-------------------------*/
/*-------------------------*\
  #Base-Basic
\*-------------------------*/
/********

Siren Framework v4.0

File Name: Core Styles

File Purpose: Basic styling served to all browsers

File Notes: 
  - Based on: normalize.css v3.0.1 | MIT License | git.io/normalize

*********/
/*-------------------------*\
  #Document-Level
\*-------------------------*/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1em;
  color: #58585b;
  line-height: 1.4;
  margin: 0;
}

/*-------------------------*\
  #HTML5
\*-------------------------*/
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

/*-------------------------*\
  #Links
\*-------------------------*/
a {
  text-decoration: none;
  color: #428bca;
}
a:hover, a:focus, a:active {
  color: #2a6496;
}
a:focus {
  outline: 0;
}
a:focus img, a img {
  border: none;
  outline: none;
}

/*-------------------------*\
  #Headers
\*-------------------------*/
h1, h2, h3, h4 {
  line-height: 1.4;
  margin: 0;
}

h1 {
  font-size: 2.369em;
}

h2 {
  font-size: 1.777em;
  margin: 0 0 0.5em;
}

h3 {
  font-size: 1.333em;
  text-transform: none;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 1em;
}

/*-------------------------*\
  #Block-Level-Content
\*-------------------------*/
p, ol, ul, li {
  font-size: 1em;
}

p {
  margin-bottom: 1.5em;
}

/*-------------------------*\
  #Inline-Content
\*-------------------------*/
b, strong {
  font-weight: bold;
}

abbr[title] {
  border-bottom: 1px dotted;
}

dfn, i {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

/*-------------------------*\
  #Grouping-Content
\*-------------------------*/
figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  width: 100%;
  height: 2px;
  background: #2a6496;
  border: none;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

q, blockquote {
  quotes: none;
}

blockquote {
  font-style: italic;
  margin: 1em 2em;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/*-------------------------*\
  #Tables
\*-------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

/********

Siren Framework v4.0

File Name: Accessibility

File Purpose: Basic accessibility styling

File Notes: 

*********/
/*-------------------------*\
  #Tabhints
\*-------------------------*/
/********

Siren Framework v3.6

File Name: Form (Safe Styles)

File Purpose: Basic styles for Forms

File Notes: 

*********/
/*-------------------------*\
	#Form-Containers
\*-------------------------*/
form {
  width: 100%;
  margin-bottom: 3rem;
}

.form_container {
  padding: 3em 1em;
}

fieldset {
  border: none;
  margin: 0;
  clear: both;
  overflow: hidden;
  position: relative;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 16px;
  color: #3e3e3e;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=date],
input[type=time],
input[type=tel],
input[type=search],
input[type=select],
select,
textarea {
  font-family: "titilliumregular", "Arial", sans-serif;
  width: 100%;
  padding: 8px 13px 7px 13px;
  margin-bottom: 0;
  font-size: 100%;
  font-weight: 400;
  line-height: 1.6;
  color: #495057;
  text-align: left;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #aeaeae;
  border-radius: 3px;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=select]:focus,
select:focus,
textarea:focus {
  outline: 2px solid #428bca;
}

.field {
  margin-bottom: 1em;
}
.field.phone .phone1-wrapper {
  display: flex;
  gap: 1em;
}

.submit button[type=submit] {
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #fff;
  background: #428bca;
  transition: all 0.3s;
  border: #428bca;
  width: auto;
  display: inline-block;
  padding: 1em 2em;
  cursor: pointer;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.submit button[type=submit]:hover, .submit button[type=submit]:focus {
  background: #2a6496;
  border: #428bca;
}

.sproutforms-message-success {
  background-color: green;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1em;
}
.sproutforms-message-success p {
  text-align: center;
  font-size: 1.5em;
  color: white;
}

/*-------------------------*\
  #Objects-Basic
\*-------------------------*/
/********

Siren Framework v4.0

File Name: Header and Footer

File Purpose: Classes for the header and footer elements

File Notes: 
  - The header is designed to be a hamburger menu for the mobile view
	- The footer is kept simple by default

*********/
/*-------------------------*\
  #Header
\*-------------------------*/
header.header .nav-primary ul.nav a {
  font-size: 1.15em;
}
/*-------------------------*\
  #Navigation
\*-------------------------*/
/*-------------------------*\
  #Navigation-Primary
\*-------------------------*/
/*-------------------------*\
  #Footer
\*-------------------------*/
footer {
  padding: 2.6em 1em;
}
footer .logos {
  position: relative;
}
footer .logos a {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}
footer .logos a img {
  margin: 0 auto;
  display: block;
}
footer .nav__footer {
  list-style: none;
  display: table;
  margin: 0.5em 0 0 0;
  padding-left: 0;
}
footer .nav__footer .nav__footer__item {
  float: left;
  margin-right: 1em;
}
footer .nav__footer .nav__footer__item a {
  color: white;
}
footer p {
  color: white;
  clear: both;
  display: block;
  margin-top: 2.4em;
}

/********

Siren Framework v4.0

File Name: Content

File Purpose: Classes for content elements

File Notes: 

*********/
.icp_section, .content, .columns_container, .error {
  padding: 3em 1em;
  overflow: hidden;
}

.hero--centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hero--centered h1 {
  font-size: 1em;
}
.hero__shape--centered {
  display: none;
}
.hero h2, .hero h1 {
  text-transform: none;
  font-weight: 300;
}
.hero h2 {
  font-size: 1.9em;
}
.hero.gem {
  text-align: center;
}
.hero.gem p, .hero.gem a {
  color: white;
}
.hero.gem p {
  font-size: 1.2em;
}
.hero.gem a {
  font-size: 1.1em;
}
.hero.gem .gem__icon {
  display: block;
  margin: 0 auto;
}
.hero.gem-home h1 {
  color: white;
  font-size: 1.5em;
}
.hero.form {
  text-align: center;
}
.hero.form h2 {
  color: #58585b;
}
.hero.form p {
  font-size: 0.92em;
}
.hero.hero__home-banner h1 {
  color: white;
  font-size: 2.2em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hero.research {
  padding: 1.5em;
}
.hero.research .research__list h3 {
  font-size: 1.5em;
  font-weight: 100;
  font-family: "titilliumlight";
}
.hero.research .research__list .publications__categories {
  font-size: 0.75em;
}
.hero.research .list__links a {
  font-size: 0.9em;
  border: none;
  padding-bottom: 0.5em;
  display: block;
  text-align: left;
}
.hero .publications__list .publications__item .publications__categories a {
  color: #a2a2a3;
  text-decoration: none;
}
.hero .publications__list .publications__item a {
  font-size: 0.95em;
}
.hero.ourimpacts {
  padding: 3em 1em;
}
.hero.ourimpacts h2, .hero.ourimpacts p {
  color: white;
}
.hero.ourimpacts h2 {
  font-size: 1.5em;
  font-family: "titilliumlight";
  font-weight: 100;
}
.hero.ourimpacts p {
  font-size: 1.25em;
  margin: 0 auto;
  padding: 1em;
}
.hero.efficientproducts h2, .hero.efficientproducts p {
  color: white;
}
.hero.efficientproducts .product_list .product_item {
  text-align: center;
}
.hero.efficientproducts .product_list .product_item a {
  color: white;
}
.hero.insidetheinitiative h3 {
  font-size: 1.5em;
  font-weight: 100;
  font-family: "titilliumlight";
}
.hero.askanexpert {
  text-align: center;
}
.hero.askanexpert a {
  font-size: 1.1em;
}
.hero.gov h2, .hero.gov a {
  color: white;
}
.hero.gov .gov__blocks .blocks__block {
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 1em;
  padding: 1em;
}
.hero .hero__blocks .blocks__block h3 {
  font-weight: 100;
  font-size: 1.2em;
  font-family: "titilliumlight";
}
.hero .hero__blocks .blocks__block:hover h3 {
  color: white;
}
.hero.hero__page {
  padding: 5em 0;
}
.hero.hero__page .hero__content h1 {
  font-size: 2em;
}
.hero.hero__page .hero__content img {
  margin-bottom: 1em;
}

.articles .block h2 {
  font-family: "titilliumlight";
  font-size: 2em;
  font-weight: 100;
}
.articles .articles__list .articles__item span {
  font-size: 0.7em;
  text-transform: uppercase;
  font-weight: bold;
}
.articles .articles__list .articles__item a {
  font-weight: 700;
}

.article h2, .article .article__title {
  font-size: 2.1em;
  font-weight: 300;
  font-family: "titilliumlight";
}
.article .links__list .links__item a {
  font-size: 0.95em;
}
.article .block__content--large p {
  font-size: 1.2em;
}
.article ul li {
  color: #58585b;
}
.article ul li::before {
  font-size: 1em;
  color: #34b9e4;
}
.article .block__overview {
  border: #ccc solid 1px;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 20px;
  font-style: italic;
}
.article .block__overview span {
  font-style: normal;
  background: #ffcc32;
  padding: 0px 5px;
  color: #fff;
  font-weight: bold;
  margin: 0 0.3em 1em 0;
}
.article .block__attachmenttitle {
  font-size: 1.2em;
  font-weight: 700;
  font-style: normal;
  margin: 1em 0 0.25em;
}

.sidebar h2 {
  font-size: 1.4em;
  color: #58585b;
  font-weight: 300;
  text-transform: none;
  font-family: "titilliumlight";
}
.sidebar .sidebar__list .sidebar__item {
  font-size: 1em;
}

.link__icon--bolt {
  text-decoration: underline;
  text-align: center;
  display: block;
}

.contact h2 {
  font-family: "TitilliumWeb-Regular";
  font-weight: normal;
}
.contact h2 small {
  color: #BFBFBFFF;
  font-size: 0.5em;
  font-weight: normal;
}
.contact h3 {
  font-size: 1.25em;
  font-weight: normal;
  font-family: "TitilliumWeb-Regular";
}
.contact .form__contact fieldset textarea, .contact .form__contact fieldset input, .contact .form__contact fieldset select {
  font-family: "TitilliumWeb-Regular";
  color: #58585b !important;
  font-size: 0.8em;
}
.contact .form__contact fieldset textarea::-webkit-input-placeholder, .contact .form__contact fieldset input::-webkit-input-placeholder, .contact .form__contact fieldset select::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #58585b;
}
.contact .form__contact fieldset textarea:-moz-placeholder, .contact .form__contact fieldset input:-moz-placeholder, .contact .form__contact fieldset select:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #58585b;
}
.contact .form__contact fieldset textarea::-moz-placeholder, .contact .form__contact fieldset input::-moz-placeholder, .contact .form__contact fieldset select::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #58585b;
}
.contact .form__contact fieldset textarea:-ms-input-placeholder, .contact .form__contact fieldset input:-ms-input-placeholder, .contact .form__contact fieldset select:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #58585b;
}
.contact .form__contact .form__checkboxes span {
  white-space: nowrap;
}
.contact .form__contact button {
  font-family: "TitilliumWeb-Regular" !important;
  font-size: 18px;
  font-weight: normal !important;
  color: #1f639c;
  font-style: normal;
}

.container--grey {
  background: #f5f5f4;
}

/********

Siren Framework v4.0

File Name: UI

File Purpose: Classes for UI elements

File Notes: 

*********/
/*-------------------------*\
  #BTN
\*-------------------------*/
hr {
  display: block;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 0;
  border-top: 1px solid #eee;
  background: none;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
  float: right;
}
.pagination .current {
  border: 1px solid #ebebeb;
  background: #428bca;
  color: white;
  padding: 0.4em 0.6em;
}

.pagination > li {
  display: inline;
}
.pagination > li a {
  border: 1px solid #ebebeb;
  padding: 0.4em 0.6em;
}

.crumbs {
  list-style: none;
  padding: 0;
  display: table;
}
.crumbs li {
  float: left;
  margin-right: 0.25em;
}
.crumbs li a {
  font-size: 0.75em;
  color: #BFBFBFFF;
}

/*-------------------------*\
  #CTA
\*-------------------------*/
/*-------------------------*\
  #Enhanced
\*-------------------------*/
@media only all {
  /********

  Siren Framework v4.0

  File Name: Enhanced Core Styles

  File Purpose: Element styling on top of basic style sheet (basic/_core.scss)

  File Notes: 
  	- All elements are set to border-box model
  	- Font-sizes dictated through the Modular Scale Compass plugin
  	- Line-height and padding done through the Compass Vertical Rhythm system
  	- section, article, header, footer by default have side padding. This can be removed.

  *********/
  /*-------------------------*\
  	#Document-Level
  \*-------------------------*/
  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  /*-------------------------*\
  	#Block-Level-Content
  \*-------------------------*/
  img {
    max-width: 100%;
  }

  /*-------------------------*\
  	#Inline-Content
  \*-------------------------*/
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  /*-------------------------*\
  	#Embeded-Content
  \*-------------------------*/
  svg:not(:root) {
    overflow: hidden;
  }

  /*-------------------------*\
  	#Grouping-Content
  \*-------------------------*/
  pre {
    overflow: auto;
  }

  /********

  Siren Framework v4.0

  File Name: Accessibility Enhanced

  File Purpose: Classes for accessibility elements

  File Notes: 

  *********/
  /*-------------------------*\
    #Tabhints
  \*-------------------------*/
  .tabhint {
    position: absolute;
  }
  .tabhint a {
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    letter-spacing: 0.1em;
    background: #428bca;
    width: 100%;
    padding: 0.5em 1em;
    display: block;
    position: fixed;
    top: -16em;
    left: 0;
    z-index: 100000;
    transition: transform 0.3s;
  }
  .tabhint a:focus {
    transform: translateY(16em);
  }

  /*-------------------------*\
    #Form-Hints
  \*-------------------------*/
  /********

  Siren Framework v4.0

  File Name: Header and Footer Enhanced

  File Purpose: Classes for the header and footer elements

  File Notes:
    - The header is designed to be a hamburger menu for the mobile view
  	- The footer is kept simple by default

  *********/
  /*-------------------------*\
    #Navigation
  \*-------------------------*/
  /*-------------------------*\
    #Header
  \*-------------------------*/
  header {
    padding-bottom: 2em;
    height: 100%;
    width: 100%;
    height: 4.5em;
  }
  header .header__logo {
    max-width: 23%;
    margin: 1em 0 0 1em;
    position: absolute;
    z-index: 11;
  }
  header.header .nav-primary {
    transition: max-height 0.5s;
  }
  .navigation-enabled header.header .nav-primary {
    max-height: 0;
  }
  .navigation-enabled header.header .nav-primary.s-active {
    position: absolute;
    z-index: 10;
    display: table;
    background-color: white;
    padding-bottom: 1em;
  }
  .navigation-enabled header.header .nav-primary.s-active ul.nav {
    display: table;
    width: 100vw;
  }
  header.header .nav-primary ul.nav {
    list-style: none;
    padding: 0 1.5em 1em 1.5em;
    position: relative;
    top: 3em;
    display: none;
  }
  header.header .nav-primary ul.nav > li {
    color: #20639b;
  }
  header.header .nav-primary ul.nav > li ul.nav__children {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    top: 4em;
    padding-left: 1em;
  }
  header.header .nav-primary ul.nav > li ul.nav__children ul {
    display: none;
  }
  header.header .nav-primary ul.nav > li ul.nav__children li {
    color: #20639b;
  }
  header.header .nav-primary ul.nav > li:last-child a {
    border-bottom: none;
  }
  header.header .nav-primary ul.nav > li:not(:first-child) > a {
    border-top: 1px solid #ebebeb;
  }
  header.header .nav-primary a {
    padding: 0.5em 0 0.5em 0;
    display: block;
  }
  header.header .nav-primary li {
    margin: 0;
  }
  header.header .nav-primary_btn {
    text-indent: -999999px;
    background: url(/images/menu.png) no-repeat center center;
    background: url(/images/menu.svg) no-repeat center center;
    border: none;
    outline: none;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 2.25em;
    right: 2em;
    cursor: pointer;
    z-index: 11;
  }
  header.header .nav-primary_btn.s-active {
    background: url(/images/close.png) no-repeat center center;
    background: url(/images/close.svg) no-repeat center center;
  }
  header.header--blue {
    background: #20639b;
  }
  header.header--blue .nav-primary {
    background-color: #20639b !important;
  }
  header.header--blue .nav-primary_btn {
    background: url(/images/menu--white.png) no-repeat center center;
    background: transparent url(/images/menu--white.svg) no-repeat center center;
  }
  header.header--blue .nav-primary_btn.s-active {
    background: url(/images/close--white.png) no-repeat center center;
    background: transparent url(/images/close--white.svg) no-repeat center center;
  }
  header.header--blue .nav-primary .s-active {
    padding-top: 3em;
  }
  header.header--blue .nav-primary ul.nav {
    top: 3em;
    width: 100% !important;
  }
  header.header--blue .nav-primary ul.nav a {
    color: white;
  }
  header.header--blue .nav-primary ul.nav li {
    flex: 1;
    width: 99vw;
    cursor: pointer;
  }
  header.header--blue .nav-primary ul.nav li ul.nav__children {
    max-height: 0;
    overflow: hidden;
    padding-left: 1em;
  }
  header.header--blue .nav-primary ul.nav li ul.nav__children li {
    width: 100%;
  }
  header.header--blue .nav-primary a {
    display: inline-block;
    width: 80%;
  }
  header.header--blue .header__logo {
    display: none;
  }

  /*-------------------------*\
    #Footer
  \*-------------------------*/
  /*-------------------------*\
    #Sitemap
  \*-------------------------*/
  /********

  Siren Framework v4.0

  File Name: Content Enhanced

  File Purpose: Classes for the content elements

  File Notes: 

  *********/
  /*-------------------------*\
    #Hero
  \*-------------------------*/
  .hero {
    margin: 0 auto;
    overflow: visible;
    position: relative;
    padding: 5em 1em 6em 1em;
  }
  .hero--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
  }
  .hero--centered h1 {
    text-align: center;
  }
  .hero__shape--centered {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -48px;
    display: block;
  }
  .hero__shape--centered--top-invert {
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
  }
  .hero h2, .hero h1 {
    padding: 0.4em 0;
  }
  .hero h2.hero__title--yellow, .hero h1.hero__title--yellow {
    border-top: #ffcc32 solid 5px;
    border-bottom: #ffcc32 solid 5px;
    display: inline-block;
  }
  .hero h2.hero__title--yellow--white, .hero h1.hero__title--yellow--white {
    color: white;
  }
  .hero h2.hero__title--green, .hero h1.hero__title--green {
    border-bottom: 5px solid #99c95a;
    border-top: 5px solid #99c95a;
    display: inline-block;
  }
  .hero h2.hero__title--green--white, .hero h1.hero__title--green--white {
    color: white;
  }
  .hero h2.hero__title--red, .hero h1.hero__title--red {
    border-top: 5px solid #ea1d5d;
    border-bottom: 5px solid #ea1d5d;
    display: inline-block;
  }
  .hero h2.hero__title--red--white, .hero h1.hero__title--red--white {
    color: white;
  }
  .hero h2.hero__title--blue, .hero h1.hero__title--blue {
    border-top: #98d9ef solid 5px;
    border-bottom: #98d9ef solid 5px;
    display: inline-block;
  }
  .hero h2.hero__title--blue--white, .hero h1.hero__title--blue--white {
    color: white;
  }
  .hero.form {
    position: relative;
  }
  .hero.research {
    padding: 3em 0;
  }
  .hero.research h3 {
    border-bottom: 1px solid #e5e5e4;
    display: block;
    padding-bottom: 0.6em;
  }
  .hero.research .research__list {
    padding: 2em 0 0 0;
  }
  .hero.research .research__list .list__publications {
    padding: 0 1em;
  }
  .hero.research .research__list .list__links {
    padding: 0 1em;
  }
  .hero .publications__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hero .publications__list .publications__item {
    border-bottom: 1px solid #e5e5e4;
    padding: 1.4em 1em 1.4em 2.4em;
    background: url("/images/icon-pdf.png") no-repeat 1em 1.6em;
  }
  .hero .publications__list .publications__item .publications__categories {
    margin: 0.7em 0 0 0;
  }
  .hero .publications__list .publications__item .publications__categories a {
    border: 1px solid #e5e5e4;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1.5px 5px;
    padding: 2px 8px;
  }
  .hero.efficientproducts {
    text-align: center;
  }
  .hero.efficientproducts .efficientproducts--pad {
    margin: 2.5em 0 0 0;
  }
  .hero.efficientproducts .product_list {
    list-style: none;
    padding: 0;
  }
  .hero.efficientproducts .product_list a {
    margin-bottom: 0.5em;
  }
  .hero.insidetheinitiative {
    padding-top: 4em;
  }
  .hero.insidetheinitiative h3 {
    border-bottom: 1px solid #e5e5e4;
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .hero.insidetheinitiative .events {
    padding-left: 1em;
  }
  .hero.insidetheinitiative .news, .hero.insidetheinitiative .events {
    padding-right: 1em;
  }
  .hero.insidetheinitiative .news .news__list, .hero.insidetheinitiative .events .news__list {
    list-style: none;
    padding: 0 2em 0 0;
    margin: 0;
  }
  .hero.insidetheinitiative .news .news__list .news__item, .hero.insidetheinitiative .events .news__list .news__item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e4;
    padding: 10px 0;
  }
  .hero.insidetheinitiative .news .news__list .news__item .item__image, .hero.insidetheinitiative .events .news__list .news__item .item__image {
    width: 25%;
    margin-right: 0.5em;
    margin-top: 0.5em;
  }
  .hero.insidetheinitiative .news .news__list .news__item .item__image img, .hero.insidetheinitiative .events .news__list .news__item .item__image img {
    display: block;
  }
  .hero.insidetheinitiative .news .news__list .news__item .item__content, .hero.insidetheinitiative .events .news__list .news__item .item__content {
    width: 75%;
  }
  .hero.insidetheinitiative .news .news__list .news__item .item__content span, .hero.insidetheinitiative .events .news__list .news__item .item__content span {
    font-size: 0.7em;
    line-height: 0.875em;
    margin-bottom: 10px;
    display: inline-block;
  }
  .hero.insidetheinitiative .news .news__list .news__item .item__content a, .hero.insidetheinitiative .events .news__list .news__item .item__content a {
    display: block;
    padding-left: 0.1em;
  }
  .hero.askanexpert {
    padding: 3em 0;
  }
  .hero.askanexpert img {
    display: block;
    margin: 0 auto;
  }
  .hero .hero__blocks {
    padding-top: 1em;
  }
  .hero .hero__blocks .blocks__block {
    margin: 0.5em;
    background: white;
    padding: 1em;
  }
  .hero .hero__blocks .blocks__block .block__icon {
    background: url(/images/awards_bg.png) no-repeat center center;
    height: 92px;
    position: relative;
  }
  .hero .hero__blocks .blocks__block .block__icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .hero .hero__blocks .blocks__block h3 {
    margin: 0.5em 0;
    padding: 0 1.2em;
  }
  .hero .hero__blocks .blocks__block:hover {
    background: url(/images/award_blue.png) no-repeat center center;
    background-size: cover;
  }
  .hero .hero__blocks .blocks__block:hover .block__icon {
    background: transparent;
  }
  .hero.gem__awards {
    padding: 4em 0;
  }
  .hero.gem-about {
    padding: 4em 0;
  }
  .hero.gem-about p {
    max-width: 70%;
    margin: 2em auto 0;
  }
  .hero.hero-pub {
    height: 8em;
  }

  .link__icon--bolt {
    background: url("/images/nut.png") no-repeat 0px 5px;
    padding-left: 24px;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 1px solid white;
    text-decoration: none;
  }
  .link__icon--bolt:hover {
    background: url("/images/nut_hover.png") no-repeat -1px 6px;
  }
  .link__icon--bolt--nh {
    border-bottom: none;
  }
  .link__icon--bolt--nh:hover {
    background: url("/images/nut.png") no-repeat 0px 5px;
    color: #2a6496;
  }
  .link__icon--bolt--n {
    border-bottom: none;
  }
  .link__icon--bolt--bb {
    border-bottom: 1px solid #428bca;
  }
  .link__icon--download {
    background: url("/images/icon_download.png") no-repeat 0px 4px;
    padding-left: 20px;
    padding-bottom: 0px;
    display: inline-block;
    border-bottom: 1px solid white;
    text-decoration: none;
    background-size: 15px;
  }
  .sidebar {
    padding: 3em 0em 1em 1em;
  }
  .sidebar h2:not(:first-child) {
    padding-top: 1em;
  }
  .sidebar .sidebar__list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }
  .sidebar .sidebar__list .sidebar__item {
    background: url("/images/icon-external.png") no-repeat 0px 11px;
    background-size: 22px;
    border-top: #ccc solid 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
  }
  .sidebar .sidebar__list .sidebar__item::before {
    display: none;
  }

  .publications__filter {
    background: #f5f5f4;
    border-radius: 10px;
    clear: both;
    padding: 25px;
    margin: 1em 0;
  }
  .publications__filter .filter__dropdown {
    margin: 1%;
    border: 1px solid #8cc240;
    color: #000;
    border-radius: 5px;
    font-size: 0.875em;
    padding: 6px;
    width: 100%;
    cursor: pointer;
    display: inline;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url("/images/dropdown.png") no-repeat right center;
  }
  .publications__filter button {
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #464646;
    font-size: 0.875em;
    height: 32px;
    padding: 0 10px;
    text-align: center;
    position: relative;
    top: 6px;
    left: 6px;
  }

  .article {
    padding: 2em 1em 5em 1em;
  }
  .article a {
    transition: none;
  }
  .article a:hover {
    transition: none;
    color: #20639b;
  }
  .article .block {
    padding-right: 0em;
  }
  .article .block h2 img, .article .block .article__title img {
    margin-right: 10px;
  }
  .article .block .links__list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }
  .article .block .links__list .links__item {
    background: url("/images/nut.png") no-repeat 0 6px;
    padding-left: 20px;
    padding-bottom: 0.9em;
  }
  .article .block .links__list .links__item a {
    text-decoration: underline;
  }
  .article .block ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }
  .article .block ul li {
    margin-left: 1em;
  }
  .article .block ul li::before {
    content: "•";
    padding-right: 1em;
  }
  .article .block .block__attachment {
    margin: 1em 0;
  }
  .article .sidebar {
    padding-left: 4em;
  }
  .article.news-article {
    padding-bottom: 6em;
  }
  .article .article__meta {
    margin: 1em 0;
  }

  .articles {
    padding: 1em;
  }
  .articles .articles__list {
    list-style: none;
    padding-left: 0;
  }
  .articles .articles__list__children {
    margin-bottom: 1em;
    list-style: none;
  }
  .articles .articles__list .articles__item span {
    border-radius: 4px;
    line-height: 0.875em;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: #e5e5e4 solid 1px;
    display: inline-block;
  }
  .articles .articles__list .articles__item a {
    display: block;
  }

  .contact .crumbs {
    margin-left: 10px;
  }
  .contact--pad {
    margin: 2em 0;
  }
  .contact h2 {
    margin-left: 10px;
  }
  .contact h3 {
    margin-left: 10px;
  }
  .contact .form__contact div {
    margin: 0.25em 0;
  }
  .contact .form__contact fieldset textarea, .contact .form__contact fieldset input, .contact .form__contact fieldset select {
    border: 1px solid #cecdcd;
    border-radius: 3px;
  }
  .contact .form__contact fieldset input[type=text], .contact .form__contact fieldset select {
    width: 100%;
  }
  .contact .form__contact fieldset textarea {
    height: 15em;
    width: 100%;
    position: relative;
    top: -3px;
  }
  .contact .form__contact fieldset select {
    position: relative;
    top: -1px;
  }
  .contact .form__contact .form__checkboxes {
    display: inline-block;
  }
  .contact .form__contact .form__checkboxes span {
    margin-right: 1em;
  }
  .contact .form__contact .form__email {
    width: 100%;
    float: left;
    border: 1px solid #cecdcd;
    border-radius: 3px;
    padding-left: 88px;
    padding-right: 20px;
    background: url("/images/insert-bg.gif");
    background-repeat: repeat;
    background-repeat: repeat-y;
    position: relative;
    padding-top: 16px;
    padding-bottom: 18px;
  }
  .contact .form__contact .form__email::before {
    content: "";
    display: block;
    width: 34px;
    height: 23px;
    background: url("/images/icon-email.png") no-repeat;
    position: absolute;
    left: 15px;
    top: 19px;
  }
  .contact .form__contact button {
    height: 38px;
    border: 1px solid #1f639c;
    position: relative;
    border-radius: 25px;
    font-weight: normal !important;
    padding-right: 18px;
    padding-left: 40px;
    background: url("/images/submit-message.png") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-position: 4% center;
  }
  .contact .form__contact small {
    display: block;
  }

  /*-------------------------*\
    #Hero-Animations
  \*-------------------------*/
  .animate-enabled .js-animate .hero_content {
    opacity: 0;
    transition: all 0.5s;
  }
  .animate-enabled .js-animate.s-active .hero_content {
    opacity: 1;
  }

  /*-------------------------*\
    #ICP
  \*-------------------------*/
  /*-------------------------*\
    #Content-Animations
  \*-------------------------*/
  .animate-enabled .content .js-animate {
    opacity: 0;
    transition: all 0.5s;
  }
  .animate-enabled .content .js-animate.s-active {
    opacity: 1;
  }
  .animate-enabled .content .js-animate.js-animate-fadeup {
    transform: translateY(25%);
  }
  .animate-enabled .content .js-animate.js-animate-fadeup.s-active {
    transform: translateY(0);
  }

  /*-------------------------*\
    #Columns-Animations
  \*-------------------------*/
  .animate-enabled .column.js-animate {
    opacity: 0;
    transition: all 0.5s;
  }
  .animate-enabled .column.js-animate.s-active {
    opacity: 1;
  }
  .animate-enabled .column.js-animate.js-animate-fadeup {
    transform: translateY(25%);
  }
  .animate-enabled .column.js-animate.js-animate-fadeup.s-active {
    transform: translateY(0);
  }

  /*-------------------------*\
    #404
  \*-------------------------*/
  .error_p {
    margin: 1em auto;
  }

  /********

  Siren Framework v4.0

  File Name: Containers

  File Purpose: Containers

  File Notes: 

  *********/
  /*-------------------------*\
    #Rows
  \*-------------------------*/
  .l-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .l-container_s {
    width: 100%;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
  }
}
/*-------------------------*\
  #Helpers
\*-------------------------*/
/********

Siren Framework v3.7

File Name: Typographic Helpers and Utilities

File Purpose: Classes that preform a specific reusable function related to typography.

File Notes: 
	- Class names must have the prefix "h-" for helpers

*********/
/*-------------------------*\
  #Alignment
\*-------------------------*/
.h-center {
  text-align: center;
}

/*-------------------------*\
  #Responsive-Core
\*-------------------------*/
/********

Siren Framework v4.0

File Name: Responsive Foundation

File Purpose: Media query calls that effect foundation styles go here

File Notes: 


*********/
@media only screen and (min-width: 700px) {
  /*-------------------------*\
    #Document-Level
  \*-------------------------*/
  body {
    font-size: 1.08em;
  }
}
/********

Siren Framework v4.0

File Name: Responsive Layout

File Purpose: Responsive Layout

File Notes: 

*********/
@media only screen and (min-width: 600px) {
  /*-------------------------*\
  	#Container
  \*-------------------------*/
  .l-flex {
    overflow: hidden;
  }
  .flexbox .l-flex {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .flexbox .l-flex-reverse {
    flex-direction: row-reverse;
  }
  .l-flex_col {
    padding-right: 0.75em;
    padding-left: 0.75em;
    float: left;
  }
  .flexbox .l-flex_col {
    float: none;
  }
  .l-flex_col-hlf, .l-flex_col-qtr, .l-flex_col-thrqtr {
    width: 50%;
  }
  .l-flex_col-thrqtr {
    width: 75%;
  }
  .l-flex_col-thrd, .l-flex_col-ffth, .l-flex_col-sxth {
    width: 33.3333333333%;
  }
  .l-flex_col--l6 {
    width: 67%;
    padding-right: 4em;
  }
  .l-flex_col--l4 {
    width: 33%;
  }
}
@media only screen and (min-width: 850px) {
  /*-------------------------*\
  	#Container
  \*-------------------------*/
  .l-flex-l {
    overflow: hidden;
  }
  .flexbox .l-flex-l {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .l-flex-l_col {
    float: left;
  }
  .flexbox .l-flex-l_col {
    float: none;
  }
  .l-flex-l_col-thrqtr {
    width: 75%;
  }
  .l-flex-l_col-qtr {
    width: 25%;
  }
  .l-flex-l_col--l6 {
    width: 60%;
  }
  .l-flex-l_col--l4 {
    width: 40%;
  }
  .l-flex_col-qtr {
    width: 25%;
  }
}
@media only screen and (min-width: 1100px) {
  /*-------------------------*\
  	#Container
  \*-------------------------*/
  .l-flex_col-ffth {
    width: 20%;
  }
}
@media only screen and (min-width: 1200px) {
  /*-------------------------*\
  	#Container
  \*-------------------------*/
  .l-flex_col-sxth {
    width: 16.6666666667%;
  }
}
/*-------------------------*\
  #Responsive-Objects
\*-------------------------*/
/********

Siren Framework v4.0

File Name: Responsive for the Header and Footer

File Purpose: Media query calls go here for the header and footer

File Notes:


*********/
@media only screen and (min-width: 1050px) {
  /*-------------------------*\
    #Navigation
  \*-------------------------*/
  .header .l-container {
    position: relative;
  }
  .header .l-container .header__logo {
    position: absolute;
    z-index: 1;
    left: 0;
    top: -3px;
  }
  .header .nav-primary {
    overflow: visible;
  }
  .navigation-enabled .header .nav-primary {
    max-height: 100% !important;
  }
  .header .nav-primary ul.nav {
    overflow: visible;
    width: 80%;
    float: right;
    display: flex !important;
    justify-content: space-between;
    top: 0 !important;
    margin-top: 0.3em;
  }
  .header .nav-primary ul.nav > li {
    flex: 1;
    padding: 0 0.5em;
    text-align: center;
    font-size: 0.85em;
    border: none;
    display: inline-block;
    position: relative;
  }
  .header .nav-primary ul.nav > li > a {
    height: 4.5em;
  }
  .header .nav-primary ul.nav > li ul.nav__children {
    background: white;
    position: absolute;
    left: 0em;
    z-index: 100;
    display: none;
    max-height: 1000px !important;
    overflow: visible !important;
    width: 100%;
    padding-left: 0 !important;
  }
  .header .nav-primary ul.nav > li ul.nav__children li {
    display: block;
    position: relative;
    padding: 0;
    margin-top: 2px;
  }
  .header .nav-primary ul.nav > li ul.nav__children li ul.nav__children {
    display: none;
    left: 100%;
    top: 0;
    overflow: visible !important;
    background: #20639b !important;
  }
  .header .nav-primary ul.nav > li ul.nav__children li ul.nav__children li {
    padding-bottom: 2px;
    background-color: #20639b;
    margin-top: 0px;
  }
  .header .nav-primary ul.nav > li ul.nav__children li ul.nav__children li a {
    color: white !important;
  }
  .header .nav-primary ul.nav > li ul.nav__children li ul.nav__children li:hover a {
    color: #20639b !important;
  }
  .header .nav-primary ul.nav > li ul.nav__children li ul.nav__children li:hover li {
    background-color: white;
  }
  .header .nav-primary ul.nav > li ul.nav__children li a {
    font-weight: 400;
    padding: 0.5em 0 !important;
    display: block;
  }
  .header .nav-primary ul.nav > li ul.nav__children li:hover {
    background: white !important;
  }
  .header .nav-primary ul.nav > li ul.nav__children li:hover ul.nav__children {
    display: block;
  }
  .header .nav-primary ul.nav > li ul.nav__children li:hover a {
    color: #20639b !important;
  }
  .header .nav-primary ul.nav > li:hover {
    background-color: #2a6496;
  }
  .header .nav-primary ul.nav > li:hover a {
    color: white;
  }
  .header .nav-primary ul.nav > li:hover ul {
    display: block;
  }
  .header .nav-primary ul.nav > li:hover ul li {
    background-color: #2a6496;
  }
  .header .nav-primary a {
    width: auto;
    padding: 0.5em;
    transition: none;
  }
  .header .nav-primary_btn {
    display: none;
  }
  .header--blue ul.nav {
    display: block;
    margin-top: 1em !important;
  }
  .header--blue ul.nav > li a {
    transition: none !important;
    display: block;
    width: 100% !important;
  }
  .header--blue ul.nav > li:hover {
    background-color: white !important;
    padding-bottom: 1.5em;
  }
  .header--blue ul.nav > li:hover > a {
    color: #2a6496 !important;
  }
  .header--blue ul.nav > li:hover ul.nav__children {
    display: block;
    margin: 0;
    background-color: white !important;
    padding-left: 0 !important;
  }
  .header--blue ul.nav > li:hover ul.nav__children li {
    background-color: white !important;
  }
  .header--blue ul.nav > li:hover ul.nav__children li a {
    color: #2a6496 !important;
  }

  /*-------------------------*\
    #Footer
  \*-------------------------*/
  .flexbox .footer_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .flexbox .footer_col {
    border: none;
  }
}
@media only screen and (min-width: 710px) {
  header.header .header__logo {
    max-width: 16%;
  }
  header.header ul {
    padding: 0;
  }
  header.header ul li a {
    border: none !important;
  }

  footer .blurb {
    width: 40%;
  }
  footer .logos {
    width: 60%;
  }
}
/********

Siren Framework v4.0

File Name: Responsive for Content

File Purpose: Media query calls go here for content objects

File Notes: 


*********/
@media only screen and (min-width: 1050px) {
  /*-------------------------*\
    #Containers
  \*-------------------------*/
  .icp_section, .content, .columns_container, .error, .form_container {
    padding: 2.5em 1em;
  }

  .hero--centered h1 {
    font-size: 3em;
  }
  .hero.hero__home-banner {
    min-height: 31.5em;
  }
  .hero.hero__home-banner .hero__content {
    margin-top: 1em;
  }
  .hero.hero__home-banner .hero__content img {
    margin: 1.3em 0 2.9em 0;
  }
  .hero.gem-home .hero__content img {
    margin: 0 0 1em 0;
  }
  .hero.form {
    padding: 3em 0;
    text-align: center;
  }
  .hero.research .research__list .list__publications {
    padding: 0 2em 2em 2em;
  }
  .hero.research .list__links {
    padding-left: 5.3em;
  }
  .hero.ourimpacts {
    padding: 6em 0;
  }
  .hero.ourimpacts p {
    padding: 2em 7em;
  }
  /*-------------------------*\
    #ICP
  \*-------------------------*/
  /*-------------------------*\
    #Columns
  \*-------------------------*/
  .column {
    padding: 1.5em 0.75em 0.5em;
  }

  .article .block {
    padding-right: 2em;
  }
}
@media only screen and (min-width: 800px) {
  /*-------------------------*\
    #Containers
  \*-------------------------*/
  .publications__filter .filter__dropdown {
    width: 47%;
    float: left;
  }

  .hero__blocks {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .hero__blocks .blocks__block {
    flex: 1;
  }
}
/********

Siren Framework v4.0

File Name: Responsive for UI

File Purpose: Media query calls go here for UI objects

File Notes: 


*********/
/*-------------------------*\
  #Misc
\*-------------------------*/
/********

Siren Framework v3.3

File Name: Print Styles

File Purpose: Styling corrections for printers

File Notes: 
  - The current standards are from Paul Irish's Boilerplate

*********/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr, img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }
}
/*# sourceMappingURL=style.css.map */
