/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/surf-style.css ***!
  \***********************************************************************************************************************************/
   
    
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/base/_fonts.css ***!
  \************************************************************************************************************************************/

@font-face {
    font-family: 'Bebas';
    src: url("https://ee5-files.s3.us-west-2.amazonaws.com/assets/fonts/BebasNeue+Regular.otf");
}
@font-face {
    font-family: 'Bebas';
    src: url("https://ee5-files.s3.us-west-2.amazonaws.com/assets/fonts/BebasNeue+Bold.otf");
    font-weight: bold;
}
@font-face {
    font-family: 'Bebas';
    src: url("https://ee5-files.s3.us-west-2.amazonaws.com/assets/fonts/BebasNeue+Book.otf");
    font-style: bolder;
}
@font-face {
    font-family: 'Bebas';
    src: url("https://ee5-files.s3.us-west-2.amazonaws.com/assets/fonts/BebasNeue+Light.otf");
    font-weight: thin;
}
@font-face {
    font-family: 'Bebas';
    src: url("https://ee5-files.s3.us-west-2.amazonaws.com/assets/fonts/BebasNeue+Thin.otf");
    font-weight: thin;
    font-style: italic, oblique;
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_typography.css ***!
  \*********************************************************************************************************************************************/
body {
	line-height: 1.4;
	/* word-break: break-word; */
	/* word-wrap: break-word; */
	/* hyphens: auto; */
	
	font-family:  Roboto, sans-serif ;
  } 
  
  html[lang^="ja"] body,
  html[lang^="zh"] body,
  html[lang^="ko"] body {
	line-break: strict;
	word-break: break-all;
  } 
  
  /* Paragraphs */ 
  
  p {
	font-size: 1rem;
	margin: 0 0 1.4rem;
  
	line-height: 29px;
	opacity: 1;
  } 
  
  .serif {
	  font-family:  Bebas ;
	  font-weight: bolder;
	  letter-spacing: 2px;
  } 
  
  /* Anchors */ 
  
  /*----------  Links  ----------*/ 
  
  a {
	cursor: pointer;
	/* color: var(--blue); */
	color: #0072BC;
	  transition: color 0.15s ease-out;
  } 
  
  a:hover,
  a:focus {
	/* color: #1577b7; */
	color: #003C66;
	transition: color 0.15s ease-in;
  
  } 
  
  /* All the a11y and usability improvements */ 
  
  .hs_cos_wrapper_type_rich_text a,
.campaign-detail a,
.hs_cos_wrapper_type_rich_text a::after,
.campaign-detail a::after {
		text-decoration: underline;
		-webkit-text-decoration: underline solid;
		        text-decoration: underline solid;
	  	text-underline-offset: 3px;
} 
  
  .hs_cos_wrapper_type_rich_text a:hover,
.campaign-detail a:hover,
.hs_cos_wrapper_type_rich_text a:focus,
.campaign-detail a:focus,
.hs_cos_wrapper_type_rich_text a:hover::after,
.campaign-detail a:hover::after,
.hs_cos_wrapper_type_rich_text a:focus::after,
.campaign-detail a:focus::after {
			text-decoration: underline overline;
			-webkit-text-decoration: underline overline solid;
			        text-decoration: underline overline solid;
} 
  
  .hs_cos_wrapper_type_rich_text a::after,
.campaign-detail a::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27 width=%2748%27%3E%3Cpath fill=%27#0072BC%27%20d=%27M9%2042q-1.2%200-2.1-.9Q6%2040.2%206%2039V9q0-1.2.9-2.1Q7.8%206%209%206h13.95v3H9v30h30V25.05h3V39q0%201.2-.9%202.1-.9.9-2.1.9Zm10.1-10.95L17%2028.9%2036.9%209H25.95V6H42v16.05h-3v-10.9Z%27/%3E%3C/svg%3E");

		content: "\00a0 \00a0 \00a0 \00a0";
		display: inline-block;
		background-size: contain;
		background-position:center;
		background-repeat: no-repeat;
} 
  
  .hs_cos_wrapper_type_rich_text a:hover::after,
.campaign-detail a:hover::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27 width=%2748%27%3E%3Cpath fill=%27#003c66%27%20d=%27M9%2042q-1.2%200-2.1-.9Q6%2040.2%206%2039V9q0-1.2.9-2.1Q7.8%206%209%206h13.95v3H9v30h30V25.05h3V39q0%201.2-.9%202.1-.9.9-2.1.9Zm10.1-10.95L17%2028.9%2036.9%209H25.95V6H42v16.05h-3v-10.9Z%27/%3E%3C/svg%3E");
} 
  
  .hs_cos_wrapper_type_rich_text a[href*='surfrider.org']::after,
.campaign-detail a[href*='surfrider.org']::after {
		content: '';
		background-image: none;
} 
  
  .hs_cos_wrapper_type_rich_text a[href^="mailto"]::after,
.campaign-detail a[href^="mailto"]::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27 width=%2748%27%3E%3Cpath  fill=%27#0072BC%27%20d=%27M7%2040q-1.2%200-2.1-.9Q4%2038.2%204%2037V11q0-1.2.9-2.1Q5.8%208%207%208h34q1.2%200%202.1.9.9.9.9%202.1v26q0%201.2-.9%202.1-.9.9-2.1.9Zm17-15.1L7%2013.75V37h34V13.75Zm0-3L40.8%2011H7.25ZM7%2013.75V11v26Z%27/%3E%3C/svg%3E");
} 
  
  .hs_cos_wrapper_type_rich_text a[href^="mailto"]:hover::after,
.campaign-detail a[href^="mailto"]:hover::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27 width=%2748%27%3E%3Cpath  fill=%27#003C66%27%20d=%27M7%2040q-1.2%200-2.1-.9Q4%2038.2%204%2037V11q0-1.2.9-2.1Q5.8%208%207%208h34q1.2%200%202.1.9.9.9.9%202.1v26q0%201.2-.9%202.1-.9.9-2.1.9Zm17-15.1L7%2013.75V37h34V13.75Zm0-3L40.8%2011H7.25ZM7%2013.75V11v26Z%27/%3E%3C/svg%3E");
} 
  
  .hs_cos_wrapper_type_rich_text a[href^="tel"]::after,
.campaign-detail a[href^="tel"]::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27  width=%2748%27%3E%3Cpath  fill=%27#0072BC%27%20d=%27M39.75%2042q-6.1%200-12.125-3T16.8%2031.2Q12%2026.4%209%2020.375%206%2014.35%206%208.25q0-.95.65-1.6Q7.3%206%208.25%206h7q.7%200%201.225.475.525.475.675%201.275l1.35%206.3q.1.7-.025%201.275t-.525.975l-5%205.05q2.8%204.65%206.275%208.1Q22.7%2032.9%2027.1%2035.3l4.75-4.9q.5-.55%201.15-.775.65-.225%201.3-.075l5.95%201.3q.75.15%201.25.75T42%2033v6.75q0%20.95-.65%201.6-.65.65-1.6.65Zm-28.3-23.4%204.05-4.1L14.35%209H9q0%201.95.6%204.275t1.85%205.325ZM29.9%2036.75q2.05.95%204.45%201.55%202.4.6%204.65.7v-5.35l-5.15-1.05ZM11.45%2018.6ZM29.9%2036.75Z%27/%3E%3C/svg%3E");
} 
  
  .hs_cos_wrapper_type_rich_text a[href^="tel"]:hover::after,
.campaign-detail a[href^="tel"]:hover::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2748%27  width=%2748%27%3E%3Cpath  fill=%27#003C66%27%20d=%27M39.75%2042q-6.1%200-12.125-3T16.8%2031.2Q12%2026.4%209%2020.375%206%2014.35%206%208.25q0-.95.65-1.6Q7.3%206%208.25%206h7q.7%200%201.225.475.525.475.675%201.275l1.35%206.3q.1.7-.025%201.275t-.525.975l-5%205.05q2.8%204.65%206.275%208.1Q22.7%2032.9%2027.1%2035.3l4.75-4.9q.5-.55%201.15-.775.65-.225%201.3-.075l5.95%201.3q.75.15%201.25.75T42%2033v6.75q0%20.95-.65%201.6-.65.65-1.6.65Zm-28.3-23.4%204.05-4.1L14.35%209H9q0%201.95.6%204.275t1.85%205.325ZM29.9%2036.75q2.05.95%204.45%201.55%202.4.6%204.65.7v-5.35l-5.15-1.05ZM11.45%2018.6ZM29.9%2036.75Z%27/%3E%3C/svg%3E");
} 
  
  body.is_in_editor .hs_cos_wrapper_type_rich_text a::after, body.is_in_editor .campaign-detail a::after {
			display: none !important;
		} 
  
  /* Headings */ 
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
	  margin: 0 0 40px;
  
	  font-weight: 700;
	  line-height: 1;
	  font-family:  Roboto, sans-serif ;
	  -webkit-hyphens: auto;
	          hyphens: auto;
  } 
  
  /* Lists */ 
  
  ul,
  ol {
	margin: 0 0 1.4rem;
	line-height: 29px;
	opacity: 1;
  } 
  
  ul ul,
  ol ul,
  ul ol,
  ol ol {
	margin: 0;
  } 
  
  /* ul.no-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
  } */ 
  
  /* Code blocks */ 
  
  pre {
	overflow: auto;
  } 
  
  code {
	vertical-align: bottom;
  } 
  
  /* Blockquotes */ 
  
  blockquote {
	border-left: 2px solid;
	margin: 0 0 1.4rem;
	padding-left: 0.7rem;
  } 
  
  /* Horizontal rules */ 
  
  hr {
	border: none;
	border-bottom: 1px solid #CCC;
  } 
  
  /* Image alt text */ 
  
  img {
	font-size: 0.583rem;
	word-break: normal;
  } 
  
  /*----------- Typography Classes ---------------*/ 
  
  .sf-type__bc1 {
		  font-size: 16px;
		  line-height: 29px;
		  opacity: 1;
	  } 
  
  .sf-type__bc2 {
		  font-size: 16px;
		  line-height: 24px;
		  letter-spacing: -0.4px;
		  font-weight: bold;
	  } 
  
  .sf-type__bc3 {
		  font-size: 12px;
		  letter-spacing: 0;
		  line-height: 20px;	
	  } 
  
  .sf-type__bc4 {
		  font-size: 10px;
		  letter-spacing: 0;
		  line-height: 16px;	
	  } 
  
  .sf-type__eyebrow,
	  .sf-type__eyebrow h2,
	  .sf-type__eyebrow h3,
	  .sf-type__eyebrow h4,
	  .sf-type__eyebrow h5,
	  .sf-type__eyebrow h6
	  {
		  font-family:  Bebas ;
		  font-size: 20px;
		  font-weight: bold;
		  letter-spacing: 2px;
		  line-height: 24px;
	  } 
  
  .sf-type__label {
		  /* // This is the same as bc2 */ 
		  font-size: 20px;
		  letter-spacing: -0.5px;
		  line-height: 24px;
		  font-weight: bold;
	  } 
  
  .sf-type__h1 {
		  font-size: 56px;
		  letter-spacing: -0.5px;
	  } 
  
  .sf-type__h2 {
		  font-size: 40px;
		  line-height: 40px;
		  letter-spacing: -1px;
	  } 
  
  .sf-type__h3 {
		  font-size: 26px;
		  letter-spacing: -0.5px;
		  line-height: 32px;
	  } 
  
  /* // RS added h4 */ 
  
  .sf-type__h4 {
		  font-size: 20px;
		  letter-spacing: -0.5px;
		  line-height: 32px;
	  } 
  
  .sf-type__number {
		  font-size: 100px;
		  letter-spacing: -4px;
		  line-height: 140px;
		  font-weight: bold;
	  } 
  
  .sf-type__light {
		  opacity: 0.7;
	  } 
  
   
    @media screen and ( min-width: 1330px ) {
          
  
  .sf-type__bc1--lg {
			  /* // @include font-size(18px);
			  // line-height: 27px; */
			  letter-spacing: 0;
			  /* // color: $black;
			  // opacity: 0.7; */
		  } 
  
  .sf-type__bc2--lg {
			  font-size: 20px;
			  line-height: 25px;
			  letter-spacing: -0.5px;
			  font-weight: bold;
		  } 
  
  .sf-type__label--lg {
			  font-size: 20px;
			  letter-spacing: -0.5px;
			  line-height: 20px;
		  } 
  
  .sf-type__h1--lg {
			  font-size: 90px;
			  line-height: 96px;
			  letter-spacing: -0.5px;
		  } 
  
  .sf-type__h2--lg {
			  font-size: 85px;
			  line-height: 80px;
				letter-spacing: -2px;
		  } 
  
  .sf-type__h3--lg {
			  font-size: 55px;
				letter-spacing: -1.5px;
				line-height: 55px;
		  } 
  
  .sf-type__h4--lg {
			  font-size: 30px;
			  letter-spacing: -1.5px;
			  line-height: 30px;
		  } 
  
  .sf-type__number--lg {
			  font-size: 130px;
			  letter-spacing: -5px;
			  line-height: 140px;
		  } 
  
   
    }
 
  
  
/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/generic/_reset.css ***!
  \***************************************************************************************************************************************/
*, *:before, *:after {
  box-sizing: border-box;
}
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/generic/_normalize.css ***!
  \*******************************************************************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  -webkit-text-decoration: underline;
  text-decoration: underline; /* 2 */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*!******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/utilities/_helper.css ***!
  \******************************************************************************************************************************************/
/* For content that needs to be visually hidden but stay visible for screenreaders */
.editor-only {
  display: none;
}
.hs-inline-edit .editor-only {
  display: block;
}
.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}
@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/objects/_layout.css ***!
  \****************************************************************************************************************************************/
.sf-wrapper {
    background: #F5F6F7;

    width: 100%;
    margin: 0 auto;
  
    display:flex;
    flex-flow: column;
  } 

  
    .sf-wrapper--white {
      background: var(--white);
    }

.sf-dnd-page {

  padding-top: 80px;
  padding-bottom: 80px;
}

.sf-container {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
   
}

 
    @media screen and ( min-width: 768px ) {
         

.sf-container {
    padding: 0 calc(7vw); 
  }

 
    }
 

/* 
*
* Apply basic padding to non-full-width sections. 
* This will make .dnd-section follow the basic rules of .sf-container 
*
*/

.sf-dnd-page .dnd-section:not(div[class*="-full-width-section"]) {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
  
}

 
    @media screen and ( min-width: 768px ) {
         

.sf-dnd-page .dnd-section:not(div[class*="-full-width-section"]) {
      padding: 0 7vw;
  }

 
    }
 

/* 
*
* End basic padding for sections
 */

/* 
*
* Add .sf-section-gutter capability
* And account for .sf-section-gutter in dnd builder 
*
*/

.sf-dnd-page .dnd-section.sf-section-gutter {
  padding-left: 32px;
  padding-right: 32px;
}

 
    @media screen and ( min-width: 768px ) {
         

.sf-dnd-page .dnd-section.sf-section-gutter {
    padding-left: 7vw;
    padding-right: 7vw;
  }

 
    }
 

 
    @media screen and ( min-width: 1330px ) {
         

.sf-section-gutter {
    margin: 0 20px;
  }

/* For dnd-section, anything with .sf-section-gutter should be configured to be full-width  */

.sf-dnd-page .dnd-section.sf-section-gutter {
    padding-left: calc(7vw - 20px);
    padding-right: calc(7vw - 20px);
  }

/* By limiting the first .dnd-column, of the first row, we can account for our sf-container max-width */

.sf-dnd-page .dnd-section.sf-section-gutter > .row-fluid > .dnd-column {
    max-width: calc( 1640px - 14vw );
    margin-left: auto;
    margin-right: auto;
  }

 
    }
 

/* 
*
* End .sf-section-gutter
*
*/

.row-fluid {

	display: flex;
	gap: 0.5rem;
}

 
    @media screen and ( min-width: 768px ) {
         

.sf-dnd-page .row-fluid {
    row-gap: 96px;
    -moz-column-gap: 80px;
         column-gap: 80px;
  }

 
    }
 

.row-fluid [class*='span'] {
	flex: 1;
}

.row-fluid .span12 {
	flex-basis: 100%;
}

.row-fluid .span11 {
	flex-basis: 91.66%;
}

.row-fluid .span10 {
	flex-basis: 83.33%;
}

.row-fluid .span9 {
	flex-basis: 75%;
}

.row-fluid .span8 {
	flex-basis: 66.66%;
}

.row-fluid .span7 {
	flex-basis: 58.33%;
}

.row-fluid .span6 {
	flex-basis: 50%;
}

.row-fluid .span5 {
	flex-basis: 41.66%;
}

.row-fluid .span4 {
	flex-basis: 33.33%;
}

.row-fluid .span3 {
	flex-basis: 25%;
}

.row-fluid .span2 {
	flex-basis: 16.66%;
}

.row-fluid .span1 {
	flex-basis: 8.33%;
}

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

.row-fluid {
		display: block;
  }

 
    }
 
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/objects/_containers-dnd.css ***!
  \************************************************************************************************************************************************/
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

/* .dnd-section .dnd-column {
  padding: 0 1rem;
} */

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_header.css ***!
  \*******************************************************************************************************************************************/
/*==============================
=            Header            =
==============================*/

.main-header {
	align-items: center;
	background-color: var(--white);
	-moz-column-gap: 0.5rem;
	     column-gap: 0.5rem;
	display: flex;
	flex-flow: row nowrap;
	height: 90px;
	left: 0;
	padding-left: 20px; 
	padding-right: 20px;
	position: relative;
	text-align: right;
	top: 0;
	width: 100%;
}

/* Place mobile trigger button after toggle variant search button */

.main-header__mobile-trigger {
		order: 3;
	}

.main-header__search { 
		display: none;
	}

/* Alternate search styling that expands on button click. */

.main-header__search--toggle {
		height: 100%;
		margin-left: auto;
		order: 2;
	}

.main-header__search--toggle .main-header__search-area {
			background-color: var(--black);
			box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
			top: 100%;
			right: 0;
			bottom: auto;
			left: 0;
			padding: 1.25rem;
			position: absolute;
			width: 100vw;
			z-index: 100;
		}

.main-header__search--toggle .main-header__search-area[aria-hidden] {
				display: none;
			}

.main-header__search--toggle .main-header__search-area .hs-search-field {
				--background-color: var(--black);
				--background-color-active: var(--black);
				--border-color: var(--black);
				--button-background-color-active: var(--black);
				--button-font-color-active: var(--blue);
				--font-color: var(--white);
				--font-size: 1.33rem;
				--padding-block: 0.25rem;
				--padding-inline: 0.5rem;
				--suggestions-background-color: var(--black);
				--suggestions-font-color: var(--white);
			}

.main-header__search--toggle .main-header__search-area .hs-search-field__input {
					border-top: none;
					border-left: none;
					border-right: none;
					border-bottom: 3px solid var(--dark_grey);
				}

.main-header__search--toggle .main-header__search-area .hs-search-field__input:focus {
						border-bottom: 3px solid var(--blue);
						outline: none;
					}

.main-header__search--toggle .main-header__search-area .hs-search-field__button {
					padding-left: 1.5rem;
				}

.main-header__search--toggle .main-header__search-area .hs-search-field__button svg {
						transform: scale(1.6);
						transform-origin: center;
					}

.main-header__search--toggle .main-header__search-area .hs-search-field--open .hs-search-field__suggestions {
					display: none;
				}

.main-header__search--toggle .main-header__search-area .hs-search-field__suggestions-container {
					display: none;
				}

/* Trigger button for toggle search variant. */

.main-header__search-trigger {
		align-items: center;
		-webkit-appearance: none;
		-moz-appearance: none;
		     appearance: none;
		border: none;
		background-color: #FFFFFF;
		color: var(--black);
		cursor: pointer;
		display: flex;
		height: 100%;
		justify-content: center;
		padding-left: 1rem;
		padding-right: 1rem;
	}

.main-header__search-trigger svg {
			fill: currentColor;
			height: 1.5rem;
			/* Magic Number: It just looks right. Sorry. */
			transform: translateY(4px);
		}

.main-header__search-trigger[aria-expanded="true"] {
		  background-color: var(--black);
		  color: var(--white);
		}

.main-header .btn { 
		display: none;
	}

.main-header.nav-is-open {
		background: var(--white);
		border-bottom: 1px solid   #e1e1e1 ;
	}

@media screen and (min-width: 1080px ) {
	.main-header {
		background: #F5F6F7;
		background: var(--offWhite, #F5F6F7 );
		font-size: 1.25rem;
	}
		/* padding: 1em 20px;  */

		.main-header .btn {
			display: flex;
			line-height: 0;
			margin-right: 0;
			margin-left: auto;
			height: 50px;
		}

		/* Non-toggle search input */
		.main-header__search {
			display: flex;
			flex-basis: 15rem;
			flex-shrink: 1;
			margin-left: auto;
			margin-right: 0.5em;
			text-align: left;
		}

			.main-header__search + .btn {
				margin-left: 0;
			}
		
		/* Hidden search input with toggle dropdown */
		.main-header__search--toggle {
			order: initial;
		}

			.main-header__search--toggle .main-header__search-area {
				left:auto;
				max-width: 32rem;
				right: 0;
				width: 50vw;
			}

			.main-header__search--toggle + .btn {
				margin-left: 0.5rem;
			}

		.main-header__search-trigger {
			background-color: transparent;
		}
}

#site_logo img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* Navigation skipper */

.header__skip {
	height: 1px;
	left: -1000px;
	overflow: hidden;
	position: absolute;
	text-align: left;
	top: -1000px;
	width: 1px;

	text-decoration-line: underline;
  }

.header__skip:hover,
  .header__skip:focus,
  .header__skip:active {
	height: auto;
	left: 50%;
	overflow: visible;
	top: 1em;
	width: auto;
	transform: translateX(-50%);

	padding: 1em;
	background-color:  #FFE06A ;
	color:  #26272A ;
	z-index: 999;
	font-size: 20px;
  }

.sf-search-field {

	height: 50px;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;

	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
}

.sf-search-field__bar {
    width: 0;

    height: 100%;
    display: flex;
    overflow: hidden;
  }

.sf-search-field__bar form {
		width: 100%;
	}

.sf-search-field__bar input {
      border: none;
      height: 50px;
      z-index: 10;
	  font-size: 14px;
    }

.sf-search-field__bar label {
      visibility: hidden;
      height: 0;
      width: 0;
    }

.sf-search-field.active .sf-search-field__toggle {
      display: none;
    }

.sf-search-field.active .sf-search-field__bar {
      transition: width ease 500ms;
      width: 200px;


    }

.sf-search-field__toggle {
    height: 1em;
    width: 1em;

  }

/* .main-header__mobile-trigger {
	margin-left: auto;
	margin-right: 0;
} */

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_footer.css ***!
  \*******************************************************************************************************************************************/
/*==============================
=            Footer            =
==============================*/
 


 
.sf-footer { 
	display: flex;
	font-size: 1.25rem;
 	 position: relative;
 
	height: calc(100vh - 66px); 
	min-height: 667px;

	height: 100%;
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(https://20811975.fs1.hubspotusercontent-na1.net/hubfs/20811975/system/footer.png);

	
}
 


 
.sf-footer .sf-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
 


 
.sf-footer__upper {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		justify-content: space-between;	

		margin-top: 80px;
	}
 


 
.sf-footer__upper__left {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-bottom: 80px;
		}
 


 
.sf-footer__upper__right {
			width: 100%;
			display: flex;

			flex-direction: column;
			align-items: center;

		}
 


 
.sf-footer__lower {
		display: flex;
		flex-direction: column;
		align-items: center;

		padding-bottom: 32px;
		
		justify-content: space-between;
		margin-bottom: 11em;
	}
 


 
.sf-footer__logo {
		background-image:  url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/logo.svg) ;
		height: 38px;
		width: 150px;
		display: block;
		align-self: center;
		margin-right: 0;
	
		background-position: center center;
		
		background-repeat: no-repeat;
		background-size: contain;
	
		margin-bottom: 80px;
		
		
		text-align: left;
		
		text-indent: -9999em;
		
		
	}
 


 
.sf-footer__form-wrapper {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		


	}
 


 
.sf-footer__form-wrapper h5, .sf-footer__form-wrapper .form-title {
			
			padding-bottom: 40px;
		}
 


 
.sf-footer__form-wrapper .hs-button {
        }
 


 
/* Main Form Wrapper */
 


 
.sf-footer__form-wrapper #hs_form_target_footer_signup.submitted-message {
				display: inline-block;
				font-size: 1.4em;
				color: rgba(0,0,0,0);
				background: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/done-24px.svg) no-repeat center left;
				background-size: contain;
				height: 1em;
				width: 1.2em;
	
				animation: slideInRight;
				animation-duration: 2s;
		
			}
 


 
.sf-footer__form-wrapper #hs_form_target_footer_signup.submitted-message form {
					animation: fadeOut;
					animation-duration: 2s;
				}
 


 
.sf-footer__utility-nav {
		font-size: 13px;
		font-weight: 400;
		order: 2;

		margin-bottom: 16px;
	}
 


 
.sf-footer__utility-nav ul {
			font-size: 1em; 
			list-style: none;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0;
			padding: 0;
		}
 


 
.sf-footer__utility-nav ul li {
				line-height: 2;
			}
 


 
.sf-footer__utility-nav li + li {
			margin-left: 20px;
		}
 


 
.sf-footer__utility-nav a {
			color:  #26272A ;
		}
 


 
.sf-footer__copyright {
		font-size: 13px;
		color:  #26272A ;
		order: 3;
		
	}
 


 
.sf-footer__socials {
		order: 1;
		margin-bottom: 32px;
		display: flex;
		flex-direction: row;
		-moz-column-gap: 10px;
		     column-gap: 10px;
		
	}
 


 
.sf-footer__socials a {
			color:  #26272A ;
		}
 


 
.sf-footer .social-source path {
		fill:  #26272A ;
	}
 


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


 
.sf-footer__lower {
		margin-bottom: 11em; 
	}
 


 
 
    }
 
 


 
 
    @media screen and ( min-width: 768px ) {
         
 


 
.sf-footer .sf-container {}
 


 
.sf-footer__upper__right {
		flex-flow: row nowrap;
		justify-content: space-between;
		width: 100%;
	}
 


 
.sf-footer__lower {
		width: 52.5%;

	}
 


 
.sf-footer__logo {
		display: inline-block;
		align-self: initial;
		background-image:  url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/logo-square.svg) ;
		background-position: left top;
		height: 36px;
		width: 36px;
		margin-right:  40px ; 
	}
 


 
.sf-footer__form-wrapper { 
		text-align: left;
		width: 50%;
	}
 


 
 
    }
 
 


 
 
    @media screen and ( min-width: 1330px ) {
         
 


 
/* Color adjustments for screen size */
 


 
.sf-footer__socials {
		margin-top: 0;
		margin-bottom: 0;
		order: 3;
	}
 


 
.sf-footer .social-source path{
		fill:  #FFFFFF ;
	}
 


 
.sf-footer__utility-nav a,
	.sf-footer__copyright {
		color:  #FFFFFF ;
	}
 


 
.sf-footer {
		height: 796px;
		background-size: cover;
		background-position: bottom center;
		
	}
 


 
.sf-footer__upper {
		flex-flow: row nowrap;
		align-items: flex-start;
		margin-top: 120px;
		-moz-column-gap: 120px;
		     column-gap: 120px;
	}
 


 
.sf-footer__upper__left {
		flex-direction: row;
		width: 50%;
	}
 


 
.sf-footer__upper__right {
		justify-content: flex-end;
		align-items: flex-start;
		width: 50%; 
	}
 


 
.sf-footer__lower {
		flex-flow: row nowrap;
		width: 100%;
		margin-bottom: 0;
	}
 


 
.sf-footer__logo {
		height: 90px;
		width: 108px;
		margin: 0;
		padding: 0;

	}
 


 
.sf-footer__form-wrapper {
		width: 100%;
		margin-left: 40px;
	}
 


 
.sf-footer__utility-nav {
		margin-bottom:0;
	}
 


 
.sf-footer__utility-nav ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
 


 
.sf-footer__utility-nav li {
		line-height: 1;
	}
 


 
 
    }
 
 


 
.social-icon {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
}
 


 
#hs_cos_wrapper_footer-menu {
	width: 100%;
	
}
 


 
#hs_cos_wrapper_footer-menu ul {
		width: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		
	}
 


 
#hs_cos_wrapper_footer-menu ul:first-child { 
			/* First level */
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-evenly;
			-moz-column-gap: 10px;
			     column-gap: 10px;
		}
 


 
#hs_cos_wrapper_footer-menu ul.hs-menu-children-wrapper { 
			/* second level UL */
			padding: 0;
		}
 


 
#hs_cos_wrapper_footer-menu ul.hs-menu-children-wrapper a {
				font-size: 16px;
				line-height: 24px;
				letter-spacing: -0.4px;
				font-weight: bold;
				
				color:  #26272A ;

				-webkit-text-decoration: none;

				text-decoration: none;
				white-space: pre-wrap;
			}
 


 
#hs_cos_wrapper_footer-menu ul.hs-menu-children-wrapper a:hover,
				#hs_cos_wrapper_footer-menu ul.hs-menu-children-wrapper a:focus {
					color: #3D9FDF ;
					text-decoration: underline overline;
					-webkit-text-decoration: underline overline dotted;
					        text-decoration: underline overline dotted;
					text-underline-offset: 3px;
				}
 


 
#hs_cos_wrapper_footer-menu .hs-menu-depth-1 {
		text-align: left;
		margin-bottom: 80px;

	}
 


 
#hs_cos_wrapper_footer-menu .hs-menu-depth-1 li {
			line-height: 1;

			margin-top: 0.3em
		}
 


 
#hs_cos_wrapper_footer-menu .hs-menu-depth-1 > a {
			font-family:  Bebas ;
			font-weight: bolder;
			letter-spacing: 2px;
			padding-bottom: 1em;
			
			color:  #26272A ;
			font-size: 1.25rem;
			line-height: 1.63;

			-webkit-text-decoration: none;

			text-decoration: none;

			
		}
 


 
 
    @media screen and ( min-width: 768px ) {
         
 


 
#hs_cos_wrapper_footer-menu ul:first-child {
		justify-content: flex-start;
		-moz-column-gap: 10%;
		     column-gap: 10%;
	}
 


 
.hs-menu-children-wrapper {
		max-width: 160px;
	}
 


 
.hs-menu-depth-1 {
		text-align: left;
	}
 


 
 
    }
 
 


 
 
    @media screen and ( min-width: 1330px ) {
         
 


 
.hs-menu-item {
		text-align: left;
	}
 


 
.hs-menu-depth-1 + .hs-menu-depth-1 {
		margin: 0 0 0 60px;
	}
 


 
#hs_cos_wrapper_footer-menu ul:first-child {
		justify-content: space-between;
	}
 


 
#hs_cos_wrapper_footer-menu ul.hs-menu-children-wrapper a {
		font-size: 20px;
		line-height: 25px;
		letter-spacing: -0.5px;
		font-weight: bold;
	}
 


 
 
    }
 

/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_default-modules.css ***!
  \****************************************************************************************************************************************************/

  .hs-menu-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
  
  /* Horizontal menu */
  
  .hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
    flex-direction: column;
  }
  
   
    @media screen and ( max-width: 768px ) {
         
  
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
      flex-direction: column;
    }
  
   
    }
 
  
  /* Vertical menu */
  
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    flex-direction: column;
  }
  
  /* Flyouts */
  
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
    display: inline-flex;
  }
  
   
    @media screen and ( max-width: 768px ) {
         
  
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
      display: flex;
    }
  
   
    }
 
  
  .hs-menu-wrapper.flyouts .hs-item-has-children {
    position: relative;
  }
  
  header .hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
    left: -9999px;
    opacity: 0;
    position: absolute;
  }
  
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
    display: block;
    white-space: nowrap;
  }
  
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    top: 100%;
  }
  
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 100%;
    opacity: 1;
    top: 0;
  }
  
   
    @media screen and ( max-width: 768px ) {
         
  
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
    .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
    .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
      left: 0;
      opacity: 1;
      position: relative;
      top: auto;
    }
  
   
    }
 
  
  /* CTA, logo, and rich text images */
  
  .hs_cos_wrapper_type_cta img,
  .hs_cos_wrapper_type_logo img,
  .hs_cos_wrapper_type_rich_text img {
    height: auto;
    max-width: 100%;
  }
  
  .logo {
    background-image:  url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/logo.svg) ;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  
    height: 66px;
    width: 80px;
    text-align: left;
    display: block;
    text-indent: -9999em;
    float: left;
  }
  
   
    @media screen and ( min-width: 1080px ) {
         
  
  .logo {
        
      height: calc(150px * 0.6);
      width:   150px ;
  
      background-image:  url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/logo.svg) ;
      background-position: left center;
      background-repeat: no-repeat;
      background-size: contain;
      height: 50px;
      width: 200px;
      text-align: left;
      display: block;
      text-indent: -9999em;
      float: left;
      margin-right: 2em;
    }
  
   
    }
 
  
  .hs_cos_wrapper_type_logo {
  
    z-index: 10; 
    /* Keep it on top of the mobile menu */
  }
  
  .hs_cos_wrapper_type_logo a {
    /* height: 90px; */
    width: 150px;
    text-align: left;
    display: flex;

    float: left;
    margin-right: 2em;
  }
  
   
    @media screen and ( min-width: 1080px ) {
         
  
  .hs_cos_wrapper_type_logo a {
      height: auto;
      width: 200px;
    }
  
   
    }
 
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_search.css ***!
  \*******************************************************************************************************************************************/
/* ===== Search Input ===== */
.hs-search-field {
  --accent-color: var(--blue);
  /* FIXME: This border color almost certainly doesn't meet contrast 
   * requirements for interactive elements, but I don't want to start adding 
   * colors to the palette all willy-nilly. */
  --border-color: var(--grey);
  --background-color: var(--offWhite);
  --background-color-active: #ffffff;
  --button-background-color: var(--black);
  --button-background-color-active: transparent;
  --button-border-color: var(--black);
  --button-border-color-active: var(--black);
  --button-font-color: var(--white);
  --button-font-color-active: var(--black);
  --font-color: var(--black);
  --font-size: 1rem; 
  --padding-block: 1.25rem;
  --padding-inline: 2rem;
  --suggestions-background-color: #ffffff;
  --suggestions-font-color: var(--black);
}
/* Set the font size on the base of the form so it can be 
   * scaled with ems. */
.hs-search-field__form {
    font-size: var(--font-size);
  }
/* Search Bar */
.hs-search-field__input {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: 2px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--font-color);
    font-size: 1em;
    line-height: 1;
    padding: var(--padding-block) var(--padding-inline);
    transition: background-color 100ms linear, border-color 100ms linear;
  }
.hs-search-field__input:focus {
      background-color: var(--background-color-active);
      border-color: var(--accent-color);
      outline-color: var(--accent-color);
    }
.hs-search-field__input::-moz-placeholder {
      line-height: 1;
    }
.hs-search-field__input::placeholder {
      line-height: 1;
    }
/* Submit Button */
.hs-search-field__button {
    -webkit-appearance: none;
    align-items: center;
    -moz-appearance: none;
         appearance: none;
    border: 2px solid var(--button-border-color, var(--black));
    background-color: var(--button-background-color, var(--black));
    color: var(--button-font-color, var(--white));
    display: inline-flex;
    flex-direction: row;
    font-family: var(--font-accent);
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: var(--padding-block) var(--padding-inline);
    transition: color 150ms linear, background-color 150ms linear,
      border-color 150ms linear;
  }
.hs-search-field__button:hover,
    .hs-search-field__button:focus-visible {
      border-color: var(--button-border-color-active, var(--black));
      background-color: transparent;
      background-color: var(--button-background-color-active, transparent);
      color: var(--button-font-color-active, var(--black));
    }
.hs-search-field__button:hover {
      cursor: pointer;
    }
.hs-search-field__button:focus-visible {
      border-color: var(--blue);
      box-shadow: 0 0 0 2px var(--white);
      outline: 1px solid var(--blue);
    }
/* Button Icon */
.hs-search-field__button .hs_cos_wrapper_type_icon {
      height: 1.2em;
    }
.hs-search-field__button svg {
      fill: currentColor;
      height: 100%;
    }
/* Search Suggestions/Autocomplete Box */
/* Lots of these styles are defined within the module itself, 
   * at higher specificity than we can reasonably achieve here
   * without making some !important soup. 
   *
   * Decided to leave the styling as-is rather than split it or
   * mutilate the selectors for higher specificity. */
.hs-search-field--open .hs-search-field__suggestions {
    background-color: var(--suggestions-background-color);
    border: 2px solid var(--border-color);
    border-top: none;
    box-shadow: none;
    color: var(--suggestions-font-color);
    text-align: left;
  }
.hs-search-field--open .hs-search-field__suggestions-container {
      z-index: 2;
    }
/* Class naming structure just TOTALLY falls apart here? */
.hs-search-field--open .hs-search-field__suggestions li a,
    .hs-search-field--open .hs-search-field__suggestions .results-for {
      line-height: 1.4;
      padding: 0.25em 0.5em;
    }
/* ===== Search Results ===== */
/* Hope you like the "flex-col + gap" pattern for regular spacing. */
.hs-search-results__listing {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
/* This is the title for each individual result, not the entire page. */
.hs-search-results__title {
    line-height: 1.33;
    margin-bottom: 1rem;
  }
/* This is the "XX-XX of YYY results" message. */
.hs-search-results__message {
    font-size: 0.875rem;
    font-style: italic;
    margin-bottom: 2rem;
    opacity: 0.75;
  }
.hs-search-results__pagination {
    margin-top: 3rem;
  }
/* !important reasoning: The module has included, higher-priority 
       * styling that overrides these values. */
.hs-search-results__pagination__link--prev {
        margin-right: auto !important;
      }
.hs-search-results__pagination__link--next {
        margin-left: auto !important;
      }
/* Made these round because the active link felt weird as a rectangle. */
.hs-search-results__pagination__link--number {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
      }
.hs-search-results__pagination__link--number:focus-visible {
          box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--blue);
        }
.hs-search-results__pagination__link--number:focus {
          outline: none;
        }
.hs-search-results__pagination__link--active {
        background-color: var(--blue);
        border-color: var(--blue);
        border-radius: 50%;
        color: var(--white);
        font-weight: 700;
        transition: background-color 150ms linear;
      }
.hs-search-results__pagination__link--active:hover,
        .hs-search-results__pagination__link--active:focus,
        .hs-search-results__pagination__link--active:focus-visible {
          background-color: var(--dark-blue);
          border-color: var(--dark-blue);
          color: var(--white);
          transition: background-color 150ms linear;
        }
/* This gives the effect of a 2px white outline wrapped in a 2px blue outline — gives us that sweet, sweet contrast. */
.hs-search-results__pagination__link--active:focus-visible {
          box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--blue);
        }
/* Removing default focus style to avoid Safari bug with 
         * outline property not respecting border radius. */
.hs-search-results__pagination__link--active:focus {
          outline: none;
        }
/* This is a literal highlight, allowing you to differentiate 
* which word from the search query is matched in the result. 
*
* I styled it as a literal highlight — we'll see if that passes brand. */
.hs-search-highlight {
  isolation: isolate;
  position: relative;
}
.hs-search-highlight::before {
    content: "";

    background-color: var(--yellow);
    display: block;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    position: absolute;
    z-index: -1;
  }
/* ===== Search Results Page ===== */
.systems-page--search-results {
  /* Still hope you like the flex-col and gap pattern, because you're
   * not gonna convince me to use the :not(:first-child) margin-top pattern
   * instead.  */
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 80ch;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.systems-page--search-results h1 {
    margin-bottom: 0;
  }
/* ===== Navbar Search Input (non-toggle version) ===== */
.main-header__search .hs-search-field {
  --border-color: #e0e1e2;
  --button-background-color: #e0e1e2;
  --button-background-color-active: var(--black);
  --button-border-color: #e0e1e2;
  --button-border-color-active: var(--black);
  --button-font-color: var(--black);
  --button-font-color-active: var(--white);
  --padding-block: calc(0.75rem);
  --padding-inline: 1.25rem;
}
/* Hide the "no results" message in this context. 
   * It isn't super necessary, and causes lots of problems with sizing/spacing.*/
.main-header__search .hs-search-field:not(.hs-search-field--open) .hs-search-field__suggestions-container {
    display: none;
  }
.main-header__search .hs-search-field__bar button svg {
    transform-origin: center;
    transform: scale(1.4);
  }

/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_accordion.css ***!
  \**********************************************************************************************************************************************/
.aivilo-web-accordion-module__item {
    font-family: 'Roboto', sans-serif;
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_media-block.css ***!
  \************************************************************************************************************************************************/
  
/*===================================
=            Media Block            =
===================================*/
.media-block {
    display: flex;
	flex-direction: column;
	align-items: flex-start;


	border: 2px solid transparent;

	margin: -1em;
	padding: 1em;
	width: calc(100% + 2em);
}
.media-block:focus,
	.media-block:focus-within{
		border: 2px solid  #444444 ;
	}
.media-block .media-block__inner {
		width: 100%;

		
	}
.media-block img {
		width: 100%;
		display: block;
		margin-bottom: .5em; 
	}
.media-block__pre-text {
		font-size: 0.8em;
		padding: 0.5em 0;
	}
.media-block__read-more {

		font-size: 16px;

	}
.media-block a {
		color: var(--black);
		-webkit-text-decoration: none;
		text-decoration: none;
	}
a.media-block__text:hover {
	color: var(--black);
}
.media-block__text {

	width: 100%;

	font-weight: 700;
	line-height: 1;
	
	font-size: 16px;
	font-size: 1.2em;
	line-height: 24px;
	letter-spacing: -0.4px;
	font-weight: bold;

	-webkit-text-decoration: none;

	text-decoration: none; 

	color: var(--black);

	flex-grow: 1;
	display: inline-flex;
	flex-direction: column;

	padding: .25em 0; 
}
.media-block__topics {

    font-size: 0.8em;
  }
@media screen and (min-width: 1330px ) {
	.media-block__text {
		font-size: 20px;
		line-height: 25px;
		letter-spacing: -0.5px;
		font-weight: bold;
	}
}
.media-table__entry-cta {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;

  -moz-column-gap: 20px;

       column-gap: 20px;
  padding-top: 1.2em;

  font-weight: bold;
}
.arrow {
    width: 30px;
    height: 20px;
    background-color: var(--black);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: right;
            mask-position: right;
    transition: background-color .3s ease;



	-webkit-mask-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-next.svg);
    mask-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-next.svg);

  
    
}
.media-block:hover .media-table__entry-cta,
.media-table__entry:hover .media-table__entry-cta {
	color: var(--blue);
}
.media-block:hover .arrow,
.media-table__entry:hover .arrow {
    background-color: var(--blue);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1)
  }
  to {
    transform: scale(1);
  }
}

/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_hero.css ***!
  \*****************************************************************************************************************************************/
/*============================
=            Hero            =
============================*/

.sf-hero {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

 
    @media screen and ( min-width: 1330px ) {
         

.sf-hero {
    min-height: 550px;
  }

 
    }
 

.sf-hero__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:0;
  
}

.sf-hero__background img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    height: 100%;
    width: 100%;
  }

.sf-hero__background__scrim {
          background: linear-gradient(to right,rgba(0,0,0,0.43),rgba(0,0,0,0));
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
        }

.sf-hero .sf-container {
  display: flex;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  align-items:center;

}

.sf-hero__foreground {
  
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  /* margin: 7em -32px; */

  /* padding: 2em 32px; */
  color: #fff;
  color: var(--white, #fff);

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));


}

.sf-hero__content {
  width: 100%;
  /* overflow-wrap: anywhere; */

}

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

/* .sf-hero__content {
    overflow-wrap: anywhere;
    background: green;
  } */

 
    }
 

 
    @media screen and ( min-width: 1330px ) {
         

.sf-hero .sf-container {
    align-items: stretch;
  }

.sf-hero__foreground {
    max-width: 60%;
    margin-top: 0;
    margin-bottom: 0;
    flex-basis: auto;
  }

 
    }
 

.sf-hero h1, .sf-hero h2, .sf-hero h3 {
  margin-top: 0;
  margin-bottom: 20px;
}

.sf-hero__caption {
  margin-bottom: 40px;
}

.sf-hero__cta {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1em;
  -moz-column-gap: 1em;
       column-gap: 1em;
}

.sf-hero__cta .hs_cos_wrapper_type_cta:nth-of-type(2) .cta_button {
      background: transparent;
      border-color: var(--white);
      color: var(--white);
    }

.sf-hero__cta .hs_cos_wrapper_type_cta:nth-of-type(2) .cta_button:focus,
      .sf-hero__cta .hs_cos_wrapper_type_cta:nth-of-type(2) .cta_button:hover {
        background: var(--white);
        color: var(--black);
      }
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_flex-cols.css ***!
  \**********************************************************************************************************************************************/


.sf-flexible-cols__top {
        padding-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
    }

        .sf-flexible-cols__top .sf-flexible-cols__headline {

        }

        .sf-flexible-cols__top .sf-flexible-cols__intro {
            margin-top: 40px;
        }
    .sf-flexible-cols__wrap {
        padding-top: 40px;

        display: flex;
        flex-direction: column;

    }
    .sf-flexible-cols__col {
        
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        order: 2;

        margin-bottom: 40px;
        
        
    }
    .sf-flexible-cols__col--start {
            justify-content: flex-start;
        }
    .sf-flexible-cols__col--center {
            justify-content: center;
        }
    .sf-flexible-cols__col--end {
            justify-content: flex-end;
        }
    .sf-flexible-cols__col--image {
            order: 1;
        }
    .sf-flexible-cols__col img {
            margin-bottom: 1.5em;
            height: auto;
        }
    .sf-flexible-cols__col > p {
            margin-top: 0;
        }
    .sf-flexible-cols__col-title {
            margin-bottom: 40px;
            
        }
    .sf-flexible-cols__col-button-group {
            display: flex;
            flex-flow: row no-wrap;

            margin-top: 40px;
        }
    .sf-flexible-cols__col-button-group .hs_cos_wrapper_widget + .hs_cos_wrapper_widget {
                margin-left: 1em;
            }
    .sf-flexible-cols__col > *:not(img) {
            width:100%;
        }
    .sf-flexible-cols--white .sf-container {
        background-color: var(--white);
        }
    .sf-flexible-cols--dark-grey .sf-container {
        background-color: var(--black);
        }
    .sf-flexible-cols--dark-grey p, 
        .sf-flexible-cols--dark-grey .sf-flexible-cols__headline, 
        .sf-flexible-cols--dark-grey .sf-flexible-cols__intro {
            color: var(--white);
        }

 
    @media screen and ( min-width: 1080px ) {
         

 
    }
 

@media screen and (min-width: 768px) {
    .sf-flexible-cols__wrap {
        flex-direction: row;
        align-items: stretch;
    }
    .sf-flexible-cols--2  {
        -moz-column-gap: 90px;
             column-gap: 90px;
    }
    .sf-flexible-cols--3 {
        -moz-column-gap: 40px;
             column-gap: 40px;
    }

    .sf-flexible-cols__col {
        flex: 1 1 0;
        margin-top: 0;
        order: initial;
    }
    .sf-flexible-cols__col > * {
        width: 90%;
    }
    .sf-flexible-cols__col--image {
        order: initial;
    }
}

 
    @media screen and ( min-width: 1330px ) {
         

.sf-flexible-cols--2 {
        -moz-column-gap: 140px;
             column-gap: 140px;
    }

.sf-flexible-cols--3 {
        -moz-column-gap: 90px;
             column-gap: 90px;
    }

 
    }
 
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_get-involved.css ***!
  \*************************************************************************************************************************************************/
/*==============================
=            Mixins            =
==============================*/

 
/*==========  Breakpoints  ==========*/

 
/* Defaults to min-width */

 
/* @define-function breakpoint($point, $minOrMax: min-width) {
    @media screen and ( $minOrMax: $point ) {
        @content;
    }
} */

 
/*==========  Rem Font Size w/ px backup  ==========*/

 
/* RS - Making REMs EMs because Envoy never fucking used REMs right to begin with */

 
/* ======== Issues ========== */

 
/* 
1) sf-text--emphasize is both a wrapper and the element level selector. Changing rem to em will cause blowout on nested <h1>, <h2>...
*/

 
/* @define-function fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
} */

 
/*-----  End of Mixins  ------*/

 
/* .sf-dnd-page .sf-get-involved.dnd-section {
    width: 100%;
    max-width: unset !important;
    margin-left: 20px;
    margin-right: 20px;

}

.sf-get-involved.dnd-section > .row-fluid {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
   
}
@media screen and (min-width:  768px ) {
    .sf-get-involved.dnd-section > .row-fluid {
        padding-left: calc(7vw);
        padding-right: calc(7vw);
    } 
}
@media screen and (min-width:  768px ) {
    .sf-get-involved.dnd-section > .row-fluid {
        padding-left: calc(7vw);
        padding-right: calc(7vw);
    } 
} */

 
.sf-get-involved .dnd-column .row-depth-1.dnd-row .dnd-column {
    display: flex;
    flex-direction: column;
}

 
/* This lines up buttons in the columns */

 
.sf-get-involved .row-fluid .dnd-column > .row-fluid-wrapper:not(:first-of-type) .row-depth-1.dnd-row:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

 
/* Adding that silly one-off font style for the "impacts" version of this */

 
.sf-get-involved .sf-type__eyebrow {
    text-transform: uppercase;
}

 
.sf-get-involved .hs_cos_wrapper_type_rich_text h2,
.sf-get-involved .hs_cos_wrapper_type_rich_text h3, 
.sf-get-involved .hs_cos_wrapper_type_rich_text h4 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 700}

 
@media screen and (min-width: 1330px) { 
    .sf-get-involved .hs_cos_wrapper_type_rich_text h2,
    .sf-get-involved .hs_cos_wrapper_type_rich_text h3, 
    .sf-get-involved .hs_cos_wrapper_type_rich_text h4 {
        font-size: 55px;
        font-size: 3.4375rem;
        letter-spacing: -1.5px;
        line-height: 1.2;
        font-weight: 700}
}

 
.sf-get-involved .sf-text--emphasize em, 
.sf-get-involved .sf-text--emphasize em:after, {
    background-image: linear-gradient(transparent 60%, #0072BC 40%);
}

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_dialog.css ***!
  \*******************************************************************************************************************************************/
 
















 
































:root {
    --blue : #3D9FDF;
    --aqua : #88C8D2;
    --green : #9ACDC1;
    --white : #FFFFFF;
    --offWhite : #F5F6F7;
    --grey : #E9EEF1;
    --black : #26272A;
    --dark-blue : #212b40;
    --bright-blue : #029bff;
    --light-blue : #5aa3e9;
    --orange : #F79433;
    --yellow : #FFE06A;
    --red : #d15c5c;
    --dark_grey : #444444;

    --font-primary: Roboto, sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
    --font-accent: Bebas, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}











 

.dialog {
    box-sizing: border-box;
    background-color: var(--white);
}

.dialog__title-area { 
        padding:  2em;
        background: var(--blue);
        box-shadow: 0 1px 5px var(--white );
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;  
    }

.dialog__title-area__title {

            flex: 1 0 90%;
            order: 1;
            margin: 0 0 1.5em 0;

        }

.dialog__title-area__sub-content {
            font-size: 1em;
            font-weight: bold;
            color: var(--black);
            order: 3;
        }

.dialog__title-area__sub-content span {
                font-size: 1.5em;
                margin-bottom: 0;
            }

.dialog__title-area__sub-content p {
                font-weight: lighter;
                font-size: 12px;
                line-height: 20px;
                margin: 1em 0 0 0;
            }

.dialog__content-area {
        overflow-y: auto;
        position: relative;
        line-height: 1.2;
        font-size: 1em;
    }

.dialog__content-area a:not(.btn) { 
            color: var(--blue);
        }

.dialog__content-area section {
            border-bottom: 1px solid var(--grey);
            margin: 0;
            overflow: auto;

            padding: 2em;
        }

.dialog__content-area p {
            font-size: 15px;
            opacity: 0.7;
            line-height: 20px;
            margin: 1em 0;
        }

.dialog__content-area__cta {
            text-align: center;
            background: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2em ;
        }

.dialog__content-area__cta a.btn {
                display: inline-flex;
                justify-content: center;
                align-items: center;
               
                position: relative;
            }

.dialog__content-area ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
            font-size: 0.8em; 
        }

/* max-height: 40vh; */

.dialog__content-area ul a {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                margin: 1em 0;
                -webkit-text-decoration: none;
                text-decoration: none;

                border: 1px solid rgba(0,0,0,0);
            }

.dialog__content-area ul a:focus { 
                    border: 1px solid var(--blue); 
                }
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_paginator.css ***!
  \**********************************************************************************************************************************************/
.paginator-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		
		line-height: 24px;
		letter-spacing: -0.4px;
		font-weight: bold;
		
		font-size: 24px;
		color: rgb(213,214,215);

}
.paginator {

	width: 1.5em;
	height: 1.5em;
	overflow: hidden;

	color: transparent;

	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
	display: inline-block;
}
.paginator:hover {
	color: transparent;
}
.paginator__next{
	background-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-next.svg);
}
.paginator__prev {
	background-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-prev.svg);
	
}
.paginator__current {
	padding: 0 0.5em 0 1em;
	color: var(--black);
}
.paginator__total {
	padding: 0 1em 0 0.5em;
	color: var(--black);
}

/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_img-text-panel.css ***!
  \***************************************************************************************************************************************************/
/*==============================
=            Mixins            =
==============================*/

 
/*==========  Breakpoints  ==========*/

 
/* Defaults to min-width */

 
/* @define-function breakpoint($point, $minOrMax: min-width) {
    @media screen and ( $minOrMax: $point ) {
        @content;
    }
} */

 
/*==========  Rem Font Size w/ px backup  ==========*/

 
/* RS - Making REMs EMs because Envoy never fucking used REMs right to begin with */

 
/* ======== Issues ========== */

 
/* 
1) sf-text--emphasize is both a wrapper and the element level selector. Changing rem to em will cause blowout on nested <h1>, <h2>...
*/

 
/* @define-function fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
} */

 
/*-----  End of Mixins  ------*/

 
/*============================
=     Image Text Block       =  
============================*/

 
.img-text-panel {  
}

 
.img-text-panel__section-title h3 {
    font-size: 55px;
    font-size: 3.4375rem;
    letter-spacing: -1.5px;
    line-height: 55px}     
/*!********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/components/_sub-nav.css ***!
  \********************************************************************************************************************************************/
@media screen and (min-width: 992px ) {
}

.media-nav {
    display: flex;
    flex-flow: row nowrap;
    background-color: var(--white);

    position:sticky;
    top: 0; 
    z-index: 99;
}

.media-nav__item {
        font-size: 20px;
        letter-spacing: -0.5px;
        line-height: 24px;
        font-weight: bold;

        cursor: pointer;
        font-size: 20px;
        letter-spacing: -0.5px;
        line-height: 24px;
        font-weight: bold;
}

.media-nav__item a {
            
            color: var(--black);
}

.media-nav__item a:hover {
                color: var(--blue);
}

.media-nav__list {
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: flex-start;
       
        width: 100%;
       
        padding-left: 0;
        padding-right: 0;

        -moz-column-gap: 1em;

             column-gap: 1em;

        margin: 1em 0;
}

@media screen and (min-width: 992px ) {

    .media-nav__list {
            justify-content: center;
}
}
/*!******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_buttons.css ***!
  \******************************************************************************************************************************************/
/*===============================
=            Buttons            =
===============================*/

 
















 
































:root {
    --blue : #3D9FDF;
    --aqua : #88C8D2;
    --green : #9ACDC1;
    --white : #FFFFFF;
    --offWhite : #F5F6F7;
    --grey : #E9EEF1;
    --black : #26272A;
    --dark-blue : #212b40;
    --bright-blue : #029bff;
    --light-blue : #5aa3e9;
    --orange : #F79433;
    --yellow : #FFE06A;
    --red : #d15c5c;
    --dark_grey : #444444;

    --font-primary: Roboto, sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
    --font-accent: Bebas, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}











 

.btn, .cta_button {
	padding: 1em 2.25em;
	
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	line-height: 1;

	border-width: 4px; 
	
	font-family:  Bebas ;
	font-size: 1.25rem;
	border-style: solid;
	font-weight: bold;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	height: auto;

	transition: all 0.15s ease-out;

	color: var(--white);
	border-color: var(--black);
	background: var(--black);

}

.btn, .btn a, .cta_button, .cta_button a {
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.btn:hover, .btn a:hover, .cta_button:hover, .cta_button a:hover {
			-webkit-text-decoration: none;
			text-decoration: none;
		}

.btn::after, .btn a::after, .cta_button::after, .cta_button a::after {
			content: '';
		}

.btn a.cta_button, .cta_button a.cta_button {
		color: inherit;
	}

.btn:focus, .cta_button:focus {
		border-style: dashed;
	}

.btn:focus,
	.btn:hover,
	.cta_button:focus,
	.cta_button:hover {
		background: transparent;
		border-color: var(--black);
		color: var(--black);
		transition: all 0.15s ease-in;
	}

.btn.btn--dark, .cta_button.btn--dark {
		background: var(--black);
		border-color: var(--black);
		color: var(--white);
	}

.btn.btn--dark:focus,
		.btn.btn--dark:hover,
		.cta_button.btn--dark:focus,
		.cta_button.btn--dark:hover {
	
			color: var(--black);
			background: var(--white);
		}

.btn.btn--red, .cta_button.btn--red {
		background: var(--red);
		border-color: var(--red);
		color: var(--white);
	}

.btn.btn--red:focus,
		.btn.btn--red:hover,
		.cta_button.btn--red:focus,
		.cta_button.btn--red:hover {
	
			color: var(--black);
			background: var(--white);
		}

.btn.btn--hollow, .cta_button.btn--hollow {

		background: transparent;
		color: var(--black);
	}

.btn.btn--hollow:focus,
		.btn.btn--hollow:hover,
		.cta_button.btn--hollow:focus,
		.cta_button.btn--hollow:hover {
			background: var(--black);
			color: var(--white);
		}

.btn.btn--white, .cta_button.btn--white {
		background: var(--white);
		border-color: var(--white);
		color: var(--black);
	}

.btn.btn--white:focus,
		.btn.btn--white:hover,
		.cta_button.btn--white:focus,
		.cta_button.btn--white:hover {
			color: var(--white);
			background: transparent;
		}

.btn.btn--hollow-white, .cta_button.btn--hollow-white {
		background: transparent;
		border-color: var(--white);
		color: var(--white);
	}

.btn.btn--hollow-white:focus,
		.btn.btn--hollow-white:hover,
		.cta_button.btn--hollow-white:focus,
		.cta_button.btn--hollow-white:hover {
			background: var(--white);
			color: var(--black);
		}

.btn.disabled, .cta_button.disabled {
		background: var(--grey);
		color: var(--grey);
		border-color: var(--grey);
	}

/*----------  Text Link  ----------*/

.text-link {
	text-transform: uppercase;
	-webkit-text-decoration: underline;
	text-decoration: underline;
	font-weight: 700;
}

.text-link.white-text-link {
		color: var(--white);
	}

.cta_button {
	background: var(--white);
		border-color: var(--white);
		color: var(--black);
}

.cta_button:focus,
		.cta_button:hover {
			color: var(--white);
			border-color: var(--white);
			background: transparent;
		}

.cta_button:nth-of-type(2) {
		background: transparent;
		border-color: var(--white);
		color: var(--white);
	}

.cta_button:nth-of-type(2):focus,
		.cta_button:nth-of-type(2):hover {
			background: var(--white);
			color: var(--black);
		}
/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_cta.css ***!
  \**************************************************************************************************************************************/
 
















 
































:root {
    --blue : #3D9FDF;
    --aqua : #88C8D2;
    --green : #9ACDC1;
    --white : #FFFFFF;
    --offWhite : #F5F6F7;
    --grey : #E9EEF1;
    --black : #26272A;
    --dark-blue : #212b40;
    --bright-blue : #029bff;
    --light-blue : #5aa3e9;
    --orange : #F79433;
    --yellow : #FFE06A;
    --red : #d15c5c;
    --dark_grey : #444444;

    --font-primary: Roboto, sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
    --font-accent: Bebas, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}











 
 

.sf-cta--circle-arrow {
    position: relative;  
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;

    -webkit-text-decoration: none;

    text-decoration: none;
  }
 

.sf-cta--circle-arrow:hover span:first-child {
          transform: translate(-0.5em, -0.5em);
        }
 

.sf-cta--circle-arrow:hover span:last-child svg {
            transform: translateX(2px) translateY(2px) rotate(45deg);
          }
 

/* // the circle / text */
 

.sf-cta--circle-arrow span:first-child {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #E8EFF3;
        border-radius: 50%;
        /* position: absolute;
        top: 50%;
        left: 50%; */
        /* transform: translate(-50%, -50%); */
        transition: transform 250ms ease;
  
        text-align: center;
        font-size: 16px;
        color: var(--black);
        font-weight: bold;
        letter-spacing: -0.4px;
        line-height: 17px;
      }
 

/* // the arrow */
 

.sf-cta--circle-arrow span:last-child {
        z-index: 1;
      }
 

.sf-cta--circle-arrow span:last-child svg {
          position: absolute;
          display: inline-block;
          right: 5px;
          bottom: 5px;
          width: 30px;
          height: 20px;
          transform: rotate(45deg);
          transition: transform 250ms ease;
        }
/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_forms.css ***!
  \****************************************************************************************************************************************/

    
  
  
  /* @import '../tools/_mixins.css'; */
  
  /* Fields */
  
  .hs-form-field {
    margin-bottom: 1.4rem;
    position: relative;
}
  
  /* Labels */
  
  form label {
	display: flex;
	font-size: 0.875rem;
	margin-bottom: 0.35rem;
  align-items: center;
}
  
  /* Help text */
  
  form legend {
	font-size: 0.875rem;
  }
  
  /* Inputs */
  
  form input[type=text],
  form input[type=email],
  form input[type=password],
  form input[type=tel],
  form input[type=number],
  form input[type=file],
  form select,
  form textarea {
	display: inline-block;
	font-size: 0.875rem;
	padding: 0.7rem;
	width: 100%;
  border: 1px solid  #ebeced ;
  background:  #F5F6F7 ;
  }
  
  form fieldset {
	max-width: 100% !important;
  }
  
  /* Inputs - checkbox/radio */
  
  form .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
  }
  
  form .inputs-list > li {
	display: block;
	margin: 0.7rem 0;
  }
  
  form .inputs-list input,
  form .inputs-list span {
	vertical-align: middle;
  }
  
  form input[type=checkbox],
  form input[type=radio] {
	cursor: pointer;
	margin-right: 0.35rem;
  }
  
  /* Inputs - date picker */
  
  .hs-dateinput {
	position: relative;
  }
  
  .hs-dateinput:before {
	content:'\01F4C5';
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .fn-date-picker .pika-table thead th {
	color: #FFF;
  }
  
  .fn-date-picker td.is-selected .pika-button {
	border-radius: 0;
	box-shadow: none;
  }
  
  .fn-date-picker td .pika-button:hover,
  .fn-date-picker td .pika-button:focus {
	border-radius: 0 !important;
  }
  
  .fn-date-picker td .pika-button:hover,
  .fn-date-picker td .pika-button:focus {
	color: #FFF;
  }
  
  /* Inputs - file picker */
  
  form input[type=file] {
	background-color: transparent;
	border: medium none currentColor;
	border: initial;
	padding: 0;
	padding: initial;
  }
  
  /* Headings and text */
  
  form .hs-richtext,
  form .hs-richtext p {
	font-size: 0.875rem;
	margin: 0 0 1.4rem;
  }
  
  form .hs-richtext img {
	max-width: 100% !important;
  }
  
  /* GDPR */
  
  .legal-consent-container .hs-form-booleancheckbox-display > span,
  .legal-consent-container .hs-form-booleancheckbox-display > span p {
	margin-left: 0.5em !important;
  }
  
  /* Validation */
  
  .hs-form-required {
	color: #EF6B51;
  }
  
  .hs-input.invalid.error {
	border-color: #EF6B51;
  }
  
  .hs-error-msg {
	color: #EF6B51;
	margin-top: 0.35rem;
  }
  
  /* Submit button */
  
  form input[type=submit],
  form .hs-button {
	cursor: pointer;
	/* display: inline-block; */
	/* text-align: center; */
	/* transition: all 0.15s linear; */
	/* white-space: normal; */

  padding: 1em 2.25em;
	
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	line-height: 1;

	border-width: 4px;
	
	font-family: "Bebas";
	font-size: 1.25rem;
	border-style: solid;
	font-weight: bold;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	height: auto;

	transition: all 0.15s ease-out;

	color: #fff;
	border-color:  #26272A ;
	background:  #26272A ;
  }
  
  form input[type=submit]:hover,
  form input[type=submit]:focus,
  form .hs-button:hover,
  form .hs-button:focus {
    background: transparent;
    border-color:  #26272A ;
    color:  #26272A ;
    transition: all 0.15s ease-in;
  }
  
  /* Captcha */
  
  .grecaptcha-badge {
	  margin: 0 auto;
  }
  
  @media screen and (min-width: 480px ) {
    fieldset.form-columns-1 .hs-input:not([type="radio"]):not([type="checkbox"]) {
        width: 100% !important;
    }
  }



/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_quote.css ***!
  \****************************************************************************************************************************************/
/*==============================
=            Mixins            =
==============================*/

 
/*==========  Breakpoints  ==========*/

 
/* Defaults to min-width */

 
/* @define-function breakpoint($point, $minOrMax: min-width) {
    @media screen and ( $minOrMax: $point ) {
        @content;
    }
} */

 
/*==========  Rem Font Size w/ px backup  ==========*/

 
/* RS - Making REMs EMs because Envoy never fucking used REMs right to begin with */

 
/* ======== Issues ========== */

 
/* 
1) sf-text--emphasize is both a wrapper and the element level selector. Changing rem to em will cause blowout on nested <h1>, <h2>...
*/

 
/* @define-function fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
} */

 
/*-----  End of Mixins  ------*/

 
.sf-quote{
    position: relative;
	margin-top: 96px;
}

 
.sf-quote--more-bottom {
    margin-bottom: 96px;
}

 
.sf-quote__text {
    margin-bottom: 32px;
    max-width: 550px;
}

 
@media screen and (min-width: 1330px ) {
    .sf-quote__text {
        max-width: 835px;
    }
}

 
.sf-text--emphasize, 
.sf-text--emphasize h2, 
.sf-text--emphasize h3{
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 40px;
    letter-spacing: -1px;
    font-weight: 700}

 
 
    @media screen and ( min-width: 1330px ) {
         

 
.sf-text--emphasize, 
    .sf-text--emphasize h2, 
    .sf-text--emphasize h3{
        font-size: 55px;
        font-size: 3.4375rem;
        letter-spacing: -1.5px;
        line-height: 55px;
        font-weight: 700}

 
 
    }
 

 
.sf-text--emphasize  mark, 
.sf-text--emphasize em {
      font-style: normal;
      background: none;
      background-repeat: no-repeat;
      background-image: linear-gradient(transparent 60%, #93ceee 40%);
      background-size: 0% 98%;
      transition: background-size 1000ms cubic-bezier(.66,0,.56,1) 250ms;
       
}

 
.sf-text--emphasize mark:after,
.sf-text--emphasize em:after {
    content: '';
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent 60%, #93ceee 40%);
    background-size: 100% 98%;
    display: inline-block;
    width: 5px;
}

 
.sf-text--emphasize.animate mark,
.sf-text--emphasize.animate em {
    background-size: 100% 98%;
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_vertical_text.css ***!
  \************************************************************************************************************************************************/
 
















 
































:root {
    --blue : #3D9FDF;
    --aqua : #88C8D2;
    --green : #9ACDC1;
    --white : #FFFFFF;
    --offWhite : #F5F6F7;
    --grey : #E9EEF1;
    --black : #26272A;
    --dark-blue : #212b40;
    --bright-blue : #029bff;
    --light-blue : #5aa3e9;
    --orange : #F79433;
    --yellow : #FFE06A;
    --red : #d15c5c;
    --dark_grey : #444444;

    --font-primary: Roboto, sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
    --font-accent: Bebas, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}











 

.sf-vertical-text {
    display: none;
    position: absolute;
  
    top: 50%;
    transform: translateX(-50%);
  }

.sf-vertical-text--left {
      left: 40px;
      writing-mode: tb-rl;
      transform: rotate(-180deg) translateX(-50%);
    }

.sf-vertical-text--right {
      right: 40px;
      writing-mode: vertical-rl;
    }

.sf-vertical-text__content {
      display: inline-block;
      font-size: 15px;
      font-weight: bold;
      font-family:  Bebas ;
      line-height: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 1;
    }

.sf-vertical-text__content:before,
      .sf-vertical-text__content:after {
        content: '';
        display: inline-block;
        background: var(--black);
        margin: 5px 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }

@media screen and (min-width: 1330px) {
    .sf-vertical-text {
        display: block;
    }
  }
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/elements/_tables.css ***!
  \*****************************************************************************************************************************************/
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  word-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* ========================
=
===== Responsive Table
=
======================== */

.responsive-table__wrapper {
  margin-bottom: 3em;
  overflow-x: auto;
  position: relative;
}

.responsive-table__wrapper .hidden {
  display: none;
}

.responsive-table__wrapper .visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

.responsive-table caption {
  font-size: 55px;
    letter-spacing: -1.5px;
    line-height: 55px;
    margin-bottom: 2.5rem;
    font-weight: bold;
    text-align: left;
}

.responsive-table {
  width: 100%;
}

.responsive-table__header-content {
  font-weight: 700;
}

.responsive-table thead tr {
    display: none;
		border-top: 1px solid #b9b9b9;
		border-left: 1px solid #b9b9b9;
		border-right: 1px solid #b9b9b9;
		border-bottom: none;
   

}

@media screen and (min-width: 600px) {
  .responsive-table thead tr {
      display: table-row;
			border-bottom: 1px solid #b9b9b9;
  }
}

.responsive-table tbody tr {
    border-bottom: 1px solid #b9b9b9;
		padding: 3rem;
		display: block;
		border-left: 1px solid #b9b9b9;
		border-right: 1px solid #b9b9b9;

    transition: transform 0.45s ease-in;
}

.responsive-table tbody tr:first-child {
      border-top: 1px solid #b9b9b9;
    }

.responsive-table tbody tr:hover, .responsive-table tbody tr:focus {
      background: var(--blue);
    }

.responsive-table tbody tr:hover td, .responsive-table tbody tr:focus td {
        border-right: 1px solid transparent;
        color: var(--white);
      }

.responsive-table tbody tr:hover td a, .responsive-table tbody tr:focus td a {
          color: var(--white);
          transition: none;
        }

.responsive-table tbody tr a {
      color: var(--black)
    }

@media screen and (min-width: 600px) {
  .responsive-table tbody tr {
    display: table-row;
    padding: 0;
  }
    
    .responsive-table tbody tr:first-child {
      border-top: none;
    }

    

    .responsive-table tbody tr td {
      border-right: 1px solid #b9b9b9;
    }

      .responsive-table tbody tr td:last-of-type {
				border-right: none;
			}
}

.responsive-table th {
  font-size: 18px;
  text-transform: uppercase;
  padding: 2.4rem calc(3rem * 1.5);
  background: transparent;
  cursor: pointer;
  text-align: left;
  line-height: 2;
}

.responsive-table th:after {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    transform: translate(0.9rem,0.8rem);
    position: absolute;
    transition: transform 0.45s ease-in;
  }

.responsive-table th:not([data-sort-direction="asc"]):after {
			
			border-left: 0.7rem solid transparent;
			border-right: 0.7rem solid transparent;
			border-top: 0.7rem solid #b8b8b8;
			
		}

.responsive-table th[data-sort-direction="asc"]:after {
    border-left: 0.7rem solid transparent;
			border-right: 0.7rem solid transparent;
			border-bottom: 0.7rem solid #b8b8b8;
  }

/* .responsive-table th[data-sort-direction="desc"]:after {
    content: '  \25B2';
} */

/* .responsive-table th[data-sort-direction="asc"]:after {
    content: '  \25BC';
} */

@media screen and (min-width: 600px)  {
  .responsive-table th {
    padding: 2.4rem 2.5rem;
  }
}

@media screen and (min-width: 600px)  {
  .responsive-table th {
    padding: 2.4rem calc(3rem * 1.5);
    border-right: 1px solid #b9b9b9;
  }

    .responsive-table th:last-of-type {
			border-right: none;
		}
}

.responsive-table tbody td {
    display: block;
		width: 100%;
		text-align: left;
		padding: calc(3rem / 4) 0 calc(3rem / 4) 40%;
		position: relative;
		overflow: hidden;
}

@media screen and (min-width: 600px) {
  .responsive-table tbody td {
      display: table-cell;
			width: auto;
			padding: 3rem 2.5rem;
  }
}

.responsive-table--small-screen tbody th,
.responsive-table--small-screen tbody td {
  clear: left;
  float: left;
  width: 100%;
}

.responsive-table--stack.responsive-table--small-screen tr{
  float: left;
  width: 100%;
}

.responsive-table--stack.responsive-table--small-screen tr td {
  padding: 0;
}

.responsive-table__window-link {
  float: right;
  padding: .5em;
}

.responsive-table__window-link-icon {
  fill: #222;
}
/*!********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/surfrider-base/css/templates/blog-list.css ***!
  \********************************************************************************************************************************************/

.hs-blog-listing .sf-news-list__background {
  background: none;
}

.sf-news-list:not(.sf-news-list--no-top) {
  padding-top: 120px;
}

.sf-news-list--category .sf-container {
  background: none;
}

/* Tags list */

.sf-news-list__tags ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  
    width: 100%;
          margin-left: 0;
          margin-right: 0;
          padding-left: 0;
          padding-right: 0;
  
    justify-content: flex-start;
  }

.sf-news-list__tags ul li {
      cursor: pointer;
      margin: .5em 1em;

    }

.sf-news-list__tags a {

      font-size: 1.3em;
		  letter-spacing: -0.5px;
		  line-height: 32px;
		  font-weight: bold;

      color: var(--black);

      -webkit-text-decoration: none;

      text-decoration: none;
      
}

.sf-news-list__tags a::hover {
        color: var(--bright-blue);
      }

@media screen and (min-width: 992px) {

    .sf-news-list__tags ul {
      justify-content: center;
    }

      .sf-news-list__tags ul li {
        margin-right: 1em;  
        margin-left: 1em;    
      }
  
}

@media screen and (min-width: 1330px) {

  .sf-news-list__tags ul {
    justify-content: center;
  }

    .sf-news-list__tags ul li {
      margin-right: 30px;  
      margin-left: 30px;  
    }
}

/* End Tags */

.sf-news-list__heading {
  font-size: 55px;
  letter-spacing: -1.5px;
  line-height: 55px;

  text-align: center; 

  padding: 0 0 80px 0;
}

.sf-news-list__lower:not(.sf-news-list__lower--list) {
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100%); 
  grid-gap: 2em;
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .sf-news-list__lower:not(.sf-news-list__lower--list) {
    grid-template-columns: repeat(auto-fill, calc(50% - 2em)); 
  }
}

@media screen and (min-width: 1330px) {
  .sf-news-list__lower:not(.sf-news-list__lower--list) {
    grid-template-columns: repeat(auto-fill, calc(33% - 2em)); 
  }
}

/* .sf-news-list__entry {
  width: 100%;
} */

.sf-news-list__entry img {
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.sf-news-list__pager {
  display: flex;
  justify-content: center;
  padding-bottom: 80px;
}

.sf-news-list--activists .sf-container {
  background: none;
}

.sf-news-list--activists .sf-news-list__background {
  background-color: none;
}

/* .sf-news-list--activists .sf-news-list__entry {
  width: 100%;
} */

  

.news-pagination {
  display: flex;
  align-items: center;
  line-height: 24px;
  letter-spacing: -0.4px;
  font-weight: bold;
  font-size: 24px;
  font-size: 1.5rem;
  color: #d5d6d7;
}

.news-pagination__prev, 
.news-pagination__next {
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  color: transparent;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  display: inline-block;
}

.news-pagination__prev:hover, .news-pagination__next:hover, {
  color: transparent;
}

.news-pagination__next {
  background-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-next.svg);
}

.news-pagination__prev {
  background-image: url(https://ee5-files.s3.us-west-2.amazonaws.com/assets/images/page-prev.svg);
}

.news-pagination__current {
  padding: 0 0.5em 0 1em;
  color: var(--black);
}

.news-pagination__total {
  padding: 0 1em 0 0.5em;
  color: var(--black);
}

/* Hero tweaks */

.sf-hero a.author {
  color: var(--white);
}

.sf-hero__cta {
  margin-top: 40px;
}

/* List style */

@media screen and (min-width: 768px) {

  .sf-news-list__lower--list {
    flex-direction: column;

  }

  .sf-news-list__lower--list .sf-news-list__entry {

    flex-basis: 100%;

  }


}

@media screen and (min-width: 1330px) {

  .sf-news-list__lower--list .sf-news-list__entry {
    flex-basis: 100%;
  }
  

}