@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap);
@import url(//fonts.googleapis.com/css2?family=Anybody:ital,wdth,wght@0,75,600;0,87.5,500;0,87.5,600;0,112.5,600;0,150,600;0,150,700;1,50,300;1,87.5,600&display=swap);
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border-radius: 0;
}

/*============================================================================
  Fonts
*/
/*============================================================================
  Variables
*/
:root {
  --border-radius--med: 20px;
  --border-radius--lg: 20px;
}

@media (min-width: 768px) {
  :root {
    --border-radius--med: 40px;
    --border-radius--lg: 52px;
  }
}
/*============================================================================
  Base 
*/
html {
  scroll-behavior: smooth;
}

body {
  background: #B2ED66;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  width: 100vw;
  overflow-x: hidden;
}

/*============================================================================
  Helpers
*/
.text-center {
  text-align: center;
}

/*============================================================================
  Typography
*/
h1 {
  font-family: "Anybody", cursive;
  font-weight: 600;
  color: white;
  line-height: 0.85;
  font-size: clamp(8rem, 16vw, 16.25rem);
  font-stretch: condensed;
}

h2 {
  font-family: "Anybody", cursive;
  font-size: 8.75rem;
  line-height: 0.8;
  margin-bottom: 20px;
  color: white;
  font-size: clamp(6rem, 10vw, 8.75rem);
  font-stretch: condensed;
}
h2 strong {
  font-weight: 600;
}
h2 em {
  padding-right: 0.1071428571em;
}

h3 {
  font-family: "Anybody", cursive;
  font-size: clamp(3.5rem, 3vw, 5rem);
  font-stretch: condensed;
}

h4 {
  font-family: "Anybody", cursive;
  font-weight: 500;
  font-size: 2.5rem;
}

h5 {
  font-family: "Anybody", cursive;
  font-weight: 500;
  line-height: 1.13;
  font-size: clamp(1.5rem, 5vw, 3.75rem);
  font-stretch: semi-condensed;
}

h6 {
  font-family: "Anybody", cursive;
  font-weight: 500;
  font-size: clamp(1.75rem, 2vw, 2.5rem);
}

p {
  line-height: 1.6;
}

.button {
  display: inline-block;
  border: 2px solid #B2ED66;
  border-radius: 29px;
  padding: 16px 32px;
  background-color: #B2ED66;
  color: black;
  transition: 0.25s all;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.button:hover {
  background-color: #82d419;
  border-color: #82d419;
  cursor: pointer;
}
.button.button--outline {
  background: transparent;
  border: 2px solid #000000;
  padding: 12px 45px;
}
.button.button--outline:hover {
  background-color: #000000;
  color: white;
}

/*============================================================================
  Main
*/
.background--white {
  background-color: #fff;
}
.background--blue {
  background-color: #5DE5E8;
}
.background--yellow {
  background-color: #FFE059;
}
.background--green {
  background-color: #B2ED66;
}
.background--pink {
  background-color: #FF70A1;
}

.hero-block {
  max-width: 1440px;
  margin: auto;
  padding: 70px 40px 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero-block {
    padding: 70px 70px 0;
  }
}
.hero-block .text-wrap {
  font-size: 1.25rem;
  font-weight: 500;
  position: absolute;
}
@media (min-width: 768px) {
  .hero-block .text-wrap {
    font-size: 2rem;
  }
}
.hero-block .text-wrap--first {
  top: 50%;
  left: -30px;
  transform: rotate(-90deg);
}
@media (min-width: 768px) {
  .hero-block .text-wrap--first {
    left: -50px;
  }
}
.hero-block .text-wrap--second {
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .hero-block .text-wrap--second {
    top: 10px;
  }
}
.hero-block .text-wrap--third {
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  .hero-block .text-wrap--third {
    right: -50px;
  }
}
.hero-block #wavepath-image {
  border-radius: var(--border-radius--med);
  aspect-ratio: 2/1;
  overflow: hidden;
}
.hero-block #wavepath-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.hero-block .headline {
  position: absolute;
  top: 0;
  bottom: 0;
  text-align: center;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero-block .headline {
    left: 50%;
    transform: translateX(-50%);
  }
}
.hero-block .headline img {
  width: 70%;
}
@media (min-width: 768px) {
  .hero-block .headline img {
    width: 100%;
  }
}

.image-with-text-block {
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-direction: column;
  max-width: 1440px;
  margin: 100px auto;
}
@media (min-width: 768px) {
  .image-with-text-block {
    padding-left: 70px;
    padding-right: 70px;
    gap: 85px;
    flex-direction: row;
  }
}
.image-with-text-block__image {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: var(--border-radius--med);
  overflow: hidden;
}
.image-with-text-block__image img {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .image-with-text-block__image.image-left {
    flex-basis: 50%;
    max-width: 50%;
  }
  .image-with-text-block__image.image-right {
    order: 2;
    flex-basis: 45%;
    max-width: 45%;
  }
}
@media (min-width: 768px) {
  .image-with-text-block__text.image-left {
    flex-basis: 50%;
    max-width: 50%;
  }
  .image-with-text-block__text.image-right {
    order: 1;
    flex-basis: 55%;
    max-width: 55%;
  }
}

.image-block {
  max-width: 1440px;
  margin: 100px auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 768px) {
  .image-block {
    padding-left: 70px;
    padding-right: 70px;
  }
}
.image-block__wrap {
  width: 100%;
  border-radius: var(--border-radius--lg);
  overflow: hidden;
  position: relative;
}
.image-block__wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.text-block {
  max-width: 1440px;
  margin: 100px auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 768px) {
  .text-block {
    padding-left: 70px;
    padding-right: 70px;
  }
}
.text-block__text.align-text--left {
  text-align: left;
}
.text-block__text.align-text--center {
  text-align: center;
}
.text-block__text.align-text--right {
  text-align: right;
}

.lottie-animation-block {
  display: flex;
  justify-content: center;
  max-width: 1440px;
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 768px) {
  .lottie-animation-block {
    padding-left: 70px;
    padding-right: 70px;
  }
}

.bowls-explainer {
  max-width: 1440px;
  margin: auto;
  padding: 80px 40px;
}
@media (min-width: 768px) {
  .bowls-explainer {
    padding: 150px 70px 50px;
  }
}
.bowls-explainer h2 {
  text-align: center;
}
.bowls-explainer h2 img {
  max-width: 100%;
  margin: auto;
}
.bowls-explainer h6 {
  text-align: center;
  font-size: 2.5rem;
}
.bowls-explainer .bowls-explainer__steps {
  max-width: 75%;
  margin: 100px auto 50px;
}
@media (min-width: 768px) {
  .bowls-explainer .bowls-explainer__steps {
    max-width: 100%;
    display: flex;
    gap: 50px;
  }
}
@media (min-width: 1200px) {
  .bowls-explainer .bowls-explainer__steps {
    gap: 100px;
  }
}
.bowls-explainer .bowls-explainer__steps__step {
  margin-bottom: 50px;
}
.bowls-explainer .bowls-explainer__steps__step--number {
  color: white;
  font-size: 6.4375rem;
  font-weight: 600;
}
.bowls-explainer .bowls-explainer__steps__step--diagram {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 1024px) {
  .bowls-explainer .bowls-explainer__steps__step--diagram {
    height: 250px;
  }
}
@media (min-width: 1200px) {
  .bowls-explainer .bowls-explainer__steps__step--diagram {
    height: 325px;
  }
}
.bowls-explainer .bowls-explainer__steps__step--diagram img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
}

.frequently-asked-questions {
  max-width: 1440px;
  margin: auto;
  padding: 80px 40px;
}
@media (min-width: 768px) {
  .frequently-asked-questions {
    display: flex;
    justify-content: space-between;
    gap: 80px;
  }
}
@media (min-width: 768px) {
  .frequently-asked-questions {
    padding: 100px 70px;
  }
}
@media (min-width: 768px) {
  .frequently-asked-questions__title {
    flex-basis: 40%;
    width: 40%;
  }
}
.frequently-asked-questions__title h3 {
  font-stretch: condensed;
  font-weight: 600;
  font-size: 5rem;
  color: white;
}
@media (min-width: 768px) {
  .frequently-asked-questions .questions {
    flex-basis: 55%;
    width: 55%;
  }
}
.frequently-asked-questions .questions__single {
  width: 100%;
  border-bottom: 1.5px solid #000000;
}
.frequently-asked-questions .questions__single--toggle {
  width: 100%;
  background: unset;
  outline: unset;
  border: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 0;
  font-size: 1.625rem;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  color: black;
}
.frequently-asked-questions .questions__single--toggle:hover {
  cursor: pointer;
}
.frequently-asked-questions .questions__single--toggle .question-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}
.frequently-asked-questions .questions__single--toggle .question-icon i:nth-child(1) {
  position: absolute;
  top: 10px;
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: #000;
  position: relative;
}
.frequently-asked-questions .questions__single--toggle .question-icon i:nth-child(2) {
  display: block;
  width: 3px;
  height: 24px;
  background: #000;
  position: absolute;
  top: 0;
  left: 11px;
  transform: scaleY(1);
  transform-origin: 50% 50%;
  transition: all 0.2s ease-in-out;
}
.frequently-asked-questions .questions__single--toggle .question-icon.expanded i:nth-child(2) {
  transform: scaleY(0);
}
.frequently-asked-questions .questions__single--answer {
  display: none;
}
.frequently-asked-questions .questions__single--answer p {
  margin-bottom: 15px;
}

.club-finder {
  background: white;
  padding: 60px 40px 300px;
}
@media (min-width: 1200px) {
  .club-finder {
    padding: 60px 70px 300px;
  }
}
.club-finder__header {
  padding: 100px 40px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #FF70A1;
  background-image: url("/wp-content/themes/bowls-microsite/images/canada-map.svg");
  background-position: center 40%;
}
@media (min-width: 768px) {
  .club-finder__header {
    padding: 200px 70px 70px;
  }
}
.club-finder__header div p {
  font-family: "Anybody";
  font-stretch: semi-condensed;
  font-weight: 500;
  font-size: 2.5rem;
}
.club-finder__header div::after {
  display: block;
  content: "";
  width: 50px;
  height: 150px;
  margin: 40px auto 0;
  background-image: url("/wp-content/themes/bowls-microsite/images/arrow-down.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.club-finder__intro {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
  padding: 70px 0;
}
@media (min-width: 1024px) {
  .club-finder__intro {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  .club-finder__intro .clubs-search {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
}
.club-finder__intro .clubs-search .postal-code-search {
  margin-top: -1.4rem;
}
.club-finder__intro .clubs-search .postal-code-search strong {
  display: block;
  font-size: 1.125rem;
  margin: 0 0 8px 30px;
}
.club-finder__intro .clubs-search .postal-code-search input {
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 29px;
  padding: 15px 50px 15px 30px;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}
.club-finder__intro .clubs-search .postal-code-search input:active, .club-finder__intro .clubs-search .postal-code-search input:focus {
  border: 2px solid #000000;
  outline: unset;
}
.club-finder__intro .clubs-search .postal-code-search input::-moz-placeholder {
  color: #000000;
}
.club-finder__intro .clubs-search .postal-code-search input::placeholder {
  color: #000000;
}
.club-finder__clubs {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.club-finder__clubs::before {
  content: "";
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgb(255, 255, 255) 50%);
  position: absolute;
  top: 0;
}
.club-finder__clubs .single-club {
  max-width: 100%;
  flex-basis: 100%;
  border: 1.5px solid #E0E0E0;
  border-radius: 60px;
  padding: 40px;
}
@media (min-width: 768px) {
  .club-finder__clubs .single-club {
    max-width: calc(50% - 20px);
    flex-basis: calc(50% - 20px);
  }
}
.club-finder__clubs .single-club h4 {
  margin: 10px 0 15px;
}
.club-finder__clubs .single-club .distance {
  display: block;
  margin-bottom: 40px;
}
.club-finder__clubs .single-club .contact {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}
.club-finder__clubs .single-club .contact a {
  color: #000000;
}
.club-finder__clubs .single-club .contact a i {
  margin-right: 8px;
  vertical-align: text-bottom;
  font-size: 1.625rem;
}
.club-finder__clubs.clubs--loading {
  position: relative;
}
.club-finder__clubs.clubs--loading::before {
  opacity: 1;
  visibility: visible;
}
.club-finder__clubs.clubs--loading + .club-finder__button {
  display: none;
}
.club-finder__button {
  margin: 80px auto 50px;
  display: flex;
  justify-content: center;
}
.club-finder__loader {
  z-index: 1000;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: 50% 50%;
  animation: rotation 2s infinite linear;
}
.club-finder__loader img {
  width: 100%;
}

.event-type-group {
  max-width: 1440px;
  margin: auto;
  padding: 80px 40px;
}
@media (min-width: 768px) {
  .event-type-group {
    padding: 100px 70px;
  }
}
.event-type-group .event-group {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .event-type-group .event-group {
    flex-direction: row;
  }
}
.event-type-group .event-group__card {
  border-radius: 60px;
  padding: 40px;
  background: #FFFFFF;
  height: 100%;
}
.event-type-group .event-group__card--image {
  border-radius: var(--border-radius--med);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/2;
}
@media (min-width: 768px) {
  .event-type-group .event-group__card--image {
    aspect-ratio: 2/1;
  }
}
.event-type-group .event-group__card--image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.event-type-group .event-group__card--content {
  height: 100%;
  padding: 30px 0;
}
.event-type-group .event-group__card--content h5 {
  font-family: "Anybody", cursive;
  font-stretch: semi-condensed;
  font-weight: 600;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  margin-bottom: 15px;
}
.event-type-group .event-group__card--content p {
  font-size: 1.25rem;
}
.event-type-group .event-group__card--content .button {
  margin-top: 40px;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .event-type-group .event-group > div {
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media (min-width: 1024px) {
  .event-type-group .event-group > div:first-child {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .event-type-group .event-group > div:first-child .event-group__card {
    display: flex;
    align-items: stretch;
    gap: 50px;
  }
  .event-type-group .event-group > div:first-child .event-group__card .event-group__card--image {
    flex-basis: 50%;
    width: 50%;
    aspect-ratio: 1/1;
  }
  .event-type-group .event-group > div:first-child .event-group__card .event-group__card--content {
    flex-basis: 40%;
    width: 40%;
  }
}

.instagram {
  background-color: #FFE059;
  padding-bottom: 120px;
}
.instagram__intro {
  padding: 100px 70px;
  max-width: 1440px;
  margin: auto;
}
.instagram__intro .hashtag {
  font-family: "Anybody", cursive;
  font-stretch: semi-condensed;
  font-weight: 600;
  font-size: 1.875rem;
}
.instagram__intro .hashtag::before {
  display: inline-block;
  content: "";
  vertical-align: baseline;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35.02' height='35.012' viewBox='0 0 35.02 35.012'%3E%3Cpath id='Path_937' data-name='Path 937' d='M17.508-23.984a8.962,8.962,0,0,0-8.977,8.977,8.962,8.962,0,0,0,8.977,8.977,8.962,8.962,0,0,0,8.977-8.977A8.962,8.962,0,0,0,17.508-23.984Zm0,14.813a5.847,5.847,0,0,1-5.836-5.836,5.842,5.842,0,0,1,5.836-5.836,5.842,5.842,0,0,1,5.836,5.836A5.847,5.847,0,0,1,17.508-9.172Zm11.438-15.18a2.094,2.094,0,0,0-2.094-2.094,2.094,2.094,0,0,0-2.094,2.094,2.089,2.089,0,0,0,2.094,2.094A2.089,2.089,0,0,0,28.945-24.352Zm5.945,2.125c-.133-2.8-.773-5.289-2.828-7.336s-4.531-2.687-7.336-2.828c-2.891-.164-11.555-.164-14.445,0-2.8.133-5.281.773-7.336,2.82S.258-25.039.117-22.234c-.164,2.891-.164,11.555,0,14.445C.25-4.984.891-2.5,2.945-.453s4.531,2.687,7.336,2.828c2.891.164,11.555.164,14.445,0,2.8-.133,5.289-.773,7.336-2.828s2.688-4.531,2.828-7.336C35.055-10.68,35.055-19.336,34.891-22.227ZM31.156-4.687a5.908,5.908,0,0,1-3.328,3.328c-2.3.914-7.773.7-10.32.7s-8.023.2-10.32-.7A5.908,5.908,0,0,1,3.859-4.687c-.914-2.3-.7-7.773-.7-10.32s-.2-8.023.7-10.32a5.908,5.908,0,0,1,3.328-3.328c2.3-.914,7.773-.7,10.32-.7s8.023-.2,10.32.7a5.908,5.908,0,0,1,3.328,3.328c.914,2.3.7,7.773.7,10.32S32.07-6.984,31.156-4.687Z' transform='translate(0.006 32.514)'/%3E%3C/svg%3E%0A");
  background-size: contain;
}
.instagram__slider {
  margin-left: 70px !important;
  margin-right: 0;
  width: calc(100% - 70px);
}
.instagram__slider .swiper-slide {
  overflow: hidden;
  aspect-ratio: 1/1;
  width: 300px;
  border-radius: var(--border-radius--med);
}
@media (min-width: 768px) {
  .instagram__slider .swiper-slide {
    width: 500px;
    height: 500px;
  }
}
.instagram__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/*============================================================================
  Footer
*/
#footer {
  text-align: center;
  padding: 65px 40px 25px;
}
#footer img {
  display: block;
  margin: auto;
}
#footer img.footer-little-different {
  margin-bottom: 120px;
  width: 100%;
  max-width: 600px;
}
#footer img.footer-site-logo {
  margin-bottom: 55px;
}

/*============================================================================
  Animations
*/
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}