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

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

/*************************************************************/
/* Theming CSS to support easy maintenance of site design    */
/*************************************************************/
/*
colours
- #F9F9F9 - 'white'
- #DFEAF7 - very pale blue
- #EEFF41 - greeny yellow
- #A2A8F5 - purple
- #30D1FF - mid blue
- #1E299C - dark blue
- #16205B - darkest blue
- #171717 - 'black'
*/


.theme-white {
    background-color: #F9F9F9;
}

.theme-light {
    background-color: #DFEAF7;
}

.theme-highlight {
    background-color: #EEFF41;
}

.theme-mid {
    background-color: #30D1FF;
}

.theme-light, .theme-white, .theme-highlight, .theme-mid {
    color: #16205B;

    h2, h3, h4, h5 {
        color: #16205B;
    }

    .icon {
        background-color: #16205B;

        svg {
            fill: #F9F9F9;
        }
    }
}

.theme-dark {
    background-color: #16205B;
}

.theme-black {
    background-color: #171717;
}

.theme-dark, .theme-black {
    color: #F9F9F9;

    h2, h3, h4, h5 {
        color: #F9F9F9;
    }

    .icon {
        background-color: #F9F9F9;

        svg {
            fill: #16205B;
        }
    }
}

.theme-black h3 {
  color: #30d1ff;
}

/* Generic Elements */
p {
    margin: 0;
}

.list__item p, .list__content p {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

.highlight {
  color: #30d1ff;
}
/* Generic elements */

body {
  font-weight: 300;
}

/* Generic elements for breakpoints */

@media screen and (max-width: 477px) {

    .btn__back-to-posts, .blog-post__headline, .blog-post__meta, .blog-post__timestamp, .social-sharing, .hs_cos_wrapper_type_inline_rich_text {
        padding-left: 16px;
        padding-right: 16px;
    }

    body, p, .hs_cos_wrapper_type_inline_rich_text, .hs_cos_wrapper_widget {
        font-size: 18px;
        line-height: 1.5em;
    }

    .list .list__item {
        width: unset !important;
    }

    h1 {
        font-size: 32px;
        line-height: 1.2em;
        font-weight: 500;
        margin: 0;
    }

    h2 {
        font-size: 34px;
        line-height: 1.2em;
        margin: 0.7em 0 0.3em;
        font-weight: 400;
    }

    h3 {
        font-size: 24px;
        margin: 1.4rem 0 .7rem;
        font-weight: 400;
        color: #30d1ff;
    }

    p {
        font-size: 18px;
        line-height: 1.5em;
        padding-bottom: 1.4rem;
    }

    .homepage-intro-text {
        font-size: 22px;
        font-weight: 300;
        line-height: 1.5;
        text-align: left;
    }

    .blog-listing__post {
        margin-bottom: 0 !important;
    }
}


@media screen and (min-width: 477px) {
    .body {
        font-size: 22px;
        line-height: 1.5em;
    }

    p {
        font-size: 22px;
        line-height: 1.5em;
        padding-bottom: 1.4rem;
    }

    .hs_cos_wrapper_widget, .hs_cos_wrapper_type_inline_rich_text {
        font-size: 22px;
        line-height: 1.5em;
    }

    .homepage-intro-text {
        font-size: 28px;
        font-weight: normal;
        line-height: 1.5;
        text-align: left;
    }

    h1 {
        font-size: 56px;
        line-height: 1.3em;
        margin: 0;
        font-weight: 500;
    }

    h2 {
        margin: 0.7em 0 0.3em;
        font-size: 40px;
        font-weight: 500;
        line-height: 1.2em;
    }

    h3 {
        font-size: 30px;
        font-weight: 400;
        color: #30d1ff;
        margin: 1.4rem 0 0.7rem 0rem;
    }

    .dnd_area-row-0-background-image {
/*         height: 18vw; */
    }

    .dnd_area-row-0-background-image h1 {
        margin: 1.8rem 0 0 0;
    }
}


.blog-post .fullbleed,.blog-post .leftbleed,.blog-post .rightbleed {
   @media screen and (min-width: 751px)  {
       margin-left:calc(-50vw + 800px / 2);
       margin-right:calc(-50vw + 800px / 2)}
   }
}

.blog-post .fullbleed,.blog-post .leftbleed,.blog-post .rightbleed {
   @media screen and (max-width: 750px) {
       margin-left: unset;
       margin-right: unset;
   }
}

.blog-listing__post-timestamp {
    font-size: 18px;
    margin-top: 0.5em;
}

.container-fluid .fullbleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.leftbleed, .rightbleed {

    background-color: #f9f9f9;
    color: #dfeaf7;

}

.leftbleed > div:first-of-type {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: -20px;
    padding-right: 20px;
}

.rightbleed > div:first-of-type {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: -20px;
    padding-left: 20px;
}

.hs_cos_wrapper_type_inline_rich_text, .list, .testimonial__content, .testimonial {
    max-width: 800px;
    margin: 0 auto;
}

.hs_cos_wrapper_type_inline_rich_text {
    padding-top: 40px;
    padding-bottom: 20px;
}

[class^="theme"] > [class^="theme"] {
    max-width: 800px;
    margin: 0 auto;
}

@media screen and (max-width: 477px) {
    .fullbleed, .leftbleed, .rightbleed {
        margin-left: unset;
        margin-right: unset;
    }
  .background-image {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
}

/**************************************************************************/
/* General CSS                                                  */
/**************************************************************************/

/* unvisited link */
a:link, a:visited {
    color: #EEFF41;
}

/* mouse over link */
a:hover, a:active {
    color: #30D1FF;
}

.widget-type-post_filter h3 {
    text-transform: none;
}

a.widget-type-post_filter a, .widget-type-post_filter a:hover, .widget-type-post_filter a:visited, .widget-type-post_filter a:active {
    text-transform: capitalize;
}

.blog-post__column-wrapper {
    margin-top: 0 !important;
}

.button {
    border-color: #30D1FF;
}

#hs_cos_wrapper_header-module-1 .button {
    font-size: 15px;
}

.hs-button, .hs-button:hover, form .hs-button, form .hs-button:hover, form input.hs-button, form input.hs-button:hover, form input
.hs-button:focus {
    border: unset;
}

.content-wrapper {
    padding: 0 !important;
    max-width: 800px !important;
}

/** Menu **/

.header__menu-link {
    font-size: 16px;
}

.heading-with-image {
    padding: 40px;
}

blockquote {
    border-left-color: #EEFF41;
}

/**************************************************************************/
/* Blogpost specific CSS                                                  */
/**************************************************************************/

.btn__back-to-posts {
    color: #fafafa;
    margin-bottom: 1em;
}

.btn__back-to-posts:hover, .btn__back-to-posts:active {
    color: #fafafa;
    text-decoration: underline;
}

.btn__back-to-posts::before {
    content: "← ";
}

.btn__back-to-posts {
    display: block;
    text-decoration: none;
}

.hs_cos_wrapper_type_post_filter ul {
    list-style: none;
}

.hs_cos_wrapper_type_post_filter li {
    display: inline-block;
    margin-right: 10px; /* add spacing between items */
}

.testimonial__content {
    margin: 0 !important;
}

h1 {
   /* text-shadow: 8px 7px 6px #000000c4;*/
}


h3.blog-listing__post-title {
    margin: 0;
}

.background-image {
    position: absolute;
    z-index: -1;
    width: 100%;
}

@keyframes blink-animation {
    0%,
    100% {
      opacity: var(--blink-opacity, 1);
    }
    50% {
      opacity: 0;
    }
  }
  /*houdini*/
  
  /*base*/
  :root {
    font-family: Inter, sans-serif;
  
    --stripe-color: #000;
    --bg: var(--stripe-color);
    --maincolor: var(--bg);
  }
  
  /*custom*/
  
  .cards-wrapper-flex {
    @media screen and (min-width: 477px) {
      display: flex;
      flex-wrap: wrap;
      min-height:100%;
    }
  }

  .cards-wrapper-flex > .row-fluid {
    @media screen and (min-width: 477px) {
      height: auto !important;
    }
  }

  .equal-heights, .cards-wrapper-flex, .cards-wrapper-flex .row-fluid, .cards-wrapper-flex .row-fluid-wrapper, .cards-wrapper-flex .dnd-module, .cards-wrapper-flex .dnd-column, .cards-wrapper-flex .hs_cos_wrapper {
    @media screen and (min-width: 477px) {
      height:100%;
    }
  }

  @keyframes smoothBg {
    from {
      background-position: 50% 50%, 50% 50%;
    }
    to {
      background-position: 350% 50%, 350% 50%;
    }
  }
  
  .wrapper {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  .hero {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    --stripes: repeating-linear-gradient(
      100deg,
      var(--stripe-color) 0%,
      var(--stripe-color) 7%,
      transparent 10%,
      transparent 12%,
      var(--stripe-color) 16%
    );
  
    --rainbow: repeating-linear-gradient(
      100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #30d1ff 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
  
  
    filter: blur(10px) opacity(50%) saturate(200%);
  
    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--stripes), var(--rainbow);
      background-size: 200%, 100%;
      animation: smoothBg 60s linear infinite;
      background-attachment: fixed;
      mix-blend-mode: difference;
    }
  }
  
  
  .content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    place-content: center;
    place-items: center;
    flex-flow: column;
    gap: 4.5%;
    text-align: center;
    mix-blend-mode: difference;
    -webbkit-mix-blend-mode: difference;
    filter: invert(1);
  }
  
  .h1--scalingSize {
    font-size: calc(1rem - -5vw);
    position: relative;
  }