body.noScroll {
overflow-y: hidden;
}
.hero { position: relative;
max-width: 100vw;   padding: 9rem 0 5rem;
margin: 0;
}
.hero figure { position: relative;   overflow: hidden;
}
.hero figcaption {
clear: left; max-width: 140rem;
padding: 2rem 2rem 0;
margin: 0 auto;
}
.hero picture > .btn { font-size: 2.2rem;
line-height: 1;
height: 4.5rem; padding: 1rem 3rem;
margin: 1rem 0 2rem 2rem;
}
.hero figcaption .btn {
float: left;
min-width: 7rem;
max-width: unset;
margin-right: 1rem;
margin-top: 2rem;
margin-bottom: .3rem;
}
.hero figure picture {
float: none;
position: relative;
max-width: 140rem;
height: 100%;  max-height: 80rem; margin: 0 auto;
overflow: hidden;
}
.hero figure picture img {
max-width: 140rem; min-height: 40rem;     }
.hero h1 {
position: absolute;
width: auto;
max-width: 100%;
bottom: 12rem;
left: 0;
padding: 1rem 2rem;
margin: 2rem 0 1rem;
}
.hero h2 {
position: absolute;
font-size: 1.7rem;
font-weight: 600 !important;
text-transform: none;
width: auto;
max-width: 100%;
bottom: 7.5rem;
left: 0%;
padding: 1rem 2rem;
margin: 2rem 0 1rem;
}  .hero p {  padding: 0;
}
.hero p span {
font-weight: 700;
color: #3b6c59;
}
.hero p.yPosTop {
margin-top: 10rem;
}
.hero .mainNavBar {
display: block;
position: fixed;
font-size: 1.8rem;
list-style: none;
width: 100%;
height: 9rem;
padding: 1rem 2rem;
top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transform-style: preserve-3d;
z-index: 9999999999;
}
.hero .mainNavBar.fooActive { background: transparent; }
.hero .name {
display: inline-block; font-family: 'Nunito Sans', sans-serif;
font-size: 2rem;
font-weight: 800;
line-height: .85; letter-spacing: .1rem; height: auto; }
.hero .name:hover, .hero .name:active, .hero .name:focus, .hero .name:focus-visible {
text-underline-offset: .5rem;
text-decoration-thickness: .3rem;
}
.hero .mainNavBar a.logo svg {
width: auto;
height: 5rem;
}
.hero .mainNavBar svg .a {
fill: transparent;
stroke: #111;
stroke-miterlimit: 100;
stroke-width: 4rem; }
.hero .mainNavBar svg .b {
fill:#111; }
.hero .mainNavBar .btn, .hero .mainNavBar .navBtn  {
float: right;
position: relative; top: calc(50% - 1.75rem); }
.hero .mainNavBar .btn {
font-size: 1.8rem; min-width: 6.6rem;
height: 3.5rem;
padding: 0 1rem;
margin-left: 0;
box-shadow: none;
} .hero .mainNavBar .navBtn  {
float: right;
position: relative;
background: transparent;
height: 3.5rem;
padding: 0;
margin-left: 1rem;
border: .2rem;
cursor: pointer;
}
.hero .mainNavBar .navBtn.active {
width: 4rem; }
.hero .mainNavBar .navBtn span {
display: block;
position: relative;
width: 4rem;
height: .5rem;
background: #111;
margin-bottom: .8rem;
border-radius: 1rem; }
.hero .mainNavBar .navBtn span:last-of-type {
margin-bottom: 0;
}
.hero .mainNavBar .navBtn.active span {
position: absolute;
width: 4.5rem;
margin: 0;
}
.hero .mainNavBar .navBtn.active span:first-of-type {
top: 1.45rem;
left: -0.25rem;
transform: rotate(42deg);
}
.hero .mainNavBar .navBtn.active span:nth-of-type(2) {
opacity: 0;
}
.hero .mainNavBar .navBtn.active span:last-of-type {
top: 1.45rem;
left: -0.25rem;
transform: rotate(-42deg);
transition: top .3s ease-out;
}
.hero .mainNav {
position: fixed;
background: transparent;
width: 100%;
top: -21rem;
left: 0;
padding: 0 calc(50vw - 70rem);
z-index: 99;
opacity: 0;
overflow: hidden;
transform: translateZ(-1rem);
transition: top .5s ease-out, opacity 2s ease-out;
}
.hero .mainNav.active {  opacity: 1;
top: 9rem;
transition: top .5s ease-out, opacity .1s ease-out;
}
.hero .mainNav li {
display: inline-block;
align-items: center;
font-weight: 600;
text-align: center;
color: #fff;
background: #111;
width: 100%;
height: 4.5rem;
border: solid #fff;
border-width: .2rem 0 0;
} .hero .mainNav li:last-of-type {
border-bottom-width: .2rem;
}
.hero .mainNav a {
display: block;
font-size: 2rem;
line-height: 4.5rem;
text-decoration: none;
color: #fff;
height: 4.5rem;
padding: 0 1rem;
-webkit-tap-highlight-color: transparent;
}
.hero a.logo {
float: left;
display: flex;
align-items: center;
height: 100%;
clip-path: inset(0 0 0 0);
opacity: 1;
transform: scale(1);
transition: clip-path .5s ease, opacity .1s ease, transform .5s ease;
}
.hero a.logo:hover, .hero a.logo:active, .hero a.logo:focus, .hero a.logo:focus-visible {
transform: scale(1.2); transition: transform .3s ease;
}
.hero .mainNav a.logo img {
width: 5rem;
height: 5rem;
}  @media screen and (min-width: 375px) {
.hero h2 {font-size: 1.8rem; } }
@media screen and (min-width: 480px) {
.hero { padding-top: 10rem; }
.hero h1 { margin: 0; bottom: 14rem; }
.hero h2 { bottom: 7.5rem; }
.hero .mainNavBar { height: 10rem; padding-left: 4rem; padding-right: 4rem; }
.hero .mainNav.active { top: 10rem; }
.hero figure { padding-left: 4rem; padding-right: 4rem; }
.hero figcaption { padding: 2rem 0 0; }
.hero picture > .btn {
margin: 2rem 0 1rem;
}
}
@media screen and (min-width: 540px) {
.hero h1 { bottom: 15rem; }
.hero h2 { font-size: 2.1rem; }
}
@media screen and (min-width: 640px) {
.hero h1 {
width: 100%;
max-width: calc(50% + 2rem);
bottom: 36rem;
left: unset;
right: 0;
padding: 2rem;
}
.hero h2 {
width: 100%;
max-width: calc(50% + 2rem);
bottom: 25.24rem;
left: unset;
right: 0;
padding: 2rem;
}
.hero picture > .btn {
position: absolute;
line-height: .8;
height: 4rem;
bottom: 23rem;
left: 50%;
padding: 1rem 2rem;
margin: 0;
}
}
@media screen and (min-width: 768px) { .hero h1 { bottom: 33rem; }
.hero h1, .hero h2 { max-width: calc(63% + 2rem); }
.hero h2 {font-size: 2.4rem; bottom: 21rem; }
.hero .mainNavBar .navBtn  { margin-left: 2rem; }
.hero figure, .hero .mainNavBar {
padding-left: 6rem;
padding-right: 6rem;
}
.hero picture > .btn { bottom: 18.5rem; left: 37%; }
}
@media screen and (min-width: 920px) {
.hero figcaption .btn:first-of-type { margin-left: calc(50% - 40rem); }
}
@media screen and (min-width: 960px) {
.hero h1, .hero h2 { max-width: calc(50% + 2rem); }
.hero h1 { margin: 7rem 0 2rem; bottom: 40rem; }
.hero h2 { bottom: 30rem; }
.hero .mainNav {
position: unset;
display: flex;
width: auto;
height: 100%;
padding: 0 1rem;
align-items: center;
justify-content: right;
opacity: 1;
transform: translateZ(0);
}
.hero .mainNav li { width: auto; background: inherit; border: 0 !important; }
.hero .mainNavBar.bgWhite .mainNav li, 
.hero .mainNavBar.bgWhite .mainNav li:has(a:hover), .hero .mainNavBar.bgWhite .mainNav li:has(a:active), 
.hero .mainNavBar.bgWhite .mainNav li:has(a:focus), .hero .mainNavBar.bgWhite .mainNav li:has(a:focus-visible) {
border: 0; background: transparent !important;
}
.hero .mainNavBar .mainNav li a:hover, .hero .mainNavBar .mainNav li a:active, .hero .mainNavBar .mainNav li a:focus, .hero .mainNavBar .mainNav li a:focus-visible {
text-decoration: underline;
text-underline-offset: .5rem;
text-decoration-thickness: .2rem;
}
.hero .mainNavBar .navBtn { display: none; }
.hero figure { margin-top: 0; }
.hero picture > .btn { bottom: 27.5rem; left: 50%; }
}
@media screen and (min-width: 1024px) {
.hero h1 { bottom: 34rem; }
.hero h2 { font-size: 2.7rem; bottom: 24rem; }
.hero .mainNavBar, .hero figcaption { padding-left: 6rem; padding-right: 6rem; }
.hero picture > .btn { bottom: 20.5rem; }
}
@media screen and (min-width: 1400px) {
.hero h2 { font-size: 3rem; }
}
@media screen and (min-width: 1520px) {
.hero .mainNavBar { padding: 1rem calc(50vw - 70rem); }
} .hero .mainNavBar.bgDark .mainNav li a:hover, .hero .mainNavBar.bgDark .mainNav li a:active, .hero .mainNavBar.bgDark .mainNav li a:focus, .hero .mainNavBar.bgDark .mainNav li a:focus-visible 
{ color: #ffffe9 !important; } .hero .mainNavBar.bgDark .navBtn span { background: #ffffe9; }
.hero .mainNavBar.bgLight .navBtn span { background: #3b6c59; }
.hero .mainNavBar.bgBlack .navBtn span { background: #fff; }
.hero .mainNavBar.bgWhite .navBtn span { background: #111; }
.hero .mainNavBar.aDark .navBtn span { background: #3b6c59; }
.hero .mainNavBar.aLight .navBtn span { background: #ffffe9; }
.hero .mainNavBar.aBlack .navBtn span { background: #111; }
.hero .mainNavBar.aWhite .navBtn span { background: #fff; }
.hero .mainNavBar.bgGreen .navBtn span, .hero .mainNavBar.fooActive .navBtn span { background: #ffffe9; }
.hero .mainNavBar.bgLight .btn, .hero .mainNavBar.aDark .btn { color: #ffffe9; background: #3b6c59; border: .3rem solid #3b6c59; }
.hero .mainNavBar.bgDark .btn, .hero .mainNavBar.aLight .btn { color: #3b6c59; background: #ffffe9; border: .3rem solid #ffffe9; }
.hero .mainNavBar.bgWhite .btn, .hero .mainNavBar.aBlack .btn { color: #fff; background: #111; border: .3rem solid #111; }
.hero .mainNavBar.bgBlack .btn, .hero .mainNavBar.aWhite .btn { color: #111; background: #fff; border: .3rem solid #fff; }
.hero .mainNavBar.bgGreen .btn, .hero .mainNavBar.fooActive .btn { color: #69a38c !important; background: #ffffe9 !important; border: .3rem solid #ffffe9 !important; }
.hero .mainNavBar.bgLight .btn:hover, .hero .mainNavBar.aDark .btn:hover,  .hero .mainNavBar.bgLight .btn:active, .hero .mainNavBar.aDark .btn:active, .hero .mainNavBar.bgLight .btn:focus, .hero .mainNavBar.aDark .btn:focus, .hero .mainNavBar.bgLight .btn:focus-visible, .hero .mainNavBar.aDark .btn:focus-visible 
{ color: #3b6c59; background: #ffffe9; border-color: #3b6c59; }
.hero .mainNavBar.bgDark .btn:hover, .hero .mainNavBar.aLight .btn:hover, .hero .mainNavBar.bgDark .btn:active, .hero .mainNavBar.aLight .btn:active, .hero .mainNavBar.bgDark .btn:focus, .hero .mainNavBar.aLight .btn:focus, .hero .mainNavBar.bgDark .btn:focus-visible, .hero .mainNavBar.aLight .btn:focus-visible 
{ color: #ffffe9; background: #3b6c59; border-color: #ffffe9; }
.hero .mainNavBar.bgWhite .btn:hover, .hero .mainNavBar.aBlack .btn:hover, .hero .mainNavBar.bgWhite .btn:active, .hero .mainNavBar.aBlack .btn:active, .hero .mainNavBar.bgWhite .btn:focus, .hero .mainNavBar.aBlack .btn:focus, .hero .mainNavBar.bgWhite .btn:focus-visible, .hero .mainNavBar.aBlack .btn:focus-visible 
{ color: #111; background: #fff; border-color: #111; }
.hero .mainNavBar.bgBlack .btn:hover, .hero .mainNavBar.aWhite .btn:hover, .hero .mainNavBar.bgBlack .btn:active, .hero .mainNavBar.aWhite .btn:active, .hero .mainNavBar.bgBlack .btn:focus, .hero .mainNavBar.aWhite .btn:focus, .hero .mainNavBar.bgBlack .btn:focus-visible, .hero .mainNavBar.aWhite .btn:focus-visible 
{ color: #fff; background: #111; border-color: #fff; }
.hero .mainNavBar.bgGreen .btn:hover, .hero .mainNavBar.fooActive .btn:hover, .hero .mainNavBar.bgGreen .btn:active, .hero .mainNavBar.fooActive .btn:active, .hero .mainNavBar.bgGreen .btn:focus, .hero .mainNavBar.fooActive .btn:focus, .hero .mainNavBar.bgGreen .btn:focus-visible, .hero .mainNavBar.fooActive .btn:focus-visible 
{ color: #ffffe9 !important; background: #69a38c !important; border-color: #ffffe9 !important; }
.hero .mainNavBar.bgBlack .logo .a, .hero .mainNavBar.aWhite .logo .a { stroke: #fff; }
.hero .mainNavBar.bgWhite .logo .a, .hero .mainNavBar.aBlack .logo .a { stroke: #111; }
.hero .mainNavBar.bgDark .logo .a, .hero .mainNavBar.aLight .logo .a, .hero .mainNavBar.bgGreen .logo .a { stroke: #ffffe9; }
.hero .mainNavBar.bgLight .logo .a, .hero .mainNavBar.aDark .logo .a { stroke: #3b6c59; }
.hero .mainNavBar.bgBlack .logo .b, .hero .mainNavBar.aWhite .logo .b { fill: #fff; }
.hero .mainNavBar.bgWhite .logo .b, .hero .mainNavBar.aBlack .logo .b { fill: #111; }
.hero .mainNavBar.bgDark .logo .b, .hero .mainNavBar.aLight .logo .b, .hero .mainNavBar.bgGreen .logo .b { fill: #ffffe9; }
.hero .mainNavBar.bgLight .logo .b, .hero .mainNavBar.aDark .logo .b { fill: #3b6c59; } .hero .mainNavBar.aDark .btn:hover, .hero .mainNavBar.aDark .btn:active, .hero .mainNavBar.aDark .btn:focus, .hero .mainNavBar.aDark .btn:focus-visible {
color: #3b6c59 !important;
}
.hero .mainNavBar.aLight .btn:hover, .hero .mainNavBar.aLight .btn:active, .hero .mainNavBar.aLight .btn:focus, .hero .mainNavBar.aLight .btn:focus-visible {
color: #ffffe9 !important;
}
.hero .mainNavBar.aWhite .btn:hover, .hero .mainNavBar.aWhite .btn:active, .hero .mainNavBar.aWhite .btn:focus, .hero .mainNavBar.aWhite .btn:focus-visible {
color: #fff !important;
}
.hero .mainNavBar.aBlack .btn:hover, .hero .mainNavBar.aBlack .btn:active, .hero .mainNavBar.aBlack .btn:focus, .hero .mainNavBar.aBlack .btn:focus-visible {
color: #111 !important;
}
.hero .mainNavBar.aNone .btn:hover, .hero .mainNavBar.aNone .btn:active, .hero .mainNavBar.aNone .btn:focus, .hero .mainNavBar.aNone .btn:focus-visible {
color: inherit !important;
background: inherit !important;
}
.hero.aBlack picture > .btn:hover, .hero.aBlack picture > .btn:active, .hero.aBlack picture > .btn:focus, .hero.aBlack picture > .btn:focus-visible { background: #111 !important; color: #fff !important; border-color: #fff !important; }
.hero.aWhite picture > .btn:hover, .hero.aWhite picture > .btn:active, .hero.aWhite picture > .btn:focus, .hero.aWhite picture > .btn:focus-visible { background: #fff !important; color: #111 !important; border-color: #111 !important; }
.hero.aDark picture > .btn:hover, .hero.aDark picture > .btn:active, .hero.aDark picture > .btn:focus, .hero.aDark picture > .btn:focus-visible { background: #3b6c59 !important; color: #ffffe9 !important; border-color: #ffffe9 !important; }
.hero.aLight picture > .btn:hover, .hero.aLight picture > .btn:active, .hero.aLight picture > .btn:focus, .hero.aLight picture > .btn:focus-visible { background: #ffffe9 !important; color: #3b6c59 !important; border-color: #3b6c59 !important; }
.hero .mainNavBar.fooActive .logo svg { opacity: 0; transition: opacity .3s ease; }
.hero .mainNavBar.fooActive .logo { clip-path: inset(100% 0 0 0);
opacity: 0;
transition: opacity 0s ease;
} .hero .mainNavBar.fooActive .mainNav li a:hover, .hero .mainNavBar.bgGreen .mainNav li a:hover,
.hero .mainNavBar.fooActive .mainNav li a:active, .hero .mainNavBar.bgGreen .mainNav li a:active,
.hero .mainNavBar.fooActive .mainNav li a:focus, .hero .mainNavBar.bgGreen .mainNav li a:focus,
.hero .mainNavBar.fooActive .mainNav li a:focus-visible, .hero .mainNavBar.bgGreen .mainNav li a:focus-visible 
{ color: #ffffe9; }
@media screen and (max-width: 959px) {
.hero .mainNavBar .mainNav li a:hover, .hero .mainNavBar .mainNav li a:active,
.hero .mainNavBar .mainNav li a:focus, .hero .mainNavBar .mainNav li a:focus-visible {
color: #111 !important;
}
.hero .mainNav li:has(a:hover), .hero .mainNav li:has(a:active),
.hero .mainNav li:has(a:focus), .hero .mainNav li:has(a:focus-visible) {  color: #111 !important;
background: #fff !important;
border-color: #111 !important;
}
.hero .mainNavBar.bgWhite .mainNav li:has(a:hover), .hero .mainNavBar.bgWhite .mainNav li:has(a:active),
.hero .mainNavBar.bgWhite .mainNav li:has(a:focus), .hero .mainNavBar.bgWhite .mainNav li:has(a:focus-visible) {
color: #111 !important;
background: #fff !important;
border-color: #111 !important;
}
.hero .mainNavBar.bgBlack .mainNav li:has(a:hover), .hero .mainNavBar.bgBlack .mainNav li:has(a:active),
.hero .mainNavBar.bgBlack .mainNav li:has(a:focus), .hero .mainNavBar.bgBlack .mainNav li:has(a:focus-visible) {
color: #fff !important;
background: #111 !important;
border-color: #fff !important;
}
.hero .mainNavBar.bgLight .mainNav li:has(a:hover), .hero .mainNavBar.bgLight .mainNav li:has(a:active),
.hero .mainNavBar.bgLight .mainNav li:has(a:focus), .hero .mainNavBar.bgLight .mainNav li:has(a:focus-visible) {
color: #3b6c59 !important;
background: #ffffe9 !important;
border-color: #3b6c59 !important;
}
.hero .mainNavBar.bgDark .mainNav li:has(a:hover), .hero .mainNavBar.bgDark .mainNav li:has(a:active),
.hero .mainNavBar.bgDark .mainNav li:has(a:focus), .hero .mainNavBar.bgDark .mainNav li:has(a:focus-visible) {
color: #ffffe9 !important;
background: #3b6c59 !important;
border-color: #ffffe9 !important;
}
.hero .mainNavBar.bgWhite .mainNav li a:hover, .hero .mainNavBar.bgWhite .mainNav li a:active,
.hero .mainNavBar.bgWhite .mainNav li a:focus, .hero .mainNavBar.bgWhite .mainNav li a:focus-visible {
color: #111 !important;
}
.hero .mainNavBar.bgBlack .mainNav li a:hover, .hero .mainNavBar.bgBlack .mainNav li a:active,
.hero .mainNavBar.bgBlack .mainNav li a:focus, .hero .mainNavBar.bgBlack .mainNav li a:focus-visible {
color: #fff !important;
}
.hero .mainNavBar.bgLight .mainNav li a:hover, .hero .mainNavBar.bgLight .mainNav li a:active,
.hero .mainNavBar.bgLight .mainNav li a:focus, .hero .mainNavBar.bgLight .mainNav li a:focus-visible {
color: #3b6c59 !important;
}
.hero .mainNavBar.bgDark .mainNav li a:hover, .hero .mainNavBar.bgDark .mainNav li a:active,
.hero .mainNavBar.bgDark .mainNav li a:focus, .hero .mainNavBar.bgDark .mainNav li a:focus-visible {
color: #ffffe9 !important;
}
.hero .mainNavBar.bgLight .mainNav li { background: #3b6c59; border-color: #ffffe9; }
.hero .mainNavBar.bgDark .mainNav li { background: #ffffe9; border-color: #3b6c59; }
.hero .mainNavBar.bgWhite .mainNav li { background: #111; border-color: #ffffe9; }
.hero .mainNavBar.bgBlack .mainNav li { background: #fff; border-color: #3b6c59; }
.hero .mainNavBar.bgGreen .mainNav li, 
.hero .mainNavBar.fooActive .mainNav li { background: #ffffe9; border-color: #3b6c59; }
.hero .mainNavBar.bgLight .mainNav li a { color: #ffffe9; }
.hero .mainNavBar.bgDark .mainNav li a { color: #3b6c59; }
.hero .mainNavBar.bgWhite .mainNav li a { color: #fff; }
.hero .mainNavBar.bgBlack .mainNav li a { color: #111; }
.hero .mainNavBar.bgGreen .mainNav li a, 
.hero .mainNavBar.fooActive .mainNav li a { color: #3b6c59; }
}
@media screen and (min-width: 960px) {
.hero .mainNavBar.bgWhite .mainNav li a { color: #111 !important; }
.hero .mainNavBar.bgLight .mainNav li a { color: #3b6c59 !important; }
.hero .mainNavBar.bgDark .mainNav li a { color: #ffffe9 !important; }
.hero .mainNavBar.aBlack .mainNav li a { color: #111 !important; }
.hero .mainNavBar.aWhite .mainNav li a { color: #fff !important; }
.hero .mainNavBar.aLight .mainNav li a { color: #ffffe9 !important; }
.hero .mainNavBar.aDark .mainNav li a { color: #3b6c59 !important; } .hero .mainNavBar.bgWhite.aWhite .mainNav li a { color: #111 !important; }
.hero .mainNavBar.bgBlack.aBlack .mainNav li a { color: #fff !important; }
.hero .mainNavBar.bgLight.aLight .mainNav li a { color: #3b6c59 !important; }
.hero .mainNavBar.bgDark.aDark .mainNav li a { color: #ffffe9 !important; }
.hero .mainNavBar.fooActive .mainNav li a { color: #fff !important; }
}.text .container {
float: none;
max-width: 80rem;
margin: 0 auto;
} .text p + h2 { margin-top: 3rem; }
.text h3 { font-family: 'Nunito Sans', sans-serif; }
.text p + h3 { margin-bottom: 1rem; }
.text h4 { margin-bottom: .5rem; }
.text h1 + h3, .text h2 + h3 { margin-top: 0; }
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { margin-bottom: 3rem !important; }     .text ul { margin: 2rem 0 2rem 1.7rem; }
.text p, .text ul { color: #111; } .marker {
font-weight: 800; color: #3b6c59;
} .text.bgBlack p, .text.bgBlack ul, .text.bgDark p, .text.bgDark ul { color: inherit; }
.text.bgBlack a, .text.bgDark a { color: #ffff70; }
.text.bgWhite a, .text.bgLight a { color: #3b6c59; }