@font-face {
  font-family: 'FatFrank Heavy';
  src: url('../fonts/FatFrank-Regular.woff2') format('woff2'),url('../fonts/FatFrank-Regular.woff') format('woff'),url('../fonts/FatFrank-Regular.ttf') format('truetype')
}
/* Start of normalize.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */-webkit-text-size-adjust: 100%/* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */height: 0;
  /* 1 */overflow: visible/* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace,monospace;
  /* 1 */font-size: 1em/* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */text-decoration: underline;
  /* 2 */text-decoration: underline dotted/* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace,monospace;
  /* 1 */font-size: 1em/* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -0.25em
}
sup {
  top: -0.5em
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */font-size: 100%;
  /* 1 */line-height: 1.15;
  /* 1 */margin: 0/* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */overflow: visible
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */text-transform: none
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */color: inherit;
  /* 2 */display: table;
  /* 1 */max-width: 100%;
  /* 1 */padding: 0;
  /* 3 */white-space: normal/* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */padding: 0/* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */outline-offset: -2px/* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */font: inherit/* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none
}
/* End of normalize.css */
/* Start of site css */
/* General page styles */
*,
*::before,
*::after {
  box-sizing: border-box
}
:root {
  --body-font: normal normal bold 18px/24px Lato;
  --title-font: normal normal normal 36px/37px 'FatFrank Heavy';
  --main-color: #0A1461;
  --accent-color: #ED32E9;
  --selected-color: #742597;
  --selected-color--fade: #74259780;
  --body-color: #FFFFFF;
  --body-color-alt: #05062A;
  --select-border: var(--accent-color);
  --select-focus: blue;
  --select-arrow: var(--accent-color);
  --default-margin: 20px
}
body {
  background: var(--main-color);
  color: var(--body-color);
  font: var(--body-font);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh + 100px)
}
body.confirmation {
  background-image: url('../img/background.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain
}
body.gift-card footer {
  margin-top: calc(var(--default-margin) * 3)
}
article.container {
  width: clamp(50%, 50rem, 100%);
  margin-inline: auto
}
.visuallyhidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal
}
@supports not (margin-inline: 0) {
  article.container {
    margin-left: auto;
    margin-right: auto
  }
}
a {
  color: #FFFFFF
}
a.a--pink {
  color: var(--accent-color)
}
h1,
h2,
h3 {
  font: var(--title-font);
  letter-spacing: 1.08px;
  margin-top: 0;
  position: relative
}
h3 {
  font-size: 24px;
  letter-spacing: 0;
  line-height: 24px
}
h1::after,
h2::after {
  content: url('../img/underline.svg');
  display: block;
  position: absolute;
  bottom: -32px
}
h1 + p,
h2 + p {
  margin-top: 45px
}
@media only screen and (max-width: 1480px) {
  body.confirmation {
    background-position: center 210px
  }
}
@media only screen and (max-width: 959px) {
  body.confirmation {
    background-image: url('../img/background-mobile.png');
    background-size: cover
  }
  h1,
  h2 {
    font-size: 24px
  }
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 70px
}
.main-left,
.main-right {
  display: flex;
  flex-direction: column;
  margin: 0 auto 32px 70px;
  width: 42vw
}
.main-right {
  align-items: center;
  width: 32vw;
  margin: 0 70px 32px auto;
  position: relative;
  top: -130px;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */-ms-overflow-style: none/* Internet Explorer 10+ */
}
.main-right::-webkit-scrollbar {
  /* WebKit */width: 0;
  height: 0
}
:not(.countdown) + main:not(.confirmation):not(.main__forgotten-wrapper):not(.main__error-wrapper) {
  margin-top: 150px
}
:not(.countdown) + main:not(.confirmation):not(.main__forgotten-wrapper):not(.main__error-wrapper) .main-right {
  top: 0
}
main.confirmation,
.main__forgotten-wrapper,
.main__error-wrapper {
  margin-top: 140px
}
@media only screen and (max-width: 1480px) {
  :not(.countdown) + main:not(.confirmation):not(.main__forgotten-wrapper):not(.main__error-wrapper) {
    margin-top: 230px
  }
}
@media only screen and (max-width: 1199px) {
  main {
    margin: 0 32px
  }
  .main-left {
    margin: 0 auto 32px 32px;
    width: 50vw
  }
  .main-right {
    margin: 0 32px 32px auto
  }
}
@media only screen and (max-width: 959px) {
  main {
    margin: 0
  }
  main.confirmation,
  .main__forgotten-wrapper,
  .main__error-wrapper {
    margin-top: auto
  }
  .main-left,
  .main-right {
    margin: 0 24px 24px;
    width: calc(100vw - 48px)
  }
  .main-right {
    position: static;
    max-height: 100%
  }
  :not(.countdown) + main:not(.confirmation):not(.main__forgotten-wrapper):not(.main__error-wrapper) {
    margin-top: 0
  }
}
.icon-location:not(.select--multiple)::before {
  content: url('../img/icons/location.svg')
}
.icon-trophy:not(.select--multiple)::before {
  content: url('../img/icons/trophy.svg')
}
.icon-calendar:not(.select--multiple)::before {
  content: url('../img/icons/calendar.svg')
}
.icon-clock:not(.select--multiple)::before {
  content: url('../img/icons/clock.svg')
}
.icon-people:not(.select--multiple)::before {
  content: url('../img/icons/people.svg')
}
.icon-star:not(.select--multiple)::before {
  content: url('../img/icons/star.svg')
}
.icon-contacts:not(.select--multiple)::before {
  content: url('../img/icons/contacts.svg')
}
.icon-email:not(.select--multiple)::before {
  content: url('../img/icons/email.png')
}
.icon-phone:not(.select--multiple)::before {
  content: url('../img/icons/telephone.png')
}
.icon-tick-circle:not(.select--multiple)::before {
  content: url('../img/icons/tick-circle.svg')
}
.icon-important:not(.select--multiple)::before {
  content: url('../img/icons/important.svg')
}
img.img--mobile {
  display: none
}
img.img--desktop {
  display: block;
  width: 100%
}
@media only screen and (max-width: 959px) {
  img.img--mobile {
    display: block;
    width: 100%
  }
  img.img--desktop {
    display: none
  }
}
.main__title {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}
.main-title > div:first-child {
  display: flex;
  flex-direction: column
}
.main__nav {
  color: var(--body-color);
  font-size: 18px
}
.main__nav--back {
  display: block;
  margin-left: 18px
}
.main__nav--top-back {
  margin-top: 40px
}
.main__nav--skip {
  margin-right: 18px
}
.caret-left,
.caret-right {
  position: relative
}
.caret-left::before {
  content: url('../img/icons/chevron-left.svg');
  position: absolute;
  top: 4px;
  left: -20px
}
.caret-right::after {
  content: url('../img/icons/chevron-right.svg');
  position: absolute;
  right: -18px;
  top: -20px
}
.main__buttons {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 70px 32px;
  width: 42vw
}
@media only screen and (max-width: 1199px) {
  .caret-left:before {
    top: 2px
  }
  .caret-right:after {
    top: -34px
  }
  .main__buttons {
    margin: 0 auto 32px 32px;
    width: 50vw
  }
  .main__nav {
    font-size: 18px;
    line-height: 37px
  }
}
@media only screen and (max-width: 959px) {
  .main__buttons {
    margin: 0 24px 24px;
    width: 100%
  }
}
.countdown {
  border: 1px solid #FFFFFF;
  border-radius: 100px/100px;
  display: flex;
  justify-content: center;
  margin: 150px 140px 40px;
  padding: 20px 44px 20px 70px;
  position: relative;
  width: 42vw
}
.countdown__timer {
  color: var(--accent-color)
}
.countdown::before {
  content: url('../img/icons/hourglass.svg');
  position: absolute;
  left: 36px;
  top: calc(50% + 2px);
  transform: translateY(-50%)
}
@media only screen and (max-width: 1480px) {
  .countdown {
    margin-top: 230px
  }
}
@media only screen and (max-width: 1199px) {
  .countdown {
    margin: 230px auto 40px 64px;
    width: 50vw
  }
}
@media only screen and (max-width: 959px) {
  .countdown {
    font-size: 16px;
    margin: 0 16px 40px;
    padding: 8px 32px 8px 48px;
    width: calc(100% - 32px)
  }
  .countdown::before {
    left: 24px
  }
}
.activity {
  border: 1px solid var(--selected-color);
  border-radius: 5px;
  display: flex;
  flex-direction: column
}
.activity:not(:last-child) {
  margin-bottom: 10px
}
.activity__main {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px
}
.activity.active .activity__main {
  background-color: var(--selected-color)
}
.activity__main-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 24px;
  width: 100%
}
.activity h3 {
  line-height: 37px;
  margin-top: 24px
}
.activity__price {
  margin-bottom: 24px
}
.activity__terms {
  font-size: 16px;
  line-height: 24px;
  padding: 20px
}
.activity__terms ul {
  margin-bottom: 0;
  padding-left: 20px
}
.activity__img--desktop {
  display: block;
  height: 100%
}
.activity__img--mobile {
  display: none
}
@media only screen and (max-width: 959px) {
  .activity__main {
    flex-direction: column
  }
  .activity__main-info {
    padding-left: 0
  }
  .activity h3 {
    margin-top: 20px;
    margin-bottom: 10px
  }
  .activity .form-select {
    margin-bottom: 12px
  }
  .activity__img--desktop {
    display: none
  }
  .activity__img--mobile {
    display: block;
    width: 100%
  }
}
.checkout__create-account {
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
  margin-top: 50px;
  padding: 30px 24px
}
.checkout__create-account h3 {
  margin-bottom: 20px
}
.checkout__create-account ul {
  font-size: 16px;
  margin: 10px 0 0;
  padding-left: 20px
}
.checkout__create-account h3::after {
  content: url('../../img/underline.svg');
  display: block;
  position: relative
}
.checkout__create-account span {
  font-size: 18px;
  line-height: 24px
}
.checkout__create-account .cta {
  margin-bottom: 0
}
@media only screen and (max-width: 959px) {
  .checkout__create-account h3 {
    font-size: 18px;
    line-height: 24px
  }
}
.main__details {
  margin-top: 0
}
.detail label {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px
}
.main__confirmation-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%
}
.confirmation__thanks {
  align-items: center;
  border: 2px solid var(--accent-color);
  display: flex;
  flex-direction: column;
  margin: 0 0 40px 0;
  padding: 40px 150px;
  text-align: center
}
.confirmation h1 + p,
.confirmation h2 + p {
  margin-top: 0
}
.confirmation__heading {
  font-size: 45px;
  letter-spacing: 1.35px
}
.confirmation__heading:first-of-type {
  margin-bottom: 20px
}
.confirmation__heading:first-of-type::after {
  display: none
}
.confirmation__heading::after {
  left: 50%;
  transform: translateX(-50%)
}
.confirmation__subheading {
  font: var(--body-font);
  font-size: 24px;
  line-height: 24px;
  margin-top: 20px
}
.confirmation__subheading::after {
  display: none
}
.confirmation__subheading span {
  color: var(--accent-color)
}
.confirmation__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  width: 512px
}
.confirmation__form .cta {
  align-self: center;
  margin: 40px 0 0
}
.main__confirmation-wrapper .summary {
  margin-bottom: 40px;
  padding-left: 150px;
  padding-right: 150px;
  position: static;
  width: 816px
}
@media only screen and (max-width: 1480px) {
  .main__confirmation-wrapper {
    margin-top: 110px
  }
}
@media only screen and (max-width: 959px) {
  .main__confirmation-wrapper {
    margin: 20px 16px 0;
    width: calc(100% - 32px)
  }
  .confirmation__heading {
    font-size: 30px;
    line-height: 30px
  }
  .confirmation__thanks {
    padding: 40px 20px;
    width: 100%
  }
  .confirmation__form {
    font-size: 16px;
    text-align: start;
    width: 100%
  }
  .confirmation__form label {
    font-size: 16px
  }
  .confirmation__form input {
    font-size: 18px
  }
  .main__confirmation-wrapper .summary {
    border-radius: 0;
    margin: 0 35px;
    padding: 20px;
    width: 100%
  }
}
.main__forgotten-wrapper,
.main__error-wrapper {
  align-items: center;
  background-image: url('../img/CMYK_key.png');
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 306px)
}
.main__error-wrapper {
  background-image: url('../img/CMYK_ttblue1.png')
}
.main__forgotten,
.main__error {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: auto;
  width: 42vw
}
.main__forgotten > span {
  margin-bottom: 40px;
  margin-top: 20px
}
.main__error > span:not(:last-of-type) {
  margin-top: 20px;
  margin-bottom: 20px
}
.main__forgotten > .main__buttons {
  margin-left: 0
}
.main__forgotten label {
  font-size: 16px
}
@media only screen and (max-width: 959px) {
  .main__forgotten-wrapper,
  .main__error-wrapper {
    min-height: calc(100vh - 475px)
  }
  .main__error-wrapper {
    background-size: contain
  }
  .main__forgotten,
  .main__error {
    font-size: 18px;
    justify-content: flex-start;
    margin: 36px;
    width: 100%
  }
}
.forgotten-password {
  text-decoration: none;
  align-self: flex-end;
  font-size: 16px;
  margin-top: 20px
}
fieldset#your-order {
  counter-reset: gift-cards
}
div.gift-card + div.gift-card {
  margin-top: var(--default-margin);
  padding-top: var(--default-margin);
  border-top: 1px solid var(--accent-color)
}
div.gift-card div.gift-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}
button.remove {
  background: none;
  border: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  color: var(--accent-color);
  cursor: pointer
}
div.gift-card h3 {
  font: var(--body-font)
}
div.gift-card h3::after {
  counter-increment: gift-cards;
  content: " #" counter(gift-cards)
}
div.gift-card p {
  max-width: 68ch;
  font-style: italic;
  line-height: 1.4
}
button#gift-card-add {
  width: max-content
}
p#total {
  font: var(--title-font);
  font-size: 24px
}
body.gift-card .summary__details p strong {
  margin-left: 1ch
}
@media only screen and (max-width: 959px) {
  .form-container .form-input,
  .form-container .form-select {
    margin-inline: 0 !important
  }
  .form-container .form-input:not(:first-of-type),
  .form-container .form-select:not(:first-of-type) {
    margin-block-start: var(--default-margin) !important
  }
  @supports not (margin-inline: 0) {
    .form-container .form-input,
    .form-container .form-select {
      margin-left: 0 !important;
      margin-right: 0 !important
    }
    .form-container .form-input:not(:first-of-type),
    .form-container .form-select:not(:first-of-type) {
      margin-top: var(--default-margin) !important
    }
  }
  label[for="gift-card-submit"] {
    width: 100% !important
  }
}
.cta {
  background-color: var(--accent-color);
  border-radius: 25px;
  box-shadow: 3px 3px 0px 0px #ffe167;
  color: var(--body-color);
  padding: 15px 60px;
  line-height: 22px;
  margin: 30px 3px;
  min-width: 194px;
  text-align: center;
  text-decoration: none;
  border: none;
  font-weight: 700
}
.cta:not(.disabled):hover {
  background-color: var(--main-color);
  color: #FFFFFF;
  cursor: pointer
}
.cta--secondary {
  background-color: #FFFFFF;
  color: var(--main-color)
}
.cta--tertiary {
  background-color: #ffffff;
  color: var(--main-color)
}
.cta--tertiary:hover {
  background-color: #ffe167 !important;
  box-shadow: 3px 3px 0 0 var(--accent-color);
  color: var(--main-color) !important
}
.cta--disabled {
  opacity: 50%;
  cursor: not-allowed
}
/* HeaderBar and sub-components */
header {
  align-items: center;
  background: transparent linear-gradient(90deg, #6D0C5C 0%, #513CA7 100%) 0% 0% no-repeat padding-box;
  display: flex;
  flex-direction: row;
  height: 100px;
  justify-content: space-between;
  white-space: nowrap;
  width: 100%;
  position: fixed;
  z-index: 20
}
.header--stepper {
  margin-bottom: 60px
}
.logo {
  height: 39px;
  margin: 0 50px;
  width: 260px
}
.stepper {
  align-items: center;
  display: flex;
  font: var(--title-font);
  font-size: 18px;
  justify-content: center;
  margin: 0 24px;
  width: 100%
}
.stepper ul {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-around;
  padding: 0;
  max-width: fit-content
}
@media only screen and (max-width: 1480px) {
  .header--stepper {
    margin-bottom: 120px
  }
  .stepper {
    background-color: var(--main-color);
    margin: 0 auto;
    position: absolute;
    top: 100px
  }
}
@media only screen and (max-width: 959px) {
  header {
    position: static
  }
  .stepper {
    left: -20px;
    right: 0;
    width: auto
  }
  .stepper ul {
    max-width: none
  }
}
.stepper li {
  display: flex;
  list-style-type: none;
  margin: 12px;
  align-items: center
}
.step__pinky,
.step__clyde,
.step__inky {
  color: #FFFFFF80
}
.step__pac::before {
  content: url('../img/CMYK_pac3.png');
  position: relative;
  bottom: -4px;
  left: -4px
}
.step__pinky::before {
  content: url('../img/CMYK_pinky1.png');
  position: relative;
  bottom: -4px;
  left: -4px
}
.step__clyde::before {
  content: url('../img/CMYK_clyde2.png');
  position: relative;
  bottom: -4px;
  left: -4px
}
.step__inky::before {
  content: url('../img/CMYK_inky1.png');
  position: relative;
  bottom: -4px;
  left: -4px
}
.stepper li.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0
}
.stepper li.dots--clear > .dot {
  background-color: transparent
}
li.stepper--mobile {
  display: none
}
.dot {
  background-color: #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  height: 6px;
  margin: 3px;
  width: 6px
}
.secure {
  align-items: center;
  display: flex;
  margin: 0 24px;
  padding-right: 15px
}
.secure::after {
  content: url('../img/icons/lock.svg');
  position: relative;
  left: 16px
}
@media only screen and (max-width: 959px) {
  li.stepper--desktop,
  div.stepper--desktop {
    display: none
  }
  li.stepper--mobile {
    display: flex
  }
  .stepper li.dots--clear > .dot {
    height: 0;
    width: 0
  }
  .secure,
  .secure::after {
    display: none
  }
}
/* Form components */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0 0 0 36px;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  z-index: 1;
  outline: none
}
select::-ms-expand {
  display: none
}
.select:not([class*="icon"]) {
  padding-inline: 16px
}
@supports not (padding-inline: 0) {
  .select:not([class*="icon"]) {
    padding-left: 16px;
    padding-right: 16px
  }
}
.select:not([class*="icon"]) select {
  margin-left: 0
}
.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  border: 2px solid var(--select-border);
  border-radius: 2px;
  padding: 12px;
  font-size: 18px;
  cursor: pointer;
  line-height: 22px;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  margin-top: auto
}
.select select,
.select::after,
.select::before {
  grid-area: select
}
.select:not(.select--multiple)::before {
  color: var(--select-border);
  position: absolute;
  left: 6px;
  display: inline-block;
  height: 20px;
  width: auto
}
.select:not(.select--multiple)::after {
  color: black;
  content: "";
  position: absolute;
  right: 6px;
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg)
}
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit
}
select[multiple] {
  padding-right: 0;
  /*
   * Safari will not reveal an option
   * unless the select height has room to
   * show all of it
   * Firefox and Chrome allow showing
   * a partial option
   */height: 6rem/*
   * Experimental - styling of selected options
   * in the multiselect
   * Not supported crossbrowser
   */
}
select[multiple] option {
  white-space: normal;
  outline-color: var(--select-focus)
}
.select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%)
}
label {
  font-size: 1.125rem;
  font-weight: 500
}
.select + label {
  margin-top: 2rem
}
.form-checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-top: 20px;
  margin-bottom: 0
}
.form-checkbox:first-of-type {
  margin-top: 40px;
  margin-bottom: 20px
}
.form-checkbox input[type="checkbox"] {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 3px;
  border: 2px solid #FFFFFF;
  color: currentColor;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font: inherit;
  justify-content: center;
  height: 20px;
  margin: 0 15px 0 0;
  width: 20px
}
.form-checkbox input[type="checkbox"]:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color)
}
.form-checkbox input[type="checkbox"]:checked::before {
  content: url('../img/icons/tick.png');
  position: relative;
  top: 3px
}
form {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  --form-row-gap: 1rem
}
label {
  margin-bottom: 20px
}
form.checkout,
form.create-account {
  margin-top: 30px
}
form.checkout label,
form.create-account label {
  font-size: 16px
}
.form-row {
  display: flex;
  flex-direction: row;
  width: 100%
}
.form-select {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
  width: 100%
}
.form-row > .form-select:not(:first-of-type) {
  margin-left: 16px
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none/* Remove default arrow */
}
.form-input {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  width: 100%
}
.form-input--constrain {
  max-width: calc(50% - var(--form-row-gap))
}
.form-input:not(:first-of-type) {
  margin-top: 40px
}
.form-input input {
  border: 2px solid var(--accent-color);
  display: block;
  padding: 14px 16px;
  width: 100%
}
fieldset {
  border: 0;
  padding: 0;
  margin-top: 40px
}
fieldset > legend {
  font: var(--title-font);
  font-size: 24px
}
fieldset > legend + * {
  margin-top: 24px
}
.form-container + .form-container,
.form-container + .form-input,
.form-container + .form-select {
  margin-top: 24px
}
.form-container > .form-select {
  margin-bottom: 0
}
.form-row > .form-input,
.form-row > .form-select {
  margin-top: 0 !important;
  margin-inline: var(--form-row-gap, 1rem)
}
.form-row > .form-input:first-of-type,
.form-row > .form-select:first-of-type {
  margin-inline-start: 0
}
.form-row > .form-input:last-of-type,
.form-row > .form-select:last-of-type {
  margin-inline-end: 0
}
@supports not (margin-inline: 0) {
  .form-row.form-container {
    margin-left: calc(var(--form-row-gap, 1rem) * -1);
    margin-right: calc(var(--form-row-gap, 1rem) * -1)
  }
  .form-row > .form-input {
    margin-left: var(--form-row-gap);
    margin-right: var(--form-row-gap)
  }
  .form-row > .form-input:first-of-type {
    margin-left: 0
  }
  .form-row > .form-input:last-of-type {
    margin-right: 0
  }
}
.form-input--password::after {
  bottom: 12px;
  content: url('../img/icons/eye.svg');
  cursor: pointer;
  position: absolute;
  right: 20px
}
.form-input span {
  display: flex;
  font-style: italic;
  font-weight: 400;
  margin-top: 20px;
  margin-left: 12px
}
.form-input span::before {
  position: relative;
  left: -12px
}
.form-input.form-input--success input {
  border-color: #0AFD00
}
.form-input.form-input--success span {
  color: #0AFD00
}
.form-input.form-input--fail input {
  border-color: #FF0000
}
.form-input.form-input--fail span {
  color: #FF0000
}
.form-notes {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 16px;
  margin-top: 10px
}
@media only screen and (max-width: 959px) {
  .form-row {
    flex-wrap: wrap
  }
  .form-row > .form-select:not(.form-select--half-mobile) {
    margin-left: 0
  }
  .form-row > .form-select--half-mobile {
    width: calc(50% - 8px)
  }
  .form-row > .form-select:nth-child(2n+1):last-child {
    margin-left: 0
  }
  .form-notes {
    line-height: 24px
  }
}
.detail {
  display: flex;
  flex-direction: column
}
.summary {
  background-color: var(--main-color);
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 10px;
  width: 100%
}
.summary__details {
  border-bottom: 1px solid #FFFFFF80;
  width: 100%
}
.summary ul {
  list-style-position: outside;
  padding-left: 0
}
.summary li {
  list-style-type: none;
  margin-bottom: 32px;
  margin-left: 72px;
  position: relative
}
.summary li::before {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 2px;
  left: -32px;
  width: 24px
}
.summary__extras,
.summary__details {
  border-bottom: 1px solid #FFFFFF80;
  margin-top: 20px
}
.summary__voucher {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px
}
.summary__voucher-applied {
  display: flex;
  flex-direction: row
}
.summary__subtotal,
.summary__total {
  display: flex;
  flex-direction: row;
  font-size: 24px;
  justify-content: space-between;
  margin-top: 24px
}
.summary .cta {
  align-self: flex-end
}
.summary .cta:hover {
  background-color: var(--body-color) !important;
  color: var(--main-color) !important
}
@media only screen and (max-width: 959px) {
  .main__confirmation-wrapper .summary {
    background-color: transparent
  }
  .summary {
    border: 1px solid #FFFFFF80;
    border-left: none;
    border-right: none;
    padding: 20px 0 0
  }
  .summary li {
    margin-left: 32px
  }
  .summary__voucher-applied {
    flex-direction: column
  }
}
.bowling-option {
  border: 1px solid var(--selected-color);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 20px 32px;
  min-height: 200px;
  transition: background-color .25s linear
}
.bowling-option:hover {
  cursor: pointer;
  background-color: var(--selected-color--fade)
}
.bowling-option:not(:first-of-type) {
  margin-top: 16px
}
.bowling-option.active {
  background-color: var(--selected-color)
}
.bowling-option > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.bowling-option__selection {
  align-items: flex-end;
  min-width: 218px
}
.bowling-option ul {
  font-size: 16px;
  line-height: 24px;
  padding-left: 20px
}
.bowling-option .form-select {
  margin-bottom: 0
}
.bowling-option__title {
  display: flex;
  flex-wrap: wrap;
  position: relative
}
.bowling-option__title h3 {
  margin-right: 16px
}
.bowling-option__offer {
  align-items: center;
  border: 1px solid #FFFFFF;
  border-radius: 21px;
  display: inline-flex;
  justify-content: center;
  font: var(--body-font);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 37px;
  position: relative;
  padding: 12px 20px 12px 40px;
  height: 41px;
  top: -8px
}
.bowling-option__offer::before {
  content: url('../../img/icons/star.svg');
  color: var(--accent-color);
  position: absolute;
  left: 16px;
  display: inline-block;
  height: 20px;
  top: 4px;
  width: auto
}
@media only screen and (max-width: 959px) {
  .bowling-option {
    flex-direction: column;
    padding: 20px
  }
  .bowling-option ul {
    margin: 4px 0 20px
  }
  .bowling-option .form-select {
    margin-top: 20px
  }
}
.extra-category {
  align-items: center;
  background-color: var(--selected-color);
  border-radius: 5px;
  display: flex;
  padding: 20px 0 20px 20px;
  width: 100%
}
.extra-category:not(:first-of-type) {
  margin-top: 10px
}
.extra-category__row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-grow: 1
}
.extra-category > img {
  border-radius: 5px;
  box-shadow: 0 3px 6px #00000029;
  width: 25%
}
.extra-category__row h3 {
  margin-bottom: 0;
  margin-left: 1.667vw/* scale proportionally to viewport*/
}
.extra-category__see {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  line-height: 19px;
  margin-right: 9px;
  white-space: nowrap;
  position: relative;
  padding-left: 60px;
  transition: all 0.6s ease-in-out
}
.extra-category__see-button {
  align-items: center;
  background-color: #FFFFFF;
  color: var(--selected-color);
  border-radius: 30px;
  display: flex;
  justify-content: flex-start;
  height: 48px;
  left: 0;
  position: absolute;
  width: 48px;
  transition: width 0.6s ease-in-out,background-color 0s,color 0s
}
.extra-category__see-button svg {
  position: relative;
  left: 13px;
  width: 21.5px;
  transition: left 0.6s ease-in-out,color 0s
}
.extra-category__see-text {
  margin-right: 32px;
  z-index: 10
}
.extra-category__see:hover .extra-category__see-button {
  background-color: var(--main-color);
  color: #FFFFFF;
  width: 100%;
  right: -28px;
  justify-content: flex-start
}
.extra-category__see:hover .extra-category__see-button svg {
  left: 33px
}
@media only screen and (max-width: 959px) {
  .extra-category {
    align-items: stretch;
    flex-direction: column;
    padding: 20px
  }
  .extra-category:not(:first-of-type) {
    margin-top: 20px
  }
  .extra-category__see:hover .extra-category__see-button {
    width: 48px
  }
  .extra-category__see:hover .extra-category__see-button svg {
    left: 13px
  }
  .extra-category__see-text {
    display: none
  }
  .extra-category__row {
    margin-top: 16px
  }
  .extra-category__row h3 {
    line-height: 34px;
    margin-left: 16px
  }
  .extra-category > img {
    width: 100%
  }
}
.main__items-container {
  display: grid;
  margin: -6px -9px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))
}
.extras__terms {
  border: 1px solid var(--selected-color);
  border-radius: 5px;
  font-size: 16px;
  line-height: 24px;
  margin-top: 20px;
  padding: 20px
}
.extras__terms ul {
  margin-bottom: 0;
  padding-left: 20px
}
.extra-item {
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 24px;
  margin: 5px 8px;
  padding: 15px
}
.extra-item img {
  box-shadow: 0 3px 6px #00000029;
  margin-bottom: 20px;
  width: 100%
}
.extra-item__img--desktop {
  display: block
}
.extra-item__img--mobile {
  display: none
}
.extra-item__price {
  font-weight: 400;
  margin: auto 0 10px;
  padding-top: 10px
}
.extra-item__counter {
  align-items: center;
  display: flex;
  justify-content: space-between
}
.extra-item__counter span {
  font-size: 24px
}
.extra-item__decrement,
.extra-item__increment {
  background-color: var(--accent-color);
  background-image: url('../img/icons/subtract.svg');
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius: 5px;
  color: #FFFFFF;
  cursor: pointer;
  height: 40px;
  width: 40px
}
.extra-item__increment {
  background-image: url('../img/icons/add.svg')
}
@media only screen and (max-width: 959px) {
  .main__items-container {
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr))
  }
  .extra-item {
    margin: 5px 5px
  }
  .extra-item__img--desktop {
    display: none
  }
  .extra-item__img--mobile {
    display: block
  }
}
.link-grid {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  margin: 0 140px 40px;
  width: 100%
}
.link-grid h2::after {
  left: 50%;
  transform: translateX(-50%)
}
.link-grid__items {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -8px 0;
  width: 100%
}
.link-grid__item-wrapper {
  align-items: flex-end;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin: 0 8px 16px;
  overflow: hidden;
  position: relative;
  width: calc(50% - 16px)
}
.link-grid__item-wrapper h2 {
  bottom: 20px;
  position: absolute;
  text-align: center;
  z-index: 10
}
.link-grid__item {
  align-items: center;
  aspect-ratio: 2/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s linear;
  width: 100%
}
.link-grid__item img {
  width: 100%
}
.link-grid__item-img--desktop {
  display: block
}
.link-grid__item-img--mobile {
  display: none
}
.link-grid__item:hover {
  transform: scale(1.1, 1.1);
  transition: all 0.2s linear
}
.link-grid__item-gradient {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 0) 70%, rgb(10, 20, 97, 1) 100%);
  height: 100%;
  position: absolute;
  width: 100%
}
@media only screen and (max-width: 959px) {
  .link-grid {
    margin-top: 40px
  }
  .link-grid__item-img--desktop {
    display: none
  }
  .link-grid__item-img--mobile {
    display: block
  }
  .link-grid__item-wrapper {
    width: 100%
  }
  .link-grid__item-wrapper h2::after {
    bottom: -20px
  }
  .link-grid__item {
    aspect-ratio: 302/225
  }
}
footer {
  align-items: center;
  background: transparent linear-gradient(270deg, #6D0C5C 0%, #513CA7 100%) 0% 0% no-repeat padding-box;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: calc(1.5 * var(--default-margin)) 0 0
}
footer section:last-of-type {
  margin-bottom: var(--default-margin)
}
footer a {
  color: var(--body-color);
  text-decoration: none
}
footer a:hover {
  text-decoration: underline;
  text-underline-position: under
}
.footer__row {
  display: flex;
  flex-direction: row
}
.footer__row:nth-child(2) a {
  font: var(--title-font);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 37px
}
.footer__row--terms {
  border-top: 1px solid #ffffff80;
  font: var(--body-font);
  min-width: 50%;
  justify-content: center
}
.footer__row > * {
  margin: 15px 25px
}
.footer__row--socials > * {
  margin: 12.5px
}
.footer__row--socials > * > svg {
  height: 25px;
  width: 25px
}
.footer__row--logo {
  padding-block-start: var(--default-margin)
}
.footer__row--logo img {
  width: 180px;
  height: auto
}
#small-print {
  justify-content: center;
  width: 100%;
  padding-block: calc(var(--default-margin) * .5);
  background-color: var(--body-color-alt);
  color: var(--body-color);
  font-size: calc(18px * .9);
  line-height: 24px
}
#small-print > * {
  text-align: center
}
#small-print a {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: inherit
}
@media only screen and (max-width: 1280px) {
  footer {
    padding: 32px 0 0
  }
  .footer__row {
    font-size: 18px;
    padding: 16px 0 32px
  }
  .footer__row:not(.footer__row--socials ) {
    flex-direction: column;
    align-items: center
  }
  .footer__row--main > * {
    margin: 0 25px
  }
  .footer__row--terms > * {
    margin: 5px 25px
  }
  .footer__row:first-child {
    padding-bottom: 0
  }
  .footer__row:nth-child(2) a {
    font-size: 18px
  }
  .footer__row:last-child {
    padding: 32px 0;
    min-width: 66%
  }
  #small-print {
    font-size: .8em
  }
}