@charset "UTF-8";
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/Roboto-BoldItalic.woff2") format("woff2"), url("../fonts/Roboto-BoldItalic.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/Roboto-MediumItalic.woff2") format("woff2"), url("../fonts/Roboto-MediumItalic.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Roboto-Italic.woff2") format("woff2"), url("../fonts/Roboto-Italic.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"); }

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/Roboto-LightItalic.woff2") format("woff2"), url("../fonts/Roboto-LightItalic.woff") format("woff"); }

* {
  box-sizing: border-box; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none;
  padding: calc( var(--padding) / 2) calc( var(--padding) * 2);
  background: #f2f2f2;
  font-style: italic;
  position: relative; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '“';
    font-family: serif;
    color: #888;
    position: absolute;
    font-size: 50px; }
  blockquote:before, q:before {
    top: 0;
    left: 10px; }
  blockquote:after, q:after {
    content: '„';
    right: 10px;
    bottom: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

::-moz-selection {
  background-color: rgba(131, 54, 247, 0.4); }

::selection {
  background-color: rgba(131, 54, 247, 0.4); }

pre {
  font-family: monospace;
  padding: calc( var(--padding) / 2);
  background: #f2f2f2; }

strong {
  font-weight: 500; }

:root {
  --header-height: 80px;
  --padding: 30px;
  --page-width: 1300px;
  --header-half-height: calc(var(--header-height) / 2); }

html {
  overflow-x: hidden; }

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  font-size: 20px;
  overflow-x: hidden;
  color: #2b0069; }
  @media all and (max-width: 640px) {
    body {
      padding-top: 63px; } }

button {
  font-family: 'Roboto', sans-serif; }

img {
  max-width: 100%;
  max-height: 100%; }

html body.focus-mode .hidden-in-focus-mode {
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1000 !important; }

html body.focus-mode .not-in-focus-mode {
  display: none !important; }

.footer-logo-wrapper {
  display: none !important; }

#masthead {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, var(--header-half-height)) 0;
  grid-template-areas: "logo . user" "logo search nav" "soon soon soon";
  max-width: var(--page-width);
  margin: 0 auto;
  position: relative;
  padding: calc(var(--padding) * 1.5) 0;
  z-index: 2; }
  @media all and (max-width: 640px) {
    #masthead {
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
      top: 0; }
      #masthead.scrolling:after {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        background: white; }
      #masthead:after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        height: 100%;
        width: 100vw;
        z-index: -2;
        transition: box-shadow .25s ease-in-out; } }
  @media all and (max-width: 1360px) {
    #masthead {
      padding: calc(var(--padding) * 1.5) var(--padding);
      grid-template-areas: "logo search user" "logo nav nav" "soon soon soon"; } }
  @media all and (max-width: 1024px) {
    #masthead {
      grid-template-rows: auto;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "logo search interaction"; } }
  @media all and (max-width: 640px) {
    #masthead {
      grid-template-columns: repeat(2, 50%);
      grid-template-rows: 1fr;
      grid-template-areas: "logo interaction";
      padding: calc(var(--padding) * .25) calc(var(--padding) * .5); } }
  #masthead:not(.primary):before {
    border-radius: 50%;
    border: calc(var(--padding) * 2) solid #f919a9;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(calc(-50vw - 50%), -50%);
    width: calc(var(--padding) * 4);
    height: calc(var(--padding) * 4);
    z-index: -1; }
    @media all and (max-width: 1450px) {
      #masthead:not(.primary):before {
        display: none; } }
  @media all and (max-width: 640px) {
    #masthead .username {
      display: none; } }
  body.can-hover #masthead li:hover a.username {
    color: white; }
  body.can-hover #masthead li:hover a.username:hover {
    color: #84ecef; }
  #masthead.primary.scrolling svg {
    --teint-0: #8336f7 !important;
    --teint-1: #f919a9 !important; }
  #masthead.primary li, #masthead.primary a {
    color: white; }
    #masthead.primary li.username, #masthead.primary a.username {
      color: #d9a0da; }
  body.can-hover #masthead.primary a:hover {
    color: #84ecef; }
  #masthead.primary .profile {
    color: #d9a0da; }
  #masthead a {
    color: #8336f7;
    text-decoration: none;
    font-weight: 500; }
    body.can-hover #masthead a:hover {
      text-decoration: underline;
      color: #f919a9; }

#cddz-logo {
  grid-area: logo;
  position: relative;
  overflow: hidden; }
  #cddz-logo svg {
    height: var(--header-height);
    transition: all 0.4s cubic-bezier(0.42, 0.26, 0, 1.27); }
    @media all and (max-width: 640px) {
      #cddz-logo svg {
        height: 40px;
        width: 173px; } }
    @media all and (max-width: 640px) {
      .scrolling #cddz-logo svg.full-logo {
        transform: translateY(-100%); } }
    #cddz-logo svg.circle-only {
      position: absolute;
      top: 50%;
      left: 0;
      width: 40px;
      transform: translateY(-250%); }
      @media all and (max-width: 640px) {
        .scrolling #cddz-logo svg.circle-only {
          transform: translateY(-50%); } }

#user {
  grid-area: user;
  justify-self: end;
  -ms-flex-item-align: start;
      align-self: flex-start;
  color: #8336f7; }
  @media all and (max-width: 1024px) {
    #user {
      display: none; } }
  #user .profile svg {
    width: 35px;
    height: 35px; }

.smiley-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: var(--padding);
  height: var(--padding);
  border: 2px solid;
  border-radius: 50%;
  position: relative; }
  .smiley-wrapper svg {
    width: calc(var(--padding) / 2);
    height: calc(var(--padding) / 2);
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%); }

#mobile-navigation {
  display: none; }
  @media all and (max-width: 1024px) {
    #mobile-navigation {
      display: -ms-flexbox;
      display: flex;
      grid-area: interaction;
      -ms-flex-item-align: center;
          align-self: center;
      justify-self: end; }
      #mobile-navigation svg {
        width: 100%;
        height: 100%;
        pointer-events: none; }
      #mobile-navigation a {
        width: 35px;
        height: 35px;
        display: block; }
        #mobile-navigation a:not(:last-child) {
          margin-right: calc(var(--padding) / 3); } }

#main-menu {
  grid-area: nav;
  justify-self: end;
  -ms-flex-item-align: end;
      align-self: end; }
  @media all and (max-width: 1024px) {
    #main-menu {
      display: none; } }
  body.can-hover .primary #main-menu a:hover {
    color: #84ecef;
    text-decoration: none; }
  #main-menu ul {
    display: -ms-flexbox;
    display: flex; }
  #main-menu li:not(:first-child) {
    margin-left: var(--padding); }
  #main-menu a {
    transition: all .2s ease-in-out; }

#searchform {
  grid-area: search;
  justify-self: center;
  -ms-flex-item-align: end;
      align-self: end;
  border: 2px solid #8336f7;
  height: calc(var(--header-height) / 2);
  border-radius: 25px;
  position: relative; }
  .primary #searchform {
    border-color: #d9a0da; }
  @media all and (max-width: 1024px) {
    #searchform {
      -ms-flex-item-align: center;
          align-self: center;
      justify-self: end;
      margin: 0 calc(var(--padding) / 2); } }
  @media all and (max-width: 640px) {
    #searchform {
      display: none; } }
  #searchform input {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    padding: 0 calc(var(--padding) * 1.5) 0 calc(var(--padding) / 2);
    font-size: 1em;
    line-height: calc(var(--header-height) / 2);
    outline: 0; }
    .primary #searchform input {
      background: transparent; }
      @supports (-ms-ime-align: auto) {
        .primary #searchform input {
          background-color: #d9a0da; } }
    #searchform input::-moz-placeholder {
      color: #999999; }
    #searchform input:-ms-input-placeholder {
      color: #999999; }
    #searchform input::placeholder {
      color: #999999; }
      .primary #searchform input::-moz-placeholder {
        color: #d9a0da; }
      .primary #searchform input:-ms-input-placeholder {
        color: #d9a0da; }
      .primary #searchform input::placeholder {
        color: #d9a0da; }
        @supports (-ms-ime-align: auto) {
          .primary #searchform input::-moz-placeholder {
            background-color: #2b0069; }
          .primary #searchform input:-ms-input-placeholder {
            background-color: #2b0069; }
          .primary #searchform input::placeholder {
            background-color: #2b0069; } }
  #searchform button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border: 0;
    width: auto;
    line-height: 60px;
    background: none;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 0 calc(var(--padding) / 2); }
    #searchform button svg {
      height: 100%;
      width: calc(var(--padding) * .75); }

#soon_dealz_anchor {
  position: relative;
  grid-area: soon; }

#soon_dealz:not(:empty) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--padding) / 2);
  background: #8336f7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 100; }
  @media all and (max-width: 640px) {
    #soon_dealz:not(:empty) {
      position: fixed;
      top: initial;
      bottom: 0; } }

#soon_dealz li {
  background: #8336f7;
  color: white;
  display: inline; }
  #soon_dealz li:after {
    content: " -- "; }
  #soon_dealz li:before {
    color: white;
    opacity: .5;
    content: "Binnenkort beginnen de volgende dealz:"; }
  #soon_dealz li:last-child:before {
    content: "Binnenkort begint de volgende deal:"; }
  #soon_dealz li.now:before {
    content: "Nu bezig:"; }
  #soon_dealz li.now + li.now:before,
  #soon_dealz li.soon + li.soon:before {
    content: ""; }
  #soon_dealz li a {
    color: white; }
  #soon_dealz li .time:before {
    content: "( "; }
  #soon_dealz li .time:after {
    content: " ) "; }

.primary .currentcolor-with-accent {
  --teint-1: #84ecef !important; }

@media all and (max-width: 640px) {
  .not-on-mobile {
    display: none; } }

@media all and (min-width: 641px) {
  .only-on-mobile {
    display: none; } }

#banner {
  position: relative;
  margin-bottom: 5.2vw; }
  @media all and (max-width: 640px) {
    #banner {
      margin-bottom: var(--padding); } }
  #banner:before, #banner:after {
    content: '';
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%); }
  #banner:before {
    top: calc(-1 * ((var(--padding) * 3) + var(--header-height)));
    z-index: -1;
    bottom: 0;
    background: linear-gradient(to bottom, #bd2cbb 0%, #8336f7 80%); }
  #banner:after {
    bottom: -5.2vw;
    height: 0;
    padding-bottom: 5.20833vw;
    z-index: -2;
    background: url("../img/arcs/arc-bottom-purple.svg") no-repeat bottom center;
    background-size: 100%;
    width: 100vw; }
  #banner .donut {
    position: absolute;
    right: 0;
    top: 30%;
    transform: translateX(45%);
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    border: 175px solid #84ecef;
    z-index: -1; }
    .focus-mode #banner .donut {
      display: none; }
    @media all and (max-width: 1024px) {
      #banner .donut {
        display: none; } }

.deal-summary {
  display: grid;
  grid-template-columns: auto minmax(250px, 1fr) auto;
  grid-template-rows: repeat(3, auto);
  grid-gap: var(--padding);
  max-width: calc(var(--page-width) / 2);
  margin: 0 auto;
  color: white;
  padding: calc(var(--padding) * 2) 0; }
  @media all and (max-width: 640px) {
    .deal-summary {
      padding: var(--padding) calc(var(--padding) * .5);
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, auto); } }
  .deal-summary img {
    max-width: 100%; }
  .deal-summary.won {
    grid-template-areas: "deal-price smiley rest-time" "beep-left info beep-right" "instructions instructions instructions"; }
    @media all and (max-width: 640px) {
      .deal-summary.won {
        grid-template-areas: "smiley smiley" "deal-price rest-time" "info info" "instructions instructions"; }
        .deal-summary.won .info {
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse; }
          .deal-summary.won .info p {
            margin-top: var(--padding); } }
  .deal-summary.lost {
    grid-template-areas: "deal-price smiley rest-time" "info info info" "instructions instructions instructions"; }
    @media all and (max-width: 640px) {
      .deal-summary.lost {
        grid-template-areas: "smiley smiley" "deal-price rest-time" "info info" "instructions instructions"; }
        .deal-summary.lost .info p {
          margin-bottom: var(--padding); } }
  .deal-summary header {
    grid-area: info;
    text-align: center; }
    .deal-summary header h1 {
      margin-bottom: calc(var(--padding) / 2);
      font-size: 1.1em; }
    .deal-summary header a, .deal-summary header strong {
      color: #84ecef; }
  .deal-summary .info {
    grid-area: instructions;
    text-align: center;
    background: white;
    border-radius: calc(var(--padding) * 2);
    padding: calc(var(--padding) * .5) calc(var(--padding) * .5) calc(var(--padding) * .5) calc(var(--padding) * 1.33);
    display: -ms-flexbox;
    display: flex; }
    @media all and (max-width: 640px) {
      .deal-summary .info {
        -ms-flex-direction: column;
            flex-direction: column;
        padding: 0;
        background: none; } }
    .deal-summary .info p, .deal-summary .info a {
      -ms-flex-item-align: center;
          align-self: center; }
    .deal-summary .info p {
      color: #8336f7;
      margin-right: calc(var(--padding) / 2);
      width: 75%;
      text-align: left;
      line-height: 1.2; }
      @media all and (max-width: 640px) {
        .deal-summary .info p {
          width: 100%;
          margin-right: 0;
          text-align: center;
          color: white; } }
    .deal-summary .info a {
      width: 25%;
      padding: calc(var(--padding) / 4) calc(var(--padding) / 2); }
      @media all and (max-width: 640px) {
        .deal-summary .info a {
          width: 100%; } }
  .deal-summary dl dt {
    display: block;
    text-transform: uppercase;
    color: #d5c5fc;
    font-size: 0.9em; }
  .deal-summary dl dd {
    font-size: 2em;
    line-height: 1.2; }
  .deal-summary .deal-price {
    grid-area: deal-price;
    justify-self: end;
    -ms-flex-item-align: center;
        align-self: center;
    text-align: right; }
    @media all and (max-width: 640px) {
      .deal-summary .deal-price {
        justify-self: start;
        text-align: left; } }
  .deal-summary .rest-time {
    grid-area: rest-time;
    -ms-flex-item-align: center;
        align-self: center; }
  .deal-summary .smiley {
    grid-area: smiley;
    justify-self: center; }
  .deal-summary .beep-left, .deal-summary .beep-right {
    position: relative; }
    @media all and (max-width: 640px) {
      .deal-summary .beep-left, .deal-summary .beep-right {
        display: none; } }
    .deal-summary .beep-left img, .deal-summary .beep-right img {
      position: absolute;
      bottom: 0; }
  .deal-summary .beep-left {
    grid-area: beep-left; }
  .deal-summary .beep-right {
    grid-area: beep-right; }

#deal-information {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "title counter participants" "prices counter participants" "type start .";
  grid-gap: var(--padding);
  max-width: var(--page-width);
  margin: 0 auto;
  color: white;
  padding: calc(var(--padding) * 2) 0; }
  @media all and (max-width: 1360px) {
    #deal-information {
      padding: calc(var(--padding) * 2) var(--padding);
      grid-template-columns: 2.5fr 2.5fr 1fr; } }
  @media all and (max-width: 768px) {
    #deal-information {
      grid-template-columns: 1fr 1.75fr 1fr;
      grid-template-rows: repeat(4, auto);
      grid-template-areas: "title title title"  "prices counter participants" ". start ." "type type type"; } }
  @media all and (max-width: 640px) {
    #deal-information {
      padding: 0 calc(var(--padding) * .5) var(--padding);
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, auto);
      grid-template-areas: "title" "counter" "prices" "type" "start" "participants";
      margin-bottom: var(--padding); } }
  #deal-information header {
    grid-area: title; }
    #deal-information header h1, #deal-information header h2 {
      color: white; }
    #deal-information header h1 {
      font-size: 2em;
      line-height: 1.2; }
      @media all and (max-width: 1360px) {
        #deal-information header h1 {
          font-size: 1.75em; } }
      @media all and (max-width: 1024px) {
        #deal-information header h1 {
          font-size: 1.6em; } }
    #deal-information header h2 {
      font-size: 1.8em; }
  @media all and (max-width: 768px) {
    #deal-information .amount-of-subscribers {
      display: none !important; } }
  #deal-information .prices {
    grid-area: prices;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: calc(var(--padding) / 3); }
    @media all and (max-width: 768px) and (min-width: 641px) {
      #deal-information .prices {
        grid-template-columns: 1fr; } }
    @media all and (max-width: 1024px) {
      #deal-information .prices {
        -ms-flex-align: end;
            align-items: end; } }
    #deal-information .prices strong {
      display: block;
      text-transform: uppercase;
      color: #d5c5fc;
      font-size: 0.9em;
      font-weight: 400; }
    #deal-information .prices span > span {
      font-size: 2em;
      line-height: 1.2;
      color: #d5c5fc; }
      @media all and (max-width: 1024px) {
        #deal-information .prices span > span {
          font-size: 1.5em; } }
      #deal-information .prices span > span.wow {
        color: white;
        font-weight: 500; }
      @media all and (max-width: 640px) {
        #deal-information .prices span > span {
          font-size: 1.6em; } }
      #deal-information .prices span > span:before {
        content: '€ '; }
      #deal-information .prices span > span.percentage:before {
        content: ''; }
      #deal-information .prices span > span.percentage:after {
        content: '%'; }
  #deal-information .deal-type {
    grid-area: type;
    color: #d5c5fc;
    -ms-flex-item-align: center;
        align-self: center;
    font-size: 0.9em;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
    @media all and (max-width: 768px) and (min-width: 641px) {
      #deal-information .deal-type {
        justify-self: center; } }
    #deal-information .deal-type figure {
      margin-right: calc(var(--padding) / 2);
      display: inline-block;
      vertical-align: middle; }
    @media all and (max-width: 640px) {
      #deal-information .deal-type span.d-price, #deal-information .deal-type span.d-type {
        display: block; } }
  #deal-information .counter {
    grid-area: counter;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    justify-items: center; }
    #deal-information .counter .buttons {
      margin-top: var(--padding); }
    #deal-information .counter .cta, #deal-information .counter .cta--accent, #deal-information .counter .cta--accent-2, #deal-information .counter .cta--light, #deal-information .counter .cta--special, #deal-information .counter .cta--gray, #deal-information .counter .cta--main, #deal-information .counter .cta--disabled, #deal-information .counter .cta--action, #deal-information .counter .cta--accept, #deal-information .counter .cta--cancel {
      -ms-flex-item-align: end;
          align-self: end; }
    #deal-information .counter a {
      display: block;
      width: 210px;
      text-align: center;
      font-size: 1.6em;
      line-height: 1;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      white-space: nowrap;
      padding-left: 0;
      padding-right: 0; }
      @media all and (max-width: 640px) {
        #deal-information .counter a {
          font-size: 1.8em; } }
      #deal-information .counter a.i-am-in {
        font-size: 1.2em;
        line-height: 1.3em; }
      #deal-information .counter a.make-a-deal {
        font-size: 1.5em;
        font-weight: 700;
        /** this is intended as a different font. */
        font-family: Verdana, Roboto, sans-serif !important;
        padding: calc(var(--padding) / 3); }
      #deal-information .counter a.waiting-on-deal {
        font-size: 1.5em;
        font-weight: 700;
        /** this is intended as a different font. */
        font-family: Verdana, Roboto, sans-serif !important;
        padding: calc(var(--padding) / 3); }
      #deal-information .counter a.i-am-watching {
        font-size: 1.4em; }
  #deal-information .start {
    grid-area: start;
    justify-self: center;
    color: #d5c5fc;
    text-align: center;
    font-size: 0.9em;
    font-weight: 400; }
    @media all and (max-width: 640px) {
      #deal-information .start {
        text-align: left;
        justify-self: start; } }
    #deal-information .start > span {
      display: block; }
    #deal-information .start strong {
      color: white; }
  #deal-information .participants {
    grid-area: participants; }
    @media all and (min-width: 769px) {
      #deal-information .participants {
        justify-self: center; } }
    @media all and (min-width: 768px) {
      #deal-information .participants {
        text-align: right; } }
    #deal-information .participants h2 {
      font-size: 1em;
      color: white;
      margin-bottom: var(--padding); }
    #deal-information .participants ul {
      max-height: 245px;
      overflow: hidden;
      font-size: .9em;
      color: #d5c5fc; }
      #deal-information .participants ul li {
        white-space: nowrap; }

.deal-summary {
  display: grid;
  grid-template-columns: 1fr 1.75fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-gap: var(--padding);
  max-width: calc(var(--page-width) / 2);
  margin: 0 auto;
  color: white;
  padding: calc(var(--padding) * 2) 0; }
  @media all and (max-width: 640px) {
    .deal-summary {
      padding: var(--padding) calc(var(--padding) * .5);
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, auto); } }
  .deal-summary img {
    max-width: 100%; }
  .deal-summary.won {
    grid-template-areas: "deal-price smiley rest-time" "beep-left info beep-right" "instructions instructions instructions"; }
    @media all and (max-width: 640px) {
      .deal-summary.won {
        grid-template-areas: "smiley smiley" "deal-price rest-time" "info info" "instructions instructions"; }
        .deal-summary.won .info {
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse; }
          .deal-summary.won .info p {
            margin-top: var(--padding); } }
  .deal-summary.lost {
    grid-template-areas: "deal-price smiley rest-time" "info info info" "instructions instructions instructions"; }
    @media all and (max-width: 640px) {
      .deal-summary.lost {
        grid-template-areas: "smiley smiley" "deal-price rest-time" "info info" "instructions instructions"; }
        .deal-summary.lost .info p {
          margin-bottom: var(--padding); } }
  .deal-summary header {
    grid-area: info;
    text-align: center; }
    .deal-summary header h1 {
      margin-bottom: calc(var(--padding) / 2);
      font-size: 1.1em; }
    .deal-summary header a, .deal-summary header strong {
      color: #84ecef; }
  .deal-summary .info {
    grid-area: instructions;
    text-align: center;
    background: white;
    border-radius: calc(var(--padding) * 2);
    padding: calc(var(--padding) * .5) calc(var(--padding) * .5) calc(var(--padding) * .5) calc(var(--padding) * 1.33); }
    @media all and (max-width: 640px) {
      .deal-summary .info {
        padding: calc(var(--padding) * .5);
        border-radius: 10px; } }
    .deal-summary .info div {
      display: -ms-flexbox;
      display: flex;
      width: 100%; }
      @media all and (max-width: 640px) {
        .deal-summary .info div {
          -ms-flex-direction: column;
              flex-direction: column;
          padding: 0;
          background: none; } }
    .deal-summary .info p, .deal-summary .info a {
      -ms-flex-item-align: center;
          align-self: center; }
    .deal-summary .info p {
      color: #8336f7;
      margin-right: calc(var(--padding) / 2);
      width: 75%;
      text-align: left;
      line-height: 1.2; }
      @media all and (max-width: 640px) {
        .deal-summary .info p {
          width: 100%;
          margin-right: 0;
          text-align: center; } }
    .deal-summary .info a {
      width: 25%;
      padding: calc(var(--padding) / 4) calc(var(--padding) / 2); }
      @media all and (max-width: 640px) {
        .deal-summary .info a {
          width: 100%; } }
  .deal-summary dl dt {
    display: block;
    text-transform: uppercase;
    color: #d5c5fc;
    font-size: 0.9em; }
  .deal-summary dl dd {
    font-size: 2em;
    line-height: 1.2; }
  .deal-summary .deal-price {
    grid-area: deal-price;
    justify-self: end;
    -ms-flex-item-align: center;
        align-self: center;
    text-align: right; }
    @media all and (max-width: 640px) {
      .deal-summary .deal-price {
        justify-self: start;
        text-align: left; } }
  .deal-summary .rest-time {
    grid-area: rest-time;
    -ms-flex-item-align: center;
        align-self: center; }
  .deal-summary .smiley {
    grid-area: smiley;
    justify-self: center;
    width: 210px;
    height: 210px;
    position: relative; }
    .deal-summary .smiley:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      border: 27px solid #84ecef;
      border-radius: 50%;
      display: block; }
    .deal-summary .smiley svg {
      width: 90px;
      height: 79px;
      position: absolute;
      top: 75px;
      left: 50%;
      transform: translateX(-50%); }
  .deal-summary .beep-left, .deal-summary .beep-right {
    position: relative; }
    @media all and (max-width: 640px) {
      .deal-summary .beep-left, .deal-summary .beep-right {
        display: none; } }
    .deal-summary .beep-left svg, .deal-summary .beep-right svg {
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 100px; }
  .deal-summary .beep-left {
    grid-area: beep-left; }
    .deal-summary .beep-left svg {
      transform: rotate(270deg);
      left: 0; }
  .deal-summary .beep-right {
    grid-area: beep-right; }
    .deal-summary .beep-right svg {
      right: 0; }

#product-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "title title" "what-you-get slider" ". share";
  grid-gap: var(--padding);
  max-width: var(--page-width);
  margin: 0 auto;
  color: white;
  padding: calc(var(--padding) * 2) 0; }
  @media all and (max-width: 1360px) {
    #product-info {
      padding: calc(var(--padding) * 2) var(--padding); } }
  @media all and (max-width: 640px) {
    #product-info {
      padding: calc(var(--padding) * .5);
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, auto);
      grid-template-areas: "title" "what-you-get" "slider" "share"; } }
  #product-info header {
    grid-area: title; }
    #product-info header h2 {
      color: white;
      font-size: 2em; }
      @media all and (max-width: 640px) {
        #product-info header h2 {
          font-size: 1.6em; } }
  #product-info .product-description {
    margin-bottom: var(--padding); }
  #product-info .what-you-get {
    grid-area: what-you-get; }
    #product-info .what-you-get h3 {
      color: #84ecef;
      font-size: 1.1em;
      margin-bottom: var(--padding); }
    #product-info .what-you-get ul li {
      position: relative;
      padding-left: var(--padding); }
      #product-info .what-you-get ul li:not(:last-child) {
        margin-bottom: calc(var(--padding) / 4); }
      #product-info .what-you-get ul li:before {
        content: '•';
        font-size: 2.5em;
        position: absolute;
        left: 0;
        top: 9px;
        line-height: 11px; }
  #product-info .product-images {
    grid-area: slider;
    --slide: 0; }
    #product-info .product-images .product-image-slider {
      width: 100%;
      display: -ms-flexbox;
      display: flex;
      transform: translate3D(calc(-100% * var(--slide)), 0, 0);
      transition: all 0.4s cubic-bezier(0.19, 0.16, 0.1, 0.95); }
      #product-info .product-images .product-image-slider li {
        width: 100%;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        margin-left: 0;
        opacity: 0;
        transform: translate3D(100%, 0, 0);
        transition: all 0.4s cubic-bezier(0.19, 0.16, 0.1, 0.95); }
        @media all and (max-width: 1300px) {
          #product-info .product-images .product-image-slider li {
            width: 90%;
            transform: translate3D(90%, 0, 0); }
            #product-info .product-images .product-image-slider li:not(:first-child) {
              margin-left: 10%; } }
        #product-info .product-images .product-image-slider li.active {
          transform: translate3D(0, 0, 0);
          opacity: 1; }
          #product-info .product-images .product-image-slider li.active ~ li {
            margin-left: var(--padding);
            position: relative;
            opacity: 1;
            transform: translate3D(0, 0, 0);
            transition: all linear 500ms; }
    #product-info .product-images .img {
      width: 100%;
      height: 0;
      padding-bottom: 62.5%;
      pointer-events: none;
      background-size: cover; }
      #product-info .product-images .img img {
        display: none; }
  #product-info .product-image-navigation {
    display: -ms-flexbox;
    display: flex;
    margin-top: calc(var(--padding) / 2); }
    #product-info .product-image-navigation li {
      width: calc(var(--padding) * .66666);
      height: calc(var(--padding) * .66666);
      border-radius: 50%;
      border: 2px solid white;
      cursor: pointer;
      transition: all .25s;
      background: transparent; }
      body.can-hover #product-info .product-image-navigation li:hover {
        background: rgba(249, 25, 169, 0.5); }
      #product-info .product-image-navigation li:not(:last-child) {
        margin-right: calc(var(--padding) / 3); }
      #product-info .product-image-navigation li.active {
        background: #f919a9; }
  #product-info .share-deal {
    grid-area: share;
    text-decoration: none;
    color: #84ecef;
    line-height: 1.3em; }
    body.can-hover #product-info .share-deal:hover {
      color: #fff; }
    #product-info .share-deal svg.share {
      vertical-align: top;
      height: 1.3em;
      width: 1.3em; }

.connectionIndicator {
  position: fixed;
  z-index: 1000000;
  top: 140px;
  left: 0;
  right: 0;
  max-width: var(--page-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4px 1fr 1fr 1fr 2fr;
  grid-gap: 4px; }
  .connectionIndicator span {
    height: 4px;
    background: green;
    font-size: 0; }
    .connectionIndicator span:first-child {
      margin-left: 0; }
  .connectionIndicator:hover span {
    font-size: 14px;
    height: 20px; }
  .connectionIndicator.fail span {
    background: transparent !important; }
    .connectionIndicator.fail span:first-child {
      background: red !important; }
  .connectionIndicator.red span {
    background: red; }
    .connectionIndicator.red span:nth-last-child(-n+3) {
      background: transparent; }
  .connectionIndicator.orange span {
    background: orange; }
    .connectionIndicator.orange span:nth-last-child(-n+2) {
      background: transparent; }
  .connectionIndicator.yellow span {
    background: yellow; }
    .connectionIndicator.yellow span:last-child:nth-last-child(-n+1) {
      background: transparent; }
  .connectionIndicator.green span {
    background: limegreen; }

.invisible > * {
  visibility: hidden; }

.icon-with-text {
  height: calc(var(--header-height) / 2);
  width: calc(var(--header-height) / 2); }
  .icon-with-text.small {
    height: 30px;
    width: 30px;
    vertical-align: bottom; }
    .user-mobile-menu .icon-with-text.small {
      vertical-align: text-bottom; }

img.icon-with-text {
  border-radius: 50%; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

h2 {
  font-size: 2.5em;
  color: #8336f7; }
  @media all and (max-width: 640px) {
    h2 {
      line-height: 1.2;
      font-size: 1.9em; } }

h3 {
  font-size: 1.5em;
  color: #8336f7; }

a.with-button {
  text-decoration: none !important; }

#content {
  padding: 0; }
  @media all and (max-width: 1024px) {
    #content {
      padding: calc(var(--padding) / 2) 0 calc(var(--padding) * 3); } }
  @media all and (max-width: 640px) {
    #content {
      padding-bottom: var(--padding); } }
  #content > *:not(.full-width) {
    max-width: var(--page-width);
    margin: 0 auto; }
    @media all and (max-width: 1360px) {
      #content > *:not(.full-width) {
        padding-left: var(--padding);
        padding-right: var(--padding); } }
    @media all and (max-width: 640px) {
      #content > *:not(.full-width) {
        padding-left: calc(var(--padding) * .5);
        padding-right: calc(var(--padding) * .5); } }
  #content > *:not(:last-child) {
    margin-bottom: calc(var(--padding) * 1.5); }
    @media all and (max-width: 640px) {
      #content > *:not(:last-child) {
        margin-bottom: var(--padding); } }

.so-panel {
  padding: 0; }
  .so-panel > *:not(:last-child) {
    margin-bottom: calc(var(--padding) * 1.5); }

.widget_dealz_widget .dealz-widget-container > *:not(:last-child) {
  margin-bottom: var(--padding); }

.view-more {
  font-weight: 400;
  max-width: var(--page-width);
  margin: 0 auto;
  text-align: center; }
  @media all and (max-width: 1360px) {
    .view-more {
      padding: 0 var(--padding); } }
  @media all and (max-width: 1360px) {
    .account .view-more {
      padding: 0; } }
  #page .view-more {
    text-align: left; }
  .view-more a {
    text-decoration: none;
    color: #8336f7;
    display: inline-block; }
    body.can-hover .view-more a:hover {
      color: #f919a9; }
    body.can-hover .view-more a:hover svg {
      --teint-0: #f919a9;
      --teint-1: #8336f7; }
    .view-more a svg {
      height: 30px;
      width: 30px;
      margin-left: calc(var(--padding) / 2); }
    .view-more a > * {
      display: inline-block;
      vertical-align: middle; }

.cards.empty, .cards.empty + .view-more {
  display: none; }

.cards.maybe-placeholder:not(.won-by-me) a.cta.inactive, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--accent, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--accent-2, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--light, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--special, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--gray, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--main, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--disabled, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--action, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--accept, .cards.maybe-placeholder:not(.won-by-me) a.inactive.cta--cancel {
  display: none; }

.page-block {
  display: grid;
  max-width: var(--page-width);
  margin: 0 auto;
  text-align: center; }
  @media all and (max-width: 640px) {
    .page-block {
      padding: 0; } }

#dealz-slider {
  padding: calc(var(--padding) * 5.5) 0;
  position: relative;
  background: url("../img/leuk_patroontje.png");
  overflow: hidden; }
  @media all and (max-width: 640px) {
    #dealz-slider {
      padding: calc(var(--padding) * 2) 0;
      overflow: visible;
      margin-top: calc(var(--padding) * 2); } }
  #dealz-slider:before, #dealz-slider:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 0; }
  #dealz-slider:before {
    top: -1px;
    background-image: url("../img/arcs/arc-white-top.svg");
    background-position: top center; }
  #dealz-slider:after {
    bottom: -1px;
    background-image: url("../img/arcs/arc-white-bottom.svg");
    background-position: bottom center; }
    @media all and (max-width: 640px) {
      #dealz-slider:after {
        bottom: -2px; } }
  #dealz-slider .slider-item {
    display: none;
    transition: opacity 1s ease-in-out;
    max-width: var(--page-width);
    margin: 0 auto;
    position: relative;
    z-index: 1; }
    @media all and (max-width: 1360px) {
      #dealz-slider .slider-item {
        padding: 0 var(--padding); } }
    @media all and (max-width: 640px) {
      #dealz-slider .slider-item {
        padding: 0 calc(var(--padding) * .5); }
        #dealz-slider .slider-item h2 {
          font-size: 1.9em; } }
    #dealz-slider .slider-item.active {
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "prev header next" "prev body next";
      display: grid; }
      @media all and (max-width: 640px) {
        #dealz-slider .slider-item.active {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas: "prev next" "header header" "body body";
          grid-gap: calc(var(--padding) / 2); } }
    #dealz-slider .slider-item, #dealz-slider .slider-item * {
      color: white; }
    #dealz-slider .slider-item header {
      text-align: center;
      grid-area: header; }
      #dealz-slider .slider-item header svg {
        filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
        position: absolute;
        top: -134px;
        width: auto;
        height: 134px;
        left: 50%;
        transform: translateX(-50%); }
        @media all and (max-width: 1024px) {
          #dealz-slider .slider-item header svg {
            top: -158px; } }
        @media all and (max-width: 640px) {
          #dealz-slider .slider-item header svg {
            top: -90px; } }
        #dealz-slider .slider-item header svg.teal {
          top: -140px; }
          @media all and (max-width: 1024px) {
            #dealz-slider .slider-item header svg.teal {
              top: -165px; } }
          @media all and (max-width: 640px) {
            #dealz-slider .slider-item header svg.teal {
              top: -96px; } }
    #dealz-slider .slider-item a.previous-slider-item {
      grid-area: prev; }
      @media all and (max-width: 640px) {
        #dealz-slider .slider-item a.previous-slider-item {
          justify-self: start; } }
    #dealz-slider .slider-item a.next-slider-item {
      grid-area: next; }
      @media all and (max-width: 640px) {
        #dealz-slider .slider-item a.next-slider-item {
          justify-self: end; } }
    #dealz-slider .slider-item a {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-item-align: center;
          align-self: center;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center;
      justify-items: center;
      text-decoration: none; }
      @media all and (max-width: 640px) {
        #dealz-slider .slider-item a {
          position: relative;
          z-index: 10; }
          #dealz-slider .slider-item a span {
            display: none; } }
      body.can-hover #dealz-slider .slider-item a:hover svg {
        --fill: #fcb0d8;
        --teint-0: #fcb0d8;
        --teint-1: #f919a9; }
      #dealz-slider .slider-item a svg {
        margin-bottom: 1em;
        --teint-0: rgba(255, 255, 255, 0.6);
        --teint-1: rgba(255, 255, 255, 0.6);
        --fill: transparent; }
        @media all and (max-width: 640px) {
          #dealz-slider .slider-item a svg {
            margin-bottom: 0; } }
    #dealz-slider .slider-item p {
      grid-area: body;
      text-align: center; }

#explanation {
  display: grid;
  max-width: 1170px !important;
  grid-template-rows: repeat(2, auto);
  margin: 0 auto;
  text-align: center; }
  @media all and (max-width: 1360px) {
    #explanation {
      padding: 0 var(--padding); } }
  #explanation ul {
    margin-top: var(--padding);
    display: grid;
    grid-gap: calc(var(--padding) * 1.5);
    grid-template-columns: repeat(3, 1fr); }
    @media all and (max-width: 768px) {
      #explanation ul {
        grid-template-columns: 1fr; } }
  #explanation li {
    padding: calc(var(--padding) * 2) var(--padding);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border-radius: 5px; }
    @media all and (max-width: 640px) {
      #explanation li {
        padding: var(--padding);
        max-width: 85%;
        margin: 0 auto; } }
    #explanation li svg {
      max-width: 100%; }
      @media all and (max-width: 640px) {
        #explanation li svg {
          max-width: initial;
          max-height: 100px;
          width: 100%; } }
    #explanation li p {
      margin-top: calc(var(--padding) / 2);
      line-height: 1.4; }
  #explanation a {
    color: #8336f7;
    text-decoration: none; }
    body.can-hover #explanation a:hover {
      text-decoration: underline; }

.account {
  display: grid;
  max-width: var(--page-width);
  margin: 0 auto;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "sidebar content";
  grid-gap: var(--padding); }
  @media all and (max-width: 1360px) {
    .account {
      padding: 0 var(--padding); } }
  @media all and (max-width: 768px) {
    .account {
      grid-template-columns: 100%;
      grid-template-rows: repeat(2, auto);
      grid-template-areas: "content" "sidebar"; } }
  .account h1 {
    color: #f919a9;
    font-size: 1.75em; }

#page > *:not(:last-child) {
  margin-bottom: calc(var(--padding) * 1.5); }
  .account-page #page > *:not(:last-child) {
    margin-bottom: calc(var(--padding) * 1); }
  @media all and (max-width: 640px) {
    #page > *:not(:last-child) {
      margin-bottom: var(--padding); } }

.account-page #page {
  grid-area: content; }

body.checkout #page > header {
  display: none; }

.pay-card, .addressbook {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "header photo" "address photo" "options info" "costs cta";
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative; }
  .pay-card.addressbook, .addressbook.addressbook {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "address" "options";
    box-shadow: none; }
  .pay-card a:not(.cta--accent), .addressbook a:not(.cta--accent) {
    color: #f919a9; }
  .pay-card:after, .addressbook:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 33%;
    background: linear-gradient(to bottom, #8336f7, #9c32dd);
    z-index: -1; }
    @media all and (max-width: 640px) {
      .pay-card:after, .addressbook:after {
        background: none; } }
  .pay-card.addressbook:after, .addressbook.addressbook:after {
    background: none; }
  @media all and (max-width: 640px) {
    .pay-card, .addressbook {
      grid-template-columns: 100%;
      grid-template-rows: repeat(7, auto);
      grid-template-areas: "photo" "info" "header" "address" "options" "costs" "cta"; } }
  .pay-card header, .addressbook header {
    grid-area: header;
    padding: var(--padding) var(--padding) 0; }
    @media all and (max-width: 640px) {
      .pay-card header, .addressbook header {
        padding: var(--padding) calc(var(--padding) * .5) 0; } }
    .pay-card header h2, .addressbook header h2 {
      font-size: 1em; }
  .pay-card .address-selection, .addressbook .address-selection {
    margin-top: var(--padding); }
    .pay-card .address-selection dl, .addressbook .address-selection dl {
      padding: calc(var(--padding) / 2);
      border: 2px solid #999999;
      transition: all .2s ease-in-out;
      border-radius: 5px; }
    .pay-card .address-selection li, .addressbook .address-selection li {
      position: relative;
      cursor: pointer;
      margin: 0 var(--padding); }
      @media all and (max-width: 640px) {
        .pay-card .address-selection li, .addressbook .address-selection li {
          margin: 0 calc(var(--padding) / 2); }
          .pay-card .address-selection li dl, .addressbook .address-selection li dl {
            padding-bottom: calc(var(--padding) * 2); } }
      .pay-card .address-selection li:not(:last-child), .addressbook .address-selection li:not(:last-child) {
        margin-bottom: calc(var(--padding) / 2); }
      .pay-card .address-selection li .cta--accent, .addressbook .address-selection li .cta--accent {
        position: absolute;
        right: calc(var(--padding) / 2);
        bottom: calc(var(--padding) / 2);
        padding: 5px var(--padding); }
      .pay-card .address-selection li.selected dl, .addressbook .address-selection li.selected dl {
        border: 2px solid #8336f7; }
      .pay-card .address-selection li.selected .is-selected, .addressbook .address-selection li.selected .is-selected {
        position: absolute;
        right: calc(var(--padding) / 2);
        bottom: calc(var(--padding) / 2);
        line-height: 20px;
        font-weight: 500; }
        .pay-card .address-selection li.selected .is-selected svg, .addressbook .address-selection li.selected .is-selected svg {
          width: 20px;
          height: 20px;
          display: inline-block;
          vertical-align: bottom;
          --teint-0: #4800c3;
          --teint-1: #84ecef;
          --teint-2: #4800c3; }
      body.can-hover .pay-card .address-selection li:hover dl, body.can-hover .addressbook .address-selection li:hover dl {
        border: 2px solid #4800c3; }
  .pay-card .cta--accent, .addressbook .cta--accent {
    padding: calc(var(--padding) / 3) var(--padding);
    display: inline-block; }
  .pay-card .addresses, .pay-card .address-selection, .addressbook .addresses, .addressbook .address-selection {
    grid-area: address; }
  .pay-card .address, .addressbook .address {
    grid-area: address;
    display: grid;
    grid-template-columns: 1fr 4fr;
    padding: var(--padding) var(--padding) 0;
    grid-gap: calc(var(--padding) / 2); }
    @media all and (max-width: 640px) {
      .pay-card .address, .addressbook .address {
        padding: var(--padding) calc(var(--padding) * .5) 0;
        grid-template-columns: 1.3fr 4fr; } }
    .pay-card .address dt, .addressbook .address dt {
      font-weight: 700; }
    .pay-card .address label, .addressbook .address label {
      color: #8336f7;
      font-weight: 400; }
    .pay-card .address em, .addressbook .address em {
      font-size: .8em;
      color: #8336f7; }
    .pay-card .address input:not([type=checkbox]):not([type=radio]), .pay-card .address button, .addressbook .address input:not([type=checkbox]):not([type=radio]), .addressbook .address button {
      border-color: #8336f7; }
      .pay-card .address input:not([type=checkbox]):not([type=radio]).immutable, .pay-card .address button.immutable, .addressbook .address input:not([type=checkbox]):not([type=radio]).immutable, .addressbook .address button.immutable {
        border-color: transparent;
        display: none; }
    .pay-card .address .shadow, .addressbook .address .shadow {
      display: none; }
    .pay-card .address .immutable + .shadow, .addressbook .address .immutable + .shadow {
      display: inline;
      width: auto; }
    .pay-card .address .address-grid, .addressbook .address .address-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: calc(var(--padding) / 2);
      position: relative; }
      .pay-card .address .address-grid #loader, .addressbook .address .address-grid #loader {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.8);
        display: none; }
        .pay-card .address .address-grid #loader > *, .addressbook .address .address-grid #loader > * {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .pay-card .address .address-grid .street, .addressbook .address .address-grid .street {
        grid-column: span 2; }
      .pay-card .address .address-grid .city, .addressbook .address .address-grid .city {
        grid-column: span 2; }
      .pay-card .address .address-grid .country, .addressbook .address .address-grid .country {
        grid-column: 1; }
  .pay-card .options, .addressbook .options {
    grid-area: options;
    display: -ms-flexbox;
    display: flex;
    padding: var(--padding);
    -ms-flex-item-align: center;
        align-self: center; }
    @media all and (max-width: 640px) {
      .pay-card .options, .addressbook .options {
        -ms-flex-direction: column;
            flex-direction: column;
        padding: var(--padding) calc(var(--padding) * .5); } }
    .pay-card .options li:not(:last-child), .addressbook .options li:not(:last-child) {
      margin-right: var(--padding); }
      @media all and (max-width: 640px) {
        .pay-card .options li:not(:last-child), .addressbook .options li:not(:last-child) {
          margin-right: 0;
          margin-bottom: calc(var(--padding) / 3); } }
  .pay-card .costs, .addressbook .costs {
    grid-area: costs;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "deal-title shipping-title administration-title total-title" "deal-cost shipping-cost administration-cost total-cost";
    padding: 0 var(--padding) var(--padding); }
    @media all and (max-width: 1024px) {
      .pay-card .costs, .addressbook .costs {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(4, auto);
        grid-template-areas: "deal-title deal-cost" "shipping-title shipping-cost" "administration-title administration-cost" "total-title total-cost"; } }
    @media all and (max-width: 640px) {
      .pay-card .costs, .addressbook .costs {
        padding: 0 calc(var(--padding) * .5) var(--padding); } }
    .pay-card .costs .deal-title, .addressbook .costs .deal-title {
      grid-area: deal-title; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .deal-title, .addressbook .costs .deal-title {
          -ms-flex-item-align: center;
              align-self: center; } }
    .pay-card .costs .shipping-title, .addressbook .costs .shipping-title {
      grid-area: shipping-title; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .shipping-title, .addressbook .costs .shipping-title {
          -ms-flex-item-align: center;
              align-self: center; } }
    .pay-card .costs .administration-title, .addressbook .costs .administration-title {
      grid-area: administration-title; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .administration-title, .addressbook .costs .administration-title {
          -ms-flex-item-align: center;
              align-self: center; } }
    .pay-card .costs .total-title, .addressbook .costs .total-title {
      grid-area: total-title;
      justify-self: end; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .total-title, .addressbook .costs .total-title {
          -ms-flex-item-align: center;
              align-self: center;
          justify-self: start; } }
    .pay-card .costs .deal-cost, .addressbook .costs .deal-cost {
      grid-area: deal-cost; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .deal-cost, .addressbook .costs .deal-cost {
          justify-self: end; } }
    .pay-card .costs .shipping-cost, .addressbook .costs .shipping-cost {
      grid-area: shipping-cost; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .shipping-cost, .addressbook .costs .shipping-cost {
          justify-self: end; } }
    .pay-card .costs .administration-cost, .addressbook .costs .administration-cost {
      grid-area: administration-cost; }
      @media all and (max-width: 1024px) {
        .pay-card .costs .administration-cost, .addressbook .costs .administration-cost {
          justify-self: end; } }
    .pay-card .costs .total-cost, .addressbook .costs .total-cost {
      grid-area: total-cost;
      justify-self: end; }
    .pay-card .costs dt, .addressbook .costs dt {
      font-size: .65em;
      text-transform: uppercase;
      color: #8336f7; }
    .pay-card .costs dd, .addressbook .costs dd {
      font-size: 1.4em; }
  .pay-card img, .addressbook img {
    grid-area: photo;
    max-width: 100%;
    height: auto;
    max-height: 201px;
    background: white;
    -o-object-fit: cover;
       object-fit: cover; }
    @supports (position: -webkit-sticky) {
      .pay-card img, .addressbook img {
        height: auto; } }
  .pay-card .info, .addressbook .info {
    grid-area: info;
    padding: var(--padding);
    color: white; }
    @media all and (max-width: 640px) {
      .pay-card .info, .addressbook .info {
        background: linear-gradient(to bottom, #8336f7, #9c32dd); } }
    .pay-card .info strong, .addressbook .info strong {
      display: block; }
  @media all and (max-width: 640px) {
    .pay-card.addressbook .info, .addressbook.addressbook .info {
      background: none; } }
  .pay-card .pay-now, .addressbook .pay-now {
    grid-area: cta;
    padding: 0 var(--padding) var(--padding);
    display: -ms-flexbox;
    display: flex; }
    @media all and (max-width: 640px) {
      .pay-card .pay-now, .addressbook .pay-now {
        padding: var(--padding);
        background: linear-gradient(to bottom, #8336f7, #9c32dd);
        -ms-flex-pack: center;
            justify-content: center; } }
    .pay-card .pay-now a, .pay-card .pay-now button, .addressbook .pay-now a, .addressbook .pay-now button {
      display: block;
      padding: calc(var(--padding) / 3) calc(var(--padding) * .75);
      -ms-flex-item-align: end;
          align-self: flex-end;
      width: 100%;
      text-align: center;
      background: white;
      border-radius: var(--padding);
      text-decoration: none;
      color: #f919a9;
      font-weight: 700;
      transition: all .25s ease-in-out; }
      body.can-hover .pay-card .pay-now a:hover, body.can-hover .pay-card .pay-now button:hover, body.can-hover .addressbook .pay-now a:hover, body.can-hover .addressbook .pay-now button:hover {
        background: #84ecef;
        color: #2b0069; }
  .pay-card.addressbook header, .pay-card.addressbook .addresses dl.address, .pay-card.addressbook .options, .addressbook.addressbook header, .addressbook.addressbook .addresses dl.address, .addressbook.addressbook .options {
    padding-left: 0;
    padding-right: 0; }
  .pay-card.addressbook .address-selection li, .addressbook.addressbook .address-selection li {
    margin-left: 0;
    margin-right: 0; }

#deal-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--padding);
  max-width: var(--page-width);
  margin: calc(var(--padding) * 6) auto calc(var(--padding) * 3); }
  @media all and (max-width: 1500px) {
    #deal-details {
      margin-top: calc(var(--padding) * 4); } }
  @media all and (max-width: 1024px) {
    #deal-details {
      margin-top: calc(var(--padding) * 2); } }
  @media all and (max-width: 768px) {
    #deal-details {
      grid-template-columns: 1fr; } }
  @media all and (max-width: 640px) {
    #deal-details {
      padding: 0;
      margin-bottom: var(--padding); } }
  #deal-details header {
    margin-bottom: var(--padding); }
    #deal-details header h2 {
      font-size: 1.1em; }
  #deal-details dt {
    color: #8336f7; }
    #deal-details dt:not(:first-child) {
      margin-top: var(--padding); }

section.page article > * {
  margin-bottom: var(--padding); }
  section.page article > *:last-child {
    margin-bottom: 0; }

section.page ol {
  list-style: decimal; }

section.page ul {
  list-style: initial; }

section.page ol, section.page ul {
  list-style-position: inside; }

section.page ol ol, section.page ol ul, section.page ul ol, section.page ul ul {
  margin-left: var(--padding);
  font-size: .95em; }

section.page a {
  color: #8336f7; }
  body.can-hover section.page a:hover {
    color: #f919a9; }

section.page dt {
  margin-top: calc(var(--padding) / 2);
  font-weight: bold; }
  section.page dt:first-child {
    margin-top: 0; }

section.page mark {
  background-color: rgba(131, 54, 247, 0.2); }

section.page h1 {
  font-size: 3em;
  line-height: 1.2; }
  @media all and (max-width: 640px) {
    section.page h1 {
      font-size: 2.1em; } }

section.page h2 {
  font-size: 2.5em;
  line-height: 1.2;
  color: #8336f7; }
  @media all and (max-width: 640px) {
    section.page h2 {
      font-size: 1.9em; } }

section.page h3 {
  font-size: 1.5em;
  color: #8336f7; }

section.page h4 {
  font-size: 1.3em;
  color: #f919a9; }

section.page h5 {
  font-size: 1.1em;
  color: #8336f7; }

section.page h6 {
  font-size: 1em;
  color: #8336f7; }

.panel-grid-cell > *:not(:last-child) {
  margin-bottom: var(--padding); }

.buy-coinz {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  @media all and (max-width: 640px) {
    .buy-coinz {
      width: 100%; } }
  .buy-coinz li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: calc(var(--padding) / 4); }
    .buy-coinz li > * {
      -ms-flex: 1;
          flex: 1; }
    .buy-coinz li:nth-child(odd) {
      background: #f6f6f6; }
      .modal .buy-coinz li:nth-child(odd) {
        background: rgba(0, 0, 0, 0.1); }
  .buy-coinz .amount {
    white-space: nowrap; }
  .buy-coinz a {
    display: inline-block;
    color: #8336f7;
    text-decoration: none; }
    body.can-hover .buy-coinz a:hover {
      text-decoration: underline; }
  .modal .buy-coinz a.cta--main {
    color: #8336f7;
    background: #84ecef; }
  body.can-hover .modal .buy-coinz a.cta--main:hover {
    background: #8336f7;
    color: #84ecef; }

.page-block p a {
  color: #8336f7;
  text-decoration: none; }
  body.can-hover .page-block p a:hover {
    text-decoration: underline; }

.my-coinz {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }
  .my-coinz .smiley-wrapper {
    margin-right: calc(var(--padding) / 3);
    color: #8336f7; }

.page-error, .page-success {
  padding: var(--padding);
  border: 2px solid; }
  .page-error h2, .page-success h2 {
    font-size: 1em;
    margin-bottom: calc(var(--padding) / 2); }
  .page-error a, .page-success a {
    color: #8336f7; }

.page-error {
  background: #ffe5e9;
  border-color: red; }
  .page-error h2 {
    color: red; }

.page-success {
  background: #e5fcec;
  border-color: #147900; }
  .page-success h2 {
    color: #147900; }

@keyframes lds-spinner {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.lds-spinner {
  position: relative; }

.lds-spinner div {
  left: 94px;
  top: 48px;
  position: absolute;
  animation: lds-spinner linear 1s infinite;
  background: #8336f7;
  width: 12px;
  height: 24px;
  border-radius: 40%;
  transform-origin: 6px 52px; }

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.916666666666667s; }

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.833333333333333s; }

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s; }

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.666666666666667s; }

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.583333333333333s; }

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s; }

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.416666666666667s; }

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.333333333333333s; }

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s; }

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.166666666666667s; }

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.083333333333333s; }

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s; }

.lds-spinner {
  width: 200px !important;
  height: 200px !important;
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px); }

.hidden {
  display: none !important; }

.teaser {
  background: #f919a9 url(../img/leuk_patroontje.png) center;
  color: white;
  text-align: center;
  position: relative;
  padding: var(--padding);
  font-size: 1.3em;
  font-weight: 500; }
  @media all and (max-width: 640px) {
    .teaser {
      padding: calc(var(--padding) / 2) calc(var(--padding) * 1.35) calc(var(--padding) / 2) calc(var(--padding) * 0.9);
      font-size: 1em; } }
  .teaser em {
    white-space: nowrap;
    font-style: normal;
    position: relative; }
    .teaser em:before, .teaser em:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 1px solid currentColor;
      width: 100%; }
    .teaser em:after {
      bottom: -4px; }
  @media all and (min-width: 640px) {
    .teaser .text {
      margin-right: var(--padding); } }
  .teaser a {
    color: #51111e; }
    @media all and (min-width: 640px) {
      .teaser a {
        font-size: 0.75em; } }
    @media all and (max-width: 640px) {
      .teaser a {
        display: block; } }
  .teaser .dismiss {
    position: absolute;
    right: calc(var(--padding) / 3);
    top: calc(var(--padding) / 3);
    color: white; }

.so-panel:empty {
  display: none; }

#sidebar {
  grid-area: sidebar; }

#account-menu {
  background: #8336f7;
  padding: var(--padding); }
  #account-menu a {
    color: white;
    text-decoration: none; }
    body.can-hover #account-menu a:hover {
      text-decoration: underline; }
  #account-menu .logout {
    font-weight: 400;
    color: #84ecef !important;
    margin-top: calc(var(--padding) / 2);
    display: inline-block; }
  #account-menu .current_page_item a {
    color: white;
    font-weight: 700; }

#colophon {
  display: grid;
  max-width: var(--page-width);
  margin: calc(var(--padding) * 2) auto 0;
  padding: calc(var(--padding) * 2) 0 calc(var(--padding) * 2);
  position: relative;
  color: white;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "nav copyright" "assurance assurance" "form logo";
  grid-row-gap: var(--padding); }
  @media all and (max-width: 1360px) {
    #colophon {
      padding-left: var(--padding);
      padding-right: var(--padding); } }
  @media all and (max-width: 640px) {
    #colophon {
      padding: var(--padding) calc(var(--padding) * .5);
      grid-template-columns: 100%;
      grid-template-rows: repeat(5, auto);
      grid-template-areas: "assurance" "form" "nav" "copyright" "logo"; } }
  #colophon:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    background: #4800c3;
    transform: translateX(-50%);
    z-index: -1; }
  #colophon dt, #colophon h2 {
    font-weight: 700;
    margin-bottom: calc(var(--padding) / 6); }
    @media all and (max-width: 640px) {
      #colophon dt, #colophon h2 {
        line-height: 1.4; } }
  @media all and (max-width: 640px) {
    #colophon dt {
      margin-bottom: var(--padding); } }
  #colophon dd,
  #colophon p {
    font-size: 0.9em; }
  #colophon h2 {
    color: white;
    font-size: 1em; }
  #colophon form {
    display: -ms-flexbox;
    display: flex;
    margin-top: var(--padding); }
    @media all and (max-width: 640px) {
      #colophon form {
        width: 100%; } }
    #colophon form input, #colophon form button {
      border: 0;
      font-size: 1em;
      display: inline-block;
      vertical-align: middle; }
    #colophon form input {
      width: 100%;
      padding: calc(var(--padding) / 2) var(--padding);
      outline: 0;
      border-radius: 3px 0 0 3px; }
      @media all and (max-width: 640px) {
        #colophon form input {
          padding: calc(var(--padding) / 2) calc(var(--padding) / 2); } }
    #colophon form button {
      padding: calc(var(--padding) / 2) calc(var(--padding) * 1.5);
      border-radius: 0 3px 3px 0;
      background: #84ecef;
      width: auto;
      font-weight: 700;
      transition: .15s ease-in-out; }
      body.can-hover #colophon form button:hover {
        background: #75c1e3;
        color: white; }
      @media all and (max-width: 640px) {
        #colophon form button {
          padding: calc(var(--padding) / 4) calc(var(--padding) * .75); }
          #colophon form button span {
            display: none; } }
    #colophon form p {
      width: 100%; }
    #colophon form .wpcf7-form-control-wrap {
      display: inline-block;
      position: relative; }
    #colophon form br {
      display: none; }
    #colophon form span.wpcf7-not-valid-tip {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: .7em;
      color: white;
      background: red;
      border-radius: 3px;
      padding: 0 8px;
      pointer-events: none; }
    #colophon form .wpcf7-response-output {
      margin: 0;
      padding: 0;
      border: 0; }
      #colophon form .wpcf7-response-output.wpcf7-validation-errors {
        color: red; }
      #colophon form .wpcf7-response-output.wpcf7-mail-sent-ok {
        color: #84ecef; }
    #colophon form svg {
      display: none;
      width: 46px;
      height: 40px; }
      @media all and (max-width: 640px) {
        #colophon form svg {
          display: block; } }

#footer-menu {
  grid-area: nav; }
  #footer-menu ul {
    display: -ms-flexbox;
    display: flex; }
    @media all and (max-width: 640px) {
      #footer-menu ul {
        -ms-flex-direction: column;
            flex-direction: column; } }
    #footer-menu ul a {
      color: white;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      font-size: .8em;
      transition: all .25s ease-in-out; }
      body.can-hover #footer-menu ul a:hover {
        color: #84ecef;
        border-color: #84ecef; }
    #footer-menu ul li:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.5);
      margin-right: calc(var(--padding) / 2);
      padding-right: calc(var(--padding) / 2); }
      @media all and (max-width: 640px) {
        #footer-menu ul li:not(:last-child) {
          margin-right: 0;
          padding-right: 0;
          border-right: 0; } }

#assurances {
  grid-area: assurance; }
  #assurances dd {
    display: inline-block;
    vertical-align: middle; }
    #assurances dd:not(:last-child) {
      margin-right: calc(var(--padding) * 1.5); }
      @media all and (max-width: 1024px) {
        #assurances dd:not(:last-child) {
          margin-bottom: calc(var(--padding) / 2); } }
    @media all and (max-width: 1024px) {
      #assurances dd {
        display: block;
        margin-right: 0; } }
  #assurances svg {
    width: var(--padding);
    height: var(--padding);
    vertical-align: middle;
    margin-right: calc(var(--padding) / 5); }

#newsletter {
  grid-area: form; }
  #newsletter form {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, auto);
    grid-template-areas: "input button" "feedback feedback";
    max-width: 50%; }
    @media all and (max-width: 1024px) {
      #newsletter form {
        max-width: 75%; } }
    @media all and (max-width: 640px) {
      #newsletter form {
        max-width: 100%; } }
    #newsletter form .wpcf7-form-control-wrap {
      grid-area: input; }
    #newsletter form button {
      grid-area: button; }
      #newsletter form button svg {
        display: none;
        height: calc(54px - ((var(--padding) / 4) * 2)); }
        @media all and (max-width: 640px) {
          #newsletter form button svg {
            display: block; } }
      @media all and (max-width: 640px) {
        #newsletter form button span {
          display: none; } }
    #newsletter form .errors {
      grid-area: feedback; }

#copyright {
  grid-area: copyright;
  justify-self: end;
  -ms-flex-item-align: center;
      align-self: center;
  font-size: .8em; }
  @media all and (max-width: 640px) {
    #copyright {
      justify-self: start; } }

#footer-logo {
  grid-area: logo;
  -ms-flex-item-align: end;
      align-self: end;
  justify-self: end;
  max-height: 80px; }
  @media all and (max-width: 640px) {
    #footer-logo {
      -ms-flex-item-align: start;
          align-self: start;
      justify-self: start; } }

.close-icon, .modal .content .close {
  color: white;
  border: 2px solid;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  display: block;
  margin-bottom: 0;
  cursor: pointer; }
  .close-icon:before, .modal .content .close:before, .close-icon:after, .modal .content .close:after {
    content: '';
    width: 55%;
    height: 2px;
    background: currentColor;
    display: block;
    top: 50%;
    left: 50%;
    position: absolute; }
  .close-icon:before, .modal .content .close:before {
    transform: translate(-50%, -50%) rotate(45deg); }
  .close-icon:after, .modal .content .close:after {
    transform: translate(-50%, -50%) rotate(-45deg); }
  body.can-hover .close-icon:hover, body.can-hover .modal .content .close:hover, .modal .content body.can-hover .close:hover {
    opacity: .8; }

.modal {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  opacity: 0;
  z-index: -100;
  transition: opacity 0.25s cubic-bezier(0.57, 0.48, 0.37, 0.98);
  color: #d5c5fc;
  pointer-events: none; }
  @media all and (max-width: 640px) {
    .modal {
      overflow: auto;
      overflow-y: scroll;
      font-weight: 500;
      -webkit-overflow-scrolling: touch; } }
  .modal .errors {
    color: white;
    font-weight: 400;
    font-size: .8em;
    background: rgba(255, 255, 255, 0.2);
    padding: calc(var(--padding) / 2); }
  .modal input[type=password]:not([type=checkbox]):not([type=radio]) {
    display: none; }
  .modal.open {
    z-index: 100;
    opacity: 1;
    pointer-events: initial; }
    .modal.open .content {
      transform: translateY(0);
      opacity: 1; }
    .modal.open input[type=password]:not([type=checkbox]):not([type=radio]) {
      display: initial; }
  .modal.closed .content {
    transform: translateY(150%);
    opacity: 0; }
  .modal .content {
    -ms-flex-item-align: center;
        align-self: center;
    justify-self: center;
    background: linear-gradient(to bottom, #bd2cbb, #8336f7);
    padding: calc(var(--padding) * 2) calc(var(--padding) * 4); }
    @media all and (max-width: 640px) {
      .modal .content {
        height: 100%;
        padding: calc(var(--padding) * 2) calc(var(--padding) / 2) var(--padding); } }
  .modal.ical .content, .modal.ical-promo .content {
    padding: calc(var(--padding) * 2); }
    @media all and (max-width: 640px) {
      .modal.ical .content, .modal.ical-promo .content {
        padding: calc(var(--padding) * 2) calc(var(--padding) / 2) var(--padding); } }
  .modal.ical .i-am-in, .modal.ical-promo .i-am-in {
    display: inline-block; }
  .modal.coinz .content {
    padding: calc(var(--padding) * 2) calc(var(--padding) * 3); }
    @media all and (max-width: 640px) {
      .modal.coinz .content {
        padding: calc(var(--padding) / 2); } }
  .modal .content {
    max-width: 600px;
    width: 100%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.57, 0.48, 0.37, 0.98) 0.25s; }
    .modal .content > *:not(:last-child) {
      margin-bottom: calc(var(--padding) * .5); }
    .modal .content h2 {
      color: white;
      font-size: 1.5em;
      text-align: center;
      margin-bottom: calc(var(--padding) * 1.5) !important; }
      @media all and (max-width: 640px) {
        .modal .content h2 {
          text-align: left;
          margin-bottom: calc(var(--padding) / 2) !important; } }
    .modal .content a {
      transition: color .25s ease-in-out; }
      .modal .content a:not(.cta--dark) {
        color: white; }
        body.can-hover .modal .content a:not(.cta--dark):hover {
          color: #84ecef; }
    .modal .content p {
      font-size: .8em; }
    .modal .content .username {
      position: absolute;
      line-height: 35px;
      left: 15px;
      top: 15px;
      margin-bottom: 0; }
    .modal .content .close {
      position: absolute;
      top: 15px;
      right: 15px; }
    .modal .content form {
      margin-bottom: calc(var(--padding) * 1.5) !important; }
      .modal .content form > *:not(:last-child) {
        margin-bottom: calc(var(--padding) * .5); }
      .modal .content form input {
        padding: calc(var(--padding) * .75) calc(var(--padding) * .75) calc(var(--padding) * .25); }
        @media all and (max-width: 640px) {
          .modal .content form input {
            padding: calc(var(--padding) * .75) calc(var(--padding) / 2) calc(var(--padding) * .25); } }
      .modal .content form input[type=checkbox]:checked + label:after,
      .modal .content form input[type=radio]:checked + label:after {
        background: #d5c5fc; }
    .modal .content .form-item {
      position: relative; }
      .modal .content .form-item.focused label {
        top: 4px;
        font-size: .6em;
        transform: translateY(0); }
      .modal .content .form-item label {
        position: absolute;
        top: 50%;
        left: calc(var(--padding) * .75);
        transform: translateY(-50%);
        color: #999999;
        font-weight: 300;
        font-family: 'Roboto', sans-serif;
        z-index: 1;
        transition: all .25s ease-in-out; }
        @media all and (max-width: 640px) {
          .modal .content .form-item label {
            left: calc(var(--padding) / 2); } }
      .modal .content .form-item input[type=checkbox] + label {
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0);
        display: block;
        color: #f6f6f6; }
        .modal .content .form-item input[type=checkbox] + label:before, .modal .content .form-item input[type=checkbox] + label:after {
          top: 25%; }
      .modal .content .form-item input.error + label {
        color: #ffaa00; }
    .modal .content .form-optional-options {
      font-size: 0.8em;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      -ms-flex-align: center;
          align-items: center; }
      @media all and (max-width: 350px) {
        .modal .content .form-optional-options {
          grid-template-columns: 100%;
          grid-gap: calc(var(--padding) / 2); } }
      .modal .content .form-optional-options a {
        justify-self: end; }
        @media all and (max-width: 640px) {
          .modal .content .form-optional-options a {
            justify-self: start; } }
  .modal.share .content a.social {
    margin: 0;
    margin-bottom: 20px;
    padding: 10px 20px;
    display: block;
    color: #8336f7;
    line-height: 1.3em; }
    .modal.share .content a.social svg {
      height: 1.3em;
      width: 1.3em;
      vertical-align: top; }
      .modal.share .content a.social svg.twitter {
        --teint-0: #55acee; }
      .modal.share .content a.social svg.facebook {
        --teint-0: #3b5998; }
    body.can-hover .modal.share .content a.social:hover {
      color: #8336f7; }
    .modal.share .content a.social:hover svg {
      --teint-0: #8336f7; }
  .modal .loader {
    display: none; }
  .modal.submitting .content:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    background: #000; }
  .modal.submitting .loader {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .modal.submitting .loader svg {
      animation: linear infinite 2s rotate; }

.fieldProfileWrapper {
  position: relative;
  z-index: auto;
  display: block; }

.fieldProfile {
  display: block;
  position: absolute;
  left: 50%;
  top: calc( 100% - 6px);
  width: 100%;
  max-width: 90vw;
  border: 1px solid red;
  background: #fff;
  border-radius: 2px;
  padding: calc(var(--padding) / 2);
  transform: translate(-50%, 15px);
  font-size: 1rem;
  z-index: 10; }
  .fieldProfile:before {
    content: '';
    border: 16px solid rgba(0, 0, 0, 0);
    border-bottom-color: red;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%); }
  .fieldProfile:after {
    content: '';
    border: 15px solid rgba(0, 0, 0, 0);
    border-bottom-color: white;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%); }
  .fieldProfile li {
    color: black; }
    .fieldProfile li.rule {
      color: darkgreen; }
    .fieldProfile li.error {
      border: 0;
      padding: 0;
      color: red; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.anonymous .if-logged-in {
  display: none !important; }

.logged-in .if-not-logged-in {
  display: none !important; }

body.can-hover .logged-in .with-dropdown li:hover a {
  text-decoration: none !important; }

.with-dropdown {
  display: -ms-flexbox;
  display: flex; }
  .with-dropdown li {
    position: relative;
    z-index: 1; }
    body.can-hover .with-dropdown li:hover .profile {
      color: white !important; }
    body.can-hover .with-dropdown li:hover ul {
      transform: translateY(0);
      opacity: 1;
      pointer-events: initial; }
    .with-dropdown li a {
      color: white;
      text-decoration: none;
      transition: all .25s ease-in-out;
      display: block; }
      body.can-hover .with-dropdown li a:hover {
        color: #84ecef; }
    .with-dropdown li .my-coinz {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      font-size: .8em;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }
      .with-dropdown li .my-coinz > *:not(:last-child) {
        margin-left: calc(var(--padding) / 3); }
      .with-dropdown li .my-coinz a {
        font-size: 1em !important;
        text-decoration: underline !important; }
    .with-dropdown li hr {
      margin: var(--padding) 0;
      border: 0;
      height: 1px;
      width: 100%;
      display: block;
      background: white; }
    .with-dropdown li ul {
      background: #8336f7;
      z-index: 1000;
      position: absolute;
      right: calc(var(--padding) * -.5);
      top: calc(var(--padding) * -.5);
      min-width: 100%;
      padding: calc((var(--padding) * .5) + 35px + var(--padding) * .5) calc(var(--padding) - var(--padding) * .5) var(--padding);
      opacity: 0;
      border: 2px solid #d9a0da;
      transform: translateY(-20px);
      transition: all 0.4s cubic-bezier(0, 0.21, 0, 1);
      pointer-events: none;
      width: 300px; }
      .with-dropdown li ul a {
        text-align: right; }
      .with-dropdown li ul li {
        width: 100%;
        white-space: nowrap; }
        .with-dropdown li ul li:not(:last-child) {
          margin-bottom: calc(var(--padding) / 4); }
  .with-dropdown > li {
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(var(--padding) / 2); }
  .with-dropdown .profile {
    height: 35px;
    width: 35px;
    z-index: 1001; }
  .with-dropdown .username {
    margin-right: calc(var(--padding) / 2);
    line-height: 35px;
    z-index: 1001; }

@media all and (max-width: 640px) {
  #user {
    display: none; } }

#user a {
  font-size: .8em; }

body.can-hover #user a:hover {
  text-decoration: none; }

#user.with-dropdown ul li a {
  color: white;
  text-decoration: none;
  font-size: 20px; }
  body.can-hover #user.with-dropdown ul li a:hover {
    color: #84ecef; }

.mobile-modal-menu {
  text-align: right; }
  .mobile-modal-menu a {
    text-decoration: none;
    font-weight: 400;
    font-size: 1.3em; }
  .mobile-modal-menu li:not(:last-child) {
    margin-bottom: calc(var(--padding) / 3); }
  .mobile-modal-menu .smiley-wrapper {
    display: inline-block;
    vertical-align: middle;
    width: var(--padding);
    height: var(--padding);
    border: 2px solid;
    border-radius: 50%;
    position: relative; }
  .mobile-modal-menu svg {
    width: 35px;
    height: 35px; }
    .mobile-modal-menu svg.header-smiley {
      width: calc(var(--padding) / 2);
      height: calc(var(--padding) / 2);
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .mobile-modal-menu .coinz-amount a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: end;
        justify-content: flex-end; }
    .mobile-modal-menu .coinz-amount a > *:not(:last-child) {
      margin-right: 3px; }
    .mobile-modal-menu .coinz-amount a > *:last-child {
      margin-left: calc(var(--padding) / 3); }

input + label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

button {
  cursor: pointer; }

input:not([type=checkbox]):not([type=radio]), button, textarea {
  border: 2px solid transparent;
  border-radius: 5px;
  line-height: 24px;
  padding: calc(var(--padding) / 2) calc(var(--padding) * .75);
  font-size: 1.25rem;
  display: block;
  width: 100%;
  outline: 0;
  -webkit-appearance: none; }
  @media all and (max-width: 640px) {
    input:not([type=checkbox]):not([type=radio]), button, textarea {
      padding: calc(var(--padding) / 2) calc(var(--padding) / 4); } }
  input:not([type=checkbox]):not([type=radio]).error, input:not([type=checkbox]):not([type=radio]).wpcf7-not-valid, button.error, button.wpcf7-not-valid, textarea.error, textarea.wpcf7-not-valid {
    border-color: red; }
  input:not([type=checkbox]):not([type=radio])[type=date], button[type=date], textarea[type=date] {
    padding-top: 0;
    padding-bottom: 0;
    height: 57px;
    line-height: 52px; }
  input:not([type=checkbox]):not([type=radio])[disabled], button[disabled], textarea[disabled] {
    opacity: .5; }

input[type=checkbox], input[type=radio] {
  position: absolute;
  top: -100%;
  left: -1000%;
  z-index: -11000000; }
  input[type=checkbox] + label, input[type=radio] + label {
    cursor: pointer;
    margin-left: var(--padding);
    position: relative; }
    input[type=checkbox] + label:before, input[type=radio] + label:before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: calc(-1 * var(--padding));
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid currentColor;
      content: "";
      font-size: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 2px; }
  input[type=checkbox]:checked + label:after, input[type=radio]:checked + label:after {
    content: "";
    position: absolute;
    left: calc((-1 * var(--padding)) + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #8336f7; }

input[type=radio] + label:before {
  border-radius: 50%; }

input[type=radio]:checked + label:after {
  border-radius: 50%; }

.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="phone"], .wpcf7-form input[type="date"] {
  border: 2px solid #8336f7; }

.wpcf7-form textarea {
  border: 2px solid #8336f7; }

.wpcf7-form .form-item:not(:last-child) {
  margin-bottom: var(--padding); }

.wpcf7-form .form-item label,
.wpcf7-form .form-item .explanation {
  display: inline-block;
  color: #8336f7; }

.wpcf7-form .form-item .explanation {
  float: right;
  font-size: .8em;
  color: #999999; }
  @media all and (max-width: 640px) {
    .wpcf7-form .form-item .explanation {
      display: none; } }
  .wpcf7-form .form-item .explanation strong {
    color: #8336f7; }

.wpcf7-form .form-item input[type="checkbox"] + label,
.wpcf7-form .form-item input[type="radio"] + label {
  display: block; }
  .wpcf7-form .form-item input[type="checkbox"] + label:not(:last-child),
  .wpcf7-form .form-item input[type="radio"] + label:not(:last-child) {
    margin-bottom: calc(var(--padding) / 2); }

.wpcf7-form .form-item select {
  display: block;
  width: 100%;
  border: 2px solid #8336f7;
  border-radius: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: calc(var(--padding) / 2) calc(var(--padding) * .75);
  font-size: 1em;
  background: white url("../img/arrow-down.svg") no-repeat right 25px center;
  background-size: 20px; }

.wpcf7-form .form-item input {
  margin-top: calc(var(--padding) / 2);
  outline: 0;
  transition: all .25s ease-in-out;
  color: #2b0069; }
  .wpcf7-form .form-item input:focus, .wpcf7-form .form-item input:active {
    border-color: #999999; }

.wpcf7-form button {
  display: inline-block;
  width: auto; }

select {
  display: block;
  width: 100%;
  border: 2px solid #8336f7;
  border-radius: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: calc(var(--padding) / 2) calc(var(--padding) * .75);
  font-size: .7em;
  background: white url("../img/arrow-down.svg") no-repeat right 25px center;
  background-size: 20px;
  margin-top: calc(var(--padding) / 2);
  outline: 0;
  transition: all .25s ease-in-out;
  color: #2b0069; }
  select:focus, select:active {
    border-color: #999999; }

::-moz-placeholder {
  color: #999999; }

:-ms-input-placeholder {
  color: #999999; }

::placeholder {
  color: #999999; }

.wpcf7-mail-sent-ok {
  background: #e5fcec;
  border-color: #147900;
  color: #147900; }

.wpcf7-validation-errors {
  background: #ffe5e9;
  border-color: red;
  color: red; }

.wpcf7-not-valid-tip {
  display: none; }

.wpcf7-response-output {
  padding: calc(var(--padding) / 2) var(--padding);
  border: 2px solid;
  border-radius: 5px;
  margin-top: var(--padding); }

.wpcf7-display-none {
  display: none; }

.screen-reader-response {
  display: none; }

.maxlength {
  position: relative;
  display: block; }
  .maxlength .field-length {
    display: none; }
  .maxlength input[maxlength] + .field-length {
    color: currentColor;
    display: block;
    position: absolute;
    right: var(--padding);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all .25s ease-in-out; }
  .maxlength.focused input[maxlength] + .field-length {
    top: 4px;
    font-size: .6em;
    transform: translateY(0); }

.ical.modal textarea, .ical-promo.modal textarea {
  font-size: 16px;
  line-height: 20px;
  padding: 0;
  border: 0;
  min-height: 60px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  position: relative; }
  .ical.modal textarea::-moz-selection, .ical-promo.modal textarea::-moz-selection {
    background: #f919a9; }
  .ical.modal textarea::selection, .ical-promo.modal textarea::selection {
    background: #f919a9; }

.ical.modal .copied, .ical-promo.modal .copied {
  display: none; }

.ical.modal.copied .copied, .ical-promo.modal.copied .copied {
  display: inline; }

.cta, .cta--accent, .cta--accent-2, .cta--light, .cta--special, .cta--gray, .cta--main, .cta--disabled, .cta--action, .cta--accept, .cta--cancel {
  border-radius: var(--padding);
  background: white;
  color: #f919a9;
  transition: all .25s ease-in-out;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  position: relative; }
  body.can-hover .cta:hover, body.can-hover .cta--accent:hover, body.can-hover .cta--accent-2:hover, body.can-hover .cta--light:hover, body.can-hover .cta--special:hover, body.can-hover .cta--gray:hover, body.can-hover .cta--main:hover, body.can-hover .cta--disabled:hover, body.can-hover .cta--action:hover, body.can-hover .cta--accept:hover, body.can-hover .cta--cancel:hover {
    background: #84ecef;
    color: #2b0069; }
  .cta--accent {
    background: #f919a9;
    color: white; }
    body.can-hover .cta--accent:hover {
      color: white;
      background: #2b0069; }
  .cta--accent-2 {
    background: #84ecef;
    color: #2b0069; }
    body.can-hover .cta--accent-2:hover {
      color: #84ecef;
      background: #2b0069; }
  .cta--light {
    color: #d5c5fc;
    border: 2px solid;
    background: none;
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
    pointer-events: none; }
  .cta--special {
    color: #d5c5fc;
    border: 2px solid;
    background: none;
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5); }
    body.can-hover .cta--special:hover {
      color: #84ecef;
      background: #2b0069; }
  .cta--gray {
    background: #d5c5fc;
    color: #2b0069; }
    body.can-hover .cta--gray:hover {
      color: #40009c;
      background: #b295f9; }
  .cta--main {
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); }
  .cta--disabled {
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
    text-transform: uppercase;
    font-weight: 700;
    opacity: .7; }
    body.can-hover .cta--disabled:hover {
      cursor: no-drop;
      cursor: not-allowed;
      background: white;
      color: #f919a9; }
  .cta--action {
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    background: rgba(20, 121, 0, 0.5); }
    .cta--action, .pay-card .options .cta--action {
      color: white; }
    body.can-hover .cta--action:hover {
      background: #147900; }
    body.can-hover .cta--action:hover, body.can-hover .pay-card .options .cta--action:hover {
      color: white; }
  .cta--accept, .cta--cancel {
    text-decoration: none;
    padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    background: rgba(255, 0, 0, 0.7); }
    .cta--accept, .pay-card .options .cta--accept, .cta--cancel, .pay-card .options .cta--cancel {
      color: white; }
    body.can-hover .cta--accept:hover, body.can-hover .cta--cancel:hover {
      background: red; }
    body.can-hover .cta--accept:hover, body.can-hover .pay-card .options .cta--accept:hover, body.can-hover .cta--cancel:hover, body.can-hover .pay-card .options .cta--cancel:hover {
      color: white; }
  .cta--accept {
    background: rgba(20, 121, 0, 0.8); }
    body.can-hover .cta--accept:hover {
      background: #147900; }

.cta--inline {
  display: inline-block; }

.cta--dark {
  color: #2b0069; }
  .cta--dark:hover {
    color: #d5c5fc; }

.cta--wide {
  padding: calc(var(--padding) / 3) calc(var(--padding) * 1.5);
  display: block;
  width: 100%;
  text-align: center; }

.pulse {
  position: relative;
  z-index: 1; }
  .pulse:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: padding-box;
    border-radius: inherit;
    z-index: -1; }
  .pulse:before {
    background: #fff;
    animation: pulse 3s infinite ease-out; }

.pulse-text {
  animation: pulse-text 3s ease-out; }

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 white;
    transform: scale(1); }
  65% {
    transform: scale(1); }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    transform: scale(1.07); }
  75% {
    transform: scale(1); }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

@keyframes pulse-text {
  0% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(2); } }

@keyframes wiggle {
  0% {
    transform: rotate(0); }
  98% {
    transform: rotate(0); }
  98.5% {
    transform: rotate(5deg); }
  99.5% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0); } }

@keyframes alertBL {
  0% {
    opacity: 0;
    transform: translateX(24%); }
  20% {
    opacity: 0;
    transform: translateX(24%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes alertBR {
  0% {
    opacity: 0;
    transform: translateX(-24%); }
  20% {
    opacity: 0;
    transform: translateX(-24%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes alertSL {
  0% {
    opacity: 0;
    transform: translateX(12%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes alertSR {
  0% {
    opacity: 0;
    transform: translateX(-12%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.svg-alert .br, .svg-alert .sr, .svg-alert .bl, .svg-alert .sl {
  animation: alertBR 3s infinite ease-out; }

.svg-alert .br {
  animation-name: alertBR; }

.svg-alert .sr {
  animation-name: alertSR; }

.svg-alert .bl {
  animation-name: alertBL; }

.svg-alert .sl {
  animation-name: alertSL; }

.svg-alert .bell {
  animation: wiggle 5s infinite linear;
  transform-origin: 50% 0; }

.cards {
  display: grid;
  grid-gap: var(--padding);
  max-width: var(--page-width);
  margin: 0 auto;
  padding-top: calc(var(--padding) * 2);
  position: relative;
  grid-template-columns: repeat(4, 1fr); }
  .cards.col-3 {
    grid-template-columns: repeat(3, 1fr); }
  .cards[data-title]:not([data-title=""]) .card:first-of-type:before {
    content: attr(data-title); }
  .cards.no-header {
    padding-top: 0; }
    .cards.no-header .card:first-of-type:before {
      content: '' !important; }
  .single-deal .cards {
    margin-bottom: calc(var(--padding) * 2); }
    @media all and (max-width: 640px) {
      .single-deal .cards {
        margin-bottom: var(--padding); } }
  @media all and (max-width: 1024px) {
    .cards {
      grid-template-columns: repeat(3, 1fr); }
      .cards.col-3 {
        grid-template-columns: repeat(2, 1fr); } }
  @media all and (max-width: 768px) {
    .cards {
      grid-template-columns: repeat(2, 1fr); }
      .cards.col-3 {
        grid-template-columns: 1fr; }
        .account .cards.col-3 {
          grid-template-columns: repeat(2, 1fr); } }
  @media all and (max-width: 640px) {
    .cards {
      padding: calc(var(--padding) * 2) 0 0;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column; } }
  .cards.has-bg:before, .cards.has-bg:after {
    content: '';
    position: absolute;
    height: 550px;
    width: 100vw;
    left: 50%;
    top: 0;
    transform: translate(-50%, -35%); }
  .cards.has-bg:before {
    background: radial-gradient(100% 100% at 50% 0, white 0%, white 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
    z-index: -1; }
  .cards.has-bg:after {
    background: radial-gradient(100% 100% at 50% 0, #f6f6f6 0%, #f6f6f6 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
    z-index: -2; }
  .cards .card:before {
    display: none;
    content: 'Gesloten dealz';
    color: #68587f;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -100%);
    line-height: calc(var(--padding) * 2); }
    @media screen and (min-width: 1024px) and (max-width: 1200px) {
      .cards .card:before {
        font-size: 2.4vw; } }
    @media screen and (max-width: 1024px) {
      .cards .card:before {
        font-size: 3.1vw; } }
    @media screen and (max-width: 768px) {
      .cards .card:before {
        font-size: 4.8vw; } }
    @media screen and (max-width: 640px) {
      .cards .card:before {
        font-size: 1.5em; } }

.cards.won .card:first-of-type:before {
  display: block; }

.cards:not(.won).today .today:first-of-type:before {
  display: block;
  content: "Dealz vandaag"; }

.cards:not(.won).later .later:first-of-type:before {
  display: block;
  content: "Dealz vanaf morgen"; }

.cards:not(.won).has-sdl .superdeal:first-of-type:before {
  display: block;
  content: "Superdeal"; }

.cards:not(.won).has-sdl.today .superdeal:first-of-type + .today:before {
  display: block;
  content: "Dealz vandaag"; }

.cards:not(.won).has-sdl.later .superdeal:first-of-type + .later:before {
  display: block;
  content: "Dealz vanaf morgen"; }

.cards:not(.won).today.later .card:first-of-type:before {
  display: block;
  content: "Alle dealz"; }

.cards .card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  color: white;
  position: relative; }
  @media all and (max-width: 640px) {
    .cards .card {
      -ms-flex-preferred-size: calc(100% - (var(--padding) * 2));
          flex-basis: calc(100% - (var(--padding) * 2));
      -ms-flex-positive: 0;
          flex-grow: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      margin-bottom: calc(var(--padding) * 2); } }
  .cards .card.not-paid:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 3px #f919a9;
    z-index: 0;
    pointer-events: none; }
  .cards .card header {
    background: #9c32dd;
    padding: calc(var(--padding) * .75) calc(var(--padding) * .75) 0; }
    .cards .card header h2, .cards .card header strong {
      font-size: 1.1em;
      color: white;
      font-weight: 400; }
  .cards .card ul {
    padding: calc(var(--padding) * .75);
    display: grid;
    grid-gap: calc(var(--padding) / 2);
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    overflow: hidden; }
    .cards .card ul li {
      position: relative;
      z-index: 1; }
    .cards .card ul:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: -1px;
      bottom: 0;
      background: linear-gradient(to bottom, #9c32dd, #8336f7);
      z-index: 0; }
    .cards .card ul .show-max-reserve {
      display: none; }
    .cards .card ul strong {
      display: block;
      text-transform: uppercase;
      font-weight: 500; }
    .cards .card ul .delta,
    .cards .card ul .reserve,
    .cards .card ul .retail,
    .cards .card ul .euro {
      font-size: 1.2em;
      margin-top: calc(var(--padding) / 10);
      display: block; }
    .cards .card ul .euro:before,
    .cards .card ul .reserve:before,
    .cards .card ul .retail:before {
      content: '€ '; }
    .cards .card ul .percentage:after {
      content: '%'; }
    .cards .card ul .retail {
      text-decoration: line-through; }
    .cards .card ul .winner {
      color: #84ecef;
      font-weight: bold;
      font-size: .8em; }
      .cards .card ul .winner strong {
        font-size: 1em; }
    .cards .card ul .reserve {
      color: white; }
    .cards .card ul .time,
    .cards .card ul .participants,
    .cards .card ul strong {
      font-size: .65em; }
    .cards .card ul .time:after {
      content: ' UUR'; }
    .cards .card ul li {
      line-height: 1;
      color: #d5c5fc; }
    .cards .card ul li:nth-child(even) {
      text-align: right; }
  .cards .card footer {
    padding: 0 calc(var(--padding) * .75) calc(var(--padding) * .75);
    background: #8336f7; }
  .cards .card img {
    max-width: 100%;
    display: block;
    height: auto;
    max-height: 200px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1; }
  .cards .card figure {
    max-height: 200px;
    position: relative; }
  .cards .card svg {
    position: absolute;
    left: calc(var(--padding) / 4);
    top: calc(var(--padding) / 4);
    width: calc(var(--padding) * 2);
    height: calc(var(--padding) * 2); }
  .cards .card .cta, .cards .card .cta--accent, .cards .card .cta--accent-2, .cards .card .cta--light, .cards .card .cta--special, .cards .card .cta--gray, .cards .card .cta--main, .cards .card .cta--disabled, .cards .card .cta--action, .cards .card .cta--accept, .cards .card .cta--cancel {
    display: block;
    background: white;
    padding: calc(var(--padding) / 3) calc(var(--padding) * .75);
    border-radius: var(--padding);
    text-decoration: none;
    color: #f919a9;
    transition: all .25s ease-in-out; }
    body.can-hover .cards .card .cta:hover, body.can-hover .cards .card .cta--accent:hover, body.can-hover .cards .card .cta--accent-2:hover, body.can-hover .cards .card .cta--light:hover, body.can-hover .cards .card .cta--special:hover, body.can-hover .cards .card .cta--gray:hover, body.can-hover .cards .card .cta--main:hover, body.can-hover .cards .card .cta--disabled:hover, body.can-hover .cards .card .cta--action:hover, body.can-hover .cards .card .cta--accept:hover, body.can-hover .cards .card .cta--cancel:hover {
      cursor: pointer;
      background: #84ecef;
      color: #2b0069; }
    .cards .card .cta.inactive, .cards .card .inactive.cta--accent, .cards .card .inactive.cta--accent-2, .cards .card .inactive.cta--light, .cards .card .inactive.cta--special, .cards .card .inactive.cta--gray, .cards .card .inactive.cta--main, .cards .card .inactive.cta--disabled, .cards .card .inactive.cta--action, .cards .card .inactive.cta--accept, .cards .card .inactive.cta--cancel {
      background: transparent;
      pointer-events: none;
      color: #d5c5fc;
      text-align: center;
      opacity: .4; }
  .cards .card .coinz {
    width: var(--padding);
    height: var(--padding);
    text-align: center;
    line-height: var(--padding);
    color: white;
    border-radius: 50%;
    font-size: .85em;
    transform: translate(4px, -50%);
    position: absolute;
    top: 50%;
    right: calc( var(--padding) / 2); }
    .cards .card .coinz svg {
      --coin-opacity: 0;
      float: left;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      transition: all .25s ease-in-out; }

#deal-timer {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 210px;
  height: 210px; }
  @media all and (max-width: 640px) {
    #deal-timer {
      margin-bottom: var(--padding); } }
  #deal-timer svg {
    width: 100%;
    height: 100%; }
  #deal-timer circle {
    fill: none; }
  #deal-timer .circle-back {
    stroke: #4800c3;
    stroke-width: 30px; }
  #deal-timer .circle-fronta, #deal-timer .circle-frontb {
    stroke: #84ecef;
    stroke-width: 30px;
    /* 2 * Math.PI * radius + 1  */
    stroke-dasharray: 629px;
    stroke-dashoffset: 629px;
    transition: none; }
  #deal-timer .circle-frontb {
    stroke: #f919a9; }
  #deal-timer .time {
    font-size: 2em;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center; }

.status-tags {
  display: block;
  position: fixed;
  top: 150px;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.2);
  padding: 5px 15px;
  border-radius: 25px;
  z-index: 99999999;
  list-style: none; }
  .status-tags li {
    display: inline;
    background: #fff;
    border-radius: 20px;
    height: 40px;
    width: auto;
    line-height: 40px;
    padding: 0 20px; }

.upsell {
  opacity: .6; }
  .no-upsell .upsell {
    display: none !important; }

.a-notification {
  z-index: 999999999999;
  position: relative; }
  .a-notification.debug .wrapper {
    top: 50px !important;
    animation: none !important;
    left: 0 !important; }
  .a-notification.debug .message {
    transform: translateX(0) !important;
    animation: none !important; }
  .a-notification .wrapper {
    animation: notification-outer 5s;
    top: -250px;
    width: calc(100% - var(--padding));
    max-width: 640px;
    position: fixed;
    left: 50%;
    transform: translateX(0);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon notice";
    border-radius: 44px;
    z-index: 0;
    overflow: hidden; }
    @media all and (max-width: 640px) {
      .a-notification .wrapper {
        border-radius: 0;
        animation-iteration-count: 2;
        animation-direction: alternate;
        animation-name: notification-outer-mobile;
        transform: translateX(-50%);
        animation-duration: 2.5s;
        animation-timing-function: cubic-bezier(0, 0, 0, 1); } }
    .a-notification .wrapper .message {
      border: 2px solid #8336f7;
      background: #8336f7;
      color: white;
      line-height: 1.2;
      grid-area: notice;
      padding: calc(var(--padding) / 8) calc(var(--padding) / 4);
      border-radius: 0 40px 40px 0;
      animation: notification-inner 5s; }
  .a-notification.longer .wrapper {
    animation-duration: 8s; }
    @media all and (max-width: 640px) {
      .a-notification.longer .wrapper {
        animation-duration: 4s; } }
    .a-notification.longer .wrapper .message {
      animation-duration: 8s; }
  .a-notification .wrapper .message {
    transform: translateX(-100%);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    font-size: .8em; }
    @media all and (max-width: 640px) {
      .a-notification .wrapper .message {
        border-radius: 0;
        border: 0;
        animation: none;
        transform: translateX(0); } }
    .a-notification .wrapper .message:before {
      content: "";
      display: block;
      position: absolute;
      left: -42px;
      top: -2px;
      width: 42px;
      height: 84px;
      background: #8336f7;
      z-index: -1; }
    .a-notification .wrapper .message div {
      width: 100%;
      display: block; }
      .a-notification .wrapper .message div span {
        display: block;
        overflow: hidden; }
        @media all and (max-width: 640px) {
          .a-notification .wrapper .message div span {
            max-height: initial; } }
  .a-notification .wrapper .logo {
    width: 80px;
    height: 80px;
    grid-area: icon;
    border: 2px solid #8336f7;
    background-size: 100%;
    border-radius: 40px;
    z-index: 1;
    position: relative; }
    @media all and (max-width: 640px) {
      .a-notification .wrapper .logo {
        display: none; } }
    .a-notification .wrapper .logo svg {
      width: 76px;
      height: 76px;
      padding: 9px;
      background: white;
      border-radius: inherit; }

@keyframes notification-outer {
  0% {
    transform: translateX(-38px);
    top: -250px; }
  10% {
    transform: translateX(-38px);
    top: 50px; }
  20% {
    transform: translateX(-38px);
    top: 50px; }
  50% {
    transform: translateX(-50%); }
  90% {
    top: 50px;
    transform: translateX(-50%); }
  100% {
    top: -250px;
    transform: translateX(-50%); } }

@keyframes notification-inner {
  0% {
    transform: translateX(-100%); }
  20% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(0%); }
  100% {
    transform: translateX(0%); } }

@keyframes notification-outer-mobile {
  0% {
    top: -250px; }
  20% {
    top: 50px; }
  100% {
    top: 50px; } }

#svg-sprites {
  display: none; }

svg[class*="primary-with-"] {
  --teint-0: #8336f7; }

svg[class*="text-with-"] {
  --teint-0: #2b0069; }

svg[class*="accent-with-"] {
  --teint-0: #f919a9; }

svg[class*="accent2-with-"] {
  --teint-0: #84ecef; }

svg[class*="secondary-with-"] {
  --teint-0: #5a1321; }

svg[class*="foreground-with-"] {
  --teint-0: #191919; }

svg[class*="background-with-"] {
  --teint-0: #e9e9e9; }

svg[class*="currentcolor-with-"] {
  --teint-0: currentColor; }

svg[class*="white-with-"] {
  --teint-0: white; }

svg[class*="light-purple-with-"] {
  --teint-0: #d9a0da; }

svg[class*="-with-primary"] {
  --teint-1: #8336f7; }

svg[class*="-with-text"] {
  --teint-1: #2b0069; }

svg[class*="-with-accent"] {
  --teint-1: #f919a9; }

svg[class*="-with-accent2"] {
  --teint-1: #84ecef; }

svg[class*="-with-secondary"] {
  --teint-1: #5a1321; }

svg[class*="-with-foreground"] {
  --teint-1: #191919; }

svg[class*="-with-background"] {
  --teint-1: #e9e9e9; }

svg[class*="-with-currentcolor"] {
  --teint-1: currentColor; }

svg[class*="-with-white"] {
  --teint-1: white; }

svg[class*="-with-light-purple"] {
  --teint-1: #d9a0da; }

svg.blue {
  --teint-0: #55cbff;
  --teint-1: #82d2ff;
  --teint-2: #08b7fc;
  --teint-3: #006dff;
  --teint-4: #1999fa; }

svg.orange {
  --teint-0: #ffcb55;
  --teint-1: #ffd282;
  --teint-2: #fcb708;
  --teint-3: #eca706;
  --teint-4: #fa9919; }

svg.purple {
  --teint-0: #cb55ff;
  --teint-1: #d282ff;
  --teint-2: #b708fc;
  --teint-3: #a706ec;
  --teint-4: #9919fa; }

svg.green {
  --teint-0: #90df55;
  --teint-1: #70df82;
  --teint-2: #50dc08;
  --teint-3: #30cc06;
  --teint-4: #10da19; }

svg.teal {
  --teint-0: #75d9da;
  --teint-1: #84ecef;
  --teint-2: #1fcccc;
  --teint-3: #55b9ba;
  --teint-4: #35999a; }

svg.pink {
  --teint-0: #ff76ce;
  --teint-1: #ffc2e6;
  --teint-2: #ff45b4;
  --teint-3: #ff008f;
  --teint-4: #c60076
  ; }

button:hover svg[class*="primary-with-"] {
  --teint-1: #8336f7; }

button:hover svg[class*="text-with-"] {
  --teint-1: #2b0069; }

button:hover svg[class*="accent-with-"] {
  --teint-1: #f919a9; }

button:hover svg[class*="accent2-with-"] {
  --teint-1: #84ecef; }

button:hover svg[class*="secondary-with-"] {
  --teint-1: #5a1321; }

button:hover svg[class*="foreground-with-"] {
  --teint-1: #191919; }

button:hover svg[class*="background-with-"] {
  --teint-1: #e9e9e9; }

button:hover svg[class*="currentcolor-with-"] {
  --teint-1: currentColor; }

button:hover svg[class*="white-with-"] {
  --teint-1: white; }

button:hover svg[class*="light-purple-with-"] {
  --teint-1: #d9a0da; }

button:hover svg[class*="-with-primary"] {
  --teint-0: #8336f7; }

button:hover svg[class*="-with-text"] {
  --teint-0: #2b0069; }

button:hover svg[class*="-with-accent"] {
  --teint-0: #f919a9; }

button:hover svg[class*="-with-accent2"] {
  --teint-0: #84ecef; }

button:hover svg[class*="-with-secondary"] {
  --teint-0: #5a1321; }

button:hover svg[class*="-with-foreground"] {
  --teint-0: #191919; }

button:hover svg[class*="-with-background"] {
  --teint-0: #e9e9e9; }

button:hover svg[class*="-with-currentcolor"] {
  --teint-0: currentColor; }

button:hover svg[class*="-with-white"] {
  --teint-0: white; }

button:hover svg[class*="-with-light-purple"] {
  --teint-0: #d9a0da; }

.error404 .page-block {
  padding: 120px 0; }

.error404 h1 {
  font-size: 3em;
  margin-bottom: 15px; }
  .error404 h1 span {
    color: #f919a9; }

.on-konami {
  white-space: nowrap;
  font-size: 70%; }
  body:not(.konami) .on-konami {
    display: none !important; }

.grecaptcha-badge {
  display: none !important; }

:root {
  --scroll-top: 0; }

html.no-scroll, html.no-scroll body {
  position: fixed;
  overflow-y: hidden;
  width: 100%;
  top: calc( -1px * var(--scroll-top)); }