/**********************/
/* mixins & functions */
/**********************/
/***********/
/* general */
/***********/
*, *::before, *::after {
  box-sizing: border-box;
  font-family: Saira;
}

:root {
  --main-background:rgb(225, 221, 217);
  --main-color:rgba(30, 26, 22, .8);
  --translucent-color:rgba(196,192,188,.875);
  --sannes-blue:#1b75bb;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--main-background);
  color: var(--main-color);
}

button, input:not([type="radio"]) {
  padding: 0;
  font-size: inherit;
  appearance: none;
  border: none;
}

button {
  background: none;
  cursor: pointer;
  user-select: none;
}

/*************/
/* carrousel */
/*************/
.carrousel {
  --carrouselAantalItems: 0;
  --carrouselBasisHoek: 0;
  --carrouselHoekStap: 0;
  /* met deze variabelen kun je de carrousel aanpassen */
  --carrouselSnelheid: .5;
  --carrouselTempo: cubic-bezier(0.000, 0.000, 0.500, 1.000);
  --carrouselButtonSize: 4;
  --carrouselBolletjeSize: 1;
  --carrouselVerloop:linear-gradient(#d1ccc8, #6a6662);
  /* met deze variabelen kun je de items in de carrousel aanpassen */
  --carrouselItemBreedte: 12;
  --carrouselItemHoogte: 16;
  --carrouselItemAfronding: 2;
  --caraouselPerspectiveOriginVertical:50;
  /* afstand tot middelpunt van cirkel berekenen */
  --carrouselGapBasis: .83;
  --carrouselItemsSize: calc( var(--carrouselAantalItems) * var(--carrouselItemBreedte) );
  --carrouselBasisGapsSize: calc( var(--carrouselAantalItems) * var(--carrouselGapBasis) );
  --carrouselVariableGapsSize: calc( var(--carrouselItemsSize) / 12 );
  --carrouselzOffset: calc(( var(--carrouselItemsSize) + var(--carrouselBasisGapsSize) + var(--carrouselVariableGapsSize) ) / 6.28 * -1);
}

@media (min-width: 32em) {
  .carrousel {
    --carrouselGapBasis: 1;
  }
}

@media (min-width: 48em) {
  .carrousel {
    --carrouselGapBasis: 1.17;
  }
}

@media (min-width: 64em) {
  .carrousel {
    --carrouselGapBasis: 1.33;
  }
}

/************/
/* heading1 */
/************/
h1 {
  font-size: 2.5em;
  font-weight: 300;
  font-family: 'Saira Condensed', sans-serif;
  position: relative;
  text-align: center;
  z-index: 10;
}

/**********************/
/* de items container */
/**********************/
.carrouselContent {
  position: relative;
}

ul {
  height: calc(var(--carrouselItemHoogte) * 1em);
  margin: 0;
  padding: 0;
  list-style: none;
  perspective-origin: center calc(var(--caraouselPerspectiveOriginVertical) * 1%);
  perspective: 40em;
  transform-style: preserve-3d;
  transition: calc(var(--carrouselSnelheid) * 1s) var(--carrouselTempo);
}

/*********/
/* items */
/*********/
li {
  --rotateY:0;
  --translateY:0;
  position: absolute;
  width: calc( var(--carrouselItemBreedte) * 1em);
  height: 100%;
  left: calc(50% - calc( var(--carrouselItemBreedte) / 2 * 1em));
  border-radius: calc(var(--carrouselItemAfronding) * 1em);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(calc(var(--translateY) * 1%)) translateZ(calc(var(--carrouselzOffset) * 1em)) rotatey(calc( var(--carrouselHoekStap) * ( var(--carrouselItemHoek) + var(--carrouselBasisHoek) ) * 1deg)) translateZ(calc(var(--carrouselzOffset) * -1em)) rotateY(calc(var(--rotateY) * 1deg));
  transition: transform calc(var(--carrouselSnelheid) * 1s) var(--carrouselTempo);
  will-change: transform;
  /* de reflectie */
}

li::after {
  display: none;
  content: "";
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: calc(100% + .75em);
  border-radius: inherit;
  opacity: .25;
}

/* de items */
ul.carrouselItems {
  position: relative;
}

ul.carrouselItems li:nth-of-type(9n + 1) {
  --background-color: dodgerblue;
}

ul.carrouselItems li:nth-of-type(9n + 2) {
  --background-color: SlateBlue;
}

ul.carrouselItems li:nth-of-type(9n + 3) {
  --background-color: RebeccaPurple;
}

ul.carrouselItems li:nth-of-type(9n + 4) {
  --background-color: crimson;
}

ul.carrouselItems li:nth-of-type(9n + 5) {
  --background-color: OrangeRed;
}

ul.carrouselItems li:nth-of-type(9n + 6) {
  --background-color: darkorange;
}

ul.carrouselItems li:nth-of-type(9n + 7) {
  --background-color: gold;
}

ul.carrouselItems li:nth-of-type(9n + 8) {
  --background-color: yellowgreen;
}

ul.carrouselItems li:nth-of-type(9n + 9) {
  --background-color: LimeGreen;
}

ul.carrouselItems li {
  background-color: var(--background-color);
}

/* de achterkanten */
ul.carrouselAchterkanten {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

ul.carrouselAchterkanten li {
  --rotateY:180;
  background-image: var(--carrouselVerloop);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: none;
}

/*************/
/* de opties */
/*************/
/* tempo */
[data-tempo="tempo-linear"] .carrousel {
  --carrouselTempo:linear;
}

[data-tempo="tempo-ease-in"] .carrousel {
  --carrouselTempo:cubic-bezier(0.500, 0.000, 1.000, 1.000);
}

[data-tempo="tempo-bouncy"] .carrousel {
  --carrouselTempo:cubic-bezier(0.175, 0.885, 0.500, 1.500);
}

/* de items */
li {
  /* als je dit aanzet wordt de achterkant niet getoond als een item 'omdraait' */
  /* de achtergrond van de achterkanten */
  /* de items kijken altijd naar voren */
}

[data-compleet="compleet-half"] ul.carrouselItems li,
[data-compleet="compleet-achter"] ul.carrouselItems li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-compleet="compleet-achter"] ul.carrouselAchterkanten li {
  display: block;
}

[data-compleet="compleet-meedraaiend"] li,
[data-compleet="compleet-half-mee"] li {
  --rotateY:calc( var(--carrouselHoekStap) * ( var(--carrouselItemHoek) + var(--carrouselBasisHoek) ) * -1 );
}

@keyframes halfMee {
  0%, 26.24% {
    opacity: 1;
  }
  26.25%, 73.75% {
    opacity: 0;
  }
  73.76%, 100% {
    opacity: 1;
  }
}

[data-compleet="compleet-half-mee"] li {
  animation: halfMee 1s linear infinite paused;
  animation-delay: calc( (var(--carrouselAantalItems) * 1000 + var(--carrouselBasisHoek) + var(--carrouselItemHoek)) / var(--carrouselAantalItems) * -1s);
}

/* de reflectie*/
li {
  /* grijs */
  /* kleur */
}

[data-reflectie="reflectie-grijs"] li::after,
[data-reflectie="reflectie-kleur"] ul.carrouselAchterkanten li::after {
  display: block;
  background-image: linear-gradient(gray, transparent 50%);
}

[data-reflectie="reflectie-kleur"] ul.carrouselItems li::after {
  display: block;
  background-image: linear-gradient(var(--background-color), transparent 50%);
}

/* perspectief */
ul {
  /* vogel */
  /* kikker */
}

[data-perspectief="perspectief-vogel"] ul {
  --caraouselPerspectiveOriginVertical: -25;
}

[data-perspectief="perspectief-vogel"] ul li {
  --translateY:10;
}

[data-perspectief="perspectief-kikker"] ul {
  --caraouselPerspectiveOriginVertical: 90;
}

/***********/
/* buttons */
/***********/
.carrouselContent button {
  --buttonOffset:0;
  position: absolute;
  width: calc( var(--carrouselButtonSize) * 2/3 * 1em);
  height: calc( var(--carrouselButtonSize) * 1em);
  top: calc( 50% - var(--carrouselButtonSize) / 2 * 1em);
  background-image: var(--carrouselVerloop);
  outline: none;
}

.carrouselContent button[value="links"] {
  left: var(--buttonOffset);
  border-radius: 0 calc(var(--carrouselButtonSize) / 2 * 1em) calc(var(--carrouselButtonSize) / 2 * 1em) 0;
}

.carrouselContent button[value="rechts"] {
  right: var(--buttonOffset);
  border-radius: calc(var(--carrouselButtonSize) / 2 * 1em) 0 0 calc(var(--carrouselButtonSize) / 2 * 1em);
}

.carrouselContent button:focus {
  box-shadow: 0 0 0.25em 0.25em var(--sannes-blue);
}

@media (min-width: 32em) {
  .carrouselContent button {
    --buttonOffset:1.5em;
    width: calc(var(--carrouselButtonSize) * 1em);
  }
  .carrouselContent button[value="links"] {
    border-radius: calc(var(--carrouselButtonSize) / 2 * 1em);
  }
  .carrouselContent button[value="rechts"] {
    border-radius: calc(var(--carrouselButtonSize) / 2 * 1em);
  }
}

/****************/
/* de bolletjes */
/****************/
.carrouselBolletjes {
  position: relative;
  padding: calc(var(--carrouselBolletjeSize) * 2 * 1em) 25% 0;
  display: none;
}

[data-bolletjes="bolletjes-ja"] .carrouselBolletjes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

a {
  position: relative;
  width: calc(var(--carrouselBolletjeSize) * 1em);
  height: calc(var(--carrouselBolletjeSize) * 1em);
  margin: calc(var(--carrouselBolletjeSize) / 4 * 1em);
  padding-left: calc(var(--carrouselBolletjeSize) * 1em);
  overflow: hidden;
  background-image: var(--carrouselVerloop);
  border-radius: calc(var(--carrouselBolletjeSize) / 2 * 1em);
  outline: none;
}

a.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background-image: inherit;
  border: solid 1px #9d9995;
  border-radius: inherit;
  transform: scale(0.75) scaleY(-1);
}

a:focus {
  box-shadow: 0 0 0.125em 0.125em var(--sannes-blue);
}

/*************/
/* formulier */
/*************/
form {
  --form-whitespace:.625em;
  --form-line-height:1.75em;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--translucent-color);
  transition: .5s;
  z-index: 20;
  /* sections container */
}

form.formWeg {
  transform: translateY(100%);
}

form > div {
  max-height: 90vh;
  overflow: scroll;
}

/* kruisje */
[type="button"] {
  position: absolute;
  width: 2em;
  height: 2em;
  right: .5em;
  top: .5em;
  transition: .5s;
}

[type="button"]::after {
  content: "\02715";
}

.formWeg [type="button"] {
  top: -2.5em;
  transform: rotate(45deg);
}

/* section */
section {
  padding: 1em;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: min-content;
  grid-gap: var(--form-whitespace);
}

/* creeren */
section.creeren {
  border-style: dashed;
  border-width: 0 0 1px;
  border-color: var(--main-color);
}

section.creeren > div {
  display: grid;
  grid-gap: var(--form-whitespace);
}

/* opties */
section.opties > div {
  display: flex;
  flex-wrap: wrap;
}

section.opties > div div {
  padding-right: var(--form-whitespace);
}

/* titel */
h2 {
  font-size: 1.75em;
  font-weight: 300;
  font-family: 'Saira Condensed', sans-serif;
  margin: 0;
  grid-column: 1/-1;
}

/* labels */
label {
  line-height: var(--form-line-height);
}

section > label {
  display: block;
}

section > label::after {
  content: ":";
}

/* inputs */
[type="number"] {
  line-height: var(--form-line-height);
  text-align: center;
  width: 3.2em;
}

/* de knop */
[type="submit"] {
  line-height: var(--form-line-height);
  color: white;
  background: var(--sannes-blue);
  grid-column: 1/-1;
}

@media (min-width: 26em) {
  section {
    padding: 1.5em;
  }
  /* creeren */
  section.creeren > div {
    grid-template-columns: max-content max-content;
  }
  section.creeren > div div:nth-of-type(2) {
    grid-row: 2;
  }
}

@media (min-width: 33em) {
  /* creeren */
  section.creeren > div {
    grid-template-columns: max-content max-content max-content;
  }
  section.creeren > div div:nth-of-type(2) {
    grid-row: auto;
  }
}

@media (min-width: 39em) {
  form {
    --form-line-height:2em;
  }
  form > div {
    display: grid;
    grid-template-columns: max-content auto;
  }
  /* creeren */
  section.creeren {
    border-width: 0 1px 0 0;
  }
  section.creeren > div {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 61em) {
  form {
    --form-whitespace:.75rem;
  }
  /* creeren */
  section.creeren > div {
    grid-template-columns: max-content max-content;
  }
  section.creeren > div div:nth-of-type(2) {
    grid-row: 2;
  }
}

@media (min-width: 68em) {
  /* opties */
  section.opties {
    grid-template-columns: 2.5fr 5fr 3fr 3fr 3fr;
    grid-gap: 0 var(--form-whitespace);
  }
  section.opties > div {
    grid-row: 3;
    flex-direction: column;
  }
  section.opties > div div {
    padding-right: 0;
  }
  section.opties h2 {
    padding-bottom: var(--form-whitespace);
  }
  section.opties > label {
    --line-height-decrease:.125em;
    padding-top: var(--line-height-decrease);
    line-height: calc(var(--form-line-height) - 2 * var(--line-height-decrease));
  }
  [type="radio"],
  [type="radio"] + label {
    line-height: 1em;
  }
}

@media (min-width: 74em) {
  /* creeren */
  section.creeren > div {
    grid-template-columns: max-content max-content max-content;
  }
  section.creeren > div div:nth-of-type(2) {
    grid-row: auto;
  }
}

@media (min-width: 78em) {
  /* opties */
  section.opties {
    grid-template-columns: 4.5fr 8fr 5fr 5fr 4.5fr;
  }
}

@media (min-width: 91em) {
  h2 {
    padding-top: .125rem;
    line-height: 1.5rem;
    grid-column: auto;
  }
  /* creeren */
  section.creeren {
    grid-template-columns: 7vw min-content 1fr;
  }
  section.creeren h2 {
    grid-row: 1/4;
  }
  section.creeren button {
    grid-column: 2/-1;
  }
  /* opties */
  section.opties {
    grid-template-columns: calc(7vw + 2em) 3.5fr 7fr 3.5fr 4fr 4fr;
  }
  section.opties h2 {
    grid-row: 1/3;
  }
  section.opties > div {
    grid-row: 2;
  }
}

@media (min-width: 96em) {
  /* opties */
  section.opties {
    grid-template-columns: calc(7vw + 2em) 4.5fr 7.5fr 5fr 5fr 5fr;
  }
}