/* get things looking normal */

:root {
    --sb-blue-light: #00bbe2;
    --sb-blue-dark: #2e3192;
    --sb-green: #70b54c;
    --sb-light-green: #c3f3a3;

    --sb-text-primary: #222;

    --sb-max-page-width: 960px;
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol, ul {
    list-style: none;
}

/* end reset */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--sb-text-primary);
}

ol {
    list-style: decimal-leading-zero;
}

ol li {
    margin-left: 2.5em;
    padding-left: 0.5em;
}

/* bulma content overrides */

.content .big p {
    line-height: 1.75em;
}

.content p {
    line-height: 2em;
}

.content h1 {
    color: var(--sb-blue-dark);
    /*font-weight: 100;*/
    font-size: 2.25em;
}

.content h2 {
    font-family: nunito, sans-serif;
    color: var(--sb-green);
    font-weight: bold;
    font-size: 1.5em;
}

.content h1 + h2 {
    margin-top: -0.5em !important;
    margin-bottom: 1.5em;
}

.content h3 {
    font-size: 1.375em;
    color: var(--sb-blue-light);
}

.content .big {
    font-size: 1.25em;
}

/* utility classes */

.sb_inset_image_left {
    width: 50%;
    margin-right: auto;
}

.sb_inset_image_right {
    width: 50%;
    margin-left: auto;
}

.sb_yt_embed {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.sb_masthead {
    position: sticky;
    top: -1px;
    width: 100%;
    background: #fff;
    box-shadow: 0 1em 1em rgba(0,0,0,0.1);

    z-index: 12;

    font-family: nunito, sans-serif;
}

.sb_nav_item_wrapper {
    display: flex;
    align-items: center;
}

.sb_nav_item_wrapper:not(:last-child) {
    margin-right: 0.5em;
}

.sb_nav_item_wrapper a {
    display: inline-block;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.25em;
    color: var(--sb-blue-dark);

    border-radius: 0.5em;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0);

    transition: 0.25s all;
}

.sb_nav_item_wrapper a:hover {
    border-color: var(--sb-blue-light);
}

.sb_nav_item_wrapper a.active {
    background: var(--sb-blue-light);
    color: #fff !important;
}

.sb_masthead .navbar-item img {
    max-height: unset;
    transition: 0.25s all;
}

.sb_masthead .navbar-end div:last-of-type {
    margin-right: 0.5em;
}

.sb_masthead .logo {
    height: 5em;
    padding: 0.5em 0;
}

.sb_masthead.pinned .logo {
    height: 3em;
}

/* end nav items */

#sb_hero {
    position: relative;
    top: 0;
    width: 100%;
    aspect-ratio: 16 / 7;
    background-color: #000;
}

#sb_hero.sub_page {
    aspect-ratio: 16 / 3;
}

#sb_hero .logo {
    position: relative;
    width: 40%;
    max-height: 1em;
    top: 6em;
    margin: 0 auto;
    z-index: 10;
    height: 0;
    opacity: 1;
    transition: 2s all;
}

#sb_hero .logo.init {
    width: 10%;
    opacity: 0;
}

#sb_hero .logo img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-left: -3vw;
    filter: drop-shadow(0 5px 5px rgba(0,0,64,0.75));
    overflow: hidden;
}

#sb_hero .sb_hero_section {
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#sb_hero .sb_hero_section {
    opacity: 0;
    transition: 1s all;
}

#sb_hero .sb_hero_section.show {
    opacity: 1;
}

#sb_hero .sb_hero_section img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#sb_hero .sb_hero_section.initial {
    background-image: url(./img/water-1579915.jpg);

}

#sb_hero .tagline {
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin-top: 1em;
    font-size: 1.75em;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}

#sb_hero .tagline span {
    opacity: 0;
    transition: 1s all;
}

#sb_hero .tagline span.show {
    opacity: 1;
}

#sb_page_body {
    /* min-height: 110vh; */
    margin: 0 auto;
    position: relative;
    z-index: 11;
    background-color: #fafafa;
}

#sb_page_body > main {
    min-height: 110vh;
}

#sb_page_body > section {
    padding-top: 4em;
}

#sb_envirotower_system {
    padding: 3em 0;
    background-image: url(./img/sb_blueprint-02.jpg);
    background-position: bottom left;
    background-size: cover;
}

#sb_introduction {
    padding: 3em 0;
    background-image: url(./img/sb_blueprint-02.jpg);
    background-position: bottom left;
    background-size: cover;

}

#sb_introduction p {
    margin-bottom: 1em;
    line-height: 1.75em;
}

.sb_footer {
    background-color: #333;
    min-height: 15em;
    color: #efefef;
    padding: 2em;
}

.sb_footer a {
    color: #fff;
}

.sb_footer h3 {
    font-weight: 900;
}

.sb_footer p {
    margin-bottom: 1em;
}

.sb_footer strong {
    color: unset;
}

.sb_footer hr {
    background: #777;
    height: 1px;
}

.sb_interactive_aside {
    background-color: var(--sb-blue-dark);
    padding: 0 2em;
    box-shadow: inset 0 0 3em rgba(0,0,0,0.3);
    color: #efefef;
    transition: 0.5s all;
    max-height: 0em;
    overflow: hidden;
}

.sb_interactive_aside.open {
    max-height: 70em;
    padding: 2em;
}


.sb_interaction_columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.sb_interaction_columns p {
    margin-bottom: 1em;
    line-height: 1.5em;
}

.sb_interaction_columns h2 {
    margin-bottom: 1em;
}

.sb_interaction_columns li {
    padding: 0.5em;
    transition: 0.3s all;
    border-radius: 0.5em;
    cursor: pointer;
}

.sb_interaction_columns li:hover {
    background-color: #777;
}

.sb_interaction_columns li.active {
    background-color: #efefef;
    color: #222;
}

.sb_interaction_columns li.active::marker {
    color: #fff;
    font-weight: bold;
}

.sb_benefits_list {
    list-style: disc;
    margin: 1em;
}

.sb_benefits_list li {
    padding: 0.5em 0;
}

.sb_open_interaction {
    line-height: 3em;
    cursor: pointer;
    max-height: 3em;
    opacity: 1;
    transition: 0.5s all;
    overflow: hidden;
    padding: 0 1em;

    font-weight: 900;
    font-family: nunito, sans-serif;
    font-size: 1.5em;
    border-top: 2px solid var(--sb-blue-light);
    border-bottom: 2px solid var(--sb-blue-light);
}

.sb_open_interaction.hidden {
    opacity: 0;
    max-height: 0;
}

.sb_green {
    color: var(--sb-green) !important;
}

.sb_blue_dark {
    color: var(--sb-blue-dark) !important;
}

.sb_blue_light {
    color: var(--sb-blue-light) !important;
}

/* media */
.sb_video_grid {
    margin: 5em 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
}

.sb_video_embed {
    width: 50%;
    aspect-ratio: 16/9;
}

.sb_video_grid .sb_video_embed,
.sb_video_embed.large {
    width: 100%;
}

/* section styles */

.extra_top_margin {
    margin-top: 2em;
}

section.bg_grid_01 {
    background-image: url(img/background_grid_01.webp) !important;
    box-shadow: inset 0 0 3em rgba(4, 13, 66, 0.75) !important;
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;
}


section.sb_text_content {
    padding: 5em 0;
}

section.fill_viewport {
    min-height: 100ch;
}

section.component_next,
section.no_bottom_padding {
    padding-bottom: 1em;
}

section.less_padding {
    padding-top: 1em;
    padding-bottom: 1em;
}

section.sb_text_content img:not(.self_width) {
    width: 100%;
}

section.sb_info_section {
    background-color: #eee;
    box-shadow: inset 0 0 3em rgba(0,0,0,0.6);
    padding: 2em;
}

section div.sb_infographic_container {
    max-width: calc(var(--sb-max-page-width) * 1.2);
    margin: 0 auto;
}

section.sb_text_content.sb_section_accent_01 {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
    background-color: var(--sb-blue-dark);
    box-shadow: inset 0 0 5em rgba(5, 5, 90, 0.7);
    color: #fff;
    font-size: 1.12em;
}

section.sb_text_content.sb_section_notification {
    background: rgb(255, 228, 72);
    padding: 2em 0 !important;
    box-shadow: inset 0 0 5em rgba(130, 130, 0, 0.8);
}

section.sb_text_content.sb_section_notification h1,
section.sb_text_content.sb_section_notification h2 {
    color: #333;
}

section.sb_text_content.sb_section_accent_01 h1,
section.sb_text_content.sb_section_accent_01 strong,
section.sb_text_content.sb_section_accent_01 em {
    color: #fafafa;
}

section.sb_text_content.sb_section_accent_01 div.box strong,
section.sb_text_content.sb_section_accent_01 div.box em {
    color: unset;
}

section.sb_text_content.sb_section_accent_01 div.box h2 {
    color: var(--sb-green);
}

section.sb_text_content.sb_section_accent_01 h2 {
    color: var(--sb-blue-light);
}

section.sb_distributor_cta {
    background: url(img/bg_distributor.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    padding: 5em 0;
    font-size: 1.25em;
    box-shadow: inset 0 0 5em rgba(5, 5, 90, 0.7);
}

section.sb_distributor_cta h1,
section.sb_distributor_cta strong,
section.sb_distributor_cta a {
    color: #fff;
}

section.sb_distributor_cta a {
    text-decoration: underline;
}

aside.sb_page_intro_image {
    padding-top: 5em;
}

aside>img {
    width: 100%;
}

aside + section.sb_text_content {
    padding-top: 0;
}

footer.sb_footer {

}

footer.sb_footer h1 {
    font-size:1.5em;
    line-height:1.25em;
    color:#fff;
    margin-bottom:1.25em;
}

footer.sb_footer img.certs {
    margin-top: auto;
}

footer.sb_footer .sb_footer_columns {
    display: flex;
    justify-content: space-between;
}

footer.sb_footer .sb_footer_columns>div {
    flex: 1;
    padding: 10px;
    padding-right: 2em;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;

}

div.sb_flex_row {
    display: flex;
  }

  div.sb_flex_row p {
    display: block;
  }

  div.sb_gallery_grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(4, 1fr);
  }

  div.sb_gallery_grid p {
    display: block;
    overflow: hidden;
    margin: 0 !important;
    padding: 0.5em;
    aspect-ratio: 1;
    background: #fafafa;
  }

  div.sb_gallery_grid p img {
    object-fit: cover;
    height: 100% !important;
    width: 100% !important;
  }

@media (max-width:1279px) {
    .sb_masthead { font-size: 0.8em !important; }
}

@media (max-width:479px) {

    html {
        font-size: 14px;
    }

    section {
        padding: 1em !important;
    }

    div.sb_gallery_grid { display: block; }
    div.sb_gallery_grid p { margin-bottom: 1em !important; }


    #sb_hero { display: none; }

    .sb_masthead { font-size: 1em !important; }
    .sb_masthead .logo { height: 3em !important; }

    .sb_masthead .navbar-burger { height: 4em; }

    .sb_nav_item_wrapper,
    .sb_nav_item_wrapper a {
        display: block;
    }

    .sb_nav_item_wrapper a {
        border-radius: 0 3em 3em 0;
        margin-right: 1em;
    }

    footer.sb_footer .crawl_left { display: none; }

    footer.sb_footer .sb_footer_columns {
        display: block;

    }

    footer.sb_footer img.certs {
        margin: 2em 0;
    }

    .sb_text_content .column {
        overflow-x: scroll;
    }


}