:root {
    --tranquility-blue: #000c29;
    --tranquility-blue-rgba: rgba(0, 12, 41, 1);
    --vitality-blue: #355973;
    --vitality-blue-rgba: rgba(53, 89, 115, 1);
    --clarity-blue: #a8c7e9;
    --clarity-blue-rgba: rgba(168, 199, 233, 1);
    --supporting-black: #000000;
    --supporting-yellow: #ffc226;
    --supporting-white: #ffffff;
    --arc-size: var(--arc-size-custom, clamp(1rem, 5.5vw, 6.4rem));
    --arc-mask: radial-gradient(60vw calc(var(--arc-size) * 2) at 50% calc(100% + var(--arc-size)), #0000 100%, #000);
    --bs-border-radius: 1.00rem;
}
#svgstorage{position: absolute; bottom: 0;}

body {
    font-size: 17px;
    margin: 0;
    padding: 0;
    background-color: var(--supporting-white);
}

main {
    min-height: 500px;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

section {
    position: relative;
    padding-bottom: 50px;
    /* z-index: 0; */
}

.img-full {
    width: 100%;
}
.review-text{
    color: fuchsia;
}
.review-bg{
    background-color: fuchsia;
}

b,
strong {
    font-weight: 700;
}
ol,ul{padding-left: 1rem;}

h1,
h2,
h3,
h4,
h5,
h6,
.subhead {
    font-family: "termina", Arial, sans-serif;
    font-weight: 200;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 2.1vw, 2.3rem);
    /* font-size: 2.3rem; */
    /*AMY SAID DO NOT CHANGE TITLE SIZE font-size: 1.5rem; */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    color: var(--vitality-blue);
}

a:link,
a:visited,
a:hover,
a:active {
    color: var(--vitality-blue);
    text-decoration: underline;
}


.bg-tblue a:link,
.bg-tblue a:visited,
.bg-tblue a:hover,
.bg-tblue a:active {
    color: var(--clarity-blue);
    text-decoration: underline;
}

.om-links a:link,
.om-links a:visited{
    color: var(--supporting-black);
    text-decoration: underline;
    transition: 0.3s;
    font-weight: 300;
}
.om-links a:hover,
.om-links a:active {
    color: var(--vitality-blue);
    text-decoration: underline;
}

@media (min-width: 992px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .subhead {
        font-size: 2.3rem;
    }
}





.headline {
    font-family: "termina", Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
}

.pre-headline {
    font-family: "termina", Arial, Helvetica, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 0.88rem;
    margin-top: 50px;
}

.bg-vblue .pre-headline,
.bg-tblue .pre-headline {
    color: #fff;
    margin-top: 35px;
}

.minor-title,
.minor-title-black{
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0.75rem;
    margin-top: 1.50rem;
    letter-spacing: 0.1rem;
}

.upper {
    text-transform: uppercase;
}

.spaced {
    margin-top: 2.0rem;
    margin-bottom: 2.5rem;
}

.minor-title-black {
    color: var(--supporting-black);
}
.text-tblue{
    color: var(--tranquility-blue);
}
.text-vblue{
    color: var(--vitality-blue);
}
.text-cblue{
    color: var(--clarity-blue);
}
.text-black{
    color: var(--supporting-black);
}

.border-tblue{border: solid thin var(--tranquility-blue);}

@media (min-width: 992px) {
    .pre-headline.lifted {
        margin-top: 60px;
        margin-bottom: 40px;
    }
}

/* NAVIGATION */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #topBar > .container,
    nav.navbar > .container{
        max-width: 100% !important;
    }
}

#topBar {
    border-bottom: solid 1px #d2d2d2;
    display: none;
    padding-top: 15px;
}

@media (min-width: 992px) {

    #topBar {
        display: block;
    }
}

#topBar>div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}


#promoCode {
    max-width: 230px;
}

#promoCode #error_message {
    display: none;
    position: absolute;
    z-index: 1;
    max-width: 230px;
    font-size: 14px;
}

#topBar #topBarNav .breadcrumb-item {
    position: relative;
}

#topBar #topBarNav .breadcrumb-item::before {
    color: #757575;
}

#topBar #topBarNav .breadcrumb-item a {
    color: #757575;
    text-decoration: none;
    font-size: 15px;
    transition: .3s;
    font-weight: 400;
}

#topBar #topBarNav .breadcrumb-item a:hover {
    color: var(--vitality-blue);
    transition: .3s;
}

#topBar #topBarNav .breadcrumb-item.active {
    color: var(--tranquility-blue);
}
#topBar #topBarNav .breadcrumb-item.active a {
    color: var(--tranquility-blue);
}

#topBar #topBarNav .breadcrumb-item.active::after {
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--vitality-blue);
    display: block;
    position: absolute;
    bottom: -16px;
}

.input-with-button {
    position: relative;
    display: inline-block;
    /* Or block, depending on layout needs */
}

.input-with-button button {
    position: absolute;
    right: 4px;
    /* Align to the right edge */
    top: 50%;
    transform: translateY(-50%);
    /* Align to the top edge */
    height: 100%;
    /* Make button height same as input */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    background-color: var(--tranquility-blue);
    color: var(--supporting-white);
    font-size: 18px;
    font-weight: 300;
    padding: 0 0 3px 3px;
    margin: 0;
    line-height: 17px;
    border:none;
}
.input-with-button button:hover {
    animation: bounceRight 1s infinite; /* Apply the animation */
}

.input-with-button input {
    padding-right: 40px;
    /* Adjust based on button width */
    border-radius: 20px;
    height: 32px;
    border-color: var(--tranquility-blue);
    color: var(--tranquility-blue);
}

.input-with-button input::-webkit-input-placeholder {
    color: var(--tranquility-blue);
}

.input-with-button input:-moz-placeholder {
    color: var(--tranquility-blue);
}

.input-with-button input::-moz-placeholder {
    color: var(--tranquility-blue);
}

.input-with-button input:-ms-input-placeholder {
    color: var(--tranquility-blue);
}

.input-with-button input::placeholder {
    color: var(--tranquility-blue);
}
#mobilePromoWrapper #promoCode{margin: auto; max-width: 300px;}
#mobilePromoWrapper .input-with-button{
    max-width: 300px;
    width: 100%;

}
#mobilePromoWrapper .input-with-button input{
    height: 44px;
    width: 100%;
}

/* Ensure the dropdown can expand full-width */
nav.navbar {
    padding: 58px 0;
    border-bottom: solid 1px #d2d2d2;
}


    nav .navbar-brand img{
    height: 58px;
}


/* Ensure Bootstrap doesn't interfere */
#mobileMenuToggle.hamburger {
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger box (invisible wrapper) */
.hamburger-box {
  width: 24px;
  height: 16px;
  position: relative;
  display: inline-block;
}

/* Hamburger bars */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: #000; /* Change to #fff if navbar is dark */
  position: absolute;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Positioning the bars */
.hamburger-inner {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after {
  bottom: -8px;
}

/* Animate to X */
.hamburger.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner::before {
  transform: rotate(90deg);
  top: 0;
}

.hamburger.is-active .hamburger-inner::after {
  transform: rotate(90deg);
  bottom: 0;
}

#searchDropdown::before,
#searchDropdownMobile::before
 {
  font-family: "bootstrap-icons";
  content: "\F52A";
  font-size: 1.2rem;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease;
  padding: 2px 6px;
  text-align: center;
  color: var(--tranquility-blue);
}
#searchDropdown[aria-expanded="true"]::before, 
#searchDropdownMobile[aria-expanded="true"]::before {
  font-family: "bootstrap-icons";
  content: "\F659"; /* bi-x Unicode */
  background-color: #e0e0e0;
  border-radius: 50%;
  color: var(--tranquility-blue);
}
.search-input-wrap{width: 70%; display: block;margin: auto;}
@media (max-width: 992px) {
#searchDropdown ~ div, #searchDropdownMobile ~ div{border-radius: 0;}
.search-input-wrap #q{height: 50px; border-radius: 30px;}
}

@media (min-width: 992px) {

    #searchDropdownMobile{display: none;}
    .navbar .dropdown.position-relative .dropdown-menu {
    position: absolute;
    /* break out of parent overflow */
    top: 100%;
    /* sit directly under the navbar */
    left: 0;
    right: 0;
    border: none;
    /* optional styling */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .dropdown-menu[data-bs-popper]{
        top: 98%;
    }


    .navbar-nav{display: flex; align-items: center;}
    .navbar-nav li a{text-decoration: none;}
    #mainNavbar{background-color: transparent;}
    #mainNavbar ul:nth-of-type(1).navbar-nav > li > a{font-size: 25px; color: var(--tranquility-blue); font-weight: 600; position: relative;}
    #mainNavbar ul:nth-of-type(2).navbar-nav {width: 50%; justify-content: right;}
    #mainNavbar ul:nth-of-type(2).navbar-nav > li > a{font-size: 16px; color: var(--supporting-black); font-weight: 400;}
    #mainNavbar ul:nth-of-type(2).navbar-nav > li > a.btn-rnd{color: var(--supporting-white); font-weight: 700; padding-left: 20px; padding-right: 20px; margin: auto;}
    #hotTubsDropdown{padding-left: 0px;}

    #mainNavbar .megamenu .minor-linklist{padding-left: 0;list-style: none; margin-top: 20px;}
    #mainNavbar .megamenu .minor-linklist li a{padding-left: 0;font-size: 16px;}
    #mainNavbar .megamenu .minor-linklist li a i{margin-left: 10px; font-size: 21px;}
    #mainNavbar .megamenu .minor-linklist li a:link,
    #mainNavbar .megamenu .minor-linklist li a:visited,
    #mainNavbar .megamenu .minor-linklist li a:hover,
    #mainNavbar .megamenu .minor-linklist li a:active{color: var(--supporting-black); background-color: transparent;}
    #mainNavbar .megamenu .product{width: 275px; margin-top: 20px; margin-bottom: 40px; margin-right: 20px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;}
    #mainNavbar .megamenu .product.ss{width:400px;}
    #mainNavbar .megamenu .product img:nth-of-type(1){width: 100%; display: block; margin: 0 auto 0 auto;}
    #mainNavbar .megamenu .product img:nth-of-type(2){width: 50%; display: block; margin: 0 auto 0 auto;}
    #mainNavbar .dropdown-menu{border-top: solid 1px #d2d2d2;}
    .search-input-wrap{width: 70%; }


    .megamenu{      
        position: absolute;
        top: 98%;
        left: 0;
        z-index: -1;
        display: block;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s;
    }
    .megamenu.show{    
        z-index: 9999;  
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
    .dropdown-toggle:focus {
    outline: none; /* fallback for older browsers */
    box-shadow: none; /* remove Bootstrap's focus shadow */
    }

    .dropdown-toggle:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    }



    nav .navbar-brand img{
    height: 85px;
    }
    .dropdown-menu {
        border: none;
        border-radius: 0;
    }

    .dropdown-toggle.show::before {
        content: '';
        background-color: var(--vitality-blue);
        width: 100%;
        height: 3px;
        position: absolute;
        top: 257%;
        left: 0;
        z-index: 1001;
    }
    #swimSpasDropdown.dropdown-toggle.show::before,
    #hotTubsDropdown.dropdown-toggle.show::before{
        top: 200%;
    }
    .dropdown-toggle::after {
        transition: transform 0.3s ease-in-out;
    }
    .dropdown-toggle.show::after {
        transform: rotate(-180deg);
    }

    [aria-labelledby="twoColDropdown"].dropdown-menu {
        min-width: 30rem;
        left: -190%;
        top: 263%;
    }
    .dropdown-menu .dropdown-header{
        font-size: 16px;
        font-weight: 600;
        color: var(--supporting-black);
    }
    .dropdown-menu a{
        color: var(--supporting-black);
        font-size: 16px;
    }

    #mainNavbar ul:nth-of-type(2).navbar-nav li a.btn-rnd{font-size: 15px;}

}

@media (min-width: 1400px) {
#mainNavbar ul:nth-of-type(2).navbar-nav li {padding-right: 2%;}
#mainNavbar ul:nth-of-type(2).navbar-nav li:last-of-type {padding-right: 0;}
#mainNavbar ul:nth-of-type(2).navbar-nav li a.btn-rnd{font-size: 17px;}
}

#hottubmegamenudropdown {
    width: 100vw;
}




/* Style the horizontal scroller */
.product-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.product-scroll::-webkit-scrollbar {
    height: 6px;
}

.product-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}


@keyframes bounceRight {
    0%, 100% {
        right: 4px; 
        animation-timing-function: ease-in; 
    }
    25% {
        right: 5px;
        animation-timing-function: ease-out; 
    }    
    75% {
        right: 3px;
        animation-timing-function: ease-out; 
    }
}@keyframes wiggle {
    0%, 100% {
        transform: rotate(0);
        animation-timing-function: ease-in; 
    }
    25% {
        transform: rotate(45deg);
        animation-timing-function: ease-out; 
    }
    50% {
        transform: rotate(-45deg);
        animation-timing-function: ease-out; 
    }
}
/* //NAVIGATION */
/* MOBILE NAVIGATION */
        :root {
            --header-color: var(--color-silver);
            --mm-size: calc(100% - 150px);
            --mm-min-size: calc(100% - 150px);
            --mm-max-size: 100%;
        }

        .mm-wrapper__blocker {
            background: none;
        }

        .mm-menu {
            --mm-color-background: #fff;
        }

        .mm-navbars--top {
            border-bottom: none !important;
        }

        .mm-navbar {
            font-weight: bold;
        }

        .mm-navbar input {
            text-align: center;
        }

        .mm-navbar:first-child {
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .mm-panels {
            --mm-color-background: rgb(255 255 255 / 15%);
        }

        .mm-panels>.mm-panel:after {
            content: none;
            display: none;
        }

        .mm-panel--parent {
            transform: translateX(-100%);
        }

        .mm-listview {
            padding-top: 20px;
            font-size: 16px;
        }

        .mm-listitem:after {
            left: 0;
        }

        .mm-listitem:last-child:after {
            content: none;
            display: none;
        }

        .mm-listitem a,
        .mm-listitem span {
            text-align: center;
            padding-right: 20px !important;
            font-size: 24px;
            font-weight: 600;
            color: var(--tranquility-blue);
            padding: 15px 0;
        }

        .mm-navbar {
            background-color: #fff;
        }

        .mm-navbar .mm-navbar__title {
            display: block;
            text-align: left;
            background-color: #fff;
        }
        .mm-navbar .mm-navbar__title span{
            color: var(--tranquility-blue);
        }

        #panel-menu .mm-navbar {
            display: none;
        }

        .mm-listitem::after {
            border-bottom-width: 1px;
            width: 90%;
            margin: auto;
            border-color: #d2d2d2;
        }

        .mm-btn--next::after,
        .mm-btn--prev::before {
            border: 1px solid var(--tranquility-blue);
            border-bottom: none;
            border-right: none;
            height: 11px;
            width: 11px;
        }

        .mm-btn--next::after {
            inset-inline-start: 200px;
        }

        .mobileDenseList .header,
        .mobileDenseList .header a {

            font-size: 16px;
            font-weight: 600;
            color: var(--supporting-black);
        }

        .mobileDenseList a {
            color: var(--supporting-black);
            font-size: 16px;
        }

        .mm-menu .btn-rnd {
            max-width: 300px;
            width: 95%;
            margin: 13px auto;
            font-weight: 700;
        }

        .mobileTubMenu.mm-listview a img:nth-of-type(1) {
            max-width: 246px;
            margin: auto;
            display: block;
            width: 100%;
        }

        .mobileTubMenu.mm-listview a img:nth-of-type(2) {
            width: 100%;
            height: 100%;
            max-width: 125px;
            max-height: 43px;
            margin: 5px auto 45px;
            display: block;
        }
/* //MOBILE NAVIGATION */


.draggable.dragging {
    cursor: grabbing
}

.draggable.active {
    cursor: grabbing;
}

/* Prevent text/image selection inside draggable areas */
.draggable,
.draggable * {
    user-select: none;
    -webkit-user-drag: none;
}

.draggable {
    overflow-x: auto;
    cursor: grab;
    scroll-behavior: smooth;
    user-select: none;
    /* prevent text‐selection while dragging */
}

.draggable.active {
    cursor: grabbing;
}

/* optional: hide native scrollbar for a cleaner look */
.draggable::-webkit-scrollbar {
    display: none;
}

.draggable {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


p,
ul li,
ol li,
span,
figcaption,
a,
table tr th,
table tr td,
form label,
form select {
    font-family: "Titillium Web", Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 17px;
}

footer {
    border-top: solid thin #ffffff46;
}

footer.bg-tblue a:link,
footer.bg-tblue a:visited {
    color: var(--supporting-white);
    text-decoration: none;
    transition: .3s;
}

footer.bg-tblue a:hover,
footer.bg-tblue a:active {
    color: var(--clarity-blue);
    text-decoration: underline;
}

footer .col:last nav:last-of-type a {
    font-weight: 700;
}

footer ul li.list-header,
.list-header {
    font-weight: 600;
    color: var(--clarity-blue);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

ul.bold-list li,
ul.bold-list li a,
ol.bold-list li,
ol.bold-list lia a {
    font-weight: 600;
    color: var(--clarity-blue);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

footer nav ul {
    padding-left: 0px;
}

footer nav ul li {
    font-size: 16px;
    list-style: none;
    line-height: 31px;
}

footer nav ul li a {
    text-decoration: none;
    font-size: 16px;
}


@media (min-width: 992px) {
    footer div:nth-child(3) div:nth-child(4) {
        border-right: solid thin rgba(255, 255, 255, 0.25);
    }

    footer div:nth-child(3) div:nth-child(5) nav {
        margin-left: 30px;
    }
}

footer small {
    font-size: 11px;
}

footer .social {
    justify-content: center;
}

footer .social a {
    text-decoration: none;
    width: 35px;
    margin: 40px 10px 20px;
}

footer .btn-rnd {
    width: 80%;
}


#breadcrumbNav {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    #breadcrumbNav {
        justify-content: start;
    }
}

.awards {
    text-align: center;
    margin: 0px auto
}

.awards a:link,
.awards a:visited,
.awards a:hover,
.awards a:active {
    text-decoration: none;
}

.awards span {
    display: inline-block;
    width: 100%;
    max-width: 150px;
}

.awards span img {
    display: inline-block;
    width: 100%;
}

.awards span p {
    text-transform: uppercase;
    color: #939598;
    display: inline-block;
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 1px
}

@media (min-width: 992px) {
    footer .social {
        border-bottom: none;
    }

    footer .social a {
        width: 25px;
        margin: auto
    }
}

footer .social a img {
    width: 100%;
    height: auto;
}

footer figure.usa {
    width: 100%;
    max-width: 315px;
    margin-left: auto;
    margin-right: auto;
}

footer figure.usa img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}

footer figure.usa figcaption {
    max-width: 240px;
    width: 100%;
    font-size: 15px;
}


.text-center-mobile {
    text-align: center;
}

@media (min-width: 992px) {
    .text-center-mobile {
        text-align: left;
    }

    .text-center-desktop {
        text-align: center;
    }
}

.abs-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
}

/* Filter for reversing logos */
.filter-white {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(49deg) brightness(1000%) contrast(103%);
}

.bg-white-wave {
    background-image: url('/img/white-wave-background-modelpage.png');
    background-repeat: no-repeat;
    background-position: left 40% top;
    background-size: 290%;
}
.bg-white-wave-water-split {
  background-image: 
    url('/img/water-split-left.png'),
    url('/img/water-split-right.png'),
    url('/img/white-wave-background-modelpage.png');
  background-position: 
    bottom left,
    bottom right,
    left 40% top;
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  background-size: 
    30%,
    30%,
    290%;
}

@media (min-width: 768px) {
    .bg-white-wave {
        background-position: center top;
        background-size: contain;
        min-height: 400px;
    }

    .bg-white-wave-water-split {
  background-image: 
    url('/img/water-split-left.png'),
    url('/img/water-split-right.png'),
    url('/img/white-wave-background-modelpage.png');
  background-position: 
    bottom left,
    bottom right,
    center top;
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  background-size: 
    30%,
    30%,
    contain;
}
}

.bg-tblue {
    background-color: var(--tranquility-blue);
    color: var(--supporting-white);
}

.bg-vblue {
    background-color: var(--vitality-blue);
    color: var(--supporting-white);
}
.bg-cblue {
    background-color: var(--clarity-blue);
    color: var(--tranquility-blue);
}

.bg-black {
    background-color: var(--supporting-black);
    color: var(--supporting-white);
}

.tblue-text{color: var(--tranquility-blue) !important;}
.vblue-text{color: var(--vitality-blue) !important;}
.cblue-text{color: var(--clarity-blue) !important;}
.black-text{color: var(--supporting-black) !important;}
.white-text{color: var(--supporting-white) !important;}
.yellow-text{color: var(--supporting-yellow) !important;}

.bg-tblue h1,
.bg-tblue h2,
.bg-tblue h3,
.bg-tblue h4,
.bg-tblue h5,
.bg-tblue h6,
.bg-vblue h2,
.bg-vblue h3,
.bg-vblue h4,
.bg-vblue h5,
.bg-vblue h6,
.bg-black h2,
.bg-black h3,
.bg-black h4,
.bg-black h5,
.bg-black h6 {
    color: var(--clarity-blue);
}

.bg-white {
    background-color: var(--supporting-white);
    color: var(--tranquility-blue);
}

.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: var(--vitality-blue);
}


.bg-water {
    background-image: url('/img/top-of-water-bg.png');
    background-repeat: no-repeat;
    background-position: center bottom 100px;
    background-size: contain;
    padding-bottom: 300px;
}

.bg-water-split {
    background-image: url(/img/water-split-left.png), url(/img/water-split-right.png);
    background-position: bottom left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: 30%;
}

@media (min-width: 992px) {
    .bg-water {
        background-position: center bottom;
    }
}







.scroll-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* hide native scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    cursor: grab;
}

.scroll-row.dragging {
    cursor: grabbing;
}

.scroll-row::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}


@media (min-width: 992px) {
    .scroll-row {
        flex-wrap: wrap;
        overflow-x: auto;
        cursor: auto;
    }

    .scroll-row.dragging {
        cursor: auto;
    }
}

.arrow__indicator,
.arrow-scroll-indicator {
    display: none;
    position: absolute;
}


.arrow-scroll-indicator-wrapper {
    position: relative;
    text-align: center;
}

.arrow-scroll-indicator-wrapper .arrow-scroll-indicator,
.arrow-scroll-indicator-wrapper .arrow-scroll-track {
    display: none;
}

#modelTabsContent .arrow-scroll-track {
    max-width: 91%;
}

.arrow-scroll-indicator-wrapper>a {
    letter-spacing: 0.1rem;
    text-align: center;
}

.arrow-scroll figure a {
    text-decoration: none;
}

.arrow-scroll figure figcaption {
    margin-top: 15px;
    font-size: 18px;
    color: var(--tranquility-blue);
    font-weight: 600;
}

/* Arrow Scroll */
@media (min-width: 992px) {

    .arrow-scroll-indicator-wrapper .arrow-scroll-indicator {
        display: flex;
    }

    .arrow-scroll-indicator-wrapper .arrow-scroll-track {
        display: block;
    }

    .arrow-scroll-indicator-wrapper>a {
        position: absolute;
        right: -30px;
        bottom: -10px;
        background-color: var(--supporting-white);
        z-index: 2;
        padding: 5px 10px;
    }

    .arrow-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
        position: relative;
        padding-bottom: 25px;
        /* white-space: nowrap; */
    }



    .arrow-scroll-track {
        bottom: 19px;
        /* half of padding-top */
        height: 2px;
        background-color: #dee2e6;
        /* Bootstrap gray-200 */
        left: 0;
    }

    .bg-tblue .arrow-scroll-track,
    .bg-cblue .arrow-scroll-track,
    .bg-black .arrow-scroll-track {
        background-color: var(--clarity-blue);
    }

    .bg-vblue .arrow-scroll-track {
        background-color: #d2d2d250;
    }

    .arrow__indicator,
    .arrow-scroll-indicator {
        width: 32px;
        height: 32px;
        background-color: var(--tranquility-blue);
        color: var(--supporting-white);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .bg-tblue .arrow-scroll-indicator,
    .bg-cblue .arrow-scroll-indicator,
    .bg-black .arrow-scroll-indicator,
    .bg-vblue .arrow-scroll-indicator {
        background-color: var(--supporting-white);
        color: var(--tranquility-blue);
    }


    .arrow-scroll-indicator {
        bottom: -13px;
        will-change: transform;
        transition: transform 0.1s ease-out;
            cursor: grab;
    }


    .arrow-scroll-indicator.no-transition {
        transition: none !important;
    }
        
    .arrow__indicator--next {
        position: absolute;
        right: -16px;
        top: 50%;
        cursor: pointer;
    }
    .arrow__indicator--prev {
        position: absolute;
        left: -16px;
        top: 50%;
        cursor: pointer;
    }

    .scroll-container {
        padding-top: 30px;
        height: 200px;
    }


}
/* END Arrow Scroll */


.caro.draggable,
.product-scroll.draggable,
.arrow-scroll-indicator {
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, scroll-position;
    touch-action: auto;
}

/* Required to make scrolling horizontal in chrome not feel snappy or rubber bandy */

  .caro.draggable.dragging,
  .product-scroll.draggable.dragging {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    cursor: grabbing;
  }


.caro.draggable.dragging, .product-scroll.draggable.dragging{
    scroll-snap-type: none !important;
}
/* Disable UA pan/selection during drag and prevent scroll-snap fighting */
.arrow-scroll-wrapper.dragging .caro.draggable,
.arrow-scroll-wrapper.dragging .product-scroll.draggable {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    cursor: grabbing;
}


.arrow-scroll-indicator {
  will-change: transform; /* promote to its own layer */
}


.line-cards .card {
    scroll-snap-align: center;
    border: transparent;
}

.line-cards .card img:first-of-type {
    margin: 25px auto;
    display: block;
    width: 100%;
    max-width: 180px;
    max-height: 70px;
    min-height: 65px;
}

.line-cards .card img:nth-of-type(1) {
    margin-bottom: 25px;
}

.line-cards .card p {
    margin: auto;
    width: 85%;
}

.card.premium-radial {
    background: var(--supporting-black);
    background: radial-gradient(circle at 50% 200%, rgb(0, 0, 0) 40%, rgb(23, 23, 23) 80%, rgb(49, 49, 49) 86%, rgb(0, 0, 0) 1%, rgb(0, 0, 0) 89%, rgb(0, 0, 0) 100%);
    color: var(--supporting-white);
}

.card.tranquility-radial {
    background: var(--tranquility-blue);
    background: radial-gradient(circle at 50% 200%, rgba(53, 89, 115, 1) 40%, rgba(0, 12, 41, 1) 85%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
    color: var(--supporting-white);
}

.card.clarity-radial {
    background: var(--clarity-blue);
    background: radial-gradient(circle at 50% 200%, rgba(255, 255, 255, 1) 40%, rgb(168, 199, 233) 85%, rgb(255, 255, 255) 85%, rgb(255, 255, 255) 100%);
    color: var(--tranquility-blue);
    
}

.tranquility-radial-arc {
    height: 500px;
    position: absolute;
    z-index: -1;
    display: block;
    min-width: 3200px;
    background-color: transparent;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    background: var(--tranquility-blue);
    background: radial-gradient(circle at 50% 550%, rgb(0, 12, 41) 75%, rgb(11, 26, 62) 85%, rgb(0, 12, 41) 85%, rgb(0, 12, 41) 100%);
    color: var(--supporting-white);
}

.card.img-card {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    min-height: 365px;
    overflow: hidden;
}

.card.img-card::after {
    content: '';
    background: var(--supporting-black);
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%);
    height: 100%;
}

.card.img-card .btn-rnd,
.card.img-card .card-bottom-text {
    white-space: nowrap;
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.card.img-card .card-bottom-text {
    bottom: 0px;
    color: var(--supporting-white);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card.link-card {
    text-decoration: none;
    min-height: 150px;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    color: var(--tranquility-blue);
}

.sm-links .card.link-card{
    text-transform: uppercase;
    background-color: transparent;
    border: solid 2px var(--tranquility-blue);
    font-size: 21px;
    font-weight: 600;
    padding: 25px;
}

.card.link-card img {
    margin: auto;
    max-width: 250px;
    max-height: 80px;
    padding: 0px 10px;
}

@media (min-width: 992px) {
    .card.link-card {
        font-size: 28px;
    }
}

#hot-tub-filters fieldset {
    position: relative;
}

#hot-tub-filters fieldset label {
    font-weight: 400;
    text-transform: uppercase;
    margin-left: 12px;
    font-size: 14px;
}

#hot-tub-filters select {
    background-color: var(--supporting-white);
    color: var(--tranquility-blue);
    border: 1px solid var(--tranquility-blue);
    border-radius: 25px;
    padding: 8px 35px 8px 12px;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#hot-tub-filters fieldset i {
    color: var(--tranquility-blue);
}

#hot-tub-filters fieldset i {
    top: 45%;
}

#hot-tub-filters fieldset i.bi-sliders {
    top: 60%;
}

@media (min-width: 992px) {
    #hot-tub-filters select {
        background-color: var(--tranquility-blue);
        color: white;
        border: 1px solid white;
    }

    #hot-tub-filters fieldset i {
        color: var(--supporting-white);
    }
}

#hot-tub-filters select option {
    font-weight: 600;
    text-transform: uppercase;
}

#filterOffcanvas {
    height: 70vh;
    top: 100px;
}

#filterOffcanvas .offcanvas-footer {
    position: relative;
}

#filterOffcanvas .offcanvas-footer .btn-close {
    position: absolute;
    bottom: 50%;
    right: 27px;
}

.product-filter-card,
.white-card {
    border: none;
    border-radius: 15px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}
.white-card{
    background-color: var(--supporting-white);
    height: 100%;
    padding: 25px;
}
.white-card p, .white-card h2 {
    color:var(--tranquility-blue);
}
.white-card >div {
    margin: auto;
    width: 90%;
}
.white-card .white-card-img{
    width: 100%;
    height: 200px;
    text-align: center;
}
.white-card .white-card-img img{
    width: 100%;
    height: 100%;
    max-width: 320px;
}

.product-filter-card img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
}

.product-filter-card div {
    padding: 15px;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.product-filter-card div p {
    width: 60%;
    margin: 10px auto;
}

.stretch-col {
    align-self: stretch;
    height: auto;
}



a.btn-rnd:link,
a.btn-rnd:visited,
a.btn-rnd:hover,
a.btn-rnd:active {
    text-decoration: none;
}

.btn-rnd {
    border: solid thin;
    border-radius: 20px;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: inline-block;
    margin: 15px auto 30px;
    letter-spacing: 0.1rem;
}

.btn-rnd.tblue {
    border-color: var(--tranquility-blue);
    background-color: var(--tranquility-blue);
    color: var(--supporting-white) !important;
}



.btn-rnd.white {
    border-color: var(--tranquility-blue);
    background-color: var(--supporting-white);
    color: var(--tranquility-blue) !important;
}

.btn-rnd.reverse {
    border-color: var(--tranquility-blue);
    background-color: var(--supporting-white);
    color: var(--tranquility-blue) !important;
}

.btn-rnd.transparent-white {
    border-color: var(--supporting-white);
    background-color: transparent;
    color: var(--supporting-white) !important;
}

.btn-rnd.transparent-tblue {
    border-color: var(--tranquility-blue);
    background-color: transparent;
    color: var(--tranquility-blue) !important;
}


.hemi-bottom,
.hemi-top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1.3);
    width: 1850px;
    height: auto;
}

.hemi-bottom {
    bottom: -1px;
}

.hemi-top {
    bottom: 99%;
}

.hemi-bottom.tblue path,
.hemi-top.tblue path {
    fill: var(--tranquility-blue);
}
.hemi-bottom.vblue path,
.hemi-top.vblue path {
    fill: var(--vitality-blue);
}.hemi-bottom.cblue path,
.hemi-top.cblue path {
    fill: var(--clarity-blue);
}
.hemi-bottom.black path,
.hemi-top.black path {
    fill: var(--supporting-black);
}

.hemi-bottom.white path,
.hemi-top.white path {
    fill: var(--supporting-white);
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {

    .hemi-bottom,
    .hemi-top {
        transform: translateX(-50%) scaleY(1);
        width: 2000px;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {

    .hemi-bottom,
    .hemi-top {
        width: 140%;
    }
}


.circle-over-hemi{position: absolute; width: 100%; height: 100%; max-width: 300px; max-height: 300px; bottom: 0; z-index: 10;}
.circle-over-hemi img{object-fit:cover;border-radius:50%;width:100%;display:block;height:100%;border:solid 20px white;}

.hero-bg-img {
    position: relative;
    max-width: 100%;
    background: bottom center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg-img {
    height: 65vh;
    min-height: 400px;
    max-height: 700px;
}

.hero-bg-img.hero-lg {
    height: 100vh;
    min-height: 400px;
    max-height: 585px;
}

.branded-hero{
    display: flex;
    width: 100%;
    height: 300px;
    margin: auto;  
    justify-content: center;
    background-position: top center;
    background-size: 250%;
    background-repeat: no-repeat;
    align-items: center;
}
.branded-hero img{
    width: 100%;
    max-width: 400px;
    max-height: 200px;
}

.hero-bg-img.homepage {
    background: bottom 90px center / cover no-repeat;
}

@media (min-width: 992px) {
.branded-hero{
    background-size: cover;
}
    .hero-bg-img.hero-lg {
        height: 77vh;
        min-height: 800px;
        max-height: 100%;
    }
    .hero-bg-img.homepage {
    background: bottom 0px center / cover no-repeat;
}

    .hero-bg-img {
        height: 100vh;
        background: bottom 50px center / cover no-repeat;
    }

}

.hero-bg-img.homepage h1 {
    font-family: "Titillium Web", Arial, sans-serif;
    text-align: center;
    color: var(--supporting-white);
    text-transform: capitalize;
    position: absolute;
    top: 45px;
    left: 50%;
    font-size: 52px;
    width: 100%;
    max-width: 300px;
    transform: translateX(-50%);
    margin-top: 0px;
}

.hero-bg-img.homepage h1 strong {
    font-weight: 700;
}

.hero.rounded {
    margin-bottom: 25px;
}

@media (min-width: 992px) {
    .hero-bg-img.homepage h1 {
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    .hero-bg-img.homepage {
        background-position: bottom 0px center;
    }
}

.bg-tblue.hero-captioned {
    padding-top: 50px;
}

.hero-captioned p {
    margin: 30px auto;
    width: 100%;
    max-width: 800px;
}


.overlap {
    min-height: 200px;
    margin-top: -100px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.overlap .hemi,
.overlap::before {
    content: "";
    height: 150px;
    width: 105%;
    border-radius: 50%;
    position: absolute;
    top: 87px;
    left: 50%;
    z-index: 20;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-50%, -50%);
}

.overlap.tblue::before {
    background-color: var(--tranquility-blue);
}

.overlap.white::before {
    background-color: var(--supporting-white);
}

.overlap.black::before {
    background-color: var(--supporting-black);
}


.hemi-mask::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    /* Reduce width to soften side curves */
    height: 150px;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
}

.hemi-mask.tblue::after {
    background: var(--tranquility-blue);
}

.hemi-mask.white::after {
    background: var(--supporting-white);
}


.hero-bg-img .content {
    max-width: 1000px;
    text-align: center;
}

.img-overhang,
.ss-img-overhang {
    position: relative;
    left: -20%;
    width: 100%;
    top: 0%;
    margin-top: 25px;
}

@media (min-width: 992px) {

    .img-overhang {
        left: -50%;
        width: 150%;
        top: 20%;
        z-index: -1;
    }
        .ss-img-overhang {
        left: -25%;
        width: 125%;
        top: 20%;
        z-index: -1;
    }

    
}

.arc {
    clip-path: url(#arc);
}

.arcdouble {
    clip-path: url(#arcdouble);
}

.arcdoublesteep {
    clip-path: url(#arcdoublesteep);
}



.arc-mask-cut {
    -webkit-mask: var(--arc-mask);
    mask: var(--arc-mask);
}

.arc-mask::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f8f0e3;
    -webkit-mask: var(--arc-mask);
    mask: var(--arc-mask);
}



/*==========  Video Overlay  ==========*/
.videoFeatureWrap {
    position: relative;
    display: block;
}

#introVideo,
.spotlightVideo {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    background-position: 0px center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
    max-width: 780px;
}

#introVideo a,
.spotlightVideo a {
    display: block;
    width: 100%;
    max-width: 780px;
    overflow-x: hidden;
}


#dissectionCarousel .videoFeatureWrap {
    position: relative;
    display: block;
    margin: auto;
    max-width: 333px;
}

.videoFeatureWrap span,
#introVideo span,
.spotlightVideo span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url("https://masterspascdn.com/img/yt-icon-dark.png") no-repeat;
    background-position: 50% 50%;
}

.videoFeatureWrap span:hover,
#introVideo span:hover,
.spotlightVideo span:hover {
    background: url("https://masterspascdn.com/img/yt-icon-red.png") no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-position: 50% 50%;
}

/*========== END Video Overlay  ==========*/

#findaspa .find-answer{cursor: pointer;}

/* Locator */
#locatorForm {
    margin: auto;
}

#contactForm {
    transition: height 0.4s ease;
}

.bumpup {
    margin-top: -100px;
}

.progress-dots {
    text-align: center;
    margin-bottom: 20px;
}

.dot {
    height: 17px;
    width: 17px;
    margin: 0 2px;
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
    border: solid thin var(--tranquility-blue);
}

.dot.active {
    background-color: var(--tranquility-blue);
}

.form-step {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    width: 100%;
    position: absolute;
}

.form-step.active {
    display: block;
    opacity: 1;
    position: relative;
}

.form-control,
.form-select {
    border-radius: 0.25rem;
}

.form-label {
    font-weight: 600;
    font-size: 18px;
    margin-top: 15px;
}

.form-check {
    margin-top: 20px;
    padding-left: 2.5em;
}

.form-check .form-check-input {
    width: 28px;
    height: 28px;
    margin-left: -2.5em;
}

.form-check-input:checked {
    background-color: var(--vitality-blue);
}

.form-select {
    appearance: none;
    /* Remove default arrow (cross-browser) */
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem auto;
    padding-right: 2rem;
}


/* End Locator */

.minor-hero {
    height: 50vh;
    min-height: 350px;
    max-height: 500px;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-position: center bottom 0px;
    background-size: cover;
}

.minor-hero h1 {
    padding-top: 60px;
    margin-top: 0px;
}

.minor-title.bg-tblue {
    color: var(--supporting-white);
}

.testimonial-carousel .bg-tblue {
    height: 100%;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

.testimonial-carousel .caro {
    width: 100%;
    max-width: 400px;
    margin: auto;
}

.testimonial-carousel .dot-indicators {
    width: 300px;
    margin: auto;
}

.testimonial-carousel .testimonial-body {
    width: 100%;
    max-width: 400px;
    text-align: center;
    padding: 20px;
    margin: auto;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.testimonial-carousel .testimonial-carousel-image {
    height: 100%;
    min-height: 350px;
    background-position: top 20% left;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial-carousel .testimonial-body h4 {
    font-size: 22px;
}

.stars i {
    font-size: 36px;
    color: #FFC300;
}

@media (min-width: 992px) {
    .testimonial-carousel .dot-indicators {
        width: 500px;
        margin: 0, auto;
    }

    .testimonial-carousel .testimonial-body {
        text-align: left;
        margin: auto 0 auto;
    }

    .testimonial-carousel .bg-tblue {
        width: 95%;
        -webkit-mask-image: radial-gradient(circle at -85% 50%, transparent 50%, black 50.1%);
        mask-image: radial-gradient(circle at -85% 50%, transparent 50%, black 50.1%);
        -webkit-mask-mode: alpha;
        mask-mode: alpha;
        margin-left: -65px;
    }
}

@media (min-width: 1200px) {
    .testimonial-carousel .bg-tblue {
        -webkit-mask-image: radial-gradient(circle at -90% 50%, transparent 50%, black 50.1%);
        mask-image: radial-gradient(circle at -90% 50%, transparent 50%, black 50.1%);
    }
}

#modelAccordionDetails {
    margin-top: 50px;
}
.accordion-button {
    padding-left: 0px;
    padding-right: 0px;
}
/* 1. Remove the built-in SVG icon */
.accordion-button::after {
    background-image: none;
}

/* 2. Add your own “+” when collapsed */
.accordion-button::after {
    content: "+";
    font-size: 32px;
    font-weight: 100;
    color: var(--supporting-white);
    margin-left: auto;
    transition: transform .2s ease-in-out;
    line-height: 24px;
    display: block;
    width: 30px;
    background-color: var(--tranquility-blue);
    height: 30px;
    text-align: center;
    border-radius: 50%;
    font-family: 'termina', Arial, sans-serif;
}


.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #212529;
}


/* 3. Switch to “–” when expanded */
.accordion-button:not(.collapsed)::after {
    content: "–";
    transform: rotate(0deg);
    background-image: none;
}

.accordion-flush>.accordion-item:first-child {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.accordion-flush>.accordion-item:last-child {
    border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.accordion .accordion-header {
    margin-top: 0;
}

.accordion .accordion-header button {
    font-family: 'Titillium Web', Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
}

.accordion .modelSpecifications {
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

.accordion .modelSpecifications tr:nth-of-type(1) td {
    border-top: none;
}

.accordion .modelSpecifications tr:last-of-type td {
    border-bottom: 1px solid #ddd;
}

.accordion .modelSpecifications tr td {
    font-size: 18px;
}

.suggested article .article-type,
.content-type,
.content-type a {
    margin-top: 10px;
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--vitality-blue);
    font-weight: 600;
    font-family: "Titillium Web", Arial, sans-serif;
    letter-spacing: 1.1px;
}

.bg-vblue .suggested article .article-type,
.bg-vblue .content-type {
    color: var(--supporting-white);
}

.bg-tblue .suggested article .article-type,
.bg-tblue .content-type {
    color: var(--supporting-white);
}

.bg-cblue .suggested article .article-type,
.bg-cblue .content-type {
    color: var(--supporting-white);
}

.suggested article .article-title {
    text-transform: capitalize;
    font-size: 18px;
    font-family: "Titillium Web", Arial, sans-serif;
    font-weight: 600;
}

.suggested article p {
    font-size: 18px;
}

.suggested article a {
    text-transform: uppercase;
}

.suggested article .featured-image {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
}

/* BLOG */
.blog .suggested article {
    margin-bottom: 65px;
}
.blog .suggested article a{text-decoration: none;}
.blog .suggested article .featured-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2/1.2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog #categories{
    background-color: var(--supporting-white);
    color: var(--tranquility-blue);
    border: 1px solid var(--tranquility-blue);
    border-radius: 25px;
    padding: 8px 35px 8px 12px;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 600;
    margin-bottom: 10px;
}
.blog fieldset {
    position: relative;
}

.blog fieldset label {
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 12px;
    font-size: 14px;
}

.blog fieldset i {
    color: var(--tranquility-blue);
}

.blog fieldset i {
    top: 53%;
}
.blog #blogsearch{height: 42px;}
.blog #blogsearch, .blog #categories{margin-top: 40px; margin-bottom: 30px;}

.blog .pagination{
    display: flex;
    justify-content: center;
}
.blog .pagination-single{
    justify-content: space-between;
}
.blog .pagination button,
.blog .pagination .pag-arrow{border:none; color: var(--supporting-white); border-radius: 50%; font-size: 18px; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: var(--tranquility-blue); margin: 0 15px; position: relative; flex-shrink: 0;}
.blog .pagination button.disabled, .blog .pagination .pag-arrow.disabled{background-color: #939598;}
.blog .pagination button:after, .blog .pagination .pag-arrow:after{position: absolute; left: 0; right: 0; top: -1px;}
.blog .pagination button#prev:after, .blog .pagination .pag-arrow#prev:after{content: '<';}
.blog .pagination button#next:after, .blog .pagination .pag-arrow#next:after{content: '>';}
.blog .pagination .page-number{text-decoration: none; color: #939598; margin: auto 15px;}
.blog .pagination .page-number.active{font-weight: 600; color: var(--tranquility-blue);}
.blog .pagination a.prev-post,
.blog .pagination a.next-post {align-items: center; text-decoration: none;}
.blog .pagination a.prev-post button,
.blog .pagination a.next-post button{margin: 0 0 0 0;}
.blog .pagination a.prev-post span,
.blog .pagination a.next-post span{font-weight: 600; max-width: 200px;}
.blog .pagination a.prev-post span{text-align: left; margin-left: 10px;}
.blog .pagination a.next-post span{text-align: right; margin-right: 10px;}


.latest-post{position: relative; border-radius: 25px; }
/* .latest-post > img{ margin-bottom: 200px;} */
.latest-post .latest-intro{background-color: var(--tranquility-blue); padding: 1px 20px;   border-radius: 15px; }





.latest-post .latest-intro a{text-decoration: none;}
.latest-post .latest-intro .pre-headline{font-family: "Titillium Web", Arial, Helvetica, sans-serif; color: var(--clarity-blue); letter-spacing: 2px; font-weight: 500;}

.blog .post-main-image{margin-bottom: 25px; padding-bottom: 0;}
.blog .date-share{display: flex; justify-content: space-between; border: solid 2px #d2d2d2; margin: 25px auto; padding: 8px 0; align-items: center; border-left: none; border-right: none;}
.blog .date-share .date{margin: 0;}
.blog .date-share .social{ display: flex; min-width:150px; justify-content: space-around; align-items: last baseline;}
.blog #sidebar aside {margin-bottom: 35px; }
.blog #sidebar aside h4{margin-bottom: 15px;}
.blog #sidebar aside ul{list-style: none; padding-left: 0;}


@media (min-width: 992px) {
    .latest-post{ margin-bottom: 200px;}
    .latest-post .latest-intro{padding: 1px 50px; width: 85%; margin: -20px auto 0; position: absolute; bottom: -200px; left: 0; right: 0;}


    .blog #sidebar .recents div div{margin-bottom: 20px;}
    .blog #sidebar aside { padding-left: 30px;}
}
.blog #sidebar .recents a{color: var(--vitality-blue); text-decoration: none; font-weight: 600;}

.blog #sidebar .categories ul li{margin-bottom: 15px;}
.blog #sidebar .categories ul li a{color: var(--supporting-black); text-decoration: none;}

.blog article.post-content p{margin-bottom:1.5rem;}
.blog article.post-content figure img{border-radius: 1.00rem;}
.blog article.post-content h2,
.blog article.post-content h3,
.blog article.post-content h4,
.blog article.post-content h5,
.blog article.post-content h6,
.blog .archive-description h2,
.blog .archive-description h3,
.blog .archive-description h4,
.blog .archive-description h5,
.blog .archive-description h6{
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0.75rem;
    margin-top: 1.50rem;
    letter-spacing: 0.1rem;
    font-weight: 700; margin-bottom: 0; letter-spacing: 0;
    color: var(--supporting-black);
}
.blog article.post-content figcaption{font-size: 14px;}
.blog article.post-content .content-type a{text-decoration: none;}


/* //BLOG */
.nav.tab-list {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    right: 0;
    flex: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.line-intro.arcdouble,
.line-intro.arcdoublesteep {
    height: 700px;
    padding: 77px 0 0 0;
    margin-top: -150px;
}

@media (min-width: 992px) {

    .line-intro.arcdouble,
    .line-intro.arcdoublesteep {
        height: 650px;
        margin-top: -300px;
    }
}

.nav.tab-list::-webkit-scrollbar {
    display: none;
}

.nav.tab-list li {
    flex-shrink: 0;
    line-height: 70px;
    margin: 0 1rem;
}

.nav.tab-list.tab-list-scroll  {
    justify-content: start;
}

.tab-content-features .tab-pane .scroll-row>.scroll-row-item {
    max-width: 350px;
}

.line-models-overview .caro {
    align-items: end;
}

@media (min-width: 992px) {
    .nav.tab-list.tab-list-scroll  {
        justify-content: center;
    }

    .line-models-overview .tab-content {
        position: relative;
    }

    .line-models-overview .tab-content .row>.model,
    .tab-content .tab-pane .scroll-row>.scroll-row-item {
        margin-left: 5%;
    }

    .line-models-overview .tab-content .row>.model~.model,
    .tab-content .tab-pane .scroll-row>.scroll-row-item~.scroll-row-item {
        margin-left: 0px;
    }
}




.line-models-overview .model {
    width: 400px;
    margin-bottom: 30px;
}
.line-models-overview .model a {display: block;}
.line-models-overview .model a.specialRibbon{position: relative;}
.line-models-overview .model a.specialRibbon::after
 {
    display: block;
    position: absolute;
    top: 0;
    left: 40px;
    content: "";
    width: 50px;
    height: 75px;
    background: url("/img/special-edition-ribbon.svg") no-repeat;
    background-size: 100%;

}
.filter-area  a.specialRibbon{position: relative;display: block;}
 .filter-area  a.specialRibbon::after{
    display: block;
    position: absolute;
    top: 35px;
    left: 40px;
    content: "";
    width: 50px;
    height: 75px;
    background: url("/img/special-edition-ribbon.svg") no-repeat;
    background-size: 100%;

}

.line-models-overview .model h4,
.model-specs-line-overview h4,
.model-specs h4 {
    font-family: "Titillium Web", Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 0px;
}

.line-models-overview .model h5,
.model-specs-line-overview h5,
.model-specs h5 {
    font-family: "Titillium Web", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.model-specs-line-overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    max-width: 320px;
    width: 100%;
    margin: auto;
}

.model-specs-line-overview .model-name a,
.model-specs-line-overview .model-name a h4{
    color: var(--supporting-black);
    text-decoration: none;

}

.model-specs-line-overview>div:nth-child(odd) {
    width: 200px
}

.model-specs-line-overview>div:nth-child(even) {
    width: 100px
}

.model-specs-line-overview>div p,
.model-specs>div p {
    margin-bottom: 0;
}

.model-specs-line-overview>div>p:nth-of-type(1),
.model-specs>div>p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 300;
}

.model-specs-line-overview>div>p:nth-of-type(2),
.model-specs>div>p:nth-of-type(2) {
    font-size: 14px;
    font-weight: 300;
}

.model-brief-info {
    display: block;
    text-align: center;
}

.model-specs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
    text-align: left;
    max-width: 400px;
    margin: auto;
}

.model-specs>div {
    flex-basis: 50%;
}

@media (min-width: 992px) {
    .model-brief-info {
        text-align: left;
    }

    .model-brief-info,
    .model-specs {
        display: flex;
        justify-content: space-between;
    }

    .model-specs {
        width: 60%;
        max-width: 100%;
    }

    .model-specs>div {
        flex-basis: auto;
    }
}

.tab-list {
    border-bottom: solid thin #d2d2d2;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.tab-list li {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-weight: 700;
}

.tab-list li a {
    text-decoration: none;
}

.tab-list li a.nav-link:link,
.tab-list li a.nav-link:visited {
    color: var(--supporting-black);
}

.bg-vblue .tab-list li a.nav-link:link,
.bg-vblue .tab-list li a.nav-link:visited {
    color: var(--supporting-white);
}

.tab-list li a.nav-link:hover,
.tab-list li a.nav-link:active {
    color: var(--clarity-blue);
    border-width: 3px;
}

.bg-vblue .tab-list li a.nav-link:hover,
.tab-list li a.nav-link:active {
    color: var(--supporting-white);
}

.tab-list li.nav-item a.nav-link.active {
    border-bottom-color: var(--vitality-blue);
    border-width: 3px;
    color: var(--vitality-blue);
}

.bg-vblue .tab-list li.nav-item a.nav-link.active {
    border-bottom-color: var(--clarity-blue);
    border-width: 3px;
    color: var(--clarity-blue);
}




.caro {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
}

.caro::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.caro-desktop {
    flex-wrap: wrap;
    cursor: auto;
    overflow-x: auto;
}

.caro-desktop.dragging {
    cursor: auto;
}

.caro-mobile,
.caro-all {
    flex-wrap: nowrap;
    cursor: grab;
}

@media (min-width: 992px) {
    .caro-mobile {
        flex-wrap: wrap;
        cursor: auto;
        overflow-x: auto;
    }

    .caro-desktop {
        flex-wrap: wrap;
        cursor: auto;
        overflow-x: auto;
    }

    .caro-mobile.dragging {
        cursor: grabbing;
    }
}

/* Show on mobile only when caro-mobile */
.dot-indicators--mobile,
.arrow-scroll+.dot-indicators--all {
    display: flex;
}

@media (min-width: 992px) {

    .dot-indicators--mobile,
    .arrow-scroll+.dot-indicators--all {
        display: none;
    }
}

/* Show on desktop only when caro-desktop */
.dot-indicators--desktop {
    display: none;
}

@media (min-width: 992px) {
    .dot-indicators--desktop {
        display: flex;
    }
}

.arrow-scroll .feature-block{margin-top: 50px;}


/* Always show for caro-all */
.dot-indicators--all {
    display: flex;
}


.dot-indicators .dot {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: solid thin var(--tranquility-blue);
    border-radius: 50%;
    margin: 0 4px;
    opacity: 0.6;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
    cursor: pointer;
    flex-shrink: 0;
}

.bg-tblue .dot-indicators .dot,
.bg-vblue .dot-indicators .dot {
    border: solid thin var(--supporting-white);
}

.bg-tblue .dot-indicators .dot.active,
.bg-vblue .dot-indicators .dot.active {
    background-color: var(--supporting-white);
}

.dot-indicators .dot.active {
    background-color: var(--tranquility-blue);
    opacity: 1;
    transform: scale(1.2);
}


/* 3. Dots styling */
.dot-indicators {
    justify-content: center;
    padding: 1rem 0;
    flex-wrap:wrap;
}

.dot-indicators .dot {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: solid thin var(--tranquility-blue);
    border-radius: 50%;
    margin: 0 6px;
    opacity: 0.6;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
    cursor: pointer;
    margin-bottom: 10px;
}

.bg-tblue .dot-indicators .dot,
.bg-vblue .dot-indicators .dot {
    border: solid thin var(--supporting-white);
}

.bg-tblue .dot-indicators .dot.active,
.bg-vblue .dot-indicators .dot.active {
    background-color: var(--supporting-white);
}

.dot-indicators .dot.active {
    background-color: var(--tranquility-blue);
    opacity: 1;
    transform: scale(1.2);
}


/* Thumbnail Carousel */
.carousel {
    max-width: 1200px;
    margin: auto;
    position: relative;
}

.carousel__main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel__main {
    /* max-height: 615px; */
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbs__list-wrapper {
    width: 130%;
    overflow-x: auto;
    margin: 1rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.thumbs__list-wrapper::-webkit-scrollbar {
    display: none;
}

.thumbs__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.thumbs__list img {
    height: 100%;
    max-height: 112px;
    width: auto;
    margin-right: 10px;
    cursor: pointer
}

.thumbs__list-wrapper,
.thumbs__list,
.thumbs__list img {
    user-select: none;
    -webkit-user-drag: none
}

.thumbs__controls {
    position: relative
}

.thumbs__list-wrapper {
    overflow-x: auto;
    cursor: grab
}

.thumbs__list-wrapper.active {
    cursor: grabbing
}



.carousel-hero .carousel-indicators{
    bottom: -29px;
}
.carousel-hero .carousel-indicators button{
    border: solid thin var(--supporting-white);
    width: 12px;
    height: 12px;
    background-color: transparent;
    border-radius: 50%;
    transition:background-color 0.3s, transform 0.3s, opacity 0.3s; 
}
.carousel-hero .carousel-indicators button.active{
    background-color: var(--supporting-white);
}
.carousel-hero .carousel{
    max-width: 101%;
    max-width: 101%;
    margin-bottom: 2%;
}
.carousel-hero  .hemi-bottom{
bottom: -60px;
}

@media only screen and (min-width: 768px) {
.carousel-hero  .hemi-bottom{
bottom: -30px;
}
}
@media only screen and (min-width: 1200px) {
.carousel-hero  .hemi-bottom{
bottom: -1px;
}
}
/* Scroll Tables */
/* Rules to allow for the first column to stick on mobile */
.tableWrapper,
.tableWrapper-light {
    max-width: 900px;
    width: 100%;
    margin: auto;
    margin-top: 50px;
    overflow-x: auto;
    /* hide native scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}
.tableWrapper-light {
    max-width: 100%;
    width: 100%;
    margin-top: 10px;
}

.tableWrapper-light .table tbody tr>td:first-child {
    white-space: pre;
    font-weight: 700;
}

.table.borderless td,
.table.borderless th {
    border: none;
}

.tableWrapper .table,
.tableWrapper-light .table {
    border-collapse: initial;
}

.tableWrapper tr>th {
    border-top: none;
}

.tableWrapper tr>th:last-child,
.tableWrapper tr>td:last-child {
    border-right: none;
}

.tableWrapper .table td,
.tableWrapper .table th {
    border: solid thin #a8c7e94d;
}

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

.tableWrapper .table tr:last-of-type td {
    border-bottom: none;
}

.tableWrapper .table tr,
.tableWrapper .table td,
.tableWrapper .table th {
    background-color: transparent;
}

.tableWrapper .table {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}



.tableWrapper .table th {
    font-size: 18px;
    font-weight: 600;
}

.tableWrapper .table th,
.tableWrapper .table td {
    color: var(--supporting-white);
}

.tableWrapper .table .section-title {
    font-size: 14px;
    font-weight: 300;
    color: var(--clarity-blue);
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.tableWrapper tr.title-row td.section-title:not(:first-of-type) {
    border-top: solid 5px var(--clarity-blue);
}

.tableWrapper .table tbody .title-row td,
.tableWrapper .table tbody .title-row th,
.tableWrapper .table tbody .divider-row td,
.tableWrapper .table tbody .divider-row th {
    border-bottom: none;
    border-top: solid thin var(--clarity-blue);
}

.tableWrapper .table tbody .title-row+tr td,
.tableWrapper .table tbody .title-row+tr th {
    border-top: none;
    border-bottom: none;
}



.table-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 6px;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    position: relative;
}

.table-dot.standard {
    background-color: var(--vitality-blue);
    color: var(--supporting-white);
}

.table-dot.optional {
    background-color: var(--clarity-blue);
    color: var(--tranquility-blue);
}

.table-dot.unavailable {
    background-color: var(--tranquility-blue);
    color: var(--supporting-white);
    border: solid 1px var(--supporting-white);
}

.table-dot.sup1::after,
.table-dot.sup2::after,
.table-dot.sup3::after,
.table-dot.sup4::after{
    top: -13px;
    right: -4px;
    position: absolute;
    font-size: 10px;
}

.table-dot.sup1::after,
.table-dot.sup2::after,
.table-dot.sup3::after,
.table-dot.sup4::after{
    color: var(--tranquility-blue);
}

.bg-tblue .table-dot.sup1::after,
.bg-tblue .table-dot.sup2::after,
.bg-tblue .table-dot.sup3::after,
.bg-tblue .table-dot.sup4::after{
    color: var(--clarity-blue);
}

.table-dot.sup1::after{
    content: '1';
}
.table-dot.sup2::after{
    content: '2';
}
.table-dot.sup3::after{
    content: '3';
}
.table-dot.sup4::after{
    content: '4';
}

.tableWrapper table {
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    white-space: wrap;
}

.tableWrapper .table th {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}


.tableWrapper td {
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
}

.tableWrapper .table th:first-child {
    text-align: left;
}

.tableWrapper-light tr>th:first-child,
.tableWrapper-light tr>td:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 215px;
    font-size: 16px;
    border-left: none;
    padding-left: 0px;
}

.tableWrapper tr>th:first-child,
.tableWrapper tr>td:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 215px;
    font-size: 16px;
    border-left: none;
    background-color: var(--tranquility-blue);
    padding-left: 0px;
    font-weight: 300;
}


.tableWrapper .table td {
    text-align: center;
    font-weight: 250;
}

.tableWrapper .table td:first-of-type {
    text-align: left;
}

.tableWrapper .table small {
    width: 100%;
    max-width: 900px;
    margin: auto;
    display: block;
}

.table-legend {
    display: flex;
    width: 100%;
    max-width: 450px;
    justify-content: space-between;
    margin: 50px auto;
}

.table-legend div p {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--clarity-blue);
    font-weight: 300;
    letter-spacing: 0.1rem;

}

.table-legend div p,
.table-legend div span {
    display: inline-block;
}

#comparetubs {
    position: relative;
    border-collapse: collapse;
    max-height: 640px;
    margin-bottom: 75px;
}


#comparetubs thead {
    background: var(--tranquility-blue);
    position: sticky;
    top: 0px;
    z-index: 2;
}


#saltWaterCareGuideAccord .accordion-body{
    padding: 0px;
}
#saltWaterCareGuideAccord .accordion-body .tableWrapper-light .table tbody tr>td:first-child {
    white-space:normal;
    padding: 0px 0 0 10px ;
}
/* END Scroll Tables */

.model-overview h2 {
    margin-bottom: 10px;
}

.model-overview #model-selector {
    margin-bottom: 30px;
}
.model-overview #model-selector .dropdown-item {
    text-decoration: none;
    transition: .3s;
}
.model-overview #model-selector .dropdown-item:active, 
.model-overview #model-selector .dropdown-item:hover {
    background-color: var(--vitality-blue);
    color: var(--supporting-white);
}

.model-overview #model-selector .dropdown-toggle {
    color: var(--supporting-black);
    font-weight: 600;
    font-size: 21px;
    text-decoration: none;
}

.model-overview #model-selector .dropdown-toggle::before {
    display: none;
}

.model-overview #model-selector .dropdown-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: top center;
    transform: translateY(-10px) scaleY(0);
    opacity: 0;
    transition:
        transform 0.0s ease-out,
        opacity 0.2s ease-out;
    pointer-events: none;
}


.model-overview #model-selector .dropdown-menu.show {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 20;
}

/* 3. Rotating the caret with a smooth transition */
.model-overview #model-selector .dropdown-toggle::after {
    transition: transform 0.3s ease-out;
}

.model-overview #model-selector .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}


/*===Color Picker Styles===*/
#colorPicker {
    margin-bottom: 5px;
}

#colorPicker h3 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 25px;
}

#colorPicker .tubContainer {
    display: block;
    margin: auto;
    max-width: 500px;
}


#colorPicker .dreamLightDisclaimer {
    display: block;
    margin: 10px auto;
    text-align: center;
}

.shellLabel,
.skirtLabel {
    text-align: center;
    font-weight: 600;
    color: var(--supporting-black);
    font-size: 18px;
    min-width: 160px;
}


@media (min-width: 992px) {
#shellOptions{display: flex; flex-wrap: wrap; justify-content: start;}
.shellLabel{width: 100%; text-align: left;}
}

.shellLabel span,
.skirtLabel span {
    font-weight: 500;
}

#shellSwatches,
#skirtSwatches {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
}

#shellSwatches a,
#skirtSwatches a {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-position: left center;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

#shellSwatches a:first-child,
#skirtSwatches a:first-child {
    margin-left: 25%;
}

#shellSwatches a.shellSelected,
#skirtSwatches a.skirtSelected {
    border: solid 3px var(--clarity-blue);
}


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

    #shellSwatches a:first-child,
    #skirtSwatches a:first-child {
        margin-left: 0;
    }

    #shellSwatches,
    #skirtSwatches {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: visible;
    }

}

#skirt {
    position: relative;
    top: -12px;
    z-index: 4;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#skirt.skirtGetaway {
    top: -19px;
}
#skirt.specialEdition:after{
    content: '';
    background-image: url('/img/special-edition-ribbon.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 50px;
    height: 75px;
    position: absolute;
    top: 10px;
    left: 75px;
    
}


#shell {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 5;
}

#skirt img,
#shell img {
    max-width: 300px;
    width: 100%;
    display: block;
    margin: auto;
}
#skirt.skirtTS240 {
    top: -41px;
}

#skirt.skirtTS240X {
    top: -34px;
}


@media only screen and (min-width: 450px) {
        #skirt img,
        #shell img {
        max-width: 600px;
    }
    #skirt.skirtTS240X {
    top: -69px;
}

}
#shellOne {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/sterling-silver.jpg)
}

#shellTwo {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/tuscan-sun.jpg)
}

#shellThree {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/midnight-canyon.jpg)
}

#shellFour {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/storm-clouds.jpg)
}

#shellFive {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/smoky-mountain.jpg)
}

#shellSix {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/white.png)
}

#shellSeven {
    background-image: url(https://masterspascdn.com/img/colors/acrylic/mist.png)
}


#rotoshellOne {
    background-image: url(https://masterspascdn.com/img/colors/roto/pebble-beach.jpg)
}

#rotoshellTwo {
    background-image: url(https://masterspascdn.com/img/colors/roto/sea-salt.jpg)
}

#skirtOne {
    background-image: url(https://masterspascdn.com/img/colors/skirting/skirt-duramaster-espresso.jpg)
}

#skirtTwo {
    background-image: url(https://masterspascdn.com/img/colors/skirting/skirt-duramaster-graphite.jpg)
}

#skirtThree {
    background-image: url(https://masterspascdn.com/img/colors/skirting/skirt-duramaster-midnight.jpg)
}

#skirtFour {
    background-image: url(https://masterspascdn.com/img/colors/skirting/skirt-dreamstone-ashstone.jpg)
}

#skirtFive {
    background-image: url(https://masterspascdn.com/img/colors/skirting/skirt-dreamstone-canyonstone.jpg)
}

#skirtSix {
    background-image: url(https://masterspascdn.com/img/colors/skirting/dark-walnut-led.png)
}

#skirtSeven {
    background-image: url(https://masterspascdn.com/img/colors/skirting/graphite-led.png)
}

#skirtEight {
    background-image: url(https://masterspascdn.com/img/colors/skirting/midnight-led.png)
}

#rotoskirtOne {
    background-image: url(https://masterspascdn.com/img/colors/roto/roto-espresso.jpg)
}

#rotoskirtTwo {
    background-image: url(https://masterspascdn.com/img/colors/roto/roto-graphite.jpg)
}

/*===//Color Picker Styles===*/

/*===TubDissection Styles===*/
        #tubDissect .dissect-wrap {
            position: relative;
        }

        #tubDissect .dissect-wrap > img {
            display: block;
            width: 100%;
            margin-bottom: 40px;
            filter: drop-shadow(0px 15px 17px rgba(0, 0, 0, 0.4))
        }

        #tubDissect .mark {
            position: absolute;
            color: #fff;
            border: none;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--tranquility-blue);
            color: var(--supporting-white);
            font-size: 20px;
            font-weight: 100;
            font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 32px;
            font-size: 32px;
        }

        #tubDissect .mark::before {
            content: "+";
            color: #fff;
            display: block;
            transform: translateY(-3px);
        }

        #tubDissect .mark.active {
            background-color: var(--vitality-blue);
        }

        #tubDissect .mark.active::before {
            content: "-";
            color: #fff;
            display: block;
            font-size: 48px;
        }

        #tubDissect .info-overlay {
            position: absolute;
            background-color: rgba(53, 89, 115, .95);
            border-radius: 15px;
            display: none;
            width: 450px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            animation: expand 0.3s ease forwards;
            align-items: center;
            padding: 20px;
        }

        #tubDissect .info-overlay img {
            width: 140px;
            object-fit: cover;
            margin-right: 15px;
        }

        #tubDissect .info-overlay .minor-title {
            margin-top: 0px;
            color: #a8c7e9;
            letter-spacing: 0;
            font-size: 16px;
        }

        #tubDissect .info-overlay p {
            margin: 0;
            font-size: 14px;
            font-weight: 300;
            color: #fff;
            max-width: 300px;
        }

        @keyframes expand {
            from {
                transform: scaleX(0);
                opacity: 0;
            }

            to {
                transform: scaleX(1);
                opacity: 1;
            }
        }

        #tubDissect .info-strip {
            display: none;
        }


        #tubDissect .info-card {
            display: flex;
            align-items: center;
        }

        #tubDissect .info-card .minor-title {
            letter-spacing: 0;
            margin-top: 0;
        }

        #tubDissect .info-card img {
            object-fit: contain;
            margin: 0 35px 35px 00;
            width: 200px;
        }

        /* Mobile Mode */
        @media (max-width: 992px) {
            #tubDissect .info-overlay {
                display: none !important;
            }

            #tubDissect .info-strip {
                display: flex;
            }
        }

        #tubDissect .overlay-close {
            position: absolute;
            top: 4px;
            right: 6px;
            background: none;
            border: none;
            font-size: 24px;
            font-weight: 300;
            cursor: pointer;
            color: #fff;
            font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
        }


/*===//TubDissection Styles===*/

.line-logo {
    display: block;
    margin: 40px auto 0;
    width: 100%;
    max-width: 200px;
}

.line-intro .line-logo {
    width: 100%;
    max-width: 300px;
    margin-top: -20px;
    margin-bottom: 30px;
}

.model-capacity-card {
    display: inline-block;
    padding: 5px 11px;
    margin: 25px auto;
    border: solid thin var(--supporting-black);
    border-radius: 15px;
    text-align: center;
    align-self: baseline;
}

.model-capacity-card p {
    margin-bottom: 0px;
}

.model-capacity-card p:first-child {
    font-weight: 300;
    font-size: 21px;
    color: var(--tranquility-blue);
}

.model-capacity-card p:last-child {
    color: var(--vitality-blue);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .line-logo {
        margin: 0px auto 0;
    }

    .thumbs__list-wrapper {
        width: 100%;
    }

    .thumbs__list img {
        max-height: 235px;
    }
}

.filter-area {
    display: flex;
    align-items: end;
    align-content: center;
}

.filter-area .filter-item picture img {
    margin: 35px 0 15px;
}

.filter-area .filter-brand,
.filter-area .filter-model {
    text-align: center;
}

.filter-area .filter-brand {
    color: #fff;
    font-family: 'Titillium web', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0px;
}

.filter-area .filter-model {
    margin: 0px;
    text-decoration: none;
    font-family: 'Titillium web', Arial, Helvetica, sans-serif;
    font-size: 32px;
    text-align: left;
    line-height: 47px;
}

.filter-area .filter-model {
    text-align: center;
}

.filter-area .filter-model a {
    font-size: 21px;
    text-decoration: none;
    color: var(--clarity-blue);
}

@media (min-width: 992px) {
    .filter-area .filter-model a {
    font-size: 15px;
}
}
@media (min-width: 1200px) {
    .filter-area .filter-model a {
        font-size: 18px;
    }
}
@media (min-width: 1400px) {
    .filter-area .filter-model a {
        font-size: 21px;
    }
}
div#ssFilter {
    row-gap: 10px;
}

.filter-area .filter-capacity,
.filter-area .filter-price,
.filter-area .filter-swimlevel {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    width: 100px;
}

.filter-area .filter-swimlevel img{
    width: 15px;
    margin-right: 5px;
}
.filter-area .filter-swimlevel img:last-of-type{
    margin-right: 0px;
}

.capprice-wrap {
    display: flex;
    justify-content: center;
}


@media (min-width: 992px) {
    .filter-area .filter-brand,
    .filter-area .filter-model {
        text-align: left;
        padding-left: 15px;
    }

    .filter-area .filter-capacity,
    .filter-area .filter-price,
.filter-area .filter-swimlevel {
        text-align: right;
        padding-right: 15px;
        width: 100%;
    }

    .capprice-wrap {
        display: block;
        justify-content: initial;
    }

}

.find-question .find-question-text {
    font-size: 25px;
    font-weight: 400;
}

.find-question a {
    text-decoration: none;
    min-height: 150px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    border: solid thin white;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.find-question a span{
    font-size: 28px;
    font-weight: 300;
    display: block;
    width: 100%;
}
@media (min-width: 360px) {
.find-question a {
    flex-wrap: nowrap;
    justify-content: space-evenly;
}.find-question a span{
    display: inline;
    width: auto;
}
}

.find-question a img {
    width: 100%;
    max-width: 150px;
}

.find-question #swimspa a img {
    max-width: 200px;
}

a.startOver {
    color: var(--clarity-blue);
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .find-question a {
        border: none;
        display: block;
    }

    .find-question a span {
        font-size: 32px;
        border: solid thin white;
        border-radius: 15px;
        display: block;
        margin: auto auto 30px;
        width: 100%;
        max-width: 300px;
        padding: 15px 0;
    }

    .find-question a img {
        width: 100%;
        max-width: 300px;
    }

    .find-question #swimspa a img {
        max-width: 400px;
    }

    .find-question #swimspa {
        border-left: solid thin #fff;
        border-radius: 0px;
        padding-left: 50px;
    }
}

.find-question .find-answer {
    text-decoration: none;
    height: 120px;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    border: solid thin white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.find-question .find-answer a {
    font-size: 28px;
    font-weight: 300;
    border: none;
}

.videoThumbList figure{margin-bottom: 2.5rem;}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}

.titillium-web-extralight {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.titillium-web-light {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.titillium-web-regular {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.titillium-web-semibold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.titillium-web-bold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.titillium-web-black {
    font-family: "Titillium Web", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.titillium-web-extralight-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.titillium-web-light-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.titillium-web-regular-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.titillium-web-semibold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.titillium-web-bold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.termina-web-light {
    font-family: "termina", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.termina-web-regular {
    font-family: "termina", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.termina-web-medium {
    font-family: "termina", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.videoNoConsent::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--tranquility-blue) 30%, var(--supporting-black));
    opacity: .9;
    z-index: 110
}

.ytConsentPrompt {
    position: absolute;
    z-index: 120;
    top: 25%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    height: 100%;
    width: 70%;
    margin-left: auto;
    margin-right: auto
}

.ytConsentPrompt .btn,
.ytConsentPrompt .btn:hover,
.ytConsentPrompt .btn:active {
    margin-top: 15px;
    background-color: var(--tranquility-blue);
    color: #fff;
    border: solid thin var(--tranquility-blue)
}

@media only screen and (max-width: 1200px)and (min-width: 992px) {
    #accordion .videoFeatureWrap .ytConsentPrompt {
        font-size: 14px;
        top: 15%
    }
}

.yt-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}

.yt-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* attach our inline‐SVG mask that cuts out the triangle */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><mask id="cut"><rect width="100%" height="100%" fill="white"/><polygon points="38,30 70,50 38,70" fill="black"/></mask><circle cx="50" cy="50" r="50" fill="white" mask="url(%23cut)"/></svg>') center/contain no-repeat;
}

.yt-play-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


#patents table.table>tbody td {
    border: solid thin #ddd;
}

#patents table.table>tbody tr>td {
    max-width: 250px;
    height: 200px;
}

.patentThumbs  a {
    display: inline-block;
    max-width: 100px;
    margin: 15px;
}

.patentThumbs  img {
    max-width: 100%;
}


/* ----------------------------
    COUPON/LANDING PAGE
---------------------------- */

.pricing-tooltip {
    position: relative;
    display: inline-block;
}
.msrp-wrapper{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin: 50px auto;
}
.msrp-wrapper h3{   
    color: var(--supporting-black);
    font-weight: 500;
    font-size: 21px;
    text-decoration: none;
    font-family: "Titillium Web", Arial, sans-serif;
    margin:0px 25px 0px 0px;
}
.msrp-wrapper h3 span{
    font-family: "Titillium Web", Arial, sans-serif;
    color: var(--supporting-black);
    font-size: 21px;
    font-weight: 600;
}
.tooltip-wrapper {
    position: absolute;
    top: 125%; /* below the trigger */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none; /* allows clicks to pass through if needed */
    width: 100%;
    max-width: 400px;
    z-index: 10;
}

.tooltip-text {
margin: 0 auto; /* centers horizontally */
background-color: var(--tranquility-blue);
color: #fff;
padding: 10px;
border-radius: 4px;
font-family: "Titillium Web", Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 14px;
width: 100%;
box-sizing: border-box;
text-align: left;
line-height: 1.4;
text-transform: initial;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
pointer-events: auto; /* re-enable interaction */
}

.tooltip-wrapper.active .tooltip-text {
    visibility: visible;
    opacity: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.pricing-tooltip::after{
    content: '1';
    font-size: 14px;
    display: block;
    font-weight: 400;
    position: absolute;
    top: -6px;
    width: 10px;
    height: 10px;
    right: -4px;
    text-decoration: underline;
    cursor: pointer;
}
.nicknameField{display: none;}