header {
    z-index: 50;
    position: relative;
}


#turtle-swim {
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    max-width: 650px;
    z-index: 2;
}

    #turtle-swim lottie-player, #turtle-animation-container {
        width: 100%;
        height: auto;
        max-width: 650px;
    }

#hero-layered-animation {
    position: relative;
}


    #hero-layered-animation .fl-row-content-wrap > .fl-row-content::before {
        content: "";
        background-image: url(https://website.whoi.edu/locness/wp-content/uploads/sites/65/2023/08/top-background-re-top-3.png);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        display: block;
        float: left;
        max-width: 100vw;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: scroll;
        left: 0px;
        right: 0;
        margin: auto;
        background-size: 100% auto;
        z-index: 20;
        min-width: 1450px;
    }

    #hero-layered-animation .fl-row-content-wrap > .fl-row-content::after {
        background-image: url(https://website.whoi.edu/locness/wp-content/uploads/sites/65/2023/08/top-background-sm.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: scroll;
        background-size: cover;
        border-top-width: 1px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-left-width: 0px;
        min-height: 700px;
        min-width: 1450px;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
    }
/******--Anti-Acid---******/
html, body {
    overflow-x: hidden;
}
#hero-layered-animation .fl-row-content-wrap .fl-row-content .fl-col-group.fl-node-64ecbf1ac0380 {
    position: initial;
    width: 100%;
    height: 100%;
}
#anti-acid-holder {
    position: absolute;
    margin: auto;
    width: 400px;
    height: 450px;
    overflow: hidden;
    right: -30px;
    top: 135px;
    z-index: 10;
}

    .anti-acid-container .bubble-container {
        width: 100%;
        height: 100%;
        display: block;
    }

img.anti-acid {
    width: 100%;
    z-index: 5;
    bottom: 0;
    max-width: 350px;
    transform: translate3d(-50%, -100%, 0px);
    opacity: 0;
}

img.bubble {
    width: 100%;
    max-width: 40px;
    z-index: 1;
    bottom: 85px;
    opacity: 0;
}

.bubble, .anti-acid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media only screen and (max-width: 1420px) {

    .fl-node-64e7784925307 .fl-col {
        width: 100%;
        max-width: 700px;
        margin: auto;
        display: block;
        float: none;
    }

    .fl-col.fl-node-64e7784925458.fl-col-small {
        display: none;
    }

    h2 {
    }

    .fl-node-64e7784925307 .fl-col.fl-node-64e778492545a h2 {
        margin-top: 0px;
        padding-top: 0px !important;
        color: #fff;
    }

    .fl-node-64e4dc00af0d4 > .fl-row-content-wrap {
        background-position: center -56% !important;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #062349;
        background-size: auto;
    }
}

@media only screen and (max-width: 1140px) {
    #turtle-swim {
        display: none;
    }
    #anti-acid-holder {
        width: auto;
    }
        .anti-acid-container .bubble-container {
        display: none;
    }
    .anti-acid-container {
        background-image: url(https://website.whoi.edu/locness/wp-content/uploads/sites/65/2023/08/anit-acid-2.png);
        width: 100%;
        max-width: 290px;
        height: 376px;
        min-width: 250px;
        display: block;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

}

@media only screen and (max-width: 990px) {
    .fl-node-58ecee9f2d544 .pp-content-grid-post-image {
        max-width: 300px;
        margin: auto;
        text-align: center;
    }

    .fl-node-58ecee9f2d544 .fl-post-text {
        text-align: center;
    }
    #anti-acid-holder {
        top: 80px;
    }

}

    @media only screen and (max-width: 840px) {
        .fl-page-content {
            padding: 0 0px;
        }
        header .fl-menu-mobile-toggle.hamburger:hover, header .fl-menu-mobile-toggle.hamburger.fl-active {
            color: #00b7bd !important;
            background: transparent !important;
        }

            .fl-page-content .fl-row .fl-row-content-wrap {
                padding-left: 20px;
                padding-right: 20px;
            }

        #anti-acid-holder {
            display: none;
        }

        .fl-col-small:not(.fl-col-small-full-width) {
            max-width: 600px;
            margin-top: 20px;
        }
        footer .fl-col-group .fl-col {
            padding-left: 20px;
            padding-right: 20px;
        }

        @media only screen and (max-width: 780px) {
            #hero-layered-animation {
                margin-top: -40px;
            }
            .fl-node-64dfc2d9abb5b svg#Layer_1 {
                max-width: 400px;
                margin: auto;
                float: none;
                text-align: center;
                display: block;
            }

            .fl-node-64dfc2d9abb5b .fl-col.fl-node-64dfc2d9abb5d {
                margin-top: 0px;
            }

            .fl-col.fl-node-64dfc2d9abb5e.fl-col-small {
                display: none;
            }

            .fl-node-64dfc2d9abb5b > .fl-row-content-wrap {
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .fl-node-64dfc2d9abb5b .fl-node-64dfc2d9abb60 > .fl-module-content {
                margin: auto !important;
                width: auto;
                padding: 0px;
            }

            .fl-builder-content .fl-node-64dfc2d9abb57 {
                width: 50%;
                margin-left: 20px;
            }

                .fl-builder-content .fl-node-64dfc2d9abb57 .fl-photo-content.fl-photo-img-png {
                    float: left;
                    width: 100%;
                    max-width: 360px;
                }

            #hero-layered-animation > .fl-row-content-wrap {
                margin-top: 0px;
                
            }

            .fl-col.fl-node-64dfc2d9abb57.fl-col-small.fl-col-small-custom-width {
                margin-top: 0px;
            }

        }
            @media only screen and (max-width: 640px) {
                #hero-layered-animation .fl-row-content-wrap > .fl-row-content::before {
                    left: initial;
                }

                #hero-layered-animation .fl-row-content-wrap > .fl-row-content::after {
                    min-width: initial;
                }
            }

            @media only screen and (max-width: 600px) {
                #hero-layered-animation {
                    margin-top: 0;
                }
                #hero-layered-animation .fl-row-content-wrap > .fl-row-content::before {
                    min-width: 850px;
                }

                #hero-layered-animation .fl-row-content-wrap > .fl-row-content::after {
                    min-width: 800px;
                }

                #hero-layered-animation h1 {
                    font-size: 36px;
                }

                #hero-layered-animation > .fl-row-content-wrap {
                    overflow: hidden;
                    min-height: initial;
                    padding-top: 120px;
                    padding-bottom: 60px;
                }

                #features h2 br {
                    display: none;
                }
            }