.logo {
  height: 2.2rem;
  padding: 0 0.5rem;
}

.logos {
  height: 2vw;
  min-height: 35px;
}

.hover-opacity {
  opacity: 0.4;
}

.hover-opacity:hover {
  opacity: 1;
}

#vote-snackbar {
  position: fixed;
  top: 90vh;
  left: 2vw;
  visibility: hidden;
  height: 60px;
  opacity: 1;
  z-index: 9999;
  background: #1a1a1a;
  box-shadow: -1px -1px 4px #3a3a3a10;
  border-radius: 8px;
  padding: 20px 20px;
  color: #ffffff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  font-weight: 400;
  line-height: 2;
}

#vote-snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.6s, fadeout 0.5s 2.5s;
  animation: fadein 0.6s, fadeout 0.5s 2.5s;
}

.snack-text {
  font-weight: 600;
}

.title {
  font-family: "Gilroy", sans-serif; /* Bungee Inline */
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  background: -webkit-linear-gradient(45deg, #00e08e, #f0c909, #eb3650);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: title-gradient 1s linear infinite;
}

.rainbow-gradient {
  background: -webkit-linear-gradient(45deg, #00e08e, #f0c909, #eb3650);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: title-gradient 1s linear infinite;
}

.rainbow-shadow {
  box-shadow: -3px -3px 10px #00e08e90, -3px 1px 10px #a2cf7e90,
    3px -3px 10px #f0c90990, 3px 3px 10px #ff9c0090, -3px 3px 10px #eb365090;
}

@keyframes border-gradient {
  0% {
    border: 4px solid #00e08e;
  }
  20% {
    border: 4px solid #a2cf7e;
  }
  40% {
    border: 4px solid #f0c909;
  }
  60% {
    border: 4px solid #a2cf7e;
  }
  80% {
    border: 4px solid #eb3650;
  }
  100% {
    border: 4px solid #00e08e;
  }
}

@keyframes twitter-button {
  0% {
    background: #1da1f2;
  }
  20% {
    background: #0e80d4;
  }
  40% {
    background: #5cb7ef;
  }
  60% {
    background: #1da1f2;
  }
  80% {
    background: #0e80d4;
  }
  100% {
    background: #1da1f2;
  }
}

/*    FIRST SLIDE SCROLL ANIMATION    */

.cube-wrap {
  --width: 10vmin;
  --height: 10vmin;
  position: fixed;
  top: 80%;
  left: 80%;
  width: 0;
  height: 0;
  perspective: 100vmin;
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.cube {
  opacity: 0.07;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translate(0px, 10vh);
  animation: cube 1s linear;
}

@keyframes cube {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translate(0px, 50vh);
  }
}

.side-cube {
  position: absolute;
  backface-visibility: visible;
  top: 10vh;
  left: 50vw;
  border-radius: 1000px;
  overflow: hidden;
}

.heart-sprite {
  background-color: transparent;
  transform: translate(-15vw, -10vh);
  animation: heart-sprite 1s linear;
  width: 4vw;
  min-width: 18px;
}
@keyframes heart-sprite {
  to {
    transform: translate(10vw, 100vh);
  }
}

.star-sprite {
  background-color: transparent;
  transform: rotateX(5deg) rotateZ(-15deg) translateZ(calc(var(--width) * 0.2))
    translate(20vw, -40vh);
  animation: star-sprite 0.1s linear;
  width: 3vw;
  min-width: 16px;
}
@keyframes star-sprite {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(15deg) translate(-10vw, 20vh)
      translateZ(50px);
  }
}

.laugh-sprite {
  background-color: transparent;
  transform: translate(-45vw, -50vh) rotateZ(15deg) translateZ(0px);
  animation: laugh-sprite 1s linear;
  width: 2vw;
  min-width: 13px;
}
@keyframes laugh-sprite {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translate(200vw, 400vh)
      translateZ(100vw);
  }
}

.heart-sprite-1 {
  background-color: transparent;
  transform: rotateY(0deg) translateZ(calc(var(--width) * 0.2))
    translate(-3vw, -25vh) translateZ(10px) scaleY(-1);
  animation: heart-sprite-1 1s linear;
  width: 5vw;
  min-width: 17px;
}
@keyframes heart-sprite-1 {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(15deg)
      translate(-40vw, 150vh) translateZ(50px);
  }
}

.star-sprite-1 {
  background-color: transparent;
  transform: rotateY(0deg) translate(-5vw, 8vw) translateZ(10px);
  animation: star-sprite-1 0.4s linear;
  width: 9vw;
  min-width: 23px;
}
@keyframes star-sprite-1 {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(15deg) translate(-30vw, 50vh);
  }
}

.star-sprite-3 {
  background-color: transparent;
  transform: rotateY(0deg) translate(-30vw, 10vh) rotateZ(-45deg);
  animation: star-sprite-3 1s linear;
  width: 7vw;
  min-width: 21px;
}
@keyframes star-sprite-3 {
  to {
    transform: rotateX(0deg) translate(150vw, 100vh);
    width: 50px;
  }
}

.like-sprite {
  background-color: transparent;
  transform: rotateX(5deg) rotateY(0deg) translate(15vw, -15vh) translateZ(0px);
  animation: like-sprite 1s linear;
  width: 4vw;
}
@keyframes like-sprite {
  to {
    transform: rotateY(40deg) rotateZ(0deg) rotateY(120deg)
      translate(120vw, 245vh);
  }
}
.like-sprite-1 {
  background-color: transparent;
  transform: translate(-25vw, -5vh);
  animation: like-sprite-1 1s linear;
  width: 7vw;
  min-width: 22px;
}
@keyframes like-sprite-1 {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translate(50vw, 120vh)
      translateZ(50vh);
  }
}
.like-sprite-2 {
  background-color: transparent;
  transform: translate(25vw, -25vh) rotateY(5deg) rotateX(5deg) rotateZ(-15deg);
  animation: like-sprite-2 1s linear;
  width: 9vw;
  min-width: 20px;
}
@keyframes like-sprite-2 {
  to {
    transform: rotateX(0deg) rotateZ(15deg) rotateY(0deg)
      translate(-130vw, 280vh) translateZ(15px);
  }
}
.back-sprite {
  background-color: transparent;
  transform: translateZ(calc(var(--width) * -0.2));
  animation: back-sprite 1s linear;
  width: 9vw;
}
@keyframes back-sprite {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateY(500px)
      translate(calc(var(--width) * 0.5), calc(var(--height) * 0.2));
  }
}

@media only screen and (max-width: 600px) {
  .laugh-sprite {
    transform: translate(-45vw, 5vh);
  }
  .like-sprite-2 {
    transform: translate(25vw, 2vh) rotateY(5deg) rotateX(5deg) rotateZ(-15deg);
  }
  .star-sprite {
    transform: rotateY(0deg) translateZ(calc(var(--width) * 0.2))
      translate(20vw, 0vh);
  }
  .star-sprite-1 {
    transform: rotateY(0deg) translate(-5vw, 10vh) translateZ(10px);
  }
}

.emoji {
  font-size: 100px;
}

:root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.main-form {
  background: transparent;
  border-radius: 4px;
  border: 4px solid #00e08e;
  box-shadow: 0px 0px 9px #606060;
}

.main-input:active {
  color: white;
}

mark {
  background-color: transparent;
}

.h1 {
  overflow-wrap: break-word;
}

.social-image {
  max-width: 700px !important;
  cursor: none;
}
img.macbook-62 {
  margin: -3% -100% 0% 10% !important;
}
.demodemo {
  max-width: 25rem !important;
  border-radius: 0.3rem;
  margin: auto;
}
img.demodemo {
  display: none;
}

.grid-73 .cell-73 {
  padding: 10px 15px;
}

.mobile-img {
  display: none;
}

.desk-img {
  display: inherit;
}

/* Tablet */

@media (max-width: 1200px) {
  .title {
    font-size: 3rem;
  }
}
/* Mobile */

.mobile .title {
  font-size: 13vw;
  margin-top: -30px;
}
.panel {
  padding: 10px 20px;
}

.mobile .button {
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;
}

.mobile .button svg {
  width: 16px;
  margin-right: 5px;
}

.button .main {
  font-weight: 100;
  background-color: #0dee0f;
}
.mobile .demodemo {
  max-width: 15rem !important;
  border-radius: 0.3rem;
  margin-bottom: 30px;
}
.mobile .mobile-img {
  display: inline;
}

.mobile .desk-img {
  display: none;
}
.mobile .actionButton {
  margin-top: 0px;
}

.mobile img.demodemo {
  display: inherit;
}

.mobile video.demodemo {
  display: inherit;
}

.mobile video {
  display: inherit;
}

h1 {
  font-family: "Gilroy", sans-serif;
}

h3 {
  font-family: "Gilroy", sans-serif;
}

/* Team */

.team .badge {
  border-radius: 100%;
  height: 8rem;
  width: 8rem;
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
}

.mobile .team .badge {
  height: 3rem;
  width: 3rem;
}

.mobile .team .badge-list {
  width: 20%;
  height: 50px;
}

.mobile .team .col-2-12 {
  width: 30%;
}
.mobile .columbia {
  zoom: 50%;
}
.mobile .team .exp {
  padding-left: 0%;
}

/* Extension */

.badge {
  border-radius: 100%;
  height: 2rem;
  width: 2rem;
}

.button {
  background: #def009;
}

.webapp {
  border-radius: 10px;
  border-color: rgba(0, 229, 255, 0.7);
  border-width: 3px;
  border-style: solid;
  box-shadow: 0px 0px 5pc rgba(0, 229, 255, 0);
}

.mobile .menuButton {
  display: none;
}

.panel svg arrow {
  fill: #f8d4ef;
}

.tabs.thinner li {
  letter-spacing: 0px !important;
}

h3.thinner {
  font-weight: 100 !important;
}

.textmeone {
  font-family: "Text Me One", sans-serif !important;
}

/* font weights */

h3.weight-1,
.lightest {
  font-weight: 100 !important;
}
h3.weight-2,
.lighter {
  font-weight: 200 !important;
}
h3.weight-3,
.light {
  font-weight: 300 !important;
}
h3.weight-4,
.normal {
  font-weight: 400 !important;
}
h3.weight-5,
.medium {
  font-weight: 500 !important;
}
h3.weight-6,
.semibold {
  font-weight: 600 !important;
}
h3.weight-7,
.bold {
  font-weight: 700 !important;
}
h3.weight-8,
.bolder {
  font-weight: 800 !important;
}
h3.weight-9,
.boldest {
  font-weight: 900 !important;
}

h2.weight-1,
.lightest {
  font-weight: 100 !important;
}
h2.weight-2,
.lighter {
  font-weight: 200 !important;
}
h2.weight-3,
.light {
  font-weight: 300 !important;
}
h2.weight-4,
.normal {
  font-weight: 400 !important;
}
h2.weight-5,
.medium {
  font-weight: 500 !important;
}
h2.weight-6,
.semibold {
  font-weight: 600 !important;
}
h2.weight-7,
.bold {
  font-weight: 700 !important;
}
h2.weight-8,
.bolder {
  font-weight: 800 !important;
}
h2.weight-9,
.boldest {
  font-weight: 900 !important;
}

h1.weight-1,
.lightest {
  font-weight: 100 !important;
}
h1.weight-2,
.lighter {
  font-weight: 200 !important;
}
h1.weight-3,
.light {
  font-weight: 300 !important;
}
h1.weight-4,
.normal {
  font-weight: 400 !important;
}
h1.weight-5,
.medium {
  font-weight: 500 !important;
}
h1.weight-6,
.semibold {
  font-weight: 600 !important;
}
h1.weight-7,
.bold {
  font-weight: 700 !important;
}
h1.weight-8,
.bolder {
  font-weight: 800 !important;
}
h1.weight-9,
.boldest {
  font-weight: 900 !important;
}

p.weight-1,
.lightest {
  font-weight: 100 !important;
}
p.weight-2,
.lighter {
  font-weight: 200 !important;
}
p.weight-3,
.light {
  font-weight: 300 !important;
}
p.weight-4,
.normal {
  font-weight: 400 !important;
}
p.weight-5,
.medium {
  font-weight: 500 !important;
}
p.weight-6,
.semibold {
  font-weight: 600 !important;
}
p.weight-7,
.bold {
  font-weight: 700 !important;
}
p.weight-8,
.bolder {
  font-weight: 800 !important;
}
p.weight-9,
.boldest {
  font-weight: 900 !important;
}

.uppertransform {
  text-transform: uppercase;
}

/* PILL TAB */

.pill.controller {
  font-size: 0;
  border: 0px solid;
  display: inline-block;
  border-radius: 6px;
}
.pill.controller li {
  padding: 10px 20px;
  display: inline-block;
  border: 0px solid #fff;
  font-size: initial;
}

.pill.controller.vert li {
  display: block;
  margin-top: 5px;
  padding: 25px;
}

.pill.controller li:first-child {
  border-radius: 4px 4px 4px 4px;
}
.pill.controller li:last-child {
  border-radius: 4px 4px 4px 4px;
}

.pill.controller li.selected {
  background: #aaaaaa10;
  color: #000;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(248, 248, 248, 0.1);
  transform-style: preserve-3d;
}

.pill.controller.vert li.selected {
  background: -webkit-linear-gradient(45deg, #00e08e, #f0c909, #eb3650);
  color: #101010;
  border-radius: 4px 4px 4px 4px;
}

.hoverer {
  opacity: 0.2 !important;
}

.box {
  box-shadow: 0px 0px 20px #ffffff20;
}

.frame {
  border: 0;
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);

  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

  margin-top: -3rem;
  transform: scale(0.8);
  min-width: 125% !important;
  min-height: 45rem;
}

.frame header {
  display: none;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  display: inherit;
  transition: 0.5s ease;
  background-color: #000000c0;
  border-radius: 4px;
}

.overlay-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  height: 78%;
}

.overlay-container:hover .overlay {
  opacity: 0;
  display: none;
}

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jss2 {
  margin-top: -34px;
}

header.jss6 {
  display: none !important;
}

@media (max-width: 767px) {
  li.selected {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}

.Gilroy {
  font-family: Gilroy !important;
  font-weight: 400 !important;
}

.Gilroy-100 {
  font-family: Gilroy !important;
  font-weight: 100 !important;
}

.Gilroy-200 {
  font-family: Gilroy !important;
  font-weight: 200 !important;
}

.Gilroy-300 {
  font-family: Gilroy !important;
  font-weight: 300 !important;
}

.Gilroy-400 {
  font-family: Gilroy !important;
  font-weight: 400 !important;
}

.Gilroy-500 {
  font-family: Gilroy !important;
  font-weight: 500 !important;
}

.Gilroy-600 {
  font-family: Gilroy !important;
  font-weight: 600 !important;
}

.Gilroy-700 {
  font-family: Gilroy !important;
  font-weight: 700 !important;
}

.Gilroy-800 {
  font-family: Gilroy !important;
  font-weight: 800 !important;
}

.GilroyThin {
  font-family: "Gilroy-Thin";
}
.GilroyUltraLightItalic {
  font-family: "Gilroy-UltraLightItalic";
}
.GilroyThinItalic {
  font-family: "Gilroy-ThinItalic";
}
.GilroySemiBoldItalic {
  font-family: "Gilroy-SemiBoldItalic";
}
.GilroySemiBold {
  font-family: "Gilroy-SemiBold";
}
.GilroyUltraLight {
  font-family: "Gilroy-UltraLight";
}
.GilroyRegular {
  font-family: "Gilroy-Regular";
}
.GilroyRegularItalic {
  font-family: "Gilroy-RegularItalic";
}
.GilroyMediumItalic {
  font-family: "Gilroy-MediumItalic";
}
.GilroyMedium {
  font-family: "Gilroy-Medium";
}
.GilroyLightItalic {
  font-family: "Gilroy-LightItalic";
}
.GilroyLight {
  font-family: "Gilroy-Light";
}
.GilroyHeavyItalic {
  font-family: "Gilroy-HeavyItalic";
}
.GilroyHeavy {
  font-family: "Gilroy-Heavy";
}
.GilroyExtraBoldItalic {
  font-family: "Gilroy-ExtraBoldItalic";
}
.GilroyExtraBold {
  font-family: "Gilroy-ExtraBold";
}
.GilroyBoldItalic {
  font-family: "Gilroy-BoldItalic";
}
.GilroyBold {
  font-family: "Gilroy-Bold";
}
.GilroyBlackItalic {
  font-family: "Gilroy-BlackItalic";
}
.GilroyBlack {
  font-family: "Gilroy-Black";
}

.Bungee {
  font-family: Bungee !important;
}

.rounded-square {
  border-radius: 0.35rem;
}

.spacing-wide {
  letter-spacing: 0.1rem;
}

.spacing-mid {
  letter-spacing: 0.05rem;
}

@-webkit-keyframes fadein {
  from {
    top: 100vh;
    opacity: 0;
  }
  to {
    top: 90vh;
    opacity: 0.7;
  }
}

@keyframes fadein {
  from {
    top: 100vh;
    opacity: 0;
  }
  to {
    top: 90vh;
    opacity: 0.7;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 90vh;
    opacity: 0.7;
  }
  to {
    bottom: 100vh;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 90vh;
    opacity: 0.7;
  }
  to {
    bottom: 100vh;
    opacity: 0;
  }
}

.rainbow-card {
  background: -webkit-linear-gradient(45deg, #00e08e, #f0c909, #eb3650);
}

.rainbow-outline-card {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
}
.border-gradient-rainbow {
  border-image-source: linear-gradient(45deg, #00e08e, #f0c909, #eb3650);
}

.feed-card {
  overflow: hidden;
}

.feed-title {
  position: fixed;
  bottom: 5%;
  left: 10%;
}

.min-height-graphics {
  min-height: 550px;
}

@media (max-width: 1200px) {
  .min-height-graphics {
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  .min-height-graphics {
    min-height: 300px;
  }
}

.inline {
  display: inline;
}