/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text p,
.white-text li {
  color: #fff;
}

.white-font,
.white-font h1,
.white-font h2,
.white-font h3,
.white-font h4,
.white-font h5,
.white-font p,
.white-font li {
  color: #fff;
}
/* TYPOGRAPHY */
.bullets-white ul li,
ul.bullets-white li {
  color: #ffffff;
}

.cta-primary {
  text-align: center;
}

/*** Waves ***/
.wave img {
  width: 100%;
  display: block;
}


/*** Header Overrides ***/
.hhs-top-bar.hhs-alt-nav {
  box-shadow: 0px 13px 17px -2px rgba(0, 0, 0, 0.52);
}

.hhs-top-bar.hhs-alt-nav:not(.active) {
  position: relative;
  z-index: 1;
}

.hhs-header-logo {
  padding-bottom: 20px;
  padding-right: 3.5%; 
}


.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:not(:last-child):not(:nth-last-child(2)):before {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #67a3be;
  height: 12px;
  right: -10px;
  top: 11px;
}

.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:last-child {
  margin-right: 0;
  margin-top: 2px;
}

.hhs-side-menu__extras .hs-menu-wrapper.hs-menu-flow-horizontal>ul li:last-child a,
.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:last-child a {
  background-color: #f49807!important;
  padding: 3px 12px!important;
  color: #fff!important;
  font-weight: bold!important;
  border-radius: 8px;
  transform: scale(1.0);
  text-align: center;
}

.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:last-child:hover:after {
  display: none;
}

.hhs-side-menu__extras .hs-menu-wrapper.hs-menu-flow-horizontal>ul li:last-child a:hover,
.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:last-child a:hover {
  color: #fff!important;
  transform: scale(1.05);
}

.hhs-side-menu__extras .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  text-transform: uppercase;
}

/*** Footer Overrides ***/
.hhs-foot-nav-col .hs-menu-wrapper.hs-menu-flow-horizontal > ul li {
  margin-bottom: 0!important;
}

.social-header {
  text-align: center;
  margin-bottom: 14px;
}

.social-header h5 {
  color: #fff;
}

.hhs-social-con  {
  text-align: center;
}

.hhs-social-con a {
  height: 40px!important;
  display: flex!important;
  flex-direction: column;
  border: 1px solid;
  align-items: center;
  justify-content: center;
  padding: 0!important;
  border-radius: 50%;
  width: 100%!important;
  max-width: 40px;
  margin: 0 11px !important;
}

.hhs-social-con a:hover {
  border-color: #fff;
  color: #fff;
}


.hhs-foot-copyright a {
  color: #8fd0dd;
}

.hhs-foot-copyright a:hover {
  color: #fff;
}

.cky-consent-wrap {
  font-size: 13px;
  margin-top: 8px;
}

.cky-consent-wrap a {
  color: #8fd0dd;
  text-decoration: underline;
}

.hhs-foot-base-nav {
  text-align: center!important;
}

body .hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  font-size: 13px!important;
  padding-right: 0!important;
  text-decoration: underline;
}

.hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li {
  position: relative;
}

.hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li:not(:last-child) {
  margin-right: 20px;
}

.hhs-foot-base-nav .hs-menu-wrapper.hs-menu-flow-horizontal > ul li:not(:last-child):after {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #8fd0dd;
  height: 12px;
  right: -10px;
  top: 7px;
}

.hhs-foot-nav-col {
  border: none!important;
}

#return-to-top {
  bottom: 64px!important;
  left: 13px!important; 
}

@media (max-width: 575px) {
  .footer-certs {
    text-align: center;
  }
}


/*** Modules ***/
.inner--banner {
  /* min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative; */
}

.inner--banner p {
  font-size: 24px;
}

.inner--banner .bg-img {
  /* margin-bottom: -50px; */
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 60vh;
  margin-bottom:-5px;
}
.inner--banner .col-wave {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -1px;
  display: flex;
  /* background-image: url('https://754502.fs1.hubspotusercontent-na1.net/hubfs/754502/banner--wave.svg');
  background-size: cover;
  background-position: bottom center;
  height: 50px; */
}
.inner--banner .col-wave svg {
  width: 100%;
  height: auto;
}
.inner--banner  .col-inner {
  /* background-size: cover; */
  background: #017CA5;
  padding: 30px 0 80px;
}


/**** Bubble Effect *****/
.bubbles {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.bubble {
  width: 90px;
  height: 90px;
  border: 1px solid rgba(199,231,238,.2);
  background-color: rgba(199, 231, 238, .2);
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
}

.bubble {
  animation: animateBubble 14s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 30%;
  top: 2%;
}

.bubble.x-0 {
  left: 15%;
  top: 4%;
  width: 80px;
  height: 80px;
  animation: animateBubble 15s linear infinite, sideWays3 3s ease-in-out infinite alternate;
}

.bubble.x-1 {
  left: 60%;
  top: 6%;
  width: 60px;
  height: 60px;
  animation: animateBubble 13s linear infinite, sideWays2 1.7s ease-in-out infinite alternate;
}

.bubble.x-2 {
  left: 25%;
  top: 8%;
  width: 35px;
  height: 35px;
  animation: animateBubble 13s linear infinite, sideWays2 1.2s ease-in-out infinite alternate;
}

.bubble.x-3 {
  left: 65%;
  top: 10%;
  width: 70px;
  height: 70px;
  animation: animateBubble 9s linear infinite, sideWays2 1.9s ease-in-out infinite alternate;
}

.bubble.x-4 {
  left: 45%;
  top: 12%;
  width: 40px;
  height: 40px;
  animation: animateBubble 9.5s linear infinite, sideWays2 1.0s ease-in-out infinite alternate;
}

.bubble.x-5 {
  left: 35%;
  top: 64%;
}

.bubble.x-6 {
  left: 75%;
  top: 66%;
}

.bubble.x-7 {
  left: 85%;
  top: 70%;
}

.bubble.x-8 {
  left: 50%;
  top: 75%;
}

.bubble.x-9 {
  left: 60%;
  top: 80%;
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
  0% {
      margin-top: 200px;
  }
  100% {
      margin-top: -160%;
  }
}

@-moz-keyframes animateBubble {
  0% {
      margin-top: 200px;
  }
  100% {
      margin-top: -160%;
  }
}

@keyframes animateBubble {
  0% {
      margin-top: 200px;
      opacity: 1;
  }
  100% {
      margin-top: -160%;
      opacity: 0;
  }
}

@-webkit-keyframes sideWays { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:50px;
  }
}

@-moz-keyframes sideWays { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:80px;
  }
}

@keyframes sideWays { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:80px;
  }
}

@-webkit-keyframes sideWays2 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:40px;
  }
}

@-moz-keyframes sideWays2 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:30px;
  }
}

@keyframes sideWays2 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:30px;
  }
}

@-webkit-keyframes sideWays3 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:10px;
  }
}

@-moz-keyframes sideWays3 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:10px;
  }
}

@keyframes sideWays3 { 
  0% { 
      margin-left:0px;
  }
  100% { 
      margin-left:10px;
  }
}


/*****************************************************/
/* These classes can be added to create a container  */
/*****************************************************/






@media (min-width: 40px) {
    .container--left {
        padding-left: calc(50vw - 575.0px)!important;
    }
    .container--right {
        padding-right: calc(50vw - 575.0px)!important;
    }
    .callout--cta .container--left {
        padding-left: calc(50vw - 500px)!important;
    }
    .callout--cta .container--right {
        padding-right: calc(50vw - 500px)!important;
    }
}

@media (max-width: 39px) and (min-width: 1201px) {
    .container--left {
        padding-left: 80px!important;
        padding-right: 80px!important;
    }

    .container--right {
        padding-right: 80px!important;
        padding-left: 80px!important;
    }  
}

@media (max-width: 1200px) {
    .container--fluid,
    .container--left {
        padding-left: 20px!important;
        padding-right: 20px!important;
    }

    .container--right {
        padding-right: 20px!important;
        padding-left: 20px!important;
    }
}

.location-search {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.location-search input {
  background: #fff;
    border: 1px solid;
    border-radius: 8px;
    font-family: Open Sans, sans-serif;
    font-size: 17px;
    height: 55px;
    outline: none;
    padding: 0 20px;
    width: 100%;
    padding-right: 80px;
    color: #074d74;
    border-color: #ccc;
}

.location-search input::placeholder {
  color: #074d74;
}


.location-search button {
  border: 3px solid #fff;
  color: #fff;
  font-weight: 600;
  background-color: #f49807 !important;
  bottom: 0;
  font-size: 17px;
  line-height: 24px;
  min-width: 50px;
  padding: 6px 15px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  border-radius: 8px;
  transform: scale(1.0);
  transition: .4s ease;
  opacity: 1;
}

.location-search button[disabled] {
  opacity: .2;
}

.location-search button:not(.no-arrow) {
  background-image: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9914 8.09288C16.0081 8.17022 16.0169 8.24932 16.0161 8.3293C16.0073 8.80655 15.6452 9.19327 15.3068 9.52989C13.1429 11.6753 10.979 13.8207 8.81517 15.967C8.57787 16.2025 8.32914 16.4451 8.01273 16.5523C7.24193 16.8143 6.47025 16.1929 5.9183 15.5943C5.64408 15.2964 5.36283 14.9624 5.32768 14.559C5.27846 13.9991 5.70912 13.5245 6.10902 13.1299C7.04242 12.207 7.9767 11.2851 8.9101 10.3622C6.60209 10.3684 4.2932 10.3745 1.9852 10.3807C1.62133 10.3815 1.24955 10.3807 0.90502 10.2655C0.537637 10.1425 0.179922 9.84542 0.102578 9.45167C0.00326196 8.94629 0.00414086 8.26426 0.0331448 7.74835C0.0665432 7.14893 0.355703 6.49063 0.930508 6.31573C1.11332 6.26036 1.30756 6.25948 1.49916 6.25948C3.9768 6.25596 6.45531 6.25245 8.93295 6.24805C8.03646 5.38585 7.13998 4.52276 6.24262 3.66055C5.81459 3.24835 5.35492 2.76758 5.35404 2.17344C5.35316 1.60655 5.77152 1.13546 6.18461 0.746979C6.64428 0.315436 7.22963 -0.116106 7.84574 0.0166084C8.22103 0.0974677 8.51811 0.374323 8.79496 0.638874C10.4939 2.26661 12.1928 3.89434 13.8917 5.52208C14.4876 6.09337 15.087 6.66729 15.5871 7.32471C15.7638 7.55587 15.9317 7.81338 15.9932 8.092L15.9914 8.09288Z" fill="white"/></svg>');
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) calc(50% - 0px);
  padding-right: 42px;
}

.button-no-text.location-search button {
  background-position: center center;
}

.location-search button:hover {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .location-search input {
    padding-right: 20px;
  }
  .location-search button {
    position: relative;
    width: 100%;
    margin-top: 10px;
  }
}

.blog-index__post-content--small h4 {
  line-height: 1.2!important;
}
.blog-header-full {
  margin-bottom: 0!important;
}
.blog-subhead-image {
  transform: rotate(180deg);
  width: 100%;
  position: relative;
  top: -2px;
  margin-bottom: 4rem;
}
.blog-subhead-image img {
  width: 100%;
  display: block;
}
.blog-index__post--large,
.hhs-blog-card-inner {
  border-radius: 20px;
  overflow: hidden;
}

.related-posts-header {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: rgba(178, 194, 22, 1);
}

.hhs-hat-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:last-child:after {
  display: none!important;
}

.inset-container .hs-form label,
.inset-container .hs-fieldtype-checkbox .hs-form-checkbox label {
  color: #fff;
}

/**** SSP Announcement *****/
body:has(.ssp-banner) header.hhs-top-bar {
    box-shadow: none;
}

body:has(.ssp-banner) .hhs-custom-spacer {
  position: relative;
  z-index: 10;
}

.ssp-banner {
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 100%
}

.ssp-banner-desktop {
  display: none;
}

.ssp-modal-launch {
  background-color: #ec008c;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 15px 0;
  opacity: 1;
  transition: .4s ease;
}

.ssp-modal-out .ssp-modal-launch {
  opacity: 0;
}

.ssp-modal-launch .d-flex {
  gap: 20px;
}

.ssp-modal-launch__img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.ssp-modal-launch__img img {
  height: 100%!important;
  object-fit: cover;
}

.ssp-modal-copy {
  position: relative;
  z-index: 2;
}

.ssp-modal-copy,
.ssp-modal-launch p {
  font-size: 23px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0px;
}

.ssp-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  background-color: #ec008c;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: end;
  border-radius: 50%;
  padding: 10px;
  z-index: 1;
  cursor: pointer;
}

.ssp-modal {
  background-color: #8fd0dd;
    background-image: url(https://754502.fs1.hubspotusercontent-na1.net/hubfs/754502/Safer_Swimmer_Promise/announcement-bar/bubble-bg.png);
  display: none;
}

.ssp-modal,
.ssp-modal > .d-flex {
  height: 100%;
}


.ssp-modal__left {
  padding: 40px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  max-width: 25%;
  flex: 0 0 25%;
}

.ssp-modal__center {
  padding: 120px 40px;
  text-align: center;
  width: 100%;
  max-width: 50%;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssp-modal__center img {
  margin-bottom: 1rem;
}

.ssp-modal__center h4 {
  font-size: 24px;
  color: #ec008c;
}

.ssp-modal__center p {

}

.ssp-modal__right {
  background-color: #ec008c;
  color: #fff;
  padding: 40px;
  width: 100%;
  max-width: 25%;
  flex: 0 0 25%;
    display: flex;
  align-items: center;
  justify-content: center;
}

.ssp-feature-header {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ssp-feature {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 1.5rem;
}

.ssp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  text-decoration: none;
}


.ssp-modal-out .ssp-modal {
  animation-timing-function: ease-in-out;
  animation-name: modalToggle;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes launchToggle {
  0% {
      opacity: 100%;
      transform: translate(-50%, 30%);
  }

  to {
      opacity: 1;
      transform: translate(-50%, -50%);
  }
}

@keyframes modalToggle {
  0% {
      opacity: 0;
      height: 0px;
  }

  to {
      opacity: 1;
      height: 100%;
  }
}
*/


@media (min-width: 992px) {
  .ssp-banner-desktop {
    display: block;
  }
  .ssp-banner-mobile {
    display: none;
  }
}