body { overflow: hidden; }
html, 
body { background: #fff; color: #213333; font-family: "Poppins", sans-serif; font-size: 18px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }

/* Links */
a { transition: background-color .2s, color .2s; padding: 4px 0; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
button { background: #666; border: 0; color: #fff; margin: 6px 0 6px; padding: 8px 14px 6px; transition: background .2s, color .2s; }
button:hover { background: #999; }

/* Headers */
h1 { font-size: 1.4em; margin: 0; }
h2 { font-size: 2.8em; font-weight: 600; margin: 26px 0; }
h3 { font-size: 2.8em; font-weight: 600; margin: 26px 0; }
h4 { color: #136C63; font-size: 2.2em; font-weight: 600; margin: 46px 0 22px; }
h5 { font-size: 1.4em; font-weight: 600; margin: 26px 0 12px; }
h6 { font-size: 1.2em; margin: 46px 0 12px; }

/* Paragraphs & Lists */
p { line-height: 1.6em; margin: 24px 0; }
ul, 
ol { margin: 20px 0; }
li { line-height: 1.6em; margin: 12px 0; }
img { max-width: 100%; }

p a { color: #136C63; font-weight: 700; text-decoration: underline; }
p a:hover { color: #043530; text-decoration: underline; }


/* Header */
#header-top { background-color: #213333; color: #fff; display: flex; justify-content: space-between; padding: 12px 2%; }

header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { display: inline-block; margin: 0; margin-left: 24px; vertical-align: middle; }
header nav li a { color: #fff; display: block; padding: 0; }
header nav li a img { transition: filter .2s; }
header nav li a:hover,
header nav li a:focus { color: #21BFA6; }
header nav li a:hover img,
header nav li a:focus img{ filter: invert(20%) drop-shadow(0 0 5px #74e5d4); }

#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: .9em; }
#translation-widget option { color: #213333; }
#google_translate_element { display: none; }

#announcement { background: #FA8F2E; color: #081A21; display: block; font-weight: 600; height: auto; min-height: 22px; padding: 9px 30px; text-align: center; }
#announcement a { border-radius: 7px; background: #213333; color: #fff; display: inline-block; padding: 4px 22px; margin-left: 15px; transition: background .2s; }
#announcement a:hover,
#announcement a:focus { background: #070c0c; }

.subpage .announcement { background: #EBF4FA; color: #002756; }

#header-btm { align-items: center; background: #fff; box-shadow: 0 4px 6px -4px #111; display: flex; justify-content: space-between; padding: 14px 2%; position: relative; transition: padding .3s; z-index: 1000; }
#header-btm h1 { left: -9999px; position: absolute; }
#header-btm img { height: 80px; transition: .3s; }
#header-btm nav li { margin-left: 40px; position: relative; transition: margin .3s; }
#header-btm nav li a { color: #213333; font-size: 1.1em; font-weight: 600; margin: 18px 0; position: relative; transition: font-size .3s; }
#header-btm nav li a.active { color: #136C63; font-weight: 700; }
#header-btm nav > ul > li a:before { background: #21bfa6; content: ""; height: 0; left: 0; margin-left: -12px; opacity: 0; position: absolute; width: 68px; }
#header-btm nav > ul > li a:after { background: #fff; content: ""; height: 4px; left: 0; margin-left: -12px; opacity: 0; position: absolute; top: 100%; transition: background .4s, opacity .4s, width 0s ease-in-out .4s, margin 0s ease-in-out .4s; width: 0; }
#header-btm nav > ul > li a:hover:before { background: #fff; height: 100%; opacity: 1; transition: width .2s, opacity .2s, height .4s, background .2s ease-in-out .4s; width: 4px; }
#header-btm nav > ul > li a:hover:after { background: #21bfa6; margin: 0; opacity: 1; transition: background .6s, opacity .8s, width .6s ease-in-out .2s, margin .6s ease-in-out .5s; width: 100%; }

#header-btm nav li ul { background: #fff; box-shadow: 0 3px 8px -2px #222; border-radius: 12px; left: -9999px; margin-top: 4px; opacity: .2; padding: 10px 16px; position: absolute; width: 330px; }
#header-btm nav li ul li { margin: 6px 0; }
#header-btm nav li:hover ul,
#header-btm nav li ul.focus-in { left: 0; margin-top: -14px; opacity: 1; transition: left 0s, margin .6s, opacity .6s; }
#header-btm nav li ul li a { color: #136C63; line-height: 1.2em; margin: 0; text-decoration: underline; }
#header-btm nav li ul li a:hover { color: #063e39; }
#header-btm nav li ul li a:before,
#header-btm nav li ul li a:after { display: none; }

.scrolled #header-btm { padding: 6px 2% 6px 1%; position: fixed; top: 0; width: 100%; }
.scrolled #header-btm img { height: 54px; }
.scrolled #header-btm nav li { margin-left: 30px; }
.scrolled #header-btm nav li a { font-size: .9em; }
.scrolled #header-btm nav li ul li { margin: 6px 0; }

#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 6px 12px; position: absolute; top: -9999px; }
#skiptocontent:focus { left: 8px; top: 8px; }

#mobile-menu { background: transparent; border: 0; display: none; margin: 0; padding: 0 4px; }
#mobile-menu .line { background: #213333; display: block; height: 3px; left: 0; margin: 0 0 6px; position: relative; top: 0; transition: .3s; width: 26px; }
#mobile-menu .line.btm { margin: 0; }

.ada-element { left: -9999px; position: absolute; }

/* General Formatting */
#content > section { padding: 68px 8% 84px; }

.row { display: flex; gap: 5%; justify-content: space-between; margin: 0; }
.row:before,
.row:after { display: none; }
#content .row > div { padding: 0; }

/* Footer */
#footer-top { background: #213333; background-image: url("../images/graphics/footer-p.svg"); background-repeat: no-repeat; background-position: center right; color: #fff; padding: 34px 6% 52px 4.5%; }
#footer-top img[src*="logo"] { max-width: 300px; width: 100%; }
#footer-top h2 { font-size: 2.2em; margin: 8px 0; }
#footer-top h2 + p { margin: 8px 0; }
#footer-top label { color: #fff !important; left: -9999px; position: absolute; }
#county-desc { color: #aaa !important; }
#footer-top a { color: #fff; display: block; font-weight: 400; line-height: 1.2em; text-decoration: underline; }
#footer-top a:hover { color: #FCDE73; }
#footer-top .row > div:last-of-type { text-align: right; }
#footer-top .row > div:last-of-type a img { margin-top: 22px; transition: filter .3s; }
#footer-top .row > div:last-of-type a:hover img { filter: invert(20%) drop-shadow(0 0 5px #FCDE73); }

#footer-btm { align-items: center; background: #081A21; color: #fff; display: flex; justify-content: center; padding: 18px; font-size: .85em; font-weight: 300;}
#footer-btm p { margin: 0; }
#footer-btm nav ul { margin: 0; }
#footer-btm nav li { border-right: 1px solid #fff; display: inline-block; margin: 0; }
#footer-btm nav li:last-of-type { border: 0; }
#footer-btm nav li a { color: #fff; padding: 2px 14px 2px 12px; }
#footer-btm nav li a:hover { color: #21bfa6; }

/* Repeated Elements */

.pom-btn { background: #FCDE73; border-radius: 10px; color: #213333; display: inline-block; font-weight: 600; line-height: 1.2em; margin: 28px 0; padding: 10px 40px; text-decoration: none !important; transition: background .25s, color .25s, border-radius .6s; }
.pom-btn:hover { background: #213333; border-radius: 40px; color: #fff; transition: background .25s, color .25s, border-radius 1.4s; }

.green-bg .pom-btn { background: #FCDE73; border-radius: 10px; color: #213333; display: inline-block; font-weight: 600; line-height: 1.2em; margin: 28px 0; padding: 10px 40px; text-decoration: none !important; transition: background .25s, color .25s, border-radius .6s; }
.green-bg .pom-btn:hover { background: #213333; border-radius: 40px; color: #fff; transition: background .25s, color .25s, border-radius 1.4s; }

.grid-bg { position: relative; }
.grid-bg:before { background-image: url("../images/graphics/green-bg.png"); background-size: 46px; bottom: 0; content: ""; height: 80%; position: absolute; right: 0; width: 40%; }
.grid-bg > * { position: relative; }

.green-bg { background-color: #136C63; color: #fff; }
.green-bg:before { background-image: url("../images/graphics/teal-bg.png"); }
.green-bg h4 { color: #fff; }
.green-bg a { color: #fff; }
.green-bg a:hover { color: #b4ded7; }

.blue-rounded { position: relative; }
.blue-rounded:before { background-color: #E7F0EF; border-radius: 180px 0 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.blue-rounded:after { background-image: url("../images/graphics/blue-bg.png"); background-size: 46px; bottom: 0; content: ""; height: 80%; position: absolute; right: 0; width: 40%; }
.blue-rounded > * { position: relative; z-index: 1; }
.blue-rounded h3 { color: #213333; }
.blue-rounded .per-state a { color: #fff; }

#subpage-header { background: #136C63; color: #fff; padding-top: 124px !important; padding-bottom: 44px !important; position: relative; z-index: 1; }
#subpage-header:before { background-repeat: no-repeat; background-size: auto 140%; bottom: 0; content: ""; height: 100%; left: 0; opacity: .7; position: absolute; width: 100%; }
#subpage-header h2 { font-size: 4.2em; position: relative; }

#subpage-header.anim:before { background-image: url("../images/graphics/hero-p.svg"); background-size: auto 100%; left: -140px; opacity: 0; bottom: -150px; }
#subpage-header.animated:before { background-size: auto 140%; bottom: 0; left: 0; opacity: .7; transition: 1.4s; }

#jump-links { background: #EFEBE6; padding-top: 2px !important; padding-bottom: 2px !important; }
#jump-links ul { list-style: none; margin: 12px 0; padding: 0; }
#jump-links li { display: inline-block; margin-right: 60px; }
#jump-links li a { color: #081A21; font-weight: 600; }
#jump-links li a:hover { color: #136C63; }

#subpage-subtext h3 { color: #213333; font-size: 1.3em; letter-spacing: .15em; text-transform: uppercase; }
#subpage-subtext .line-animate { margin-top: 64px; margin-bottom: 70px; position: relative; }
#subpage-subtext .line-animate:before { border: 7px solid #21BFA6; border-width: 7px 7px 0 0; bottom: 100%; content: ""; height: 46px; margin-bottom: 22px; margin-right: -7px; position: absolute; right: 100%; width: 50%; }
#subpage-subtext .line-animate:after { border: 7px solid #21BFA6; border-width: 0 0 7px 7px; content: ""; height: 46px; left: 0; margin-top: 22px; position: absolute; top: 100%; width: 300%; }

#subpage-subtext .line-animate.anim:before { height: 7px; margin-bottom: 61px; margin-right: 30%; }
#subpage-subtext .line-animate.animated:before { height: 46px; margin-bottom: 22px; margin-right: -7px; transition: .25s ease-in-out .4s, margin-right .5s; }
#subpage-subtext .line-animate.anim:after { height: 7px; opacity: 0; width: 7px; }
#subpage-subtext .line-animate.animated:after { height: 46px; opacity: 1; width: 300%; transition: .8s ease-in-out 1s, opacity .1s ease-in-out .7s, height .4s ease-in-out .7s; }

.document-list { list-style: none; padding: 0; }
.document-list li { margin: 18px 0; }
.document-list li a { color: #081A21; padding-left: 40px; position: relative; }
.document-list li a:before { background-image: url("../images/icons/doc.svg"); background-repeat: no-repeat; background-size: cover; content: ""; height: 26px; left: 0; position: absolute; width: 26px; }
.document-list li a:hover:before { transform: rotateX(360deg); transition: transform .9s; }

/* Homepage */

#homepage-header { background: #EFEBE6; background-image: url("../images/graphics/tan-bg.png"); background-size: 30px; background-position: -28px; padding: 78px 0 144px 8% !important; position: relative; }
#homepage-header:before { background: #efebe6; content: ""; height: 28px; left: 0; position: absolute; top: 0;  width: 100%; }
#homepage-header .row > div:first-of-type:before { background: #EFEBE6; content: ""; height: 100%; left: -100%; position: absolute; width: 200%; }
#homepage-header .row > div:first-of-type > * { position: relative; }
#homepage-header p { font-size: 1.1em; font-weight: 600; }
#homepage-header h2 span { display: block; font-size: .45em; font-weight: 500; letter-spacing: .12em; margin-bottom: 10px;}
#home-headerimg img { height: 100%; position: absolute; object-fit: cover; object-position: center; width: 100%; }

#homepage-header .line-animate { margin-top: 90px; position: relative; }
#homepage-header .line-animate:before { border: 7px solid #21BFA6; border-width: 7px 7px 0 0; bottom: 100%; content: ""; height: 46px; margin-bottom: 22px; margin-right: -7px; position: absolute; right: 100%; width: 50%; }
#homepage-header .line-animate:after { border: 7px solid #21BFA6; border-width: 0 0 7px 7px; content: ""; height: 46px; left: 0; margin-top: 22px; position: absolute; top: 100%; width: 300%; }

#homepage-header .line-animate.anim:before { height: 7px; margin-bottom: 61px; margin-right: 30%; }
#homepage-header .line-animate.animated:before { height: 46px; margin-bottom: 22px; margin-right: -7px; transition: .25s ease-in-out .4s, margin-right .5s; }
#homepage-header .line-animate.anim:after { height: 7px; opacity: 0; width: 7px; }
#homepage-header .line-animate.animated:after { height: 46px; opacity: 1; width: 300%; transition: .8s ease-in-out 1s, opacity .1s ease-in-out .7s, height .4s ease-in-out .7s; }

/* Tabs */
.hdr-tabs { margin: 34px 0; }
.hdr-tabs .hdr-tabtitle { font-size: 1.6em; margin-bottom: 16px; }
.hdr-tabs .hdr-tablist { display: none; }
.hdr-tabs.has-js .hdr-tablist { display: block; }
.hdr-tabs .hdr-tablist { list-style-type: none; margin: 0px 4px; }
.hdr-tabs .hdr-tab { background: #ddd; border: 1px solid #aaa; border-radius: 4px 4px 0 0; color: #333; float: left; font-weight: 700; margin: 3px 2px -1px; padding: 9px 14px 3px; z-index: 1; }
.hdr-tabs .hdr-tab:hover { background-color: #bbb; }
.hdr-tabs .hdr-tab[aria-selected="true"] { background-color: #f2f2f2; border-top: 4px solid #333; border-bottom: 1px solid #ddd; padding-top: 6px; }
.hdr-tabs .hdr-tabpanel { background:#f2f2f2; border: 1px solid #aaa; border-radius: 4px; clear: both; margin-bottom: 12px; padding: 21px 2%; }
.hdr-tabs.has-js .hdr-tabpanel { display: none; margin-bottom: 0; }
.hdr-tabs.has-js .hdr-tabpanel[aria-hidden="false"] { display: block; }

#power-locations { padding: 0 !important; position: relative; }
#power-locations .hdr-tabs { height: 100%; margin: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
#power-locations .hdr-tablist { left: 2%; position: absolute; top: 50%; transform: translateY(-50%); }
#power-locations .hdr-tab { background: #E7F0EF; border: 4px solid #fff; border-radius: 50%; display: block; float: none; height: 24px; margin: 24px 0; padding: 0; transition: .3s; width: 24px; }
#power-locations .hdr-tab:hover { background: #136C63; border-color: #e7f0ef; height: 24px; width: 24px;  }
#power-locations .hdr-tabs .hdr-tab[aria-selected="true"] { background: #136C63; border-color: #e7f0ef; height: 24px; width: 24px; }
#power-locations .hdr-tablist button span { left: -9999px; position: absolute; }
#power-locations .hdr-tabs .hdr-tabpanel { background: none; background-image: linear-gradient( to right, transparent, #EFEBE6 45% ); border: 0; height: 100%; margin-left: 40%; padding-left: 25%; width: 60%; }
#power-locations .hdr-tabs .hdr-tabpanel h3 { font-size: 2.2em; }
#power-locations .hdr-tabs .hdr-tabpanel button { background: transparent; color: #136C63; display: block; font-weight: 600; margin-top: 42px; padding: 0; }
#power-locations .hdr-tabs .hdr-tabpanel button img { margin-left: 2px; }
#power-locations .hdr-tabs .hdr-tabpanel img[src*="texticon"] { height: 140px; }
#power-locations .hdr-tabs .hdr-tabpanel > div { display: inline-block; left: -9999px; opacity: 0; top: -50px; position: relative; transition: margin .6s; vertical-align: middle; width: 90%; }
#power-locations .hdr-tabs .hdr-tabpanel.hp-animate > div { left: 0; opacity: 1; top: 0; transition: 1.8s, left 0s; }
#power-locations .hdr-tabs .hdr-tabpanel:before { content: ""; display: inline-block; height: 92%; vertical-align: middle; }

#power-map { position: relative; width: 72%; }
#power-map > div { position: relative; width: 100%; }
#power-map > div > div { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#power-map > div > div div { left: 22%; line-height: 0; position: absolute; top: 11%; width: 5.5%; }
#power-map > div > div div.xl { border-width: 8px; width: 6.5%; }
#power-map > div > div div.md { border-width: 8px; width: 5%; }
#power-map > div > div div.sm { border-width: 6px; width: 4%; }
#power-map > div > div div img { border: 0px solid rgba(49,187,164,.3); border-radius: 50%; left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; width: 0; }
#power-map > div > div div:nth-of-type(2) { left: 34%; top: 20%; }
#power-map > div > div div:nth-of-type(3) { left: 52%; top: 16%; }
#power-map > div > div div:nth-of-type(4) { left: 16%; top: 37%; }
#power-map > div > div div:nth-of-type(5) { left: 28%; top: 34%; }
#power-map > div > div div:nth-of-type(6) { left: 47%; top: 34%; }
#power-map > div > div div:nth-of-type(7) { left: 36.5%; top: 42%; }
#power-map > div > div div:nth-of-type(8) { left: 45%; top: 46%; }
#power-map > div > div div:nth-of-type(9) { left: 59%; top: 50%; }
#power-map > div > div div:nth-of-type(10) { left: 14%; top: 60%; }
#power-map > div > div div:nth-of-type(11) { left: 24%; top: 63%; }
#power-map > div > div div:nth-of-type(12) { left: 47%; top: 67%; }
#power-map > div > div div:nth-of-type(13) { left: 56%; top: 78%; }

#power-map > div > div.hp-animate div img { border-width: 12px; transition: width 1s, border 1.4s ease-in .1s; width: 100%; }
#power-map > div > div.hp-animate div:nth-of-type(2) img { transition: width 1s ease-in-out .075s, border 1.4s ease-in-out .175s; }
#power-map > div > div.hp-animate div:nth-of-type(3) img { transition: width 1s ease-in-out .15s, border 1.4s ease-in-out .25s; }
#power-map > div > div.hp-animate div:nth-of-type(4) img { transition: width 1s ease-in-out .225s, border 1.4s ease-in-out .325s; }
#power-map > div > div.hp-animate div:nth-of-type(5) img { transition: width 1s ease-in-out .3s, border 1.4s ease-in-out .4s; }
#power-map > div > div.hp-animate div:nth-of-type(6) img { transition: width 1s ease-in-out .375s, border 1.4s ease-in-out .475s; }
#power-map > div > div.hp-animate div:nth-of-type(7) img { transition: width 1s ease-in-out .45s, border 1.4s ease-in-out .55s; }
#power-map > div > div.hp-animate div:nth-of-type(8) img { transition: width 1s ease-in-out .525s, border 1.4s ease-in-out .625s; }
#power-map > div > div.hp-animate div:nth-of-type(9) img { transition: width 1s ease-in-out .6s, border 1.4s ease-in-out .7s; }
#power-map > div > div.hp-animate div:nth-of-type(10) img { transition: width 1s ease-in-out .675s, border 1.4s ease-in-out .775s; }
#power-map > div > div.hp-animate div:nth-of-type(11) img { transition: width 1s ease-in-out .75s, border 1.4s ease-in-out .85s; }
#power-map > div > div.hp-animate div:nth-of-type(12) img { transition: width 1s ease-in-out .825s, border 1.4s ease-in-out .925s; }
#power-map > div > div.hp-animate div:nth-of-type(13) img { transition: width 1s ease-in-out .9s, border 1.4s ease-in-out 1s; }
#power-map > div > div.hp-animate div:nth-of-type(14) img { transition: width 1s ease-in-out .975s, border 1.4s ease-in-out 1.075s; }
#power-map > div > div.hp-animate div:nth-of-type(15) img { transition: width 1s ease-in-out 1.05s, border 1.4s ease-in-out 1.15s; }
#power-map > div > div.hp-animate div:nth-of-type(16) img { transition: width 1s ease-in-out 1.125s, border 1.4s ease-in-out 1.225s; }

#power-map > div > div:nth-of-type(2) div img { border-color: rgb(240 208 149 / 50%); }
#power-map > div > div:nth-of-type(2) div:nth-of-type(1) { left: 20%; top: 26%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(2) { left: 31%; top: 13%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(3) { left: 39%; top: 20%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(4) { left: 34%; top: 30%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(5) { left: 23%; top: 44%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(6) { left: 41%; top: 44%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(7) { left: 49%; top: 41%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(8) { left: 66%; top: 43%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(9) { left: 30%; top: 52%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(10) { left: 51%; top: 56%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(11) { left: 65%; top: 60%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(12) { left: 21%; top: 73%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(13) { left: 30%; top: 74%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(14) { left: 38%; top: 67%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(15) { left: 58%; top: 72%; }
#power-map > div > div:nth-of-type(2) div:nth-of-type(16) { left: 45%; top: 83%; }

#power-map > div > div img { position: absolute; }
#power-map > div > div:nth-of-type(3) .dot { left: 23.5%; opacity: 0; position: absolute; top: 19.5%; width: 2.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(2) { left: 24.5%; top: 48%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(3) { left: 33%; top: 35%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(4) { left: 42.5%; top: 27.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(5) { left: 45.75%; top: 20.75%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(6) { left: 48%; top: 26.75%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(7) { left: 38%; top: 90.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(8) { left: 39%; top: 77%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(9) { left: 40.75%; top: 73.54%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(10) { left: 42%; top: 81%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(11) { left: 44%; top: 86.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(12) { left: 51.75%; top: 87.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(13) { left: 64.25%; top: 92%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(14) { left: 67.5%; top: 84%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(15) { left: 62%; top: 77.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(16) { left: 65.75%; top: 65%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(17) { left: 62.5%; top: 60.5%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(18) { left: 66.25%; top: 54%; }
#power-map > div > div:nth-of-type(3) .dot:nth-of-type(19) { left: 69.75%; top: 60.75%; }

#power-map > div > div:nth-of-type(3).hp-animate .dot { opacity: 1; transition: opacity .8s ease-in-out .5s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(2) { transition: opacity .8s ease-in-out .55s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(3) { transition: opacity .8s ease-in-out .6s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(4) { transition: opacity .8s ease-in-out .65s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(5) { transition: opacity .8s ease-in-out .7s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(6) { transition: opacity .8s ease-in-out .75s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(7) { transition: opacity .8s ease-in-out .8s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(8) { transition: opacity .8s ease-in-out .85s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(9) { transition: opacity .8s ease-in-out .9s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(10) { transition: opacity .8s ease-in-out .95s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(11) { transition: opacity .8s ease-in-out 1s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(12) { transition: opacity .8s ease-in-out 1.05s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(13) { transition: opacity .8s ease-in-out 1.1s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(14) { transition: opacity .8s ease-in-out 1.15s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(15) { transition: opacity .8s ease-in-out 1.2s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(16) { transition: opacity .8s ease-in-out 1.25s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(17) { transition: opacity .8s ease-in-out 1.3s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(18) { transition: opacity .8s ease-in-out 1.35s; }
#power-map > div > div:nth-of-type(3).hp-animate .dot:nth-of-type(19) { transition: opacity .8s ease-in-out 1.4s; }

#power-map > div > div:nth-of-type(3) .circle { left: 35%; opacity: 0; position: absolute; top: 25%; transform: translateX(-50%) translateY(-50%); width: 12%; }
#power-map > div > div:nth-of-type(3) .circle:nth-of-type(21) { left: 54.75%; top: 61.75%; }
#power-map > div > div:nth-of-type(3) .circle:nth-of-type(22) { left: 28.5%; top: 69.5%; }
#power-map > div > div:nth-of-type(3) .circle:nth-of-type(23) { left: 59.5%; top: 92%; }
#power-map > div > div:nth-of-type(3).hp-animate .circle { opacity: 1; transition: 2s ease-in-out 1s; width: 6%; }
#power-map > div > div:nth-of-type(3).hp-animate .circle:nth-of-type(21) { transition: 2s ease-in-out 1.4s; }
#power-map > div > div:nth-of-type(3).hp-animate .circle:nth-of-type(22) { transition: 2s ease-in-out 1.8s; }
#power-map > div > div:nth-of-type(3).hp-animate .circle:nth-of-type(23) { transition: 2s ease-in-out 2.1s; }

#power-map > div > div:nth-of-type(3) .lines { left: 24.25%; opacity: 0; position: absolute; top: 21%; width: 47%; }
#power-map > div > div:nth-of-type(3).hp-animate .lines { opacity: .6; transition: opacity 1.3s; }

#power-map > div > div:nth-of-type(4):before { background-image: radial-gradient(transparent, transparent 80%); content: ""; height: 0; left: 36%; opacity: .6; position: absolute; top: 58.3%; width: 0; }
#power-map > div.animateAll > div:nth-of-type(4):before { background-image: radial-gradient(#ffcbaa, transparent 80%); height: 55%; left: 9%; opacity: 0; top: 30%; transition: 1.8s ease-in-out .6s, opacity 3s ease-in-out .6s, background-image 1.7s ease-in-out 2s; width: 50%; }
#power-map > div.animateAll > div:nth-of-type(1) img { border-width: 12px; opacity: .25; transition: width 1s, border 1.4s ease-in .1s; width: 100%; }
#power-map > div.animateAll > div:nth-of-type(2) img { border-width: 12px; opacity: .25; transition: width 1s, border 1.4s ease-in .1s; width: 100%; }
#power-map > div.animateAll > div:nth-of-type(3) .dot { opacity: .25; transition: opacity .8s; } 
#power-map > div > div:nth-of-type(3) .circle { opacity: 0; width: 4%; transition: .4s; }
#power-map > div.animateAll > div:nth-of-type(3) .lines { opacity: .25; transition: opacity 1.3s; }
#power-map > div > div:nth-of-type(4) .dot { left: 24.75%; opacity: 0; position: absolute; top: 48.5%; width: 2.5%; }
#power-map > div > div:nth-of-type(4) .dot:nth-of-type(2) { left: 24.75%; top: 56.5%; }
#power-map > div > div:nth-of-type(4) .dot:nth-of-type(3) { left: 35%; top: 61.5%; }
#power-map > div > div:nth-of-type(4) .dot:nth-of-type(4) { left: 43.5%; top: 57.75%; }
#power-map > div > div:nth-of-type(4) .dot:nth-of-type(5) { left: 43.75%; top: 52%; }
#power-map > div > div:nth-of-type(4) .pom { left: 25.5%; opacity: 0; position: absolute; top: 49.8%; width: 20%; }
#power-map > div.animateAll > div:nth-of-type(4) .pom { opacity: 1; transition: opacity 3.4s ease-in-out .6s; }
#power-map > div.animateAll > div:nth-of-type(4) .dot { opacity: 1; transition: opacity 2s ease-in-out 1.8s; }
#power-map > div.animateAll > div:nth-of-type(4) .dot:nth-of-type(2) { transition: opacity 1.2s ease-in-out 2.3s; }
#power-map > div.animateAll > div:nth-of-type(4) .dot:nth-of-type(3) { transition: opacity 1.2s ease-in-out 2.8s; }
#power-map > div.animateAll > div:nth-of-type(4) .dot:nth-of-type(4) { transition: opacity 1.2s ease-in-out 3.3s; }
#power-map > div.animateAll > div:nth-of-type(4) .dot:nth-of-type(5) { transition: opacity 1.2s ease-in-out 3.8s; }

#project-area.with-animate { padding-top: 0 !important; }
#project-area .line-animate { margin-top: 140px; position: relative; }
#project-area .line-animate:before { border: 7px solid #21BFA6; border-width: 0 7px 7px 0; bottom: 100%; content: ""; height: 46px; margin-bottom: 94px; position: absolute; right: 0; width: 100%; }
#project-area .line-animate:after { border: 7px solid #21BFA6; border-width: 0 0 0 7px; bottom: 100%; content: ""; height: 84px; left: 0; margin-bottom: 17px; position: absolute; width: 7px; }

#project-area .line-animate.anim:before { margin-bottom: 155px; width: 7px; }
#project-area .line-animate.animated:before { margin-bottom: 94px; width: 100%; transition: margin .4s, width .7s ease-in-out .3s; }
#project-area .line-animate.anim:after { height: 0; margin-bottom: 101px; }
#project-area .line-animate.animated:after { height: 84px; margin-bottom: 17px; transition: .4s ease-in-out .9s; }

#project-segments ul { list-style: none; padding: 0; }
#project-segments em {font-size: 0.85rem;}
#project-segments a { color: #136C63; font-weight: 700; text-decoration: underline; }
#project-segments a:hover { color: #043530; text-decoration: underline; }


.instruction { font-style: italic; margin: 38px 0; padding-left: 40px; position: relative; }
.instruction:before { background-image: url("../images/icons/tooltip.svg"); background-repeat: no-repeat; background-size: cover; content: ""; height: 28px; left: 0; position: absolute; width: 28px; }

#hover-map { max-width: 1400px;  }
#hover-map > div { position: relative; width: 100%; }

/* Base style for all hotspots */
#hover-map a { background: transparent; position: absolute; }
#hover-map a:before,
#hover-map a:after { border: 2px solid transparent; border-width: 3px 3px 0 0; content: ""; height: 0; left: 0; position: absolute; top: 0; width: 0; }
#hover-map a:after { border-width: 0 0 3px 3px; left: auto; right: 0; top: auto; bottom: 0; }

#hover-map.anim a { background: transparent; border: 3px solid rgb(33 51 51 / 40%); margin-left: -99999px; }
#hover-map.animated a { border: 0px solid transparent; margin-left: 0; transition: 0s, border 1s; }
#hover-map.animated a:nth-of-type(2) { transition: background 0s, margin 0s ease-in-out .3s, border 1s ease-in-out .3s; }
#hover-map.animated a:nth-of-type(3) { transition: background 0s, margin 0s ease-in-out .6s, border 1s ease-in-out .6s; }
#hover-map.animated a:nth-of-type(4) { transition: background 0s, margin 0s ease-in-out .9s, border 1s ease-in-out .9s; }
#hover-map.animated a:nth-of-type(5) { transition: background 0s, margin  0s ease-in-out 1.2s, border 1s ease-in-out 1.2s; }

#hover-map a:hover:before, 
#hover-map a:hover:after { border-color: rgb(33 51 51 / 40%); height: 100%; width: 100%; transition: width .3s, height .3s ease-in-out .2s; }
#hover-map a:hover:after { transition: width .3s, height .3s ease-in-out .2s; }
:hover #hover-map.animated a:hover { background: rgb(33 51 51 / 20%); transition: background .8s ease-in-out .05s; }
#hover-map a img { border: 8px solid transparent; border-radius: 50%; position: absolute; transition: border-color 3s; width: 64px; z-index: 1; }
#hover-map a:hover img { border-color: rgb(247 231 201 / 90%); }

#hover-map.anim a img { margin-top: 25px; opacity: 0; }
#hover-map.animated a img { margin-top: 0; opacity: 1; transition: border .4s, margin 1.2s; }
#hover-map.animated a:nth-of-type(2) img { transition: border .4s, margin 1.2s ease-in-out .1s; }
#hover-map.animated a:nth-of-type(3) img { transition: border .4s, margin 1.2s ease-in-out .4s; }
#hover-map.animated a:nth-of-type(4) img { transition: border .4s, margin 1.2s ease-in-out .7s; }
#hover-map.animated a:nth-of-type(5) img { transition: border .4s, margin 1.2s ease-in-out 1s; }

/* Individual hotspots */
#hover-map a:nth-of-type(1) { top: 13%; left: 14%; width: 3%; height: 45%; }
#hover-map a:nth-of-type(1) img { top: 18%; right: 0; }
#hover-map a:nth-of-type(2) { top: 43%; left: 16.5%; width: 20%; height: 42%; }
#hover-map a:nth-of-type(2) img { left: 26%; top: 56%; }
#hover-map a:nth-of-type(3) { top: 72%; left: 34.5%; width: 4.5%; height: 15%; }
#hover-map a:nth-of-type(3) img { top: 66%; left: 0; }
#hover-map a:nth-of-type(4) { top: 68%; left: 39%; width: 36%; height: 17%; }
#hover-map a:nth-of-type(4) img { top: 2%; left: 50%; }
#hover-map a:nth-of-type(5) { top: 37%; left: 68%; width: 8%; height: 35%; }
#hover-map a:nth-of-type(5) img { top: 14%; left: 28%; }

#hover-map img { max-width: 10000%; width: 100%; }

#key-advantages { background-color: #213333; color: #fff; position: relative; z-index: 1; }
#key-advantages ul { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#key-advantages li { background: #136C63; border-radius: 10px; padding: 22px 36px 8px; position: relative; width: 23%; }
#key-advantages li h4 { color: #fff; font-size: 1.2em; margin-top: 22px; text-transform: uppercase; }
#key-advantages li div { height: 80px; line-height: 80px; position: relative; text-align: center; width: 80px; }
#key-advantages li div:before { background: #213333; border-radius: 50%; content: ""; height: 100%; left: 0; position: absolute; width: 100%; }
#key-advantages li div img { height: 50px; position: relative; }

#key-advantages ul.anim li { opacity: 0; transform: rotateY(90deg); }
#key-advantages ul.anim li:nth-of-type(2) { left: -10%; }
#key-advantages ul.anim li:nth-of-type(3) { left: -10%; }
#key-advantages ul.anim li:nth-of-type(4) { left: -10%; transform: rotateY(270deg); }
#key-advantages ul.animated li { left: 0 !important; opacity: 1; transform: rotateY(0deg) !important; transition: transform 1s; }
#key-advantages ul.animated li:nth-of-type(2) { transition: 1s ease-in-out .05s, transform 1s ease-in-out .05s; }
#key-advantages ul.animated li:nth-of-type(3) { transition: 1s ease-in-out .4s, transform 1s ease-in-out .4s; }
#key-advantages ul.animated li:nth-of-type(4) { transition: 1s ease-in-out .5s, transform 1.6s ease-in-out .5s; }

#timeline-section .line-animate { position: relative; }
#timeline-section .line-animate:before { border: 7px solid #21BFA6; border-width: 0 7px 7px 0; bottom: 50%; content: ""; height: 180px; position: absolute; right: 0; transform: translateY(3px); width: 100%; }

#timeline-section .line-animate.anim:before { bottom: 200%; height: 7px; width: 7px; }
#timeline-section .line-animate.animated:before { bottom: 50%;  height: 180px; width: 100%; transition: bottom .45s, width .7s ease-in-out .35s; }

#timeline-section h3 { background: #fff; display: inline-block; padding-right: 24px; position: relative; }

#timeline { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#timeline > li { background: #EFEBE6; border-radius: 12px; position: relative; width: 18%; }
#timeline > li:after { border: 18px solid transparent; border-left-color: #efebe6; content: ""; left: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
#timeline > li:last-of-type:after { display: none;  }
#timeline > li h4 { background-color: #213333; background-image: url("../images/icons/timeline-1.svg"); background-repeat: no-repeat; background-position: center right 14px; background-size: auto 80%; border-radius: 12px 12px 0 0; color: #fff; font-size: 1.8em; margin: 0; padding: 56px 24px 20px;  }
#timeline > li ul { padding: 0 24px 14px 42px; }
#timeline > li:nth-of-type(2) h4 { background-color: #136C63; background-image: url("../images/icons/timeline-2.svg"); }
#timeline > li:nth-of-type(3) h4 { background-color: #21BFA6; background-image: url("../images/icons/timeline-3.svg"); color: #213333; }
#timeline > li:nth-of-type(4) h4 { background-color: #FA8F2E; background-image: url("../images/icons/timeline-4.svg"); color: #213333;  }
#timeline > li:nth-of-type(5) h4 { background-color: #FAB036; background-image: url("../images/icons/timeline-5.svg"); color: #213333;  }
#timeline small { bottom: 0; font-style: italic; line-height: 1.3em; padding: 0 18px 15px; position: absolute; width: 100%; }

#timeline.anim > li { left: -50px; opacity: 0; position: relative; }
#timeline.animated > li { left: 0; opacity: 1; transition: left .8s, opacity .4s; }
#timeline.animated > li:nth-of-type(2) { transition: left .8s ease-in-out .2s, opacity .4s ease-in-out .2s; }
#timeline.animated > li:nth-of-type(3) { transition: left .8s ease-in-out .4s, opacity .4s ease-in-out .4s; }
#timeline.animated > li:nth-of-type(4) { transition: left .8s ease-in-out .6s, opacity .4s ease-in-out .6s; }
#timeline.animated > li:nth-of-type(5) { transition: left .8s ease-in-out .8s, opacity .4s ease-in-out .8s; }

#get-involved ul { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#get-involved li { background: #FA8F2E; border: 3px solid #fff; border-radius: 12px; color: #081A21; overflow: hidden; padding: 0px 32px 70px; position: relative; text-align: center; width: 31%; }
#get-involved li h4 { color: #081A21; position: relative; }
#get-involved li span { display: block; position: relative; }
#get-involved li a { background: #213333; border-radius: 12px; color: #fff; display: inline-block; font-weight: 600; margin-top: 28px; overflow: hidden; padding: 4px 18px; position: relative; }
#get-involved li a:hover { background: #0c1515; }
#get-involved li:nth-of-type(2) { background: #FCDE73; }
#get-involved li:nth-of-type(3) { background: #21BFA6; }

#get-involved .anim > li:before { background: rgb(255 255 255 / 22%); content: ""; height: 100%; left: -100%; position: absolute; transform: skewX(-18deg); width: 60%; }
#get-involved li a:before { background: rgb(255 255 255 / 22%); content: ""; height: 100%; left: -100%; position: absolute; transform: skewX(-18deg); width: 60%; }
#get-involved .animated > li:before { background: rgb(255 255 255 / 14%); left: 120%; transition: 1s ease-in-out; }
#get-involved .animated > li a:before { background: rgb(255 255 255 / 14%); left: 120%; transition: 1s ease-in-out .3s; }
#get-involved .animated > li:nth-of-type(2):before { transition: 1s ease-in-out .25s; }
#get-involved .animated > li:nth-of-type(2) a:before { background: rgb(255 255 255 / 14%); left: 120%; transition: 1s ease-in-out .55s; }
#get-involved .animated > li:nth-of-type(3):before { transition: 1s ease-in-out .5s; }
#get-involved .animated > li:nth-of-type(3) a:before { background: rgb(255 255 255 / 14%); left: 120%; transition: 1s ease-in-out .8s; }

#working-together { overflow: hidden; }
#working-together .line-animate { margin-top: 100px; position: relative; }
#working-together .line-animate:before { border: 7px solid #21BFA6; border-width: 7px 7px 0 0; bottom: 100%; content: ""; height: 46px; margin-bottom: 12px; margin-right: -7px; position: absolute; right: 100%; width: 50%; }
#working-together .line-animate:after { border: 7px solid #21BFA6; border-width: 0 0 7px 0; content: ""; height: 0; left: 0; position: absolute; top: 50%; width: 300%; }
#working-together h3 { background: #fff; display: inline-block; padding-right: 24px; position: relative; z-index: 1; }

#working-together.anim .line-animate:before { height: 7px; margin-bottom: 61px; margin-right: 30%; }
#working-together.animated .line-animate:before { height: 46px; margin-bottom: 22px; margin-right: -7px; transition: .25s ease-in-out .4s, margin-right .5s; }
#working-together.anim .line-animate:after { width: 0; }
#working-together.animated .line-animate:after { width: 180%; transition: width 1s ease-in-out .5s; }

#project-partners { display: flex; justify-content: space-between; margin: 54px 0 32px; position: relative; }
#project-partners img { height: 90px; opacity: 0; }
#project-partners:before,
#project-partners:after { background: #21BFA6; content: ""; height: 6px; left: -100%; position: absolute; top: 18px; width: 90%; }
#project-partners:after { bottom: 18px; height: 10px; left: -250%; top: auto; width: 200%; }

.animated #project-partners:before { left: 150%; transition: left 1.6s ease-in-out 1.3s;  } 
.animated #project-partners:after { left: 250%; transition: left 1.35s ease-in-out 1.4s; } 
.animated #project-partners img { opacity: 1; transition: opacity .7s ease-in-out 1.6s; }
.animated #project-partners img:nth-of-type(2) { opacity: 1; transition: opacity .7s ease-in-out 1.7s; }
.animated #project-partners img:nth-of-type(3) { opacity: 1; transition: opacity .7s ease-in-out 1.8s; }
.animated #project-partners img:nth-of-type(4) { opacity: 1; transition: opacity .7s ease-in-out 1.9s; }

/* Technology */
#structure-types img {width: 65%; margin: 0 auto; display: block;}
#structure-types .small-structures {text-align: center;}
#structure-types .small-structures p {padding:10px 0 0 0; margin: 0; font-weight: 600;}
#structure-types .small-structures span.desc {text-transform: uppercase; color: #008171;}

#row-process { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#row-process li { background: #f6f4f2; border-top: 18px solid #FDBA12; padding: 22px 36px 8px; position: relative; text-align: center; width: 24%; }
#row-process li h4 { color: #fff; font-size: 1.2em; margin-top: 22px; text-transform: uppercase; }
#row-process li span { display: block; margin: 20px 0 26px; }
#row-process li div { height: 100px; line-height: 100px; margin: 0 auto; position: relative; text-align: center; width: 100px; }
#row-process li div:before { background: #FDBA12; border-radius: 50%; content: ""; height: 100%; left: 0; position: absolute; width: 100%; }
#row-process li div img { width: 56px; position: relative; }
#row-process li:nth-of-type(2) { border-top-color: #37BA95; }
#row-process li:nth-of-type(2) div:before { background: #37BA95; }
#row-process li:nth-of-type(3) { border-top-color: #F28321; }
#row-process li:nth-of-type(3) div:before { background: #F28321; }
#row-process li:nth-of-type(4) { border-top-color: #008171; }
#row-process li:nth-of-type(4) div:before { background: #008171; }

#row-process.anim li { opacity: 0; transform: rotateY(90deg); }
#row-process.anim li:nth-of-type(2) { left: -10%; }
#row-process.anim li:nth-of-type(3) { left: -10%; }
#row-process.anim li:nth-of-type(4) { left: -10%; transform: rotateY(270deg); }
#row-process.animated li { left: 0 !important; opacity: 1; transform: rotateY(0deg) !important; transition: transform 1s; }
#row-process.animated li:nth-of-type(2) { transition: 1s ease-in-out .05s, transform 1s ease-in-out .05s; }
#row-process.animated li:nth-of-type(3) { transition: 1s ease-in-out .4s, transform 1s ease-in-out .4s; }
#row-process.animated li:nth-of-type(4) { transition: 1s ease-in-out .5s, transform 1.3s ease-in-out .5s; }

/* Segments */

#overview ul { list-style: none; padding: 0; }
#overview li { padding: 0 0 0 40px; position: relative; }
#overview li:before { background: #D9D9D9; content: ""; height: 24px; left: 0; position: absolute; top: 3px; width: 24px; }

#upcoming-events { z-index: 1; }
#upcoming-events h5 { font-size: 1.1em; line-height: 1.4em;text-transform: uppercase; }
#upcoming-events .row a { font-weight: 400; }

#project-timeline .line-animate { position: relative; }
#project-timeline .line-animate:before { border: 7px solid #21BFA6; border-width: 0 7px 7px 0; bottom: 50%; content: ""; height: 180px; position: absolute; right: 0; transform: translateY(3px); width: 100%; }
#project-timeline .line-animate.anim:before { bottom: 200%; height: 7px; width: 7px; }
#project-timeline .line-animate.animated:before { bottom: 50%;  height: 180px; width: 100%; transition: bottom .45s, width .7s ease-in-out .35s; }
#project-timeline h3 { background: #fff; display: inline-block; padding-right: 24px; position: relative; max-width: 90%; }

#project-timeline > ul { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#project-timeline > ul.anim > li { left: -50px; opacity: 0; position: relative; }
#project-timeline > ul.animated > li { left: 0; opacity: 1; transition: left .8s, opacity .4s; }
#project-timeline > ul.animated > li:nth-of-type(2) { transition: left .8s ease-in-out .3s, opacity .4s ease-in-out .3s; }
#project-timeline > ul.animated > li:nth-of-type(3) { transition: left .8s ease-in-out .6s, opacity .4s ease-in-out .6s; }
#project-timeline > ul.animated > li:nth-of-type(4) { transition: left .8s ease-in-out .9s, opacity .4s ease-in-out .9s; }

#project-timeline > ul > li { background: #F2F2F2; box-shadow: 8px 0 14px -8px #333; padding: 16px 32px; position: relative; width: 23%; }
#project-timeline h4 { color: #081A21; font-size: 1.3em; margin-top: 22px; }
#project-timeline > ul > li div { height: 60px; line-height: 60px; position: relative; text-align: center; width: 60px; }
#project-timeline > ul > li div:before { background: #136C63; border-radius: 50%; content: ""; height: 100%; left: 0; position: absolute; width: 100%; }
#project-timeline > ul > li div img { height: 32px; position: relative; }
#project-timeline > ul > li:after { background: #F2F2F2; box-shadow: 5px -5px 8px -6px #333; content: ""; height: 48px; left: 100%; margin-left: -44px; position: absolute; top: 50%; transform: rotate(45deg) translateY(-50%); width: 48px; }
#project-timeline > ul > li:last-of-type:after { display: none; }
#project-timeline > ul > li ul { padding: 0 24px 14px 22px; }
#project-timeline > ul small { bottom: 0; font-style: italic; line-height: 1.3em; padding: 0 18px 15px; position: absolute; width: 100%;}

#regulatory-process .row > div:last-of-type { background: #136C63; border-radius: 54px 0 0 0; color: #fff; padding: 0 44px 18px; }
#regulatory-process .row > div:last-of-type h4 { color: #fff; }
#regulatory-process .row > div:last-of-type a { color: #fff; }
#regulatory-process .row > div:last-of-type a:hover { color: #FCDE73; }
#regulatory-process .row > div:last-of-type strong { color: #FCDE73; font-size: 1.1em; }

#regulatory-process .row > div:last-of-type { margin-bottom: 28px; padding-top: 18px; }

/* Comment Map */
#map-area { height: 100vh;  position: relative; width: 100%; }

#map { height: 100%; width: 100%; }

#corner-box { position: absolute; top: 0; z-index: 2; }
#instruction { background: #fff; border: 0; border-width: 0 1px 1px 0; font-size: .85em; height: 0; line-height: 1.3em; opacity: 0; padding: 0; position: relative; transition: .2s, opacity .1s; width: 360px; }
.echolocating #instruction { border: 1px solid #000; height: auto; opacity: 1; padding: 10px 14px; transition: height .3s, padding .3s, opacity .2s ease-out .2s; }

#search-address { display: none; margin-top: 8px; }
#address-search { height: auto; padding: 2px 8px 1px; width: 94%; }

#add-comment { background: #FFC424; border: 0; color: #414141; cursor: pointer; font-size: 1em; font-weight: 700; margin: 0; padding: 44px 14px 8px; position: relative; transition: padding .2s; }
#add-comment:before { background: #414141; content: ""; height: 24px; left: 50%; position: absolute; top: 11px; transform: translateX(-50%); transition: .3s; width: 4px; }
#add-comment:after { background: #414141; content: ""; height: 4px; left: 50%; position: absolute; top: 21px; transform: translateX(-50%); transition: .3s; width: 24px; }
#add-comment:hover { padding-top: 58px; }
#add-comment:hover:before { height: 28px; top: 16px; width: 6px; }
#add-comment:hover:after { height: 6px; top: 27px; width: 28px; }

.echolocating #add-comment:before { transform: rotate(35deg); }
.echolocating #add-comment:after { margin-left: -13px; margin-top: 4px; transform: rotate(65deg); width: 14px; }

.commenting #add-comment { background: #7a0f33; color: #fff; }
.commenting #add-comment:before { background: #fff; transform: translateX(-50%) rotate(45deg); }
.commenting #add-comment:after { background: #fff; transform: translateX(-50%) rotate(45deg); }

#form-area { background: #000; background: rgba(0,0,0,.4); height: 100%; position: absolute; right: -100%; top: 0; transition: right .8s; width: 100%; }
#form-area form { background: #fff; display: block; height: 100%; margin-left: 40%; overflow: auto; padding: 16px 32px 44px;}
.commenting #form-area { right: 0; }
#form-area h4 { font-size: 1.2em; font-weight: 700; margin-top: 16px; text-transform: uppercase; }

#map-form > div div.other-explanation { display: none; margin: 0; width: 100%; }
.other-explanation label { left: -9999px; position: absolute; }
#map-form .other-explanation textarea { height: 80px; }

#map-thanks { background: #fff; border-radius: 8px; box-shadow: 0 4px 8px -2px #333; left: 50%; line-height: 1.5em; padding: 20px 30px; position: absolute; text-align: center; top: -34%; transform: translateX(-50%); transition: top .6s; width: 400px; }
.thanks #map-thanks { top: 34%; }

/* Regulatory process */

.con-process { display: flex; list-style: none; padding: 0 0 12px; position: relative; width: 100%; }
.con-process li { font-weight: 600; line-height: 1.3em; padding: 0; position: relative; text-align: center; width: 16.66667%; }
.con-process.septet li { width: 14.2857%; }
.con-process li span { display: inline-block; vertical-align: middle; width: 90%; }
.con-process li:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.con-process li img { display: inline-block; margin: 0 auto; bottom: 0; width: 64px; }

.con-process-txt { margin-bottom: 0;  }
.con-process-txt:after { background: #50c2a2; bottom: 0; content: ""; height: 2px; left: 8.333333%; position: absolute; width: 83.333333%; }
.con-process-txt.septet:after { left: 7.14285%; width: 85.7143%; }
.con-process-txt li img { display: none; }
.con-process-txt li:after { background: #f28321; border-radius: 50%; content: ""; height: 8px; left: 50%; margin-top: 19px; position: absolute; top: 100%; transform: translateX(-50%); width: 8px; z-index: 1;}

.con-process-imgs { margin-top: 0; }
.con-process-imgs li { margin-top: 0; padding-top: 30px; }
.con-process-imgs li:after { background: #f28321; content: ""; height: 24px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 2px; }

#certificate-of-need h5 img {width: 3%; margin-right: 1%;}
#route-permit h5 img {width: 3%; margin-right: 1%;}
#sd-regulatory-process h5 img {width: 3%; margin-right: 1%;}

.participate { color: #136C63; }

/* Routing process */
#considerations h4 img {width: 3.5%; margin-right: 1%;}
/* Accordions */
.hdr-accordion-set { margin-bottom: 20px; }
.hdr-accordion { border-bottom: 1px solid #21BFA6; }
.hdr-accordion h4 { font-size: 1.7em; margin: 0; padding-bottom: 10px; }
.hdr-accordion button { background: transparent; color: #136C63; }
.hdr-accordion-header { cursor: pointer; margin: 18px 0 0; padding: 10px 14px 10px 40px; position: relative; text-align: left; width: 100%; }
.hdr-accordion-set.has-js .hdr-accordion-header:before,
.hdr-accordion-set.has-js .hdr-accordion-header:after { background: #081A21; content: ""; height: 5px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: transform .8s; width: 22px; }
.hdr-accordion-set.has-js .hdr-accordion-header:after { transform: translateY(-50%) rotate(270deg); }
.hdr-accordion-set.has-js .opened .hdr-accordion-header:after { transform: translateY(-50%) rotate(0deg); }
.hdr-accordion > div { padding: 0 0 18px; }

/* Lightbox */
.hdr-lightbox { margin-bottom: 32px; max-width: 800px; }
.hdr-lightbox img { width: 100%; }
.hdr-lightbox a { display: block; padding: 0; }
.hdr-lightbox > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: none; height: 0; left: -9999px; margin: 0; position: absolute; top: 0; transition: 0s; width: 100%; }
.hdr-lightbox button span { left: -9999px; position: absolute; }
.hdr-lightbox > div { top: 80px; }
.hdr-lightbox > div .hdr-close-lightbox { background: 0; border: 0; color: #fff; font-size: 3em; display: none; line-height: .6em; padding: 6px 8px; position: fixed; right: 14px; top: 6px; }
.hdr-lightbox em { display: block; margin-top: 8px; }

.showing-hdr-lightbox { overflow: hidden; }
.hdr-lightbox.enhanced { height: 100%; left: 0; margin: 0; max-width: 100%; position: fixed; top: 0; width: 100%; z-index: 5555; }
.hdr-lightbox.enhanced > button { display: block; height: 100%; left: 0; transition: height .6s, left 0s; }
.hdr-lightbox.enhanced > div { background-color: #fff; border: 1px solid #333; box-shadow: 4px 13px 28px 0 #111; left: 6%; margin: 0; max-height: 88%; overflow: auto; position: absolute; top: 6%; transition: .8s; width: 86%; }
.hdr-lightbox.enhanced > div .hdr-close-lightbox { display: block; }
.hdr-lightbox.enhanced > div .hdr-close-lightbox:focus { border: 1px solid #aaa; color: #aaa; }

/* Events */

#events-intro { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; }
#events-intro h3 { margin-top: 100px; }
#events-intro p:last-of-type { margin-bottom: 210px; }
#events-intro img { border: 36px solid #E7F0EF; border-width: 0 0 36px 36px; border-radius: 0 0 0 78px; height: 100%; object-fit: cover; object-position: center; position: absolute; width: 100%; }

.events .row h5 { color: #001B37; font-size: 1.2em; line-height: 1.4em; margin-top: 28px; text-transform: uppercase; }
.events .row p { margin-top: 12px; }
.events .row a { color: #001b37; font-weight: 400; text-decoration: underline; }
.events .row a:hover { color: #136C63; }

#meeting-count { align-items: center; background: #21BFA6; color: #213333; display: flex; justify-content: space-between; padding: 28px 5.5% !important; }
#meeting-count h3 { font-size: 2.4em; font-weight: 900; width: 294px; }
#meeting-count ul { display: flex; gap: 24px; list-style: none; padding: 0; }
#meeting-count li { align-items: center; display: flex; gap: 12px; }
#meeting-count li strong { font-size: 3.2em; }
#meeting-count li span { line-height: 1.3em; width: 164px; }

/* Library */

#regulatory-filings { padding-right: 0 !important; padding-bottom: 0 !important; }
#regulatory-filings .right-padded { padding: 0 5% 28px 0; }
#regulatory-filings .hdr-accordion { border: 0; }
#regulatory-filings .hdr-accordion button { color: #081a21; }
#regulatory-filings .per-state > div:last-of-type { background: #136C63; border-radius: 34px 0 0 0; color: #fff; padding: 0 44px 16px; }
#regulatory-filings .per-state > div:last-of-type h4 { color: #fff; }
#regulatory-filings .per-state > div:last-of-type strong { color: #FCDE73; font-size: 1.1em; }
#regulatory-filings .per-state-mn { position: relative; }
#regulatory-filings .per-state-mn:after { background: #21BFA6; bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 100%; }
#regulatory-filings .per-state-sd > div:last-of-type { border-radius: 0; }
#regulatory-filings .hdr-accordion > div { padding-bottom: 0; padding-right: 5%;  }
#regulatory-filings a.norm {color:#136C63;}


/* MAP */

#legend { position: absolute; right: 190px; text-align: right; top: 6px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;}
#legend > button { background: #fff; border: 0; color: #333; font-size: 0.9em; font-weight: 500; padding: 8px 16px; }
#legend ul { background: #fff; box-shadow: 0 3px 8px -3px #aaa; list-style-type: none; margin: 0; opacity: 0; padding: 12px 16px 4px; right: 29999px; text-align: left; transition: 0s; position: absolute;}
#legend ul.showing { opacity: 1; right: 0; transition: right 0s, opacity .3s; width: 200px; }
#legend li { padding-left: 24px; position: relative;  }
#legend li span { background: #136C63; height: 5px; left: 0; position: absolute; top: 7px; width: 16px; }




/* Contact Us */

#get-in-touch ul { list-style: none; padding: 0; }
#get-in-touch li { margin: 14px 0; }
#get-in-touch li a { color: #213333; display: flex; gap: 24px; font-weight: 600; }
#get-in-touch li a:hover { color: #327167; }

/* FAQs */

#faqs .hdr-tabs.has-js .hdr-tablist { display: flex; gap: 14px; justify-content: space-between; margin-bottom: 24px; }
#faqs .hdr-tabs .hdr-tab { background: #136C63; border-radius: 4px; border-bottom: 5px solid #fff; color: #fff; font-size: 1em; margin: 0; padding: 18px 14px; width: 16.66667%;}
#faqs .hdr-tabs .hdr-tab:hover { background: #213333; }
#faqs .hdr-tabs .hdr-tab[aria-selected="true"] { background: #213333; border-top: 0; border-bottom-color: #D57D2B; }
#faqs .hdr-tabs .hdr-tabpanel { background: transparent; border: 0; left: -9999px; opacity: 0; padding: 0; position: relative; }
#faqs .hdr-tabs .hdr-tabpanel.fadeIn { left: 0; opacity: 1; transition: left 0s, opacity .6s; }

#faqs .hdr-accordion { border-bottom: 2px dashed #213333; }
#faqs .hdr-accordion:last-of-type { border-bottom: 0; }
#faqs .hdr-accordion h4:before { background: #21BFA6; border-radius: 50%; content: ""; height: 26px; position: absolute; top: 30px; width: 26px; }
#faqs .hdr-accordion h4 { font-size: 1.3em; position: relative; }
#faqs .hdr-accordion button { padding-top: 12px; padding-bottom: 22px; }
#faqs .hdr-accordion > div { padding: 0 0 10px 40px; }
#faqs .hdr-accordion > div p:first-of-type { margin-top: 2px; }
#faqs .hdr-accordion-set.has-js .hdr-accordion-header:before,
#faqs .hdr-accordion-set.has-js .hdr-accordion-header:after { height: 3px; left: 6px; top: 23px; transform: none; width: 14px; }
#faqs .hdr-accordion-set.has-js .hdr-accordion-header:after { transform: rotate(270deg); }
#faqs .hdr-accordion-set.has-js .opened .hdr-accordion-header:after { transform: rotate(0deg); }

/* About Us */

.company { color: #081A21; margin-bottom: 80px; position: relative; }
.company:after { background: rgba(255,255,255,.4); content: ""; height: 124%; left: -900px; position: absolute; top: -11%; transform: skewX(-16deg); width: 600px; z-index: 1; }
.company.animated:after { left: 150%; transition: 2s; }
.company .row { position: relative; }
.company .row:before,
.company .row:after { background: #EFEBE6; border-radius: 48px 48px 0 0; content: ""; display: block; height: 66%; left: -50px; position: absolute; top: -11%; width: 72%; }
.company .row:after { border-radius: 0 0 48px 48px; height: 62%; top: 50%; width: 90%; }
.company * { position: relative; z-index: 1; }
.company h4 { color: #081A21; }
.company a { background: #213333; border-radius: 12px; color: #fff; display: inline-block; font-weight: 600; margin-top: 28px; padding: 4px 18px; text-decoration: none !important;  }
.company a:hover { background: #0c1515; color: #fff; }
.company .row > div:first-of-type { padding: 20px 0 0 4% !important; }
.company .row > div:first-of-type img { height: 100px; }
.company .row > div:last-of-type { position: relative; z-index: 2; }
.company .row > div:last-of-type img { border-radius: 18px; height: 100%; object-fit: cover; object-position: center; position: absolute; width: 100%; z-index: 2; }
.company:nth-of-type(even) .row { flex-direction: row-reverse; }
.company:nth-of-type(even) .row:first-of-type { padding: 0 4% 0 0 !important; }
.company:nth-of-type(even) .row:before,
.company:nth-of-type(even) .row:after { left: auto; right: -50px; }

/* Media & vendors */

#media-contacts ul { display: flex; justify-content: space-between; list-style: none; padding: 0; }
#media-contacts li { background: #EFEBE6; padding: 20px 0 38px; text-align: center; width: 32%; }
#media-contacts li img { display: block; height: 68px; margin: 24px auto; }
#media-contacts li:last-of-type img { height: 40px; margin: 42px auto 35px; }
#media-contacts li span { display: block; line-height: 1.5em; }
#media-contacts li a { color: #081A21; }
#media-contacts li a:hover { color: #136C63; }
#media-contacts li a:last-of-type { color: #136C63; font-weight: 700; text-decoration: underline; }
#media-contacts li a:last-of-type:hover { color: #081A21; }

/* Sitemap */

#sitemap a { color: #081a21; }
#sitemap a:hover { color: #136C63; }

/************ Responsive ****************************************************************************************/

@media screen and (min-width: 2030px) {
    html,body { font-size: 22px; }
    p { line-height: 1.8em; margin: 32px 0; }

    #power-map > div { width: 1400px;}

    #project-partners img { height: 120px; }
}

@media screen and (max-width: 1490px) {
    #power-locations .hdr-tabs .hdr-tabpanel img[src*="texticon"] { height: 70px; }
    #power-locations .hdr-tabs .hdr-tabpanel h3 { font-size: 1.8em; }
    #power-locations .hdr-tabs .hdr-tabpanel p { font-size: .9em; margin: 12px 0; }
    #power-locations .hdr-tabs .hdr-tabpanel a { margin-top: 28px; }
    
    #header-top { font-size: .85em; }
    #header-btm img { height: 64px; }
    #header-btm nav li { margin-left: 28px; }
    #header-btm nav li a { font-size: 1em; }
    .scrolled #header-btm nav li { margin-left: 24px; }

    #key-advantages li { font-size: .9em; padding: 20px 24px 0; }
    
    #timeline > li { font-size: .85em; }
    
    #project-partners img { height: 64px; }
    
    .con-process li { font-size: .85em; }
    .con-process li img { width: 48px; }

    #power-map > div > div.hp-animate div img { border-width: 8px; }
}

@media screen and (max-width: 1260px) {
    h3 { font-size: 2.4em; }
    h4 { font-size: 2em; }
    #content > section { padding: 32px 6%; }
    
    #header-top { font-size: .85em; }
    #header-btm img { height: 52px; }
    #header-btm nav li { margin-left: 20px; }
    #header-btm nav li a { font-size: .8em; }
    .scrolled #header-btm nav li { margin-left: 20px; }
    .scrolled  #header-btm nav li a { font-size: .8em; }

    #footer-top { padding: 14px 3% 32px 2.5%; }

    .blue-rounded:before { border-radius: 70px 0 0 0; }
    
    #subpage-subtext { padding-bottom: 60px !important; }

    #homepage-header { padding: 56px 0 124px 8% !important;  }
    #homepage-header p { font-size: 1em; }

    #power-locations .hdr-tabs .hdr-tabpanel { padding-left: 16%; }
    #power-locations .hdr-tabs .hdr-tabpanel img[src*="texticon"] { height: 50px; }
    #power-locations .hdr-tabs .hdr-tabpanel h3 { font-size: 1.5em; }
    #power-locations .hdr-tabs .hdr-tabpanel p { font-size: .85em; margin: 9px 0; }
    #power-locations .hdr-tabs .hdr-tabpanel a { font-size: .9em; margin-top: 20px; }
    #power-locations .hdr-tab { margin: 12px 0; }
    
    #timeline > li ul { padding-left: 34px; }
    #timeline > li h3 { font-size: 1.6em; padding: 36px 18px 14px; }
    
    #hover-map a img { width: 52px; }
    
    #row-process li { font-size: .9em; padding: 20px 24px 1px; }

    .con-process li { font-size: .75em; }
    
    #events-intro h3 { margin-top: 80px; }
    #events-intro p:last-of-type { margin-bottom: 160px; }
    
    #meeting-count h3 { font-size: 1.8em; width: 220px; }
    #meeting-count ul { gap: 18px; }
    #meeting-count li { font-size: .9em; }
    #meeting-count li strong { font-size: 2.6em; }
    #meeting-count li span { width: 140px; }
    
    #regulatory-filings .per-state > div:last-of-type { font-size: .9em; padding: 0 36px 6px; }
    #regulatory-filings .per-state > div:last-of-type h4 { margin-top: 34px; }

    #faqs .hdr-tabs.has-js .hdr-tablist { gap: 6px; }
    #faqs .hdr-tabs .hdr-tab { font-size: .8em; line-height: 1.2em; padding: 14px 10px; }

    .company { margin: 50px 0 130px; }
    .company .row:before,
    .company .row:after { left: -20px; }
    .company:nth-of-type(even) .row:before,
    .company:nth-of-type(even) .row:after { left: auto; right: -20px; }
    
    #media-contacts li img { height: 52px; }
    #media-contacts li:last-of-type img { height: 32px; margin: 34px auto; }

    #project-timeline > ul > li { font-size: .9em;  }
    #project-timeline > ul > li:after { height: 32px; margin-left: -32px; width: 32px; }
    
    #power-map > div > div.hp-animate div img { border-width: 5px; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1.8em; margin: 16px 0; }
    h3 { font-size: 1.8em; margin: 16px 0; }
    h4 { font-size: 1.5em; margin: 24px 0 0; }
    h5 { font-size: 1.2em; margin: 24px 0 0; }
    h6 { font-size: 1.1em; margin: 24px 0 0; }
    p, li { font-size: .9em; line-height: 1.4em; }
    button { font-size: .9em; padding: 4px 10px; }

    #content > section { padding: 22px 6%; }
    .row { display: block; }

    .hdr-accordion h4 { font-size: 1.5em; }
    .hdr-accordion-set.has-js .hdr-accordion-header:before,
    .hdr-accordion-set.has-js .hdr-accordion-header:after { height: 3px; width: 18px; }

    .hdr-lightbox { margin: 24px 0; max-width: 500px; }
    .hdr-lightbox.enhanced { margin: 0; max-width: 100%; }
    .hdr-lightbox > div .hdr-close-lightbox { font-size: 2em; right: 6px; top: 2px; }
    .hdr-lightbox.enhanced img { max-width: 555%; width: 992px; }

    /* Header */
    #mobile-menu { display: block; }
    .menu-opened #mobile-menu .line.top { top: 8px; transform: rotate(45deg); }
    .menu-opened #mobile-menu .line.mid { opacity: 0; transform: rotate(90deg); }
    .menu-opened #mobile-menu .line.btm { top: -10px; transform: rotate(-45deg); }

    #header-btm img { height: 52px; }
    #header-btm nav { position: relative; }
    #header-btm nav ul { background-color: #fff; box-shadow: 2px 4px 8px -4px #000; margin-top: 8px; opacity: 0; position: absolute; right: 9999px; top: 100%; width: 220px; z-index: 1; }
    #header-btm nav li { border-top: 1px solid rgba(33,51,51,.6); display: block; margin: 0; padding: 5px 4px; text-align: center; width: 100%; }
    #header-btm nav li ul { box-shadow: none; margin: 0; padding: 0; position: static; width: 100%; }
    #header-btm nav li ul li { border: 0; margin: 0 !important;  }
    #header-btm nav li a:before,
    #header-btm nav li a:after { display: none; }
    .scrolled #header-btm img { height: 40px; }
    .scrolled #header-btm nav li { margin: 0; }
    .menu-opened #header-btm nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }

    #footer-top { padding: 18px 4% 6px;  }
    #footer-top > .row { display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; }
    #footer-top > .row > div { margin: 0; padding: 0; width: 44%; }
    #footer-top > .row > div:nth-of-type(2) { width: 50%; }
    #footer-top > .row > div:nth-of-type(3) { width: 100%; }
    #footer-top nav { text-align: center; }
    #footer-top nav li { display: inline-block; margin: 8px; }
    #footer-top nav li:last-of-type { display: block; margin-top: 4px; }
    #footer-btm { display: block; text-align: center; }
    #footer-btm nav { margin-top: 12px; }
    #footer-btm nav ul { padding: 0; }

    #subpage-header { padding-top: 94px !important; padding-bottom: 26px !important;  }
    #subpage-header h2 { font-size: 2.8em; }
    #jump-links ul { margin: 10px 0; }
    #jump-links li { margin: 4px 30px 4px 0; }
    #jump-links li a { font-size: .9em; }
    #subpage-subtext { padding-bottom: 28px !important; }
    #subpage-subtext .line-animate { margin-top: 56px; }
    #subpage-subtext .line-animate:before { border-width: 5px 5px 0 0; height: 16px; margin-bottom: 12px; margin-right: -5px; }
    #subpage-subtext .line-animate:after { border-width: 0 0 5px 5px; height: 24px; margin-top: 12px; }

    #homepage-header { padding: 26px 0 56px 6% !important; }
    #homepage-header .row > div:first-of-type { margin-bottom: 76px; padding-right: 40px; }
    #homepage-header .row > div:last-of-type { height: 280px; }
    #homepage-header .line-animate { margin-top: 52px; }
    #homepage-header .line-animate:before { border-width: 5px 5px 0 0; height: 16px; margin-bottom: 12px; margin-right: -5px; }
    #homepage-header .line-animate:after { border-width: 0 0 5px 5px; height: 24px; margin-top: 12px; }
    
    #homepage-header .line-animate.anim:before { height: 5px; margin-bottom: 23px; margin-right: 30%; }
    #homepage-header .line-animate.animated:before { height: 16px; margin-bottom: 12px; margin-right: -5px; transition: .4s ease-in-out .5s, margin-right .6s; }
    #homepage-header .line-animate.anim:after { height: 5px; opacity: 0; width: 5px; }
    #homepage-header .line-animate.animated:after { height: 24px; opacity: 1; width: 300%; transition: 1.1s ease-in-out 1.2s, opacity .1s ease-in-out .8s, height .6s ease-in-out .8s; }

    #power-locations .hdr-tabs .hdr-tabpanel { margin-left: 30%; padding-left: 24%; width: 70%; }
    #power-locations .hdr-tabs .hdr-tabpanel img[src*="texticon"] { height: 38px; }
    #power-locations .hdr-tabs .hdr-tabpanel h3 { font-size: 1.2em; margin: 8px 0; }
    #power-locations .hdr-tabs .hdr-tabpanel a { font-size: .85em; margin-top: 16px; }
    #power-locations .hdr-tabs .hdr-tabpanel button { margin-top: 14px; }
    #power-locations .hdr-tabs .hdr-tabpanel > div { width: 95%; }
    
    #hover-map { border: 1px solid #bbb; overflow: auto; width: 100%; }
    #hover-map > div { width: 992px; }

    #key-advantages ul { flex-wrap: wrap; }
    #key-advantages li { margin-bottom: 24px; width: 48%; }

    #timeline { flex-wrap: wrap; justify-content: flex-start; }
    #timeline > li { margin-right: 3%; width: 30%; }
    #timeline > li:last-of-type { padding-bottom: 80px; }
    #timeline > li:after { border-width: 12px; top: 56%; }
    
    #project-partners img { height: 46px; }

    .con-process-txt { flex-wrap: wrap; }
    .con-process-txt li { border-bottom: 2px solid #50c2a2; padding-bottom: 24px; width: 33.33333% !important; }
    .con-process-txt.septet li { width: 25% !important; }
    .con-process-txt li:before { display: none; }
    .con-process-txt li:after { margin-top: -4px; }
    .con-process-txt li img { display: block; height: 42px; margin: 0 auto 8px; width: auto; }
    .con-process-txt.septet li:last-of-type img { height: 30px; margin: 6px auto 14px; }
    .con-process-txt:after { display: none; }
    .con-process-imgs { display: none; }

    #events-intro h3 { margin-top: 70px; }
    #events-intro p:last-of-type { margin-bottom: 110px; }
    #events-intro .row { display: flex; }
    #events-intro .row > div { width: 50%; }

    .events .row { display: flex; }
    .events .row > div { width: 33.3333%; }
    .events .row h5 { font-size: 1em; }
                    
    #upcoming-events .row { display: flex; }
    #upcoming-events .row > div { width: 33.3333%; }
    #upcoming-events .row h5 { font-size: 1em; }

    #meeting-count { gap: 80px; }
    #meeting-count h3 { font-size: 1.4em; width: 220px; }
    #meeting-count ul { gap: 18px; }
    #meeting-count li { display: block; font-size: .85em; }
    #meeting-count li strong { display: block; font-size: 2.2em; margin-bottom: 8px; }
    #meeting-count li span { width: 70px; }

    #regulatory-filings .per-state > div:last-of-type { padding-top: 1px; }
    #regulatory-filings .per-state > div:last-of-type h4 { margin-top: 26px; }
    #regulatory-filings .per-state-mn:after { display: none; }
    #regulatory-filings .per-state-sd > div:last-of-type { border-radius: 34px 0 0 0; }

    #faqs .hdr-tabs .hdr-tab { font-size: .75em; }

    .company { margin: 20px 0 360px; }
    .company:after { transform: skewX(-14px); width: 300px; }
    .company a { margin: 0 0 18px; }
    .company .row { flex-direction: row !important; padding: 0 !important; }
    .company .row > div:first-of-type { padding: 0 4% !important; }
    .company:nth-of-type(even) .row:first-of-type { padding: 0 4% 0 0 !important; }
    .company .row > div:first-of-type img { height: 64px; } 
    .company .row:before { left: 0; width: 100%; }
    .company .row:after { height: 90%; left: auto; right: 0; width: 100%; }
    .company:nth-of-type(even) .row:before,
    .company:nth-of-type(even) .row:after { left: auto; right: 0; }
    .company .row > div:last-of-type img { height: 280px; left: 50%; transform: translateX(-50%); width: 74%; }

    #media-contacts ul { flex-wrap: wrap; }
    #media-contacts li { padding: 8px 0 20px; width: 48.25%; }
    #media-contacts li img { margin-top: 18px; }
    #media-contacts li:last-of-type img { margin-top: 28px; }
    
    #project-timeline > ul { flex-wrap: wrap; }
    #project-timeline > ul > li { width: 48%; }
    
    #instruction { font-size: .75em; width: 250px; }
    #map-thanks { font-size: .9em; padding: 8px 14px; width: 80%; }
    #address-search { font-size: .85em; }
    .thanks #map-thanks { top: 210px; }
    #map-form { font-size: .9em; }
    #map-form select { font-size: .9em; }
    #map-form input[type="submit"] { font-size: .9em; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 26px 8%; }

    #announcement { font-size: .85em; }

    #subpage-header:before { background-size: contain !important; }

    #power-locations .hdr-tabs { position: static; }
    #power-locations .hdr-tablist { background: #efebe6; padding: 14px 8px; position: static; text-align: center; transform: none; }
    #power-locations .hdr-tab { border: 1px solid #213333; display: inline-block; height: 20px !important; margin: 4px 6px; width: 20px !important; }
    #power-locations .hdr-tabs .hdr-tabpanel { background-image: linear-gradient( to top, transparent, #EFEBE6 15% ); height: 300px; margin: 0; padding: 2px 36px; position: static; width: 100%; }
    #power-locations .hdr-tabs .hdr-tabpanel:before { display: none; }
    #power-locations .hdr-tabs .hdr-tabpanel > div { top: -16px; }
    #power-map { background: #fff; width: 100%; z-index: 1; }
    #power-map > div > div.hp-animate div img { border-width: 2px; }
    #power-map > div.animateAll > div:nth-of-type(1) img { border-width: 2px; }
    #power-map > div.animateAll > div:nth-of-type(2) img { border-width: 2px; }

    #project-area .line-animate { margin-top: 74px; }
    #project-area .line-animate.anim:before { border-width: 0 5px 5px 0; margin-bottom: 155px; width: 5px; }
    #project-area .line-animate.animated:before { margin-bottom: 46px; width: 100%; transition: margin .4s, width .7s ease-in-out .3s; }
    #project-area .line-animate.anim:after { border-left-width: 5px; height: 0; margin-bottom: 41px; }
    #project-area .line-animate.animated:after { height: 44px; margin-bottom: 7px; transition: .4s ease-in-out .9s; }

    #get-involved ul { flex-wrap: wrap; }
    #get-involved li { padding-bottom: 18px; width: 100%; }

    #project-partners { margin: 24px 0 8px; }
    #project-partners img { height: 32px; }

    #row-process { flex-wrap: wrap; }
    #row-process li { border-top-width: 10px; width: 48%; }

    #events-intro h3 { margin-top: 40px; }
    #events-intro p:last-of-type { margin-bottom: 32px; }
    #events-intro .row { display: block; }
    #events-intro .row > div { width: 100%; }
    #events-intro .row > div:first-of-type { padding-right: 5%;}
    #events-intro .row > div:last-of-type { height: 270px; }
    #events-intro img { border-radius: 24px 0 0 24px; border-width: 16px 0 16px 16px; }
    
    #faqs .hdr-tabs.has-js .hdr-tablist { flex-wrap: wrap; }
    #faqs .hdr-tabs .hdr-tab { width: 32%; }

    #comment-map { border: 0; }
    #corner-box { position: relative; }
    #instruction { width: 100%; }
    #search-address { top: 208px; }
    
    #map { border: 1px solid #000; }
    #form-area { border: 1px solid #000; padding-top: 77px; }
    #form-area form { height: 100%; margin: 0; padding: 18px 20px 28px; width: 100%; }
    #form-area label { line-height: 1.3em; }
    #legend { right: 58px; top: 71px; }

    #add-comment { padding-top: 44px !important; }
    #add-comment:hover:before { height: 24px; top: 11px; width: 4px; }
    #add-comment:hover:after { height: 4px; top: 21px; width: 24px; }
    .echolocating #add-comment:after { width: 14px; }
    .commenting #add-comment:after { width: 24px; }
}


@media screen and (max-width: 680px) {
    #header-top { display: block; padding: 6px 14px 10px; text-align: center; }
    #header-top nav { margin-top: 6px; }
    #header-top nav ul li { margin: 3px 6px; }

    #header-btm { padding: 4px 2%; }

    #footer-top > .row > div { font-size: .85em;text-align: center; width: 100% !important; }
    #footer-top > .row > div p { margin: 8px 0;  }
    #footer-top img[src*="logo"] { max-width: 210px; }
    .zoho-email-signup input[type="email"], .zoho-email-signup input[type="text"], .zoho-email-signup select { font-size: .9em !important; min-height: 28px !important; padding: 5px !important;  }
    #footer-btm nav li { margin: 5px 0; }
    
    #key-advantages li { margin-bottom: 16px; width: 100%; }
    
    #timeline > li { margin-right: 5%; width: 45%; }
    #timeline > li h4 { font-size: 1.4em; padding: 16px 18px 14px; }
    #timeline > li:last-of-type { padding-bottom: 32px; width: 100%; }

    #working-together .line-animate { margin-top: 68px; }
    
    .con-process-txt li { border-bottom: 2px solid #50c2a2; padding-bottom: 24px; width: 50% !important; }
    .con-process-txt.septet li { width: 50% !important; }

    .events h4 { margin-bottom: 22px; }
    .events .row { flex-wrap: wrap; }
    .events .row > div { font-size: .9em; width: 100%; }
    .events .row h5 { margin-top: 0; }
    
    #upcoming-events h4 { margin-bottom: 30px; }
    #upcoming-events .row { flex-wrap: wrap; }
    #upcoming-events .row > div { font-size: .9em; width: 100%; }
    #upcoming-events .row h5 { margin-top: 0; }

    #meeting-count { display: block; padding: 15px 6% 4px !important; }
    #meeting-count h3 { width: 100%; }

    .company { margin: 10px 0 320px; }
    .company .row > div:first-of-type { padding: 0 7% !important; }
    .company .row > div:last-of-type img { height: 260px; left: 50%; transform: translateX(-50%); width: 88%; }
    
    #project-timeline > ul > li { width: 100%; }
}

@media screen and (max-width: 480px) {
    #subpage-header { padding-top: 64px !important; padding-bottom: 16px !important;  }
    #subpage-header h2 { font-size: 2.2em; }

    #power-locations .hdr-tabs .hdr-tabpanel { font-size: .9em; height: 360px; }
    
    #timeline > li { width: 100%; }

    #project-partners { flex-wrap: wrap; }
    #project-partners img { height: auto; margin: 12px auto; max-width: 180px; width: 100%; }
                          
    #faqs .hdr-tabs .hdr-tab { width: 48.5%; }
    
    #media-contacts li { padding: 8px 0 20px; width: 100%; }
}

/*Zoho Form */
.zoho-comment-form #crmWebToEntityForm {
    max-width: 100% !important;
    padding: 0 !important;;
    margin:0 auto;
}

.zoho-email-signup .sr-only, .zoho-comment-form .sr-only, #map-form .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zoho-email-signup input:focus, 
.zoho-email-signup select:focus, 
.zoho-email-signup button:focus, 
.zoho-comment-form input:focus, 
.zoho-comment-form select:focus, 
.zoho-comment-form button:focus,
#map-form input:focus,
#map-form select:focus{
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.zoho-email-signup .error, .zoho-comment-form .error, #map-form .error {
    color: #d20000;
    background-color: #FFEBE8;
    border: 1px solid #ffd9d3;
}

.zoho-email-signup .required-indicator, .zoho-comment-form .required-indicator, #map-form .required-indicator {
    color: #B40000;
    font-weight: bold;
}

.zoho-email-signup label{
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
.zoho-comment-form .zcwf_lblTopBottom .zcwf_col_lab, #map-form .zcwf_lblTopBottom .zcwf_col_lab {
    margin-bottom:0;
padding-bottom:0;
}
.zoho-comment-form label, #map-form label {
    margin-bottom:0;
    padding-bottom:0;
      color: #333;
      font-size:1.2em;
}
.zoho-comment-form textarea#CASECF1, #map-form textarea#CASECF1 {
    min-height: 120px;
    width:100%;
    border-radius: 4px;
    border: 2px solid #ccc!important;
}

.zoho-email-signup .form-field, .zoho-comment-form .form-field {
    margin-bottom: 15px;
}

.zoho-email-signup #zcWebOptin, .zoho-comment-form #formsubmit, #map-form #formsubmit {
    cursor: pointer;
    appearance: none;
    border-radius: 3px;
    background-position: center bottom;
    background-repeat: repeat-x;
    outline: none;
    padding: 6px 20px 4px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    background-color: rgb(255, 137, 20);
    background: rgb(255, 137, 20);
    border: 2px solid rgb(255, 137, 20);
    font-family: Arial;
    white-space: normal;
    min-height: 36px;
    min-width: 44px;
}
.zoho-comment-form input[name="reset"], #map-form input[name="reset"] {
    cursor: pointer;
    appearance: none;
    border-radius: 3px;
    background-position: center bottom;
    background-repeat: repeat-x;
    outline: none;
    padding: 6px 20px 4px;
    text-align: center;
    color: rgb(46, 46, 46);
    font-size: 16px;
    background-color: rgb(216, 216, 216);
    background:rgb(216, 216, 216);
    border: 2px solidrgb(216, 216, 216);
    font-family: Arial;
    white-space: normal;
    min-height: 36px;
    min-width: 44px;
}
.zoho-email-signup #zcWebOptin:hover, .zoho-comment-form #formsubmit:hover,
.zoho-email-signup #zcWebOptin:focus, .zoho-comment-form #formsubmit:focus {
    background-color: rgb(230, 120, 15);
    border-color: rgb(230, 120, 15);
}
.zoho-comment-form .side-by-side, #map-form .side-by-side {
    width:50%;
    float: left;
}
.zoho-email-signup  input[type="email"], 
.zoho-email-signup input[type="text"], 
.zoho-email-signup select, 
.zoho-comment-form input[type="email"], 
.zoho-comment-form input[type="text"], 
.zoho-comment-form select,
.zoho-comment-form .zcwf_lblTopBottom .zcwf_col_fld input[type="text"],
#map-form input[type="text"],
#map-form select {

    color: #213333;
    min-height: 36px;
    min-width: 44px;
    padding: 2px 10px;
    font-size: 16px;
    border: 2px solid #ccc!important;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.zoho-email-signup  select, .zoho-comment-form select {
    background-color: white;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

 /* Multi-select pill interface */
.pill-container {
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 0;
    min-height: 32px;
    background-color: #dbdfdf;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    cursor: text;
    width: 100%;
    box-sizing: border-box;
}

.pill-container:focus-within {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.county-pill {
    background-color: #202725;
    color: white;
    padding: 3px 12px;
    margin: 3px 0 3px 3px; 
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.pill-remove {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
}

.pill-remove:hover, .pill-remove:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid white;
}

.county-dropdown {
    position: relative;
    width: 100%;
}

.county-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.county-options.show {
    display: block;
}

.county-option {
    color: #213333;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

.county-option:hover, .county-option:focus {
    background-color: #f5f5f5;
}

.county-option.selected {
    background-color: #202725;
    color: white;
}

.county-option:last-child {
    border-bottom: none;
}

.pill-input-area {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 6px 0;
    background: transparent;
    min-height: 28px;
}

.pill-input-area::placeholder {
    color: #999;
}


/*zoho Comment County Form pills */
.comment-pill-container {
    border-radius: 4px;
    padding: 0;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    cursor: text;
    width: 100%;
    box-sizing: border-box;
}

.comment-pill-container:focus-within {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.comment-county-pill {
    background-color: #202725;
    color: #fff;
    padding: 3px 12px;
    margin: 3px 0 3px 3px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;
}

/* --- Remove button --- */
.comment-pill-remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
}

.comment-pill-remove:hover,
.comment-pill-remove:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid #fff;
}

/* --- Dropdown for comment counties --- */
.comment-county-dropdown {
    position: relative;
    width: 100%;
}

.comment-county-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.comment-county-options.show {
    display: block;
}

.comment-county-option {
    color: #213333;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

.comment-county-option:hover,
.comment-county-option:focus {
    background-color: #f5f5f5;
}

.comment-county-option.selected {
    background-color: #202725;
    color: #fff;
}

.comment-county-option:last-child {
    border-bottom: none;
}

/* --- Input inside comment pill container --- */
.comment-pill-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 6px 0;
    background: transparent;
    min-height: 28px;
    border: 2px solid #ccc !important;
}

.comment-pill-input::placeholder {
    color: #999;
}

/* Hidden fields*/
#CONTACT_CF3, .hidden-comment-fields {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/*Zoho Comment Topic Pills */
/* --- Zoho Comment Form pills for COUNTY (#CASECF22) --- */
.comment-pill-container {
    border-radius: 4px;
    padding: 0;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    cursor: text;
    width: 100%;
    box-sizing: border-box;
}

.comment-pill-container:focus-within {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.comment-county-pill {
    background-color: #202725;
    color: #fff;
    padding: 3px 12px;
    margin: 3px 0 3px 3px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;
}

/* Remove button (shared styles) */
.comment-pill-remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
}
.comment-pill-remove:hover,
.comment-pill-remove:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid #fff;
}

/* Dropdown for comment counties */
.comment-county-dropdown {
    position: relative;
    width: 100%;
}
.comment-county-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.comment-county-options.show {
    display: block;
}
.comment-county-option {
    color: #213333;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}
.comment-county-option:hover,
.comment-county-option:focus {
    background-color: #f5f5f5;
}
.comment-county-option.selected {
    background-color: #202725;
    color: #fff;
}
.comment-county-option:last-child {
    border-bottom: none;
}

/* Input inside county pill container */
.comment-pill-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 6px 0;
    background: transparent;
    min-height: 28px;
}
.comment-pill-input::placeholder {
    color: #999;
}


/* --- Zoho Comment Form pills for TOPICS (#CASECF19) --- */
.commentTopic-pill-container {
    border-radius: 4px;
    padding: 0;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    cursor: text;
    width: 100%;
    box-sizing: border-box;
}
#commentTopic-pill-input,
#commentTopic-pill-input:focus {
    border: 0px !important;
}
.commentTopic-pill-container:focus-within {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.commentTopic-pill {
    background-color: #213333; /* slightly different shade if you want to distinguish */
    color: #fff;
    padding: 3px 12px;
    margin: 3px 0 3px 3px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;
}

/* Dropdown for comment topics */
.commentTopic-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
#map-form .commentTopic-options {
    border-top: 2px solid #ccc;
    border-bottom: 0;
    bottom: 100%;
    top: auto;
}

.commentTopic-options.show {
    display: block;
}
.commentTopic-option {
    color: #213333;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}
.commentTopic-option:hover,
.commentTopic-option:focus {
    background-color: #f5f5f5;
}
.commentTopic-option.selected {
    background-color: #213333;
    color: #fff;
}
.commentTopic-option:last-child {
    border-bottom: none;
}

/* Input inside topic pill container */
.commentTopic-pill-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 6px 0;
    background: transparent;
    min-height: 28px;
}
.commentTopic-pill-input::placeholder {
    color: #999;
}

.commentTopic-pill-remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
}

#SIGNUP_BODY_ALL { border: 0 !important; }
#SIGNUP_HEADING { display: none; }
#SIGNUP_BODY { background: transparent !important; font-family: "Poppins",sans-serif !important; padding: 0 !important; }
/* .zoho-email-signup label { left: -9999px; position: absolute; } */
#name-fields { display: flex; justify-content: space-between; }
#name-fields > div { width: 48.5%; }
.zoho-email-signup input[type="email"], 
.zoho-email-signup input[type="text"], 
.zoho-email-signup select { border: 0; }
.zoho-email-signup .form-field { padding: 4px 0 !important; }
.pill-container { border: 0; }
.zoho-email-signup #zcWebOptin { border-radius: 12px; color: #213333; font-family: "Poppins",sans-serif !important; font-weight: 700; }


/*Comment Map Form */
#map-form {
    height: 100%;
    margin-top: 0; 
    position: relative;
}
#map-form #crmWebToEntityForm {
    max-width:60% !important;  
    max-height:100% !important;
    height: 100% !important;
    overflow-y: auto;
    padding: 0 !important; 
    position: absolute;
    right: 0;
}
#map-form #crmWebToEntityForm.zcwf_lblTopBottom {
    padding: 20px;
}

/* Validation Error Styles */
#share-feedback .validation-error {
     background-color: #fee;
     border-left: 4px solid #c33;
     color: #c33;
     padding: 12px 15px;
     margin: 10px 0;
     border-radius: 4px;
     font-size: 14px;
     animation: slideIn 0.3s ease-out;
}

#share-feedback .field-error .zcwf_col_fld input,
#share-feedback .field-error .zcwf_col_fld textarea,
#share-feedback .field-error .zcwf_col_fld select,
#share-feedback .field-error .commentTopic-pill-container,
#share-feedback .field-error .comment-pill-container {
     border-color: #c33 !important;
     box-shadow: 0 0 0 2px rgba(204, 51, 51, 0.1);
}

@keyframes slideIn {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }
     to {
          opacity: 1;
          transform: translateY(0);
     }
}

#map-form .zcwf_row {
    margin-top:3px;;
}
#map-form #crmWebToEntityForm form{
    max-width:100% !important;
    padding: 38px !important;
    margin: 0 !important;
}
#map-form .zcwf_col_fld {
    margin-top:0;
}
#map-form select, #map-form input[type="text"]{
    width:100%;
}

@media screen and (max-width: 768px) {
    #map-form #crmWebToEntityForm form {
        padding: 18px !important;
    }
}

/*responsive iframe*/
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* This creates a 16:9 aspect ratio (9 / 16 = 0.5625) */
  /* Adjust padding-top for different aspect ratios:
     - 75% for 4:3 (3 / 4 = 0.75)
     - 100% for 1:1 (square)
  */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Optional: remove iframe border */
}

.restrict-height {
    position: relative; 
    padding: 0; 
}
.restrict-height .responsive-iframe {
    border: 1px solid #aaa; 
    height: 760px; 
    position: static; 
}
@media screen and (max-width: 1260px) {
    .restrict-height { margin-bottom: 28px; }
    .restrict-height .responsive-iframe { height: 630px; }
}

/* Landing Page */

#content.landing-page > section { padding: 0; }
.landing-page { background: #efece7; padding: 104px 6% 72px 56%; position: relative; }
.landing-page h1 { font-size: 2.8em; font-weight: 600; }
.landing-page h1 span { color: #136C63; display: block; font-size: .4em; font-weight: 500; letter-spacing: .12em; margin-bottom: 10px; }
.landing-page p strong { color: #136C63; font-size: 1.2em; }

#logo-section { height: 100%; left: 0; position: fixed; top: 0; width: 50%; }
#logo-section:before { background-image: url("../images/landing_bg.jpg"); background-size: cover; background-position: center; content: ""; height: 100%; opacity: 0; position: absolute; transition: opacity 1s ease-in-out .3s; width: 100%; }
#logo-section:after { background-image: url("../images/logo-line.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; content: ""; height: 100%; position: absolute; width: 100%; }
#logo-section img { left: 50%; opacity: 0; position: absolute; transform: translateX(-50%); top: 70px; width: 80%; z-index: 1; }
#logo-section img:nth-of-type(1) { margin-top: -12px; margin-left: -60px; transition: margin 1.2s ease-in-out .5s, opacity 1.1s ease-in-out .5s; }
#logo-section img:nth-of-type(2) { margin-top: -32px; margin-left: 60px; transition: margin 1.2s ease-in-out .65s, opacity 1.1s ease-in-out .65s; }
#logo-section img:nth-of-type(3) { margin-top: 42px; margin-left: 80px; transition: margin 1.2s ease-in-out .6s, opacity 1.1s ease-in-out .6s; }
#logo-section div { background: #efece7; bottom: 0; height: 100%; left: 0; position: absolute; transition: height .8s; width: 100%; z-index: 2; }

#logo-section.animate:before { opacity: 1; }
#logo-section.animate img { margin: 0 !important; opacity: 1; }
#logo-section.animate div { height: 0; }

#landing-logos { display: flex; margin-top: 64px; }
#landing-logos img { height: 42px; margin: 0 24px 18px 0; }

@media screen and (min-width: 2030px) {
    .landing-page { padding: 104px 6% 72px 1160px; }
    #logo-section { width: 1000px; }
    #logo-section img { width: 70%; }
}

@media screen and (max-width: 1430px) { 
    #landing-logos img { height: 36px; margin: 0 14px 14px 0; }
}

@media screen and (max-width: 1260px) { 
    #landing-logos img { height: 32px; margin: 0 12px 14px 0; }
}

@media screen and (max-width: 992px),(max-height: 880px) {
    #logo-section:after { background-size: 100% 120%; }
    #logo-section img { width: 64%; }
}
@media screen and (max-width: 992px),(max-height: 690px) {
    #logo-section { width: 40%;}
    #logo-section:after { background-size: 100% 100%; }
    #logo-section img { left: 58%; width: 50%; }
}
@media screen and (min-width: 2030px) and (max-height: 690px) {
    #logo-section:after { background-size: 100% 180%; }
    #logo-section img { left: 50%; width: 50%; }
}
@media screen and (max-width: 992px),(max-height: 550px) {
    #logo-section { width: 40%;}
    #logo-section:after { background-size: 100% 140%; }
    #logo-section img { left: 54%; width: 40%; }
}

@media screen and (max-width: 992px) {
    #logo-section { height: 144px; left: 0; position: absolute; top: 0; width: 100%; }
    #logo-section:after { background-image: none; background-color: #213333; bottom: -50px; height: 68px; transform: skewY(2deg); }
    #logo-section img { left: 5%; position: absolute; top: 80px; transform: none; width: 180px; }
    #logo-section img:nth-of-type(1) { margin-top: -8px; margin-left: -26px; }
    #logo-section img:nth-of-type(2) { margin-top: -16px; margin-left: 34px; }
    #logo-section img:nth-of-type(3) { margin-top: 22px; margin-left: 34px; }
    .landing-page { padding: 280px 6% 24px; }
    #landing-logos { justify-content: center; }

    #logo-section div { position: absolute; top: 80px; transition: width .6s; }
    #logo-section.animate div { height: 120%; width: 0; }
    .mobile-reverse { flex-direction: column-reverse; display:flex; }
    .zoho-comment-form .side-by-side, #map-form .side-by-side {
        width: 100%;
        float: none;
    }
}

@media screen and (max-width: 768px) {
    #landing-logos img { height: 26px; margin: 0 8px 4px 0; }
}