.welcome-video-container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0.01;
  pointer-events: none;
}

.welcome-exode-hasCode {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 20vh;
  height: 20vh;
  visibility: hidden;
  opacity: 0;
}

.welcome-exode-logo-with-text {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 45vh;
  height: 20vh;
  background: url(../logo/logo_exode_black_2048.png) center center/ contain no-repeat;
  visibility: hidden;
  opacity: 0;
}

.welcome-text {
  position: fixed;
  top: 64%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 4%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  text-align: center;
  color: "#124492";
}

.welcome-text-message {
  width: 100%;
  color: #b3d9ff;
  font-family: "consolePro";
  font-size: 1.8vh;
}

.welcome-subtext {
  position: fixed;
  top: 74%;
  left: 50%;
  transform: translateX(-50%);
  width: 24%;
  height: 12vh;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  text-align: center;
  color: #b3d9ff;
}

.welcome-subtext-message {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: #b3d9ff;
  font-family: "consolePro";
  font-size: 1.2vh;
  text-align: center;
}

/* #76a4ec  */
/* #B3D9FF  */

/* input field username */
.welcome-button-login-email {
  position: fixed;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 4%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: auto;
  font-family: "Cascadia";
  font-size: 1.2vh;
  text-align: center;
  color: yellow;
}

.welcome-button-login-email > img {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 96%;
  padding: 5px;
  pointer-events: none;
}

.welcome-button-login-email > input {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 96%;
  padding: 5px;
  background: transparent;
  pointer-events: auto;
  text-align: center;
  font-family: "consolePro";
  font-size: 1.8vh;
  outline: none;
  border: none;
  color: yellow;
}
/* input password */
.welcome-button-login-emailpassword {
  position: fixed;
  bottom: 21%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 4%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.2v;
  text-align: center;
  color: yellow;
}

.welcome-button-login-emailpassword > img {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 96%;
  padding: 5px;
  background: transparent;
  pointer-events: none;
}

.welcome-button-login-emailpassword > input {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 96%;
  padding: 5px;
  background: transparent;
  pointer-events: auto;
  text-align: center;
  font-family: "Electrolize";
  font-size: 1.8vh;
  outline: none;
  border: none;
  color: yellow;
}

/* login container */
.welcome-button-action-login {
  position: fixed;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 5%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.5vh;
  text-align: center;
  color: yellow;
}

.welcome-button-action-login img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.welcome-button-action-login-text {
  position: absolute;
  left: 10%;
  width: 80%;
  top: 0%;
  padding-top: 1.5vh;
  font-size: 2vh;
  height: 1.507vh;
  pointer-events: none;
  color: #aaaaaa;
  transition: all 0.3s ease;
}

/* hover for login */
.welcome-button-action-login:hover img {
  opacity: 0.7;
}
.welcome-button-action-login:hover .welcome-button-action-login-text {
  color: yellow;
  opacity: 1;
}


/* get packs container */
.welcome-button-action-getpacks {
  position: fixed;
  bottom: -3%;
  left: 74%;
  width: 22.5%;
  height: 12%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.5vh;
  text-align: center;
  color: yellow;
}

/* support development text block */
.welcome-button-action-supportDevelopment {
  position: relative;
}
.welcome-button-action-supportDevelopment-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5vh;
  font-family: "consolePro";
  text-align: center;
  color: #aaaaaa;
  white-space: nowrap;
}
/* rest of the button */
.welcome-button-action-getpacks img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-action-getpacks-text {
  position: absolute;
  width: 100%;
  top: 11%;
  font-size: 3vh;
  padding-top: 2.5vh;
  height: 1.507vh;
  pointer-events: none;
  color: #aaaaaa;
  text-align: center;
}

/* hover effect for Get packs container */
.welcome-button-action-getpacks:hover img {
  opacity: 1;
  filter: grayscale(0%);
}
.welcome-button-action-getpacks:hover #welcome_button_action_getpacks_text_content {
  color: yellow;
}

/* free demo button */
.welcome-button-freeDemo {
  position: fixed;
  left: 23%;
  bottom: 0%;
  width: 8%;
  height: 6%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  color: yellow;
}

.welcome-button-freeDemo > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-freeDemo .welcome-button-freeDemo-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.8vh;
  left: 5%;
  top: 37%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  opacity: 0.7;
  color: #c7c7c7;
  transition: color 0.3s, opacity 0.3s;
}
.welcome-button-freeDemo .welcome-button-freeDemo-text > a {
  text-decoration: none;
  color: #c7c7c7;
  opacity: 0.7;
  pointer-events: all;
}
.welcome-button-freeDemo:hover .welcome-button-freeDemo-text {
  color: yellow;
  opacity: 1;
}

/* join discord button */
.welcome-button-joinDiscord {
  position: fixed;
  top: 0%;
  left: 2%;
  width: 7%;
  height: 7%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.3vh;
  text-align: center;
  color: yellow;
}

.welcome-button-joinDiscord a {
  text-decoration: none;
  color: cyan;
}

.welcome-button-joinDiscord a > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-joinDiscord-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.8vh;
  left: 6.5%;
  top: -5%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  color: #fff;
  opacity: 0.7;
}

.welcome-button-joinDiscord-text > img.welcome-button-joinDiscord-icon {
  position: absolute;
  left: 38%;
  top: 36%;
  --discord-icon-width: 21%;
  --discord-icon-height: calc(var(--discord-icon-width) / 0.466);
  width: var(--discord-icon-width);
  height: var(--discord-icon-height);
  pointer-events: none;
}

/* f.a.q. button */
.welcome-button-aboutExode {
  position: fixed;
  top: 0%;
  left: 10%;
  width: 7%;
  height: 7%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.3vh;
  text-align: center;
  color: yellow;
}

.welcome-button-aboutExode > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-aboutExode-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.8vh;
  left: 5%;
  top: -5%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  pointer-events: none;
  color: #fff;
  opacity: 0.7;
}

.welcome-button-aboutExode .welcome-button-aboutExode-icon {
  position: absolute;
  left: 38%;
  top: 32%;
  --discord-icon-width: 20%;
  --discord-icon-height: calc(var(--discord-icon-width) / 0.5);
  width: var(--discord-icon-width);
  height: var(--discord-icon-height);
  pointer-events: none;
  opacity: 0.7;
}
.welcome-button-aboutExode:hover .welcome-button-aboutExode-icon {
  opacity: 1;
}

/* how to invest button */
.welcome-button-Invest {
  position: fixed;
  top: 0%;
  left: 18%;
  width: 8%;
  height: 7%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.3vh;
  text-align: center;
  color: yellow;
}

.welcome-button-Invest > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-Invest-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.8vh;
  left: 5%;
  top: -5%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  pointer-events: none;
  color: #fff;
  opacity: 0.7;
}

.welcome-button-Invest .welcome-button-Invest-icon {
  position: absolute;
  left: 38%;
  top: 32%;
  --discord-icon-width: 20%;
  --discord-icon-height: calc(var(--discord-icon-width) / 0.5);
  width: var(--discord-icon-width);
  height: var(--discord-icon-height);
  pointer-events: none;
  opacity: 0.7;
}
.welcome-button-Invest:hover .welcome-button-Invest-icon {
  opacity: 1;
}

/* about hive button */
.welcome-button-aboutHive {
  position: fixed;
  top: 0%;
  left: 27%;
  width: 10%;
  height: 7%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.3vh;
  text-align: center;
  color: yellow;
}

.welcome-button-aboutHive > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-aboutHive-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.7vh;
  left: 5%;
  top: -5%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  pointer-events: none;
  color: #fff;
  opacity: 0.7;
}

.welcome-button-aboutHive .welcome-button-aboutHive-icon {
  position: absolute;
  left: 41%;
  top: 33%;
  --discord-icon-width: 16%;
  --discord-icon-height: calc(var(--discord-icon-width) / 0.4);
  width: var(--discord-icon-width);
  height: var(--discord-icon-height);
  pointer-events: none;
  opacity: 0.7;
}

.welcome-button-aboutHive:hover .welcome-button-aboutHive-icon {
  opacity: 1;
}

.welcome-button-createReferral {
  position: fixed;
  top: 0%;
  left: 38%;
  width: 10%;
  height: 7%;
  opacity: 0.01;
  visibility: hidden;
  pointer-events: none;
  font-family: "consolePro";
  font-size: 1.3vh;
  text-align: center;
  color: yellow;
}

.welcome-button-createReferral > img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.welcome-button-createReferral-text {
  position: absolute;
  font-family: "consolePro";
  font-size: 1.7vh;
  left: 5%;
  top: -5%;
  width: 80%;
  height: 75%;
  padding: 5px;
  padding-top: 1vh;
  background: transparent;
  pointer-events: none;
  color: #fff;
  opacity: 0.7;
}

.welcome-button-createReferral .welcome-button-createReferral-icon {
  position: absolute;
  left: 41%;
  top: 33%;
  --discord-icon-width: 16%;
  --discord-icon-height: calc(var(--discord-icon-width) / 0.4);
  width: var(--discord-icon-width);
  height: var(--discord-icon-height);
  pointer-events: none;
  opacity: 0.7;
}

.welcome-button-createReferral:hover .welcome-button-createReferral-icon {
  opacity: 1;
}

/* ----------------------------------- */
/*       MEDIA QUERIES */
/* ----------------------------------- */
@media screen and (max-width: 1405px) {
  /* discord button */
  .welcome-button-joinDiscord-text {
    font-size: 1.3vh;
  }
  .welcome-button-joinDiscord-text > img.welcome-button-joinDiscord-icon {
    --discord-icon-width: 17%;
    --discord-icon-height: calc(var(--discord-icon-width) / 0.5);
    width: var(--discord-icon-width);
    height: var(--discord-icon-height);
  }

  /* how to invest button */
  .welcome-button-Invest-text {
    font-size: 1.3vh;
  }

  /* about hive button */
  .welcome-button-aboutHive-text {
    font-size: 1.3vh;
  }

  /* free demo text */
  .welcome-button-freeDemo .welcome-button-freeDemo-text {
    font-size: 1.4vh;
  }
}

/* ----------------------------------- */
/*       MEDIA QUERIES MOBILE          */
/* ----------------------------------- */
@media screen and (max-width: 767px) {
  /* welcome logo */
  .welcome-exode-logo-with-text {
    width: 35vh;
  }
  /* top four buttons */
  .welcome-button-joinDiscord {
    left: 2%;
    width: 21%;
    height: 6%;
    max-width: 103px;
  }
  .welcome-button-joinDiscord-text > img.welcome-button-joinDiscord-icon {
    top: 38%;
  }
  .welcome-button-aboutExode {
    left: 26%;
    width: 21%;
    height: 6%;
    max-width: 103px;
  }
  .welcome-button-Invest {
    left: 51%;
    width: 21%;
    height: 6%;
    max-width: 103px;
  }
  .welcome-button-aboutHive {
    left: 77%;
    width: 21%;
    height: 6%;
    max-width: 103px;
  }

  /* greeting input and login */
  .welcome-text {
    width: 59%;
  }

  .welcome-button-login-email {
    width: 76%;
    max-width: 380px;
  }
  .welcome-button-login-emailpassword {
    width: 76%;
    max-width: 380px;
  }

  .welcome-button-action-login {
    bottom: 14%;
    width: 53%;
    max-width: 200px;
  }

  /* bottom buttons */

  /* how to sign up text */
  .toggle-text {
    top: -5%;
  }

  .welcome-button-freeDemo {
    width: 20%;
  }
  .welcome-button-freeDemo .welcome-button-freeDemo-text {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 31%;
  }

  .welcome-button-action-getpacks {
    left: 51%;
    width: 49.5%;
    height: 10%;
  }

  .welcome-button-action-getpacks-text {
    top: 8%;
    font-size: 2vh;
  }
  .welcome-button-action-supportDevelopment-text {
    font-size: 1.8vh;
  }

  /* TEMP removing button for style_whatisexode for mobile */
  .welcome-button-joinDiscord {
    left: 22%;
  }
  .welcome-button-aboutHive {
    left: 58%;
  }

  .welcome-button-aboutExode {
    display: none;
    left: 0%;
  }
  .welcome-button-Invest {
    display: none;
  }
}