* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: white;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
  }
}

.tp-header {
  z-index: 50;
  height: calc(30px + 4vh);
  width: 100%;
  padding: calc(3px + .25vh) calc(3px + .25vw);
  position: fixed;
  background: rgba(255, 255, 255, 0.98);
}

.tp-header .tp-logo {
  max-height: 100%;
  max-width: 100%;
}

.tp-hero {
  z-index: 100;
  position: relative;
}

.tp-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-bottom: 10vh;
}

.tp-wrapper.tp-patrick {
  --rayColorInner: hsl(51, 100%, 83%);
  --rayColorMiddle: hsl(43, 100%, 65%);
  --rayColorOuter: hsl(23, 100%, 65%);
  --rayBackground: radial-gradient(
      circle at 50% 55%,
      hsl(48, 100%, 56%) 10%,
      hsl(38, 100%, 49%) 40%,
      hsl(29, 100%, 47%) 60%,
      hsl(11, 100%, 16%) 100%);
  background: var(--rayBackground);
}

.tp-wrapper.tp-family {
  --rayColorInner: hsl(179, 100%, 83%);
  --rayColorMiddle: hsl(201, 100%, 52%);
  --rayColorOuter: hsl(213, 100%, 46%);
  --rayBackground: radial-gradient(
      circle at 50% 55%,
      hsl(189, 100%, 56%) 10%,
      hsl(208, 100%, 46%) 40%,
      hsl(218, 100%, 44%) 60%,
      hsl(227, 100%, 16%) 100%);
  background: var(--rayBackground);
}

.tp-wrapper.tp-pearl {
  --rayColorInner: #ffe3f2;
  --rayColorMiddle: #ff70ba;
  --rayColorOuter: #7b0077;
  --rayBackground: radial-gradient(
      circle at 50% 55%,
    rgb(255, 183, 190) 10%,
    rgb(255, 7, 185) 40%,
    rgb(187, 0, 172) 60%,
    rgb(74, 0, 94) 100%);
  background: var(--rayBackground);
}

.tp-wrapper.tp-penny {
  --rayColorInner: hsl(319, 92%, 85%);
  --rayColorMiddle: hsl(282, 100%, 69%);
  --rayColorOuter: hsl(265, 98%, 51%);
  --rayBackground: radial-gradient(
      circle at 50% 55%,
    hsl(315, 100%, 83%) 10%,
    hsl(278, 100%, 44%) 40%,
    hsl(263, 87%, 39%) 70%,
    hsl(258, 91%, 17%) 100%);
  background: var(--rayBackground);
}

.tp-wrapper.tp-pete {
  --rayColorInner: #ffff94;
  --rayColorMiddle: #d7ff88;
  --rayColorOuter: #117d00;
  --rayBackground: radial-gradient(
      circle at 50% 55%,
      rgb(220, 255, 94) 10%,
      rgb(114, 228, 0) 40%,
      rgb(86, 172, 0)60%,
      rgb(0, 60, 2) 100%);
  background: var(--rayBackground);
}

.tp-wrapper.tp-last {
  margin-bottom: 0;
}

.tp-wrapper .tp-product, .tp-wrapper .tp-logo {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tp-rays {
  position: absolute;
  z-index: 1;
  animation: rotateCircle calc(46 * 3s) linear reverse infinite;
}

@media (orientation: landscape) {
  .tp-rays {
    top: 55%;
    left: 50%;
    margin-top: -75%;
    margin-left: -75%;
    width: 150vw;
    height: 150vw;
  }
}

@media (orientation: portrait) {
  .tp-rays {
    top: 55vh;
    left: 50vh;
    margin-top: -75vh;
    margin-left: calc(-50vh - (75vh - 50vw));
    width: 150vh;
    height: 150vh;
  }
}

@-webkit-keyframes rotateCircle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotateCircle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(0, -0.5vh);
            transform: translate(0, -0.5vh);
  }
  50% {
    -webkit-transform: translate(0, 0.5vh);
            transform: translate(0, 0.5vh);
  }
  100% {
    -webkit-transform: translate(0, -0.5vh);
            transform: translate(0, -0.5vh);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translate(0, -0.5vh);
            transform: translate(0, -0.5vh);
  }
  50% {
    -webkit-transform: translate(0, 0.5vh);
            transform: translate(0, 0.5vh);
  }
  100% {
    -webkit-transform: translate(0, -0.5vh);
            transform: translate(0, -0.5vh);
  }
}

.tp-logo {
  z-index: 10;
}

.tp-logo .tp-img-wrap {
  width: 80vw;
  text-align: center;
}

.tp-logo .tp-img-wrap img {
  max-width: 100%;
  max-height: 27vh;
  position: relative;
  top: -30vh;
  left: 0;
}

.tp-family .tp-logo .tp-img-wrap img {
  max-height: 33vh;
  top: -32vh;
}

.tp-product {
  z-index: 10;
}

.tp-product .tp-img-wrap {
  width: 80vw;
  text-align: center;
  position: relative;
}

.tp-product .tp-img-wrap img {
  max-width: 100%;
  max-height: 40vh;
  position: relative;
  top: 5vh;
  left: calc(-5vw + 3%);
  background: no-repeat 0 0/70% url("/images/product/TP-Shadow.png");
}

.tp-pete .tp-product .tp-img-wrap img {
  background-position: 85% 99%;
}

.tp-patrick .tp-product .tp-img-wrap img {
  background-position: 85% 99%;
}

.tp-penny .tp-product .tp-img-wrap img {
  background-position: 85% 99%;
}

.tp-pearl .tp-product .tp-img-wrap img {
  background-position: 89% 99%;
}

.tp-family .tp-product .tp-img-wrap img {
  top: 7vh;
  left: 0;
  max-height: 50vh;
  background: none;
}

.tp-family .tp-product .tp-img-wrap {
  width: 100vw;
}

.tp-patrick .tp-product img {
  display: inline-block;
  position: relative;
  line-height: 0;
}

.tp-tagline {
  z-index: 10;
  font-family: 'Luckiest Guy', cursive;
  text-align: center;
  position: absolute;
  width: 100vw;
  top: 80vh;
  color: white;
  font-size: 5vh;
  text-shadow: 1px 1px 5px black;
  letter-spacing: 0.06em;
  padding: 0 5vw;
}

.tp-tagline .tp-tm {
  margin-left: -.15em;
}

.tp-family .tp-tagline {
  top: 85vh;
}

.tp-vignette {
  z-index: 5;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.tp-empty {
  height: 2000px;
  display: none;
}

.tp-family {
  text-align: center;
}

.tp-family img {
  max-width: 100vw;
  max-height: 200vh;
  margin-top: 50px;
}

.tp-items {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 2;
  -webkit-column-gap: 0px;
  -moz-column-count: 2;
  -moz-column-gap: 0px;
  column-count: 2;
  column-gap: 0px;
  margin: 0 0 -5px 0;
}

.tp-items2 {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 1;
  -webkit-column-gap: 0px;
  -moz-column-count: 1;
  -moz-column-gap: 0px;
  column-count: 1;
  column-gap: 0px;
}

.tp-items img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
/*# sourceMappingURL=style.css.map */