/*******   FONTS   *******/
@font-face {
  font-family: 'Outfit';
  src: url("../fonts/Fellix-TRIAL-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-display: swap; }
@font-face {
  font-family: 'Outfit';
  src: url("../fonts/Fellix-TRIAL-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap; }
@font-face {
  font-family: 'Outfit';
  src: url("../fonts/Fellix-TRIAL-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap; }
@font-face {
  font-family: 'Outfit';
  src: url("../fonts/Fellix-TRIAL-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap; }
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/PPEditorialNew-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }
/*******   LINKS   *******/
a {
  color: #999999; }

b {
  font-weight: 600; }

/*******   SCROLLBAR   *******/
::-webkit-scrollbar {
  width: 0px;
  background: transparent; }

/*******   SECTIONS   *******/
section {
  background-color: #FAFAFA; }

/*******   HEADING   *******/
h1 {
  margin: 0;
  position: relative;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 800;
  font-size: calc(40px + 2vw);
  line-height: 90%;
  letter-spacing: -2px;
  color: #1d1d1f;
  text-transform: uppercase;
  /*color: #EEEEEE; Dark Mode*/ }
  h1 .serif {
    font-size: calc(44px + 2.5vw);
    letter-spacing: -3px; }
  h1 div:last-child {
    margin-top: -15px; }

/* Update h1 selector to be more specific */
section .servicesTitle h1,
section .subscriptionTitle h1,
section .workTitle h1,
section .brandsTitle h1,
section .articleTitle h1,
section .faq-container h1 {
  margin: 0;
  position: relative;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 800;
  font-size: calc(40px + 2.5vw);
  line-height: 90%;
  letter-spacing: -3px;
  color: #1d1d1f;
  text-transform: uppercase;
  /*color: #EEEEEE; Dark Mode*/ }
  section .servicesTitle h1 .serif,
  section .subscriptionTitle h1 .serif,
  section .workTitle h1 .serif,
  section .brandsTitle h1 .serif,
  section .articleTitle h1 .serif,
  section .faq-container h1 .serif {
    font-size: calc(40px + 2.5vw);
    letter-spacing: -4px; }
  section .servicesTitle h1 div:last-child,
  section .subscriptionTitle h1 div:last-child,
  section .workTitle h1 div:last-child,
  section .brandsTitle h1 div:last-child,
  section .articleTitle h1 div:last-child,
  section .faq-container h1 div:last-child {
    margin-top: -15px; }

h2 {
  margin: 30px 0 0 0;
  position: relative;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 800;
  font-size: calc(40px + 2.5vw);
  line-height: 92%;
  letter-spacing: -3px;
  color: #1d1d1f;
  text-transform: uppercase;
  /*	color: #EEEEEE; Dark Mode*/ }
  h2 .serif {
    font-size: calc(46px + 2.5vw);
    letter-spacing: -4px; }

h2.introTitle {
  margin: 0;
  position: relative;
  font-family: "Outfit", Helvetica, sans-serif !important;
  font-weight: 600;
  font-size: calc(30px + 1vw);
  font-style: unset;
  line-height: 95%;
  letter-spacing: -1.5px;
  color: #1d1d1f !important;
  text-transform: none;
  /*	color: #EEEEEE; Dark Mode*/ }
  h2.introTitle .serif {
    font-size: calc(30px + 1vw);
    letter-spacing: -1.5px;
    text-transform: none; }

h1 > div, h2 > div, .pretitle > div {
  overflow: hidden; }

h2.h2ani > div {
  display: inline !important; }

h3 {
  margin: 0;
  position: relative;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 500;
  font-size: calc(30px + 1vw);
  line-height: 100%;
  letter-spacing: -1.2px;
  color: #1d1d1f;
  /*	color: #EEEEEE; Dark Mode*/ }

.pretitle {
  position: relative;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 250%;
  letter-spacing: 0.1px;
  color: #EEEEEE;
  /*	color: #CCCCCC; Dark Mode*/
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 28px 4px 55px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: calc(10px + 0.5vw);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(5px);
  white-space: nowrap; }
  .pretitle:before {
    position: absolute;
    content: '';
    background-image: url(../images/star.svg);
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 15px;
    top: 3px;
    left: 9px;
    height: 30px;
    width: 30px; }
  .pretitle.dark {
    color: #333333;
    border: 1px solid rgba(153, 153, 153, 0.5);
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); }
    .pretitle.dark:before {
      background-image: url(../images/stardark.svg); }

.serif {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -2px;
  text-transform: initial; }

.greyRow {
  color: #222222;
  /*	color: #BBBBBB; Dark Mode*/ }

.greyRowLight {
  color: #AAAAAA;
  /*	color: #999999; Dark Mode*/ }

p {
  font-family: "Outfit", Arial, Helvetica, sans-serif !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%; }

.split-line div div {
  overflow: visible;
  padding-right: 6px;
  margin-left: -6px; }

details .answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s, opacity 0.3s, padding 0.3s;
  padding: 0; }

details[open] .answer {
  opacity: 1; }

.toggle {
  transition: transform 0.3s ease; }

details[open] .toggle {
  transform: rotate(45deg);
  /* or 180deg depending on your icon */ }

/*******   HEADER NON CRITICAL   *******/
.sticker {
  left: 57%;
  width: 120px;
  margin-top: calc(-85px - 3%); }

/*******   BUTTONS   *******/
button, .submit {
  padding: 16px 40px 16px 53px;
  color: #ffffff;
  font-family: "Outfit", Arial, Helvetica, sans-serif !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 120%;
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  min-width: 250px;
  text-wrap-mode: nowrap; }

.subWrapper button, .subscriptions button, footer button, .hur54b button {
  min-width: unset; }

.submit {
  padding-left: 24px; }

.primary {
  border-radius: 8px;
  background-size: 100px 100px;
  background-position: -100px -100px;
  background-repeat: no-repeat;
  border-bottom: 3px solid #2754ce;
  background-color: #3e6ae1;
  /*  transition: all 0.5s;*/ }
  .primary:hover {
    background-color: #2754ce; }

.secondary {
  color: #000000;
  border-radius: 8px;
  background-size: 100px 100px;
  background-position: -100px -100px;
  background-repeat: no-repeat;
  transition: all 0.5s ease 0s;
  border-bottom: 3px solid #CCCCCC;
  background-color: #eeeeee;
  background-image: linear-gradient(131deg, rgba(204, 204, 204, 0.75) 0%, #cccccc 49.9%, #eeeeee 50%); }

.darker {
  cursor: pointer;
  color: #EEEEEE;
  border-radius: 8px;
  background-size: 100px 100px;
  background-position: -100px -100px;
  background-repeat: no-repeat;
  transition: all 0.5s ease 0s;
  border-bottom: 3px solid #000000;
  background-color: #262626;
  background-image: linear-gradient(131deg, rgba(4, 4, 4, 0.75) 0%, #040404 49.9%, #262626 50%); }
  .darker:hover {
    background-color: #040404; }

.tertiary {
  background-color: transparent;
  border-bottom: 1px solid rgba(238, 238, 238, 0.4); }
  .tertiary:hover {
    border-bottom: 1px solid #eeeeee; }

.whatsapp {
  display: none; }

.primary:before, .secondary:before, .tertiary:before, .submit:before, .darker:before {
  position: absolute;
  content: '+';
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin-left: -30px; }

.subButtons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: calc(5% + 45px);
  width: 75%;
  max-width: 500px;
  column-gap: 8%; }
  .subButtons .primary, .subButtons .secondary, .subButtons .tertiary {
    width: 50%; }

/*******   INTRO   *******/
.intro-container {
  display: flex;
  width: 100%;
  margin: 0;
  padding-top: 200px;
  border-bottom: 1px solid #CCCCCC; }
  .intro-container .gallery {
    position: relative;
    display: inline-block;
    width: 50%;
    margin: 0;
    overflow: hidden;
    border-radius: 0 25px 0 0; }
    .intro-container .gallery .gllr {
      position: absolute;
      display: flex;
      flex-direction: column;
      width: 50vw;
      height: 100%; }
      .intro-container .gallery .gllr img, .intro-container .gallery .gllr source {
        width: 50vw;
        height: 100%; }
  .intro-container .introduction {
    display: inline-block;
    width: 50%;
    vertical-align: top; }
    .intro-container .introduction h2, .intro-container .introduction > p {
      margin-left: 20%;
      width: calc(80% - 5vw) !important; }
    .intro-container .introduction p {
      margin-top: 70px;
      font-family: 'Outfit', Helvetica, sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 200%;
      letter-spacing: 0.2px;
      color: #111111;
      /*	color: #DDDDDD; Dark Mode*/ }
    .intro-container .introduction .benefits {
      width: 100%;
      margin-left: 0%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      row-gap: 50px;
      padding-top: 75px; }
      .intro-container .introduction .benefits .benefit {
        width: calc(80% - 5vw);
        font-family: 'Outfit', Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #111;
        line-height: 24px;
        letter-spacing: 0.33px;
        padding-top: 80px;
        padding-bottom: 50px;
        padding-left: 20%;
        padding-right: 5vw;
        height: 100%;
        border-bottom: 1px solid #CCCCCC;
        background-repeat: no-repeat;
        background-size: auto; }
        .intro-container .introduction .benefits .benefit:last-of-type {
          border-bottom: 0; }
        .intro-container .introduction .benefits .benefit h3 {
          padding-bottom: 20px;
          font-family: 'Outfit';
          font-weight: 600;
          font-size: calc(25px + 0.7vw);
          line-height: 100%; }
          .intro-container .introduction .benefits .benefit h3 .benefit1 {
            color: #ad64d4; }
          .intro-container .introduction .benefits .benefit h3 .benefit2 {
            color: #708dfa; }
          .intro-container .introduction .benefits .benefit h3 .benefit3 {
            color: #61bd99; }
          .intro-container .introduction .benefits .benefit h3 .benefit4 {
            color: #ffa75f; }
          .intro-container .introduction .benefits .benefit h3 .benefit5 {
            color: #e2cd5a; }
        .intro-container .introduction .benefits .benefit p {
          line-height: 180%; }

/*******   SERVICES   *******/
.services-container {
  width: 100vw;
  padding: 300px 0 0; }
  .services-container h2 .greyRow {
    display: block; }
  .services-container .service {
    display: flex;
    position: relative;
    overflow: hidden; }
    .services-container .service .serviceLeft {
      width: 40%; }
    .services-container .service .serviceRight {
      width: 50%;
      padding: calc(30px + 2vw) 0 calc(30px + 2vw) 10%;
      color: #111111; }
      .services-container .service .serviceRight .serviceTitle {
        margin-block-end: 20px; }
      .services-container .service .serviceRight p {
        color: #999999;
        width: calc(100% - 5vw);
        margin-block-end: 20px; }
    .services-container .service.website {
      border-top: 1px solid #CCCCCC; }
      .services-container .service.website .serviceLeft {
        background-image: url(../images/servicewebsite-big.jpg);
        background-size: cover;
        background-position: 80% 80%; }
      .services-container .service.website .serviceRight {
        border-bottom: 1px solid #CCCCCC; }
    .services-container .service.marketing .serviceLeft {
      background-image: url(../images/servicemarketing-big.jpg);
      background-size: cover;
      background-position: 70% 40%; }
    .services-container .service.marketing .serviceRight {
      border-bottom: 1px solid #CCCCCC; }
    .services-container .service.branding .serviceLeft {
      background-image: url(../images/serviceother-big.jpg);
      background-size: cover;
      background-position: 70% 40%; }
    .services-container .service.branding .serviceRight {
      padding-bottom: 200px; }
    .services-container .service .serviceTitle {
      width: 100%;
      margin-bottom: 35px;
      font-family: 'Outfit', Helvetica, sans-serif;
      font-size: calc(15px + 2vw);
      font-weight: 600;
      letter-spacing: -2px;
      color: #111111; }
    .services-container .service .serviceElements {
      font-family: 'Outfit', Helvetica, sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 200%;
      color: #111111; }
      .services-container .service .serviceElements details {
        border-bottom: 1px solid #CCCCCC;
        -webkit-tap-highlight-color: transparent; }
        .services-container .service .serviceElements details:last-of-type {
          border-bottom: 0; }
      .services-container .service .serviceElements summary {
        position: relative;
        list-style: none;
        padding: 10px 5vw 10px 0;
        cursor: pointer; }
        .services-container .service .serviceElements summary .toggle {
          position: absolute;
          right: 5vw;
          top: 10px;
          height: 27px;
          width: 27px;
          background-color: #111111;
          border-radius: 30px;
          transition: all 0.3s ease-out; }
          .services-container .service .serviceElements summary .toggle:after {
            position: absolute;
            content: '+';
            font-family: 'Outfit', Arial, Helvetica, sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 25px;
            letter-spacing: 0px;
            color: #EEEEEE;
            width: 100%;
            text-align: center;
            margin-top: 0px; }
      .services-container .service .serviceElements .answer {
        font-family: 'Outfit', Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0px;
        color: #111111;
        padding: 0 10vw 0 0; }
    .services-container .service .serviceSummary {
      position: relative;
      line-height: 175%; }

.servicesTitle, .subscriptionTitle, .dankTitle, .articleTitle {
  text-align: center;
  margin-bottom: 90px; }

.subscriptionTitle p {
  color: #CCCCCC; }

/*******   PACKAGES & SUBSCRIPTIONS  *******/
.packsnprices-container {
  width: 100%;
  margin-left: 0;
  padding: 150px 0 20px;
  background-color: #0C0C0D; }
  .packsnprices-container .subscriptionTitle {
    width: 60%;
    margin-left: 20%;
    margin-bottom: 50px; }
    .packsnprices-container .subscriptionTitle h2 {
      color: #EEEEEE; }

.packsnprices p, .subscriptionTitle p {
  font-size: 14px;
  color: #b7aac0;
  margin-top: 50px; }

.subscription-container {
  background-color: #0e0114;
  width: 100%;
  margin-left: 0;
  padding: 120px 0 150px; }
  .subscription-container .subscriptionTitle {
    width: 60%;
    margin-left: 20%; }

.stepTitle h3 {
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 500;
  font-size: calc(30px + 1vw);
  line-height: 100%;
  letter-spacing: -1.2px;
  color: #e2d8ea !important; }
  .stepTitle h3 .serif {
    color: #EEEEEE; }

.subscription p {
  width: 46%;
  margin-left: 27%; }

.spots {
  border-radius: 40px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase; }

@media (max-width: 899.9px) {
  .subHeader .subtitle, .subHeader .spots {
    display: none; } }
.subscriptions {
  display: flex;
  justify-content: center;
  column-gap: 1px;
  width: 100%;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: calc(23px + 0.12vw);
  color: #eee; }
  .subscriptions > div {
    overflow: hidden; }
  .subscriptions .subtitle {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400; }

.packages {
  display: flex;
  column-gap: 20px;
  justify-content: space-around;
  min-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  left: 5%;
  padding: 35px 3%;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: calc(23px + 0.12vw);
  color: #eee; }
  .packages #package {
    position: relative;
    min-width: 300px;
    padding: 30px;
    padding-bottom: 150px;
    background-color: #151515;
    border: 1px solid rgba(255, 255, 255, 0.2); }
    .packages #package .subHeader {
      display: flex;
      justify-content: space-between; }
      .packages #package .subHeader .pretitle, .packages #package .subHeader .spots {
        display: block; }
    .packages #package.prof {
      background: none; }
      .packages #package.prof .timing {
        color: #CCCCCC; }
        .packages #package.prof .timing:before {
          background-image: url(../images/timer.svg);
          opacity: 0.5; }
      .packages #package.prof .selfTitle {
        color: #EEEEEE; }
      .packages #package.prof .selfPrice {
        color: #CCCCCC; }
      .packages #package.prof .selfUSP {
        color: #EEEEEE; }
        .packages #package.prof .selfUSP li {
          border-bottom: 1px solid rgba(179, 202, 247, 0.2); }
      .packages #package.prof .spots {
        color: #DDDDDD; }
    .packages #package .selfUSP {
      color: #EEEEEE; }
      .packages #package .selfUSP li {
        border-bottom: 1px solid #b3caf7; }
        .packages #package .selfUSP li:before {
          background-image: url(../images/checkmark.svg); }
    .packages #package .timing {
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-size: 10px;
      line-height: calc(23px + 0.12vw);
      color: #222222;
      text-transform: uppercase;
      padding-left: 28px;
      margin-top: 4px; }
      .packages #package .timing:before {
        content: '';
        position: absolute;
        top: 7px;
        right: 55px;
        height: 15px;
        width: 15px;
        background-image: url(../images/timer-dark.svg);
        background-size: 15px;
        background-repeat: no-repeat; }
    .packages #package .type {
      color: #F5F5F5;
      margin-top: 0;
      padding: 2px 20px;
      font-size: 10px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      border-radius: 16px; }
      .packages #package .type.agency {
        border: 1px solid #F4791F; }
      .packages #package .type.freelancer {
        border: 1px solid #A96CE6; }
    .packages #package .spots {
      color: #111111;
      opacity: 0.7;
      margin-top: 0;
      border: 1px solid #999;
      padding: 2px 20px;
      font-size: 9px;
      letter-spacing: 0.4px; }
    .packages #package .selfTitle {
      white-space: normal;
      color: #222222;
      font-size: calc(33px);
      font-weight: 400;
      line-height: 100%;
      margin-top: 26px;
      margin-bottom: 6px; }
    .packages #package .selfPrice {
      margin-bottom: 0px;
      font-size: calc(18px + 0.25vw);
      letter-spacing: -1px;
      color: #333333; }
    .packages #package .selfUSP {
      color: #222222;
      margin-top: 25px; }
      .packages #package .selfUSP ul {
        margin-top: 10px;
        padding-inline-start: 32px; }
        .packages #package .selfUSP ul li {
          padding: 11px 0 10px 0px; }
        .packages #package .selfUSP ul li:nth-child(n+5) {
          display: none; }
        .packages #package .selfUSP ul li:first-child {
          margin-top: 0px; }
    .packages #package .showmore, .packages #package .showless {
      margin-top: 25px;
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-size: 10px;
      color: #FFFFFF;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: underline; }
      .packages #package .showmore::after, .packages #package .showless::after {
        content: '';
        background-image: url(../images/chevron-down.svg);
        background-repeat: no-repeat;
        background-size: 10px;
        background-position: 0 12px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: 10px; }
    .packages #package .showless:after {
      background-position: 10px 0px; }
    .packages #package .packageButtons {
      position: absolute;
      bottom: calc(5% + 10px);
      width: calc(100% - 60px);
      margin-top: 40px; }
      .packages #package .packageButtons button {
        width: 100%; }
  .packages::after {
    content: "";
    align-self: stretch;
    padding-inline-end: 5vw; }

.packBackground {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: auto;
  opacity: 0.7; }

.starter .packBackground {
  opacity: 1; }

.packBackground.prof1 {
  background-image: url(../images/category1.jpg);
  background-position: right; }

.packBackground.prof2 {
  background-image: url(../images/category2.jpg);
  background-position: right; }

.packBackground.prof3 {
  background-image: url(../images/category3.jpg);
  background-position: right; }

.subAssistent, .subPro {
  padding-bottom: calc(80px + 5%);
  width: 40%;
  position: relative; }

.subAssistent {
  position: relative;
  padding: calc(35px + 2%) calc(30px + 2%) calc(130px + 4%) calc(30px + 2%);
  margin: 0 2.5% 0 5%; }
  .subAssistent .selfPrice, .subAssistent .perPrice {
    color: #B3CAF7; }
  .subAssistent .selfDiscount {
    color: #6d7c98;
    color: #383d56; }

.subPro {
  padding: calc(35px + 2%) calc(30px + 2%) calc(130px + 4%) calc(30px + 2%);
  margin: 0 5% 0 2.5%; }
  .subPro .selfPrice, .subPro .perPrice {
    color: #C4B3F7; }
  .subPro .selfDiscount {
    color: #756c91;
    color: #38314b; }

.subBackground {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: url(../images/category1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3; }

.prof {
  background-image: url(../images/category2.jpg);
  background-position: right; }

.subContent {
  position: relative; }
  .subContent .subHeader {
    display: flex;
    justify-content: space-between; }
  .subContent .selfTitle {
    color: #fff;
    font-size: calc(24px + 1.8vw);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -1.5px;
    margin-top: 15px;
    white-space: nowrap; }
  .subContent .selfPrice {
    font-size: calc(18px + 1.5vw);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.5px; }
  .subContent .selfDiscount {
    font-weight: 400; }

.workTitle, .brandsTitle {
  position: relative;
  padding-top: 4%;
  padding-right: 35%;
  padding-bottom: 4%;
  padding-left: 5%;
  border-left: 1px solid #BBBBBB;
  margin-bottom: 80px;
  /*	border-image: linear-gradient(rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 1) 50%, rgba(0, 0, 0, 0) 100%) 1;*/ }

.workTitle h2 {
  color: #222222; }

.perPrice {
  font-size: calc(12px + 0.25vw);
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -1px; }

.selfUSP {
  margin-top: 40px; }
  .selfUSP ul {
    margin-top: -2px;
    padding-inline-start: 0px; }
  .selfUSP li {
    list-style: none;
    padding: 13px 0 12px 40px;
    line-height: 18px;
    border-bottom: 1px solid rgba(179, 202, 247, 0.2); }
    .selfUSP li:first-child {
      margin-top: 15px; }
    .selfUSP li:before {
      position: absolute;
      content: '';
      width: 15px;
      height: 42px;
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-size: 21px;
      line-height: 19px;
      color: #FFFFFF;
      width: 22px;
      height: 22px;
      background-color: #00b900;
      background-image: url(../images/checkmark.svg);
      background-size: 11px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 20px;
      text-align: center;
      margin-top: -2px;
      margin-left: -40px; }

/*******   BRANDSMARQUEE  *******/
.brandsMarquee-container {
  width: 100%;
  margin-left: 0;
  background-color: #0C0C0D;
  padding-top: calc(70px + 10vh);
  padding-bottom: 250px; }

.brandsMarquee1, .brandsMarquee2 {
  display: flex;
  height: 70px;
  width: 80%;
  margin-top: 40px;
  opacity: 0.7; }
  .brandsMarquee1 img, .brandsMarquee2 img {
    height: 100%;
    display: inline-block;
    margin-left: -20px;
    mix-blend-mode: exclusion; }

.brandsMarquee2 {
  margin-left: -4560px; }

.brandsTag {
  width: 80%;
  margin-top: 30px;
  margin-bottom: 50px;
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center; }
  .brandsTag h2 {
    font-family: 'Outfit', Helvetica, sans-serif;
    font-weight: 600;
    font-size: calc(40px + 1vw);
    font-style: unset;
    line-height: 100%;
    letter-spacing: -1.2px;
    text-transform: none;
    color: #EEEEEE; }

.pinkRow {
  color: #a382b8 !important; }

.stripe {
  margin-left: 50%;
  height: 220px;
  width: 1px;
  background-color: #FFFFFF;
  opacity: 0.5; }
  .stripe.purple {
    background-color: #7e6b85;
    opacity: 0.7; }
  .stripe.blue {
    background-color: #48596f;
    opacity: 0.7; }

.top {
  margin-bottom: 80px; }

/*******   STEPS   *******/
.steps {
  display: flex;
  column-gap: 50px;
  position: relative;
  margin-top: 150px;
  margin-bottom: 100px;
  width: 90%;
  margin-left: 50%;
  max-width: 1720px;
  transform: translateX(-50%); }
  .steps .step1, .steps .step2, .steps .step3 {
    padding-left: 40px;
    position: relative; }
  .steps .stepNumber {
    position: absolute;
    width: 20px;
    left: -10px;
    height: 100%;
    background-image: url(../images/purpleborder.png);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: center 40px;
    font-size: 24px;
    font-weight: lighter;
    color: #a382b8;
    color: #3f2b4c; }
  .steps .stepTitle {
    display: block;
    margin-bottom: 30px; }
  .steps .stepSummary {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 180%;
    color: #cec4d4; }
  .steps .stepImage {
    text-align: center; }
    .steps .stepImage img {
      width: 80%; }
  .steps .step1 .stepImage {
    margin-top: 16%; }
  .steps .step2 .stepImage {
    margin-top: 16%; }
  .steps .step3 .stepImage {
    margin-top: 8%;
    width: 90%; }

@media (max-width: 827.9px) {
  .steps {
    display: flex;
    flex-direction: column;
    row-gap: 50px; } }
/*******   WORK   *******/
.work-container {
  position: relative;
  background-color: rgba(43, 27, 56, 0.05);
  padding: 120px 0 200px 0; }
  .work-container .cases {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
    row-gap: 4vw; }
    .work-container .cases .case {
      position: relative;
      display: flex;
      justify-content: center;
      border-radius: 15px;
      height: 60vh;
      overflow: hidden;
      margin-left: 1vw; }
      .work-container .cases .case .workCard {
        bottom: calc(70px + 3vh + 1vw);
        position: absolute;
        height: 100px;
        width: calc(100% - 22px); }
        .work-container .cases .case .workCard .casetitle {
          margin-left: calc(20px + 1.2vw);
          color: #f5f5f5;
          font-family: 'Outfit', Arial, Helvetica, sans-serif;
          font-size: calc(20px + 1vw + 2vh);
          font-weight: 400;
          line-height: calc(48px + 0.5vw);
          letter-spacing: -1.5px; }
        .work-container .cases .case .workCard .casecopy {
          margin-left: calc(22px + 1.2vw);
          font-family: 'Outfit', Arial, Helvetica, sans-serif;
          font-size: calc(9px + 0.1vw + 0.2vh);
          font-weight: 400;
          line-height: 250%;
          letter-spacing: 0.5px;
          color: #CCCCCC;
          white-space: nowrap; }
    .work-container .cases .workCase1, .work-container .cases .workCase2, .work-container .cases .workCase3, .work-container .cases .workCase4, .work-container .cases .workCase5, .work-container .cases .workCase6 {
      background-size: cover;
      background-position: center; }
    .work-container .cases .workCase1, .work-container .cases .workCase4, .work-container .cases .workCase5 {
      width: 57.5%; }
    .work-container .cases .workCase2, .work-container .cases .workCase3, .work-container .cases .workCase6 {
      width: 37.5%; }
    .work-container .cases .workCase1 {
      background-image: url(../images/case-sms.jpg); }
    .work-container .cases .workCase2 {
      background-image: url(../images/case-philips.jpg); }
    .work-container .cases .workCase3 {
      background-image: url(../images/case-paco.jpg); }
    .work-container .cases .workCase4 {
      background-image: url(../images/case-peugeot.jpg); }
    .work-container .cases .workCase5 {
      background-image: url(../images/case-envision.jpg); }
    .work-container .cases .workCase6 {
      background-image: url(../images/case-rituals.jpg); }
    .work-container .cases .bgCase {
      width: 100%;
      height: 100%;
      margin: 0;
      background: linear-gradient(0deg, rgba(13, 12, 15, 0.8) 0%, rgba(13, 12, 15, 0.1) 80%);
      padding-top: calc(30px + 3vh + 1vw);
      position: absolute; }
    .work-container .cases .openClose {
      float: right;
      margin-right: 25px;
      height: calc(25px + 0.7vw);
      width: calc(25px + 0.7vw); }
      .work-container .cases .openClose img {
        width: 90%; }

.desktop {
  display: inline; }

.mobile {
  display: none; }

/*******   WHOIS   *******/
.whois-container {
  width: 100%;
  padding: 200px 0 50px 0; }
  .whois-container:before {
    display: none; }
  .whois-container:after {
    display: none; }
  .whois-container .whoisCube {
    position: absolute;
    background-image: url("../images/cubepurple.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 70%;
    width: 270px;
    height: 270px;
    left: 11%;
    margin-top: 180px; }
  .whois-container h2 {
    width: 70%;
    margin-left: 15%;
    text-align: center; }
  .whois-container .pretitle {
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center; }
  .whois-container .whoisWrapper {
    display: flex;
    column-gap: 10%;
    width: 90%;
    margin-left: 5%;
    padding-bottom: 10%;
    position: relative;
    justify-content: space-between;
    /*	z-index: 1;  */ }
  .whois-container .whoisLeft {
    width: 40%;
    padding-top: 220px;
    display: flex;
    flex-direction: column; }
  .whois-container .whoisLine {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: 800;
    line-height: 90%;
    letter-spacing: -1.5px;
    color: #222222;
    text-transform: uppercase;
    /*	color: #EEEEEE; Dark Mode*/ }
    .whois-container .whoisLine .whoisLight {
      color: #bfbec4; }
  .whois-container .whoisCube2 {
    position: relative;
    background-image: url("../images/cubeblue.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 70%;
    width: 184px;
    height: 184px;
    left: 100%;
    margin-top: 20px; }
  .whois-container .whoisContent {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 200px;
    z-index: 1; }
  .whois-container .whoisCubes {
    flex-basis: 30%;
    width: 30%; }
    .whois-container .whoisCubes img {
      width: 60%;
      max-width: 350px;
      margin-top: 100px;
      margin-left: 50%;
      transform: translateX(-50%); }
  .whois-container .whoisPicture {
    position: absolute;
    margin-top: 40px;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    border-radius: 20px;
    overflow: hidden; }
    .whois-container .whoisPicture img {
      width: 40px;
      height: 40px;
      position: absolute; }
  .whois-container .whoiscta {
    display: flex;
    width: 100%;
    max-width: 350px;
    min-width: 100%;
    column-gap: 20px;
    white-space: nowrap;
    margin: calc(50px + 5%) 0; }
    .whois-container .whoiscta button {
      width: auto;
      margin-bottom: 10px; }
  .whois-container .whoisText {
    width: 60%;
    max-width: 800px;
    padding-top: 0; }
    .whois-container .whoisText .whoisTitle {
      width: 80%;
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-weight: 500;
      font-style: italic;
      line-height: 110%;
      letter-spacing: -0.5px;
      color: #222222;
      /*	color: #CCCCCC; Dark Mode*/
      margin-top: 23px; }
      .whois-container .whoisText .whoisTitle blockquote {
        margin: 0; }
    .whois-container .whoisText .whoisCopy {
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: 400;
      line-height: 175%;
      letter-spacing: 0.4px;
      color: #444444;
      /*	color: #CCCCCC; Dark Mode*/
      margin-top: 35px;
      width: 80%; }
    .whois-container .whoisText .whoisName {
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0.4px;
      color: #333333;
      /*	color: #EEEEEE; Dark Mode*/
      margin-top: 48px;
      margin-left: 60px;
      text-transform: uppercase; }

/*******   ARTICLE   *******/
.articles-container {
  margin: 0;
  padding: 0 0 180px 0;
  background-color: #02020f; }
  .articles-container .articleTitle {
    width: 80%;
    margin-left: 10%; }
    .articles-container .articleTitle h2 {
      color: #828fb8; }
    .articles-container .articleTitle p {
      font-size: 14px;
      color: #9ba2ab;
      margin-top: 20px; }
  .articles-container .article {
    position: relative;
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin: 100px 0 100px 5%;
    margin-bottom: 50px; }
    .articles-container .article .articleImage {
      position: relative;
      height: auto;
      border-radius: 20px;
      overflow: hidden;
      width: 100%;
      max-width: 400px; }
      .articles-container .article .articleImage img, .articles-container .article .articleImage video {
        width: 100%; }
    .articles-container .article .articleCopy {
      font-family: 'Outfit', Helvetica, sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 180%;
      color: #9ba2ab;
      letter-spacing: 0.3px;
      width: 30%;
      padding: 0px; }
      .articles-container .article .articleCopy h3 {
        color: #828fb8 !important;
        margin-bottom: 0px;
        margin-top: 10px; }
        .articles-container .article .articleCopy h3 .h3light {
          color: #EEEEEE; }
      .articles-container .article .articleCopy #bedankt2 {
        display: none;
        margin-top: 15px;
        margin-left: 50px;
        opacity: 0;
        padding: 20px;
        background-color: #ccd2e5;
        width: calc(100% - 40px);
        font-size: calc(14px);
        font-family: 'Outfit', Arial, Helvetica, sans-serif;
        font-weight: 400;
        line-height: calc(20px);
        letter-spacing: 0.2px;
        color: #020216; }
      .articles-container .article .articleCopy .inputEmail {
        padding: 5px 10px 5px 24px;
        margin: 10px 10px 14px 0;
        color: #666666; }
      .articles-container .article .articleCopy input[type="email"], .articles-container .article .articleCopy input[type="url"] {
        height: 32px;
        width: 250px;
        border-radius: 5px;
        border: 1px solid #ccc; }

/*******   BRANDS   *******/
.brands-container {
  background-color: #e3e3e3;
  padding: 200px 5vw; }
  .brands-container .brandLogos {
    width: 80%;
    margin-left: 10%;
    margin-top: 50px;
    text-align: center; }
    .brands-container .brandLogos img {
      max-width: 150px;
      margin-top: calc(50px + 2vw); }
      .brands-container .brandLogos img.logo {
        background-color: #F5F5F5;
        margin-top: 3px;
        margin-bottom: 3px;
        max-width: 100px;
        border-radius: 12.5px;
        width: 14%;
        vertical-align: top;
        padding: 2.3%; }

/*******   FAQ   *******/
.faq-container {
  width: 90%;
  padding: 200px 5% 200px 5%;
  background-color: #EEEEEE;
  /*	background-color: #050505; Dark Mode*/ }
  .faq-container h2 {
    text-align: center;
    margin-bottom: 70px; }
    .faq-container h2 .faqSub {
      font-family: 'Outfit', Helvetica, sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 150%;
      letter-spacing: -0.33px;
      margin-top: 20px; }
  .faq-container details {
    font-family: 'Outfit', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: 0.33px;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
    max-width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent; }
    .faq-container details:hover {
      cursor: pointer; }
    .faq-container details summary {
      position: relative;
      padding: 23px 50px;
      list-style: none;
      font-family: 'Outfit', Helvetica, sans-serif;
      font-weight: 500;
      font-size: calc(14px + 0.2vw);
      line-height: 110%;
      letter-spacing: -0.2px;
      color: #111111;
      background-color: #F9F9F9; }
      .faq-container details summary .toggle {
        position: absolute;
        right: 50px;
        top: 18px;
        height: 31px;
        width: 31px;
        background-color: #111111;
        border-radius: 100px;
        transition: all 0.3s ease-out; }
        .faq-container details summary .toggle:after {
          position: absolute;
          content: '+';
          font-family: 'Outfit', Arial, Helvetica, sans-serif;
          font-size: 23px;
          font-weight: 400;
          line-height: 25px;
          letter-spacing: 0px;
          color: #EEEEEE;
          width: 100%;
          text-align: center;
          margin-top: 2px; }
    .faq-container details .answer {
      padding: 20px 15% 50px 50px;
      background-color: #F5F5F5;
      border-top: 1px solid #DDDDDD; }
      .faq-container details .answer ul {
        margin-bottom: 25px;
        list-style-type: square; }
        .faq-container details .answer ul li {
          margin-bottom: 5px;
          padding-left: 5px; }

/*******   FOOTER   *******/
footer {
  padding: 200px 5%;
  background-color: #000000;
  color: #b9c2d6;
  font-size: 14px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  width: 90%;
  text-align: left; }
  footer a {
    display: inline;
    color: #AAAAAA; }
  footer .footerLeft {
    display: inline-block;
    width: 55%;
    margin-right: 9%;
    vertical-align: top; }
    footer .footerLeft .footerTitle {
      font-size: calc(30px + 1vw);
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-weight: 400;
      line-height: calc(30px + 1vw);
      letter-spacing: -1px;
      padding-bottom: 40px;
      margin-bottom: 50px;
      color: #EEEEEE;
      background-image: url(../images/redline.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 80px 1px; }
    footer .footerLeft .contactBlock {
      display: flex;
      column-gap: 40px;
      margin-top: 10px;
      margin-bottom: 20px;
      row-gap: 10px; }
      footer .footerLeft .contactBlock div {
        width: 50%; }
        footer .footerLeft .contactBlock div button {
          width: 100%; }
  footer .footerRight {
    display: inline-block;
    width: 34%;
    color: #AAAAAA;
    vertical-align: top;
    padding-top: 10px; }
    footer .footerRight .linkedin {
      position: absolute;
      right: 5%; }
    footer .footerRight address.naw {
      color: #999;
      margin: 20px 0 0 0;
      line-height: 24px; }
      footer .footerRight address.naw a {
        color: inherit;
        text-decoration: none; }
        footer .footerRight address.naw a:hover {
          text-decoration: underline; }
    footer .footerRight .footerlinks {
      color: #999;
      margin: 30px 0 0 0; }
    footer .footerRight .copyright {
      float: none;
      clear: both;
      font-weight: 400;
      margin: 30px 0 0 0;
      color: #888; }

/*******   CONSENT BANNER & POPUP   *******/
/****  CONSENT POPUP  ****/
#cc-main .pm.pm--box {
  padding: 10px !important;
  max-height: 35em !important; }

#cc-main .pm__section-desc-wrapper {
  margin-top: 5px !important; }

#cc-main .pm__btn {
  background: #0e0d14 !important; }

#cc-main .pm__btn.pm__btn--secondary {
  background: transparent !important; }

#cc-main .pm__section:first-child {
  margin-bottom: 25px !important; }

.pm__body .pm__section:first-child .pm__section-title {
  display: none !important; }

#cc-main .pm__section--toggle .pm__section-title {
  color: #0e0d14 !important;
  background: #f5f5f5 !important; }

#cc-main .pm__section--toggle .pm__section-title:hover {
  background: #EEEEEE !important; }

#cc-main .pm__section--expandable .pm__section-arrow {
  background: #FFFFFF !important;
  border: 1px solid #DDDDDD !important;
  width: 24px;
  height: 24px; }

#cc-main .pm__section--expandable .pm__section-arrow svg {
  display: none; }

#cc-main .pm__section--expandable .pm__section-arrow:before {
  position: absolute;
  content: '+';
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  width: 10px;
  height: 20px;
  margin-left: 0.5px;
  margin-top: 3px;
  line-height: 15px;
  color: #0e0d14; }

#cc-main .pm__badge {
  background: #EEEEEE !important;
  /*	color: #333333!important;*/
  font-weight: 400 !important;
  padding: 11px 11px 12px !important; }

#cc-main .pm__service-counter {
  background-color: #0e0d14 !important; }

/*******   Meer informatie   *******/
#cc-main .pm__section-toggles + .pm__section
#cc-main .pm__section:hover {
  background-color: transparent !important; }

#cc-main .pm__section-title {
  font-weight: 500 !important; }

#cc-main .pm__section:last-child .pm__section-title {
  font-family: 'Outfit', Helvetica, sans-serif;
  font-size: 14px !important;
  letter-spacing: -0.2px;
  font-weight: 700 !important; }

/*******   Buttons   *******/
#cc-main .pm__close-btn {
  background-color: #0e0d14 !important; }

#cc-main .pm__close-btn:hover {
  background-color: whitesmoke !important; }

#cc-main .pm__close-btn svg {
  stroke: #eee;
  stroke-width: 2px; }

#cc-main .pm__btn + .pm__btn {
  margin-right: 20px; }

/*******   CONSENT BANNER   *******/
#cc-main .cm__body {
  padding: 10px !important; }

.cm__title, .pm__title {
  font-size: 19px !important;
  letter-spacing: -0.5px !important; }

.cm__title img {
  margin-right: 10px; }

#cc-main .cm__btns {
  padding: 1rem 1.3rem 0 !important; }

#cc-main .cm__btn span:before, #cc-main .pm__btn:before {
  position: absolute;
  content: '+';
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin-left: -30px;
  line-height: 15px;
  color: #EEEEEE; }

#cc-main .cm__btn, .pm__footer .pm__btn {
  border-bottom: 3px solid #000000 !important;
  background-color: #0e0d14 !important;
  padding-left: 50px !important;
  text-align: left !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px;
  /*    background-image: linear-gradient(131deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 1.0) 49.9%, rgba(38, 38, 38, 1.0) 50%)!important;*/ }

#cc-main .cm__btn.cm__btn--secondary span:before, #cc-main .pm__btn--secondary:before {
  color: #0e0d14 !important; }

#cc-main .cm__btn--secondary, .pm__btn--secondary, .pm__footer .pm__btn.pm__btn--secondary {
  color: #0e0d14 !important;
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #0e0d14 !important; }

#cc-main .cm__footer {
  padding: 10px 15px !important;
  background-color: #0e0d14 !important;
  color: #EEEEEE; }

#cc-main .cm--cloud .cm__desc, .pm__section-desc {
  font-family: "Outfit", Helvetica, sans-serif !important;
  font-size: 12px !important;
  color: #444444 !important;
  letter-spacing: 0.1px; }

.pm__section-desc {
  font-size: 13px !important; }

.cm__link-group a {
  font-family: "Outfit", Helvetica, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1px; }

/*******   CONTACT FORM AND THANK YOU   *******/
#bedankt {
  display: none;
  margin-left: 50px;
  opacity: 0;
  padding: 20px;
  background-color: #e3e4e4;
  width: calc(100% - 40px);
  font-size: calc(14px);
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: calc(20px);
  letter-spacing: 0.2px; }

.antispam {
  display: none; }

/*******   OVERLAY   *******/
.siteOverlay, .subOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(13, 12, 15, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2;
  display: none;
  opacity: 0;
  cursor: pointer; }

/*******   MENU   *******/
.menuWrapper {
  position: fixed;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 500px;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.93);
  min-height: 92vh;
  z-index: 101;
  display: none; }
  .menuWrapper .menu {
    align-content: flex-end;
    justify-content: space-between; }
  .menuWrapper .menuButtons {
    display: flex;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 20px;
    padding-left: 1px; }
    .menuWrapper .menuButtons div {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 54px;
      padding-top: 20px;
      margin-left: -1px;
      background-color: rgba(217, 217, 217, 0.2);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      text-align: center;
      font-family: 'Outfit', 'Outfit', Helvetica, sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.5);
      line-height: 20px;
      letter-spacing: -0.33px;
      width: 33.333%;
      cursor: pointer;
      position: relative; }
    .menuWrapper .menuButtons.mobile {
      display: none; }

.menu {
  min-height: 90vh;
  width: calc(100% - 100px);
  min-width: 400px;
  padding: 5vh 0;
  position: absolute;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.menuBody {
  z-index: 1; }

.menuTitle {
  display: inline-block;
  width: 90%;
  margin-top: -5px; }
  .menuTitle p {
    font-size: 11px; }

.menuClose, .subClose, .contactClose {
  position: absolute;
  top: 36px;
  right: 0;
  padding: 0;
  background-color: whitesmoke;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  height: 31px;
  width: 31px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  z-index: 2; }

.contactClose {
  top: 20px;
  right: 20px; }

.menuClose:after, .subClose:after, .contactClose:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: calc(30px + 1vw);
  font-weight: 400;
  line-height: calc(30px + 1vw);
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center; }
.menuClose:hover, .subClose:hover, .contactClose:hover {
  background-color: #ebebeb; }

.activated, .menuButtons div:hover, .menuCall:hover {
  color: #111111 !important;
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.8); }

.menuMeet:before, .menuMessage:before, .menuCall:before, .menuChat:before {
  position: absolute;
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  margin-top: -50px; }

.menuMeet {
  position: relative; }
  .menuMeet:before {
    background-image: url(../images/line-md--calendar.svg); }

.menuMessage:before {
  background-image: url(../images/line-md--email.svg); }

.menuCall:before {
  background-image: url(../images/line-md--phone-call-loop.svg); }

.menuChat:before {
  background-image: url(../images/line-md--chat.svg); }

.qxCTlb {
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
  background-color: transparent;
  border-radius: 0 !important; }

.subSummary .qxCTlb {
  display: inline;
  position: unset !important;
  width: auto !important;
  min-height: auto;
  color: #777777 !important;
  opacity: 1 !important;
  font-size: 12px;
  line-height: 100%;
  font-weight: 400;
  text-decoration: underline;
  padding: 0;
  background-color: transparent !important; }

.message input, .message textarea, .contact input, .contact textarea {
  background: transparent;
  border: 0 solid transparent;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 0;
  display: block;
  font-family: 'Outfit', Helvetica;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.33px;
  line-height: 200%;
  outline: none;
  position: relative;
  width: calc(100% - 30px);
  margin-bottom: 5px;
  resize: none;
  overflow: hidden;
  background-color: rgba(217, 217, 217, 0.2);
  padding: 10px 10px 10px 20px; }

.message textarea, .contact textarea {
  line-height: 110%;
  padding-top: 20px;
  padding-bottom: 20px; }

::placeholder {
  /*  color: rgba(17, 17, 17, 0.2);*/
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  /* Firefox */ }

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: rgba(0, 0, 0, 0.4); }

.submitform {
  margin-top: 24px;
  border: none !important;
  text-align: left;
  color: #ffffff;
  font-family: "Outfit", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 120% !important;
  letter-spacing: 0.3px !important;
  border-radius: 8px !important;
  background-size: 100px 100px !important;
  background-position: -100px -100px !important;
  background-repeat: no-repeat !important;
  transition: all 0.5s ease 0s;
  border-bottom: 3px solid #368d24 !important;
  background-color: #44b12b !important;
  background-image: linear-gradient(131deg, rgba(54, 141, 36, 0.75) 0%, #368d24 49.9%, #44b12b 50%) !important; }
  .submitform:before {
    position: absolute;
    content: '+';
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-left: -30px; }

.menuFoot {
  padding-top: 20px;
  width: 100%;
  display: flex;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 24px; }
  .menuFoot div {
    width: 37.5%; }
    .menuFoot div:last-child {
      width: 25%; }
    .menuFoot div img {
      height: 42px;
      margin-top: 3px; }

/*******   SUBSCRIBE OVERLAY   *******/
.solutionButtons {
  width: 100%;
  display: flex;
  column-gap: 15px; }

.productenBtn, .pakkettenBtn, .websiteBtn, .marketingBtn, .brandingBtn {
  background-color: white;
  border-radius: 10px;
  padding: 25px 35px 25px;
  width: 50%;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: calc(24px);
  line-height: 130%;
  letter-spacing: -0.1px;
  cursor: pointer;
  opacity: 0.7;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out; }

.productenBtn:hover, .pakkettenBtn:hover, .websiteBtn:hover, .marketingBtn:hover, .brandingBtn:hover {
  opacity: 1; }

.solSelect {
  opacity: 1; }

.solSelect:before, .subSelected:before, .selectedProductsSummary:before {
  position: absolute;
  content: '';
  top: -27px;
  right: -27px;
  width: 54px;
  height: 54px;
  background-color: #3e6ae1;
  transform: rotate(45deg); }

.solSelect:after, .subSelected:after, .selectedProductsSummary:after {
  position: absolute;
  content: '';
  top: 6px;
  right: 7px;
  width: 12px;
  height: 12px;
  background-image: url("../images/checkmark.svg");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: center; }

.productenBtn span, .pakkettenBtn span, .websiteBtn span, .marketingBtn span, .brandingBtn span {
  display: block;
  text-transform: uppercase;
  font-size: calc(11px);
  font-weight: 400;
  line-height: 16px;
  color: #999999; }

/*******   Category selector buttons   *******/
.categorySelector {
  display: flex;
  gap: 10px;
  margin: 0 0 35px; }
  .categorySelector .categoryBtn {
    flex: 1;
    padding: 15px 20px;
    background-color: rgba(217, 217, 217, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-out;
    color: rgba(0, 0, 0, 0.5); }
    .categorySelector .categoryBtn:hover {
      background-color: rgba(217, 217, 217, 0.4);
      color: #111111; }
    .categorySelector .categoryBtn.selected {
      background-color: #FFFFFF;
      color: #111111;
      border-color: rgba(0, 0, 0, 0.2);
      font-weight: 500; }

/*******   PRODUCT OVERLAY   *******/
.packageGroup {
  margin-top: 5px; }
  .packageGroup > .selectTitle {
    margin: 30px 0;
    color: #111111; }

.pakketBadge {
  position: absolute;
  right: 15px;
  bottom: 16px;
  background-color: #3e6ae1;
  color: #FFFFFF;
  padding: 6px 20px;
  border-radius: 20px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.pakkettenTab .subSelect {
  position: relative;
  margin-top: 20px; }

.pakkettenTab .subSelect:first-child {
  margin-top: 5px; }
  .pakkettenTab .subSelect:first-child .selectDetails {
    margin-bottom: 25px; }

.productenTab, .pakkettenTab {
  margin-top: 35px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 35px 35px 40px;
  margin-bottom: 70px; }

.subSelect {
  width: calc(100% - 48px);
  padding: 17px 24px 20px 24px;
  background-color: rgba(243, 243, 243, 0.8);
  color: #222222;
  border: 1px solid rgba(0, 0, 0, 0.5);
  margin-top: 15px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out; }
  .subSelect:first-child {
    margin-top: 0; }
  .subSelect:hover {
    background-color: #FFFFFF; }

.subSelected {
  background-color: white;
  border: 1px solid #3e6ae2; }

.selectHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }

.selectTitle {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(18px + 0.15vw + 0.3vh);
  line-height: 110%;
  letter-spacing: 0.1px;
  margin-bottom: 5px; }

.selectSubtitle {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 130%;
  letter-spacing: 0px;
  color: #555555;
  margin: 10px 0 7px; }

.selectDiscount {
  display: inline-block;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(14px + 0.15vw + 0.3vh);
  line-height: 150%;
  letter-spacing: 0.1px;
  color: #CCCCCC; }

.selectPrice {
  position: relative;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: calc(14px + 0.15vw + 0.3vh);
  line-height: 110%;
  letter-spacing: 0.1px;
  margin-bottom: 3px; }

.selectMonth {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.1px; }

.selectDetails ul {
  margin-top: -2px;
  padding-inline-start: 0px;
  margin-block-end: 7px; }
  .selectDetails ul li {
    list-style: none;
    padding: 3px 0 2px 34px;
    line-height: 18px;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 170%;
    letter-spacing: 0.1px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.15); }
    .selectDetails ul li:first-child {
      margin-top: 15px; }
    .selectDetails ul li:before {
      position: absolute;
      content: '';
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-size: 17px;
      line-height: 16px;
      color: #FFFFFF;
      width: 20px;
      height: 20px;
      background-color: #00b900;
      background-image: url(../images/checkmark.svg);
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 20px;
      text-align: center;
      margin-left: -34px; }

.detailBtn {
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline; }
  .detailBtn:hover {
    text-decoration: underline; }
  .detailBtn:after {
    content: '';
    background-image: url(../images/chevron-down-dark.svg);
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: 0 13px;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 7px; }

.selectOpen {
  display: none; }
  .selectOpen:after {
    transform: rotate(180deg);
    background-position: 0 0px;
    margin-left: 0px; }

.selectClosed {
  display: table; }

.selectDetails {
  display: none;
  margin-top: 20px;
  padding-top: 5px;
  border-top: 1px solid #DDDDDD;
  width: 100%; }

.subWrapper {
  position: fixed;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 40%;
  min-width: 500px;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.95);
  min-height: 92vh;
  z-index: 101;
  display: none; }
  .subWrapper .menuTitle {
    margin-bottom: 20px; }
    .subWrapper .menuTitle h2 {
      margin: 0 0 23px 0;
      font-size: calc(40px + 0.2vw);
      font-weight: 600;
      font-style: normal;
      text-transform: none;
      letter-spacing: -2px; }
      .subWrapper .menuTitle h2 .serif {
        font-size: calc(40px + 0.2vw);
        letter-spacing: -2px; }
  .subWrapper .menu {
    padding-bottom: 130px;
    z-index: 1; }

.contact {
  position: relative;
  width: calc(100% - 40px);
  padding: 35px 20px 40px;
  background-color: #fff;
  border-radius: 15px;
  display: none;
  margin-bottom: 70px; }
  .contact .contactTitle {
    font-family: 'Outfit', Helvetica, sans-serif;
    font-weight: 600;
    font-size: calc(32px + 0.5vw);
    letter-spacing: -1px;
    line-height: 100%;
    margin-bottom: 20px; }
  .contact .contactCopy {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 130%;
    letter-spacing: 0px;
    color: #333333;
    margin-bottom: 20px; }
  .contact .selectedProductsSummary {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    margin: 40px 0 25px;
    width: calc(100% - 48px);
    padding: 17px 24px 21px 24px;
    background-color: rgba(243, 243, 243, 0.8);
    color: #222222;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 15px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden; }
    .contact .selectedProductsSummary .selectedTitle {
      text-transform: uppercase;
      font-size: calc(11px);
      font-weight: 400;
      line-height: 16px;
      letter-spacing: -0.1px;
      color: #999999; }
    .contact .selectedProductsSummary #selectedProductsList {
      font-weight: 400;
      font-size: calc(18px + 0.15vw + 0.3vh);
      line-height: 110%;
      margin-top: 3px; }
  .contact #selectedProductsPrice {
    font-weight: 400;
    font-size: 11px;
    line-height: 130%;
    color: #555555;
    margin: 10px 0 7px; }
  .contact #packageformfields {
    margin-bottom: 10px; }
    .contact #packageformfields button {
      margin-top: 25px; }
    .contact #packageformfields ::placeholder {
      font-family: 'Outfit', Arial, Helvetica, sans-serif;
      color: rgba(0, 0, 0, 0.6);
      opacity: 1;
      /* Firefox */ }
    .contact #packageformfields ::-ms-input-placeholder {
      /* Edge 12 -18 */
      color: rgba(0, 0, 0, 0.8); }
  .contact #packageBedankt {
    display: none;
    font-family: 'Outfit';
    font-size: 12px; }

.subTicket, .packTicket {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  width: calc(40%);
  min-width: 500px;
  bottom: 0;
  right: 0;
  padding: 20px 50px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(150%);
  z-index: 2147483647; }

.packTicket {
  opacity: 0; }

.hur54b {
  z-index: 2147483648 !important; }

.ticketWrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 35px; }
  .ticketWrapper .selectTitle {
    line-height: 100%;
    margin-bottom: 6px;
    margin-top: 5px; }
  .ticketWrapper button {
    height: 47px;
    margin-top: 8px;
    padding: 12px 24px 12px 48px; }

#ticketAssistent {
  display: none;
  width: 100%; }

.ticketSelected {
  display: flex !important;
  column-gap: calc(5px + 1vw);
  justify-content: space-between; }
  .ticketSelected button {
    max-width: 145px;
    min-width: 140px; }

/******     LIVE CHAT     *******/
#hubspot-messages-iframe-container {
  margin-right: 14px !important;
  margin-bottom: 14px !important;
  z-index: 2147483646 !important; }

.ergJbQ {
  margin-right: 10px;
  margin-bottom: 10px; }

/******     CALENDAR SCHEDULING     *******/
.qxCTlb {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: Google Sans Text,Google Sans;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .25px;
  color: white;
  border-width: 0;
  cursor: pointer;
  white-space: break-spaces;
  word-break: break-word; }

.hur54b {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(32, 33, 36, 0.6);
  padding: 72px;
  z-index: 9999; }

.mmGMM {
  border: none;
  border-radius: 8px;
  background-color: white;
  width: 100%;
  height: 100%; }

.Xfsokf {
  position: fixed;
  top: 26px;
  right: 72px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  border: none;
  border-radius: 18px;
  background-color: #1f1f1f;
  height: 36px;
  padding: 16px;
  cursor: pointer; }

.L0Dvsd {
  color: #fff;
  font-size: 18px;
  margin-right: 8px; }

.uE25ec {
  font-size: 14px;
  font-family: "Google Sans",Arial,sans-serif;
  font-weight: 500;
  letter-spacing: .25px;
  color: #fff; }

/******     WEBSITE LATEN MAKEN    *******/
.websitelatenmaken #headerTitle h2 > div {
  display: block !important; }
.websitelatenmaken h2 div:last-child {
  margin-top: 0; }
.websitelatenmaken .sticker {
  display: none; }

/******     SEO GEO    *******/
.seogeo main {
  background-color: #FAFAFA; }
.seogeo .growth, .seogeo .locatie, .seogeo .whois-container, .seogeo .stats-container, .seogeo .ingredients, .seogeo .summary {
  max-width: 1500px;
  margin-left: 50%;
  transform: translateX(-50%); }
.seogeo .stats-container {
  width: 90%; }
.seogeo h2 {
  margin-bottom: 30px; }
.seogeo .headerButton {
  width: unset; }
.seogeo button.primary, .seogeo button.secondary, .seogeo button.tertiary {
  padding: 18px 45px 18px 55px; }
.seogeo .secondary {
  color: #111111;
  border-radius: 8px;
  background-size: 100px 100px;
  background-position: -100px -100px;
  background-repeat: no-repeat;
  transition: none;
  border-bottom: 3px solid #1856B5;
  background-color: white;
  background-image: linear-gradient(131deg, rgba(204, 204, 204, 0.75) 0%, #cccccc 49.9%, #eeeeee 50%); }
  .seogeo .secondary:hover {
    background-color: #f6f9ff; }
.seogeo .growth {
  display: flex;
  column-gap: 120px; }
.seogeo .brandsTitle {
  padding: 4% 0 40px 5vw;
  margin-bottom: 0px;
  border-left: 1px solid #333333; }
  .seogeo .brandsTitle h2 {
    margin-bottom: 0; }
.seogeo .burenLeft, .seogeo .burenRight {
  flex-basis: 50%;
  width: 50%; }
.seogeo .burenRight {
  padding-top: 40px; }
.seogeo .burenSticker {
  width: 15vw;
  max-width: 200px;
  position: absolute;
  margin-top: 50px;
  margin-left: -100px; }
  .seogeo .burenSticker img {
    width: 100%; }
.seogeo .imageRight {
  width: auto;
  overflow: hidden;
  border-radius: 25px; }
  .seogeo .imageRight img {
    width: 100%; }
.seogeo .growthCopy {
  margin-left: 5vw;
  font-family: 'Outfit', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: #111111; }
.seogeo .whois {
  position: relative;
  width: 100%; }
  .seogeo .whois:before {
    position: absolute;
    content: '';
    background: radial-gradient(50% 40% at right, rgba(234, 172, 128, 0.3) 0%, rgba(238, 238, 238, 0) 100%);
    width: 70%;
    height: 100%;
    left: 30%;
    top: -5%; }
  .seogeo .whois:after {
    position: absolute;
    content: '';
    background: radial-gradient(60% 40% at right, rgba(186, 128, 234, 0.3) 0%, rgba(238, 238, 238, 0) 100%);
    width: 100%;
    height: 100%;
    left: 20%;
    top: 50%; }
.seogeo .cases-container {
  padding-bottom: 200px; }

.stats {
  width: 100%;
  margin: 175px 0 200px 0;
  display: flex;
  font-family: "Outfit", Helvetica, sans-serif !important;
  font-size: calc(36px + 0.2vw);
  line-height: 95%;
  color: #1d1d1f;
  justify-content: space-between; }
  .stats .statsubject {
    display: flex;
    align-items: flex-end;
    flex-basis: 50%;
    font-weight: 500;
    font-size: 36px;
    letter-spacing: -1.5px; }
  .stats .stat {
    letter-spacing: -0.8px; }
    .stats .stat:first-of-type {
      flex-basis: 20%; }
    .stats .stat div:first-child {
      text-transform: uppercase;
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      line-height: 300%;
      letter-spacing: 0.2px; }
    .stats .stat div:last-child {
      font-weight: 400;
      font-size: 27px;
      color: #1d1d1f; }

.growth, .locatie, .summary {
  margin: 200px 5vw;
  width: 90vw; }

.summary {
  text-align: center; }

.ingredients-container, .deliverable-container {
  width: 90vw;
  background-color: #0C0C0D; }

.ingredients-container {
  padding: 200px 5vw 200px; }

.deliverable-container {
  padding: 200px 5vw 250px; }

.ingredients, .deliverables {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
  width: 100%; }
  .ingredients h2, .deliverables h2 {
    color: #EEEEEE;
    font-size: calc(24px + 2.5vw);
    letter-spacing: -2px;
    margin-bottom: 0; }
    .ingredients h2 .serif, .deliverables h2 .serif {
      font-size: calc(24px + 2.5vw);
      letter-spacing: -2px; }
  .ingredients .dual, .deliverables .dual {
    margin-top: 10px !important;
    margin-top: 70px;
    color: #CCCCCC; }
    .ingredients .dual.deliverable > div, .ingredients .dual.deliverable > div > div, .deliverables .dual.deliverable > div, .deliverables .dual.deliverable > div > div {
      position: relative; }
    .ingredients .dual.deliverable img, .deliverables .dual.deliverable img {
      width: 100%;
      height: 100%;
      border-radius: 15px; }
    .ingredients .dual.deliverable .deliverableTitle, .deliverables .dual.deliverable .deliverableTitle {
      position: absolute;
      left: 35px;
      bottom: 50px;
      font-family: "Outfit", Helvetica, sans-serif !important;
      font-size: calc(40px + 0.2vw);
      font-weight: 300;
      letter-spacing: -1px;
      color: #EEEEEE; }
    .ingredients .dual.deliverable .deliverableDesc, .deliverables .dual.deliverable .deliverableDesc {
      position: relative;
      margin: 35px 35px 50px 0px;
      font-family: "Outfit", Helvetica, sans-serif !important;
      font-size: calc(10px + 0.2vw);
      font-weight: 300; }

.locatie {
  margin-bottom: 0;
  text-align: center; }
  .locatie h2 {
    width: 70%;
    margin-left: 15%;
    margin-bottom: 70px; }

.single {
  position: relative;
  width: 98%;
  margin-left: 2%; }
  .single:first-of-type {
    margin-top: 20px; }
  .single .singleBackground, .single .singleBackground1, .single .singleBackground2, .single .singleBackground3, .single .singleBackground4, .single .singleBackground5, .single .singleBackground6 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px; }
    .single .singleBackground img, .single .singleBackground1 img, .single .singleBackground2 img, .single .singleBackground3 img, .single .singleBackground4 img, .single .singleBackground5 img, .single .singleBackground6 img {
      position: absolute;
      width: 100%;
      min-height: 100%; }
  .single .singleBackground1 {
    background-image: url(../images/completegrow-branding.jpg); }
  .single .singleBackground2 {
    background-image: url(../images/completegrow-website.jpg); }
  .single .singleBackground3 {
    background-image: url(../images/completegrow-webshop.jpg); }
  .single .singleBackground4 {
    background-image: url(../images/completegrow-marketing.jpg); }
  .single .singleBackground5 {
    background-image: url(../images/completegrow-klantenreis.jpg); }
  .single .singleBackground6 {
    background-image: url(../images/completegrow-seogeo.jpg); }
  .single .num {
    position: absolute;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-size: 240px;
    font-weight: 700;
    color: #FFFFFF;
    transform: translateX(-50%); }
  .single article {
    display: flex;
    flex-direction: column;
    width: calc(100px + 25%);
    margin: 50px 0 50px calc(60px + 8%); }
    .single article .title {
      width: 100%;
      font-size: 30px;
      font-weight: 400;
      line-height: 100%;
      color: #EEEEEE;
      margin-bottom: 10px;
      letter-spacing: -0.8px; }
    .single article p {
      position: relative;
      color: #999999; }
    .single article .tags {
      display: flex;
      column-gap: 20px;
      margin-top: 15px;
      font-family: 'Outfit', Arial, Helvetica, sans-serif; }
      .single article .tags .tag {
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        padding: 12px 29px 16px;
        box-sizing: border-box;
        text-transform: uppercase;
        font-size: 9px;
        font-weight: 300;
        color: #CCCCCC; }
        .single article .tags .tag .tagTitle {
          font-size: 18px;
          font-weight: 500;
          color: #FFFFFF;
          letter-spacing: -0.5px;
          line-height: 24px; }

.dual {
  display: flex;
  column-gap: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.4px;
  color: #444444;
  text-align: left; }
  .dual > div, .dual > article {
    flex-basis: 50%;
    width: 50%; }
  .dual > div p {
    margin-top: 20px; }
  .dual .title {
    width: 100%;
    font-size: 30px;
    font-weight: 400;
    line-height: 100%;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -0.8px; }
  .dual:nth-child(even) {
    margin-top: 50px; }
  .dual.blocks.white > article, .dual div > article {
    padding: 30px 40px;
    border-radius: 20px;
    background-color: #FFFFFF; }

.triple.blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif; }
  .triple.blocks > article {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    text-align: left;
    background-color: #DEE0E4;
    border-radius: 20px;
    padding: 40px 40px 30px 40px;
    width: calc(33.333% - 100px);
    flex-basis: calc(33.333% - 100px); }
    .triple.blocks > article .num {
      font-size: 110px;
      font-weight: 400;
      line-height: 80px;
      color: #FFFFFF;
      margin-bottom: 50px; }
    .triple.blocks > article .title {
      font-size: 30px;
      font-weight: 400;
      line-height: 100%;
      color: #000000;
      margin-bottom: 10px; }
    .triple.blocks > article .blockservice {
      font-size: 12px;
      font-weight: 400;
      color: #444444;
      line-height: 135%; }

.map {
  border-radius: 20px;
  margin-top: 90px;
  margin-bottom: 70px;
  overflow: hidden; }

/******     CASES    *******/
.cases-container {
  background-color: #0C0C0D;
  padding: 200px 5%; }
  .cases-container .cases {
    display: flex;
    column-gap: calc(30px + 2vw);
    width: 95vw;
    margin-left: -5vw;
    padding-left: 5vw;
    padding-right: 10vw;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab; }
    @supports (display: grid) {
      .cases-container .cases .cases-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "header header header" "title title footer" "main main main"; }
        @media screen and (max-width: 500px) {
          .cases-container .cases .cases-container {
            grid-template-columns: 1fr;
            grid-template-rows: 0.3fr 1fr auto 1fr;
            grid-template-areas: "header" "title" "main" "footer"; } }
      .cases-container .cases .cases {
        grid-area: main;
        overflow-x: scroll;
        overflow-y: hidden; } }
    .cases-container .cases a {
      text-decoration: none; }
    .cases-container .cases .case {
      position: relative;
      min-width: 30vw;
      max-width: 450px;
      min-height: 400px;
      max-height: 540px;
      padding: 35px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 20px;
      cursor: pointer; }
      .cases-container .cases .case:hover .caseGradient {
        opacity: 1; }
      .cases-container .cases .case:hover .caseCompany {
        color: #FFFFFF; }
        .cases-container .cases .case:hover .caseCompany:after {
          width: 100%; }
      .cases-container .cases .case:hover .caseOpenclose {
        transform: rotate(270deg); }
      .cases-container .cases .case:hover .caseDescription {
        color: #BBBBBB; }
      .cases-container .cases .case.bhosted {
        background-image: url(../images/cases-bhosted-2.jpg);
        background-position: top center; }
      .cases-container .cases .case.envision {
        background-image: url(../images/case-envision.jpg);
        background-position: 45% center; }
      .cases-container .cases .case.sms {
        background-image: url(../images/service-website.jpg); }
      .cases-container .cases .case.paco {
        background-image: url(../images/service-marketing.jpg); }
      .cases-container .cases .case .caseGradient {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #0c0c0d;
        background: linear-gradient(120deg, #0c0c0d 0%, rgba(12, 12, 13, 0.4) 100%);
        backdrop-filter: blur(5px);
        mask-image: linear-gradient(90deg, #0c0c0d 30%, transparent 75%) !important;
        -webkit-mask-image: linear-gradient(90deg, #0c0c0d 50%, transparent 75%) !important;
        transition: all 0.5s;
        opacity: 0.8; }
      .cases-container .cases .case .caseCompany {
        position: relative;
        width: fit-content;
        font-family: 'Outfit', Arial, Helvetica, sans-serif;
        font-size: 30px;
        font-weight: 500;
        color: #EEEEEE; }
        .cases-container .cases .case .caseCompany:after {
          transition: all ease-in-out .5s;
          background: none repeat scroll 0 0 #ffffff;
          content: "";
          display: block;
          height: 2px;
          width: 0; }
      .cases-container .cases .case .caseOpenclose {
        position: absolute;
        top: 30px;
        right: 33px;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 18px;
        font-family: 'Outfit', Arial, Helvetica, sans-serif;
        font-size: 28px;
        font-weight: 300;
        color: #FFFFFF;
        transition: all 0.5s; }
      .cases-container .cases .case .caseDescription {
        position: absolute;
        bottom: 30px;
        font-family: 'Outfit', Arial, Helvetica, sans-serif;
        font-size: 22px;
        font-weight: 500;
        color: #CCCCCC; }
      .cases-container .cases .case .caseCompany, .cases-container .cases .case .caseOpenclose, .cases-container .cases .case .caseDescription {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; }
  .cases-container .casesTitle {
    position: relative;
    margin-bottom: 80px;
    padding: 4% 35% 4% 5%;
    border-left: 1px solid #333333; }
    .cases-container .casesTitle h2 {
      color: #DDDDDD; }

/*# sourceMappingURL=styles.css.map */