/*
 Theme Name:   Gert Barnhoorn
 Theme URI:    https://burobrein.nl/
 Description:  Thema gemaakt door Buro Brein
 Author:       Buro Brein
 Author URI:   https://burobrein.nl/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
main, footer {
  overflow: hidden;
}

[class*=brxe-] {
  position: relative;
}

.brxe-code {
  width: auto !important;
}

body.bricks-is-frontend :focus {
  outline: none;
}

section {
  padding-left: 15px;
  padding-right: 15px;
}

.splitting {
  display: flex;
  flex-wrap: wrap;
}
.splitting .word {
  overflow: hidden;
  display: flex;
}
.splitting .word span {
  display: block;
}
.splitting .word + .whitespace {
  margin-left: 0.3em !important;
}

/*

===== 1.0 - Variables  &  Utilities =====

*/
:root {
  --color-primary: #001258;
  --color-secondary: #00ED8F;
  --color-tetriary: #0CB4FF;
  --color-body: #FFFFFF;
  --color-extra-1: radial-gradient(circle at 50% 25%, rgba(0, 18, 88, 0.3) 0%, rgba(0, 18, 88, 0.87) 60%);
  --color-extra-2: linear-gradient(180deg, #00ED8F 0%, #0CB4FF 100%);;
  --color-extra-3: linear-gradient(90deg, #00ED8F 0%, #0CB4FF 100%);
  --color-extra-4: linear-gradient(0deg, rgba(0, 18, 88, 1) 0%, rgba(0, 18, 88, 0) 100%);
}

.color-white {
  color: white;
}

.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-tetriary {
  color: var(--color-tetriary);
}

:root {
  --h1-size: clamp(3.3rem, calc(3.3rem + ((1vw - 0.375rem) * 3.5838150289)), 6.4rem);
  --h2-size: clamp(3.4rem, calc(3.4rem + ((1vw - 0.375rem) * 1.8497109827)), 5rem);
  --h3-size: clamp(2.8rem, calc(2.8rem + ((1vw - 0.375rem) * 1.1560693642)), 3.8rem);
  --h4-size: 28px;
  --h5-size: 22px;
}

.color-white * {
  color: white !important;
}

h1 em, h1 i,
h2 em, h2 i,
h3 em, h3 i {
  background: var(--color-extra-3) !important;
  font-style: normal;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  --width: 0%;
}
h1 em::after, h1 i::after,
h2 em::after, h2 i::after,
h3 em::after, h3 i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width);
  height: 100%;
  background: var(--color-extra-3);
}

h1,
h2,
h3 {
  word-break: normal;
  hyphens: auto;
}

h2 a {
  position: relative;
  z-index: 1;
}
h2 a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: var(--color-extra-3);
  margin-top: 0.5rem;
  z-index: -1;
  opacity: 0.5;
  transition: scaleX(1);
  transition: all 0.2s cubic-bezier(0.34, 1.66, 0.6, 1.51);
}
h2 a:hover::after {
  transform: scaleX(1.05);
  opacity: 0.95;
}

.brxe-text h3 {
  margin-bottom: 1rem;
}

.grid-1 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-1-l {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-1-m {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-1-s {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-2 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-2-l {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-2-m {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2-s {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-3 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-3-l {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-3-m {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-3-s {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-4 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-4-l {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-4-m {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-4-s {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-5 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-5-l {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-5-m {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-5-s {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-6 {
  display: grid !important;
  gap: 2rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 800px) {
  .grid-6-l {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 769px) {
  .grid-6-m {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-6-s {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 800px) {
  .grid-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-1-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 800px) {
  .grid-1-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-1-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
@media (max-width: 800px) {
  .grid-1-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-1-4 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}
@media (max-width: 800px) {
  .grid-1-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-1-5 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
}
@media (max-width: 800px) {
  .grid-1-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-2-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 800px) {
  .grid-2-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-3-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
@media (max-width: 800px) {
  .grid-3-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-4-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}
@media (max-width: 800px) {
  .grid-4-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-5-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
}
@media (max-width: 800px) {
  .grid-5-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-2-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
@media (max-width: 800px) {
  .grid-2-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-3-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
@media (max-width: 800px) {
  .grid-3-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-4-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
}
@media (max-width: 800px) {
  .grid-4-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-3-4 {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
}
@media (max-width: 800px) {
  .grid-3-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .grid-l-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-l-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-l-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-l-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-l-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-l-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-l-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .grid-l-1-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
  .grid-l-1-4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  }
  .grid-l-1-5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
  }
  .grid-l-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .grid-l-3-1 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
  .grid-l-4-1 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
  .grid-l-5-1 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
  }
  .grid-l-2-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .grid-l-3-2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .grid-l-4-3 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  }
  .grid-l-3-4 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  }
}
@media (max-width: 769px) {
  .grid-m-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-m-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-m-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-m-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-m-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-m-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-m-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .grid-m-1-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
  .grid-m-1-4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  }
  .grid-m-1-5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
  }
  .grid-m-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .grid-m-3-1 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
  .grid-m-4-1 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
  .grid-m-5-1 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
  }
  .grid-m-2-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .grid-m-3-2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .grid-m-4-3 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  }
  .grid-m-3-4 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  }
}
@media (max-width: 640px) {
  .grid-s-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-s-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-s-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-s-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-s-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-s-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-s-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .grid-s-1-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
  .grid-s-1-4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  }
  .grid-s-1-5 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
  }
  .grid-s-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .grid-s-3-1 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
  .grid-s-4-1 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
  .grid-s-5-1 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
  }
  .grid-s-2-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .grid-s-3-2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .grid-s-4-3 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  }
  .grid-s-3-4 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  }
}
.gap-s {
  gap: 1.5rem !important;
}

.gap-m {
  gap: 3rem !important;
}

.gap-l {
  gap: 4.5rem !important;
}

.gap-xl {
  gap: 6rem !important;
}

.gap-xxl {
  gap: 12rem !important;
}

.gap-none {
  gap: 0 !important;
}

@media (max-width: 800px) {
  .gap-l-s {
    gap: 1.5rem !important;
  }
  .gap-l-m {
    gap: 3rem !important;
  }
  .gap-l-l {
    gap: 4.5rem !important;
  }
  .gap-l-xl {
    gap: 6rem !important;
  }
  .gap-l-xxl {
    gap: 12rem !important;
  }
  .gap-l-none {
    gap: 0 !important;
  }
}
@media (max-width: 769px) {
  .gap-m-s {
    gap: 1.5rem !important;
  }
  .gap-m-m {
    gap: 3rem !important;
  }
  .gap-m-l {
    gap: 4.5rem !important;
  }
  .gap-m-xl {
    gap: 6rem !important;
  }
  .gap-m-xxl {
    gap: 12rem !important;
  }
  .gap-m-none {
    gap: 0 !important;
  }
}
@media (max-width: 640px) {
  .gap-s-s {
    gap: 1.5rem !important;
  }
  .gap-s-m {
    gap: 3rem !important;
  }
  .gap-s-l {
    gap: 4.5rem !important;
  }
  .gap-s-xl {
    gap: 6rem !important;
  }
  .gap-s-xxl {
    gap: 12rem !important;
  }
  .gap-s-none {
    gap: 0 !important;
  }
}
.grid-auto {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.w-1 {
  max-width: 1rem !important;
}

.w-2 {
  max-width: 2rem !important;
}

.w-3 {
  max-width: 3rem !important;
}

.w-4 {
  max-width: 4rem !important;
}

.w-5 {
  max-width: 5rem !important;
}

.w-6 {
  max-width: 6rem !important;
}

.w-7 {
  max-width: 7rem !important;
}

.w-8 {
  max-width: 8rem !important;
}

.w-9 {
  max-width: 9rem !important;
}

.w-10 {
  max-width: 10rem !important;
}

.w-11 {
  max-width: 11rem !important;
}

.w-12 {
  max-width: 12rem !important;
}

.w-13 {
  max-width: 13rem !important;
}

.w-14 {
  max-width: 14rem !important;
}

.w-15 {
  max-width: 15rem !important;
}

.w-16 {
  max-width: 16rem !important;
}

.w-17 {
  max-width: 17rem !important;
}

.w-18 {
  max-width: 18rem !important;
}

.w-19 {
  max-width: 19rem !important;
}

.w-20 {
  max-width: 20rem !important;
}

.w-21 {
  max-width: 21rem !important;
}

.w-22 {
  max-width: 22rem !important;
}

.w-23 {
  max-width: 23rem !important;
}

.w-24 {
  max-width: 24rem !important;
}

.w-25 {
  max-width: 25rem !important;
}

.w-26 {
  max-width: 26rem !important;
}

.w-27 {
  max-width: 27rem !important;
}

.w-28 {
  max-width: 28rem !important;
}

.w-29 {
  max-width: 29rem !important;
}

.w-30 {
  max-width: 30rem !important;
}

.w-31 {
  max-width: 31rem !important;
}

.w-32 {
  max-width: 32rem !important;
}

.w-33 {
  max-width: 33rem !important;
}

.w-34 {
  max-width: 34rem !important;
}

.w-35 {
  max-width: 35rem !important;
}

.w-36 {
  max-width: 36rem !important;
}

.w-37 {
  max-width: 37rem !important;
}

.w-38 {
  max-width: 38rem !important;
}

.w-39 {
  max-width: 39rem !important;
}

.w-40 {
  max-width: 40rem !important;
}

.w-41 {
  max-width: 41rem !important;
}

.w-42 {
  max-width: 42rem !important;
}

.w-43 {
  max-width: 43rem !important;
}

.w-44 {
  max-width: 44rem !important;
}

.w-45 {
  max-width: 45rem !important;
}

.w-46 {
  max-width: 46rem !important;
}

.w-47 {
  max-width: 47rem !important;
}

.w-48 {
  max-width: 48rem !important;
}

.w-49 {
  max-width: 49rem !important;
}

.w-50 {
  max-width: 50rem !important;
}

.w-51 {
  max-width: 51rem !important;
}

.w-52 {
  max-width: 52rem !important;
}

.w-53 {
  max-width: 53rem !important;
}

.w-54 {
  max-width: 54rem !important;
}

.w-55 {
  max-width: 55rem !important;
}

.w-56 {
  max-width: 56rem !important;
}

.w-57 {
  max-width: 57rem !important;
}

.w-58 {
  max-width: 58rem !important;
}

.w-59 {
  max-width: 59rem !important;
}

.w-60 {
  max-width: 60rem !important;
}

.w-61 {
  max-width: 61rem !important;
}

.w-62 {
  max-width: 62rem !important;
}

.w-63 {
  max-width: 63rem !important;
}

.w-64 {
  max-width: 64rem !important;
}

.w-65 {
  max-width: 65rem !important;
}

.w-66 {
  max-width: 66rem !important;
}

.w-67 {
  max-width: 67rem !important;
}

.w-68 {
  max-width: 68rem !important;
}

.w-69 {
  max-width: 69rem !important;
}

.w-70 {
  max-width: 70rem !important;
}

.w-71 {
  max-width: 71rem !important;
}

.w-72 {
  max-width: 72rem !important;
}

.w-73 {
  max-width: 73rem !important;
}

.w-74 {
  max-width: 74rem !important;
}

.w-75 {
  max-width: 75rem !important;
}

.w-76 {
  max-width: 76rem !important;
}

.w-77 {
  max-width: 77rem !important;
}

.w-78 {
  max-width: 78rem !important;
}

.w-79 {
  max-width: 79rem !important;
}

.w-80 {
  max-width: 80rem !important;
}

.w-81 {
  max-width: 81rem !important;
}

.w-82 {
  max-width: 82rem !important;
}

.w-83 {
  max-width: 83rem !important;
}

.w-84 {
  max-width: 84rem !important;
}

.w-85 {
  max-width: 85rem !important;
}

.w-86 {
  max-width: 86rem !important;
}

.w-87 {
  max-width: 87rem !important;
}

.w-88 {
  max-width: 88rem !important;
}

.w-89 {
  max-width: 89rem !important;
}

.w-90 {
  max-width: 90rem !important;
}

.w-91 {
  max-width: 91rem !important;
}

.w-92 {
  max-width: 92rem !important;
}

.w-93 {
  max-width: 93rem !important;
}

.w-94 {
  max-width: 94rem !important;
}

.w-95 {
  max-width: 95rem !important;
}

.w-96 {
  max-width: 96rem !important;
}

.w-97 {
  max-width: 97rem !important;
}

.w-98 {
  max-width: 98rem !important;
}

.w-99 {
  max-width: 99rem !important;
}

.w-100 {
  max-width: 100rem !important;
}

.w-101 {
  max-width: 101rem !important;
}

.w-102 {
  max-width: 102rem !important;
}

.w-103 {
  max-width: 103rem !important;
}

.w-104 {
  max-width: 104rem !important;
}

.w-105 {
  max-width: 105rem !important;
}

.w-106 {
  max-width: 106rem !important;
}

.w-107 {
  max-width: 107rem !important;
}

.w-108 {
  max-width: 108rem !important;
}

.w-109 {
  max-width: 109rem !important;
}

.w-110 {
  max-width: 110rem !important;
}

.w-111 {
  max-width: 111rem !important;
}

.w-112 {
  max-width: 112rem !important;
}

.w-113 {
  max-width: 113rem !important;
}

.w-114 {
  max-width: 114rem !important;
}

.w-115 {
  max-width: 115rem !important;
}

.w-116 {
  max-width: 116rem !important;
}

.w-117 {
  max-width: 117rem !important;
}

.w-118 {
  max-width: 118rem !important;
}

.w-119 {
  max-width: 119rem !important;
}

.w-120 {
  max-width: 120rem !important;
}

@media (max-width: 769px) {
  [class*=w-] {
    max-width: 100% !important;
  }
}
.center {
  text-align: center;
  margin: 0 auto;
}

.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.py-4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.py-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.my-7 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.py-8 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.my-8 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.my-9 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}

.py-10 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

.my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.py-11 {
  padding-top: 11rem !important;
  padding-bottom: 11rem !important;
}

.my-11 {
  margin-top: 11rem;
  margin-bottom: 11rem;
}

.py-12 {
  padding-top: 12rem !important;
  padding-bottom: 12rem !important;
}

.my-12 {
  margin-top: 12rem;
  margin-bottom: 12rem;
}

.py-13 {
  padding-top: 13rem !important;
  padding-bottom: 13rem !important;
}

.my-13 {
  margin-top: 13rem;
  margin-bottom: 13rem;
}

.py-14 {
  padding-top: 14rem !important;
  padding-bottom: 14rem !important;
}

.my-14 {
  margin-top: 14rem;
  margin-bottom: 14rem;
}

.py-15 {
  padding-top: 15rem !important;
  padding-bottom: 15rem !important;
}

.my-15 {
  margin-top: 15rem;
  margin-bottom: 15rem;
}

.py-16 {
  padding-top: 16rem !important;
  padding-bottom: 16rem !important;
}

.my-16 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.py-17 {
  padding-top: 17rem !important;
  padding-bottom: 17rem !important;
}

.my-17 {
  margin-top: 17rem;
  margin-bottom: 17rem;
}

.py-18 {
  padding-top: 18rem !important;
  padding-bottom: 18rem !important;
}

.my-18 {
  margin-top: 18rem;
  margin-bottom: 18rem;
}

.py-19 {
  padding-top: 19rem !important;
  padding-bottom: 19rem !important;
}

.my-19 {
  margin-top: 19rem;
  margin-bottom: 19rem;
}

.py-20 {
  padding-top: 20rem !important;
  padding-bottom: 20rem !important;
}

.my-20 {
  margin-top: 20rem;
  margin-bottom: 20rem;
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.px-3 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.mx-3 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.mx-4 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.px-5 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.mx-5 {
  margin-left: 5rem;
  margin-right: 5rem;
}

.px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.mx-6 {
  margin-left: 6rem;
  margin-right: 6rem;
}

.px-7 {
  padding-left: 7rem;
  padding-right: 7rem;
}

.mx-7 {
  margin-left: 7rem;
  margin-right: 7rem;
}

.px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.mx-8 {
  margin-left: 8rem;
  margin-right: 8rem;
}

.px-9 {
  padding-left: 9rem;
  padding-right: 9rem;
}

.mx-9 {
  margin-left: 9rem;
  margin-right: 9rem;
}

.px-10 {
  padding-left: 10rem;
  padding-right: 10rem;
}

.mx-10 {
  margin-left: 10rem;
  margin-right: 10rem;
}

.px-11 {
  padding-left: 11rem;
  padding-right: 11rem;
}

.mx-11 {
  margin-left: 11rem;
  margin-right: 11rem;
}

.px-12 {
  padding-left: 12rem;
  padding-right: 12rem;
}

.mx-12 {
  margin-left: 12rem;
  margin-right: 12rem;
}

.px-13 {
  padding-left: 13rem;
  padding-right: 13rem;
}

.mx-13 {
  margin-left: 13rem;
  margin-right: 13rem;
}

.px-14 {
  padding-left: 14rem;
  padding-right: 14rem;
}

.mx-14 {
  margin-left: 14rem;
  margin-right: 14rem;
}

.px-15 {
  padding-left: 15rem;
  padding-right: 15rem;
}

.mx-15 {
  margin-left: 15rem;
  margin-right: 15rem;
}

.px-16 {
  padding-left: 16rem;
  padding-right: 16rem;
}

.mx-16 {
  margin-left: 16rem;
  margin-right: 16rem;
}

.px-17 {
  padding-left: 17rem;
  padding-right: 17rem;
}

.mx-17 {
  margin-left: 17rem;
  margin-right: 17rem;
}

.px-18 {
  padding-left: 18rem;
  padding-right: 18rem;
}

.mx-18 {
  margin-left: 18rem;
  margin-right: 18rem;
}

.px-19 {
  padding-left: 19rem;
  padding-right: 19rem;
}

.mx-19 {
  margin-left: 19rem;
  margin-right: 19rem;
}

.px-20 {
  padding-left: 20rem;
  padding-right: 20rem;
}

.mx-20 {
  margin-left: 20rem;
  margin-right: 20rem;
}

.pt-1 {
  padding-top: 1rem !important;
}

.mt-1 {
  margin-top: 1rem;
}

.pt-2 {
  padding-top: 2rem !important;
}

.mt-2 {
  margin-top: 2rem;
}

.pt-3 {
  padding-top: 3rem !important;
}

.mt-3 {
  margin-top: 3rem;
}

.pt-4 {
  padding-top: 4rem !important;
}

.mt-4 {
  margin-top: 4rem;
}

.pt-5 {
  padding-top: 5rem !important;
}
@media (max-width: 769px) {
  .pt-5 {
    padding-top: 2.5rem !important;
  }
}

.mt-5 {
  margin-top: 5rem;
}
@media (max-width: 769px) {
  .mt-5 {
    margin-top: 2.5rem !important;
  }
}

.pt-6 {
  padding-top: 6rem !important;
}
@media (max-width: 769px) {
  .pt-6 {
    padding-top: 3rem !important;
  }
}

.mt-6 {
  margin-top: 6rem;
}
@media (max-width: 769px) {
  .mt-6 {
    margin-top: 3rem !important;
  }
}

.pt-7 {
  padding-top: 7rem !important;
}
@media (max-width: 769px) {
  .pt-7 {
    padding-top: 3.5rem !important;
  }
}

.mt-7 {
  margin-top: 7rem;
}
@media (max-width: 769px) {
  .mt-7 {
    margin-top: 3.5rem !important;
  }
}

.pt-8 {
  padding-top: 8rem !important;
}
@media (max-width: 769px) {
  .pt-8 {
    padding-top: 4rem !important;
  }
}

.mt-8 {
  margin-top: 8rem;
}
@media (max-width: 769px) {
  .mt-8 {
    margin-top: 4rem !important;
  }
}

.pt-9 {
  padding-top: 9rem !important;
}
@media (max-width: 769px) {
  .pt-9 {
    padding-top: 4.5rem !important;
  }
}

.mt-9 {
  margin-top: 9rem;
}
@media (max-width: 769px) {
  .mt-9 {
    margin-top: 4.5rem !important;
  }
}

.pt-10 {
  padding-top: 10rem !important;
}
@media (max-width: 769px) {
  .pt-10 {
    padding-top: 5rem !important;
  }
}

.mt-10 {
  margin-top: 10rem;
}
@media (max-width: 769px) {
  .mt-10 {
    margin-top: 5rem !important;
  }
}

.pt-11 {
  padding-top: 11rem !important;
}
@media (max-width: 769px) {
  .pt-11 {
    padding-top: 5.5rem !important;
  }
}

.mt-11 {
  margin-top: 11rem;
}
@media (max-width: 769px) {
  .mt-11 {
    margin-top: 5.5rem !important;
  }
}

.pt-12 {
  padding-top: 12rem !important;
}
@media (max-width: 769px) {
  .pt-12 {
    padding-top: 6rem !important;
  }
}

.mt-12 {
  margin-top: 12rem;
}
@media (max-width: 769px) {
  .mt-12 {
    margin-top: 6rem !important;
  }
}

.pt-13 {
  padding-top: 13rem !important;
}
@media (max-width: 769px) {
  .pt-13 {
    padding-top: 6.5rem !important;
  }
}

.mt-13 {
  margin-top: 13rem;
}
@media (max-width: 769px) {
  .mt-13 {
    margin-top: 6.5rem !important;
  }
}

.pt-14 {
  padding-top: 14rem !important;
}
@media (max-width: 769px) {
  .pt-14 {
    padding-top: 7rem !important;
  }
}

.mt-14 {
  margin-top: 14rem;
}
@media (max-width: 769px) {
  .mt-14 {
    margin-top: 7rem !important;
  }
}

.pt-15 {
  padding-top: 15rem !important;
}
@media (max-width: 769px) {
  .pt-15 {
    padding-top: 7.5rem !important;
  }
}

.mt-15 {
  margin-top: 15rem;
}
@media (max-width: 769px) {
  .mt-15 {
    margin-top: 7.5rem !important;
  }
}

.pt-16 {
  padding-top: 16rem !important;
}
@media (max-width: 769px) {
  .pt-16 {
    padding-top: 8rem !important;
  }
}

.mt-16 {
  margin-top: 16rem;
}
@media (max-width: 769px) {
  .mt-16 {
    margin-top: 8rem !important;
  }
}

.pt-17 {
  padding-top: 17rem !important;
}
@media (max-width: 769px) {
  .pt-17 {
    padding-top: 8.5rem !important;
  }
}

.mt-17 {
  margin-top: 17rem;
}
@media (max-width: 769px) {
  .mt-17 {
    margin-top: 8.5rem !important;
  }
}

.pt-18 {
  padding-top: 18rem !important;
}
@media (max-width: 769px) {
  .pt-18 {
    padding-top: 9rem !important;
  }
}

.mt-18 {
  margin-top: 18rem;
}
@media (max-width: 769px) {
  .mt-18 {
    margin-top: 9rem !important;
  }
}

.pt-19 {
  padding-top: 19rem !important;
}
@media (max-width: 769px) {
  .pt-19 {
    padding-top: 9.5rem !important;
  }
}

.mt-19 {
  margin-top: 19rem;
}
@media (max-width: 769px) {
  .mt-19 {
    margin-top: 9.5rem !important;
  }
}

.pt-20 {
  padding-top: 20rem !important;
}
@media (max-width: 769px) {
  .pt-20 {
    padding-top: 10rem !important;
  }
}

.mt-20 {
  margin-top: 20rem;
}
@media (max-width: 769px) {
  .mt-20 {
    margin-top: 10rem !important;
  }
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.pb-4 {
  padding-bottom: 4rem !important;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.pb-5 {
  padding-bottom: 5rem !important;
}
@media (max-width: 769px) {
  .pb-5 {
    padding-bottom: 2.5rem !important;
  }
}

.mb-5 {
  margin-bottom: 5rem !important;
}
@media (max-width: 769px) {
  .mb-5 {
    margin-bottom: 2.5rem !important;
  }
}

.pb-6 {
  padding-bottom: 6rem !important;
}
@media (max-width: 769px) {
  .pb-6 {
    padding-bottom: 3rem !important;
  }
}

.mb-6 {
  margin-bottom: 6rem !important;
}
@media (max-width: 769px) {
  .mb-6 {
    margin-bottom: 3rem !important;
  }
}

.pb-7 {
  padding-bottom: 7rem !important;
}
@media (max-width: 769px) {
  .pb-7 {
    padding-bottom: 3.5rem !important;
  }
}

.mb-7 {
  margin-bottom: 7rem !important;
}
@media (max-width: 769px) {
  .mb-7 {
    margin-bottom: 3.5rem !important;
  }
}

.pb-8 {
  padding-bottom: 8rem !important;
}
@media (max-width: 769px) {
  .pb-8 {
    padding-bottom: 4rem !important;
  }
}

.mb-8 {
  margin-bottom: 8rem !important;
}
@media (max-width: 769px) {
  .mb-8 {
    margin-bottom: 4rem !important;
  }
}

.pb-9 {
  padding-bottom: 9rem !important;
}
@media (max-width: 769px) {
  .pb-9 {
    padding-bottom: 4.5rem !important;
  }
}

.mb-9 {
  margin-bottom: 9rem !important;
}
@media (max-width: 769px) {
  .mb-9 {
    margin-bottom: 4.5rem !important;
  }
}

.pb-10 {
  padding-bottom: 10rem !important;
}
@media (max-width: 769px) {
  .pb-10 {
    padding-bottom: 5rem !important;
  }
}

.mb-10 {
  margin-bottom: 10rem !important;
}
@media (max-width: 769px) {
  .mb-10 {
    margin-bottom: 5rem !important;
  }
}

.pb-11 {
  padding-bottom: 11rem !important;
}
@media (max-width: 769px) {
  .pb-11 {
    padding-bottom: 5.5rem !important;
  }
}

.mb-11 {
  margin-bottom: 11rem !important;
}
@media (max-width: 769px) {
  .mb-11 {
    margin-bottom: 5.5rem !important;
  }
}

.pb-12 {
  padding-bottom: 12rem !important;
}
@media (max-width: 769px) {
  .pb-12 {
    padding-bottom: 6rem !important;
  }
}

.mb-12 {
  margin-bottom: 12rem !important;
}
@media (max-width: 769px) {
  .mb-12 {
    margin-bottom: 6rem !important;
  }
}

.pb-13 {
  padding-bottom: 13rem !important;
}
@media (max-width: 769px) {
  .pb-13 {
    padding-bottom: 6.5rem !important;
  }
}

.mb-13 {
  margin-bottom: 13rem !important;
}
@media (max-width: 769px) {
  .mb-13 {
    margin-bottom: 6.5rem !important;
  }
}

.pb-14 {
  padding-bottom: 14rem !important;
}
@media (max-width: 769px) {
  .pb-14 {
    padding-bottom: 7rem !important;
  }
}

.mb-14 {
  margin-bottom: 14rem !important;
}
@media (max-width: 769px) {
  .mb-14 {
    margin-bottom: 7rem !important;
  }
}

.pb-15 {
  padding-bottom: 15rem !important;
}
@media (max-width: 769px) {
  .pb-15 {
    padding-bottom: 7.5rem !important;
  }
}

.mb-15 {
  margin-bottom: 15rem !important;
}
@media (max-width: 769px) {
  .mb-15 {
    margin-bottom: 7.5rem !important;
  }
}

.pb-16 {
  padding-bottom: 16rem !important;
}
@media (max-width: 769px) {
  .pb-16 {
    padding-bottom: 8rem !important;
  }
}

.mb-16 {
  margin-bottom: 16rem !important;
}
@media (max-width: 769px) {
  .mb-16 {
    margin-bottom: 8rem !important;
  }
}

.pb-17 {
  padding-bottom: 17rem !important;
}
@media (max-width: 769px) {
  .pb-17 {
    padding-bottom: 8.5rem !important;
  }
}

.mb-17 {
  margin-bottom: 17rem !important;
}
@media (max-width: 769px) {
  .mb-17 {
    margin-bottom: 8.5rem !important;
  }
}

.pb-18 {
  padding-bottom: 18rem !important;
}
@media (max-width: 769px) {
  .pb-18 {
    padding-bottom: 9rem !important;
  }
}

.mb-18 {
  margin-bottom: 18rem !important;
}
@media (max-width: 769px) {
  .mb-18 {
    margin-bottom: 9rem !important;
  }
}

.pb-19 {
  padding-bottom: 19rem !important;
}
@media (max-width: 769px) {
  .pb-19 {
    padding-bottom: 9.5rem !important;
  }
}

.mb-19 {
  margin-bottom: 19rem !important;
}
@media (max-width: 769px) {
  .mb-19 {
    margin-bottom: 9.5rem !important;
  }
}

.pb-20 {
  padding-bottom: 20rem !important;
}
@media (max-width: 769px) {
  .pb-20 {
    padding-bottom: 10rem !important;
  }
}

.mb-20 {
  margin-bottom: 20rem !important;
}
@media (max-width: 769px) {
  .mb-20 {
    margin-bottom: 10rem !important;
  }
}

.pl-1 {
  padding-left: 1rem;
}

.ml-1 {
  margin-left: 1rem;
}

.pl-2 {
  padding-left: 2rem;
}

.ml-2 {
  margin-left: 2rem;
}

.pl-3 {
  padding-left: 3rem;
}

.ml-3 {
  margin-left: 3rem;
}

.pl-4 {
  padding-left: 4rem;
}

.ml-4 {
  margin-left: 4rem;
}

.pl-5 {
  padding-left: 5rem;
}

.ml-5 {
  margin-left: 5rem;
}

.pl-6 {
  padding-left: 6rem;
}

.ml-6 {
  margin-left: 6rem;
}

.pl-7 {
  padding-left: 7rem;
}

.ml-7 {
  margin-left: 7rem;
}

.pl-8 {
  padding-left: 8rem;
}

.ml-8 {
  margin-left: 8rem;
}

.pl-9 {
  padding-left: 9rem;
}

.ml-9 {
  margin-left: 9rem;
}

.pl-10 {
  padding-left: 10rem;
}

.ml-10 {
  margin-left: 10rem;
}

.pl-11 {
  padding-left: 11rem;
}

.ml-11 {
  margin-left: 11rem;
}

.pl-12 {
  padding-left: 12rem;
}

.ml-12 {
  margin-left: 12rem;
}

.pl-13 {
  padding-left: 13rem;
}

.ml-13 {
  margin-left: 13rem;
}

.pl-14 {
  padding-left: 14rem;
}

.ml-14 {
  margin-left: 14rem;
}

.pl-15 {
  padding-left: 15rem;
}

.ml-15 {
  margin-left: 15rem;
}

.pl-16 {
  padding-left: 16rem;
}

.ml-16 {
  margin-left: 16rem;
}

.pl-17 {
  padding-left: 17rem;
}

.ml-17 {
  margin-left: 17rem;
}

.pl-18 {
  padding-left: 18rem;
}

.ml-18 {
  margin-left: 18rem;
}

.pl-19 {
  padding-left: 19rem;
}

.ml-19 {
  margin-left: 19rem;
}

.pl-20 {
  padding-left: 20rem;
}

.ml-20 {
  margin-left: 20rem;
}

.pr-1 {
  padding-right: 1rem;
}

.mr-1 {
  margin-right: 1rem;
}

.pr-2 {
  padding-right: 2rem;
}

.mr-2 {
  margin-right: 2rem;
}

.pr-3 {
  padding-right: 3rem;
}

.mr-3 {
  margin-right: 3rem;
}

.pr-4 {
  padding-right: 4rem;
}

.mr-4 {
  margin-right: 4rem;
}

.pr-5 {
  padding-right: 5rem;
}

.mr-5 {
  margin-right: 5rem;
}

.pr-6 {
  padding-right: 6rem;
}

.mr-6 {
  margin-right: 6rem;
}

.pr-7 {
  padding-right: 7rem;
}

.mr-7 {
  margin-right: 7rem;
}

.pr-8 {
  padding-right: 8rem;
}

.mr-8 {
  margin-right: 8rem;
}

.pr-9 {
  padding-right: 9rem;
}

.mr-9 {
  margin-right: 9rem;
}

.pr-10 {
  padding-right: 10rem;
}

.mr-10 {
  margin-right: 10rem;
}

.pr-11 {
  padding-right: 11rem;
}

.mr-11 {
  margin-right: 11rem;
}

.pr-12 {
  padding-right: 12rem;
}

.mr-12 {
  margin-right: 12rem;
}

.pr-13 {
  padding-right: 13rem;
}

.mr-13 {
  margin-right: 13rem;
}

.pr-14 {
  padding-right: 14rem;
}

.mr-14 {
  margin-right: 14rem;
}

.pr-15 {
  padding-right: 15rem;
}

.mr-15 {
  margin-right: 15rem;
}

.pr-16 {
  padding-right: 16rem;
}

.mr-16 {
  margin-right: 16rem;
}

.pr-17 {
  padding-right: 17rem;
}

.mr-17 {
  margin-right: 17rem;
}

.pr-18 {
  padding-right: 18rem;
}

.mr-18 {
  margin-right: 18rem;
}

.pr-19 {
  padding-right: 19rem;
}

.mr-19 {
  margin-right: 19rem;
}

.pr-20 {
  padding-right: 20rem;
}

.mr-20 {
  margin-right: 20rem;
}

.p-1 {
  padding: 1rem !important;
}

.m-1 {
  margin: 1rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.m-2 {
  margin: 2rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.m-3 {
  margin: 3rem !important;
}

.p-4 {
  padding: 4rem !important;
}

.m-4 {
  margin: 4rem !important;
}

.p-5 {
  padding: 5rem !important;
}

.m-5 {
  margin: 5rem !important;
}

.p-6 {
  padding: 6rem !important;
}

.m-6 {
  margin: 6rem !important;
}

.p-7 {
  padding: 7rem !important;
}

.m-7 {
  margin: 7rem !important;
}

.p-8 {
  padding: 8rem !important;
}

.m-8 {
  margin: 8rem !important;
}

.p-9 {
  padding: 9rem !important;
}

.m-9 {
  margin: 9rem !important;
}

.p-10 {
  padding: 10rem !important;
}

.m-10 {
  margin: 10rem !important;
}

.p-0 {
  padding: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.mt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/*

===== 1.0 - Components =====

*/
.bricks-button {
  position: relative;
  overflow: visible !important;
  padding: 0;
  z-index: 2;
}
.bricks-button span {
  position: relative;
  background: white;
  padding: 10px 20px !important;
}
.bricks-button span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-extra-2);
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  transition: all 0.25s cubic-bezier(0.34, 1.66, 0.6, 1.51);
}
.bricks-button span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-extra-3);
  filter: blur(0);
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.34, 1.66, 0.6, 1.51);
}
.bricks-button span:hover::after {
  width: calc(100% + 7px);
  height: calc(100% + 7px);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 10px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.bricks-button span:hover::before {
  filter: blur(24px);
}

.bricks-background-secondary span {
  background: var(--color-primary);
}

.button-span {
  width: 100%;
}
.button-span span {
  width: 100%;
}

.dienst:hover .bricks-button::after {
  width: calc(100% + 7px);
  height: calc(100% + 7px);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 10px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.dienst:hover .bricks-button::before {
  filter: blur(24px);
}

button.wsf-button {
  padding: 0 !important;
  border: none !important;
	color: white !important;
  font-family: "Hegsro" !important;
}

.background-overlay {
  z-index: 1;
}
.background-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-extra-1);
  z-index: -1;
}

.blob {
  overflow: hidden;
}
.blob::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 90rem;
  height: 90rem;
  background: var(--color-extra-2);
  border-radius: 90rem;
  filter: blur(29rem);
  opacity: 0.4;
}

.blob-top-left::before {
  top: -30rem;
  left: -30rem;
}
.blob-top-right::before {
  top: -30rem;
  left: unset;
  right: -30rem;
}
.blob-bottom-left::before {
  bottom: -30rem;
  left: -30rem;
}
.blob-bottom-right::before {
  bottom: -30rem;
  right: -30rem;
}

.stripes {
  z-index: 1;
}
.stripes::after {
  content: "";
  pointer-events: none;
  top: -20%;
  right: -50vw;
  width: 100%;
  height: 130%;
  background-image: url("data:image/svg+xml,%3Csvg width='1812' height='1044' viewBox='0 0 1812 1044' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1166.19 0.179702L140.298 1026.07L158.129 1043.91L1184.02 18.0115L1166.19 0.179702Z' fill='url(%23paint0_linear_34_189)'/%3E%3Cpath d='M1236.1 0.192642L210.202 1026.09L228.034 1043.92L1253.93 18.0245L1236.1 0.192642Z' fill='url(%23paint1_linear_34_189)'/%3E%3Cpath d='M1096.19 0.177871L70.2964 1026.07L88.1282 1043.9L1114.02 18.0097L1096.19 0.177871Z' fill='url(%23paint2_linear_34_189)'/%3E%3Cpath d='M1025.89 0.173965L0 1026.07L17.8318 1043.9L1043.73 18.0058L1025.89 0.173965Z' fill='url(%23paint3_linear_34_189)'/%3E%3Cpath d='M1723.59 0.186905L697.7 1026.08L715.532 1043.91L1741.43 18.0187L1723.59 0.186905Z' fill='url(%23paint4_linear_34_189)'/%3E%3Cpath d='M1793.48 0.178848L767.584 1026.07L785.415 1043.9L1811.31 18.0107L1793.48 0.178848Z' fill='url(%23paint5_linear_34_189)'/%3E%3Cpath d='M1653.59 0.163991L627.699 1026.06L645.531 1043.89L1671.43 17.9958L1653.59 0.163991Z' fill='url(%23paint6_linear_34_189)'/%3E%3Cpath d='M1583.26 0.196304L557.366 1026.09L575.198 1043.92L1601.09 18.0281L1583.26 0.196304Z' fill='url(%23paint7_linear_34_189)'/%3E%3Cpath d='M1447.41 0.180313L421.519 1026.07L439.351 1043.91L1465.25 18.0121L1447.41 0.180313Z' fill='url(%23paint8_linear_34_189)'/%3E%3Cpath d='M1517.32 0.172378L491.424 1026.07L509.256 1043.9L1535.15 18.0042L1517.32 0.172378Z' fill='url(%23paint9_linear_34_189)'/%3E%3Cpath d='M1377.41 0.178273L351.518 1026.07L369.35 1043.9L1395.24 18.0101L1377.41 0.178273Z' fill='url(%23paint10_linear_34_189)'/%3E%3Cpath d='M1307.12 0.174453L281.222 1026.07L299.054 1043.9L1324.95 18.0063L1307.12 0.174453Z' fill='url(%23paint11_linear_34_189)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_34_189' x1='1074.04' y1='784.372' x2='603.69' y2='484.815' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_34_189' x1='1094.24' y1='752.729' x2='623.871' y2='453.151' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_34_189' x1='1053.84' y1='816.089' x2='583.49' y2='516.532' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_34_189' x1='1033.56' y1='847.953' x2='563.21' y2='548.374' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_34_189' x1='1234.92' y1='531.837' x2='764.57' y2='232.259' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint5_linear_34_189' x1='1255.07' y1='500.153' x2='784.7' y2='200.575' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint6_linear_34_189' x1='1214.7' y1='563.549' x2='744.356' y2='263.97' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint7_linear_34_189' x1='1194.4' y1='595.412' x2='724.055' y2='295.855' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint8_linear_34_189' x1='1155.19' y1='656.965' x2='684.845' y2='357.387' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint9_linear_34_189' x1='1175.37' y1='625.28' x2='705.026' y2='325.702' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint10_linear_34_189' x1='1134.99' y1='688.682' x2='664.645' y2='389.104' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint11_linear_34_189' x1='1114.71' y1='720.525' x2='644.365' y2='420.946' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230CB4FF'/%3E%3Cstop offset='1' stop-color='%2300ED8F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: bottom left;
  position: absolute;
  z-index: -1;
}

.background-overlay[data-x=left] {
  background-position-x: 20%;
}
.background-overlay[data-x=center] {
  background-position-x: 50%;
}
.background-overlay[data-x=right] {
  background-position-x: 80%;
}
.background-overlay[data-y=top] {
  background-position-y: 20%;
}
.background-overlay[data-y=center] {
  background-position-y: 50%;
}
.background-overlay[data-y=bottom] {
  background-position-y: 80%;
}

.slider-cta .splide__track {
  overflow: visible !important;
}
.slider-cta .splide__track .splide__slide {
  opacity: 0.25;
  transition: all 0.3s cubic-bezier(0.34, 0.66, 0.6, 1.01);
}
.slider-cta .splide__track .splide__slide.is-visible, .slider-cta .splide__track .splide__slide.is-next, .slider-cta .splide__track .splide__slide.is-active {
  opacity: 1;
}
@media (max-width: 769px) {
  .slider-cta .splide__track .splide__slide.is-next {
    opacity: 0.25;
  }
}
.slider-cta .splide__track .splide__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.slider-cta .splide__track::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 45%;
  background: var(--color-extra-4);
}

.logo__slider .splide__track {
  overflow: visible !important;
}
.logo__slider .splide__track .splide__list {
  display: flex;
  align-items: center;
}
.logo__slider .splide__track img {
  max-width: 100px;
}

.diensten__wrapper {
  gap: 10px;
}

.dienst {
  position: relative;
  padding: 13vmax 25px 25px 25px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.dienst__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dienst__image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.dienst__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dienst__tags, .media__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dienst__tag, .media__tag {
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0px 10px;
  border: 1px solid var(--color-secondary);
  border-radius: 100vw;
}

.media__wrapper {
  gap: 20px;
}

.media {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.media:hover .media__image::before {
  scale: 1.05;
}

.media__image {
  position: relative;
}
.media__image::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88' fill='none'%3E%3Cpath d='M88 44C88 68.3005 68.3005 88 44 88C19.6995 88 0 68.3005 0 44C0 19.6995 19.6995 0 44 0C68.3005 0 88 19.6995 88 44ZM3.63062 44C3.63062 66.2954 21.7046 84.3694 44 84.3694C66.2954 84.3694 84.3694 66.2954 84.3694 44C84.3694 21.7046 66.2954 3.63062 44 3.63062C21.7046 3.63062 3.63062 21.7046 3.63062 44Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38 59.5884L60.5 46.598C62.5 45.4433 62.5 42.5566 60.5 41.4019L38 28.4115C36 27.2568 33.5 28.7002 33.5 31.0096L33.5 56.9904C33.5 59.2998 36 60.7431 38 59.5884ZM62.5 50.0621C67.1667 47.3678 67.1667 40.6321 62.5 37.9378L40 24.9474C35.3333 22.2531 29.5 25.621 29.5 31.0096L29.5 56.9904C29.5 62.379 35.3333 65.7468 40 63.0525L62.5 50.0621Z' fill='white'/%3E%3C/svg%3E");
  position: absolute;
  z-index: 2;
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 237, 143, 0.5) 0%, transparent 30%);
  width: 100%;
  height: 100%;
  display: grid;
  transform-origin: center center;
  place-items: center;
  transition: all 0.3s cubic-bezier(0.34, 0.66, 0.6, 1.51);
}
.media__image::after {
  z-index: 1;
}

.media__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-primary);
}
.media__content h4 {
  color: var(--color-primary);
}

.popup__container {
  display: none;
  place-items: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
}
.popup__container.is-active {
  display: grid;
}

.popup {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 30px;
  align-items: center;
  max-width: 900px;
}

.popup__close {
  cursor: pointer;
}

.wsf-label {
  color: var(--color-primary) !important;
}

.wsf-field,
select.wsf-field {
  height: 50px !important;
}

textarea.wsf-field {
  height: 100px !important;
}

p a {
  position: relative;
  z-index: 2;
}
p a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-extra-3);
  margin-top: 0.5rem;
  z-index: 1;
  opacity: 1;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.34, 1, 0.6, 1);
}
p a:hover::after {
  transform: scaleX(0);
  transform-origin: left;
}

.bricks-mobile-menu-toggle {
  color: white;
}

@media screen and (max-width: 768px) {
  header .brxe-nav-menu {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  header .brxe-nav-menu::before {
    content: "MENU";
    font-size: 12px;
  }
}