@charset "UTF-8";

/*
Theme Name: Infinite Eye
Author: Jmaes Collings
Author URI: https://www.infinite-eye.com
Description: 
Requires at least: 6
Tested up to: 6.2
Requires PHP: 7
Version: 1.0.5
*/

:root {
  --this-day-font-family-regular: "Roboto", sans-serif;
  --this-day-font-family-italic: "Roboto", sans-serif;
  --this-day-font-family-bold: "Grotesque MT W01 Bold Extended";
  --this-day-font-family-display: "Roboto Condensed", sans-serif;
  --this-day-color-dark: #00252b;
  --this-day-color-grey: #6f797a;
  --this-day-color-green: #008e9f;
  --this-day-color-pink: #eeb9c3;
  --this-day-color-yellow: #ffbb00;
  --this-day-color-orange: #ff9574;
  --this-day-color-red: #ff4c59;
  --this-day-color-cream: #fffcf2;
  --wp--preset--font-size--medium: 22px;

  --wp--preset--font-family--grotesque-mt: var(--this-day-font-family-bold);
  --wp--preset--font-family--roboto-condensed: var(
    --this-day-font-family-display
  );
  --wp--preset--font-family--roboto: var(--this-day-font-family-regular);
}

/**
 * General
 */
body,
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--this-day-font-family-regular);
  font-weight: 300;
  color: var(--this-day-color-dark);
  line-height: 1.4;
}

h1 {
  font-family: var(--this-day-font-family-bold);
  font-weight: normal;
}

h2,
h3,
h4,
h5,
h6,
strong,
strong em {
  font-family: var(--this-day-font-family-display);
  font-weight: 700;
}

strong em {
  font-style: normal;
  position: relative;
  z-index: 1;
  white-space: pre;
}

strong em::before {
  content: "";
  display: block;
  background: url(assets/img/highlight.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 3px;
  left: -20px;
  right: -40px;
  bottom: 0px;
  z-index: -1;
}

.has-grotesque-mt-font-family,
.has-grotesque-mt-font-family strong,
.has-grotesque-mt-font-family strong em {
  font-family: var(--this-day-font-family-bold);
  font-weight: normal;
}

.has-grotesque-mt-font-family strong em::before {
  top: -3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

i,
em {
  font-family: var(--this-day-font-family-italic);
}
body {
  background: var(--this-day-color-dark);
}

.site-wrapper {
  position: relative;
  overflow: hidden;
}
.site-wrapper a,
.gform_button {
  text-decoration: none;
  color: currentColor;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.site-wrapper a::before,
.gform_button::before {
  content: "";
  width: 0;
  height: 2px;
  background: var(--this-day-color-dark);
  position: absolute;
  left: 0;
  bottom: -1px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.site-wrapper a:hover::before,
.current-menu-item > a::before {
  width: 100%;
}

.site-wrapper h1 a::before,
.site-wrapper h2 a::before,
.site-wrapper h3 a::before,
.site-wrapper h4 a::before,
.site-wrapper h5 a::before {
  bottom: 0.1em;
}

/**
 * Theme
 */
.theme--green,
.site-wrapper .has-green-background-color {
  background: var(--this-day-color-green);
}
.theme--green .header__brand #logo-inline-color {
  fill: var(--this-day-color-yellow);
}
.theme--green .header__nav .current-menu-item > a {
  color: var(--this-day-color-yellow);
}
.theme--green .header__nav .current-menu-item > a::before {
  background-color: var(--this-day-color-yellow);
}

.site-wrapper.theme--green .wp-block-button__link,
.site-wrapper .has-green-background-color .wp-block-button__link {
  color: var(--this-day-color-yellow);
}
.site-wrapper.theme--green .wp-block-button__link::before,
.site-wrapper .has-green-background-color .wp-block-button__link::before {
  background-color: var(--this-day-color-yellow);
}

.theme--pink,
.site-wrapper .has-pink-background-color {
  background: var(--this-day-color-pink);
}
.theme--pink .header__brand #logo-inline-color {
  fill: var(--this-day-color-green);
}
.theme--pink .header__nav .current-menu-item > a {
  color: var(--this-day-color-green);
}
.theme--pink .header__nav .current-menu-item > a::before {
  background-color: var(--this-day-color-green);
}

.site-wrapper.theme--pink .wp-block-button__link,
.site-wrapper .has-pink-background-color .wp-block-button__link {
  color: var(--this-day-color-green);
}
.site-wrapper.theme--pink .wp-block-button__link::before,
.site-wrapper .has-pink-background-color .wp-block-button__link::before {
  background-color: var(--this-day-color-green);
}

.theme--yellow,
.site-wrapper .has-yellow-background-color {
  background: var(--this-day-color-yellow);
}
.theme--yellow .header__brand #logo-inline-color {
  fill: var(--this-day-color-red);
}
.theme--yellow .header__nav .current-menu-item > a {
  color: var(--this-day-color-red);
}
.theme--yellow .header__nav .current-menu-item > a::before {
  background-color: var(--this-day-color-red);
}

.site-wrapper.theme--yellow .wp-block-button__link,
.site-wrapper .has-yellow-background-color .wp-block-button__link {
  color: var(--this-day-color-red);
}
.site-wrapper.theme--yellow .wp-block-button__link::before,
.site-wrapper .has-yellow-background-color .wp-block-button__link::before {
  background-color: var(--this-day-color-red);
}

.theme--orange,
.site-wrapper .has-orange-background-color {
  background: var(--this-day-color-orange);
}
.theme--orange .header__brand #logo-inline-color {
  fill: var(--this-day-color-green);
}
.theme--orange .header__nav .current-menu-item > a {
  color: var(--this-day-color-green);
}
.theme--orange .header__nav .current-menu-item > a::before {
  background-color: var(--this-day-color-green);
}

.site-wrapper.theme--orange .wp-block-button__link,
.site-wrapper .has-orange-background-color .wp-block-button__link {
  color: var(--this-day-color-green);
}
.site-wrapper.theme--orange .wp-block-button__link::before,
.site-wrapper .has-orange-background-color .wp-block-button__link::before {
  background-color: var(--this-day-color-green);
}

.theme--red,
.site-wrapper .has-red-background-color {
  background: var(--this-day-color-red);
}
.theme--red .header__brand #logo-inline-color {
  fill: var(--this-day-color-pink);
}
.theme--red .header__nav .current-menu-item > a {
  color: var(--this-day-color-pink);
}
.theme--red .header__nav .current-menu-item > a::before {
  background-color: var(--this-day-color-pink);
}

.site-wrapper.theme--red .wp-block-button__link,
.site-wrapper .has-red-background-color .wp-block-button__link {
  color: var(--this-day-color-pink);
}
.site-wrapper.theme--red .wp-block-button__link::before,
.site-wrapper .has-red-background-color .wp-block-button__link::before {
  background-color: var(--this-day-color-pink);
}

.site-wrapper .has-cream-background-color {
  background: var(--this-day-color-cream);
}

.site-wrapper .has-dark-background-color {
  background: var(--this-day-color-dark);
  color: var(--this-day-color-cream);
}

/**
 * Button
 */

.site-wrapper .wp-block-button__link,
.gform_button {
  background: none;
  border: none;
  color: initial;
  text-transform: uppercase;
  font-family: var(--this-day-font-family-display);
  font-weight: 700;
  padding: 0;
  font-size: 18px;
}

.wp-block-button.is-style-underline .wp-block-button__link::before,
.gform_button::before {
  width: 100%;
}

.wp-block-button.is-style-underline .wp-block-button__link:hover::before,
.gform_button:hover::before {
  width: 0;
}

.gform_button {
  color: var(--this-day-color-yellow);
}
.gform_button::before {
  background-color: var(--this-day-color-yellow);
}

.has-dark-color {
  color: var(--this-day-color-dark) !important;
}
.wp-block-button__link.has-dark-color::before {
  background-color: var(--this-day-color-dark) !important;
}

.has-red-color {
  color: var(--this-day-color-red) !important;
}
.wp-block-button__link.has-red-color::before {
  background-color: var(--this-day-color-red) !important;
}

.has-orange-color {
  color: var(--this-day-color-orange) !important;
}
.wp-block-button__link.has-orange-color::before {
  background-color: var(--this-day-color-orange) !important;
}

.has-yellow-color {
  color: var(--this-day-color-yellow) !important;
}
.wp-block-button__link.has-yellow-color::before {
  background-color: var(--this-day-color-yellow) !important;
}

.has-pink-color {
  color: var(--this-day-color-pink) !important;
}
.wp-block-button__link.has-pink-color::before {
  background-color: var(--this-day-color-pink) !important;
}

.has-green-color {
  color: var(--this-day-color-green) !important;
}
.wp-block-button__link.has-green-color::before {
  background-color: var(--this-day-color-green) !important;
}

/**
 * Layout
 */
.container {
  font-size: 22px;
}

.container--page,
.container--footer,
.container--header {
  margin-left: 75px;
  margin-right: 75px;
}

:where(.is-layout-flex) {
  gap: 0;
}

/**
 * Header
 */
.container--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 38px;
  padding-bottom: 38px;
}
.header__brand a::before {
  display: none;
}
.header__brand img,
.header__brand svg {
  max-width: 257px;
  width: 100%;
  height: auto;
}

.header__nav {
  z-index: 3;
}

.header__brand #logo-inline-color {
  transition: all 1s ease-in-out;
}

.header__brand #logo-inline-color {
  transform: rotate(0deg);
  transform-origin: -170px 0px;
}

.header__brand:hover #logo-inline-color {
  transform: rotate(360deg);
}

.header__brand,
.menu__btn {
  z-index: 4;
}
.header__nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
}
.header__nav li {
}
.header__nav a {
  font-size: 18px;
  text-transform: uppercase;
  font-family: var(--this-day-font-family-display);
  font-weight: 700;
}

.site-header {
  /* z-index: 10;
  position: relative; */
  height: 160px;
}

.menu__btn {
  display: none;
}

/**
 * Footer
 */
.site-footer {
  background-color: var(--this-day-color-dark);
  color: #fff;
  z-index: 1;
  position: relative;
}

.site-footer a::before {
  background-color: #fff;
}

.container--footer {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  padding-bottom: 60px;
}
.footer__brand img {
  max-width: 315px;
  width: 100%;
  height: auto;
}
.footer__social {
	width: 100%;
	padding-bottom: 20px;
}
@media only screen and (min-width: 1024px) {
	.footer__social {	
		margin-left: auto;
		width: auto;
		padding: 3px 20px;
	}
}

.footer__details .footer__menu:last-child a {
  color: var(--this-day-color-grey);
}

.footer__details .footer__menu:last-child a::before {
  background-color: var(--this-day-color-grey);
}

.footer__menus {
  display: flex;
  gap: 98px;
  margin-bottom: 50px;
}

.footer__menus ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__menus li {
  margin-bottom: 5px;
  font-size: 18px;
}

.footer__menus h5 {
  font-family: var(--this-day-font-family-bold);
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 15px;
}

.footer__copy {
  color: var(--this-day-color-grey);
  font-size: 16px;
}

/**
 * Page 
 */
.page-title {
  font-family: var(--this-day-font-family-bold);
  text-transform: uppercase;
  font-size: 40px;
}

.container--page {
  /*max-width: 920px;
  padding-bottom: 50px;*/
}

/**
 * Page builder
 */

.container--page-builder > .wp-block-group,
.container--page-builder > .wp-block-query > .wp-block-post-template,
.container--page-builder > .wp-block-columns > .wp-block-column {
  padding: 50px 75px;
  margin: 0;
}

.container--page-builder .wp-block-columns {
  gap: 170px;
}
.container--page-builder > .wp-block-columns {
  padding: 0;
  margin: 0;
  gap: 0;
}

/* .wp-block-group__inner-container > .wp-block-columns {
  margin-top: 50px;
  margin-bottom: 50px;
} */

.container--page-builder > .wp-block-columns > .wp-block-column > .is-vertical {
  height: 100%;
}

.container--main h1 {
  font-family: var(--this-day-font-family-bold);
  font-weight: normal;
  margin: 0 0 20px;
}

.container--main h2,
.container--main h3 {
  font-family: var(--this-day-font-family-display);
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.062;
}

.container--main p {
  margin: 0 0 20px;
}

.container--main h1 {
  font-size: 50px;
}

.container--main h2 {
  font-size: 32px;
}

.container--main h3 {
  font-size: 20px;
}

.container--main .no-margin {
  margin: 0;
}

/* TODO: might be better way to do this with a checkbox? */
.container--page-builder > :first-child {
  margin-top: -160px;
  padding: 0;
}
.container--page-builder > :first-child > .wp-block-column {
  padding-top: 170px;
}

/**
 * Image
 */

.image-icon-wrapper {
  position: relative;
  padding: 75px;
  margin-left: -50px;
  margin-right: -50px;
}

.image-icon-wrapper .wp-block-image {
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.wp-block-image img {
  width: 100%;
  height: auto;
}

.image-icon-wrapper .image-icon {
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.image-icon-wrapper .image-icon--tr {
  top: 0;
  right: 0;
  background-position: top center;
}
.image-icon-wrapper .image-icon--br {
  bottom: 0;
  right: 0;
  background-position: bottom center;
}
.image-icon-wrapper .image-icon--tl {
  top: 0;
  left: 0;
  background-position: top center;
}
.image-icon-wrapper .image-icon--bl {
  bottom: 0;
  left: 0;
  background-position: bottom center;
}

.image-icon--order-infront {
  z-index: 3;
}
.image-icon--order-behind {
  z-index: 1;
}

.image-icon--shape-arrow.image-icon--color-red {
  background-image: url(assets/img/icons/arrow-red.png);
}
.image-icon--shape-arrow.image-icon--color-peach {
  background-image: url(assets/img/icons/arrow-peach.png);
}
.image-icon--shape-arrow.image-icon--color-pink {
  background-image: url(assets/img/icons/arrow-pink.png);
}
.image-icon--shape-arrow.image-icon--color-green {
  background-image: url(assets/img/icons/arrow-green.png);
}

.image-icon--shape-circle.image-icon--color-green {
  background-image: url(assets/img/icons/circle-green.png);
}
.image-icon--shape-circle.image-icon--color-orange {
  background-image: url(assets/img/icons/circle-orange.png);
}
.image-icon--shape-circle.image-icon--color-red {
  background-image: url(assets/img/icons/circle-red.png);
}

.image-icon--shape-semi-circle.image-icon--color-orange {
  background-image: url(assets/img/icons/semi-circle-orange.png);
}
.image-icon--shape-semi-circle.image-icon--color-yellow {
  background-image: url(assets/img/icons/semi-circle-yellow.png);
}
.image-icon--shape-semi-circle.image-icon--color-green {
  background-image: url(assets/img/icons/semi-circle-green.png);
}

.image-icon--shape-cross.image-icon--color-red {
  background-image: url(assets/img/icons/cross-red.png);
}

/**
 * Fonts
 */
.container--main .has-xlarge-font-size {
  font-size: 110px;
  line-height: 0.945;
}

.container--main .has-large-64-font-size {
  font-size: 64px;
  line-height: 1.017;
}

.container--main .has-big-font-size {
  font-size: 28px;
  line-height: 1.4;
}

.container--main .has-medium-font-size {
  font-size: 24px;
  line-height: 1.4;
}

/**
 * Modal
 */
.modal {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
  background-color: var(--this-day-color-dark);
  color: #fff;
}

.blocker {
  z-index: 10;
}

.modal__inside {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 70px;
  padding-bottom: 70px;
  box-sizing: border-box;
}

.modal a.close-modal {
  top: 10px;
  right: 10px;
  background: url(assets/img/modal-close.png);
  background-repeat: repeat;
  background-size: auto;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.4s;
}

.modal a.close-modal:hover {
  filter: saturate(0%);
}

/** 
 * Animations
 */
[data-aos="reveal"] {
  white-space: nowrap;
  display: inline-block;
  position: relative;
  line-height: 1.2;
  color: transparent;
  float: left;
  clear: left;
}

[data-aos="reveal"]:before {
  content: "";
  left: 0;
  width: 100%;
  background-color: var(--this-day-color-green);
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transform: scale3d(0, 1, 1);
  transform-origin: left center;
}

[data-aos="reveal"].aos-animate {
  transition-duration: 0s;
  transition-property: color;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  color: var(--this-day-color-dark);
}

[data-aos="reveal"]:nth-of-type(2) {
  top: -0.11em;
  transition-delay: 0.65s;
}

[data-aos="reveal"]:nth-of-type(3) {
  top: -0.22em;
  transition-delay: 0.75s;
}

[data-aos="reveal"]:nth-of-type(4) {
  top: -0.33em;
  transition-delay: 0.85s;
}

[data-aos="reveal"].aos-animate:before {
  animation: Reveal 1s cubic-bezier(0.475, 0.425, 0, 0.995);
}

[data-aos="reveal"].aos-animate:nth-of-type(2):before {
  animation-delay: 0.15s;
}

[data-aos="reveal"].aos-animate:nth-of-type(3):before {
  animation-delay: 0.25s;
}

[data-aos="reveal"].aos-animate:nth-of-type(4):before {
  animation-delay: 0.35s;
}

@keyframes Reveal {
  0% {
    transform: scale3d(0, 1, 1);
  }
  50% {
    transform-origin: left center;
  }
  51% {
    transform: scale3d(1, 1, 1);
    transform-origin: right center;
  }
  100% {
    transform: scale3d(0, 1, 1);
    transform-origin: right center;
  }
}

@media only screen and (max-width: 1399px) {
  .site-wrapper {
    --wp--preset--font-size--xlarge: 100px;
  }
  .container--main .has-xlarge-font-size {
    font-size: 100px;
  }

  .homepage-image__foreground {
    width: 815px;
  }
}

@media only screen and (max-width: 1279px) {
  .site-wrapper {
    --wp--preset--font-size--medium: 18px;
    --wp--preset--font-size--large: 40px;
    --wp--preset--font-size--xlarge: 70px;
    --wp--preset--font-size--big: 26px;
  }

  .container--main .has-big-font-size {
    font-size: 26px;
  }

  .container {
    font-size: 17px;
  }

  .container--main h1 {
    font-size: 40px;
  }

  .container--main .has-xlarge-font-size {
    font-size: 70px;
  }

  .container--main .has-large-64-font-size {
    font-size: 60px;
  }

  .homepage-image__foreground {
    width: 650px;
  }

  .header__brand img,
  .header__brand svg {
    max-width: 200px;
  }

  .header__nav a {
    font-size: 17px;
  }

  /* .container--page-builder {
    margin-left: 30px;
    margin-right: 30px;
  } */

  .container--page,
  .container--footer,
  .container--header {
    margin-left: 30px;
    margin-right: 30px;
  }

  .container--page-builder > .wp-block-group,
  .container--page-builder > .wp-block-columns > .wp-block-column {
    padding-left: 30px;
    padding-right: 30px;
  }

  .footer__menus {
    gap: 45px;
  }

  .image-icon-wrapper {
    margin-left: -10px;
    margin-right: -10px;
  }

  .footer__brand img {
    max-width: 262px;
  }
}

.wp-block-columns {
  flex-wrap: nowrap !important;
}

@media only screen and (min-width: 1024px) {
   .wp-block-query .wp-block-post:nth-of-type(even) > .wp-block-columns {
		flex-direction: row-reverse;
   }
}

@media only screen and (max-width: 1023px) {
  .site-wrapper {
    --wp--preset--font-size--xlarge: 100px;
  }

  .header__nav {
    display: none;
  }

  .container--header {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .container--page,
  .container--footer,
  .container--header {
    margin-left: 20px;
    margin-right: 20px;
  }

  .container--page-builder > .wp-block-group,
  .container--page-builder > .wp-block-columns > .wp-block-column {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .menu__btn {
    display: block;
    height: 31px;
    width: 33px;
    margin: auto;
    padding-top: 0;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;

    position: absolute;
    top: 33px;
    right: 20px;
  }

  .menu__btn .bar {
    height: 5px;
    width: 33px;
    display: block;
    margin: 0 auto;
    background-color: var(--this-day-color-dark);
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    position: absolute;
  }

  .menu__btn .bar:nth-of-type(1) {
    top: 8px;
    -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
    -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
    -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
    -webkit-transition-delay: 0.3s, 0.1s;
    transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
    -moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    -webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  }

  /* .menu__btn .bar:nth-of-type(2) {
    top: 15px;
    -moz-transition: ease 0.3s 0.3s;
    -o-transition: ease 0.3s 0.3s;
    -webkit-transition: ease 0.3s;
    -webkit-transition-delay: 0.3s;
    transition: ease 0.3s 0.3s;
    -moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    -webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  } */

  .menu__btn .bar:nth-of-type(2) {
    top: 18px;
    -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
    -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
    -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
    -webkit-transition-delay: 0.3s, 0.1s;
    transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
    -moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    -webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
    animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .menu__btn .bar:nth-of-type(1) {
    top: 15px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
    -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
    -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
    -webkit-transition-delay: 0.1s, 0.5s;
    transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
  }

  /* .menu-open .menu__btn .bar:nth-of-type(2) {
    opacity: 0;
  } */

  .menu-open .menu__btn .bar:nth-of-type(2) {
    top: 15px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
    -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
    -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
    -webkit-transition-delay: 0.1s, 0.5s;
    transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
  }

  .menu-open .menu__btn .bar {
    background-color: var(--this-day-color-yellow);
  }

  .menu-open .header__nav {
    display: block;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--this-day-color-dark);
  }

  .menu-open .header__nav .menu-primary-menu-container {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-open .header__nav a {
    color: var(--this-day-color-cream);
  }

  .menu-open .header__brand .svg path {
    fill: #fff;
  }

  .header__nav a {
    font-size: 22px;
  }

  /* .menu-open .header__brand #logo-inline-color {
    fill: var(--this-day-color-yellow);
  } */

  .header__nav ul {
    flex-direction: column;
    align-items: start;
    padding: 20px;
  }

  .container--main .has-xlarge-font-size {
    font-size: 100px;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .homepage-image-block {
    position: relative;
    min-height: 240px;
    width: 100%;
    text-align: center;
  }

  .homepage-image__foreground {
    width: 550px;
    margin-bottom: -50px;
    left: 50%;
    margin-left: -225px;
  }

  .page-id-16 .homepage-image__foreground {
    width: 380px;
    margin-left: -190px;
  }

  .homepage-image__background {
    right: -30px;
    bottom: 0;
    height: 310px;
    top: auto;
    margin-bottom: -8%;
  }

  .site-header {
    height: 90px;
  }

  .container--page-builder > :first-child > .wp-block-column {
    padding-top: 180px;
    padding-bottom: 0;
  }

  .container--page-builder
    > :first-child
    > .wp-block-column
    + .wp-block-column {
    padding-top: 0;
    padding-bottom: 50px;
  }

  .wp-block-spacer {
    display: none;
  }

  .container--footer {
    flex-wrap: wrap;
  }

  .footer__menus {
    flex-direction: column;
    gap: 23px;
    margin-bottom: 23px;
  }

  .footer__brand {
    margin-bottom: 23px;
  }

  .container--main .has-large-64-font-size {
    font-size: 45px;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    gap: 30px;
  }

  .wp-block-columns--reverse-mob {
    flex-direction: column-reverse;
  }

  .image-icon-wrapper .image-icon {
    width: 150px;
    height: 150px;
  }

  .wp-block-columns--reduce-mob-gap:not(.wp-block-columns--reverse-mob)
    .wp-block-column {
    padding-bottom: 0 !important;
  }
  .wp-block-columns--reduce-mob-gap:not(.wp-block-columns--reverse-mob)
    .wp-block-column
    + .wp-block-column {
    padding-top: 0 !important;
    padding-bottom: 50px !important;
  }

  .wp-block-columns--reduce-mob-gap.wp-block-columns--reverse-mob
    .wp-block-column {
    padding-top: 0 !important;
  }

  .wp-block-columns--reduce-mob-gap.wp-block-columns--reverse-mob
    .wp-block-column
    + .wp-block-column {
    padding-bottom: 0 !important;
    padding-top: 50px !important;
  }
}

@media only screen and (max-width: 767px) {
  .site-wrapper {
    --wp--preset--font-size--normal: 19px;
    --wp--preset--font-size--large-64: 40px;
    --wp--preset--font-size--xlarge: 70px;
  }

  .container--main .has-xlarge-font-size {
    font-size: 70px;
  }

  .container--main h2 {
    font-size: 28px;
  }

  .image-icon-wrapper {
    padding: 50px 30px;
  }
}

@media only screen and (max-width: 479px) {
  .site-wrapper {
    --wp--preset--font-size--xlarge: 45px;
    --wp--preset--font-size--big: 19px;
  }

  .container--main .has-xlarge-font-size {
    font-size: 45px;
  }

  .container--main .has-big-font-size {
    font-size: 19px;
  }

  .container--main h2 {
    font-size: 24px;
  }
}