/*************/
/* CSS RESET */
/*************/

/*naar een idee van Jen Simmons*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button:not([disabled]) {
  cursor: pointer;
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
    --background-black: #050609;
    --text-white: #EEEDE8;
    /* --spice-red: #ED2124; */
    --spice-red: #B30155;
    --spice-purple: #7F56C5;
    --red: #d62e25;
    --grey: #8f8f8f;
}

/***********/
/* GENERAL */
/***********/
html {
  background-color: var(--background-black);
  /* cursor: url('../images/cursor.svg'), auto; */
}
h2 {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;

  width: 100%;
  margin-bottom: 18px;
  max-width: 1037px;
}
q, h3 {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 40px */
  max-width: 1037px;
  position: relative;
}
h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
}
h3 img {
  display: inline-block;
  height: 20px;
}
/* Red dot on the i */
/* h3::after {
  content: '';
  display: block;
  width: 9px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-color: var(--spice-red);

  position: absolute;
  left: 52px;
  top: 2px;
  z-index: 1;
} */
h4 {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;


  font-size: 25px;
  font-style: normal;
  font-weight: 900;
  line-height: 88.664%; 
  margin: 0;/* 17.733px */
}
/* quotes */
q {
  position: relative;
  background-image: linear-gradient(90deg, var(--text-white), var(--text-white));
  background-size: 1056px auto;
  animation: move linear reverse;
  animation-range: 10% 30%;
  animation-timeline: scroll(nearest);
  background-repeat: no-repeat;
  background-position: 0px center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
q::before, q::after {
  display: none;
}
q::after {
  display: block;
  position: absolute;
  top: 0;
  content: 'La plateforme de marketing numérique la plus puissante';
  width: -1056px;
  -webkit-text-fill-color: rgba(128, 128, 128, 0.551);
  
  position: absolute;
  left: 0;
  z-index: -1;
}
@keyframes move {
  to {
    background-position: -1056px center;
  }
}

/**********/
/* HEADER */
/**********/
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* width: 100%; */
  display: flex;
  justify-content: flex-start;
  padding: 25px;
  z-index: 2;
  background-color: none;

  animation: headeranimate linear forwards;
  animation-range: 9.7% 10%;
  animation-timeline: scroll(nearest);
}

/* WHYYYY not animate linear?!?! */

header a {
  display: flex;
  justify-self: center;
  width: 120px; /*79px;*/

  animation: logoanimate linear forwards;
  animation-range: 9.7% 10%;
  animation-timeline: scroll(nearest);
  opacity: 0;
  /* margin-top: 230px; */
}


@keyframes logoanimate {
  to {
    opacity: 1;
  }
}

@keyframes headeranimate {
  to {
    background-color: var(--background-black);
  }
}

header a img{
  width: 100%;
}
header button {
  display: flex;
  background-color: var(--spice-red);
  color: var(--text-white);
  border: none;
  border-radius: 50px;
  padding: 5px;
  height: fit-content;
  position: absolute;
  right: 15px; /*new*/
  top: 15px; /*new*/
}
header button:hover {
  filter: drop-shadow(0px 0px 5px var(--spice-red)) drop-shadow(0px 0px 8px var(--spice-red));
}





/********/
/* MAIN */
/********/
main{
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* start */
.start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
  background: linear-gradient(90deg, rgba(125, 84, 196, 0.5) 0%, rgba(100, 1, 47, 0.5) 100%);
}

.start video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  /* left: 0; */
  z-index: -1;
  /* filter: grayscale(60%); */
  opacity: 50%;
  pointer-events: none;
}
.start div img {
  width: 200px;
  filter: drop-shadow(0px 2px 40px rgba(0, 0, 0, 0.75));
}
h1 {
  color: var(--text-white);
  text-align: center;
  font-family: "canada-type-gibson", sans-serif;
  font-size: 60px;
  /* max-width: 599px; */
  width: 354px;
  font-style: normal;
  font-weight: 700;
  line-height: 88.664%; /* 53.198px */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-transform: uppercase;
  margin-top: 15px;
  padding-bottom: 51px;
  gap: 5px;
}
/* h1 span {
  line-break: width;
}

h1 div {
  overflow: hidden;
  height: 57px;
}

h1 div ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

h1 div ul li {
  height: 57px;
  align-items: center;
  display: none;
} */
h1 div {
  overflow: hidden;
  height: 57px;
}

h1 div ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  transition: transform .2s;
  transform: translateY(0);
  text-align: start;
}

h1 div ul li {
  height: 57px;
  line-height: 57px;
  display: none;
}




/* ricks code */
/* .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDown {
  0% {
     opacity: 0;
     -webkit-transform: translateY(-20px);
  }
  100% {
     opacity: 1;
     -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
     opacity: 0;
     transform: translateY(-20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
} */

/* h1 div ul li:first-of-type {
  filter: drop-shadow(0px 0px 100px white) drop-shadow(0px 0px 100px white) drop-shadow(0px 0px 100px white) drop-shadow(0px 0px 100px white);
  background: linear-gradient(90deg, rgb(255, 1, 119) 0%,rgb(161, 109, 252) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */
/* 
@keyframes carousel {
  100% { transform: translateY(-105px);}
} */







/* first quote */
.quoteeen,
.quotetwee,
.quotedrie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  padding: 25px;
  position: relative;
}
.quoteeen img,
.quotetwee img,
.quotedrie > img {
  z-index: -1;
  width: 250px;
  position: absolute;
  animation: opacity 3s ease-in-out alternate infinite;
}
.quoteeen img {
  left: 11vw;
}
/* animate ellipse */
/* .quoteeen svg ellipse:first-of-type {
}
.quoteeen svg circle:first-of-type {
  animation: opacity 3s .5s ease-in-out alternate infinite;
}
.quoteeen svg circle:last-of-type {
  animation: opacity 3s 1s ease-in-out alternate infinite;
}
.quoteeen svg circle:nth-of-type(2) {
  animation: opacity 3s 1.5s ease-in-out alternate infinite;
} */

.quoteeen q {
  animation-range: 7% 34%;
}

/* keywords */
.keywords {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* max-width: 1095px; */
  margin: 0 auto;
  margin-bottom: 150px;
  padding: 0 25px 0 25px;
  list-style: none;
  gap: 75px;
}
.keywords li {
  width: 100%;
  max-width: 885px;
  transition: .3s;
  transform-origin: center center;
}
.keywords li:first-of-type {
  margin-top: 0;
}
/* .keywords li:hover p{
  border-bottom: 1px solid var(--spice-red);
  padding: 15px 13px 15px 13px;
  max-width: 1100px;
  background: linear-gradient(90deg, rgb(237, 33, 36), rgba(237, 33, 36, 0.1));
  transition: .3s;
  transform-origin: center center;
} */

.keywords li p {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 25px;
  font-style: normal;
  font-weight: 900; /* 35.466px */
  margin: 0;
  padding: 0 0 20px 0;
  position: relative;

  /* border-bottom: 1px solid var(--text-white); */
}
.keywords li:nth-of-type(3) p,
.keywords li:nth-of-type(6) p{
  padding-bottom: 60px;
}
.keywords li p::after{
  position: absolute;
  bottom: 0;
  
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--text-white);
}
.keywords li:hover p::after {
  animation: drawline .4s ease-in 1 forwards;
  background-color: var(--spice-red);
}
.keywords li h2 {
  font-size: 14px;
  text-transform:none;

  margin: 20px 0 0 0;
}

/* promovideo */
.promovideo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 30vh; /* 100vh */
}
.promovideo video,
.impressie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* impressievideo */
.impressie {
  margin-top: 250px;
  width: 100dvw;
}

/* second quote */
.quotetwee svg {
  left: 33vw;
  width: 258px;
}
/* animate ellipse */
.quotetwee svg ellipse:first-of-type {
  animation: opacity 3s ease-in-out alternate infinite;
}
.quotetwee svg ellipse:nth-of-type(3) {
  animation: opacity 3s 1s ease-in-out alternate infinite;
}
.quotetwee svg ellipse:nth-of-type(2) {
  animation: opacity 3s 1.5s ease-in-out alternate infinite;
}
.quotetwee q {
  animation-range: 42.5% 76%;
}
.quotetwee q::after {
  content: "Ensemble, nous créons une chimie entre les modules marketing et les blocs de construction pour mettre en place la meilleure plateforme d'automatisation marketing pour votre marque";
}

/* Features */
.features {
  width: 100dvw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 250px;
  margin-top: 150px;
}
.features ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 1220px;
  padding: 0 25px 0 25px;
  gap: 160px;
}
.features ul li {
  display: flex;

  justify-content: space-between;
  gap: 90px;

  flex-direction: column-reverse;
  max-width: 100dvw;
  padding: 5px;
}
.features ul li:first-of-type,
.features ul li:nth-of-type(3) {
  flex-direction: column-reverse;
}
.features li div {
  width: fit-content;
}
.features li img {

  width: 90dvw;
  height: auto;
}
.features li div {
  position: relative;
}
.features li video {
  width: 93%;
  height: 90%;
  position: absolute;
  left: 4%;
  top: 5%;
  z-index: -1;
  object-fit: fill;
}
.features li:first-of-type video {
  width: 82%;
  height: 86%;
  left: 9%;
  top: 1%;
  object-fit: fill;
}

.features li:nth-of-type(2) img:first-of-type {
  position: absolute;
  z-index: -1;
  width: 82%;
  height: 90%;
  left: 9%;
  top: 1%;
  object-fit: fill;
}

.features li p {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: 2px;
  max-width: 500px;
  margin: 0;
  padding: 0;
  margin: 25px 0 0 0;
  width: 100%;
}
.features li h2 {
  text-transform: unset;
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 30px;
  font-weight: 900;
  margin: 0;
  padding: 0 0 25px 0;
  border-bottom: 1px solid var(--text-white);
}

/* our brands */
.ourbrands {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 80dvh; */
  /* height: 70vh; */
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ourbrands h2 {
  max-width: 340px;
  margin-top: 0;
}
.ourbrands ul,
.marquee ul {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  margin-top: 60px;
}
.ourbrands ul li,
.marquee ul li {
  list-style: none;
}

/* images */
.ourbrands > ul {
  align-items: baseline;
  gap: 5vw; /*5%*/
  width: 100%;
  padding-left: 10vw; /*11%*/
  padding-right: 10vw; /*11%*/
  padding-bottom: 0;
  margin-bottom: 60px;
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.ourbrands > ul::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}
.ourbrands > ul li {
  display: flex;
  align-items: center;
  width: 80vw;
  height: 90vw;
  max-height: 600px;
  max-width: 500px;
  aspect-ratio: 1/1;
  scroll-snap-align: center;
  position: relative;
}
.ourbrands > ul li img {
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.ourbrands > ul li article{
  opacity: 0;
  color: var(--text-white);
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background-black) 100%);
}
.ourbrands > ul li:hover article {
  opacity: 1;
  transition: .5s;
}
.ourbrands > ul li:nth-of-type(2):hover article {
  animation: swipe 2s ease-in-out forwards 3;
}
@keyframes swipe {
  0% { 
    background-image: url('../images/drag.png'), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background-black) 100%);; 
    background-repeat: no-repeat;
    background-position: center center;
  }
  99% { 
    background-image: url('../images/drag.png'), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background-black) 100%);;
    background-repeat: no-repeat;
    background-position: center left;
  }
  100% { 
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background-black) 100%);
    background-repeat: auto;
    background-position: auto;
  }
}
.ourbrands > ul li article h4{
  font-size: 40px;
}
.ourbrands > ul li p {
  font-family: "canada-type-gibson", sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
}


/* logos's in marquee*/
.marquee {
  width: 100%;
  height: 85px;
  position: relative;
  overflow: hidden;
}
.marquee div{
  display: block;
  width: 8600px;

  overflow: hidden;
  
  position: absolute;
  bottom: 0;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  0% { left: 0; }
  100% { left: -4300px; }
}

.marquee div ul {
  margin-top: 0;
  gap: 48px;
  width: 50%; /*22%*/
  float: left;
}
.marquee div ul img {
  height: 40px;
}
.marquee div ul li {
  display: flex;
  align-items: center;
}
.marquee div ul li:first-of-type img{
  height: 30px;
}
.marquee div ul li:nth-of-type(4) img {
  height: 30px;
}
.marquee div ul li:nth-of-type(7) img {
  height: 50px;
}
/* samsung */
.marquee div ul li:nth-of-type(8) img {
  height: 25px;
}
/* campari */
.marquee div ul li:nth-of-type(9) img {
  height: 25px;
}
/* sportcity */
.marquee div ul li:nth-of-type(10) img {
  height: 25px;
}
/* anytime fitness */
.marquee div ul li:nth-of-type(11) img {
  height: 30px;
}
/* bouwmaat */
.marquee div ul li:nth-of-type(12) img {
  height: 40px;
}
/* welkoop */
.marquee div ul li:nth-of-type(13) img {
  height: 60px;
  padding-bottom: 20px;
}
/* bosch */
.marquee div ul li:nth-of-type(14) img {
  height: 70px;
}
/* alliance automotive */
.marquee div ul li:nth-of-type(15) img {
  height: 55px;
}
/* leger des heils */
.marquee div ul li:nth-of-type(16) img {
  height: 65px;
}
/* pizza bakkers */
.marquee div ul li:nth-of-type(17) img {
  height: 25px;
}
/* brownies */
.marquee div ul li:nth-of-type(18) img {
  height: 30px;
}
/* bagels and beans */
.marquee div ul li:nth-of-type(19) img {
  height: 65px;
}
/* nikon */
.marquee div ul li:nth-of-type(20) img {
  height: 60px;
}
/* maxizoo */
.marquee div ul li:nth-of-type(21) img {
  height: 30px;
}
/* bacardi */
.marquee div ul li:nth-of-type(22) img {
  padding-top: 5px;
  height: 35px;
}
/* brainwash */
.marquee div ul li:nth-of-type(23) img {
  height: 40px;
}
/* cosmo hairstyling */
.marquee div ul li:nth-of-type(24) img {
  margin-top: 10px;
  height: 75px;
}
/* gulpener */
.marquee div ul li:nth-of-type(25) img {
  height: 72px;
}
/* technische unie */
.marquee div ul li:nth-of-type(26) img {
  margin-top: 5px;
  height: 35px;
}

/* laatste quotes */
.quotedrie {
  position: relative;
  max-width: 1106px;
}
.quotedrie > svg{
  left: 48vw;
  width: 199px;
}
/* animate ellipse */
.quotedrie svg ellipse {
  animation: opacity 3s ease-in-out alternate infinite;
}
.quotedrie svg circle {
  animation: opacity 3s 1s ease-in-out alternate infinite;
}

.quotedrie q {
  animation-range: 72.3% 99.5%;
}
.quotedrie q::after {
  content: 'Où les personnes et la technologie créent des solutions marketing intelligentes pour le commerce de détail';
}
/* back to top button */
.quotedrie button {
  position: absolute;
  right: 25px;
  bottom: 0px;
  background: none;

  border: 0;
  padding: 0;
  padding-bottom: 4px;
  color: var(--text-white);
  display: inline-block;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 100px;
}
.quotedrie button p {
  font-family: "canada-type-gibson", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: .3s;
  margin: 0;
}
.quotedrie button img {
  margin-left: 4px;
  width: 12px;
  height: 16px;
  position: relative;
  transition: .3s;
}

.quotedrie button::after{
  position: absolute;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--text-white);
}
.quotedrie button:hover img {
  transform: translateY(-5px);
}
.quotedrie button:hover::after {
  animation: drawline .3s ease-in 1 forwards;
}
@keyframes drawline {
  0% { width: 0; }
  100% { width: 100%; }
}

/* contact form */
.contactform {
  width: auto;
  min-width: 94vw;

  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: -68.58px 25px;
  max-width: 1056px;
  justify-content: space-between;
  padding: 30px;
  border-radius: 10px;
  z-index: 1;

  background: linear-gradient(90deg, rgb(125, 84, 196) 0%, rgb(178, 1, 84) 100%);
}
.contactform article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  flex-shrink: 0;
}
.contactform article p {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
  margin: 0;
  max-width: 80vw;
}
.contactform h4 {
  font-size: auto;
}
#overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.62);
  width: 100%;
  height: 100vh;
  z-index: 0;
}
#overlay.show {
  display: block;
}

#formWrap{
  display: none;
  position: fixed;
  z-index: 2;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
}
#formWrap.show {
  display: flex;
}
.contactform form {
  width: 85vw;
  max-width: 650px;
  background-color: var(--background-black);
  padding: 28px;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  filter: drop-shadow(0px 0px 1px var(--spice-red));
  margin: auto;
}

.contactform form legend {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%; /* 40px */
  width: 100%;
  text-align: center;
  position: absolute;
  background-color: var(--background-black);
}
.contactform form fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  border: 0;
  padding: 0;
  margin: 0;
  /* padding: 40px 0px; */
  overflow-y: scroll;
  height: 450px;
  position: relative;
}
.contactform form label {
  color: var(--text-white);
  display: flex;
  flex-direction: column;
  width: 100%;

  font-family: "canada-type-gibson";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;

}
.contactform form label input,
.contactform form label textarea {
  border-radius: 5px;
  padding: 10px;
  border: 0;
  margin-top: 10px;

  font-family: "canada-type-gibson";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.4px;
  background-color: var(--text-white);
}
.contactform form label textarea {
  height: 160px;
}
.contactform form label input:focus,
.contactform form label textarea:focus {
  outline: 2px solid var(--spice-red);
}
.contactform form button,
.contactform > a {
  padding: 15px 50px;
  border-radius: 5px;
  text-decoration: none;
  border: 0;
  /* background-color: var(--spice-red); */
  background: var(--text-white);

  color: var(--spice-red);
  font-family: "canada-type-gibson";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.contactform > a {
  display: block;
  max-width: 225px;
  animation: pulse .5s linear alternate infinite;
  box-shadow: 42px 48px 18px 0px rgba(0, 0, 0, 0.00), 27px 31px 16px 0px rgba(0, 0, 0, 0.01), 15px 17px 14px 0px rgba(0, 0, 0, 0.05), 7px 8px 10px 0px rgba(0, 0, 0, 0.09), 2px 2px 6px 0px rgba(0, 0, 0, 0.10);
}

.imgCloseContactForm {
  max-width: 20px;
  width: 20px;
  height: 20px;
  max-height: 20px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-bottom: 20px;
}
.imgLogoContactForm {
  width: 100px;
  display: block;
  position: absolute;
  top: 25px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    /* filter: drop-shadow(0 0 5px var(--spice-red)); */
  }
  /* 50% {
    filter: drop-shadow(0 0 5px var(--spice-red))
    drop-shadow(0 0 10px var(--spice-red));
  } */
  100% {
    transform: scale(1.05);
    /* filter: drop-shadow(0 0 5px var(--spice-red))
    drop-shadow(0 0 10px var(--spice-red)); */
  }
}
.contactform > a:hover {
  animation: none;
  transform: scale(1.1);
  filter: none;
  cursor: pointer;
}
.contactform form button{
  align-self: center;
  width: 100%;
  max-width: 250px;
}

.contactform .g-recaptcha {
  margin-bottom: 15px;
  padding-top: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.contactform .g-recaptcha *{
  max-width: 100%;
}


/**********/
/* FOOTER */
/**********/
footer {
  width: 100%;
  padding: 25px 25px 0 25px;
  display: flex;
  flex-direction: column;
  gap: 57px;
  color: var(--text-white);
  background: rgba(35, 35, 35, 0.75);
}

/* Logo x unlock the power of marketing */
footer div {
  display: flex;
  flex-direction: column;

  gap: 15px;
  align-items: flex-end;
  height: 34.16px;
}
footer div p {
  font-family: "canada-type-gibson", sans-serif;
  font-size: 22.9px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  margin: 0;
  max-width: 200px;
}
footer img:first-of-type {
  width: 150px;
  height: fit-content;
}
footer img:nth-of-type(2) {
  width: 15px;
  height: fit-content;
  margin-left: 32px;
}
footer a {
  color: var(--text-white);
}

footer a:hover {
  color: var(--spice-red);
  text-decoration: underline;
  cursor: pointer;
}
footer p, footer address, footer li {
  color: var(--text-white);
  font-family: "canada-type-gibson", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
  margin: 0;
  max-width: 220px; /* 21px */
}
footer > p {
  max-width: none;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}
footer address {
  max-width: 160px;
}
footer address a {
  color: var(--text-white);
  /* text-decoration: none; */
}
footer address a:hover {
  color: var(--spice-red);
}
footer article {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
footer article ul {
  padding: 0;
  margin: 0;
}
footer article li {
  list-style-type: none;
}
footer article:last-of-type {
  width: fit-content;
}
/* footer article:last-of-type h4 {
  max-width: 350px;
} */
footer article:last-of-type p {
  max-width: 250px
}

/**************/
/* ANIMATIONS */
/**************/

@keyframes opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/***********/
/* DESKTOP */
/***********/
@media (min-width: 768px) {
/* HEADER */
header {
  padding: 30px;
  /* transition: .5s; */
}
header a {
  width: 150px;
  animation-range: 10.4% 11%;
}

header button {
  right: 30px;
  top: 30px;
}

/* MAIN */
/* start */
.start div img{
  width: 280px;
}
h1 {
  width: 590px;
  font-size: 100px;
  margin-bottom: 20px;
  flex-direction: unset;
  flex-wrap: wrap;
}
h1 div {
  height: 100px;
}

h1 div ul li {
  height: 100px;
  line-height: 100px;
}

h2 {
  max-width: 1056px;
}

/* quotes */
q, h3 {
  font-size: 60px;
  max-width: 1056px;
}
h3 {
  max-width: none;
  gap: 15px;
}
h3 img {
  height: 30px;
}
.ourbrands h2 {
  max-width: 513.13px;
}
/* h3::after {
  left: 77.5px;
  top: 2.5px;
  width: 14px;
} */

.quoteeen img {
  left: 50vw;
}
.quotetwee img {
  left: 25vw;
}
.quotedrie > img{
  left: 30vw;
}

/* fill in animation */
.quoteeen q {
  animation-range: 6.8% 15.7%;
}
/* .quoteeen q::after {
  content: 'The most powerful digital marketing platform presented by the Sarawak Group. Empower your people with the innovative self-service local marketing & brand management platform, available.';
} */
.quotetwee q {
  animation-range: 50% 60.2%;
}
/* .quotetwee q::after {
  content: "We believe in working SMART. SpiceLab's intelligent platform simplifies local marketing processes, making it easier and more efficient to reach your audience effectively. Say goodbye to the guesswork and hello to Local Marketing, The SMART Way.";
} */
.quotedrie q {
  animation-range: 83.1% 92%;
  padding-bottom: 5px;
}
/* .quotedrie q::after {
  content: 'Spice Up Your Brand. Together we create chemistry between marketing modules and building blocks to setup the best marketing-automation-platform for your brand. Local Marketing, The SMART Way.';
} */

/* video */
.promovideo {
  width: 100%;
  height: auto;
}

/* keywords */
.keywords {
  margin-bottom: 160px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12%;
  max-width: 1106px;
  row-gap: 94px;
  align-items: start;
  /* padding: 0;
  margin: 0 25px 0 25px; */
}
.keywords li {
  max-width: 467px;
}
.keywords li p {
  font-size: 30px;
  padding: 0 0 25px 0;
}
.keywords li h2 {
  font-size: 16px;
  margin: 25px 0 0 0;
}

/* back to top button */
.quotedrie button {
  right: 25px;
  bottom: 0px;
}

/* images sfeer*/
.ourbrands {
  height: auto;
}
.ourbrands > ul {
  padding-left: 35vw; /*11%*/
  padding-right: 35vw; /*11%*/
}
.ourbrands > ul li {
  max-height: 440px;
  max-width: 640px;
  aspect-ratio: 2/1;
}

/* logos's */
.marquee {
  height: 130px;
}
.marquee div{
  width: 13300px;
  /* margin-bottom: 30px; */

  animation: marquee 45s linear infinite;
}
@keyframes marquee {
  0% { left: 0; }
  100% { left: -6700px; }
}

.marquee div ul {
  gap: 95px;
}
.marquee div ul img {
  height: 60px;
}
.marquee div ul li:first-of-type img {
  height: 45px;
}
.marquee div ul li:nth-of-type(4) img {
  height: 45px;
}
.marquee div ul li:nth-of-type(7) img {
  height: 65px;
}
/* samsung */
.marquee div ul li:nth-of-type(8) img {
  height: 30px;
}
/* campari */
.marquee div ul li:nth-of-type(9) img {
  height: 35px;
}
/* sportcity */
.marquee div ul li:nth-of-type(10) img {
  height: 30px;
}
/* anytime fitness */
.marquee div ul li:nth-of-type(11) img {
  height: 45px;
}
/* bouwmaat */
.marquee div ul li:nth-of-type(12) img {
  height: 50px;
}
/* welkoop */
.marquee div ul li:nth-of-type(13) img {
  height: 80px;
  padding-bottom: 25px;
}
/* bosch */
.marquee div ul li:nth-of-type(14) img {
  height: 80px;
}
/* alliance automotive */
.marquee div ul li:nth-of-type(15) img {
  height: 60px;
}
/* leger des heils */
.marquee div ul li:nth-of-type(16) img {
  height: 80px;
}
/* pizza bakkers */
.marquee div ul li:nth-of-type(17) img {
  height: 40px;
}
/* brownies */
.marquee div ul li:nth-of-type(18) img {
  height: 45px;
}
/* bagels and beans */
.marquee div ul li:nth-of-type(19) img {
  height: 85px;
}
/* nikon */
.marquee div ul li:nth-of-type(20) img {
  height: 80px;
}
/* maxizoo */
.marquee div ul li:nth-of-type(21) img {
  height: 40px;
}
/* bacardi */
.marquee div ul li:nth-of-type(22) img {
  height: 45px;
}
/* brainwash */
.marquee div ul li:nth-of-type(23) img {
  height: 55px;
}
/* cosmo hairstyling */
.marquee div ul li:nth-of-type(24) img {
  margin-top: 15px;
  height: 115px;
}
/* gulpener */
.marquee div ul li:nth-of-type(25) img {
  height: 87px;
}
/* technische unie */
.marquee div ul li:nth-of-type(26) img {
  margin-top: 10px;
  height: 50px;
}

.contactform {
  flex-direction: row;
  align-items: center;
  min-width: auto;
}
.contactform article p{
  max-width: 50vw;
}
/* form */
.contactform form {
  padding: 28px 80px;
}
/* .contactform {
  padding: 80px 5px;
} */
.contactform form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: visible;
  padding: 40px 0px;
}
.contactform form fieldset label:last-of-type {
  grid-column: 1/3;
}
.contactform form legend {
  position: relative;
}


.imgCloseContactForm {
  position: absolute;
  right: 25px;
  top: 25px;
}
.imgLogoContactForm {
  position: initial;
  align-self: center;
  width: 150px;
  margin-bottom: 20px;
}

.imgCloseContactForm:hover {
  cursor: pointer;
}

  /* FOOTER */
  footer {
    display: grid;
    grid-template-columns: 414px auto;
    grid-template-rows: auto auto auto;
    justify-items: stretch;
    justify-content: center;
    padding: 106px;
    padding: 174.58px 106px 0 106px;
    gap: 40px;
    row-gap: 50px;
    position: relative;
  }
  /* footer article:last-of-type {
    grid-column: 1/4;
  } */

footer div {
  display: flex;
  flex-direction: row;
  justify-items: center;

  gap: 20px;
}
footer div p {
  font-size: 30px;
  max-width: 260px;
}
footer div img:nth-of-type(2) {
  width: 20px;
  height: fit-content;
  margin-left: 0;
}
footer img:first-of-type {
  width: 200px;
  height: 50px;
  object-fit: contain;
  object-position: left;
  /* height: fit-content; */
}
footer h4 {
  font-size: 30px;
}
footer > p {
  max-width: none;
  width: 100%;
  grid-column: 1/3;
}
footer article:last-of-type {
  grid-column: 1;
  grid-row: 2;
}
}
@media screen and (max-width: 650px) {
  .promovideo video {
    object-fit: contain;
  }
} 
@media (min-width: 1238px) {
/* features */
  .features ul li {
    flex-direction: row;
    width: 100%;
    padding: 0;
  }
  .features ul li:first-of-type,
  .features ul li:nth-of-type(3) {
    flex-direction: row-reverse;
  }
  .features ul li div img{
    width: 550px;
    height: 350px;
  }
  h1 {
  width: auto;
  max-width: 929px;
  align-items: baseline;
  gap: 25px;
  row-gap: 5px;
}
h1 > span:first-of-type {
  font-size: 121px;
}
h1 span:nth-of-type(2) {
  height: 60px;
  font-size: 60px;
}
h1 div {
  font-size: 158px;
  height: 158px;
}
h1 div ul li {
  height: 158px;
  line-height: 158px;
}
.contactform {
  width: 100%;
}
  /* FOOTER */
footer {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  justify-items: flex-end;
  padding: 106px;
  padding: 174.58px 106px 0 106px;
  gap: 50px;
  row-gap: 75px;
  position: relative;
}
.contact h4 {
  font-size: 32px;
}
footer article:last-of-type {
  grid-column: 4;
  grid-row: 1;
}
footer article:last-of-type p {
  max-width: 450px;
}
footer > p {
  max-width: none;
  width: 100%;
  grid-column: 1/5;
}
/* images sfeer
.ourbrands {
  height: 80dvh;
} */

}