@media all, bookshop {

.contact-form-component {
  /* Override Bulma */
}
.contact-form-component .container {
  max-width: 1200px;
}
.contact-form-component .main-title {
  margin-bottom: 5rem;
}
.contact-form-component .contact-item {
  padding: 15px 20px 0px 20px;
  border-radius: 5px;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.02), 0 2px 2px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.02), 0 8px 8px rgba(0, 0, 0, 0.02), 0 16px 16px rgba(0, 0, 0, 0.02);
}
.contact-form-component .contact-item a {
  display: flex;
  justify-content: space-between;
}
.contact-form-component .contact-item span {
  font-size: 1.5rem;
}
.contact-form-component form {
  padding: 4rem 3rem 3.5rem 3rem;
  /* background: rgba(255,255,255,0.1); */
  background: #e3e8db;
  background: #f3f8eb;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
.contact-form-component .fa-brands {
  font-size: 2rem;
}
.contact-form-component .checkbox,
.contact-form-component .radio {
  display: block;
  margin-bottom: 0.75rem;
}
.contact-form-component .checkbox input,
.contact-form-component .radio input {
  margin-right: 5px;
}
.contact-form-component .radio + .radio {
  margin-left: 0;
}
.contact-form-component .select,
.contact-form-component select {
  width: 100%;
}
.contact-form-component label.label {
  font-weight: 600;
}
.contact-form-component .other-option-wrapper {
  display: none;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.04);
}

.cms-editor-active .product-carousel-component .product-carousel-slide {
  opacity: 1;
}

.cms-editor-active .product-carousel-component .content * {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.product-carousel-component.pt-0 .column {
  padding-top: 0;
}

.product-carousel-component.pb-0 .column {
  padding-bottom: 0;
}

.product-carousel-component {
  position: relative;
  min-height: 200px;
  /* Fix the small space added below the img tag and the contaienr div */
  /* --- SLIDE FADE IN --- */
  /* if SLIDING option is on, then can keep all individual slides visible --- */
  /* --- OVERLAY TEXT --- */
}
.product-carousel-component .fa-magnifying-glass-plus {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 30px;
  transition: 0.4s background-color ease;
  color: rgba(0, 0, 0, 0.2);
}
.product-carousel-component .fa-magnifying-glass-plus:hover {
  color: rgba(0, 0, 0, 0.6);
}
.product-carousel-component .product-carousel-outer {
  position: relative;
  height: 100%;
}
.product-carousel-component .product-carousel-middle {
  position: relative;
  display: flex;
  overflow: hidden;
  height: 100%;
  text-align: center;
  /* padding: 20px; */
}
.product-carousel-component .product-carousel-inner {
  display: flex;
  position: relative;
  left: 0;
  height: 100%;
  width: 100%;
}
.product-carousel-component .product-carousel-inner.product-carousel-slide-on {
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}
.product-carousel-component .product-carousel-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  cursor: pointer;
}
.product-carousel-component .product-carousel-slide img {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.product-carousel-component .product-carousel-nav-container {
  display: none;
  position: absolute;
  z-index: 3;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.product-carousel-component .product-carousel-prev, .product-carousel-component .product-carousel-next {
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.4s background-color ease;
  border-radius: 3px;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.075);
}
.product-carousel-component .product-carousel-next {
  right: 0;
}
.product-carousel-component .product-carousel-prev:hover, .product-carousel-component .product-carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.product-carousel-component .product-carousel-nav-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.product-carousel-component .product-carousel-active, .product-carousel-component .product-carousel-nav-dot:hover {
  background-color: #717171;
}
.product-carousel-component .product-carousel-fade-in {
  animation-name: product-carousel-fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes product-carousel-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.product-carousel-component .product-carousel-slide-on .product-carousel-slide {
  opacity: 1;
}
.product-carousel-component .product-carousel-slide-on .product-carousel-slide.product-carousel-fade-in {
  animation: none;
  opacity: 1;
}
.error-component img {
  max-width: 450px;
}

.breadcrumbs-component .content ul {
  margin-left: 0;
}
.breadcrumbs-component .breadcrumb ul {
  display: flex;
  align-items: center;
}
.breadcrumbs-component .breadcrumb li:first-child a {
  padding-left: 0.75em;
}
.breadcrumbs-component .breadcrumb li + li::before {
  margin-left: 20px;
}
.breadcrumbs-component .breadcrumb li.is-active a {
  padding-right: 0;
  color: unset !important;
  text-decoration: none;
}

.cms-editor-active .carousel-component .carousel-slide {
  opacity: 1;
}

.cms-editor-active .carousel-component .preloader-section-mask,
.cms-editor-active .carousel-component .carousel-gradient {
  opacity: 0;
  pointer-events: none;
}

.cms-editor-active .carousel-component .content * {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.carousel-component {
  position: relative;
  background-color: #eee;
  padding-top: 0 !important;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  /* --- SLIDE FADE IN --- */
  /* if SLIDING option is on, then can keep all individual slides visible --- */
  /* --- OVERLAY TEXT --- */
}
.carousel-component .carousel-outer {
  position: relative;
  /* Height can be set wihin admin */
}
.carousel-component .carousel-middle {
  position: relative;
  display: flex;
  overflow: hidden;
  height: 100%;
}
.carousel-component .carousel-inner {
  display: flex;
  position: relative;
  left: 0;
  height: 100%;
  width: 100%;
}
.carousel-component .carousel-inner.carousel-slide-on {
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}
.carousel-component .carousel-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
}
.carousel-component .carousel-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.carousel-component .carousel-slide .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.carousel-component .carousel-slide .container,
.carousel-component .carousel-slide .columns,
.carousel-component .carousel-slide .column,
.carousel-component .carousel-slide .content {
  height: 100%;
}
.carousel-component .carousel-slide .columns {
  margin-top: 0;
}
.carousel-component .carousel-slide .column {
  padding-top: 0;
  padding-bottom: 0;
}
.carousel-component .carousel-slide .content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 40px 0;
}
.carousel-component .carousel-slide .content.top-left {
  justify-content: start;
  margin-top: 50px;
}
.carousel-component .carousel-slide .content.center-left {
  justify-content: center;
}
.carousel-component .carousel-slide .content.bottom-left {
  justify-content: end;
}
.carousel-component .carousel-slide .content.top-right {
  justify-content: start;
  text-align: right;
  margin-top: 50px;
}
.carousel-component .carousel-slide .content.center-right {
  justify-content: center;
  text-align: right;
}
.carousel-component .carousel-slide .content.bottom-right {
  justify-content: end;
  text-align: right;
}
.carousel-component .carousel-slide .content.top-center {
  justify-content: start;
  text-align: center;
  margin-top: 50px;
}
.carousel-component .carousel-slide .content.center-center {
  justify-content: center;
  text-align: center;
}
.carousel-component .carousel-slide .content.bottom-center {
  justify-content: end;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .carousel-component .carousel-slide .content.top-left {
    margin-top: 100px;
  }
  .carousel-component .carousel-slide .content.top-right {
    margin-top: 100px;
  }
  .carousel-component .carousel-slide .content.top-center {
    margin-top: 100px;
  }
}
.carousel-component .carousel-nav-container {
  position: absolute;
  z-index: 3;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.carousel-component .carousel-prev, .carousel-component .carousel-next {
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.4s background-color ease;
  border-radius: 3px;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}
.carousel-component .carousel-next {
  right: 0;
}
.carousel-component .carousel-prev:hover, .carousel-component .carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.carousel-component .carousel-nav-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.carousel-component .carousel-active, .carousel-component .carousel-nav-dot:hover {
  background-color: #717171;
}
.carousel-component .carousel-fade-in {
  animation-name: carousel-fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes carousel-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.carousel-component .carousel-slide-on .carousel-slide {
  opacity: 1;
}
.carousel-component .carousel-slide-on .carousel-slide.carousel-fade-in {
  animation: none;
  opacity: 1;
}
.carousel-component .carousel-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 0.75s; /* Safari */
  transition-delay: 0.75s;
}
.carousel-component .carousel-sub-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 1.15s; /* Safari */
  transition-delay: 1.15s;
}
@media screen and (min-width: 769px) {
  .carousel-component .carousel-title {
    font-size: 2.5rem;
  }
  .carousel-component .carousel-sub-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1024px) {
  .carousel-component .carousel-title {
    font-size: 4rem;
  }
  .carousel-component .carousel-sub-title {
    font-size: 2rem;
  }
}
.carousel-component .carousel-fade-in .carousel-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.carousel-component .carousel-fade-in .carousel-sub-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.carousel-component .carousel-gradient {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}
.carousel-component .carousel-gradient.top-left {
  background: linear-gradient(315deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.center-left {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.bottom-left {
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.top-right {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.center-right {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.bottom-right {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.top-center {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient.center-center {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}
.carousel-component .carousel-gradient.bottom-center {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.carousel-component .carousel-gradient-fade-in {
  animation-name: carousel-fade-in;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 768px) {
  .carousel-component .small-vh-100 {
    height: 100vh;
  }
  .carousel-component .small-vh-95 {
    height: 95vh;
  }
  .carousel-component .small-vh-85 {
    height: 85vh;
  }
  .carousel-component .small-vh-75 {
    height: 75vh;
  }
  .carousel-component .small-vh-65 {
    height: 65vh;
  }
  .carousel-component .small-vh-55 {
    height: 55vh;
  }
  .carousel-component .small-vh-50 {
    height: 50vh;
  }
  .carousel-component .small-vh-45 {
    height: 45vh;
  }
  .carousel-component .small-vh-40 {
    height: 40vh;
  }
  .carousel-component .small-px-1000 {
    height: 1000px;
  }
  .carousel-component .small-px-950 {
    height: 950px;
  }
  .carousel-component .small-px-850 {
    height: 850px;
  }
  .carousel-component .small-px-750 {
    height: 750px;
  }
  .carousel-component .small-px-650 {
    height: 650px;
  }
  .carousel-component .small-px-550 {
    height: 550px;
  }
  .carousel-component .small-px-500 {
    height: 500px;
  }
  .carousel-component .small-px-450 {
    height: 450px;
  }
  .carousel-component .small-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .carousel-component .medium-vh-100 {
    height: 100vh;
  }
  .carousel-component .medium-vh-95 {
    height: 95vh;
  }
  .carousel-component .medium-vh-85 {
    height: 85vh;
  }
  .carousel-component .medium-vh-75 {
    height: 75vh;
  }
  .carousel-component .medium-vh-65 {
    height: 65vh;
  }
  .carousel-component .medium-vh-55 {
    height: 55vh;
  }
  .carousel-component .medium-vh-50 {
    height: 50vh;
  }
  .carousel-component .medium-vh-45 {
    height: 45vh;
  }
  .carousel-component .medium-vh-40 {
    height: 40vh;
  }
  .carousel-component .medium-px-1000 {
    height: 1000px;
  }
  .carousel-component .medium-px-950 {
    height: 950px;
  }
  .carousel-component .medium-px-850 {
    height: 850px;
  }
  .carousel-component .medium-px-750 {
    height: 750px;
  }
  .carousel-component .medium-px-650 {
    height: 650px;
  }
  .carousel-component .medium-px-550 {
    height: 550px;
  }
  .carousel-component .medium-px-500 {
    height: 500px;
  }
  .carousel-component .medium-px-450 {
    height: 450px;
  }
  .carousel-component .medium-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 1024px) {
  .carousel-component .large-vh-100 {
    /* height: 100vh; */
    height: calc(100vh - var(--main-container-top-padding));
  }
  .carousel-component .large-vh-95 {
    /* height: 95vh; */
    height: calc(95vh - var(--main-container-top-padding));
  }
  .carousel-component .large-vh-85 {
    height: 85vh;
  }
  .carousel-component .large-vh-75 {
    height: 75vh;
  }
  .carousel-component .large-vh-65 {
    height: 65vh;
  }
  .carousel-component .large-vh-55 {
    height: 55vh;
  }
  .carousel-component .large-vh-50 {
    height: 50vh;
  }
  .carousel-component .large-vh-45 {
    height: 45vh;
  }
  .carousel-component .large-vh-40 {
    height: 40vh;
  }
  .carousel-component .large-px-1000 {
    height: 1000px;
  }
  .carousel-component .large-px-950 {
    height: 950px;
  }
  .carousel-component .large-px-850 {
    height: 850px;
  }
  .carousel-component .large-px-750 {
    height: 750px;
  }
  .carousel-component .large-px-650 {
    height: 650px;
  }
  .carousel-component .large-px-550 {
    height: 550px;
  }
  .carousel-component .large-px-500 {
    height: 500px;
  }
  .carousel-component .large-px-450 {
    height: 450px;
  }
  .carousel-component .large-px-400 {
    height: 400px;
  }
}

@media screen and (min-width: 1024px) {
  /* If this component is the very first one in the page (first section within main) then
  add a bit of padding so that any text content added towards the top is not too close to
  the bottom of the navbar. */
  main .section.carousel-component:first-of-type .container {
    padding-top: 50px;
  }
}
.embed-component {
  /* This is waht FACEBOOK REELS uses */
}
.embed-component .embed-wrapper {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.05);
  line-height: 0;
}
.embed-component .ratio-1-1 iframe {
  aspect-ratio: 1/1;
}
.embed-component .ratio-5-4 iframe {
  aspect-ratio: 5/4;
}
.embed-component .ratio-4-3 iframe {
  aspect-ratio: 4/3;
}
.embed-component .ratio-16-9 iframe {
  aspect-ratio: 16/9;
}
.embed-component .ratio-2-1 iframe {
  aspect-ratio: 2/1;
}
.embed-component .ratio-3-1 iframe {
  aspect-ratio: 3/1;
}
.embed-component .ratio-4-5 iframe {
  aspect-ratio: 4/5;
}
.embed-component .ratio-3-4 iframe {
  aspect-ratio: 3/4;
}
.embed-component .ratio-2-3 iframe {
  aspect-ratio: 2/3;
}
.embed-component .ratio-3-5 iframe {
  aspect-ratio: 3/5;
}
.embed-component .ratio-9-16 iframe {
  aspect-ratio: 9.2/16;
}
.embed-component .ratio-1-1 iframe,
.embed-component .ratio-5-4 iframe,
.embed-component .ratio-4-3 iframe,
.embed-component .ratio-16-9 iframe,
.embed-component .ratio-2-1 iframe,
.embed-component .ratio-3-1 iframe,
.embed-component .ratio-4-5 iframe,
.embed-component .ratio-3-4 iframe,
.embed-component .ratio-2-3 iframe,
.embed-component .ratio-3-5 iframe {
  width: 100%;
  height: auto;
}
.embed-component .ratio-9-16 iframe {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* Keep all FAQ items open in editor. */
.cms-editor-active .faq-content {
  grid-template-rows: 1fr !important;
}

.faq-component h1 {
  text-transform: uppercase;
}
.faq-wrapper {
  border-left: solid 3px;
  margin-left: 10px;
}
.faq-panel {
  position: relative;
  padding-left: 3rem;
}
.faq-dot {
  position: absolute;
  left: -12px;
  top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid;
}
.faq-trigger {
  position: relative;
  cursor: pointer;
  padding-right: 40px;
  margin-bottom: 20px;
}
.faq-trigger::before, .faq-trigger::after {
  position: absolute;
  top: 12px;
  right: 10px;
  content: "";
  display: block;
  width: 20px;
  height: 3px;
  background: currentcolor;
  transition: transform 500ms;
}
.faq-trigger::after {
  rotate: 90deg;
}
.faq-trigger[aria-expanded=true]::before, .faq-trigger[aria-expanded=true]::after {
  transform: rotate(45deg);
}
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms;
  cursor: default;
}
.faq-content[aria-hidden=false] {
  grid-template-rows: 1fr;
}
.faq-content > div {
  overflow: hidden;
}

.feature-alt-component {
  /* Prevent oveflow of items positioned out of the horizontal bounds of the viewport (e.g. when using gsap fade-in's from left and right and they initially set to say +/-20px).
     only really notice this on mobile at times, but is annoying as it adds a small horizontal scoll component which is unwanted. */
  overflow: hidden;
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .feature-alt-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.feature-alt-component .feature-title {
  margin-bottom: 2rem;
}
.feature-alt-component .feature-description {
  margin-bottom: 2rem;
}
.feature-alt-component .feature-image-wrapper {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.feature-alt-component .feature-image-wrapper img {
  object-fit: cover;
  /* aspect-ratio: auto; */
  width: 100%;
  height: 100%;
}
.feature-alt-component .sp-non-parallax-wrapper,
.feature-alt-component .sp-parallax-wrapper {
  overflow: hidden;
  /* 'aspect-ratio' is set in the template. */
}

.feature-background-color-component {
  min-height: 100vh;
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .feature-background-color-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.feature-background-color-component .item-title {
  margin-bottom: 3rem;
}
.feature-background-color-component .section {
  border: dotted 1px #000;
}
.feature-background-color-component .image-wrapper {
  width: 100%;
  max-width: 600px;
  line-height: 0;
}
.feature-background-color-component .image-wrapper img {
  object-position: center center; /* The default */
}

/* If this is the last item before the footer... */
@media screen and (min-width: 1024px) {
  main .feature-background-color-container + .footer-spacer {
    display: none;
  }
}
.feature-component {
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .feature-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.feature-component .feature-title {
  margin-bottom: 2rem;
}
.feature-component .feature-description {
  margin-bottom: 2rem;
}
.feature-component .feature-image-wrapper {
  width: 100%;
  height: 100%;
  max-width: 600px;
  line-height: 0;
}
.feature-component .feature-image-wrapper.use-original {
  height: auto;
}
.feature-component .feature-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center center; /* default */
}
.feature-component .sp-non-parallax-wrapper,
.feature-component .sp-parallax-wrapper {
  overflow: hidden;
  /* 'aspect-ratio' is set in the template. */
}

.cms-editor-active .flip-card-component .flip-card-front {
  opacity: 1;
  scale: 1;
}

/* Taken from: https://www.smashingmagazine.com/2020/02/magic-flip-cards-common-sizing-problem/ */
/* Here: https://codepen.io/smashingmag/pen/xxGKLZO */
:root {
  --flip-time: 0.8s;
}

.flip-card-component .flip-cards {
  flex-wrap: wrap;
}
.flip-card-component .flip-cards h3 {
  /* Large font text seems to push out the size of the coumns so they become uneven. */
  /* Add this where run the risk of this happening, but best to probably avoid larger fonts. */
  word-break: break-all;
}
.flip-card-component .flip-card {
  perspective: 100rem;
  display: flex;
  z-index: 0;
  cursor: pointer;
}
.flip-card-component .flip-card-body {
  display: flex;
  flex: 1;
  transform-style: preserve-3d;
  transition: var(--flip-time) transform;
}
.flip-card-component .flip-card-front, .flip-card-component .flip-card-back {
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  min-width: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: #fff;
  /* IMPORTANT NOTE: Don't apply padding diretly to the flip-cards (front or back). Seems to upset the sizing and gap of the
  cards at certain widths of the container. Looks fine until you have a play with resizing the browser. You also can't apply
  padding to any child elements inside the flip cards. So a way I found to overcome is to apply a percentage width
  to the '.content' (child) div. Can also safely apply top and bottom padding. */
}
.flip-card-component .flip-card-front {
  /* GSAP animation works on opacity and scale */
  opacity: 0;
  scale: 0.9;
  position: relative;
  /* Push button to the bottom of card. */
  justify-content: flex-end;
  z-index: 1;
}
.flip-card-component .flip-card-front img {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
.flip-card-component .flip-card-front .content {
  z-index: 2;
  width: 80%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.flip-card-component .flip-card-back .content {
  width: 80%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* Back up measure to allow scroll (and hide overflow) if have aspect ratio present via admin
  (compared with leaving at natural height for rthese divs). Only set on back for now as have background image
  on front card anyway - no overflow risk. */
  overflow: auto;
}
.flip-card-component .flip-card-back .content h3, .flip-card-component .flip-card-back .content p {
  color: #333;
}
.flip-card-component .flip-card-front .content .card-button, .flip-card-component .flip-card-back .content .card-button {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ddd;
  border: solid 1px #888;
  padding-top: calc(0.5em - 1px);
  padding-bottom: calc(0.5em - 1px);
  padding-left: 1.5em;
  padding-right: 1.5em;
  text-align: center;
  max-width: 100%;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
  word-break: break-all;
}
.flip-card-component .flip-card-back .content .card-button {
  background-color: #fff;
  color: #333;
  border: solid 1px #333;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 2em;
}
.flip-card-component .flip-card-back {
  transform: rotateY(-180deg) translate(100%, 0);
}
.flip-card-component .flip-card-rotate {
  transform: rotateY(-180deg);
}
.flip-card-component .flip-card-shadow, .flip-card-component .flip-card-front, .flip-card-component .flip-card-back {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}

@media only screen and (max-width: 768px) {
  /* Keep the cards from being too big when display in single column on small screen. Also centered. */
  .flip-card-component .flip-card-body {
    max-width: 450px;
    margin: 0 auto;
  }
}
/* Make sure link to full image is deactivated in the editor */
.cms-editor-active .lightgallery .column a {
  pointer-events: none;
}

.cms-editor-active .gallery-component .lightgallery .gallery-thumbnail-link {
  opacity: 1;
  scale: 1;
}

.gallery-component .lightgallery .gallery-thumbnail-link {
  opacity: 0;
  scale: 0.9;
  line-height: 0;
}
.gallery-component i.fa-magnifying-glass {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #fff;
  font-size: 30px;
  text-shadow: 2px 2px #333;
}

:root {
  --bulma-body-line-height: 1.6;
  --bulma-family-primary: "Comfortaa", sans-serif;
  --bulma-family-secondary: "Comfortaa", sans-serif;
  --bulma-light-theme-override-family-secondary: "Comfortaa", sans-serif;
  --bulma-body-color: #333333;
  --bulma-link: #666666;
  --bulma-body-background-color: #ffffff;
}

.content {
  --bulma-content-blockquote-border-left: 5px solid #e3e8db;
}

.cms-editor-active .hero-alt-wrapper .hero-mask,
.cms-editor-active .hero-alt-wrapper .preloader-section-mask {
  opacity: 0;
  pointer-events: none;
}

.cms-editor-active .hero-alt-wrapper .content * {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.hero-alt-component {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.hero-alt-component .overflow-mask,
.hero-alt-component .sp-parallax-wrapper {
  overflow: hidden;
}
.hero-alt-component .hero-image,
.hero-alt-component .feature-image-wrapper {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.hero-alt-component .hero-image img,
.hero-alt-component .feature-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero-alt-component .container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.hero-alt-component .columns,
.hero-alt-component .column,
.hero-alt-component .content {
  height: 100%;
}
.hero-alt-component .columns {
  margin-top: 0;
  width: 100%;
}
.hero-alt-component .column {
  padding-top: 0;
  padding-bottom: 0;
}
.hero-alt-component .content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 40px 0 60px 0;
}
@media screen and (max-width: 768px) {
  .hero-alt-component .small-vh-100 {
    height: 100vh;
  }
  .hero-alt-component .small-vh-95 {
    height: 95vh;
  }
  .hero-alt-component .small-vh-85 {
    height: 85vh;
  }
  .hero-alt-component .small-vh-75 {
    height: 75vh;
  }
  .hero-alt-component .small-vh-65 {
    height: 65vh;
  }
  .hero-alt-component .small-vh-55 {
    height: 55vh;
  }
  .hero-alt-component .small-vh-50 {
    height: 50vh;
  }
  .hero-alt-component .small-vh-45 {
    height: 45vh;
  }
  .hero-alt-component .small-vh-40 {
    height: 40vh;
  }
  .hero-alt-component .small-px-1000 {
    height: 1000px;
  }
  .hero-alt-component .small-px-950 {
    height: 950px;
  }
  .hero-alt-component .small-px-850 {
    height: 850px;
  }
  .hero-alt-component .small-px-750 {
    height: 750px;
  }
  .hero-alt-component .small-px-650 {
    height: 650px;
  }
  .hero-alt-component .small-px-550 {
    height: 550px;
  }
  .hero-alt-component .small-px-500 {
    height: 500px;
  }
  .hero-alt-component .small-px-450 {
    height: 450px;
  }
  .hero-alt-component .small-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .hero-alt-component .medium-vh-100 {
    height: 100vh;
  }
  .hero-alt-component .medium-vh-95 {
    height: 95vh;
  }
  .hero-alt-component .medium-vh-85 {
    height: 85vh;
  }
  .hero-alt-component .medium-vh-75 {
    height: 75vh;
  }
  .hero-alt-component .medium-vh-65 {
    height: 65vh;
  }
  .hero-alt-component .medium-vh-55 {
    height: 55vh;
  }
  .hero-alt-component .medium-vh-50 {
    height: 50vh;
  }
  .hero-alt-component .medium-vh-45 {
    height: 45vh;
  }
  .hero-alt-component .medium-vh-40 {
    height: 40vh;
  }
  .hero-alt-component .medium-px-1000 {
    height: 1000px;
  }
  .hero-alt-component .medium-px-950 {
    height: 950px;
  }
  .hero-alt-component .medium-px-850 {
    height: 850px;
  }
  .hero-alt-component .medium-px-750 {
    height: 750px;
  }
  .hero-alt-component .medium-px-650 {
    height: 650px;
  }
  .hero-alt-component .medium-px-550 {
    height: 550px;
  }
  .hero-alt-component .medium-px-500 {
    height: 500px;
  }
  .hero-alt-component .medium-px-450 {
    height: 450px;
  }
  .hero-alt-component .medium-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-alt-component .large-vh-100 {
    height: calc(100vh - var(--main-container-top-padding));
  }
  .hero-alt-component .large-vh-95 {
    height: calc(95vh - var(--main-container-top-padding));
  }
  .hero-alt-component .large-vh-85 {
    height: 85vh;
  }
  .hero-alt-component .large-vh-75 {
    height: 75vh;
  }
  .hero-alt-component .large-vh-65 {
    height: 65vh;
  }
  .hero-alt-component .large-vh-55 {
    height: 55vh;
  }
  .hero-alt-component .large-vh-50 {
    height: 50vh;
  }
  .hero-alt-component .large-vh-45 {
    height: 45vh;
  }
  .hero-alt-component .large-vh-40 {
    height: 40vh;
  }
  .hero-alt-component .large-px-1000 {
    height: 1000px;
  }
  .hero-alt-component .large-px-950 {
    height: 950px;
  }
  .hero-alt-component .large-px-850 {
    height: 850px;
  }
  .hero-alt-component .large-px-750 {
    height: 750px;
  }
  .hero-alt-component .large-px-650 {
    height: 650px;
  }
  .hero-alt-component .large-px-550 {
    height: 550px;
  }
  .hero-alt-component .large-px-500 {
    height: 500px;
  }
  .hero-alt-component .large-px-450 {
    height: 450px;
  }
  .hero-alt-component .large-px-400 {
    height: 400px;
  }
}

.hero-alt-component-constrained {
  position: relative;
  /* Adjust so the semi-opaque mask fits perfectly over the image (img) */
}
.hero-alt-component-constrained .oveflow-mask,
.hero-alt-component-constrained .sp-parallax-wrapper {
  overflow: hidden;
}
.hero-alt-component-constrained .hero-image-wrapper {
  position: relative;
}
.hero-alt-component-constrained .hero-image-wrapper .column {
  padding-top: 0;
  padding-bottom: 0;
}
.hero-alt-component-constrained .hero-image,
.hero-alt-component-constrained .feature-image-wrapper {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.hero-alt-component-constrained .hero-image img,
.hero-alt-component-constrained .feature-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero-alt-component-constrained .text-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.hero-alt-component-constrained .content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 60px 40px;
  height: 100%;
}

.hero-alt-wrapper {
  /* --- SLIDE FADE IN --- */
  /* --- OVERLAY TEXT --- */
}
.hero-alt-wrapper .content.top-left {
  justify-content: start;
}
.hero-alt-wrapper .content.center-left {
  justify-content: center;
}
.hero-alt-wrapper .content.bottom-left {
  justify-content: end;
}
.hero-alt-wrapper .content.top-right {
  justify-content: start;
  text-align: right;
}
.hero-alt-wrapper .content.center-right {
  justify-content: center;
  text-align: right;
}
.hero-alt-wrapper .content.bottom-right {
  justify-content: end;
  text-align: right;
}
.hero-alt-wrapper .content.top-center {
  justify-content: start;
  text-align: center;
}
.hero-alt-wrapper .content.center-center {
  justify-content: center;
  text-align: center;
}
.hero-alt-wrapper .content.bottom-center {
  justify-content: end;
  text-align: center;
}
.hero-alt-wrapper .hero-fade-in {
  animation-name: hero-fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hero-alt-wrapper .hero-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
  font-family: "Comfortaa", sans-serif;
  text-transform: uppercase;
}
.hero-alt-wrapper .hero-sub-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 1.45s; /* Safari */
  transition-delay: 1.45s;
  font-family: "Comfortaa", sans-serif;
}
@media screen and (min-width: 769px) {
  .hero-alt-wrapper .hero-title {
    font-size: 2.5rem;
  }
  .hero-alt-wrapper .hero-sub-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1024px) {
  .hero-alt-wrapper .hero-title {
    font-size: 4rem;
  }
  .hero-alt-wrapper .hero-sub-title {
    font-size: 2rem;
  }
}
.hero-alt-wrapper .hero-fade-in .hero-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hero-alt-wrapper .hero-fade-in .hero-sub-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hero-alt-wrapper .hero-gradient {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.hero-alt-wrapper .hero-gradient.top-left {
  background: linear-gradient(315deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.center-left {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.bottom-left {
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.top-right {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.center-right {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.bottom-right {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.top-center {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-gradient.center-center {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}
.hero-alt-wrapper .hero-gradient.bottom-center {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-alt-wrapper .hero-grid {
  background: url(/uploads/theme/grid-overlay.png);
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}
.hero-alt-wrapper .hero-grid-fade-in {
  animation-name: hero-fade-in;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@media screen and (min-width: 1024px) {
  /* If this component is the very first one in the page (first section within main) then
  add a bit of padding so that any text content added towards the top is not too close to
  the bottom of the navbar. */
  main .section.hero-alt-component:first-of-type .container {
    padding-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .hero-alt-component,
  .hero-alt-component-constrained {
    /* Image Focal Point */
  }
  .hero-alt-component .mobile-center-center,
  .hero-alt-component-constrained .mobile-center-center {
    object-position: center center;
  }
  .hero-alt-component .mobile-center-top,
  .hero-alt-component-constrained .mobile-center-top {
    object-position: center top;
  }
  .hero-alt-component .mobile-center-bottom,
  .hero-alt-component-constrained .mobile-center-bottom {
    object-position: center bottom;
  }
  .hero-alt-component .mobile-left-top,
  .hero-alt-component-constrained .mobile-left-top {
    object-position: left top;
  }
  .hero-alt-component .mobile-left-center,
  .hero-alt-component-constrained .mobile-left-center {
    object-position: left center;
  }
  .hero-alt-component .mobile-left-bottom,
  .hero-alt-component-constrained .mobile-left-bottom {
    object-position: left bottom;
  }
  .hero-alt-component .mobile-right-top,
  .hero-alt-component-constrained .mobile-right-top {
    object-position: right top;
  }
  .hero-alt-component .mobile-right-center,
  .hero-alt-component-constrained .mobile-right-center {
    object-position: right center;
  }
  .hero-alt-component .mobile-right-bottom,
  .hero-alt-component-constrained .mobile-right-bottom {
    object-position: right bottom;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .hero-alt-component,
  .hero-alt-component-constrained {
    /* Image Focal Point */
  }
  .hero-alt-component .tablet-center-center,
  .hero-alt-component-constrained .tablet-center-center {
    object-position: center center;
  }
  .hero-alt-component .tablet-center-top,
  .hero-alt-component-constrained .tablet-center-top {
    object-position: center top;
  }
  .hero-alt-component .tablet-center-bottom,
  .hero-alt-component-constrained .tablet-center-bottom {
    object-position: center bottom;
  }
  .hero-alt-component .tablet-left-top,
  .hero-alt-component-constrained .tablet-left-top {
    object-position: left top;
  }
  .hero-alt-component .tablet-left-center,
  .hero-alt-component-constrained .tablet-left-center {
    object-position: left center;
  }
  .hero-alt-component .tablet-left-bottom,
  .hero-alt-component-constrained .tablet-left-bottom {
    object-position: left bottom;
  }
  .hero-alt-component .tablet-right-top,
  .hero-alt-component-constrained .tablet-right-top {
    object-position: right top;
  }
  .hero-alt-component .tablet-right-center,
  .hero-alt-component-constrained .tablet-right-center {
    object-position: right center;
  }
  .hero-alt-component .tablet-right-bottom,
  .hero-alt-component-constrained .tablet-right-bottom {
    object-position: right bottom;
  }
}
@media screen and (min-width: 1024px) {
  .hero-alt-component,
  .hero-alt-component-constrained {
    /* Image Focal Point */
  }
  .hero-alt-component .desktop-center-center,
  .hero-alt-component-constrained .desktop-center-center {
    object-position: center center;
  }
  .hero-alt-component .desktop-center-top,
  .hero-alt-component-constrained .desktop-center-top {
    object-position: center top;
  }
  .hero-alt-component .desktop-center-bottom,
  .hero-alt-component-constrained .desktop-center-bottom {
    object-position: center bottom;
  }
  .hero-alt-component .desktop-left-top,
  .hero-alt-component-constrained .desktop-left-top {
    object-position: left top;
  }
  .hero-alt-component .desktop-left-center,
  .hero-alt-component-constrained .desktop-left-center {
    object-position: left center;
  }
  .hero-alt-component .desktop-left-bottom,
  .hero-alt-component-constrained .desktop-left-bottom {
    object-position: left bottom;
  }
  .hero-alt-component .desktop-right-top,
  .hero-alt-component-constrained .desktop-right-top {
    object-position: right top;
  }
  .hero-alt-component .desktop-right-center,
  .hero-alt-component-constrained .desktop-right-center {
    object-position: right center;
  }
  .hero-alt-component .desktop-right-bottom,
  .hero-alt-component-constrained .desktop-right-bottom {
    object-position: right bottom;
  }
}

:root {
  --bulma-body-line-height: 1.6;
  --bulma-family-primary: "Comfortaa", sans-serif;
  --bulma-family-secondary: "Comfortaa", sans-serif;
  --bulma-light-theme-override-family-secondary: "Comfortaa", sans-serif;
  --bulma-body-color: #333333;
  --bulma-link: #666666;
  --bulma-body-background-color: #ffffff;
}

.content {
  --bulma-content-blockquote-border-left: 5px solid #e3e8db;
}

.cms-editor-active .hero-wrapper .hero-mask,
.cms-editor-active .hero-wrapper .preloader-section-mask {
  opacity: 0;
  pointer-events: none;
}

.cms-editor-active .hero-wrapper .content * {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.hero-component {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.hero-component .overflow-mask,
.hero-component .sp-parallax-wrapper {
  overflow: hidden;
}
.hero-component .hero-image,
.hero-component .feature-image-wrapper {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.hero-component .hero-image img,
.hero-component .feature-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero-component .container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.hero-component .columns,
.hero-component .column,
.hero-component .content {
  height: 100%;
}
.hero-component .columns {
  margin-top: 0;
  width: 100%;
}
.hero-component .column {
  padding-top: 0;
  padding-bottom: 0;
}
.hero-component .content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 40px 0 60px 0;
}
@media screen and (max-width: 768px) {
  .hero-component .small-vh-100 {
    height: 100vh;
  }
  .hero-component .small-vh-95 {
    height: 95vh;
  }
  .hero-component .small-vh-85 {
    height: 85vh;
  }
  .hero-component .small-vh-75 {
    height: 75vh;
  }
  .hero-component .small-vh-65 {
    height: 65vh;
  }
  .hero-component .small-vh-55 {
    height: 55vh;
  }
  .hero-component .small-vh-50 {
    height: 50vh;
  }
  .hero-component .small-vh-45 {
    height: 45vh;
  }
  .hero-component .small-vh-40 {
    height: 40vh;
  }
  .hero-component .small-px-1000 {
    height: 1000px;
  }
  .hero-component .small-px-950 {
    height: 950px;
  }
  .hero-component .small-px-850 {
    height: 850px;
  }
  .hero-component .small-px-750 {
    height: 750px;
  }
  .hero-component .small-px-650 {
    height: 650px;
  }
  .hero-component .small-px-550 {
    height: 550px;
  }
  .hero-component .small-px-500 {
    height: 500px;
  }
  .hero-component .small-px-450 {
    height: 450px;
  }
  .hero-component .small-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .hero-component .medium-vh-100 {
    height: 100vh;
  }
  .hero-component .medium-vh-95 {
    height: 95vh;
  }
  .hero-component .medium-vh-85 {
    height: 85vh;
  }
  .hero-component .medium-vh-75 {
    height: 75vh;
  }
  .hero-component .medium-vh-65 {
    height: 65vh;
  }
  .hero-component .medium-vh-55 {
    height: 55vh;
  }
  .hero-component .medium-vh-50 {
    height: 50vh;
  }
  .hero-component .medium-vh-45 {
    height: 45vh;
  }
  .hero-component .medium-vh-40 {
    height: 40vh;
  }
  .hero-component .medium-px-1000 {
    height: 1000px;
  }
  .hero-component .medium-px-950 {
    height: 950px;
  }
  .hero-component .medium-px-850 {
    height: 850px;
  }
  .hero-component .medium-px-750 {
    height: 750px;
  }
  .hero-component .medium-px-650 {
    height: 650px;
  }
  .hero-component .medium-px-550 {
    height: 550px;
  }
  .hero-component .medium-px-500 {
    height: 500px;
  }
  .hero-component .medium-px-450 {
    height: 450px;
  }
  .hero-component .medium-px-400 {
    height: 400px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-component .large-vh-100 {
    height: calc(100vh - var(--main-container-top-padding));
  }
  .hero-component .large-vh-95 {
    height: calc(95vh - var(--main-container-top-padding));
  }
  .hero-component .large-vh-85 {
    height: 85vh;
  }
  .hero-component .large-vh-75 {
    height: 75vh;
  }
  .hero-component .large-vh-65 {
    height: 65vh;
  }
  .hero-component .large-vh-55 {
    height: 55vh;
  }
  .hero-component .large-vh-50 {
    height: 50vh;
  }
  .hero-component .large-vh-45 {
    height: 45vh;
  }
  .hero-component .large-vh-40 {
    height: 40vh;
  }
  .hero-component .large-px-1000 {
    height: 1000px;
  }
  .hero-component .large-px-950 {
    height: 950px;
  }
  .hero-component .large-px-850 {
    height: 850px;
  }
  .hero-component .large-px-750 {
    height: 750px;
  }
  .hero-component .large-px-650 {
    height: 650px;
  }
  .hero-component .large-px-550 {
    height: 550px;
  }
  .hero-component .large-px-500 {
    height: 500px;
  }
  .hero-component .large-px-450 {
    height: 450px;
  }
  .hero-component .large-px-400 {
    height: 400px;
  }
}

.hero-component-constrained {
  position: relative;
  /* Adjust so the semi-opaque mask fits perfectly over the image (img) */
}
.hero-component-constrained .oveflow-mask,
.hero-component-constrained .sp-parallax-wrapper {
  overflow: hidden;
}
.hero-component-constrained .hero-image-wrapper {
  position: relative;
}
.hero-component-constrained .hero-image-wrapper .column {
  padding-top: 0;
  padding-bottom: 0;
}
.hero-component-constrained .hero-image,
.hero-component-constrained .feature-image-wrapper {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.hero-component-constrained .hero-image img,
.hero-component-constrained .feature-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero-component-constrained .text-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.hero-component-constrained .content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: 60px 40px;
  height: 100%;
}

.hero-wrapper {
  /* --- SLIDE FADE IN --- */
  /* --- OVERLAY TEXT --- */
}
.hero-wrapper .content.top-left {
  justify-content: start;
}
.hero-wrapper .content.center-left {
  justify-content: center;
}
.hero-wrapper .content.bottom-left {
  justify-content: end;
}
.hero-wrapper .content.top-right {
  justify-content: start;
  text-align: right;
}
.hero-wrapper .content.center-right {
  justify-content: center;
  text-align: right;
}
.hero-wrapper .content.bottom-right {
  justify-content: end;
  text-align: right;
}
.hero-wrapper .content.top-center {
  justify-content: start;
  text-align: center;
}
.hero-wrapper .content.center-center {
  justify-content: center;
  text-align: center;
}
.hero-wrapper .content.bottom-center {
  justify-content: end;
  text-align: center;
}
.hero-wrapper .hero-fade-in {
  animation-name: hero-fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hero-wrapper .hero-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
  font-family: "Comfortaa", sans-serif;
  text-transform: uppercase;
}
.hero-wrapper .hero-sub-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 20px;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: opacity 800ms, -webkit-transform 600ms;
  transition: transform 800ms, opacity 600ms;
  -webkit-transition-delay: 1.45s; /* Safari */
  transition-delay: 1.45s;
  font-family: "Comfortaa", sans-serif;
}
@media screen and (min-width: 769px) {
  .hero-wrapper .hero-title {
    font-size: 2.5rem;
  }
  .hero-wrapper .hero-sub-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1024px) {
  .hero-wrapper .hero-title {
    font-size: 4rem;
  }
  .hero-wrapper .hero-sub-title {
    font-size: 2rem;
  }
}
.hero-wrapper .hero-fade-in .hero-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hero-wrapper .hero-fade-in .hero-sub-title {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hero-wrapper .hero-gradient {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.hero-wrapper .hero-gradient.top-left {
  background: linear-gradient(315deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.center-left {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.bottom-left {
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.top-right {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.center-right {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.bottom-right {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.top-center {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-gradient.center-center {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}
.hero-wrapper .hero-gradient.bottom-center {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-wrapper .hero-grid {
  background: url(/uploads/theme/grid-overlay.png);
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}
.hero-wrapper .hero-grid-fade-in {
  animation-name: hero-fade-in;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@media screen and (min-width: 1024px) {
  /* If this component is the very first one in the page (first section within main) then
  add a bit of padding so that any text content added towards the top is not too close to
  the bottom of the navbar. */
  main .section.hero-component:first-of-type .container {
    padding-top: 50px;
  }
}
.latest-posts-component .blog-post-thumb {
  aspect-ratio: 1/1;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
  background: #fff;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
.latest-posts-component .blog-post-thumb img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.latest-posts-component .blog-post-details {
  max-width: 400px;
  margin: 0 auto;
}

/* Set the animation positions to the default when viewed in the editor */
.cms-editor-active .members-component .gsap-element-wrapper .horizontal-line,
.cms-editor-active .members-component .gsap-element-wrapper .main-image,
.cms-editor-active .members-component .gsap-element-wrapper .main-title,
.cms-editor-active .members-component .gsap-element-wrapper .main-text {
  opacity: 1;
  transform: scale(1) translateX(0);
}

.members-component {
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .members-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.members-component .horizontal-line {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 20%;
  right: 20%;
  border: solid 2px #727D73;
  transform: scale(0.1) rotate(0deg);
}
@media screen and (max-width: 1024px) {
  .members-component .horizontal-line {
    transform: scale(0.1) rotate(90deg);
    left: 30%;
    right: 30%;
  }
}
.members-component .main-image {
  z-index: 1;
  width: 300px;
  height: 300px;
  transform: scale(0.3);
}
.members-component .main-image img {
  height: 100%;
  border-radius: 50%;
}
.members-component .main-title {
  background-color: #ddd;
  padding: 10px 20px;
  opacity: 0;
  transform: translateX(-100px);
}
.members-component .main-title h2 {
  font-weight: 600;
  margin: 0;
}
.members-component .main-text {
  background-color: #f4f4f4;
  padding: 40px 30px;
  opacity: 0;
  transform: scale(0.2) translateX(100px);
}

.modal-component {
  /* Need to specifiy color here or otherwise it inherits from the colour of the component */
}
.modal-component .modal {
  z-index: 1003;
}
.modal-component .modal-card-body .content * {
  color: #333;
}

.cms-editor-active .slider-component .slider-slide {
  opacity: 1;
}

.cms-editor-active .slider-component .preloader-section-mask {
  opacity: 0;
  pointer-events: none;
}

.cms-editor-active .slider-component .content * {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.slider-component {
  position: relative;
  /* padding: 0; */
  /* Let the section provide the padding to keep consitent with other components. Will
     probably need to change if start applying background colour to individual slides */
  /* --- SLIDE FADE IN --- */
  /* if SLIDING option is on, then can keep all individual slides visible --- */
}
.slider-component .slider-outer {
  position: relative;
  height: 100%;
}
.slider-component .slider-middle {
  position: relative;
  display: flex;
  overflow: hidden;
  height: 100%;
}
.slider-component .slider-inner {
  display: flex;
  position: relative;
  left: 0;
  height: 100%;
  width: 100%;
}
.slider-component .slider-inner.slider-slide-on {
  -webkit-transition: left 0.3s ease-out;
  transition: left 0.3s ease-out;
}
.slider-component .slider-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
}
.slider-component .slider-slide img {
  border-radius: 50%;
}
.slider-component .slider-slide .container,
.slider-component .slider-slide .columns,
.slider-component .slider-slide .column,
.slider-component .slider-slide .content {
  height: 100%;
}
.slider-component .slider-slide .columns {
  margin-top: 0;
}
.slider-component .slider-slide .column {
  padding-top: 0;
  padding-bottom: 0;
}
.slider-component .slider-slide .content {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
}
.slider-component .slider-slide .content.top-left {
  justify-content: start;
}
.slider-component .slider-slide .content.center-left {
  justify-content: center;
}
.slider-component .slider-slide .content.bottom-left {
  justify-content: end;
}
.slider-component .slider-slide .content.top-right {
  justify-content: start;
  text-align: right;
}
.slider-component .slider-slide .content.center-right {
  justify-content: center;
  text-align: right;
}
.slider-component .slider-slide .content.bottom-right {
  justify-content: end;
  text-align: right;
}
.slider-component .slider-slide .content.top-center {
  justify-content: start;
  text-align: center;
}
.slider-component .slider-slide .content.center-center {
  justify-content: center;
  text-align: center;
}
.slider-component .slider-slide .content.bottom-center {
  justify-content: end;
  text-align: center;
}
.slider-component .slider-nav-container {
  width: 100%;
  text-align: center;
  padding: 20px;
}
.slider-component .slider-prev, .slider-component .slider-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.4s background-color ease;
  border-radius: 3px;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}
.slider-component .slider-prev {
  left: 20px;
}
.slider-component .slider-next {
  right: 20px;
}
.slider-component .slider-prev:hover, .slider-component .slider-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.slider-component .slider-nav-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.slider-component .slider-active, .slider-component .slider-nav-dot:hover {
  background-color: #717171;
}
.slider-component .slider-fade-in {
  animation-name: slider-fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes slider-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.slider-component .slider-slide-on .slider-slide {
  opacity: 1;
}
.slider-component .slider-slide-on .slider-slide.slider-fade-in {
  animation: none;
  opacity: 1;
}

.snazzy-map {
  /* Remove padding at bottom of map */
  line-height: 0;
}

.sponsors-component {
  /* Default to plain white so copes with most logo scenarios */
  background: #fff;
}
.sponsors-component .sponsors-wrapper {
  margin-top: 1.75rem;
}
.sponsors-component a {
  display: inline-block;
}
.sponsors-component img {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 15px;
}
.sponsors-component img.landscape {
  width: 225px;
}
.sponsors-component img.landscape-wide-short {
  width: 235px;
}
.sponsors-component img.square {
  width: 165px;
}
.sponsors-component img.portrait {
  width: 165px;
}
.sponsors-component img.portrait-narrow-tall {
  width: 175px;
}
.sponsors-component img.grayscale {
  filter: grayscale(100%) brightness(1) contrast(1) opacity(0.8);
  transition: all 0.2s ease-in-out;
}
.sponsors-component img.grayscale:hover,
.sponsors-component img.grayscale.high-contrast:hover {
  filter: grayscale(0%) brightness(1) contrast(1) opacity(1);
  scale: 1.05;
}

.cms-editor-active .sub-navigation-summary-component .filter-item .content {
  opacity: 1;
  scale: 1;
}
.cms-editor-active .sub-navigation-summary-component .summary-item {
  opacity: 1;
  scale: 1;
}

.sub-navigation-summary-component {
  /* GSAP Stagger batched stagger function will schange these values. */
}
.sub-navigation-summary-component .filter-button-group .button.selected {
  /* A way to darken up the background but keeping the original background colour value
  (so doesn't matter what that button colour is). Helps keep it transferable between
  whatever the button colour is. Nice :) */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}
.sub-navigation-summary-component .filter-item .content,
.sub-navigation-summary-component .summary-item {
  opacity: 0;
  scale: 0.9;
}
.sub-navigation-summary-component .cover-mask {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-color: #ffffff;
  transition: 0.35s ease-in-out opacity;
  opacity: 0;
}
.sub-navigation-summary-component .cover-mask.opaque {
  opacity: 1;
  /* By adding 'transition: none' below, it means the transition will only work one way.
  That is, it will go fully opaque as soon as this class is added BUT when the class is removed
  it will be the slow transition. */
  transition: none;
}

.sub-navigation-component .sub-link {
  display: inline-block;
  background: #eee;
  padding: 4px 12px;
  margin: 2px 6px 6px 0px;
  text-decoration: none !important;
  color: #666 !important;
  font-size: 0.8rem;
  border-radius: 5px;
  font-weight: bold;
}
.sub-navigation-component .sub-link.is-active {
  background: #295baa; /* #fdb813; - yellow */
  color: #fff !important;
}

.tabs-component {
  /* Avoid the footer being  up high and then being pushed down after the first tab displays. */
  min-height: 95vh;
  /* Initially hide all tabs. Use height to hide rather than 'display: none' so keeps images loading, etc in all tabs. */
}
.tabs-component .tab-button-group .button.selected {
  /* A way to darken up the background but keeping the original background colour value
  (so doesn't matter what that button colour is). Helps keep it transferable between
  whatever the button colour is. Nice :) */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}
.tabs-component .tab-cover-mask {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* background-color: #ffffff; */
  transition: 0.25s ease-in-out opacity;
  opacity: 0;
}
.tabs-component .tab-cover-mask.opaque {
  opacity: 1;
  /* By adding 'transition: none' below, it means the transition will only work one way.
  That is, it will go fully opaque as soon as this class is added BUT when the class is removed
  it will be the slow transition. */
  transition: none;
}
.tabs-component .tab-items-wrapper {
  position: relative;
}
.tabs-component .tab-items-wrapper .tab-item {
  height: 0;
  overflow: hidden;
}

/* Keep all tabs open in editor. */
.cms-editor-active .tabs-component .tab-items-wrapper .tab-item {
  height: auto;
  overflow: visible;
  margin-bottom: 10px;
  border: dotted 1px #999;
}

.team-alt-component {
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .team-alt-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.team-alt-component .team-title {
  margin-top: 0;
  margin-bottom: 3rem;
  font-size: 130%;
}
.team-alt-component .team-description {
  margin-bottom: 2rem;
}
.team-alt-component .image-wrapper {
  width: 100%;
  max-width: 600px;
  line-height: 0;
}
.team-alt-component .image-wrapper img {
  object-position: center center; /* The default */
}

.team-component {
  /* Only when NOT single column display, allow the alternating left/right of image vs text */
}
@media screen and (min-width: 769px) {
  .team-component .vb-reverse-column-order {
    display: flex;
    flex-direction: row-reverse;
  }
}
.team-component .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
  max-width: 1100px;
}
.team-component .team-title {
  margin-top: 0;
  margin-bottom: 3rem;
  font-size: 130%;
}
.team-component .team-description {
  margin-bottom: 2rem;
}
.team-component .image-wrapper {
  width: 100%;
  max-width: 600px;
  line-height: 0;
}
.team-component .image-wrapper img {
  object-position: center center; /* The default */
}

:root {
  --bulma-body-line-height: 1.6;
  --bulma-family-primary: "Comfortaa", sans-serif;
  --bulma-family-secondary: "Comfortaa", sans-serif;
  --bulma-light-theme-override-family-secondary: "Comfortaa", sans-serif;
  --bulma-body-color: #333333;
  --bulma-link: #666666;
  --bulma-body-background-color: #ffffff;
}

.content {
  --bulma-content-blockquote-border-left: 5px solid #e3e8db;
}

.cms-editor-active .youtube-component .video-overlay img.cover {
  opacity: 1;
}

.cms-editor-active .youtube-component .play-button-wrapper {
  opacity: 1;
}

.youtube-component {
  position: relative;
  padding: 0 !important;
  /* Ensure not crazy big if screen is zoomed out past HD level */
  max-width: 1920px;
  margin: 0 auto !important;
  /* Not using the fade-in/out on the video overlay, instead using on the imges within it so can work them independently. */
  /* e.g. the background image is displayed first and only later the video player is created and ready does the play icon fade in. */
  /*.video-loading-message.fade-in { */
  /* opacity: 1; */
  /* } */
  /* Pulsing Play button based on: https://codepen.io/Bantina/pen/wmGOXy */
  /* --- Use padding approach for the responsive aspect ratio --- */
}
.youtube-component .video-overlay {
  position: absolute;
  display: flex;
  z-index: 17;
  inset: 0;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.youtube-component .video-overlay img.cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.youtube-component .video-overlay img.cover.fade-in {
  opacity: 1;
}
.youtube-component .video-loading-message {
  position: absolute;
  opacity: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: opacity 1s linear;
}
.youtube-component .video-loading-message.pulsate-text {
  animation: pulsate-text 2s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.3;
}
@keyframes pulsate-text {
  0% {
    opacity: 0.3;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.05;
  }
  100% {
    opacity: 0.3;
    scale: 1;
  }
}
.youtube-component .play-button-wrapper {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.youtube-component .play-button-wrapper.fade-in {
  opacity: 1;
}
.youtube-component .play-button-wrapper.one-moment::after {
  position: absolute;
  top: 100px;
  left: -10px;
  width: 200px;
  content: "ONE MOMENT...";
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
}
.youtube-component .play-button {
  background: #9aca3c;
  cursor: pointer;
  width: 80px;
  height: 80px;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 100;
}
.youtube-component .button-circles {
  position: absolute;
  left: 0;
  top: 0;
}
.youtube-component .button-circle {
  position: absolute;
  background: rgba(55, 126, 240, 0.1);
  background: rgba(154, 202, 60, 0.3);
  width: 80px;
  height: 80px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.youtube-component .c-1 {
  -webkit-animation: 2000ms scaleToggleOne infinite;
  animation: 2000ms scaleToggleOne infinite;
}
.youtube-component .c-2 {
  -webkit-animation: 2000ms scaleToggleOne infinite;
  -webkit-animation-delay: 300ms;
  animation: 2000ms scaleToggleOne infinite;
  animation-delay: 300ms;
}
.youtube-component .c-3 {
  -webkit-animation: 2000ms scaleToggleOne infinite;
  -webkit-animation-delay: 600ms;
  animation: 2000ms scaleToggleOne infinite;
  animation-delay: 600ms;
}
@-webkit-keyframes scaleToggleOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleToggleOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.youtube-component .play-button .paused {
  position: absolute;
  width: 0;
  height: 0;
  top: 20px;
  left: 30px;
  border: 20px solid transparent;
  border-left: 30px solid #ffffff;
  border-right: 0;
}
.youtube-component .responsive-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.youtube-component .responsive-video-wrapper iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .youtube-component .play-button-wrapper.one-moment::after {
    top: 130px;
  }
  .youtube-component .play-button {
    width: 100px;
    height: 100px;
  }
  .youtube-component .button-circle {
    width: 100px;
    height: 100px;
  }
  .youtube-component .play-button .paused {
    top: 25px;
    left: 38px;
    border: 25px solid transparent;
    border-left: 36px solid #ffffff;
  }
}

}