/* Fonts
--------------------------------------------- */
:root,
body {
  --family-body: Niveau Grotesk W01 Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --weight-body: 400;

  --family-headline: Niveau Grotesk W01 Bold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --weight-headline: 700;

  --family-serif: Niveau Grotesk W01 Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
}

/* Body Styles
--------------------------------------------- */
body {
  font-size: var(--font-size);
  color: var(--c1);
}

/* Font Sizes
--------------------------------------------- */
.fLarge,
.fBigger,
.fBig,
.fMedium,
.fRegular,
.fSmall {
  transition: 0.3s all ease;
}

.fLarge {
  font-size: var(--fLarge);
}

.fBigger {
  font-size: var(--fBigger);
}

.fBig {
  font-size: var(--fBig);
}

.fMedium {
  font-size: var(--fMedium);
}

.fRegular {
  font-size: var(--fRegular);
}

.fSmall {
  font-size: var(--fSmall);
}

/* Font weights */
.fw-headline {
  font-family: "Niveau Grotesk W01 Bold";
}

.fw-body {
  font-weight: var(--weight-body) !important;
}

/* Block Section Indicator
--------------------------------------------- */

.is-style-secInd,
.is-style-secIndGreen {
  font-size: var(--fRegular) !important;
  font-family: "Niveau Grotesk W01 Bold";
  font-family: var(--family-headline) !important;
  margin-bottom: 1rem;
  display: inline-block;
  width: fit-content;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  text-transform: uppercase;
}

.is-style-secInd {
  color: var(--c8);
  background: var(--c3);
}

.is-style-secIndGreen {
  color: var(--c1);
  background: var(--c2);
}

/* Headlines and Claims
--------------------------------------------- */
h1,
.h1,
.is-style-h1 {
  font-family: var(--family-headline) !important;
  color: var(--c8) !important;
  font-size: var(--fBig) !important;
  font-family: "Niveau Grotesk W01 Bold";
  line-height: 1 !important;
}

.h1-5,
.is-style-h1-5 {
  font-family: var(--family-headline);
  color: var(--c1);
  font-size: 4.25rem;
  font-family: "Niveau Grotesk W01 Bold";
  line-height: 1;
}

h2,
.h2,
.is-style-h2 {
  font-family: var(--family-headline);
  color: var(--c1);
  font-size: var(--fBig);
  font-family: "Niveau Grotesk W01 Bold";
  line-height: 1.1;
}

h2.h2thin,
.h2thin,
.is-style-h2thin {
  font-family: var(--family-headline);
  color: var(--c1);
  font-size: var(--fBig);
  font-weight: var(--weight-body) !important;
  line-height: 1.1;
}

h3,
.h3,
.is-style-h3 {
  font-family: var(--family-headline);
  color: var(--c1);
  font-size: var(--fBig);
  font-family: "Niveau Grotesk W01 Bold";
  line-height: 1.1;
  display: block;
}

h4,
.h4,
.is-style-h4 {
  font-family: var(--family-headline);
  color: var(--c1);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  hyphens: auto;
  word-break: break-word;
  display: block;
}

.subTitleMid,
.is-style-subTitleMid {
  font-size: 1.5rem !important;
}

.subTitleSmall,
.is-style-subTitleSmall {
  font-size: 1.15rem;
}

@media (max-width: 992px) {
  .h1-5,
  .is-style-h1-5 {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .is-style-mainHeadline,
  .is-style-midHeadline,
  .is-style-smallHeadline,
  .is-style-subHeader {
    hyphens: auto;
  }

  .h1-5,
  .is-style-h1-5 {
    font-size: 2.15rem;
  }
}

/* Buttons
--------------------------------------------- */
/* Primary */
.is-style-fill a {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-family: "Niveau Grotesk W01 Bold";
  font-size: 1.25rem;
  hyphens: auto;
}

/* Primary Outline */
.is-style-outline,
.is-style-outlinecDarkGreen {
  width: fit-content;
}

.is-style-outline a,
.is-style-outlinecDarkGreen a {
  padding: 1rem 1.5rem;
  display: block;
  font-family: "Niveau Grotesk W01 Bold";
  letter-spacing: 0.5px;
  background: transparent;
  border: 4px solid var(--c2);
  border-radius: 10px;
  transition: 0.3s all ease;
  font-size: 1.25rem;
  hyphens: auto;
}

.is-style-outline a {
  color: var(--c8) !important;
}

.is-style-outlinecDarkGreen a {
  color: var(--c1) !important;
}

.is-style-outline a:hover,
.is-style-outlinecDarkGreen a:hover {
  color: var(--c1) !important;
  background: var(--c2) !important;
}

/* Secondary */
.is-style-btnSec,
.is-style-btnSeccWhite,
.is-style-btnSecFullyWhite,
.is-style-btnSecReverse {
  width: fit-content;
}

.is-style-btnSec a,
.is-style-btnSeccWhite a,
.is-style-btnSecFullyWhite a,
.is-style-btnSecReverse a {
  position: relative;
  font-family: "Niveau Grotesk W01 Bold";
  letter-spacing: 0.5px;
  background: transparent;
  transition: 0.3s all ease;
  font-size: 1.25rem;
  display: flex !important;
  align-items: center !important;
  padding: 0;
  text-align: left;
  hyphens: auto;
}

/* Custom div */
.is-style-btnSecFullyWhite div {
  position: relative;
  font-family: "Niveau Grotesk W01 Bold";
  letter-spacing: 0.5px;
  background: transparent;
  transition: 0.3s all ease;
  font-size: 1.25rem;
  display: flex !important;
  align-items: center !important;
  padding: 0;
  text-align: left;
  hyphens: auto;
}

.is-style-btnSec a::after,
.is-style-btnSec span::after,
.is-style-btnSeccWhite a::after,
.is-style-btnSecFullyWhite a::after {
  content: "";
  display: block;
  transition: 0.3s all ease;
  width: 18px;
  height: 30px;
  margin-left: 0.5rem;
  transform: translateX(0);
}

/* Custom div */
.is-style-btnSecFullyWhite div::after {
  content: "";
  display: block;
  transition: 0.3s all ease;
  width: 18px;
  height: 30px;
  margin-left: 0.5rem;
  transform: translateX(0);
}

.is-style-btnSecReverse a::before {
  content: "";
  display: block;
  transition: 0.3s all ease;
  width: 18px;
  height: 30px;
  margin-right: 0.5rem;
  transform: rotate(180deg) translateX(0);
}

.is-style-btnSec a:hover::after,
.is-style-btnSeccWhite a:hover::after,
.is-style-btnSecFullyWhite a:hover::after {
  transform: translateX(0.5rem);
}

/* Custom div */
.is-style-btnSecFullyWhite div:hover::after {
  transform: translateX(0.5rem);
}

/* Secondary icon blue */
.is-style-btnSec a::after,
.is-style-btnSec span::after,
.is-style-btnSeccWhite a::after,
.is-style-btnSecReverse a::before {
  content: url("/wp-content/uploads/vbuw-arrow-blue-right.svg");
}

/* Secondary icon white */
.is-style-btnSecFullyWhite a::after {
  content: url("/wp-content/uploads/vbuw-arrow-white-right.svg");
}

/* Custom div */
.is-style-btnSecFullyWhite div::after {
  content: url("/wp-content/uploads/vbuw-arrow-white-right.svg");
}

/* Secondary default color */
.is-style-btnSec a,
.is-style-btnSec a:hover,
.is-style-btnSec a:focus,
.is-style-btnSecReverse a,
.is-style-btnSecReverse a:hover,
.is-style-btnSecReverse a:focus {
  color: var(--c1);
}

/* Secondary white color */
.is-style-btnSeccWhite a,
.is-style-btnSeccWhite a:hover,
.is-style-btnSeccWhite a:focus {
  color: var(--c8);
}

/* Secondary fully white color */
.is-style-btnSecFullyWhite a,
.is-style-btnSecFullyWhite a:hover,
.is-style-btnSecFullyWhite a:focus {
  color: var(--c8);
}