@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font-family: 'Kalam', cursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #FFFDFD;
  color: #02276B;
  touch-action: manipulation; }

.page {
  min-height: 100%;
  margin: 0 auto 0px; }

footer {
  background: #ffffff;
  color: #FF8DA5;
  padding: 16px;
  text-align: center;
  font-size: 14px; }

p {
  line-height: 1.5; }

.dt {
  cursor: pointer;
  outline: none;
  border-radius: 50%;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center; }
  .dt img {
    width: 40px; }

.header {
  display: flex;
  color: #ffffff;
  text-align: left;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .header {
      background: none; } }
  .header .contain {
    display: flex;
    justify-content: space-between;
    max-width: 1024px;
    width: 100%;
    margin: auto;
    padding: 16px;
    color: #6795CD; }
    @media only screen and (max-width: 400px) {
      .header .contain {
        padding: 8px 16px; } }
    .header .contain .title {
      flex-direction: column;
      transform: rotate(-5deg); }
      @media only screen and (max-width: 767px) {
        .header .contain .title {
          max-height: 40px; } }
      .header .contain .title .inline {
        display: flex; }
        .header .contain .title .inline .logo {
          margin-right: 10px; }
          .header .contain .title .inline .logo img, .header .contain .title .inline .logo svg {
            width: 35px; }
      .header .contain .title h2 {
        margin-left: 45px; }
        @media only screen and (max-width: 767px) {
          .header .contain .title h2 {
            display: none; } }
    .header .contain .badge {
      margin-bottom: -124px;
      width: auto;
      max-height: 237px; }
      @media only screen and (max-width: 1024px) {
        .header .contain .badge {
          max-height: 206px; } }
      @media only screen and (max-width: 767px) {
        .header .contain .badge {
          display: none; } }
.bonus-select {
  position: absolute;
  z-index: 9;
  cursor: pointer; }
  .bonus-select img {
    width: 75px; }

.container {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: auto;
  padding: 16px; }

.section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  z-index: 1; }
  @media only screen and (max-width: 767px) {
    .section {
      margin-top: 0; } }
  @media only screen and (max-width: 767px) {
    .section h2 {
      display: none; } }
  @media only screen and (max-width: 767px) {
    .section p {
      transform: rotate(-5deg);
      margin-top: -10px;
      margin-bottom: -10px; } }
  .section .interact {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 50px; }
    @media only screen and (max-width: 767px) {
      .section .interact {
        align-items: center;
        flex-direction: column;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-bottom: 30px;
        border-bottom: none; } }
    .section .interact .activity {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%; }
      .section .interact .activity .count {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bold; }
        @media only screen and (max-width: 400px) {
          .section .interact .activity .count {
            margin-bottom: 8px; } }
        .section .interact .activity .count .person {
          display: flex; }
        .section .interact .activity .count .total {
          text-align: center;
          min-width: 100px;
          justify-content: center;
          background: #E3FFCD;
          padding: 14px 8px;
          border-radius: 8px;
          border: none;
          display: flex;
          align-items: center;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .section .interact .activity .count .total {
              min-width: 35px; } }
          @media only screen and (max-width: 400px) {
            .section .interact .activity .count .total {
              padding: 8px; } }
        .section .interact .activity .count .counter {
          margin-right: 10px; }
        .section .interact .activity .count .plus {
          margin-left: -30px;
          height: 40px; }
      .section .interact .activity .action {
        display: flex;
        align-items: center;
        width: 100%;
        background: #FF4343;
        border-radius: 12px;
        background-image: linear-gradient(to right, transparent 33%, rgba(255, 255, 255, 0.3) 50%, transparent 66%);
        background-size: 300% 100%;
        animation: shine 2s infinite;
        transition: .25s;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
        @media only screen and (max-width: 767px) {
          .section .interact .activity .action {
            margin-bottom: 0; } }
        .section .interact .activity .action .tapcounter {
          color: #FF8DA5;
          font-size: 28px;
          font-weight: bold;
          position: absolute;
          width: 25px;
          height: 25px;
          z-index: 5; }
          .section .interact .activity .action .tapcounter:active {
            transform: none; }
        .section .interact .activity .action .btn {
          cursor: pointer;
          touch-action: manipulation;
          padding: 16px 24px;
          margin: 0;
          min-width: 200px;
          width: 100%;
          color: #ffffff;
          font-size: 28px;
          font-weight: bold;
          border-radius: 12px;
          border: none;
          outline: none;
          font-family: 'Kalam', cursive;
          justify-content: center;
          background: transparent; }
          .section .interact .activity .action .btn:disabled {
            background: #ddd;
            border: 2px solid #ddd;
            transition: .25s; }
          @media only screen and (max-width: 767px) {
            .section .interact .activity .action .btn {
              min-width: auto;
              padding: 16px 8px;
              margin: 0 24px; } }
    @media only screen and (max-width: 767px) {
      .section .interact .ballot {
        display: flex;
        justify-content: center;
        padding: 20px;
        margin-top: 30px;
        border-radius: 6px;
        background: #eee;
        width: 100%;
        transition: .35s; } }
    @media only screen and (max-width: 767px) {
      .section .interact .graphic {
        display: none; } }
    .section .interact .result {
      display: flex;
      flex-direction: column;
      justify-content: end; }
      .section .interact .result .claim {
        margin-bottom: 8px; }
  .section .race {
    margin-top: 50px; }
    .section .race .info {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      font-weight: 600; }
      .section .race .info .goal {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px; }
    .section .race .track {
      display: flex;
      flex-direction: column; }
      .section .race .track .slider {
        background: #FF8DA5;
        -webkit-appearance: none;
        height: 24px;
        border-radius: 10px;
        margin-bottom: 45px;
        border: none;
        background-image: linear-gradient(to right, #fff3f6, #FF8DA5);
        opacity: 1;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
        @media only screen and (max-width: 767px) {
          .section .race .track .slider {
            margin-bottom: 30px; } }
        .section .race .track .slider.brace {
          background: #6795CD;
          background-image: linear-gradient(to right, #edf3f9, #6795CD); }
        .section .race .track .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 100px;
          height: 100px;
          background: transparent;
          outline: none;
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
          overflow: visible;
          cursor: none;
          border: none; }
        .section .race .track .slider.brace::-webkit-slider-thumb {
          background-image: url("img/worried-joe.gif"); }
        .section .race .track .slider.trace::-webkit-slider-thumb {
          background-image: url("img/trump-nuetral.gif"); }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly; }
  @media only screen and (max-width: 767px) {
    .row {
      flex-wrap: nowrap; } }
.convo {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1; }
  @media only screen and (max-width: 767px) {
    .convo {
      display: none; } }
  .convo h1 {
    margin-bottom: 0; }
  .convo.top {
    margin-right: 20px; }
  .convo .biden {
    color: #660CD7;
    margin-bottom: 12px; }
  .convo .trump {
    color: #EA4461;
    margin-bottom: 12px; }
  .convo .bcount, .convo .tcount {
    font-size: 22px;
    font-weight: 600;
    color: #545454; }

.hide {
  display: none; }

.show {
  display: block; }

.surprised {
  position: fixed;
  z-index: 7;
  text-align: right; }
  .surprised.br {
    bottom: -170px;
    right: -100px;
    transform: rotate(-30deg); }
  .surprised.bl {
    bottom: -20px;
    left: -140px;
    transform: rotate(20deg); }
  .surprised.tl {
    top: -60px;
    left: -100px;
    transform: rotate(140deg); }
  .surprised.tr {
    top: -120px;
    right: -150px;
    transform: rotate(230deg); }
  .surprised.pika {
    bottom: -40px;
    right: -100px;
    transform: rotate(-30deg); }
  .surprised img {
    height: 100%;
    width: 100%;
    max-width: 400px; }

.winner .bwin, .winner .twin {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 16px; }
  .winner .bwin h1, .winner .twin h1 {
    font-size: 3em; }
  .winner .bwin img, .winner .twin img {
    width: 100%;
    max-width: 540px;
    margin-bottom: 30px;
    padding: 10px; }
  .winner .bwin .btn, .winner .twin .btn {
    border: 4px solid;
    border-radius: 3px;
    padding: 16px 24px;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    background: #fbf0f0;
    font-family: 'Kalam', cursive;
    cursor: pointer; }
    .winner .bwin .btn:first-child, .winner .twin .btn:first-child {
      margin-right: 10px; }

.winner .twin img {
  margin-bottom: 0; }

.winner .twin .bg {
  background: white url(img/illuminati.gif) no-repeat center;
  margin: 20px 0; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: linear-gradient(-45deg, #6795CD, #FF8DA5);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite; }
  .overlay .bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    text-align: center;
    font-size: 7em;
    color: #fff;
    align-content: center;
    margin-top: 10%;
    width: 100%; }
    .overlay .bonus .options {
      display: flex;
      flex-wrap: wrap;
      margin-top: 50px; }
      .overlay .bonus .options .btn {
        border: 4px solid;
        border-radius: 3px;
        padding: 16px 24px;
        font-size: 16px;
        cursor: pointer; }
        .overlay .bonus .options .btn:first-child {
          margin-right: 10px; }

@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes shine {
  0% {
    background-position: right; } }

.econtainer, .envelope, .flip, .letter, .text, .text:before, .text:after {
  position: absolute; }

.econtainer {
  position: relative;
  height: 132px;
  width: 180px;
  background: #ddd;
  border-radius: 3px;
  box-shadow: 0 0 0 4px #000; }

.envelope {
  border-top: 66px solid transparent;
  border-left: 90px solid #fa565a;
  border-bottom: 66px solid #fa565a;
  border-right: 90px solid #de2a2a;
  border-radius: 3px;
  z-index: 9; }

.flip {
  top: 0;
  left: 0;
  border-top: 66px solid #B80000;
  border-left: 90px solid transparent;
  border-bottom: 66px solid transparent;
  border-right: 90px solid transparent;
  border-radius: 3px;
  z-index: 6; }

.letter {
  top: 0px;
  left: 2px;
  height: 132px;
  width: 178px;
  padding: 8px;
  text-align: center;
  justify-content: center;
  background: #e8e8e8;
  border: 4px dashed #bbb;
  border-radius: 3px;
  z-index: 5; }
  .letter .name {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600; }

.text {
  top: 10px;
  left: 12px;
  height: 6px;
  width: 100px;
  background: #b0b0b0; }

.text:before, .text:after {
  content: '';
  height: 100%;
  background: #b0b0b0;
  left: 0px; }

.text:before, .text.shooting_star::after {
  top: 10px;
  width: 50px; }

.text:after {
  top: 20px;
  width: 65px; }

/*Classes to be Added and removed*/
.open {
  animation: flipOpen .4s ease-in forwards; }

.close {
  animation: flipClose .4s ease-in forwards; }

.letterOpen {
  top: -40px;
  transition: .3s ease-in; }

.letterClose {
  top: 0px;
  transition: .3s ease-in; }

@keyframes flipOpen {
  0% {
    transform: rotateX(0deg);
    transform-origin: center top; }
  100% {
    transform: rotateX(180deg);
    transform-origin: center top; } }

@keyframes flipClose {
  0% {
    transform: rotateX(180deg);
    transform-origin: center top; }
  100% {
    transform: rotateX(0deg);
    transform-origin: center top; } }

#open {
  margin-top: -10px;
  margin-bottom: 8px; }

#close {
  outline: none;
  background: #ccc;
  color: #ddd;
  cursor: not-allowed; }

#open:focus ~ #close {
  cursor: pointer;
  background: #de2a2a; }

.chart {
  display: table;
  width: 200px; }
  .chart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 200px; }
  .chart span {
    margin: 0 1em;
    display: block;
    background: #6795CD;
    border: 4px solid #000;
    border-radius: 3px;
    animation: draw 1s ease-in-out;
    animation-duration: 5s;
    animation-direction: forward; }
    .chart span:before, .chart span.shooting_star::after {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      padding: 5px 1em 0;
      display: block;
      text-align: center;
      font-weight: 600;
      font-size: 18px;
      content: attr(title);
      word-wrap: break-word; }

@keyframes draw {
  0% {
    height: 0; } }

.bounce-in-right {
  -webkit-animation: bounce-in-right 1.1s both;
  animation: bounce-in-right 1.1s both; }

.bounce-in-left {
  -webkit-animation: bounce-in-left 1.1s both;
  animation: bounce-in-left 1.1s both; }

.wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 9s 6s infinite both;
  animation: wobble-hor-bottom 9s 6s infinite both;
  animation-delay: 3s; }

.wobble-ver-left {
  -webkit-animation: wobble-ver-left 9s 6s infinite both;
  animation: wobble-ver-left 9s 6s infinite both; }

.slide-out-right {
  -webkit-animation: slide-out-right 2s cubic-bezier(0.6, 0.04, 0.98, 0.335) both;
  animation: slide-out-right 2s cubic-bezier(0.6, 0.04, 0.98, 0.335) both; }

.swirl-in-fwd {
  -webkit-animation: swirl-in-fwd 0.6s ease-out both;
  animation: swirl-in-fwd 0.6s ease-out both; }

.text-pop-up-top {
  -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: text-pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.vibrate-1 {
  -webkit-animation: vibrate-1 0.3s linear infinite both;
  animation: vibrate-1 0.3s linear infinite both; }

.slide-in-br {
  -webkit-animation: slide-in-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.fire {
  animation: burn 1000ms ease-out forwards; }
  .fire::before, .fire.shooting_star::after {
    content: '';
    position: absolute;
    left: 40px;
    width: 100px;
    height: 40px;
    background: #ffe66e;
    border-radius: 100%;
    animation: flare 1000ms ease-out forwards; }
  .fire::after {
    content: '';
    position: absolute;
    right: 40px;
    width: 100px;
    height: 40px;
    background: #ffe66e;
    border-radius: 100%;
    animation: flare 1000ms ease-out forwards; }

/**
 * ----------------------------------------
 * animation bounce-in-left
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; }
  55% {
    -webkit-transform: translateX(-68px);
    transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  81% {
    -webkit-transform: translateX(-28px);
    transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  95% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; } }

@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; }
  55% {
    -webkit-transform: translateX(-68px);
    transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  81% {
    -webkit-transform: translateX(-28px);
    transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  95% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; } }

@keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; }
  55% {
    -webkit-transform: translateX(68px);
    transform: translateX(68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  81% {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  95% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; } }

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg); }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg); }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg); }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg); }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg); } }

@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg); }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg); }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg); }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg); }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg); } }

/**
 * ----------------------------------------
 * animation wobble-ver-left
 * ----------------------------------------
 */
@-webkit-keyframes wobble-ver-left {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  15% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg); }
  30% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg); }
  45% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg); }
  60% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg); }
  75% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg); } }

@keyframes wobble-ver-left {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  15% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg); }
  30% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg); }
  45% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg); }
  60% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg); }
  75% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg); } }

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0; } }

@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0; } }

/**
 * ----------------------------------------
 * animation swirl-in-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
    transform: rotate(-540deg) scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1; } }

@keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
    transform: rotate(-540deg) scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
    opacity: 1; } }

@keyframes GoUp {
  0% {
    opacity: 1; }
  100% {
    top: 0px;
    opacity: 0; } }

.night {
  position: absolute;
  width: 100%;
  height: 60%;
  transform: rotateZ(45deg); }

.shooting_star, .shooting_star::after {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; }
  .shooting_star::before, .shooting_star::after {
    content: '';
    position: relative;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: shining 3000ms ease-in-out infinite; }
  .shooting_star::after {
    transform: translateX(50%) rotateZ(-45deg); }
  .shooting_star:nth-child(1), .shooting_star:nth-child(1)::after {
    top: calc(50% - -144px);
    left: calc(50% - 228px);
    animation-delay: 5732ms; }
    .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after {
      animation-delay: 5732ms; }
  .shooting_star:nth-child(2), .shooting_star:nth-child(2)::after {
    top: calc(50% - 7px);
    left: calc(50% - 34px);
    animation-delay: 9690ms; }
    .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after {
      animation-delay: 9690ms; }
  .shooting_star:nth-child(3), .shooting_star:nth-child(3)::after {
    top: calc(50% - -93px);
    left: calc(50% - 217px);
    animation-delay: 9887ms; }
    .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after {
      animation-delay: 9887ms; }
  .shooting_star:nth-child(4), .shooting_star:nth-child(4)::after {
    top: calc(50% - 78px);
    left: calc(50% - 74px);
    animation-delay: 5483ms; }
    .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after {
      animation-delay: 5483ms; }
  .shooting_star:nth-child(5), .shooting_star:nth-child(5)::after {
    top: calc(50% - 45px);
    left: calc(50% - 191px);
    animation-delay: 2756ms; }
    .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after {
      animation-delay: 2756ms; }
  .shooting_star:nth-child(6), .shooting_star:nth-child(6)::after {
    top: calc(50% - 3px);
    left: calc(50% - 250px);
    animation-delay: 7690ms; }
    .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after {
      animation-delay: 7690ms; }
  .shooting_star:nth-child(7), .shooting_star:nth-child(7)::after {
    top: calc(50% - 131px);
    left: calc(50% - 62px);
    animation-delay: 7951ms; }
    .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after {
      animation-delay: 7951ms; }
  .shooting_star:nth-child(8), .shooting_star:nth-child(8)::after {
    top: calc(50% - 144px);
    left: calc(50% - 268px);
    animation-delay: 9175ms; }
    .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after {
      animation-delay: 9175ms; }
  .shooting_star:nth-child(9), .shooting_star:nth-child(9)::after {
    top: calc(50% - 189px);
    left: calc(50% - 236px);
    animation-delay: 8328ms; }
    .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after {
      animation-delay: 8328ms; }
  .shooting_star:nth-child(10), .shooting_star:nth-child(10)::after {
    top: calc(50% - 113px);
    left: calc(50% - 230px);
    animation-delay: 6425ms; }
    .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after {
      animation-delay: 6425ms; }
  .shooting_star:nth-child(11), .shooting_star:nth-child(11)::after {
    top: calc(50% - -130px);
    left: calc(50% - 83px);
    animation-delay: 8157ms; }
    .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after {
      animation-delay: 8157ms; }
  .shooting_star:nth-child(12), .shooting_star:nth-child(12)::after {
    top: calc(50% - 6px);
    left: calc(50% - 110px);
    animation-delay: 4810ms; }
    .shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after {
      animation-delay: 4810ms; }
  .shooting_star:nth-child(13), .shooting_star:nth-child(13)::after {
    top: calc(50% - -132px);
    left: calc(50% - 23px);
    animation-delay: 6515ms; }
    .shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after {
      animation-delay: 6515ms; }
  .shooting_star:nth-child(14), .shooting_star:nth-child(14)::after {
    top: calc(50% - 121px);
    left: calc(50% - 171px);
    animation-delay: 3017ms; }
    .shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after {
      animation-delay: 3017ms; }
  .shooting_star:nth-child(15), .shooting_star:nth-child(15)::after {
    top: calc(50% - -182px);
    left: calc(50% - 298px);
    animation-delay: 2610ms; }
    .shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after {
      animation-delay: 2610ms; }
  .shooting_star:nth-child(16), .shooting_star:nth-child(16)::after {
    top: calc(50% - 109px);
    left: calc(50% - 98px);
    animation-delay: 9743ms; }
    .shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after {
      animation-delay: 9743ms; }
  .shooting_star:nth-child(17), .shooting_star:nth-child(17)::after {
    top: calc(50% - 163px);
    left: calc(50% - 236px);
    animation-delay: 8170ms; }
    .shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after {
      animation-delay: 8170ms; }
  .shooting_star:nth-child(18), .shooting_star:nth-child(18)::after {
    top: calc(50% - -100px);
    left: calc(50% - 148px);
    animation-delay: 8175ms; }
    .shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after {
      animation-delay: 8175ms; }
  .shooting_star:nth-child(19), .shooting_star:nth-child(19)::after {
    top: calc(50% - -30px);
    left: calc(50% - 137px);
    animation-delay: 7684ms; }
    .shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after {
      animation-delay: 7684ms; }
  .shooting_star:nth-child(20), .shooting_star:nth-child(20)::after {
    top: calc(50% - -166px);
    left: calc(50% - 247px);
    animation-delay: 319ms; }
    .shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after {
      animation-delay: 319ms; }

@keyframes tail {
  0% {
    width: 0; }
  30% {
    width: 100px; }
  100% {
    width: 0; } }

@keyframes shining {
  0% {
    width: 0; }
  50% {
    width: 30px; }
  100% {
    width: 0; } }

@keyframes shooting {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(300px); } }

@keyframes sky {
  0% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(405deg); } }

/* ----------------------------------------------
 * Generated by Animista on 2020-11-30 17:58:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    text-shadow: none; }
  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3); } }

@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    text-shadow: none; }
  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3); } }

/* ----------------------------------------------
 * Generated by Animista on 2020-11-30 18:13:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px); }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0); } }

@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px); }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0); } }

/* ----------------------------------------------
 * Generated by Animista on 2020-11-30 21:40:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-br
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
    transform: translateY(1000px) translateX(1000px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1; } }

@keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
    transform: translateY(1000px) translateX(1000px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1; } }

/* ----
Fire
*/
@keyframes flare {
  100% {
    transform: translateY(-20px) scale(1.5);
    filter: blur(10px);
    opacity: 0; } }

@keyframes burn {
  0% {
    color: #ff826e;
    background: #ffe66e;
    box-shadow: 0 0 5px 0 #c8000a, 0 0 5px 0 rgba(230, 30, 10, 0.8), 0 0 5px 0 rgba(230, 230, 10, 0.6); }
  100% {
    color: #fff;
    box-shadow: 0 -35px 40px 30px rgba(255, 130, 10, 0), 0 -30px 30px 10px rgba(230, 30, 10, 0), 0 -20px 10px 0 rgba(255, 255, 10, 0); } }

.dark-mode {
  background-color: #121212;
  color: #ccc; }
  .dark-mode .total {
    color: #000; }
  .dark-mode .interact {
    border-color: #444; }
  .dark-mode .candidates h2 {
    color: #ddd; }
  .dark-mode .column .bcount, .dark-mode .column .tcount {
    color: #ccc; }
  @media only screen and (max-width: 767px) {
    .dark-mode .section .interact .ballot {
      background: #212121;
      transition: .35s; } }
  .dark-mode .race .track .slider {
    background-image: linear-gradient(to right, #f9b3c5, #FF8DA5); }
    .dark-mode .race .track .slider.brace {
      background-image: linear-gradient(to right, #b0d6fd, #6795CD); }
  .dark-mode .letter .name {
    color: #000; }
  .dark-mode .winner {
    background-color: #121212;
    color: #ccc; }
    .dark-mode .winner .btn {
      background: #FF8DA5; }
  .dark-mode footer {
    background-color: #121212; }
    .dark-mode footer audio {
      filter: sepia(50%) saturate(90%) grayscale(1) contrast(70%) invert(10%) brightness(50%) opacity(50%); }