@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap&family=Heebo:wght@650&display=swap");
:root {
  --blur-filter: url("#mbs-motionblur");
  --mart-interval: 100ms;
  --mart-bg: url("./img/mart-introduceert.webp");
  --x-padding: 2rem;
  --overlay-opacity: 40%;
  --16-9-ratio: 56.25%;
  --base-color: 244 0 104;
  --base-color-dark: 122 0 52;
  --base-color-darker: 61 0 26;
  --base-color-hue: 334;
  --fill-available: -webkit-fill-available;
}

html {
  width: 100%;
  height: 100%;
  display: table;
}

body {
  width: 100%;
  display: table-cell;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.6;
  background: linear-gradient(to bottom, rgb(255, 214, 94) 0%, rgb(254, 191, 4) 100%) no-repeat;
}
body main, body footer {
  position: relative;
  max-width: 100%;
  padding-right: calc(var(--x-padding) * 0.5);
  padding-left: calc(var(--x-padding) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 992px) {
  body main, body footer {
    max-width: 960px;
  }
}
body main .demartilizer {
  display: grid;
  margin-top: 3rem;
}
@media (max-width: 575.98px) {
  body main .demartilizer {
    margin-top: 0;
  }
}
body main .demartilizer .mart {
  box-shadow: 1px 1px 1.5rem rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  aspect-ratio: 16/9;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  background-image: url("./img/crt.png");
}
@media (max-width: 575.98px) {
  body main .demartilizer .mart {
    aspect-ratio: auto;
    min-height: 50vh;
    border-radius: 0;
    margin-left: calc(var(--x-padding) * -0.5);
    margin-right: calc(var(--x-padding) * -0.5);
  }
}
body main .demartilizer .mart .mart-beeld {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  background-image: var(--mart-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 100ms ease-in-out;
}
body main .demartilizer .mart .mart-quote {
  position: relative;
  grid-row: 2;
  color: rgb(255, 255, 255);
  font-size: min(0.8rem + 3vw, 2rem);
  line-height: 1.2;
  padding: calc(var(--x-padding) * 1.5) calc(var(--x-padding) * 0.5);
  border-radius: 5px;
  font-family: "Heebo", sans-serif;
  font-weight: 650;
  text-wrap: balance;
  word-spacing: 0;
  font-variant-ligatures: no-common-ligatures;
  overflow: visible;
  flex-basis: 100%;
  display: flex;
  z-index: 2;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-self: flex-end;
}
@media (max-width: 575.98px) {
  body main .demartilizer .mart .mart-quote {
    border-radius: 0;
    border: 0 none;
    padding: calc(var(--x-padding) * 1) calc(var(--x-padding) * 0.5);
  }
}
body main .demartilizer .mart .mart-quote > span {
  letter-spacing: 0.03rem;
  word-spacing: 0.05em;
  font-variant-ligatures: no-common-ligatures;
  transform: scaleX(0.9);
}
body main .demartilizer .mart .mart-quote > span > span {
  --shadow-offset: 0.09rem;
  --shadow-offset-neg: calc(-1 * var(--shadow-offset));
  text-shadow: var(--shadow-offset-neg) var(--shadow-offset-neg) 0 #000, var(--shadow-offset) var(--shadow-offset-neg) 0 #000, var(--shadow-offset-neg) var(--shadow-offset) 0 #000, var(--shadow-offset) var(--shadow-offset) 0 #000, 1px 1px 5px black;
}
body main .demartilizer .mart .mart-quote > span > span.cycling {
  filter: var(--blur-filter);
  transition: none;
  text-shadow: none;
}
body main .demartilizer .mart::before {
  display: block;
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  z-index: 3;
  font-weight: 700;
  color: rgba(255, 208, 17, 0.8);
  text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.8);
  font-family: "Roboto Slab", serif;
  font-size: calc(0.7rem + 0.25vw);
  content: "SmeetSmakelijk.nl - Soit.";
}
@media (max-width: 575.98px) {
  body main .demartilizer .mart::before {
    font-size: calc(0.6rem + 0.25vw);
  }
}
body main .demartilizer .mart-controls {
  display: grid;
  grid-template-columns: 0 1fr 0;
  align-items: start;
  justify-items: center;
  gap: 0;
}
@media (min-width: 576px) {
  body main .demartilizer .mart-controls {
    grid-template-columns: 1fr 50% 1fr;
  }
}
@media (min-width: 992px) {
  body main .demartilizer .mart-controls {
    grid-template-columns: 1fr 40% 1fr;
  }
}
body main .demartilizer .mart-controls > * {
  width: 100%;
  grid-column: 2;
}
body main .demartilizer .mart-controls input, body main .demartilizer .mart-controls select, body main .demartilizer .mart-controls button {
  font-family: "Roboto Slab", serif;
}
body main .demartilizer .mart-controls input, body main .demartilizer .mart-controls select {
  font-size: 1rem;
  padding: calc(var(--x-padding) * 0.15) calc(var(--x-padding) * 0.2);
  border-radius: 3px;
  border: 1px solid #fec51b;
  outline: 0;
  margin: 1px;
}
body main .demartilizer .mart-controls input:focus, body main .demartilizer .mart-controls select:focus {
  outline: 1px solid #ef1362;
}
body main .demartilizer .mart-controls .btn.btn-deluxe {
  margin: calc(var(--x-padding) * 0.5) 0;
  font-size: 1.3rem;
  color: #FFF;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.6), 0 3px 3px rgba(0, 0, 0, 0.2);
}
body main .demartilizer .mart-controls .btn.btn-deluxe:active {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6), 0 -2px 2px rgba(0, 0, 0, 0.2);
}
body main .demartilizer .mart-controls .form-control:focus, body main .demartilizer .mart-controls .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 236, 164, 0.7);
}
body main .demartilizer .mart-controls input[type=search]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /* Now your own custom styles */
  height: 14px;
  width: 14px;
  display: block;
  color: #888;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(210 210 210)" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>');
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;
  /* icon size */
  background-size: 14px;
}
body footer {
  padding-top: calc(var(--x-padding) * 1.5);
  padding-bottom: calc(var(--x-padding) * 1.5);
  text-align: center;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 575.98px) {
  body footer {
    padding-top: calc(var(--x-padding) * 0.75);
    padding-bottom: calc(var(--x-padding) * 0.75);
  }
}
body footer p {
  margin: 0;
}
body footer a {
  color: #e00068;
}

svg.filters {
  position: absolute;
  width: 0;
  height: 0;
}

@keyframes cycling {
  from {
    opacity: 1;
    transform: translateY(-70%);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(70%);
  }
}

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