/************ CSS RESET ************/
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;
}

/* HTML5 display-role reset for older browsers */
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;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

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

textarea:focus,
input:focus {
  outline: none;
}

*:focus {
  outline: none;
}

@font-face {
  font-family: "Bitterbrush W00 Regular";
  src: url("/css/fonts/0402d318-adfc-4b2e-be04-f52f364c1d1f.woff") format("woff");
}
body[data-theme=red] {
  --theme-primary: #d3383d;
  --theme-primary-dark: #a82830;
  --theme-primary-light: #f5c5c7;
}

body[data-theme=yellow] {
  --theme-primary: #f0aa10;
  --theme-primary-dark: #b87e00;
  --theme-primary-light: #fde8a0;
}

body[data-theme=brown] {
  --theme-primary: #b67128;
  --theme-primary-dark: #8a5218;
  --theme-primary-light: #e8c89a;
}

body[data-theme=green] {
  --theme-primary: #6c9427;
  --theme-primary-dark: #4e6d1c;
  --theme-primary-light: #c0d89a;
}

/***** STANDARD *****/
html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  background: var(--theme-primary);
  color: #000000;
  line-height: 1.4;
  font-weight: 400;
}

@media only screen and (max-width: 900px) {
  body {
    background-position: top center;
  }
}
@media only screen and (min-width: 640px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (max-width: 640px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (max-width: 400px) {
  html {
    font-size: 14px;
  }
}
.desktop {
  display: block !important;
}

.mobile {
  display: none !important;
}

@media only screen and (max-width: 640px) {
  .mobile {
    display: block !important;
  }
  .desktop {
    display: none !important;
  }
}
a {
  text-decoration: underline;
  color: inherit;
}

.no-word-break,
.nwb {
  white-space: nowrap;
}

.fw {
  display: block;
  width: 100%;
}

/*
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*/
.hero-video {
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.hero-video video {
  width: 102%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 50%;
  left: 51%;
  transform: translateX(-51%) translateY(-50%);
  z-index: 1;
}

@media screen and (max-width: 991px) {
  .hero-video {
    aspect-ratio: 1/1;
  }
}
@media screen and (min-width: 992px) {
  .hero-video {
    height: 80vh !important;
  }
}
.d-none {
  display: none !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

@media (min-width: 576px) {
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
}
.content {
  width: 100%;
  padding-top: 1px;
  margin-top: -1px;
  padding: 20px 0px;
}

.inner-content {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  /*padding: 50px 0px;*/
}

h1 {
  font-size: 2.625rem;
  line-height: normal;
  text-align: center;
  font-family: "Bitterbrush W00 Regular", arial;
  text-transform: uppercase;
}

#main-content {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

#site-body {
  overflow: hidden;
  background-color: #ffffff;
  background-image: url("../img/body-bg.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

/*** SITE HEADER (themed) ***/
#site-header {
  position: relative;
  background: var(--theme-primary);
  overflow: hidden;
}
#site-header img.header-decor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
#site-header .content-wrapper {
  position: relative;
  z-index: 1;
}

img.oetker-tab {
  position: absolute;
  display: block;
  top: 280px;
  right: 0;
  width: 61px;
  height: 36px;
  z-index: 1000;
}

img#logo {
  display: block;
  width: 164px;
  margin-top: 22px;
  margin-left: 22px;
}

@media only screen and (max-width: 1080px) {
  img.oetker-tab {
    width: 51px;
    height: 30px;
    top: 0;
    right: 5%;
    transform: rotate(-90deg);
  }
}
@media only screen and (max-width: 900px) {
  #site-header img.header-decor {
    bottom: -10%;
    width: 250%;
  }
}
@media only screen and (max-width: 640px) {
  #site-body {
    background-size: 300% auto;
  }
}
@media only screen and (max-width: 480px) {
  #site-header img.header-decor {
    left: -25%;
    bottom: -5%;
    width: 350%;
  }
}
/*** TOP HEADER **/
#top-header {
  display: flex;
  gap: 3rem;
  align-items: center;
  width: 90%;
  max-width: 916px;
  margin: 0 auto;
  padding: 3rem 0 5rem;
  /** Start vertical ***/
  /*
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 789px;
  */
  /** End vertical ***/
}

#top-header-content {
  flex: 1;
  text-align: center;
}
#top-header-content .top-header-title {
  max-width: 700px;
  margin: 0 auto;
  font-size: 3.5rem;
}
#top-header-content .top-header-title .top {
  display: block;
  font-family: "Bitterbrush W00 Regular", arial;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
}
#top-header-content .top-header-title .bot {
  display: block;
  margin-top: -15px;
  font-family: "DrOetkerAugustScript", arial;
  line-height: 1;
  color: #ffffff;
}
#top-header-content .top-header-body {
  width: 90%;
  max-width: 520px;
  margin: 0.75rem auto 0px;
  font-size: 1.125rem;
  line-height: 1.61;
  color: #ffffff;
}

.top-header-img {
  position: relative;
  width: 50%;
  max-width: 367px;
  margin: 0;
}
.top-header-img img {
  filter: drop-shadow(0px 5px 25px rgba(0, 0, 0, 0.3));
}
.top-header-img img.header-puff {
  position: absolute;
  top: -19%;
  right: -19%;
  width: 40%;
  z-index: 1;
}

#top-header-final {
  margin-top: 3rem;
}
#top-header-final h1 {
  margin-bottom: 0.25rem;
  font-size: 2.75rem;
}
#top-header-final .top-header-body {
  width: 100%;
  max-width: 500px;
  font-size: 1.125rem;
  text-align: center;
  margin: 0 auto;
}

@media only screen and (max-width: 900px) {
  .content-wrapper {
    box-sizing: border-box;
  }
  .content-wrapper,
  #compete-page {
    padding: 0px 5%;
  }
  #top-header {
    width: 100%;
    flex-direction: column-reverse;
    gap: 1.5rem;
    margin: 4rem auto 0;
    padding: 2rem 0 4rem;
  }
  #top-header .top-header-img {
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
    /** Start vertical ***/
    /*
    width: 95%;
    max-width: unset;
    margin-top: 0;
    */
    /** End vertical ***/
  }
  #top-header .top-header-title {
    flex-basis: 100%;
    margin-bottom: 0px;
    /** Start vertical ***/
    /** End vertical ***/
  }
  img#logo {
    width: 130px;
    margin-left: 0px;
    margin-top: 2.5%;
  }
}
@media only screen and (max-width: 660px) {
  #top-header .top-header-title {
    font-size: 9.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .content-wrapper {
    padding: 0px 5%;
  }
  #compete-page {
    padding: 0;
  }
  #top-header {
    margin-top: 4rem;
  }
  #top-header .top-header-img {
    /*
    margin-bottom: 0.5rem;
    width: 70%;
    max-width: 300px;
    */
    /** Start vertical ***/
    /*
    width: 110%;
    max-width: unset;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    */
    /** End vertical ***/
  }
  #top-header .top-header-img .header-puff {
    top: -14%;
    right: -12%;
    width: 35%;
  }
  #top-header .top-header-body {
    width: 95%;
    font-size: 1.25rem;
  }
  img#logo {
    width: 150px;
    margin-top: 4%;
  }
  img#logo.combined {
    width: 204px;
  }
}
@media only screen and (max-width: 480px) {
  #top-header {
    margin-top: 2rem;
  }
  #top-header .top-header-title .bot {
    margin-top: -2.5vw;
  }
  #top-header .top-header-img .header-puff {
    top: -23%;
    right: -26%;
    width: 47%;
  }
  img#logo {
    width: 120px;
  }
  img#logo.combined {
    width: 190px;
  }
}
#packshots {
  width: 90%;
  margin: 4rem auto 2rem;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
#packshots .inner-content {
  max-width: 1000px;
  display: flex;
  justify-content: center;
  gap: 5%;
  flex-wrap: wrap;
}
#packshots .packshot {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  flex-basis: 20%;
}
#packshots .packshot img {
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.23));
  -webkit-transform: translate3d(0, 0, 0);
}

@media only screen and (max-width: 640px) {
  #packshots {
    margin: 3rem auto 1rem;
  }
  #packshots .packshot {
    margin: 5% auto;
    flex-basis: 40%;
  }
}
@media only screen and (max-width: 640px) {
  #main-page {
    margin-top: 2rem;
  }
}
/*** Instruction **/
#instructions h1 {
  color: #5e2518;
  line-height: 100%;
}

#instruction-intro {
  max-width: 580px;
  margin: 0.75rem auto 0px;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

#instruction-wrapper {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.instruction {
  width: 39%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.instruction .step {
  display: inline-block;
  height: 60px;
  width: 60px;
  background-color: var(--theme-primary);
  border-radius: 50%;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  line-height: 60px;
}
.instruction .text {
  margin-top: 16px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.3;
}

.instruction-notice {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.3125rem;
  line-height: 1.2;
  color: var(--theme-primary-dark);
  border: 3px solid var(--theme-primary-dark);
  border-radius: 10px;
}

.instruction-misc-text {
  width: 100%;
  max-width: 580px;
  margin: 0px auto;
  text-align: center;
}
.instruction-misc-text #instruction-top {
  margin-top: 2rem;
  font-size: 0.875rem;
}
.instruction-misc-text #instruction-bottom {
  max-width: 580px;
  margin: 1.25rem auto 0px;
  font-size: 0.8125rem;
  line-height: 1.3;
}

@media only screen and (max-width: 900px) {
  .instruction .step {
    font-size: 33px;
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 640px) {
  #instructions h1 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .instruction .text {
    font-size: 1.125rem;
  }
  .instruction-misc-text #instruction-top,
  .instruction-misc-text #instruction-bottom {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 480px) {
  .instruction {
    width: 50%;
  }
}
/** COMPETE **/
#submission-wrapper {
  margin-top: 2rem;
}

.submission-form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /*grid-template-rows: repeat(3, 1fr);*/
  /*
  column-gap: 1.5rem;
  row-gap: 1.25rem;
  */
  gap: 1.5rem;
  /*grid-auto-flow: row;*/
  grid-template-areas: "name name email email phone phone" "address address address zip city city" "previous-customer previous-customer previous-customer terms terms terms";
}
.submission-form.has-image-upload {
  grid-template-areas: "name name email email phone phone" "address address address zip city city" "receipt receipt receipt receipt receipt receipt" "previous-customer previous-customer previous-customer terms terms terms";
}

@media only screen and (max-width: 900px) {
  .submission-form {
    grid-template-columns: repeat(8, 1fr);
    row-gap: 1.25rem;
    column-gap: 1.5rem;
    grid-template-areas: "name name name name name phone phone phone " "email email email email email email email email" "address address address address address address address address" "zip zip city city city city city city" "previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer" "terms terms terms terms terms terms terms terms";
  }
  .submission-form.has-image-upload {
    grid-template-areas: "name name name name name phone phone phone " "email email email email email email email email" "address address address address address address address address" "zip zip city city city city city city" "receipt receipt receipt receipt receipt receipt receipt receipt" "previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer previous-customer" "terms terms terms terms terms terms terms terms";
  }
}
@media only screen and (max-width: 360px) {
  .submission-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*grid-template-rows: repeat(3, 1fr);*/
    /*
    column-gap: 1.5rem;
    row-gap: 1.25rem;
    */
    gap: 1.5rem;
    /*grid-auto-flow: row;*/
    grid-template-areas: "name name name" "email email email" "phone phone phone" "address address address" "zip city city" "previous-customer previous-customer previous-customer" "terms terms terms";
  }
  .submission-form.has-image-upload {
    grid-template-areas: "name name name" "email email email" "phone phone phone" "address address address" "zip city city" "receipt receipt receipt" "previous-customer previous-customer previous-customer" "terms terms terms";
  }
}
.name-wrapper {
  grid-area: name;
}

.email-wrapper {
  grid-area: email;
}

.phone-wrapper {
  grid-area: phone;
}

.address-wrapper {
  grid-area: address;
}

.zip-wrapper {
  grid-area: zip;
}

.city-wrapper {
  grid-area: city;
}

.receipt-wrapper {
  grid-area: receipt;
}

.previous-customer-wrapper {
  grid-area: previous-customer;
  margin-top: 1rem;
}

.terms-wrapper {
  grid-area: terms;
  margin-top: 1rem;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

label {
  display: block;
  font-size: 1.125rem;
  font-family: "Bitterbrush W00 Regular";
  color: #5e2518;
}
.previous-customer-wrapper label, .terms-wrapper label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem !important;
  font-weight: 600;
  color: #1a1919;
}

.text-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0.5rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  line-height: 1.5;
  border-radius: 3px;
  color: #1a1919;
  background-color: #fff;
  border: 2px solid #000000;
  border-radius: 16px;
  -webkit-appearance: none;
  outline: none;
  transition: all 0.25s ease-in-out;
}
.text-input:focus {
  border: 2px solid var(--theme-primary-dark);
}
.text-input.receipt-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.text-input.receipt-label svg {
  flex-basis: 30px;
}
.text-input.receipt-label > span {
  flex: 1;
  max-width: 95%;
  font-family: "DrOetkerMomentsText";
  font-size: 17px;
  line-height: 120%;
  color: #000000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-input.receipt-label > span span {
  opacity: 0.6;
}

@media only screen and (max-width: 640px) {
  .previous-customer-wrapper label,
  .terms-wrapper label {
    font-size: 1rem !important;
  }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a1919;
  -webkit-box-shadow: 0 0 0px 40rem #fffbf4 inset;
}

.radio-wrapper,
.radio-element,
.checkbox-element {
  display: flex;
  align-items: center;
}

.radio-wrapper {
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.radio-element,
.checkbox-element {
  gap: 0.5rem;
}

.checkbox-element a {
  text-decoration: underline;
}

input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #ffffff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 24px;
  height: 24px;
  border: 2px solid #000000;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type=radio]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--theme-primary-dark);
  /* Windows High Contrast Mode */
  background-color: var(--theme-primary-light);
}

input[type=radio]:checked::before {
  transform: scale(1);
}

input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #ffffff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  width: 24px;
  height: 24px;
  border: 2px solid #000000;
  border-radius: 4px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type=checkbox]::before {
  content: "";
  width: 11px;
  height: 11px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: center center;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--theme-primary-dark);
  /* Windows High Contrast Mode */
  background-color: var(--theme-primary-light);
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

#submit-btn-wrapper {
  text-align: center;
}

img#footer-logo {
  display: block;
  width: 120px;
  margin: 1.5rem auto 3rem;
}

a#submit-btn {
  display: inline-block;
  padding: 12px 68px 16px;
  margin: 55px auto 0;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  font-family: "Bitterbrush W00 Regular", arial;
  text-decoration: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  background-color: var(--theme-primary);
}
a#submit-btn:hover {
  background-color: var(--theme-primary-dark);
}
a#submit-btn.loading {
  pointer-events: none;
  cursor: default;
  color: var(--theme-primary);
}

#submit-loading {
  display: none;
  margin: 55px auto 0px;
}

.spinner {
  margin: 30px auto;
  width: 70px;
  text-align: center;
}
.spinner > div {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.white > div {
  background-color: #fff;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  background-color: var(--theme-primary);
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  background-color: var(--theme-primary);
}
.spinner .bounce3 {
  background-color: var(--theme-primary);
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
#error-msg {
  display: none;
  margin-top: 40px;
  color: var(--theme-primary);
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.15;
}

#thank-you {
  display: none;
  width: 100%;
  max-width: 610px;
  font-size: 1.125rem;
  text-align: center;
  margin: 5rem auto 0;
}
#thank-you h1 {
  margin-bottom: 0.5rem;
  color: #5e2518;
  line-height: 100%;
}
#thank-you div {
  margin-top: 0.5rem;
}

@media only screen and (max-width: 900px) {
  label {
    font-size: 1.25rem !important;
  }
}
@media only screen and (max-width: 360px) {
  label {
    font-size: 1.125rem !important;
  }
}
/*** Footer ***/
#footer {
  width: 80%;
  margin: 3rem auto;
  font-size: 1.125rem;
  text-align: center;
}

/** Cookie box ***/
#cookie-box {
  background-color: #f7e9d6;
  background: linear-gradient(180deg, #fdf9f5 0%, #f7e9d6 100%), #efdbb2;
  border-bottom: 6px solid var(--theme-primary-light);
}

#cookie-box .inner-content {
  max-width: 810px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
}

#cookie-box .cookie-text {
  margin-right: 2rem;
  font-size: 0.875rem;
}

#cookie-box a.btn {
  margin: 0.5rem 0 0;
  padding: 10px 40px;
  font-size: 1.125rem;
  font-family: "Bitterbrush W00 Regular", arial;
  color: #ffffff;
  background-color: var(--theme-primary);
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 10px;
}

@media only screen and (max-width: 480px) {
  #cookie-box a.btn {
    margin: 0.5rem 0 0;
    padding: 8px 20px;
  }
  #cookie-box .cookie-text {
    margin-right: 1rem;
    font-size: 0.9375rem;
  }
}