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, main,
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, menu, nav, section,
main, summary {
  display: block; }

body {
  line-height: 1; }

blockquote, q {
  quotes: none; }

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

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

a {
  color: inherit;
  text-decoration: none; }

html, body {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

*, *:before, *:after {
  box-sizing: inherit;
  outline: none !important; }

@font-face {
  font-family: PerpetuaStdR;
  src: url("/fonts/PerpetuaStdR.woff2") format("woff"), url("/fonts/PerpetuaStdR.woff") format("woff"); }

@font-face {
  font-family: PerpetuaStdRItalic;
  src: url("/fonts/PerpetuaStdRItalic.woff2") format("woff"), url("/fonts/PerpetuaStdRItalic.woff") format("woff"); }

.italic {
  font-family: PerpetuaStdRItalic; }

.poemItalic {
  text-align: left;
  margin: 0 auto;
  width: 29rem;
  font-family: PerpetuaStdRItalic; }

.desktop_only {
  display: block; }

.mobile_only {
  display: none; }

main {
  display: block;
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-y: hidden; }

section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  transition: 1.2s ease transform; }

.hd {
  display: flex;
  align-items: center;
  position: fixed;
  right: 0;
  bottom: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 5px 12px 5px 12px;
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  cursor: pointer;
  z-index: 1000; }

.hdImg {
  border-radius: 100px;
  width: 21px;
  height: 21px;
  margin-right: 8px; }

.hdText {
  transform: translateY(1px); }

p, li, #typed, .typed-cursor, .ptCenterMargin, .poemItalic, .ptEnd {
  font-size: 1.8rem; }

p, li, #typed, .typed-cursor, .ptCenterMargin, .poemItalic, .headerContainer, .ptButton, .ptEnd {
  color: var(--color);
  text-shadow: var(--shadow); }

body, html {
  text-align: center;
  line-height: 1.45;
  font-family: PerpetuaStdR;
  font-size: 10px;
  background-color: var(--background); }
  @media screen and (max-width: 482px) {
    body, html {
      font-size: 9.1px; } }
  @media screen and (max-width: 375px) {
    body, html {
      font-size: 8.3px; } }
  @media screen and (max-width: 360px) {
    body, html {
      font-size: 8px; } }
  @media screen and (max-width: 354px) {
    body, html {
      font-size: 7.2px; } }
  @media screen and (max-height: 685px) and (min-width: 482px) {
    body, html {
      font-size: 9.9px; } }
  @media screen and (max-height: 645px) and (min-width: 482px) {
    body, html {
      font-size: 9.7px;
      line-height: 1.4; } }
  @media screen and (max-height: 615px) and (min-width: 482px) {
    body, html {
      font-size: 9.6px;
      line-height: 1.4; } }
  @media screen and (max-height: 607px) and (min-width: 482px) {
    body, html {
      font-size: 9.5px;
      line-height: 1.4; } }
  @media screen and (max-height: 595px) and (min-width: 482px) {
    body, html {
      font-size: 9.3px;
      line-height: 1.4; } }
  @media screen and (min-height: 750px) and (min-width: 482px) {
    body, html {
      font-size: 10.5px;
      line-height: 1.5; } }
  @media screen and (min-height: 780px) and (min-width: 482px) {
    body, html {
      font-size: 11px; } }
  @media screen and (min-height: 830px) and (min-width: 482px) {
    body, html {
      font-size: 11.4px; } }
  @media screen and (min-height: 855px) and (min-width: 482px) {
    body, html {
      font-size: 11.7px; } }
  @media screen and (min-height: 880px) and (min-width: 482px) {
    body, html {
      font-size: 12px; } }
  @media screen and (min-height: 930px) and (min-width: 482px) {
    body, html {
      font-size: 12.5px; } }
  @media screen and (min-height: 970px) and (min-width: 482px) {
    body, html {
      font-size: 13px; } }
  @media screen and (min-height: 1000px) and (min-width: 482px) {
    body, html {
      font-size: 13.4px; } }
  @media screen and (min-height: 1024px) and (min-width: 482px) {
    body, html {
      font-size: 13.8px; } }

.fixedSection {
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: 0 auto; }
  @media screen and (max-height: 700px) and (min-width: 482px) {
    .fixedSection {
      bottom: 1.7rem; } }
  @media screen and (max-height: 670px) and (min-width: 482px) {
    .fixedSection {
      bottom: 1.4rem; } }
  @media screen and (max-height: 650px) and (min-width: 482px) {
    .fixedSection {
      bottom: 1.2rem; } }
  @media screen and (min-height: 800px) and (min-width: 482px) {
    .fixedSection {
      bottom: 2.5rem; } }
  @media screen and (min-height: 930px) and (min-width: 482px) {
    .fixedSection {
      bottom: 3rem; } }
  @media screen and (max-height: 770px) and (max-width: 482px) {
    .fixedSection {
      bottom: 3.5rem; } }
  @media screen and (max-height: 560px) and (max-width: 482px) {
    .fixedSection {
      bottom: 2rem; } }
  @media screen and (max-height: 550px) and (max-width: 482px) {
    .fixedSection {
      bottom: 0rem; } }

.wraphighlights {
  margin: 0 auto 3rem auto; }
  @media screen and (max-height: 700px) and (min-width: 482px) {
    .wraphighlights {
      margin: 0 auto 3rem auto; } }
  @media screen and (max-height: 690px) and (min-width: 482px) {
    .wraphighlights {
      margin: 0 auto 2.7rem auto; } }
  @media screen and (max-height: 655px) and (min-width: 482px) {
    .wraphighlights {
      margin: 0 auto 2rem auto; } }
  @media screen and (max-height: 770px) and (max-width: 482px) {
    .wraphighlights {
      margin: 0 auto 3.5rem auto; } }
  @media screen and (max-height: 560px) and (max-width: 482px) {
    .wraphighlights {
      margin: 0 auto 2rem auto; } }
  @media screen and (max-height: 550px) and (max-width: 482px) {
    .wraphighlights {
      margin: 0 auto 1.3rem auto; } }

.headerContainer {
  justify-content: center;
  padding: 2.3rem 0px 1.2rem 0px;
  display: flex;
  letter-spacing: 4.5px;
  font-size: 1.9rem; }
  @media screen and (min-height: 800px) and (min-width: 482px) {
    .headerContainer {
      padding: 2.8rem 0px 1.5rem 0px; } }
  @media screen and (min-height: 930px) and (min-width: 482px) {
    .headerContainer {
      padding: 3.36rem 0px 1.8rem 0px; } }
  @media screen and (max-height: 770px) and (max-width: 482px) {
    .headerContainer {
      padding: 4rem 0px 2.16rem 0px;
      font-size: 2.28rem; } }
  @media screen and (max-height: 560px) and (max-width: 482px) {
    .headerContainer {
      padding: 3.3rem 0px 1.8rem 0px;
      font-size: 1.9rem; } }
  @media screen and (max-height: 550px) and (max-width: 482px) {
    .headerContainer {
      padding: 2.3rem 0px 1.2rem 0px;
      font-size: 1.9rem; } }

.hcSkip {
  cursor: pointer;
  transform: translateY(-2px);
  letter-spacing: normal;
  font-size: 1.8rem !important; }
  @media screen and (max-height: 770px) and (max-width: 482px) {
    .hcSkip {
      transform: translateY(1px); } }
  @media screen and (max-height: 560px) and (max-width: 482px) {
    .hcSkip {
      transform: translateY(-2px); } }
  @media screen and (max-height: 550px) and (max-width: 482px) {
    .hcSkip {
      transform: translateY(0px); } }

.paddingTop {
  height: 2.15rem;
  width: 100%; }
  @media screen and (min-height: 800px) and (min-width: 482px) {
    .paddingTop {
      height: 2.6rem; } }
  @media screen and (min-height: 930px) and (min-width: 482px) {
    .paddingTop {
      height: 3.12rem; } }
  @media screen and (max-height: 770px) and (max-width: 482px) {
    .paddingTop {
      height: 3.7rem; } }
  @media screen and (max-height: 560px) and (max-width: 482px) {
    .paddingTop {
      height: 3rem; } }
  @media screen and (max-height: 550px) and (max-width: 482px) {
    .paddingTop {
      height: 2.15rem; } }

.hcCenterMargin {
  margin: 0 10rem 0 9.6rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin {
      margin: 0 8rem 0 7.68rem; } }

.hcSkipBlank {
  visibility: hidden; }

.nightModeOn {
  width: 1.2rem;
  height: 1.2rem;
  transform: translateY(2px); }

.break {
  margin-top: 1.8rem;
  display: block;
  content: ""; }
  @media screen and (max-height: 665px) and (min-width: 482px) {
    .break {
      margin-top: 1.6rem; } }
  @media screen and (max-height: 625px) and (min-width: 482px) {
    .break {
      margin-top: 1.45rem; } }
  @media screen and (min-height: 830px) and (min-width: 482px) {
    .break {
      margin-top: 2rem; } }

.aTop {
  margin-top: 1.2rem;
  display: block;
  content: ""; }
  @media screen and (max-height: 665px) and (min-width: 482px) {
    .aTop {
      margin-top: 1.06rem; } }
  @media screen and (max-height: 625px) and (min-width: 482px) {
    .aTop {
      margin-top: .96rem; } }
  @media screen and (min-height: 830px) and (min-width: 482px) {
    .aTop {
      margin-top: 1.32rem; } }

.aBottom {
  margin-top: .2rem;
  display: block;
  content: ""; }
  @media screen and (max-height: 665px) and (min-width: 482px) {
    .aBottom {
      margin-top: .17rem; } }
  @media screen and (max-height: 625px) and (min-width: 482px) {
    .aBottom {
      margin-top: .15rem; } }
  @media screen and (min-height: 830px) and (min-width: 482px) {
    .aBottom {
      margin-top: .23rem; } }

.poemBreak {
  margin-top: 1.2rem;
  display: block;
  content: ""; }
  @media screen and (max-height: 665px) and (min-width: 482px) {
    .poemBreak {
      margin-top: 1.06rem; } }
  @media screen and (max-height: 625px) and (min-width: 482px) {
    .poemBreak {
      margin-top: .96rem; } }

@media screen and (max-height: 666px) and (min-width: 482px) {
  .wraphighlightsPage1 ul {
    margin: 1.8rem 0px 1.5rem 0px; } }

@media screen and (max-height: 650px) and (min-width: 482px) {
  .wraphighlightsPage1 ul {
    margin: 1.8rem 0px 1.25rem 0px; } }

@media screen and (max-height: 614px) and (min-width: 482px) {
  .wraphighlightsPage1 ul {
    margin: 1.6rem 0px 1.1rem 0px; } }

.hoverOpacityG {
  background-color: rgba(150, 240, 75, 0.5) !important;
  transition: background-color .4s; }

.hoverOpacityY {
  background-color: rgba(255, 238, 110, 0.6) !important;
  transition: background-color .4s; }

.hoverOpacityB {
  background-color: rgba(80, 205, 236, 0.48) !important;
  transition: background-color .4s; }

.hoverOpacityP {
  background-color: rgba(255, 80, 210, 0.34) !important;
  transition: background-color .4s; }

.hoverOpacityO {
  background-color: rgba(255, 140, 0, 0.38) !important;
  transition: background-color .4s; }

.hoverOpacityM {
  background-color: rgba(87, 130, 255, 0.41) !important;
  transition: background-color .4s; }

.line1Highlight:hover .p1line1 {
  background-color: rgba(150, 240, 75, 0.5) !important;
  transition: background-color .4s; }

.line2Highlight:hover .p1line2 {
  background-color: rgba(255, 238, 110, 0.6) !important;
  transition: background-color .4s; }

.line3Highlight:hover .p1line3 {
  background-color: rgba(80, 205, 236, 0.48) !important;
  transition: background-color .4s; }

.line4Highlight:hover .p1line4 {
  background-color: rgba(255, 80, 210, 0.34) !important;
  transition: background-color .4s; }

.line5Highlight:hover .p1line5 {
  background-color: rgba(255, 140, 0, 0.38) !important;
  transition: background-color .4s; }

.line6Highlight:hover .p1line6 {
  background-color: rgba(87, 130, 255, 0.41) !important;
  transition: background-color .4s; }

.jimHover:hover .jim {
  background-color: rgba(150, 240, 75, 0.5) !important;
  transition: background-color .4s; }

body {
  --background: white;
  --color: #333;
  --shadow: 0 1px 2px transparent; }

.nightmode {
  --background: #1B2836;
  --color: white;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

.wh2 {
  max-width: 40rem; }

.wh3 {
  max-width: 48rem; }

.wh4 {
  max-width: 52rem; }

.wh5 {
  max-width: 53rem; }

ul {
  display: flex;
  list-style-type: none;
  margin: 1.8rem 0px 1.8rem 0px; }

li {
  flex: 1; }

.ptContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333; }

.ptCenterMargin {
  margin: 0 5rem; }

.ptButton {
  font-size: 2.2rem;
  transform: translateY(2px);
  cursor: pointer; }

.green {
  background-color: rgba(150, 240, 75, 0.65);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  transition: all .4s !important; }

.yellow {
  background-color: rgba(255, 238, 110, 0.78);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  transition: all .4s !important; }

.blue {
  background-color: rgba(80, 205, 236, 0.62);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  transition: all .4s !important; }

.pink {
  background-color: rgba(255, 80, 210, 0.44);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  transition: all .4s !important; }

.orange {
  background-color: rgba(255, 140, 0, 0.5);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  transition: all .4s !important; }

.purple {
  background-color: rgba(87, 130, 255, 0.53);
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.section-2, .section-3, .section-4, .section-5, .section-6, .section-7, .section-8, .section-9, .section-10, .section-11, .section-12, .section-13, .section-14, .section-15, .section-16, .section-17, .section-18, .section-19, .section-20, .section-21, .section-22 {
  transform: translateY(100vh); }

.animate-out {
  transform: translateY(-100vh); }

.animate-in {
  transform: translateX(0); }

.twitter {
  width: 20px;
  height: 17px; }

.moonBlack {
  fill: var(--color); }

.plusButton {
  color: black;
  opacity: 0;
  font-size: 1.8rem !important; }

.plusButtonAlt {
  color: black;
  opacity: 1;
  cursor: pointer;
  font-size: 1.8rem !important;
  transform: translateY(2px); }

.hcCenterMargin2 {
  margin: 0 11.8rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin2 {
      margin: 0 9.44rem; } }

.hcCenterMargin3 {
  margin: 0 16rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin3 {
      margin: 0 13.5rem; } }

.hcCenterMargin4 {
  margin: 0 10.5rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin4 {
      margin: 0 9.4rem; } }

.hcCenterMargin5 {
  margin: 0 12rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin5 {
      margin: 0 9.6rem; } }

.hcCenterMargin6 {
  margin: 0 9.9rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin6 {
      margin: 0 7.92rem; } }

.hcCenterMargin7 {
  margin: 0 9.7rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin7 {
      margin: 0 7.8rem; } }

.hcCenterMargin8 {
  margin: 0 9.8rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin8 {
      margin: 0 11.5rem; } }

.hcCenterMargin9 {
  margin: 0 10.8rem; }
  @media screen and (max-width: 482px) {
    .hcCenterMargin9 {
      margin: 0 8.64rem; } }

.hide {
  visibility: hidden; }

/* HIGHLGIHTS SECTION */
.wraphighlightsPage1 {
  max-width: 48rem;
  margin: 0 auto; }

.p1Equaliser {
  visibility: hidden; }

.disableClick > * {
  pointer-events: none;
  position: relative; }

#typed-strings1 {
  display: block; }

.typedStringsContainerSkip {
  display: none; }

.tom {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.jim {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.austin {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.mark {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.james {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.james2 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline; }

.p1line1 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(150, 240, 75, 0.65); }

.p1line2 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(255, 238, 110, 0.78); }

.p1line3 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(80, 205, 236, 0.62); }

.p1line4 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(255, 80, 210, 0.44); }

.p1line5 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(255, 140, 0, 0.5); }

.p1line6 {
  border-radius: 100px;
  padding: 1px 2px;
  display: inline;
  opacity: 0;
  background-color: rgba(87, 130, 255, 0.53); }

.tscsActive .tom {
  background-color: rgba(150, 240, 75, 0.65);
  transition: background-color .4s; }

.tscsActive .jim {
  background-color: rgba(255, 238, 110, 0.78);
  transition: background-color .4s; }

.tscsActive .austin {
  background-color: rgba(80, 205, 236, 0.62);
  transition: background-color .4s; }

.tscsActive .mark {
  background-color: rgba(255, 80, 210, 0.44);
  transition: background-color .4s; }

.tscsActive .james {
  background-color: rgba(255, 140, 0, 0.5);
  transition: background-color .4s; }

.tscsActive .james2 {
  background-color: rgba(87, 130, 255, 0.53);
  transition: background-color .4s; }

.whActive .p1line1 {
  opacity: 1;
  transition: background-color .4s; }

.whActive .p1line2 {
  opacity: 1;
  transition: background-color .4s; }

.whActive .p1line3 {
  opacity: 1;
  transition: background-color .4s; }

.whActive .p1line4 {
  opacity: 1;
  transition: background-color .4s; }

.whActive .p1line5 {
  opacity: 1;
  transition: background-color .4s; }

.whActive .p1line6 {
  opacity: 1;
  transition: background-color .4s; }

.ptActive {
  opacity: 1 !important; }

.p1ptContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  opacity: 0; }

.p1ptLeftButton {
  visibility: hidden; }

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinites; }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.noScroll {
  overflow: hidden; }

.puOuterContainer {
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.8s;
  font-size: 10px; }
  @media screen and (min-width: 1300px) {
    .puOuterContainer {
      font-size: 11px; } }
  @media screen and (min-width: 1400px) {
    .puOuterContainer {
      font-size: 12px; } }
  @media screen and (min-width: 1500px) {
    .puOuterContainer {
      font-size: 13px; } }

.puInnerContainer {
  background: white;
  width: 25em;
  transition: height 0.3s;
  opacity: 0;
  display: none;
  border: 2.5em solid #FFCB05;
  position: relative; }
  .puInnerContainer .cross {
    display: none; }
    @media screen and (max-width: 1000px) {
      .puInnerContainer .cross {
        font-size: 13px;
        position: absolute;
        top: -1.6em;
        left: 16.1em;
        font-size: 1.3em;
        color: black;
        font-family: Helvetica;
        cursor: pointer;
        display: block; } }

.buyHardback, .donate, .emailMe, .clickContents, .cpIntroduction, .cpPhilosophy, .cpFrank, .cpInformation, .cpExperiences, .cpThreeStories, .cpFlyingMachine, .cpEpilogue, .cpBonusTrack {
  cursor: pointer; }

.popUpBorder {
  border-top: 0.1em solid rgba(51, 51, 51, 0.5);
  padding-top: 1em; }

.borderAdjustment {
  padding-bottom: .6em; }

.neoMain {
  position: absolute;
  padding: 1.5em 2.0em 1.2em 2.0em;
  width: 20em;
  transition: opacity 0.2s;
  display: none;
  opacity: 0;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .neoMain li {
    list-style: none;
    line-height: 1.66em;
    font-size: 1.5em;
    text-align: left; }

.neoHardback {
  position: absolute;
  padding: 1.5em 2.0em 1.2em 2.0em;
  width: 20em;
  opacity: 0;
  display: none;
  transition: opacity 0.2s;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

.neoDonate {
  position: absolute;
  padding: 1.5em 2.0em 1.2em 2.0em;
  width: 20em;
  opacity: 0;
  display: none;
  transition: opacity 0.2s;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

.neoEmail {
  position: absolute;
  padding: 1.5em 2.0em 1.2em 2.0em;
  width: 20em;
  opacity: 0;
  display: none;
  transition: opacity 0.2s;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .neoEmail li {
    list-style: none;
    line-height: 1.66em;
    font-size: 1.5em; }

.neoContents {
  position: absolute;
  padding: 1.5em 2.0em 1.2em 2.0em;
  width: 20em;
  transition: opacity 0.2s;
  display: none;
  opacity: 0;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .neoContents li {
    list-style: none;
    line-height: 1.66em;
    font-size: 1.5em;
    text-align: left; }

form .formInput, form #card-errors {
  font-size: 1.5em;
  font-family: PerpetuaStdR;
  border: none;
  padding-bottom: .53em;
  display: block;
  width: 100%; }
  form .formInput::-webkit-input-placeholder, form #card-errors::-webkit-input-placeholder {
    color: #333;
    opacity: 1 !important; }
  form .formInput:-moz-placeholder, form #card-errors:-moz-placeholder {
    color: #333;
    opacity: 1 !important; }
  form .formInput::-moz-placeholder, form #card-errors::-moz-placeholder {
    color: #333;
    opacity: 1 !important; }
  form .formInput:-ms-input-placeholder, form #card-errors:-ms-input-placeholder {
    color: #333;
    opacity: 1 !important; }
  form .formInput:-webkit-autofill, form #card-errors:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px white inset; }

.field {
  position: relative;
  padding-bottom: .8em;
  height: 2.7em; }
  .field .innerFormInput {
    font-size: 1.5em;
    border: none;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100; }
    .field .innerFormInput::-webkit-input-placeholder {
      color: #333333; }
    .field .innerFormInput:-moz-placeholder {
      color: #333333; }
    .field .innerFormInput::-moz-placeholder {
      color: #333333; }
    .field .innerFormInput:-ms-input-placeholder {
      color: #333333; }
    .field .innerFormInput:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 100px white inset; }

.opacityDown {
  opacity: 0; }

.label {
  font-size: 1.5em;
  border: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  transform: translateY(-2px);
  color: #333333; }

.buySection {
  border-top: 1px solid rgba(51, 51, 51, 0.5);
  display: flex;
  justify-content: space-between;
  font-family: PerpetuaStdR;
  font-size: 1.5em;
  padding-top: .66em;
  color: #333333; }

.buyButton, .donateButton {
  border: none;
  color: #333333;
  cursor: pointer;
  font-family: PerpetuaStdR;
  padding: 0px;
  background: none;
  font-size: 1em; }

.formInputHidden {
  display: none; }

.moneyDown {
  transform: translateY(-0.45em);
  display: inline-block;
  font-size: .86em;
  cursor: pointer; }

.middleMoney {
  margin: 0 .6em 0 .6em;
  width: 10em !important; }

.moneyUp {
  font-size: .93em;
  cursor: pointer; }

.StripeElement {
  background-color: white;
  padding: 0px;
  border: none;
  transition: all .25s ease;
  color: #333333; }

.StripeElement--focus {
  border: 1px solid #3ECF8E; }

.StripeElement--invalid {
  border-color: #fa755a; }

.StripeElement--webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px white inset; }

.puOuterContainerFlash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: black;
  transition: background-color 1.2s; }

.puInnerContainerFlash {
  background: #FFCB05;
  padding: 25px;
  transition: opacity 1s; }

.puiiContainerFlash {
  background: white;
  padding: 17px 20px; }
  .puiiContainerFlash li {
    list-style: none;
    line-height: 25px;
    font-size: 15px; }