/* global styles */
@font-face {
  font-family: OpenSans-Bold;
  src: url("../assets/fonts/OpenSans-Bold.ttf");
}
@font-face {
  font-family: OpenSans-Regular;
  src: url("../assets/fonts/OpenSans-Regular.ttf");
}
/*PREVENT STICKY BUTTONS ON TOUCH DEVICES*/
@media (pointer: coarse) {
  [data-color-link-primary]:hover,
  [data-color-link-secondary]:hover,
  [data-menu]:hover,
  [data-button]:hover,
  [data-color-social-primary]:hover,
  [data-color-social-secondary]:hover {
    opacity: 1 !important;
  }
}
[data-email] {
  position: relative;
  min-height: 100vh;
  background-color: black;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
}
:root {
  --green: #6fa435;
  --black: #000000;
  --white: #ffffff;
}
* {
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
  word-break: break-word;
  overflow-wrap: break-word;
}
h1,
h2,
h4,
h5,
h6,
p,
span {
  word-break: break-word;
}
html,
body {
  box-sizing: border-box;
  overflow-x: hidden;
  color: var(--black);
  position: relative;
  font-family: "OpenSans-Regular";
}
h1,
h2,
h4,
h5,
h6 {
  margin-bottom: 15px;
}
p {
  margin-bottom: 10px;
}
a {
  font-weight: bold;
}
.content {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}
.col-12 {
  padding: 0;
}
.row {
  margin: 0;
}
/* positioning classes for date number */
.num-pos-1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.num-pos-2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.num-pos-3 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.num-pos-4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.num-pos-5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.num-pos-6 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.num-pos-7 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.num-pos-8 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.num-pos-9 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
/* end of positioning classes for date number */
a,
a:hover {
  text-decoration: none;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  position: relative;
}
.logo-container img {
  max-width: 150px;
  object-fit: contain;
}
.text,
.footer {
  text-align: center;
  display: flex;
  justify-content: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 50px auto 0;
}
.shadow {
  position: absolute;
  z-index: 6;
  bottom: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(255, 255, 255, 0) 100%
  );
}
.footer > span,
.footer > a {
  font-size: 14px !important;
}
.header {
  margin: 10px auto 20px;
  position: relative;
}
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* BACKGROUND GRAPHICS */
.graphics-container {
  width: 100%;
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.absolute {
  position: absolute;
}
.po-none {
  pointer-events: none;
}
.tile {
  z-index: 1;
  outline: none;
}
.header,
.text {
  position: relative;
  z-index: 7;
}
.hill-1-mob {
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.hill-2-mob {
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.hill-3-mob {
  left: 0;
  bottom: 0;
  z-index: 1;
}
.bush-1 {
  right: 14%;
  bottom: 0;
  z-index: 6;
  width: 35%;
}
.bush-2 {
  right: 5%;
  bottom: 30%;
  z-index: 4;
  width: 35%;
}
.anibunny {
  bottom: 0;
  left: 14%;
  display: flex;
  flex-direction: column;
  z-index: 4;
  width: 11%;
  height: 17%;
  animation: anibunny-pop 12s linear;
  -moz-animation: anibunny-pop 12s linear;
  -webkit-animation: anibunny-pop 12s linear;
  -o-animation: anibunny-pop 12s linear;
}
.bunny-head,
.bunny-body {
  width: 100%;
}
.bunny-body {
  bottom: 0;
}
.bunny-head {
  z-index: 1;
  top: 0;
  animation: bunny-turn 5s 12s infinite;
  -moz-animation: bunny-turn 5s 12s infinite;
  -webkit-animation: bunny-turn 5s 12s infinite;
  -o-animation: bunny-turn 5s 12s infinite;
}
.bunny-1 {
  right: 5%;
  bottom: 7%;
  width: 9%;
  z-index: 4;
  transform: rotateY(180deg);
}
.bunny-2 {
  transform: rotateY(180deg) rotateZ(20deg);
  z-index: 1;
  width: 9%;
  left: 3%;
  bottom: 46%;
  opacity: 0;
}
.bunny-3 {
  width: 9%;
  z-index: -1;
  bottom: 57%;
  left: 18%;
  opacity: 0;
}
.pop-bunny {
  animation: pop-bunny 3s linear;
  -moz-animation: pop-bunny 3s linear;
  -webkit-animation: pop-bunny 3s linear;
  -o-animation: pop-bunny 3s linear;
}
.bunny-angle-1 {
  animation: bunny-pop-angle 8s 3s infinite;
  -moz-animation: bunny-pop-angle 8s 3s infinite;
  -webkit-animation: bunny-pop-angle 8s 3s infinite;
  -o-animation: bunny-pop-angle 8s 3s infinite;
}
.bunny-angle-2 {
  animation: bunny-pop-angle 10s 3s infinite;
  -moz-animation: bunny-pop-angle 10s 3s infinite;
  -webkit-animation: bunny-pop-angle 10s 3s infinite;
  -o-animation: bunny-pop-angle 10s 3s infinite;
}
/* eggs */
.egg-3 {
  bottom: 0;
  right: 0;
  z-index: 5;
  width: 25%;
}
.egg-7 {
  z-index: 5;
  width: 18%;
  bottom: 8%;
  right: 30%;
}
.egg-5 {
  width: 25%;
  left: 5%;
  bottom: 22%;
  z-index: 2;
}
.egg-2 {
  width: 18%;
  left: 28%;
  bottom: 23%;
  z-index: 2;
}
.egg-4 {
  z-index: 3;
  width: 21%;
  right: 5%;
  bottom: 30%;
}
.egg-1 {
  z-index: 1;
  width: 21%;
  left: 8%;
  bottom: 46%;
}
.egg-6 {
  width: 25%;
  z-index: 0;
  bottom: 58%;
  left: 29%;
}
.birds {
  top: 3%;
  width: 90%;
  max-width: 1000px;
}
.birds-enter {
  -moz-animation: bird-enter 7s ease-out;
  -webkit-animation: bird-enter 7s ease-out;
  -o-animation: bird-enter 7s ease-out;
  animation: bird-enter 7s ease-out;
}
.birds-idle {
  -moz-animation: birdssway 14s 8s infinite;
  -webkit-animation: birdssway 14s 8s infinite;
  -o-animation: birdssway 14s 8s infinite;
  animation: birdssway 14s 8s infinite;
}

.pop-in-late {
  animation: pop-all 4s linear;
  -moz-animation: pop-all 4s linear;
  -webkit-animation: pop-all 4s linear;
  -o-animation: pop-all 4s linear;
}
.pop-in {
  animation: pop-all 3s linear;
  -moz-animation: pop-all 3s linear;
  -webkit-animation: pop-all 3s linear;
  -o-animation: pop-all 3s linear;
}
.cloud-1 {
  width: 30%;
  left: -80%;
  top: 9%;
  z-index: -1;
  animation: cloud-move-1 30s infinite linear;
  -moz-animation: cloud-move-1 30s infinite linear;
  -webkit-animation: cloud-move-1 30s infinite linear;
  -o-animation: cloud-move-1 30s infinite linear;
}
.cloud-2 {
  width: 20%;
  left: -30%;
  top: 5%;
  z-index: -1;
  animation: cloud-move-2 30s infinite linear;
  -moz-animation: cloud-move-2 30s infinite linear;
  -webkit-animation: cloud-move-2 30s infinite linear;
  -o-animation: cloud-move-2 30s infinite linear;
}
@keyframes cloud-move-1 {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  98% {
    opacity: 1;
    transform: translateX(180vw);
  }
  99% {
    opacity: 0;
    transform: translateX(180vw);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}
@-webkit-keyframes cloud-move-1 {
  0% {
    -webkit-opacity: 1;
    -webkit-transform: translateX(0);
  }
  98% {
    -webkit-opacity: 1;
    -webkit-transform: translateX(180vw);
  }
  99% {
    -webkit-opacity: 0;
    -webkit-transform: translateX(180vw);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: translateX(0);
  }
}
@keyframes cloud-move-2 {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(-1);
  }
  98% {
    opacity: 1;
    transform: translateX(180vw) scaleX(-1);
  }
  99% {
    opacity: 0;
    transform: translateX(180vw) scaleX(-1);
  }
  100% {
    opacity: 0;
    transform: translateX(0) scaleX(-1);
  }
}
@-webkit-keyframes cloud-move-2 {
  0% {
    -webkit-opacity: 1;
    -webkit-transform: translateX(0) scaleX(-1);
  }
  98% {
    -webkit-opacity: 1;
    -webkit-transform: translateX(180vw) scaleX(-1);
  }
  99% {
    -webkit-opacity: 0;
    -webkit-transform: translateX(180vw) scaleX(-1);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: translateX(0) scaleX(-1);
  }
}
@keyframes pop-all {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  20% {
    opacity: 1;
    transform: translateY(1000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes pop-all {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(1000px);
  }
  20% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(1000px);
  }
  100% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes pop-bunny {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@-webkit-keyframes pop-bunny {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(1000px);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(0);
  }
}
@keyframes bunny-turn {
  0% {
    transform: scaleX(1);
  }
  40% {
    transform: scaleX(1);
  }
  42% {
    transform: scaleX(-1);
  }
  80% {
    transform: scaleX(-1);
  }
  82% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes bunny-turn {
  0% {
    -webkit-transform: scaleX(1);
  }
  40% {
    -webkit-transform: scaleX(1);
  }
  42% {
    -webkit-transform: scaleX(-1);
  }
  80% {
    -webkit-transform: scaleX(-1);
  }
  82% {
    -webkit-transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}
@keyframes bunny-pop-angle {
  0% {
    opacity: 0;
    transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  40% {
    opacity: 0;
    transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  42% {
    opacity: 0;
  }
  46% {
    opacity: 1;
    transform: scaleX(-1) translateY(0) rotate(345deg);
  }
  80% {
    opacity: 1;
    transform: scaleX(-1) translateY(0) rotate(345deg);
  }
  82% {
    opacity: 1;
  }
  86% {
    opacity: 0;
    transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
}
@-webkit-keyframes bunny-pop-angle {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  40% {
    -webkit-opacity: 0;
    -webkit-transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  42% {
    -webkit-opacity: 0;
  }
  46% {
    -webkit-opacity: 1;
    -webkit-transform: scaleX(-1) translateY(0) rotate(345deg);
  }
  80% {
    -webkit-opacity: 1;
    -webkit-transform: scaleX(-1) translateY(0) rotate(345deg);
  }
  82% {
    -webkit-opacity: 1;
  }
  86% {
    -webkit-opacity: 0;
    -webkit-transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: scaleX(-1) translateY(100%) rotate(345deg);
  }
}
@keyframes bunny-pop {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  40% {
    opacity: 0;
    transform: translateY(100%);
  }
  42% {
    opacity: 0;
  }
  46% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  82% {
    opacity: 1;
  }
  86% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@-webkit-keyframes bunny-pop {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
  40% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
  42% {
    -webkit-opacity: 0;
  }
  46% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
  }
  80% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
  }
  82% {
    -webkit-opacity: 1;
  }
  86% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@keyframes anibunny-pop {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  60% {
    opacity: 0;
    transform: translateY(100%);
  }
  62% {
    opacity: 0;
  }
  66% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes anibunny-pop {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
  60% {
    -webkit-opacity: 0;
    -webkit-transform: translateY(100%);
  }
  62% {
    -webkit-opacity: 0;
  }
  66% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes bird-enter {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes bird-enter {
  0% {
    -webkit-transform: translateX(100vw);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@keyframes birdssway {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes birdssway {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
.hill-1,
.hill-2,
.tree-pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .hill-1-mob,
  .hill-2-mob,
  .hill-3-mob {
    display: none;
  }
  .hill-1,
  .hill-2 {
    display: block;
    width: 100%;
    height: auto;
    bottom: 0;
    z-index: 1;
  }
  .hill-1 {
    z-index: 2;
  }
  .graphics-container {
    margin-top: auto !important;
  }
  .bush-1 {
    width: 15%;
    bottom: 3%;
    left: 31%;
    z-index: 6;
  }
  .bush-2 {
    display: none;
  }
  .anibunny {
    left: 18%;
    width: 5%;
    height: 28%;
  }
  .bunny-1 {
    width: 4%;
    right: 12%;
    bottom: 10%;
    z-index: 6;
  }
  .tree-pc {
    display: block;
    bottom: 10%;
    right: 0;
    width: 40%;
    z-index: 6;
  }
  .egg-3 {
    width: 13%;
    bottom: 9%;
    right: 10%;
  }
  .egg-7 {
    width: 9%;
    bottom: 20%;
    right: 21%;
  }
  .egg-5 {
    width: 11%;
    bottom: 6%;
    left: 27%;
  }
  .egg-2 {
    width: 10%;
    bottom: 8%;
    left: 39%;
  }
  .egg-1 {
    width: 10%;
    bottom: 20%;
    left: 3%;
  }
  .bunny-2 {
    transform: rotateY(180deg) rotateZ(-15deg);
    width: 5%;
    left: 10%;
    bottom: 19%;
  }
  .egg-6 {
    width: 12%;
    bottom: 38%;
    left: 19%;
    z-index: 0;
  }
  .egg-4 {
    width: 10%;
    bottom: 25%;
    right: 38%;
    z-index: 0;
  }
  .bunny-3 {
    width: 3%;
    left: 41%;
    bottom: 37%;
  }
}
.z-10 {
  z-index: 10;
}
/* PRIZE */
.egg {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.egg-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.prize {
  position: absolute;
  width: 90px;
  height: 90px;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scale(0.01);
}
.prize img {
  position: inherit;
  border-radius: 50%;
}
.prize-3 {
  left: -35%;
}
.prize-4 {
  left: -30%;
}
.prize-6 {
  left: -20%;
}
.prize-7 {
  left: -50%;
}
.prize-container {
  width: 100%;
  height: 100%;
}
.prize-photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(0.4);
  z-index: 1;
}
.ray {
  width: 100%;
  height: 100%;
  animation: rotate-ray 25s linear infinite;
  -moz-animation: rotate-ray 25s linear infinite;
  -webkit-animation: rotate-ray 25s linear infinite;
  -o-animation: rotate-ray 25s linear infinite;
}
@media screen and (min-width: 360px) {
  .prize {
    width: 120px;
    height: 120px;
  }
}
@media screen and (min-width: 500px) {
  .prize {
    width: 150px;
    height: 150px;
  }
}
@media screen and (min-width: 700px) {
  .prize {
    width: 170px;
    height: 170px;
  }
}
@media screen and (min-width: 768px) {
  .prize {
    width: 100px;
    height: 100px;
  }
  .prize-7 {
    left: -90%;
    bottom: -30%;
  }
  .prize-3 {
    left: 60%;
  }
  .prize-4 {
    left: 50%;
    bottom: -50%;
  }
  .prize-6 {
    left: 50%;
  }
}
@media screen and (min-width: 850px) {
  .prize-4 {
    bottom: -40%;
  }
}
@media screen and (min-width: 1024px) {
  .shadow {
    display: none;
  }
  .prize-1 {
    bottom: 25%;
    left: 10%;
  }
  .prize-2 {
    bottom: 35%;
  }
  .prize-3 {
    bottom: 30%;
  }
  .prize-4 {
    bottom: 5%;
  }
  .prize-7 {
    bottom: 20%;
    left: -55%;
  }
}
@media screen and (min-width: 1200px) {
  .prize-1 {
    bottom: 40%;
  }
  .prize-2 {
    bottom: 45%;
  }
  .prize-3 {
    bottom: 50%;
  }
  .prize-4 {
    bottom: 20%;
  }
  .prize-5 {
    bottom: 30%;
  }
  .prize-6 {
    bottom: 25%;
  }
}
@media screen and (min-width: 1400px) {
  .prize-3 {
    bottom: 80%;
  }
  .prize-7 {
    bottom: 50%;
    left: -25%;
  }
  .prize-4 {
    bottom: 35%;
  }
}
@media screen and (min-width: 1600px) {
  .prize-1 {
    bottom: 60%;
  }
  .prize-2 {
    bottom: 60%;
  }
  .prize-4 {
    bottom: 50%;
  }
  .prize-5 {
    bottom: 45%;
  }
  .prize-6 {
    bottom: 50%;
  }
  .prize-7 {
    bottom: 65%;
  }
}
@keyframes rotate-ray {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(720deg);
  }
}
@-webkit-keyframes rotate-ray {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(720deg);
  }
}

.prize-animation {
  animation: prize-animation 1s linear forwards;
  -moz-animation: prize-animation 1s linear forwards;
  -webkit-animation: prize-animation 1s linear forwards;
  -o-animation: prize-animation 1s linear forwards;
}
@keyframes prize-animation {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(0, 0);
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(2) translate(0, -50%);
  }
}
@-webkit-keyframes prize-animation {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: scale(0.3) translate(0, 0);
  }
  60% {
    -webkit-opacity: 0;
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-opacity: 1;
    -webkit-transform: scale(2) translate(0, -50%);
  }
}
.tile-animation {
  animation: tile-animation 0.1s forwards;
  -moz-animation: tile-animation 0.1s forwards;
  -webkit-animation: tile-animation 0.1s forwards;
  -o-animation: tile-animation 0.1s forwards;
}
@keyframes tile-animation {
  0% {
    clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(
      0% 20%,
      11% 29%,
      23% 20%,
      29% 33%,
      41% 16%,
      54% 28%,
      61% 9%,
      68% 21%,
      79% 13%,
      82% 29%,
      100% 19%,
      100% 100%,
      0% 100%
    );
  }
}
@-webkit-keyframes tile-animation {
  0% {
    -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(
      0% 20%,
      11% 29%,
      23% 20%,
      29% 33%,
      41% 16%,
      54% 28%,
      61% 9%,
      68% 21%,
      79% 13%,
      82% 29%,
      100% 19%,
      100% 100%,
      0% 100%
    );
  }
}

@media screen and (min-width: 600px) {
  .graphics-container {
    margin-top: 50px;
  }
}
.egg-box {
  pointer-events: all;
}
/* REGISTER PAGE */
.content-window {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 90%;
  max-width: 900px;
  margin: auto;
  margin-bottom: -120%;
  z-index: 10;
  position: relative;
  text-align: center;
  border-radius: 15px;
}
button {
  min-width: 200px;
  max-width: 100%;
}
button > span {
  max-width: 100%;
  white-space: normal;
}
.footer {
  bottom: 0;
  width: 100%;
  margin: auto;
  z-index: 10;
}
.text-box {
  padding: 10px 20px;
  border-radius: 15px;
}
.text-box > p {
  margin: 0;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;
  padding: 20px 20px 0 20px;
  position: relative;
  z-index: 1;
}
#outcome-image {
  width: 212px;
  height: 212px;
  border-radius: 50%;
  margin: 20px 0;
}
form {
  width: 100%;
  max-width: 400px;
}
div[input-group] {
  min-width: 211px;
  max-width: 400px;
  width: 100%;
}
input {
  width: 100%;
  padding: 10px;
  outline: none;
}
.form-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.form-box input,
.form-box select,
.span-select {
  width: 100%;
  border: 1px solid;
  border-radius: 30px;
  padding: 0.5rem;
  text-align: center;
  min-height: calc(1rem + 36px);
  background-color: transparent;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}
#date-of-birth-input {
  padding-top: 0.8rem;
}
#div-select {
  position: relative;
}
.span-select {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
/* checkboxes */
.custom-control-label::before,
.custom-control-label::after {
  width: 18px;
  height: 18px;
}
.check-row,
.custom-checkbox,
.custom-checkbox label {
  min-height: 27px;
  vertical-align: middle;
}
.custom-control-label::before {
  border: var(--black) 1px solid;
  background-color: transparent;
  border-radius: 0 !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: transparent;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  background-color: var(--black);
  transform: scale(0.6);
}
.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after {
  top: calc(50% - 0.55rem);
}

.custom-checkbox .custom-control-label * {
  vertical-align: middle;
}

@media screen and (min-width: 500px) {
  .decoration {
    width: 80px;
    height: 80px;
  }
}

@media screen and (min-width: 768px) {
  .left,
  .right {
    flex-basis: 47%;
    padding: 30px;
    text-align: center;
    align-items: center;
  }
  .content-window {
    border-radius: 30px;
    margin-bottom: -30%;
  }
  .submit-container {
    align-content: center;
  }
}
/* socials */
ul.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  margin: 1.5rem 0;
}

ul.social li {
  margin: 5px;
  display: inline-block;
}

ul.social li a {
  text-decoration: none;
  color: inherit;
}

ul.social li a i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: inherit;
  border-radius: 50%;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ul.social li a i:hover {
  opacity: 0.5;
}
/* cta buttons */
.cta-buttons {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 10px auto;
}
.cta {
  display: none;
  min-width: 130px;
  min-height: 45px;
  padding: 5px 10px;
  margin: 10px;
}
@media screen and (min-width: 768px) {
  .cta-buttons {
    justify-content: flex-start;
  }
}
.tile-inner {
  display: none !important;
}
/* firefox image selection color override */
img::selection {
  background: transparent;
  color: inherit;
}
img::-moz-selection {
  background: transparent;
  color: inherit;
}
/* disable screen auto-rotate on mobile */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}