body,
html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  background: #dfdfdf url("../assets/repeating-logo.png") center center repeat;
  background-size: 4em;
}

#outer-wrapper {
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
  -webkit-perspective-origin: center;
  perspective-origin: center;
  pointer-events: none;
  filter: blur(16px);
  position: absolute;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  cursor: grab;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  left: 0;
  top: 0;
}

#outer-wrapper.ready {
  pointer-events: inherit;
  filter: blur(0);
  opacity: 1;
}

#outer-wrapper.complete {
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.8;
}

#field {
  background: url("../assets/field_background.png") no-repeat center center;
  -webkit-backface-visibility: hidden;
  background-size: contain;
  height: 100vh;
  width: 100vh;

  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: transform 0.6s ease-in-out;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55%;
}

#field:after {
  background: url("../assets/field_background_extended.png") no-repeat center
    center;
  transform-origin: center bottom;
  background-size: contain;
  content: " ";
  width: 100%;
  height: 100%;

  transform: translateX(-50%) translateY(-47.1%) scale(1.27);
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
}

#grid #grid-inner {
  transform-origin: center center;
  transform: scale(1.02);
  display: inline-block;
  position: relative;
  left: -0.145rem;
  top: 0.112rem;
  width: 100%;
}

#grid #grid-inner .grid-item.selected {
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
  border-color: rgba(125, 255, 240, 0.9);
  background: rgba(124, 252, 0, 0.995);
  cursor: not-allowed;
}

#grid #grid-inner .grid-item.purchased {
  border-color: rgba(255, 180, 180, 0.9);
  background: rgba(255, 0, 0, 0.995);
  cursor: not-allowed;
}

#grid #grid-inner .grid-item.pending {
  border-color: rgba(180, 180, 0, 0.9);
  background: rgba(255, 255, 64, 0.995);
  cursor: not-allowed;
}

@media (hover: hover) {
  #grid #grid-inner .grid-item.selected:hover {
    z-index: 9999999;
  }

  #grid #grid-inner .grid-item.selected div.turf-tile:hover {
    background: rgba(255, 0, 0, 0.85);
    box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.9);
    cursor: not-allowed;
  }

  #grid #grid-inner .grid-item.purchased div.turf-tile:hover {
    border-color: rgba(255, 180, 180, 0.9);
    background: rgba(255, 0, 0, 0.85);
    cursor: not-allowed;
    box-shadow: none;
  }

  #grid #grid-inner .grid-item.pending div.turf-tile:hover {
    border-color: rgba(180, 180, 0, 0.9);
    background: rgba(255, 255, 64, 0.85);
    cursor: not-allowed;
    box-shadow: none;
  }
}

#grid #grid-inner .grid-item[data-tile-data*=" 0"] {
  pointer-events: none;
  border-bottom: none;
  border-right: none;
  border-top: none;
}

#grid #grid-inner .grid-item[data-tile-data*="-1"] {
  pointer-events: none;
  border-bottom: none;
  border-right: none;
  border-left: none;
  border-top: none;
}

#grid #grid-inner .grid-item span {
  z-index: 99999;
  position: relative;
  color: black;
  width: 6px;
  height: 6px;
  font-family: "Teko", Arial;
  font-size: 0.25rem;
  font-weight: 400;
  display: inline-block;
  left: 0.03rem;
  top: -0.55rem;
  text-align: center;
  transform: scale(1.3);
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
}

#grid #grid-inner .grid-item span.top {
  left: 0.03rem;
  top: -1.095rem;
}

#grid #grid-inner .grid-item span.letter-label.top.extra {
  left: -0.4rem;
  top: -1.8rem;
}

#grid #grid-inner .grid-item span.letter-label {
  transform: rotate(-90deg) scale(1.3);
  left: 0.13rem;
  top: -0.595rem;
}

#grid #grid-inner .grid-item span.letter-label.top {
  transform: rotate(-90deg) scale(1.3);
  left: -0.43rem;
  top: -0.63rem;
}

#grid #grid-inner .grid-item div.turf-tile {
  background: transparent;
  transform: scale(1.3);
  display: inline-block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

@media (hover: hover) {
  #grid #grid-inner .grid-item div.turf-tile:hover {
    background: rgba(124, 252, 0, 0.995);
    cursor: copy;
  }
}

@media (hover: hover) {
  #grid #grid-inner .grid-item.selected div.turf-tile:hover {
    border-color: rgba(225, 149, 155, 0.9);
    background: rgba(124, 252, 0, 0.995);
  }
}

#tile-cart {
  border: 2px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.7s ease-in-out;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
  font-family: "Teko", Arial;
  border-radius: 8px;
  visibility: hidden;
  font-size: 1.25rem;
  min-height: 2.8rem;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  bottom: 1rem;
  width: 14rem;
  left: 1rem;
  flex: none;
}

#tile-cart.expanded {
  width: 720px;
}

#tile-cart.complete {
  pointer-events: none;
}

#tile-cart.expanded.minimize {
  height: 2.8rem;
}

#tile-cart.expanded.minimize .minimize-selections {
  transform: scale(1.7, 1.2) translateY(0.22rem) rotate(180deg);
}

#tile-cart .title {
  background: rgba(214, 74, 69, 0.95);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.5rem 1rem 0.2rem 0.9rem;
  text-shadow: 0 0 2px black;
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  width: 100%;
}

#tile-cart .title .selection-count {
  padding-right: 1.2rem;
  display: none;
  float: right;
}

#tile-cart.expanded .title .selection-count {
  display: inline-block;
}

#tile-cart .title .minimize-selections {
  transform: scale(1.7, 1.2) translateY(-0.35rem) rotate(0deg);
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  display: none;
  float: right;
}

#tile-cart.expanded .title .minimize-selections {
  display: inline-block;
}

#tile-cart .selections {
  padding: 0.8rem 0.9rem;
  overflow-y: scroll;
  font-size: 1.5rem;
  overflow-x: hidden;
  max-height: 80vh;
}

#tile-cart .selections .inner {
  font-weight: 500;
}

#tile-cart .selections .inner marquee {
  margin-bottom: -0.65rem;
  font-weight: 300;
}

#tile-cart .selections ul {
  box-sizing: border-box;
  list-style-type: none;
  padding: 0 2.2rem 0 0;
  overflow: hidden;
  height: 100%;
  width: 720px;
  margin: 0;
}

#tile-cart .selections ul li {
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
}

#tile-cart .selections ul li.selection-list-item {
  justify-content: space-between;
  margin: 0 0 0.4rem 0;
  font-size: 1.5rem;
  display: flex;
  width: 100%;
  padding: 0;
  gap: 2rem;
}

#tile-cart .selections ul li.selection-list-item .tile-coords {
  transition: transform 0.6s ease-in-out;
  transform-origin: left;
}

#tile-cart .selections ul li.selection-list-item:hover .tile-coords {
  transform: scale(1.1);
}

#tile-cart .selections ul li span.header {
  font-weight: 600;
  min-width: 157px;
}

#tile-cart .selections ul li span.header:first-child {
  width: 145px;
}

#tile-cart .selections ul li span.header.center {
  text-align: center;
}

#tile-cart .selections ul li span.header:last-child {
  text-align: right;
}

#tile-cart .selections ul li.headers span.header:last-child {
  margin-right: -0.2rem;
}

#tile-cart .selections ul li span.header hr.divider {
  position: relative;
  top: -1.35rem;
  width: 510px;
}

#tile-cart .selections ul li span input {
  border-color: rgba(0, 0, 0, 0.4);
  padding: 0.3rem 0.6rem 0.15rem;
  font-family: "Teko", Arial;
  box-sizing: border-box;
  margin-right: -0.5rem;
  border-radius: 0.4rem;
  margin-left: 0.6rem;
  font-size: 1.2rem;
  height: 1.8rem;
  width: 105%;
}

#tile-cart .selections ul li .tile-coords {
  display: inline-block;
  width: 2.8rem;
  width: 60px;
}

#tile-cart .selections ul li .tile-price {
  position: relative;
  text-align: right;
  font-style: italic;
  min-width: 150px;
  color: #0e260e;
}

#tile-cart .selections ul li .tile-price .student-toggle {
  transform-origin: left center;
  transform: scale(0.9);
  position: absolute;
  text-align: left;
  left: -0.175rem;
  display: none;
  top: -0.5rem;
  width: 122px;
}

#tile-cart .selections ul li .tile-price .student-toggle.student {
  display: block;
}

#tile-cart .selections ul li .tile-price .student-toggle input {
  display: inline-block;
  width: 1.5rem;
  position: relative;
  top: 0.45rem;
}

#tile-cart .selections ul li .remove-list-item {
  display: inline-block;
  position: relative;
  text-align: left;
  font-size: 1.3rem;
  cursor: pointer;
  color: #d64a45;
  top: -0.03rem;
  width: 90px;
}

#tile-cart.complete .selections ul li .remove-list-item {
  opacity: 0;
}

#tile-cart .selections ul li .remove-list-item em {
  transition: transform 0.12s ease-in-out;
  margin: 0.3rem 0.6rem -0.1rem 0.2rem;
  -moz-transform: translateY(0.2rem);
  display: inline-block;
  font-style: inherit;
  line-height: 0.3rem;
  font-family: Arial;
  font-weight: bold;
  /* overflow: hidden; */
  font-size: 35px;
  height: 1rem;
}

@media (hover: hover) {
  #tile-cart .selections ul li .remove-list-item:hover em {
    transform: rotate(180deg) scale(1.1);
    -moz-transform: translateY(0.2rem);
  }
}

#tile-cart .selections ul li.total {
  margin: 0.3rem 0 -0.6rem 0.1rem;
  text-align: right;
  font-weight: 600;
}

#tile-cart .selections ul li.total header.center {
  font-size: 1.55rem;
}

#tile-cart .selections ul li.total strong {
  font-style: italic;
  font-weight: 600;
  color: green;
}

#tile-cart .selections ul li.submit button {
  border: 2px solid rgba(255, 255, 255, 0.9);
  margin: 1.2rem -0.2rem 0.2rem 0;
  padding: 0.55rem 0.9rem 0.2rem;
  font-family: "Teko", Arial;
  border-radius: 4px;
  background: #439f14;
  font-size: 1.5rem;
  width: 154px;
  color: #fff;
}

#tile-cart .selections ul li.submit {
  margin-bottom: -0.2rem;
  display: inline-block;
  position: relative;
  text-align: center;
  top: -2.1rem;
}

#tile-cart .selections ul li.submit span {
  width: auto;
}

#tile-cart .selections ul li.submit span.or-line {
  padding-right: 2rem;
  padding-left: 2rem;
}

#tile-cart .selections ul li.submit span.or-line:before {
  transform: scaleX(2.1);
  display: inline-block;
  margin-right: 0.6rem;
  content: "–";
}

#tile-cart .selections ul li.submit span.or-line:after {
  transform: scaleX(2.1);
  display: inline-block;
  margin-left: 0.6rem;
  content: "–";
}

#tile-cart .selections ul li.submit .paypal-btn {
  background: #ffcc33;
  padding-top: 0.2rem;
  font-size: 1.5rem;
  color: #333;
}

#tile-cart .selections ul li.submit .paypal-btn img {
  transform: scale(1.25);
  margin-left: 0.1rem;
  position: relative;
  top: 0.3rem;
}

#tile-cart .selections ul li.submit .check-btn {
  border: 1px solid #439f14;
  background: #ffffff;
  padding-top: 0.2rem;
  font-size: 1.5rem;
  color: #333;
}

#tile-cart .selections ul li.submit .check-btn img {
  transform: scale(1.35);
  margin-left: 0.1rem;
  position: relative;
  top: 0.3rem;
}

@media (hover: hover) {
  #tile-cart .selections ul li.submit button:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

#tile-cart .selections ul li.footer .submit-notes {
  margin-bottom: -3.6rem;
  letter-spacing: 0.2px;
  line-height: 1.7rem;
  position: relative;
  margin-top: 1.1rem;
  text-align: center;
  font-size: 1.2rem;
  top: -2.3rem;
  width: 100%;
}

#tile-cart .selections ul li.footer .submit-notes small {
  display: inline-block;
  margin-top: -1.3rem;
  line-height: 1.2rem;
}

#tile-cart .selections ul li.submit .button-wrapper {
  min-width: auto;
}

#tile-cart .selections ul li.submit .button-wrapper em {
  font-size: 1.2rem;
  margin: 0 0.3rem;
  font-weight: 500;
  font-style: normal;
}

#tile-cart .selections ul li.submit input {
  border-color: rgba(0, 0, 0, 0.3);
  margin: -7.1rem 0.6rem 0.5rem 0;
  padding: 0.5rem 0.7rem 0.3rem;
  position: relative;
  text-align: left;
  font-size: 1.3rem;
  height: auto;
  width: 148px;
  top: -0.1rem;
}

#tile-cart .selections ul li.submit .form-submitted {
  margin: 2.6rem 0 1.3rem;
  display: none;
}

#tile-cart .selections ul li.submit .form-submitted.active {
  animation: grow 4s ease-in-out infinite;
  text-shadow: 0 0 2px #20a60266;
  display: inline-block;
}

#tile-cart .selections ul li.submit .form-submitted.mailing {
  position: relative;
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 500;
}

#tile-cart .selections ul li.submit .form-submitted.show {
  display: inline-block;
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes growButton {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes growCurrent {
  0% {
    transform: rotate(90deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(1.25);
  }
  100% {
    transform: rotate(90deg) scale(1);
  }
}

#tile-cart .selections ul li.submit input.error {
  border-color: rgba(255, 0, 0, 0.9);
}

#zoom-controls {
  visibility: hidden;
  position: fixed;
  z-index: 9999;
  width: 3.4rem;
  bottom: 1rem;
  right: 1rem;
}

#zoom-controls .donation-bar {
  height: calc(100vh - 300px - 3rem);
  margin-bottom: 0.7rem;
  pointer-events: none;
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
  width: 100%;
}

#zoom-controls .donation-bar .donation-bar-current {
  border-color: transparent transparent #e63731 transparent;
  filter: drop-shadow(1px -1px 0.25px rgba(0, 0, 0, 0.6));
  transition: all 2.5s cubic-bezier(0.47, 1.64, 0.41, 1);
  animation: growCurrent 3.2s ease-in-out infinite;
  border-width: 0 10px 15px 10px;
  transform: rotate(90deg);
  border-style: solid;
  position: absolute;
  color: #20a602;
  height: 0px;
  left: -0.8rem;
  opacity: 0;
  width: 0px;
  bottom: 0;
}

#zoom-controls .donation-bar .donation-bar-current.active {
  bottom: var(--donation-fill-current);
  opacity: 1;
}

#zoom-controls .donation-bar .donation-bar-title {
  transform-origin: bottom center;
  transform: scale(0.95);
  font-family: "Teko", Arial;
  text-transform: uppercase;
  line-height: 1.2rem;
  position: absolute;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: #f0554b;
  top: 0.0001rem;
  display: block;
  left: -0.1rem;
  width: 100%;
  height: 10%;
}

#zoom-controls .donation-bar .donation-bar-title div {
  text-shadow: 0px 1px 2px #000, 1px 0px 2px #000, 1px 1px 2px #000,
    -1px -1px 3px #000, -1px 2px 2px #000;
  transform: translateX(-50%);
  display: inline-block;
  position: absolute;
  text-align: center;
  bottom: 0.25rem;
  width: 110px;
  left: 50%;
}

#zoom-controls .donation-bar .donation-bar-title div span {
  font-size: 1.7875rem;
  color: #fff;
}

#zoom-controls .donation-bar .donation-bar-title div em {
  letter-spacing: 2px;
  color: #72e858;
}

#zoom-controls .donation-bar .donation-bar-inner {
  -webkit-mask-image: url("./assets/bat-meter-mask.png");
  mask-image: url("./assets/bat-meter-mask.png");
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-repeat: round;
  -webkit-mask-size: cover;
  mask-repeat: round;
  position: absolute;
  mask-size: cover;
  width: 100%;
  height: 90%;
  bottom: 0;
}

#zoom-controls .donation-bar .donation-bar-inner .donation-bar-bat {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  z-index: 10;
  bottom: 0;
}

#zoom-controls .donation-bar .donation-bar-inner .donation-bar-bat-dashed {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  z-index: 3;
  bottom: 0;
}

#zoom-controls .donation-bar .donation-bar-inner .donation-bar-fill {
  transition: all 2.5s cubic-bezier(0.47, 1.64, 0.41, 1);
  background: linear-gradient(
    0deg,
    #000000 0%,
    #222222 50%,
    #353535 98%,
    rgba(255, 255, 255, 0.01) 100%
  );
  position: absolute;
  display: flex;
  width: 100%;
  height: 0%;
  z-index: 5;
  bottom: 0;
}

#zoom-controls .donation-bar .donation-bar-inner .donation-bar-fill.active {
  height: var(--donation-fill-percent);
}

#zoom-controls .donation-bar .donation-bar-inner .donation-bar-background {
  background: linear-gradient(
    90deg,
    rgba(200, 200, 200, 0.8) 0%,
    rgba(241, 241, 241, 0.8) 25%,
    rgba(245, 245, 245, 0.8) 40%,
    rgba(241, 241, 241, 0.8) 55%,
    rgba(170, 170, 170, 0.8) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
  bottom: 0;
}

#zoom-controls .zoom-button,
#zoom-controls .dimension,
#zoom-controls .rotation {
  transition: transform 0.15s ease-in-out;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  user-select: none;
  -moz-user-select: none;
  -webkit-text-select: none;
  -webkit-user-select: none;
  border: 2px solid #fff;
  line-height: 4rem;
  border-radius: 8px;
  text-align: center;
  font-family: "Teko", Arial;
  font-size: 3.6rem;
  cursor: pointer;
  height: 3.4rem;
  width: 3.4rem;
  float: left;
}

#zoom-controls .zoom-button.in {
  margin-bottom: 0.7rem;
}

#zoom-controls .dimension {
  margin-bottom: 0.7rem;
  line-height: 3.7rem;
  font-size: 2.5rem;
}

#zoom-controls .rotation {
  margin-bottom: 0.7rem;
  line-height: 3.7rem;
  position: relative;
  font-size: 2.5rem;
}

#zoom-controls .rotation svg {
  transition: transform 0.6s ease-in-out;
  transform: rotate(0deg);
  position: absolute;
  left: 0.4rem;
  top: 0.5rem;
}

@media (hover: hover) {
  #zoom-controls .zoom-button:hover,
  #zoom-controls .dimension:hover,
  #zoom-controls .rotation:hover {
    background: rgba(180, 180, 180, 0.7);
    transform: scale(1.1);
    cursor: pointer;
  }
}

#tile-tooltip {
  transform: translate(-4.9rem, -4.3rem);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.6rem 1rem 0.3rem;
  font-family: "Teko", Arial;
  backdrop-filter: blur(8px);
  transform-origin: bottom;
  box-sizing: border-box;
  border: 2px solid #fff;
  display: inline-block;
  pointer-events: none;
  border-radius: 12px;
  text-align: center;
  position: absolute;
  font-size: 1.4rem;
  font-weight: 500;
  width: 10.5rem;
  z-index: 999;
}

#tile-tooltip:after {
  color: rgba(255, 255, 255, 0.7);
  transform: scaleY(0.5);
  position: absolute;
  top: 2.2rem;
  left: 4.2rem;
  content: "▼";
}

#tile-tooltip.purchased {
  border: 4px solid rgba(215, 0, 0, 0.7);
}

#tile-tooltip.pending {
  border: 4px solid rgba(210, 210, 0, 0.7);
}

#tile-tooltip .tooltip-price {
  margin-left: 0.7rem;
  color: green;
}

#tile-tooltip .tooltip-price.selected {
  text-shadow: 1px 0 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  color: rgb(215, 0, 0);
}

#tile-tooltip .tooltip-price.selected.pending {
  text-shadow: 1px 0 1px black, 0 1px 1px black;
  color: rgb(230, 230, 0);
}

#logo {
  position: fixed;
  left: -0.4rem;
  top: -1rem;
}

#copyright {
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: "Teko", Arial;
  padding: 0.15rem 0.3rem 0;
  text-transform: uppercase;
  font-size: 1rem;
  position: fixed;
  height: 1.3rem;
  right: 0rem;
  top: 0rem;
}

#copyright span {
  letter-spacing: -2px;
  margin-right: 0.1rem;
}

#copyright a {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.2);
  -webkit-text-stroke-width: 0.8px;
  color: #f78026;
}

#copyright-overlay {
  font-family: "Teko", Arial;
  background: transparent;
  padding: 0.1rem 0.3rem;
  color: transparent;
  font-size: 1rem;
  z-index: 999999;
  position: fixed;
  top: 0;
  right: 0;
}

div[data-lastpass-icon-root] {
  display: none;
}

div[data-lastpass-infield] {
  display: none;
}

.coming-soon {
  background: #f2f2f2 url("../assets/repeating-logo.png") center center repeat;
  z-index: 9999999999999999;
  background-size: 4em;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.coming-soon img {
  transform: translateX(-50%) translateY(-50%);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation: fadeIn 2.5s ease-in;
  position: absolute;
  min-width: 420px;
  max-width: 40%;
  left: 52%;
  top: 38%;
}

.coming-soon p {
  filter: drop-shadow(0px 0px 7px #fff) drop-shadow(0px 0px 7px #fff)
    drop-shadow(0px 0px 7px #fff) drop-shadow(0px 0px 7px #fff);
  transform: translateX(-50%) translateY(-50%);
  animation: fadeIn 5s ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  font-family: "Teko", Arial;
  text-align: center;
  position: absolute;
  font-size: 3.5rem;
  width: 100%;
  left: 50%;
  top: 46%;
}

.coming-soon .footer {
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  font-family: "Teko", Arial;
  padding: 0.15rem 0.3rem 0;
  text-transform: uppercase;
  display: inline-flex;
  position: fixed;
  font-size: 1rem;
  height: 1.3rem;
  width: 295px;
  left: 50%;
  bottom: 0%;
}

.coming-soon .footer a {
  color: #f78026;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#additional-controls {
  position: fixed;
  z-index: 9999;
  width: 3.4rem;
  bottom: 10.65rem;
  left: 1rem;
}

#additional-controls.minimize {
  bottom: 4.65rem;
}

#additional-controls .more-donate,
#additional-controls .more-sponsors {
  transition: transform 0.15s ease-in-out;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: "Teko", Arial;
  border: 2px solid #fff;
  -webkit-text-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: 3.9rem;
  border-radius: 8px;
  text-align: left;
  margin-top: 0.5rem;
  font-size: 2.2rem;
  cursor: pointer;
  height: 3.4rem;
  width: 223px;
  float: left;
}

#additional-controls .more-donate span,
#additional-controls .more-sponsors span {
  padding-left: 1rem;
}

#additional-controls .more-donate p,
#additional-controls .more-sponsors p {
  display: inline-block;
  margin: 0;
}

#additional-controls .more-donate svg,
#additional-controls .more-sponsors svg {
  position: relative;
  top: 0.5rem;
}

#additional-controls .more-sponsors svg {
  margin-left: 0.25rem;
  margin-right: 0.3rem;
  width: 31px;
  top: 0.25rem;
}

@media (hover: hover) {
  #additional-controls .more-donate:hover,
  #additional-controls .more-sponsors:hover {
    background: rgba(180, 180, 180, 0.7);
    transform: scale(1.025);
    cursor: pointer;
  }
}

.modal {
  transition: transform 0.8s cubic-bezier(0.47, 1.14, 0.41, 1),
    top 0.8s cubic-bezier(0.47, 1.14, 0.41, 1), box-shadow 0.2s ease-in-out;
  filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, 0.4));
  transform: translateX(-50%) translateY(0%) scale(0.1);
  background: rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(23, 23, 23, 0.299);
  box-shadow: 0px 0px 0px #fff;
  transform-origin: top center;
  backdrop-filter: blur(14px);
  box-sizing: border-box;
  border-radius: 24px;
  position: absolute;
  padding: 0 3rem 3rem;
  z-index: 99300;
  height: fit-content;
  max-height: 90vh;
  width: 90vw;
  left: 50%;
  top: 140%;
}

.modal {
  flex-direction: column;
  justify-content: start;
  display: flex;
}

.modal.active {
  transition: transform 1.8s cubic-bezier(0.47, 1.14, 0.41, 1),
    top 0.8s cubic-bezier(0.47, 1.14, 0.41, 1), box-shadow 2s ease-in-out;
  /* filter: drop-shadow(0px 0px 155px #000) drop-shadow(0px 0px 155px #fff)
    drop-shadow(0px 0px 155px #fff); */
  transform: translateX(-50%) translateY(-50%) scale(1);
  top: 50%;
}

.modal .row {
  justify-content: space-evenly;
  margin-bottom: 1.3rem;
  flex-direction: row;
  display: flex;
  width: 100%;
  gap: 2rem;
}

.modal .row.flex-equal {
  overflow-y: scroll;
  flex: 1;
}

.modal .row.flex-equal * {
  flex: 1;
}

.modal a.close-modal {
  margin: 0.7rem 0 1.2rem;
  align-self: flex-end;
  position: relative;
  right: -2.3rem;
}

#donate-now-modal.modal {
  min-height: 80vh;
}

#how-to-donate.modal {
  justify-content: center;
  padding: 2rem 2rem 1rem;
  min-width: 70vw;
  width: 70vw;
}

#reserve-check-modal.modal {
  justify-content: center;
  padding: 2rem 2rem 4rem;
  min-width: 70vw;
  width: 70vw;
}

#how-to-donate.modal h2,
#donate-now-modal.modal h2,
#what-you-get-modal.modal h2 {
  /* text-shadow: 1px 1px 0.5px #000, 1px 1px 1px #000; */
  font-family: "Teko", Arial;
  margin-bottom: 1rem;
  position: relative;
  text-align: center;
  font-size: 2.2rem;
  margin-top: -3rem;
  font-weight: 700;
  color: #d64a45;
  width: 100%;
  z-index: 10;
}

#how-to-donate.modal p,
#donate-now-modal.modal p,
#reserve-check-modal.modal p {
  font-family: "Teko", Arial;
  margin-bottom: -2rem;
  position: relative;
  font-size: 1.455rem;
  font-weight: 400;
  margin-top: 0;
  z-index: 10;
}

#how-to-donate.modal p,
#reserve-check-modal.modal p {
  line-height: 1.6rem;
  margin-top: 0rem;
  text-align: center;
  margin-bottom: 0;
  width: 100%;
}

#how-to-donate.modal p.pay-with-check,
#how-to-donate.modal p.just-donate,
#donate-now-modal.modal p.just-donate,
#reserve-check-modal.modal p.pay-with-check {
  margin-top: -0.8rem;
  margin-bottom: 0.7rem;
  font-size: 2rem;
}

#how-to-donate.modal p.just-donate a,
#donate-now-modal.modal p.just-donate a {
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 0.55rem 0.9rem 0rem;
  display: inline-block;
  background: #ffcc33;
  margin-left: 0.4rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  color: #fff;
  top: 0.9rem;
}

#how-to-donate.modal .round-number {
  border: 2px solid #000;
  width: 2.1rem;
  display: inline-block;
  height: 2.1rem;
  line-height: 2.45rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

#how-to-donate.modal hr {
  border-top: 1px solid #000;
  margin-top: -1.8rem;
  width: 50%;
  opacity: 0.2;
}

#how-to-donate.modal h2 {
  display: inline-block;
  margin-bottom: 3rem;
  line-height: 2rem;
}

#how-to-donate.modal p.just-donate a {
  min-width: 110px;
}

#how-to-donate.modal a.close-modal {
  right: -2.6rem;
  top: -3.3rem;
}

#how-to-donate.modal p.start-picker a {
  animation: growButton 4s ease-in-out infinite;
  padding: 1.2rem 1rem 0rem;
  text-decoration: none;
  background: #4d9f5c;
  display: inline-block;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  color: #fff;
  top: 0.9rem;
}

#how-to-donate.modal p.pay-with-check a {
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 0.55rem 0.9rem 0rem;
  display: inline-block;
  background: #fff;
  margin-left: 0.4rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  color: #fff;
  top: 0.9rem;
}

@media (hover: hover) {
  #donate-now-modal.modal p.just-donate a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

#what-you-get-modal.modal p {
  font-family: "Teko", Arial;
  margin-bottom: -3rem;
  position: relative;
  font-size: 1.655rem;
  font-weight: 400;
  margin-top: 0;
  z-index: 10;
}

#what-you-get-modal.modal p strong {
  font-weight: 600;
}

#what-you-get-modal.modal img {
  border-radius: 20px;
  overflow: hidden;
}