@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
@font-face {
  font-family: "Azonix Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Azonix Regular"), url("/fonts/Azonix.woff") format("woff");
}
@font-face {
  font-family: "Outrun";
  font-style: normal;
  font-weight: normal;
  src: local("Outrun"), url("/fonts/Outrun.otf") format("opentype");
}
@font-face {
  font-family: "Underground";
  font-style: normal;
  font-weight: normal;
  src: local("Underground"), url("/fonts/08Underground.ttf") format("truetype");
}
:root {
  --red: #d80b31;
  --darkred: #de0101;
  --yellow: #ffec4c;
  --green: #5be140;
  --bgcolor: #ffffff;
  --bgGrey: #3d3d3d;
  --orange: #f17b2c;
  --darkorange: #cf4f01;
  --white: var(--bgcolor);
  --black: #121212;
  --shadow70: #3d3d3d70;
  --shadow40: #3d3d3d45;
  --shadow25: #3d3d3d25;
  --radius: 25px;
  --arrowSize: 40px;
  --headers: 48px;
  --subheaders: 38px;
  --paragraph: 22px;
  --cursor: url(/imgs/cursorD.png), default;
  --thumbColor: var(--black);
  --dropShadow: drop-shadow(3px 3px 1.5px #17171740);
}

* {
  scrollbar-width: 20px;
  scroll-behavior: smooth !important;
  font-family: "Ubuntu";
}

html {
  scroll-behavior: smooth !important;
  cursor: var(--cursor);
}
html::-webkit-scrollbar {
  width: 20px;
}
html::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: var(--white) 3px solid;
  border-radius: 7.5px;
  background-color: var(--black);
}
html::-webkit-scrollbar-track {
  background: var(--black);
}
html .loading {
  display: none;
}

#mainPage {
  position: relative;
  right: 0%;
  transition: right 1s ease;
  min-height: calc(var(--mainPageHeight, auto) * 1px);
}

#mainPage.mainPageHideShow {
  right: 500%;
  display: none;
  transition: right 2s ease;
}

.headerContainer {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: hidden;
}
.headerContainer .headerFaqTitleImg {
  height: 40px;
  position: fixed;
  top: 35%;
  left: 15px;
  transform: translateX(0%) scale(1);
  transition: all 1s ease;
  z-index: 2;
}
.headerContainer .headerFaqTitleImg.active {
  pointer-events: none;
  transition: all 1s ease;
  -webkit-filter: saturate(0);
}
@media screen and (max-width: 1250px) {
  .headerContainer .headerFaqTitleImg.active {
    opacity: 0;
    pointer-events: none;
    -webkit-filter: saturate(0);
    transform: translateX(-10%) scale(1);
  }
}
.headerContainer .headerFaqTitleImg.focus {
  transform: translateX(0%) scale(0.75);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.headerContainer .headerFaqTitleImg.hide {
  transform: translateX(-10%) scale(1);
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease;
}
.headerContainer .headerPromptContainer {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -69;
  display: none;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: all 0.5s ease;
}
.headerContainer .headerPromptContainer.hide {
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s 0.4s ease;
}
.headerContainer .headerPromptContainer .headerPromptScrollable {
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(18, 18, 18, 0.9176470588);
  width: 400px;
  min-height: 200px;
  margin: auto 10px;
  border-radius: 15px;
  position: relative;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard {
  max-width: 400px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth !important;
  cursor: var(--cursor);
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard::-webkit-scrollbar {
  width: 2px;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptRedLine {
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  top: 20px;
  left: 20px;
  right: 20px;
  margin: 0px auto 0px auto;
  background-color: var(--red);
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptRedLine.active {
  left: 50%;
  right: 50%;
  transition: left 0.3s ease, right 0.3s ease;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent {
  margin: 20px auto auto auto;
  font-size: 13px;
  font-weight: bolder;
  color: var(--white);
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent p {
  margin: 0;
  padding: 0;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent .promptTitle {
  margin: 0;
  font-size: 24px;
  text-align: center;
  width: 100%;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent .promptP {
  font-weight: 500;
  margin: 15px auto auto auto;
  letter-spacing: 1px;
  line-height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent .promptP span {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptContent .promptP a {
  margin: 0;
  padding: 0;
  color: #7289da;
  font-weight: bolder;
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: red;
  display: contents;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptButton {
  margin: 20px auto 0px auto;
  width: 150px;
  height: 25px;
  background-color: var(--red);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptButton:hover {
  transform: scale(1.025);
  transition: transform 0.3s ease;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptButton.clicked {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
.headerContainer .headerPromptContainer .headerPromptScrollable .headerPromptCard .promptButton p {
  font-weight: bolder;
  color: var(--white);
  margin: auto;
  padding: 0;
}
.headerContainer .patchLogoSide {
  position: fixed;
  left: 15px;
  top: 63%;
  z-index: 9;
  opacity: 1;
  transform: translateX(0%) scale(1);
  transition: opacity 1s ease, transform 1s ease;
}
.headerContainer .patchLogoSide.active {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10%) scale(1);
  transition: opacity 1s ease, transform 1s ease;
}
.headerContainer .patchLogoSide.focus {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10%) scale(0.75);
  transition: all 0.5s ease;
}
.headerContainer .patchLogoSide img {
  height: 45px;
}
.headerContainer .patchNotesContainer {
  position: fixed;
  background-color: rgba(18, 18, 18, 0.8352941176);
  height: 100%;
  width: 100%;
  z-index: 61;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}
.headerContainer .patchNotesContainer.active {
  pointer-events: all;
  opacity: 1;
  transition: all 0.3s 0.4s ease;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer {
  background-color: rgba(18, 18, 18, 0.9176470588);
  margin: auto 10px;
  border-radius: 25px;
  box-sizing: border-box;
  border-top: 5px red;
  padding: 30px 10px;
  position: relative;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard {
  max-width: 400px;
  max-height: 400px;
  margin: auto 10px;
  grid-gap: 10px;
  flex-direction: column;
  justify-content: center;
  overflow: scroll;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard::-webkit-scrollbar {
  width: 0;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptRedLinePatch {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 3px;
  margin: 0px auto 0px auto;
  background-color: var(--red);
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptRedLinePatch.active {
  left: 50%;
  right: 50%;
  transition: left 0.3s ease, right 0.3s ease;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent {
  margin: 20px auto auto auto;
  font-size: 13px;
  font-weight: bolder;
  color: var(--white);
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent p {
  margin: 0;
  padding: 0;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent .promptTitle {
  margin: 0;
  font-size: 34px;
  text-align: center;
  width: 100%;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent .promptP {
  font-weight: 500;
  margin: 10px auto auto auto;
  letter-spacing: 1px;
  line-height: 25px;
  text-align: justify;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent .promptP .updateTitle {
  margin: 0;
  text-align: center;
  color: #ffb401;
  font-weight: bolder;
  font-size: 16px;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent .promptP i {
  font-size: 12px;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .patchNotesCard .promptContent .promptP i span {
  color: #ffb401;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .promptButtonPatch {
  margin: auto auto 0px auto;
  width: 150px;
  height: 25px;
  background-color: var(--red);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .promptButtonPatch:hover {
  transform: scale(1.025);
  transition: transform 0.3s ease;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .promptButtonPatch.clicked {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
.headerContainer .patchNotesContainer .patchNotesScrollableContainer .promptButtonPatch p {
  font-weight: bolder;
  color: var(--white);
  margin: auto;
  padding: 0;
}
.headerContainer .headerFaqContainer {
  box-sizing: border-box;
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0px;
  max-width: 650px;
  width: 100%;
  margin: auto;
  display: flex;
  z-index: 0;
}
.headerContainer .headerFaqContainer .headerFaqCard {
  box-sizing: border-box;
  border-radius: 25px;
  min-height: 300px;
  background-color: rgba(18, 18, 18, 0.9176470588);
  display: flex;
  grid-gap: 10px;
  flex-direction: column;
  padding: 20px;
  margin: auto 10px 0px 10px;
  pointer-events: none;
  opacity: 0%;
  transition: all 1s ease;
  position: relative;
}
.headerContainer .headerFaqContainer .headerFaqCard.active {
  transition: all 1s ease;
  opacity: 100%;
  pointer-events: all;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqMascot {
  position: absolute;
  height: 150px;
  transform: translate(-110%, 55%);
}
@media screen and (max-width: 920px) {
  .headerContainer .headerFaqContainer .headerFaqCard .headerFaqMascot {
    height: 120px;
    transform: translate(-10%, 310px);
  }
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqTitleNum {
  display: flex;
  grid-gap: 10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 0px;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqTitleNum .headerFaqTitle {
  color: var(--white);
  font-weight: bolder;
  font-size: 30px;
  letter-spacing: 1px;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqTitleNum .headerFaqNum {
  margin: 5px 0px auto auto;
  letter-spacing: 2px;
  color: var(--white);
  font-weight: bolder;
  font-size: 12px;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqRedLineContent {
  width: 95%;
  min-height: 0px;
  margin: auto;
  display: flex;
  justify-content: left;
  align-content: center;
  align-items: center;
  border-left: 5px solid var(--red);
  transition: all 0.3s ease;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqRedLineContent.borderAnim {
  -webkit-animation: borderAnim 0.3s ease forwards;
          animation: borderAnim 0.3s ease forwards;
}
@-webkit-keyframes borderAnim {
  from {
    border-left: 0px solid var(--red);
  }
  to {
    border-left: 5px solid var(--red);
  }
}
@keyframes borderAnim {
  from {
    border-left: 0px solid var(--red);
  }
  to {
    border-left: 5px solid var(--red);
  }
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqRedLineContent .headerFaqContent {
  padding-left: 15px;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqRedLineContent .headerFaqContent p {
  letter-spacing: 1px;
  line-height: 25px;
  text-align: left;
  padding: 0;
  margin: auto;
  transform: translateY(3%);
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext {
  width: 100%;
  min-height: 0px;
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .headerFaqExit {
  margin: auto auto auto 0px;
  height: 25px;
  width: 25px;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .headerFaqExit:hover {
  transform: scale(1.05);
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .headerFaqNext {
  z-index: 2;
  margin: auto 7px auto auto;
  height: 20px;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .headerFaqNext:hover {
  transform: scale(1.05);
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .hfC {
  position: absolute;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 100%;
  border: 3px solid var(--red);
  border-bottom: transparent 3px solid;
  background-color: transparent;
  z-index: 1;
  -webkit-animation: circleRotate 6s linear infinite;
          animation: circleRotate 6s linear infinite;
}
.headerContainer .headerFaqContainer .headerFaqCard .headerFaqLoadingNext .hfC div {
  margin: 0px;
  height: 5px;
  width: 5px;
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 100%;
  -webkit-animation: circleRotate 9s linear infinite;
          animation: circleRotate 9s linear infinite;
}
.headerContainer .headerImgContainer {
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  transform: scale(1.1);
  transition: transform 5s ease;
}
.headerContainer .headerImgContainer .headerImg {
  position: fixed;
  min-height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  z-index: -1;
  filter: brightness(8);
  -webkit-filter: brightness(8);
  transition: filter 3s ease;
}
.headerContainer .timedateContainer {
  position: fixed;
  top: 115px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  -webkit-filter: drop-shadow(0px 2px rgba(0, 0, 0, 0.1));
}
.headerContainer .timedateContainer .sunMoonContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 300px;
}
.headerContainer .timedateContainer .sunMoonContainer img {
  position: absolute;
}
.headerContainer .timedateContainer .sunMoonContainer .clouds {
  top: -45%;
  right: 25%;
  height: 150px;
  width: auto;
  -webkit-animation: cloudsAnim 0.5s alternate infinite;
          animation: cloudsAnim 0.5s alternate infinite;
}
@-webkit-keyframes cloudsAnim {
  from {
    top: -45%;
  }
  to {
    top: -44%;
  }
}
@keyframes cloudsAnim {
  from {
    top: -45%;
  }
  to {
    top: -44%;
  }
}
.headerContainer .timedateContainer .sunMoonContainer .moon {
  top: -40%;
  right: 25%;
  height: 75px;
  width: 75px;
  z-index: -1;
}
.headerContainer .timedateContainer .sunMoonContainer .moon.sun {
  -webkit-animation: sunAnim 10s linear infinite;
          animation: sunAnim 10s linear infinite;
}
.headerContainer .timedateContainer .sunMoonContainer .moon.moonNight {
  -webkit-animation: moonAnim 3s alternate infinite;
          animation: moonAnim 3s alternate infinite;
}
@-webkit-keyframes sunAnim {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes sunAnim {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes moonAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes moonAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(5deg);
  }
}
.headerContainer .timedateContainer .timeDateDesign {
  color: var(--black);
  display: flex;
  flex-direction: row;
  grid-gap: 5px;
  height: 100px;
  max-width: 300px;
  width: 300px;
  position: relative;
  transform: rotate(-3deg);
}
.headerContainer .timedateContainer .timeDateDesign .hrs {
  z-index: 1;
  position: absolute;
  top: -40%;
  left: 15%;
  margin: auto;
  font-size: 40px;
  transform: rotate(-15deg);
  padding: 20px 50px 20px 20px;
  font-family: "Outrun";
}
.headerContainer .timedateContainer .timeDateDesign .minsContainer {
  top: 0%;
  left: 42%;
  position: absolute;
  margin: auto;
  height: 40px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 5px;
  padding: 20px 40px 20px 0px;
  transform: rotate(-5deg);
  flex-direction: row;
}
.headerContainer .timedateContainer .timeDateDesign .minsContainer .mins {
  z-index: 2;
  font-size: 18px;
}
.headerContainer .timedateContainer .timeDateDesign .minsContainer p {
  z-index: 2;
  font-size: 18px;
  font-family: "Outrun";
}
.headerContainer .timedateContainer .timeDateDesign .secsContainer {
  top: 30%;
  left: 55%;
  position: absolute;
  margin: auto;
  height: 20px;
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 5px;
  padding: 15px 30px 15px 0px;
  transform: rotate(15deg);
  flex-direction: row;
  z-index: 3;
}
.headerContainer .timedateContainer .timeDateDesign .secsContainer .secs {
  z-index: 2;
  font-size: 12px;
}
.headerContainer .timedateContainer .timeDateDesign .secsContainer p {
  font-family: "Outrun";
  z-index: 2;
  font-size: 12px;
}
.headerContainer .timedateContainer .timeDateDesign .amPmContainer {
  top: 25%;
  left: 65%;
  position: absolute;
  margin: auto;
  height: 20px;
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 5px;
  padding: 15px 30px 15px 0px;
  transform: rotate(-12.5deg);
  flex-direction: row;
  z-index: 3;
}
.headerContainer .timedateContainer .timeDateDesign .amPmContainer .amPm {
  z-index: 2;
  font-size: 12px;
}
.headerContainer .timedateContainer .timeDateDesign .amPmContainer p {
  font-family: "Outrun";
  z-index: 2;
  font-size: 12px;
}
.headerContainer .timedateContainer .timeDateDesign .utcContainer {
  font-size: 12px;
  top: 45%;
  left: 60%;
  position: absolute;
  margin: auto;
  height: 20px;
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 5px;
  padding: 15px 30px 15px 0px;
  flex-direction: row;
  transform: rotate(-12.5deg);
  z-index: 3;
}
.headerContainer .timedateContainer .timeDateDesign .utcContainer p {
  font-family: "Outrun";
}
.headerContainer .chatSideBarContainer {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
  height: 250px;
  width: 100px;
  display: flex;
  opacity: 100%;
  pointer-events: unset;
  z-index: 1;
  transition: opacity 1s ease, transform 1s ease;
}
.headerContainer .chatSideBarContainer.active {
  opacity: 0%;
  pointer-events: none;
  transform: translate(-10%, -50%);
  transition: opacity 1s ease, transform 1s ease;
}
.headerContainer .chatSideBarContainer.focus {
  transform: translate(0%, -50%) scale(0.75);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.headerContainer .chatSideBarContainer .chatSideBar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(10%, -50%);
  height: 300px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.headerContainer .chatSideBarContainer .chatSideBar img {
  margin: 0px 0px 0px 15px;
  height: 60px;
}
.headerContainer .chatSideBarContainer .chatSideBarArrowsContainer {
  margin: auto;
  height: 50px;
  width: 50px;
  margin-left: 75px;
  display: flex;
  align-items: center;
  grid-gap: 0px;
}
.headerContainer .chatSideBarContainer .chatSideBarArrowsContainer img {
  height: 20px;
  width: 20px;
}
.headerContainer .chatSideBarContainer .chatSideBarArrowsContainer img:nth-of-type(2) {
  transform: translateX(-20%);
}
.headerContainer .chatContainer {
  position: fixed;
  bottom: 25%;
  transform: translateY(21%);
  left: 0;
  width: 100%;
  height: 500px;
  display: flex;
  z-index: 0;
}
.headerContainer .chatContainer .phoneContainer {
  box-sizing: border-box;
  margin: auto;
  padding: 18px;
  height: 500px;
  max-width: 275px;
  width: 100%;
  background: var(--black);
  border-radius: 30px;
  border: 3px solid var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  z-index: 1;
  transform: translateY(100%) translateX(0%);
  opacity: 0%;
  transition: transform 1s ease, opacity 0.5s ease;
}
.headerContainer .chatContainer .phoneContainer.active {
  opacity: 100%;
  transform: translateY(-8%) translateX(0%);
  transition: transform 1s ease, opacity 0.5s ease;
}
.headerContainer .chatContainer .phoneContainer.aboutActive {
  transform: translateY(-8%) translateX(-60%);
  transition: transform 1s ease, opacity 0.5s ease;
}
.headerContainer .chatContainer .phoneContainer.aboutActive2 {
  transform: translateY(-8%) translateX(0%);
  transition: transform 1s ease, opacity 0.5s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneBlackBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  border-radius: 30px;
  background-color: black;
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneBlackBg.active {
  opacity: 0;
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen {
  height: 100%;
  width: 100%;
  border: 4px solid black;
  border-radius: 25px;
  background-color: var(--red);
  background-position: center;
  background-size: contain;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen.active {
  opacity: 0;
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgWhiteDots {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgBlackDots {
  position: absolute;
  top: -35%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  z-index: 0;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgCirclesContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgCirclesContainer .bgCircles {
  position: absolute;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgCirclesContainer .bgCircles:nth-child(1) {
  top: 10%;
  left: 10%;
  height: 70px;
  -webkit-animation: circle 1s alternate infinite;
          animation: circle 1s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgCirclesContainer .bgCircles:nth-child(2) {
  top: 40%;
  left: 40%;
  height: 50px;
  -webkit-animation: circle 1s 0.5s alternate infinite;
          animation: circle 1s 0.5s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgCirclesContainer .bgCircles:nth-child(3) {
  top: 60%;
  left: 10%;
  height: 30px;
  -webkit-animation: circle 1s 1s alternate infinite;
          animation: circle 1s 1s alternate infinite;
}
@-webkit-keyframes circle {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
@keyframes circle {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgTrianglesContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgTrianglesContainer .bgTriangles {
  position: absolute;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgTrianglesContainer .bgTriangles:nth-child(1) {
  top: 5%;
  right: 10%;
  height: 25px;
  -webkit-animation: trangle 1s 1s alternate infinite;
          animation: trangle 1s 1s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgTrianglesContainer .bgTriangles:nth-child(2) {
  top: 50%;
  right: 40%;
  height: 50px;
  -webkit-animation: trangle 1s 0.3s alternate infinite;
          animation: trangle 1s 0.3s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgTrianglesContainer .bgTriangles:nth-child(3) {
  top: 80%;
  right: 10%;
  height: 100px;
  -webkit-animation: trangle 1s alternate infinite;
          animation: trangle 1s alternate infinite;
}
@-webkit-keyframes trangle {
  from {
    transform: scale(1) rotate(5deg);
  }
  to {
    transform: scale(0.9) rotate(-5deg);
  }
}
@keyframes trangle {
  from {
    transform: scale(1) rotate(5deg);
  }
  to {
    transform: scale(0.9) rotate(-5deg);
  }
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgDiamondsContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgDiamondsContainer .bgDiamonds {
  position: absolute;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgDiamondsContainer .bgDiamonds:nth-child(1) {
  top: 15%;
  left: 80%;
  height: 25px;
  -webkit-animation: trangle 1s 0.6s alternate infinite;
          animation: trangle 1s 0.6s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgDiamondsContainer .bgDiamonds:nth-child(2) {
  top: 50%;
  left: 80%;
  height: 50px;
  -webkit-animation: trangle 1s 0.8s alternate infinite;
          animation: trangle 1s 0.8s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .bgDiamondsContainer .bgDiamonds:nth-child(3) {
  top: 85%;
  left: 10%;
  height: 50px;
  -webkit-animation: trangle 1s 0.5s alternate infinite;
          animation: trangle 1s 0.5s alternate infinite;
}
@keyframes trangle {
  from {
    transform: scale(1) rotate(5deg);
  }
  to {
    transform: scale(0.9) rotate(-5deg);
  }
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-color: transparent;
  position: relative;
  display: flex;
  overflow: hidden;
  z-index: 4;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .resonateButton {
  position: fixed;
  top: 50px;
  right: 20px;
  background-color: black;
  height: 26px;
  display: none;
  border-radius: 25px;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .resonateButton.clicked {
  transform: scale(0.98);
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .resonateButton p {
  margin: auto;
  padding: 5px;
  font-weight: bolder;
  font-size: 14px;
  color: var(--white);
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatTitle {
  position: fixed;
  top: 50px;
  left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100px;
  border-radius: 50px;
  background-color: var(--black);
  transform: rotate(-5deg);
  z-index: 4;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatTitle div {
  font-weight: bolder;
  color: white;
  font-size: 24px;
  line-height: 100%;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatTitle div:nth-of-type(1), .headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatTitle div:nth-of-type(2) {
  color: var(--red);
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatTitle div:nth-of-type(3) {
  color: var(--black);
  background-color: var(--white);
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer {
  background-color: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  margin: 60px 0px 0px 0px;
  padding: 30px 0px 60px 0px;
  width: 100%;
  height: 337px;
  overflow-y: scroll;
  position: absolute;
  left: -50%;
  z-index: 0;
  transform: translateX(50%);
  border-top: 1px solid var(--black);
  scroll-behavior: smooth;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer::-webkit-scrollbar-thumb {
  width: 0px;
  background-color: transparent;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0px 5px 20px 5px;
  position: relative;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .pfpAvatar {
  -webkit-filter: drop-shadow(2px 2px 0px black);
  margin: 0px 0px auto 0px;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .pfpAvatar img {
  height: 50px;
  width: auto;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .messageContentContainer {
  margin: 10px 0px auto 18px;
  background-color: white;
  border-radius: 20px;
  width: 125px;
  padding: 10px 15px 10px 10px;
  -webkit-filter: drop-shadow(3px 5px var(--black));
  position: relative;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .messageContentContainer .chatTail {
  position: absolute;
  height: 20px;
  top: 40%;
  left: -10%;
  z-index: -999;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .messageContentContainer p {
  font-weight: bold;
  font-size: 12px;
  text-align: left;
  margin: auto;
}
.headerContainer .chatContainer .phoneContainer .phoneScreen .phoneScreenDisplay .phoneChatContainer .chatMessageContainer .messageContentContainer .chatExc {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: auto;
}
.headerContainer .chatContainer .phoneContainer .phoneNotch {
  position: absolute;
  background-color: black;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  height: 42.5px;
  width: 85px;
  border-radius: 0px 0px 15px 15px;
  z-index: 99;
}
.headerContainer .chatContainer .phoneContainer .phoneHomeButton {
  margin: 15px auto 0px auto;
  border-radius: 50%;
  min-height: 40px;
  min-width: 40px;
  border: 2px solid var(--white);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 99;
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneHomeButton.active {
  opacity: 0;
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .phoneHomeButton:hover {
  transform: scale(0.95);
}
.headerContainer .chatContainer .phoneContainer .phoneHomeButton img {
  height: 20px;
  width: 20px;
}
.headerContainer .chatContainer .phoneContainer .phoneArrowLeft {
  position: absolute;
  top: 50%;
  right: -15%;
  transform: translateY(-50%) rotate(-90deg);
  margin: auto;
  height: 50px;
  width: 50px;
  display: none;
  align-items: center;
  grid-gap: 0px;
  pointer-events: none;
  -webkit-animation: upDown 0.5s alternate infinite;
          animation: upDown 0.5s alternate infinite;
}
.headerContainer .chatContainer .phoneContainer .phoneArrowLeft img {
  height: 23px;
  width: 23px;
}
.headerContainer .chatContainer .phoneContainer .phoneArrowLeft.active {
  pointer-events: all;
}
@-webkit-keyframes upDown {
  from {
    transform: translateY(-50%) rotate(-90deg);
  }
  to {
    transform: translateY(-52.5%) rotate(-90deg);
  }
}
@keyframes upDown {
  from {
    transform: translateY(-50%) rotate(-90deg);
  }
  to {
    transform: translateY(-52.5%) rotate(-90deg);
  }
}
.headerContainer .chatContainer .phoneContainer .headerDC {
  height: 100%;
  width: 0%;
  position: absolute;
  left: 0%;
  transition: left 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerDC.active {
  left: -75%;
  transition: left 1s ease;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerDC.active {
    left: -100%;
  }
}
.headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(1) {
  z-index: -2;
  position: absolute;
  top: 50%;
  left: -85%;
  height: 50px;
  width: auto;
  -webkit-filter: saturate(0);
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(1):hover {
  transition: all 0.3s ease;
  -webkit-filter: saturate(1);
  transform: scale(0.99);
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(1) {
    display: none;
    pointer-events: none;
  }
}
.headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(1).aboutActive {
  transform-origin: bottom;
  transform: translateY(200%) translateX(100%) rotate(-90deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(2) {
  z-index: 0;
  position: absolute;
  bottom: -5%;
  left: 5%;
  height: 35px;
  width: auto;
  display: none;
  pointer-events: none;
  transform: scale(1) translateX(320%);
}
.headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(2):hover {
  transform: scale(0.99) translateX(320%);
  -webkit-filter: drop-shadow(2px 2px var(--red));
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerDC img:nth-child(2) {
    display: block;
    pointer-events: all;
  }
}
.headerContainer .chatContainer .phoneContainer .headerTW {
  position: absolute;
  height: 100%;
  width: 0%;
  left: 0%;
  transition: left 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerTW.active {
  left: -73%;
  transition: left 1s ease;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerTW.active {
    left: -90%;
  }
}
.headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(1) {
  z-index: -2;
  position: absolute;
  top: 30%;
  height: 65px;
  width: auto;
  -webkit-filter: saturate(0);
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(1):hover {
  transition: all 0.3s ease;
  -webkit-filter: saturate(1);
  transform: scale(0.99);
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(1) {
    display: none;
    pointer-events: none;
  }
}
.headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(1).aboutActive {
  transform-origin: bottom;
  transform: translateY(0%) translateX(100%) rotate(-90deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(2) {
  z-index: 0;
  position: absolute;
  bottom: -5%;
  height: 35px;
  width: auto;
  pointer-events: none;
  display: none;
  transform: scale(1) translateX(200%);
}
.headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(2):hover {
  transform: scale(0.99) translateX(200%);
  -webkit-filter: drop-shadow(2px 2px var(--red));
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerTW img:nth-child(2) {
    display: block;
    pointer-events: all;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout {
  height: 100%;
  width: 0%;
  position: absolute;
  right: 0%;
  z-index: -2;
  transition: right 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout.active {
  right: -55%;
  transition: right 1s ease;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerAbout.active {
    right: -57%;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(1) {
  z-index: -2;
  position: absolute;
  top: 30%;
  right: -55%;
  height: 65px;
  width: auto;
  -webkit-filter: saturate(0);
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(1):hover {
  transition: all 0.3s ease;
  -webkit-filter: saturate(1);
  transform: scale(0.99);
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(1) {
    display: none;
    pointer-events: none;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(1).aboutActive {
  transform-origin: bottom;
  transform: translateY(-210%) translateX(0%) rotate(0deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(1).manifestoActive {
  transform-origin: bottom;
  transform: translateY(0%) translateX(-100%) rotate(-90deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(2) {
  z-index: 0;
  position: absolute;
  top: 106%;
  height: 30px;
  transform: scale(1) translateX(-272%);
  width: auto;
  display: none;
  pointer-events: none;
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(2):hover {
  transform: scale(0.99) translateX(-272%);
  -webkit-filter: drop-shadow(2px 2px var(--red));
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(2) {
    display: block;
    pointer-events: all;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(2).aboutActive {
  transform-origin: bottom;
  transform: translateY(200%) translateX(-100%) rotate(90deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout img:nth-child(2).pointNone {
  pointer-events: none;
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard {
  opacity: 0%;
  position: fixed;
  bottom: 0;
  right: -130%;
  height: 175px;
  width: 110%;
  background-color: var(--black);
  border-radius: 25px;
  padding: 0px 20px;
  z-index: -5;
  transition: all 0.3s ease;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  overflow-y: scroll;
  border-top: 20px solid black;
  border-bottom: 20px solid black;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard {
    overflow-y: unset;
    box-sizing: border-box;
    width: 275px;
    opacity: 0%;
    left: 0%;
    top: 20px;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard::-webkit-scrollbar {
  width: 1px;
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard::-webkit-scrollbar-track {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard::-webkit-scrollbar-thumb {
  width: 2px;
  background-color: var(--red);
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard.active {
  opacity: 100%;
  transform: translateY(-80%);
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard.aboutActive2 {
  opacity: 100%;
  transform: translateY(0%);
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard p {
  margin: 0;
  padding: 0;
  color: var(--white);
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard .headerAboutTitle {
  margin: 5px auto 10px auto;
  width: 100%;
  border-bottom: 3px solid var(--red);
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard .headerAboutTitle p {
  display: none;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard .headerAboutTitle p {
    display: block;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    padding-bottom: 5px;
  }
}
.headerContainer .chatContainer .phoneContainer .headerAbout .headerAboutCard .headerAboutP {
  margin: 0px auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto {
  position: absolute;
  height: 100%;
  width: 0%;
  right: 100%;
  transition: right 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto.active {
  right: -5%;
  transition: right 1s ease;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerManifesto.active {
    right: -8%;
  }
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard {
  opacity: 0%;
  position: fixed;
  bottom: 0;
  right: -130%;
  height: 175px;
  width: 110%;
  background-color: var(--black);
  border-radius: 25px;
  padding: 0px 20px;
  z-index: -5;
  transition: all 0.3s ease;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  overflow-y: scroll;
  border-top: 20px solid black;
  border-bottom: 20px solid black;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard::-webkit-scrollbar {
  width: 1px;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard::-webkit-scrollbar-track {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard::-webkit-scrollbar-thumb {
  width: 2px;
  background-color: var(--red);
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard {
    overflow-y: unset;
    box-sizing: border-box;
    width: 100%;
    opacity: 0%;
    left: 0%;
    top: 20px;
  }
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard.active {
  opacity: 100%;
  transform: translateY(-78%);
  transition: all 1s ease;
  z-index: -1;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard.aboutActive2 {
  opacity: 100%;
  transform: translateY(0%);
  transition: all 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard p {
  margin: 0;
  padding: 0;
  color: var(--white);
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard .headerManifestoTitle {
  margin: 5px auto 10px auto;
  width: 100%;
  border-bottom: 3px solid var(--red);
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard .headerManifestoTitle p {
  display: none;
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard .headerManifestoTitle p {
    display: block;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    padding-bottom: 5px;
  }
}
.headerContainer .chatContainer .phoneContainer .headerManifesto .headerManifestoCard .headerManifestoP {
  margin: 0px auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(1) {
  z-index: -2;
  position: absolute;
  top: 50%;
  height: 45px;
  width: auto;
  -webkit-filter: saturate(0);
  transition: all 0.3s ease;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(1):hover {
  transition: all 0.3s ease;
  -webkit-filter: saturate(1);
  transform: scale(0.99);
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(1) {
    display: none;
    pointer-events: none;
  }
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(1).aboutActive {
  transform-origin: bottom;
  transform: translateY(-150%) translateX(-100%) rotate(-90deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(1).manifestoActive {
  transform-origin: bottom;
  transform: translateY(-450%) translateX(0%) rotate(0deg);
  transition: transform 1s ease;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(2) {
  z-index: 0;
  position: absolute;
  top: 106%;
  transform: scale(1) translateX(-175%);
  height: 35px;
  width: auto;
  pointer-events: none;
  display: none;
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(2):hover {
  transform: scale(0.99) translateX(-175%);
  -webkit-filter: drop-shadow(2px 2px var(--red));
}
@media screen and (max-width: 700px) {
  .headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(2) {
    display: block;
    pointer-events: all;
  }
}
.headerContainer .chatContainer .phoneContainer .headerManifesto img:nth-child(2).pointNone {
  pointer-events: none;
}
.headerContainer .headerHeadlines {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 20px;
  padding: 0;
  margin: 0;
  background-color: var(--orange);
  display: flex;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.headerContainer .headerHeadlines.active {
  transform: translateY(0%);
  transition: transform 1s ease;
}
.headerContainer .headerHeadlines .headerNews {
  display: flex;
  flex-direction: row;
}
.headerContainer .headerHeadlines .headerNews p {
  white-space: nowrap;
  margin: auto 20px auto auto;
  display: inline;
  padding: 0px;
  z-index: 1;
  color: var(--black);
  font-size: 14px;
  font-weight: bolder;
}
@-webkit-keyframes infiniteLoop {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infiniteLoop {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.headerContainer .headerSneakPeeksGallery {
  display: flex;
  position: fixed;
  bottom: 40px;
  width: 100%;
  padding: 0px;
  flex-direction: row;
  align-items: center;
  align-content: center;
  opacity: 100%;
  transition: opacity 0.5s;
  pointer-events: all;
  z-index: 99;
}
.headerContainer .headerSneakPeeksGallery.active {
  transition: opacity 0.5s;
  opacity: 0%;
  pointer-events: none;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer {
  display: flex;
  margin: auto auto auto 20px;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksGallery .peeksContainer {
    margin: auto;
    transform: translateX(-15px);
  }
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek {
  box-sizing: border-box;
  margin: 5px 5px 0px 5px;
  padding: 0;
  height: 80px;
  width: 30px;
  transition: all 0.5s ease;
  position: relative;
  -webkit-animation: waver 1s var(--delay) linear infinite;
          animation: waver 1s var(--delay) linear infinite;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek.hover {
  transform: translate(-5px, -5px);
  transition: all 0.5s ease;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek.focus {
  transform: translate(-5px, -5px);
  transition: all 0.5s ease;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .redLine {
  margin-top: 0;
  width: 0px;
  background-color: var(--red);
  transform: translateY(-50%) translateX(0%);
  height: 5px;
  opacity: 0%;
  transition: all 0.5s ease;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .redLine.active {
  transition: all 0.5s ease;
  width: 80px;
  opacity: 100%;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek img {
  box-sizing: border-box;
  height: 100%;
  z-index: 1;
  margin-bottom: 0px;
  border-radius: 6px;
  border: 3px black solid;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .headerPeekImg {
  margin-bottom: 0px;
  transition: filter 0.5s ease;
  -webkit-filter: brightness(50%) saturate(0);
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .headerPeekImg.active {
  transition: filter 0.5s ease;
  -webkit-filter: brightness(100%) saturate(1);
}
@-webkit-keyframes waver {
  from {
    -webkit-filter: brightness(100%);
    transition: filter 0.5s ease;
  }
  to {
    -webkit-filter: brightness(75%);
    transition: filter 0.5s ease;
  }
}
@keyframes waver {
  from {
    -webkit-filter: brightness(100%);
    transition: filter 0.5s ease;
  }
  to {
    -webkit-filter: brightness(75%);
    transition: filter 0.5s ease;
  }
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .closeTrigger {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.headerContainer .headerSneakPeeksGallery .peeksContainer .headerPeek .closeTrigger.active {
  z-index: 2;
}
.headerContainer .headerSneakPeeksReveal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 0;
  display: flex;
  grid-gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-direction: row;
  opacity: 0%;
  transition: opacity 0.5s ease, transform 1.5s ease, padding 0.5s ease;
  padding: 10px 10px 40px 10px;
  background-color: rgba(18, 18, 18, 0.9176470588);
  border-radius: 20px;
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal {
    display: block;
    height: 500px;
    max-width: 325px;
  }
}
.headerContainer .headerSneakPeeksReveal.active {
  opacity: 100%;
  transform: translate(-50%, -122.5%) scale(1);
  transition: opacity 1s 0.5s ease, transform 1.3s ease, padding 0.5s ease;
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal.active {
    transform: translate(-50%, -132.5%) scale(0.95);
    box-sizing: border-box;
    opacity: 100%;
    height: 450px;
    max-width: 325px;
    overflow: scroll;
    flex-direction: column;
    transition: opacity 1s 0.5s ease, transform 1.3s ease, padding 0.5s ease;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer {
  margin: 0 auto auto auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  max-width: 400px;
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer {
  margin: 0 auto auto auto;
  position: relative;
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .revealImg {
  margin: 0 auto auto auto;
  background-color: black;
  height: 400px;
  width: 400px;
  border-radius: 10px;
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .revealImg.picAnim {
  -webkit-animation: picAnim 0.5s ease;
          animation: picAnim 0.5s ease;
}
@-webkit-keyframes picAnim {
  0%, 100% {
    -webkit-filter: brightness(1.5);
    transform: translateY(0px);
  }
  50% {
    -webkit-filter: brightness(1.5);
    transform: translateY(5px);
  }
  100% {
    -webkit-filter: brightness(1);
    transform: translateY(0px);
  }
}
@keyframes picAnim {
  0%, 100% {
    -webkit-filter: brightness(1.5);
    transform: translateY(0px);
  }
  50% {
    -webkit-filter: brightness(1.5);
    transform: translateY(5px);
  }
  100% {
    -webkit-filter: brightness(1);
    transform: translateY(0px);
  }
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .revealImg {
    margin: 5px auto auto auto;
    height: 300px;
    width: 300px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo {
  bottom: 30px;
  left: 30px;
  position: absolute;
  height: 100px;
  min-width: 120px;
  background-color: rgba(0, 0, 0, 0.558);
  color: var(--white);
  text-transform: uppercase;
  font-weight: bolder;
  display: flex;
  flex-direction: row-reverse;
  border-radius: 5px;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo {
    bottom: 25px;
    left: 25px;
    height: 90px;
    width: 90px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo {
    bottom: 20px;
    left: 20px;
    height: 80px;
    width: 80px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo {
    bottom: 18px;
    left: 15px;
    height: 75px;
    width: 75px;
  }
}
@media screen and (max-width: 350px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo {
    bottom: 15px;
    left: 10px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan {
  height: 90px;
  margin: auto;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  text-orientation: upright;
  border-right: 3px var(--red) solid;
  display: flex;
  font-size: 14px;
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan.borderAnim {
  -webkit-animation: redBorderAnim 0.3s ease forwards;
          animation: redBorderAnim 0.3s ease forwards;
}
@-webkit-keyframes redBorderAnim {
  from {
    border-right: 0px solid var(--red);
  }
  to {
    border-right: 3px solid var(--red);
  }
}
@keyframes redBorderAnim {
  from {
    border-right: 0px solid var(--red);
  }
  to {
    border-right: 3px solid var(--red);
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan p {
  margin: auto 0px;
  padding: 0;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan {
    font-size: 13px;
    height: 85px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan {
    height: 75px;
    font-size: 12px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .clan {
    height: 65px;
    font-size: 11px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer {
  margin: auto;
  width: 70%;
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName p {
  text-align: left;
  width: 100%;
  font-size: 10px;
  margin: 0;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName p {
    font-size: 11px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName p {
    font-size: 10px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName p {
    font-size: 9px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName .charName {
  text-align: center;
  font-size: 24px;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName .charName {
    font-size: 22px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName .charName {
    font-size: 20px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakName .charName {
    font-size: 17px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass p {
  width: 100%;
  font-size: 10px;
  margin: 0;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass p {
    font-size: 11px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass p {
    font-size: 10px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass p {
    font-size: 9px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass .charClass {
  font-size: 24px;
  text-align: center;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass .charClass {
    font-size: 22px;
  }
}
@media screen and (max-width: 450px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass .charClass {
    font-size: 20px;
  }
}
@media screen and (max-width: 400px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .sneakPeakRevealImgContainer .sneakInfo .nameClassContainer .sneakClass .charClass {
    font-size: 17px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .revealDialogueGIFCard {
  display: flex;
  justify-content: center;
  margin: 0 auto 0 auto;
  transition: all 1s ease;
  opacity: 0;
  width: 400px;
  height: 0px;
  position: relative;
  background-color: rgba(18, 18, 18, 0.9176470588);
  border-left: 3px var(--red) solid;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .revealDialogueGIFCard {
    height: 0px;
    width: 300px;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .revealDialogueGIFCard.animate {
  height: 120px;
  opacity: 1;
  transition: all 1.5s 0.5s ease;
  font-size: 14px;
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .imgGifContainer .revealDialogueGIFCard.animate {
    opacity: 1;
    transition: all 1.5s 2s ease;
  }
}
.headerContainer .headerSneakPeeksReveal .imgGifContainer .revealDialogueGIFCard .revealDialogueGIF {
  transition: all 1s ease;
  width: 45%;
  -o-object-fit: cover;
     object-fit: cover;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue {
  margin: 0 auto auto auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  z-index: -1;
  position: relative;
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal .revealDialogue {
    margin: 5px 0 auto 0;
    width: 100%;
  }
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard {
  box-sizing: border-box;
  margin: auto auto 0px auto;
  background-color: rgba(18, 18, 18, 0.9176470588);
  border-radius: 8px;
  height: 0px;
  width: 0px;
  padding: 20px 10px 10px 10px;
  transition: all 1s ease;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateX(0px);
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard {
    height: 600px;
  }
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard.animate {
  opacity: 1;
  height: 523px;
  width: 250px;
  transition: height 2s ease, width 1s ease, transform 1.5s 1s ease, opacity 1.5s 1s ease, font-size 1.5s ease;
  transform: translateX(0px);
}
@media screen and (max-width: 550px) {
  .headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard.animate {
    opacity: 1;
    transition: height 2s ease, width 1.5s 0.5s ease, transform 1.5s 1s ease, opacity 1.5s 1s ease;
    transform: translateX(0px);
  }
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio {
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio dd,
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio dt,
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio dl,
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio span {
  color: white;
  text-align: justify;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio p {
  margin: 0px;
  padding: 0px;
  color: white;
  font-weight: 500;
  text-align: justify;
  transition: all 0.5s ease;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .abIntro {
  font-weight: bolder;
  padding: 0;
  margin: 0px 0px 10px 0px;
  text-align: center;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .abAb {
  font-weight: bolder;
  color: black;
  margin: 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
  background-color: #d9973a;
  border-radius: 5px 5px 5px 0px;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .skillSet {
  padding: 10px 0 0 0;
  width: 100%;
  margin: 0 auto 10px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px #d9973a solid;
  border-radius: 0px 0px 0px 5px;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .skillSet .spSkill {
  margin: 0px auto;
  width: 85%;
  color: black;
  font-weight: bolder;
  background-color: var(--red);
  text-align: center;
  border-radius: 5px 5px 5px 0px;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .skillSet .skillD {
  box-sizing: border-box;
  margin: auto auto 10px auto;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  width: 85%;
  padding: 5px 0 0 5px;
  border-left: 2px var(--red) solid;
  border-radius: 0px 0px 0px 5px;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .otSkillSet {
  width: 100%;
  margin: 0 auto auto auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px #d9973a solid;
  border-radius: 5px;
  overflow: hidden;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .otSkillSet .otOt {
  font-weight: bolder;
  color: black;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
  background-color: #d9973a;
  border-radius: 0px 5px 5px 0px;
}
.headerContainer .headerSneakPeeksReveal .revealDialogue .revealDialogueCard .peekBio .otSkillSet .otSD {
  box-sizing: border-box;
  margin: 2px auto;
  padding: 0 0 0 5px;
  font-size: 12px;
  font-weight: normal;
  text-align: justify;
  width: 75%;
  color: white;
  border-left: 2px var(--red) solid;
  border-radius: 5px;
}
.headerContainer .headerSneakPeeksReveal .sRC {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 10px;
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 100%;
  border: 3px solid var(--red);
  border-bottom: transparent 3px solid;
  -webkit-filter: drop-shadow(2px 0px 0px black) drop-shadow(0px 2px 0px black);
  background-color: transparent;
  z-index: 1;
  -webkit-animation: circleRotate 6s linear infinite;
          animation: circleRotate 6s linear infinite;
}
@media screen and (max-width: 750px) {
  .headerContainer .headerSneakPeeksReveal .sRC {
    display: none;
  }
}
.headerContainer .headerSneakPeeksReveal .sRC div {
  margin: 0px;
  height: 5px;
  width: 5px;
  background-color: transparent;
  border: 2px solid transparent;
  border-right: 2px white solid;
  border-radius: 100%;
  -webkit-animation: circleRotate 9s linear infinite;
          animation: circleRotate 9s linear infinite;
}
.headerContainer .mobileViewDescription {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -8%);
  height: 100vh;
  width: 300px;
  z-index: 9;
}
@media screen and (max-width: 750px) {
  .headerContainer .mobileViewDescription {
    justify-content: center;
  }
}
.headerContainer .mobileViewDescription .mVDesCard {
  margin: auto;
  box-sizing: border-box;
  height: 500px;
  width: 100%;
  background-color: rgb(0, 0, 0);
  border-radius: 15px;
}

#footerSection {
  -webkit-filter: var(--dropShadow);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: block;
}
#footerSection.footerSectionHideShow {
  display: none;
}

.initialLoadingContainer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--black);
  z-index: 200;
  opacity: 100%;
  transition: transform 1s ease;
  transition-delay: 0.5s;
  transform: translateY(0%);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow: hidden;
}
.initialLoadingContainer.initialLoadingContainerTransition {
  transition: transform 1s ease;
  transition-delay: 0.5s;
  transform: translateY(-110%);
}
.initialLoadingContainer .progressbarContainer {
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
  display: flex;
  height: 5;
  width: 100%;
}
.initialLoadingContainer .progressbarContainer .progressBarBorder {
  margin: auto auto 0px auto;
  height: 2.5px;
  width: 100%;
  overflow: hidden;
}
.initialLoadingContainer .progressbarContainer .progressBarBorder.active {
  width: 100%;
  height: 0px;
  transition: width 1.5s ease, height 0.2s;
}
.initialLoadingContainer .progressbarContainer .progressBar {
  background: linear-gradient(to left, var(--black), var(--red));
  background-size: 300% 300%;
  width: calc(var(--width, 10) * 2%);
  height: 100%;
  -webkit-animation: progressBarColor 2s infinite linear;
          animation: progressBarColor 2s infinite linear;
  transition: all 1s ease;
}
.initialLoadingContainer .progressbarContainer .progressBar.stop {
  -webkit-animation: 0;
}
@-webkit-keyframes progressBarColor {
  0% {
    background-position: 300% 300%;
  }
  100% {
    background-position: 0% 300%;
  }
}
@keyframes progressBarColor {
  0% {
    background-position: 300% 300%;
  }
  100% {
    background-position: 0% 300%;
  }
}
.initialLoadingContainer .initializingContainer {
  position: absolute;
  transition: opacity 0.5s ease;
}
.initialLoadingContainer .initializingContainer p {
  color: var(--red);
  font-size: 30px;
  font-family: "Anton";
}

.loaderImgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column-reverse;
  padding: 10px;
  z-index: 999;
}

.loadingImgClick {
  width: 200px;
  height: 100%;
  border: 2px var(--red) solid;
  box-shadow: 2px 2px 0px var(--black);
  padding: 5px 20px;
  display: flex;
  opacity: 0%;
  transform: scale(1) rotate(2deg);
  transition: transform 0.3s, opacity 0.3s ease;
  border-radius: 7.5px;
  pointer-events: unset;
}
.loadingImgClick.pointNone {
  pointer-events: none;
}
.loadingImgClick.active {
  z-index: 999;
  opacity: 100%;
  transition: transform 0.3s, opacity 0.5s ease;
}
.loadingImgClick.hover {
  transition: transform 0.3s;
  transform: scale(0.98);
}
.loadingImgClick.clicked {
  transition: transform 0.1s;
  transform: scale(0.85);
  -webkit-animation: 1;
}
.loadingImgClick .loadingImgP {
  color: var(--white);
  font-family: "Underground";
  text-transform: lowercase;
  font-size: 30px;
  margin: auto;
  padding: 0;
  text-align: center;
  -webkit-animation: glower 1s infinite linear;
          animation: glower 1s infinite linear;
}
.loadingImgClick .loadingImgP.hover {
  -webkit-animation: 1;
          animation: 1;
}
@-webkit-keyframes glower {
  0% {
    -webkit-filter: drop-shadow(2px 2px 0px var(--red));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 0px var(--red));
  }
}
@keyframes glower {
  0% {
    -webkit-filter: drop-shadow(2px 2px 0px var(--red));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 0px var(--red));
  }
}

.rotatingLoader {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  -webkit-filter: drop-shadow(2px 2px 0px var(--black));
  opacity: 100%;
  transition: all 1s ease;
  margin: 0;
}
.rotatingLoader.active {
  opacity: 100%;
  transition: opacity 0.5s ease;
  transition: all 1s ease;
}
.rotatingLoader.hover {
  -webkit-filter: drop-shadow(2px 2px 0px white);
  transform: rotate(0deg);
  transition: all 1s ease;
}
.rotatingLoader .rotatingLoaderImg {
  transform-style: preserve-3d;
  height: 75px;
  width: auto;
  -webkit-animation: flipper 2.5s infinite steps(10);
          animation: flipper 2.5s infinite steps(10);
}
.rotatingLoader .rotatingLoaderImg.hover {
  transition: all 1s ease;
  -webkit-animation: 1;
          animation: 1;
}
@-webkit-keyframes flipper {
  0% {
    transform: rotateY(0deg);
  }
  15% {
    transform: rotateY(180deg);
  }
  30% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes flipper {
  0% {
    transform: rotateY(0deg);
  }
  15% {
    transform: rotateY(180deg);
  }
  30% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.loaderGalleryOutterContainer {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  max-width: 100%;
  margin: 0px 30px 0px 30px;
  opacity: 0%;
  transition: opacity 1s ease;
}

.loaderGalleryInnerContainer {
  display: flex;
  flex-wrap: wrap;
  margin: auto auto auto auto;
  width: 100%;
}

.revealUsText {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  background-color: transparent;
  opacity: 0%;
  transition: opacity 0.5s ease;
}
.revealUsText p {
  color: var(--white);
  margin: 0;
  padding: 0;
  font-size: 50px;
  font-family: "Underground";
  text-transform: lowercase;
}

.loaderGalleryContainer {
  background-color: var(--red);
  margin: auto;
  height: 500px;
  max-width: 1050px;
  display: flex;
  overflow: hidden;
  outline: var(--red) 2px solid;
  box-shadow: 10px 10px 0px var(--black);
  border-radius: 7.5px;
  transform: rotate3d(0.5, -0.866, 0, 16.5deg) rotate(1deg);
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer {
    height: 400px;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer {
    height: 300px;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer {
    height: 200px;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer {
    height: 100px;
  }
}
@-webkit-keyframes dropAnimation {
  0%, 100% {
    margin-bottom: 0px;
  }
  35% {
    margin-bottom: 30px;
  }
}
@keyframes dropAnimation {
  0%, 100% {
    margin-bottom: 0px;
  }
  35% {
    margin-bottom: 30px;
  }
}
.loaderGalleryContainer :nth-child(2) {
  position: relative;
}
.loaderGalleryContainer div {
  margin: auto;
  width: 250px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
  position: relative;
}
.loaderGalleryContainer div img {
  margin-top: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 150%;
  width: 150%;
  -webkit-filter: grayscale(1) brightness(0);
  image-rendering: auto;
}
.loaderGalleryContainer div .galleryPart1 {
  height: 177%;
  transform: translateY(calc(var(--transformY, -100) * 3%));
}
.loaderGalleryContainer div .galleryPart1.colorHover {
  -webkit-filter: drop-shadow(0px 0px 0px blue) brightness(0%);
  -webkit-animation: dropAnimation 0.7s ease;
          animation: dropAnimation 0.7s ease;
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart1.colorHover {
    height: 192%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart1.colorHover {
    height: 220%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart1.colorHover {
    height: 270%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart1.colorHover {
    height: 420%;
  }
}
.loaderGalleryContainer div .galleryPart1.colorHover:hover {
  -webkit-filter: drop-shadow(-5px -5px 0px blue) brightness(100%);
  margin-bottom: 8px;
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart1.colorHover.hover {
  -webkit-filter: drop-shadow(-5px -5px 0px blue) brightness(100%);
  margin-bottom: 8px;
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart1.wave {
  -webkit-filter: drop-shadow(-5px -5px 0px blue) brightness(100%);
  margin-bottom: 28px;
  transition: all 0.5s ease;
}
.loaderGalleryContainer div .galleryPart2 {
  height: 185%;
  -o-object-position: 42%;
     object-position: 42%;
  transform: translateY(calc(var(--transformY, -100) * 2.7%));
}
.loaderGalleryContainer div .galleryPart2.colorHover {
  -webkit-filter: drop-shadow(0px 0px 0px blue) brightness(0%);
  -webkit-animation: dropAnimation 0.8s ease;
          animation: dropAnimation 0.8s ease;
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart2.colorHover {
    height: 200%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart2.colorHover {
    height: 230%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart2.colorHover {
    height: 285%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart2.colorHover {
    height: 455%;
  }
}
.loaderGalleryContainer div .galleryPart2.colorHover:hover {
  margin-bottom: 8px;
  -webkit-filter: drop-shadow(-5px -5px 0px blueviolet) brightness(100%);
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart2.wave {
  margin-bottom: 28px;
  -webkit-filter: drop-shadow(-5px -5px 0px blueviolet) brightness(100%);
  transition: all 0.5s ease;
}
.loaderGalleryContainer div .galleryPart3 {
  height: 225%;
  margin-top: 520px;
  transform: translateY(calc(var(--transformY, -100) * 2.4%));
}
.loaderGalleryContainer div .galleryPart3.colorHover {
  -webkit-animation: dropAnimation 0.5s ease;
          animation: dropAnimation 0.5s ease;
  -webkit-filter: drop-shadow(0px 0px 0px red) brightness(0%);
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart3.colorHover {
    height: 255%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart3.colorHover {
    height: 305%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart3.colorHover {
    margin-top: 430px;
    height: 350%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart3.colorHover {
    margin-top: 410px;
    height: 555%;
  }
}
.loaderGalleryContainer div .galleryPart3.colorHover:hover {
  margin-bottom: 8px;
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(92, 0, 0)) brightness(100%);
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart3.wave {
  margin-bottom: 28px;
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(92, 0, 0)) brightness(100%);
  transition: all 0.5s ease;
}
.loaderGalleryContainer div .galleryPart4 {
  margin-top: 550px;
  height: 235%;
  transform: translateY(calc(var(--transformY, -100) * 2.1%));
}
.loaderGalleryContainer div .galleryPart4.colorHover {
  -webkit-filter: drop-shadow(0px 0px 0px rgb(255, 208, 0)) brightness(0%);
  -webkit-animation: dropAnimation 0.7s ease;
          animation: dropAnimation 0.7s ease;
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart4.colorHover {
    margin-top: 600px;
    height: 280%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart4.colorHover {
    margin-top: 550px;
    height: 320%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart4.colorHover {
    margin-top: 455px;
    height: 370%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart4.colorHover {
    margin-top: 415px;
    height: 570%;
  }
}
.loaderGalleryContainer div .galleryPart4.colorHover:hover {
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(255, 208, 0)) brightness(100%);
  margin-bottom: 8px;
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart4.wave {
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(255, 208, 0)) brightness(100%);
  margin-bottom: 28px;
  transition: all 0.5s ease;
}
.loaderGalleryContainer div .galleryPart5 {
  margin-top: 0px;
  height: 200%;
  transform: translateY(calc(var(--transformY, -100) * 1.7%));
}
.loaderGalleryContainer div .galleryPart5.colorHover {
  -webkit-filter: drop-shadow(0px 0px 0px green) brightness(0%);
  -webkit-animation: dropAnimation 0.8s ease;
          animation: dropAnimation 0.8s ease;
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart5.colorHover {
    margin-top: 50px;
    height: 230%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart5.colorHover {
    margin-top: 100px;
    height: 280%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart5.colorHover {
    margin-top: 140px;
    height: 320%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart5.colorHover {
    margin-top: 120px;
    height: 440%;
  }
}
.loaderGalleryContainer div .galleryPart5.colorHover:hover {
  margin-bottom: 8px;
  -webkit-filter: drop-shadow(-5px -5px 0px green) brightness(100%);
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart5.wave {
  margin-bottom: 28px;
  -webkit-filter: drop-shadow(-5px -5px 0px green) brightness(100%);
  transition: all 0.5s ease;
}
.loaderGalleryContainer div .galleryPart6 {
  margin-top: 380px;
  height: 200%;
  transform: translateY(calc(var(--transformY, -100) * 1.4%));
}
.loaderGalleryContainer div .galleryPart6.colorHover {
  -webkit-animation: dropAnimation 0.5s ease;
          animation: dropAnimation 0.5s ease;
  -webkit-filter: drop-shadow(0px 0px 0px rgb(255, 0, 140)) brightness(0%);
  transition: all 1s ease;
}
@media screen and (max-height: 775px) {
  .loaderGalleryContainer div .galleryPart6.colorHover {
    margin-top: 425px;
    height: 230%;
  }
}
@media screen and (max-height: 675px) {
  .loaderGalleryContainer div .galleryPart6.colorHover {
    margin-top: 435px;
    height: 270%;
  }
}
@media screen and (max-height: 575px) {
  .loaderGalleryContainer div .galleryPart6.colorHover {
    margin-top: 430px;
    height: 350%;
  }
}
@media screen and (max-height: 475px) {
  .loaderGalleryContainer div .galleryPart6.colorHover {
    margin-top: 340px;
    height: 490%;
  }
}
.loaderGalleryContainer div .galleryPart6.colorHover:hover {
  margin-bottom: 8px;
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(255, 0, 140)) brightness(100%);
  transition: all 1s ease;
}
.loaderGalleryContainer div .galleryPart6.wave {
  margin-bottom: 28px;
  -webkit-filter: drop-shadow(-5px -5px 0px rgb(255, 0, 140)) brightness(100%);
  transition: all 0.5s ease;
}

.loadingParagraph {
  height: 100%;
  margin: 0px;
  width: 100%;
  text-align: center;
  padding: 0px;
  font-weight: bolder;
  font-size: calc(var(--paragraph) * 0.6);
  color: var(--white);
  transition: opacity 0.3s;
  opacity: 0%;
}

.body {
  margin: 0;
  position: relative;
  cursor: var(--cursor);
  font-family: "Ubuntu";
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-bottom: 150px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.body.active {
  overflow-y: scroll;
}

.mainBodySection {
  pointer-events: unset;
  opacity: 100%;
  transition: opacity 0.5s ease;
}
.mainBodySection.active {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.main {
  opacity: 0%;
}
.main.active {
  opacity: 100%;
}

.topBlur {
  position: fixed;
  top: 0;
  background: linear-gradient(to bottom, var(--bgGrey) 0%, rgba(78, 76, 74, 0.3137254902) 50%, rgba(237, 237, 237, 0) 100%);
  width: 100%;
  height: 8%;
  z-index: 10;
  transition: height 1s ease;
}
.topBlur.active {
  height: 0%;
  transition: height 0.3s ease;
}

.load {
  position: fixed;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 50;
  transform: translateY(0%);
  opacity: 100%;
  transition: all 2s ease;
}

.loadTransition {
  -webkit-animation: load 2s forwards ease;
          animation: load 2s forwards ease;
}

@-webkit-keyframes load {
  0% {
    opacity: 100%;
    transform: translateY(0%);
  }
  25% {
    opacity: 100%;
  }
  75% {
    opacity: 100%;
  }
  85% {
    opacity: 25%;
  }
  100% {
    opacity: 0%;
    transform: translateY(200%);
  }
}

@keyframes load {
  0% {
    opacity: 100%;
    transform: translateY(0%);
  }
  25% {
    opacity: 100%;
  }
  75% {
    opacity: 100%;
  }
  85% {
    opacity: 25%;
  }
  100% {
    opacity: 0%;
    transform: translateY(200%);
  }
}
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  max-height: 275px;
  width: 275px;
  margin-top: -137.5px;
  margin-left: -137.5px;
  display: block;
  opacity: 100%;
  transition: all 0.1s;
  z-index: 100;
}

.navLoadingContainer {
  position: fixed;
  height: 30px;
  width: 30px;
  top: 10px;
  left: 10px;
  opacity: 0%;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.navLoadingContainer.active {
  opacity: 100%;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.navLoadingContainer.collapse {
  transform: translate(5px, 5px) scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.navLoading {
  position: absolute;
  border-radius: 50%;
  border: 10px solid transparent;
  height: 30px;
  width: 30px;
  -webkit-animation: navLoadingRotate 2.5s linear infinite;
          animation: navLoadingRotate 2.5s linear infinite;
}

.redPart {
  border-top: 10px var(--shadow40) solid;
}

.orangePart {
  border-bottom: 10px var(--shadow40) solid;
}

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

@keyframes navLoadingRotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.loadingBG {
  position: fixed;
  z-index: -99;
  opacity: 0%;
  width: 100%;
  height: 100%;
  transform: translateY(0%);
  transition: opacity 1s 0.25s, transform 1s 1.5s ease;
}
.loadingBG.active {
  transition: opacity 0.3s;
  opacity: 100%;
}

.loadingBGLeft {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  background-color: var(--black);
  transform: translateX(-100%);
  transition: transform 1.5s;
}
.loadingBGLeft.active {
  transform: translateX(0%);
  transition: transform 0.4s;
}

.loadingBGRight {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  background-color: var(--black);
  transform: translateX(100%);
  transition: transform 1.5s;
}
.loadingBGRight.active {
  transform: translateX(0%);
  transition: transform 0.4s;
}

.loadingBGTop {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: var(--black);
  transform: translateY(-100%);
  transition: transform 1.5s;
}
.loadingBGTop.active {
  transform: translateY(0%);
  transition: transform 0.4s;
}

.loadingBGBottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: var(--black);
  transform: translateY(100%);
  transition: transform 1.5s;
}
.loadingBGBottom.active {
  transform: translateY(0%);
  transition: transform 0.4s;
}

.audioContainer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9;
  position: fixed;
  bottom: 100px;
  right: 0vh;
  height: 90px;
  width: 0;
  flex-direction: column;
  transition: all 0.5s ease;
}
.audioContainer.activeMap {
  bottom: 15px;
  transition: all 0.5s ease;
}
.audioContainer.active {
  display: none;
}

.audioContainer3 {
  display: flex;
  flex-direction: row;
  grid-gap: 5px;
  justify-content: left;
  transform: translateX(100%);
  transition: all 1s ease;
  -webkit-filter: var(--dropShadow);
  opacity: 0%;
  padding: 12px;
  min-height: 0px;
  width: 250px;
  background-color: var(--black);
}
.audioContainer3.active {
  transform: translateX(0%);
  opacity: 100%;
  transition: all 1s ease;
}

#volumeSlide[type=range][orient=vertical] {
  -ms-writing-mode: bt-lr;
      writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  height: 40px;
  width: 20px;
  border-radius: var(--radius);
}

#volumeSlide[type=range][orient=vertical]::-webkit-slider-runnable-track {
  background: var(--bgGrey);
  border-radius: var(--radius);
  -webkit-appearance: slider-vertical;
  width: 16px;
}

#volumeSlide[type=range][orient=vertical]::-webkit-slider-thumb {
  width: 20px;
}

.volumeContainer {
  display: flex;
  margin: auto 0px auto 0px;
}

#musicOpen {
  position: fixed;
  display: flex;
  align-content: center;
  align-items: center;
  right: 0;
  z-index: 2;
  opacity: 100%;
  transition: all 1s;
  width: 55px;
  pointer-events: all;
}
#musicOpen.active {
  pointer-events: none;
  opacity: 0%;
}

#musicClose {
  display: flex;
  margin: auto 0px auto 0px;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}

@keyframes fadeOut {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}
.disk {
  height: 35px;
  position: absolute;
  right: 5%;
  z-index: 60;
}

.diskAnimation {
  -webkit-animation: diskRotate 2s linear infinite;
          animation: diskRotate 2s linear infinite;
}

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

@keyframes diskRotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
#arrowMusicL {
  cursor: var(--cursor);
  height: 20px;
  -webkit-animation: fadeArrow 5s infinite alternate ease;
          animation: fadeArrow 5s infinite alternate ease;
  pointer-events: all;
}
#arrowMusicL.active {
  pointer-events: none;
}

#arrowMusicR {
  cursor: var(--cursor);
  height: 20px;
  margin: auto auto auto 0px;
  -webkit-animation: fadeArrow 2s infinite alternate ease;
          animation: fadeArrow 2s infinite alternate ease;
}

@-webkit-keyframes fadeNote {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}

@keyframes fadeNote {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}
@-webkit-keyframes fadeArrow {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@keyframes fadeArrow {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
.songNameButtonsContainer {
  display: flex;
  flex-direction: column;
  justify-content: left;
  margin: 0px;
  grid-gap: 5px;
  width: 100%;
}

.songArtistContainer {
  display: flex;
  flex-direction: column-reverse;
  margin: 0px auto 0px 0px;
}

.songArtWork {
  box-sizing: border-box;
  padding: 0;
  margin: auto 5px auto 0px;
  height: 65px;
  width: 65px;
}
.songArtWork img {
  -o-object-fit: cover;
     object-fit: cover;
  box-sizing: border-box;
  height: 65px;
  width: 65px;
}

.audioProgBarContainer {
  width: 100%;
  height: 3px;
  margin: auto auto 0px 0px;
  background-color: var(--red);
}
.audioProgBarContainer .audioProgBar {
  width: calc(var(--widthBar, 0) * 1%);
  height: 3px;
  margin: auto auto 0px 0px;
  background-color: #f9a327;
}

#songName {
  font-size: calc(var(--paragraph) * 0.65);
  font-weight: bolder;
  color: #f9a327;
  visibility: hidden;
  margin: auto auto auto 0px;
}

#artistName {
  font-size: calc(var(--paragraph) * 0.45);
  font-weight: bolder;
  color: #9b9b9b;
  visibility: hidden;
  text-align: center;
  margin: 2.5px auto auto 0px;
}

#audioButtons {
  margin: 0px auto 0px 0px;
  display: flex;
  align-items: center;
  grid-gap: 5px;
}

.playmusic {
  display: block;
  margin: 0;
  height: 12px;
  opacity: 80%;
  -webkit-filter: var(--dropShadow);
}

.pausemusic {
  display: none;
  margin: 0;
  height: 12px;
  opacity: 80%;
  -webkit-filter: var(--dropShadow);
}

.nextmusic {
  margin: 0;
  display: block;
  height: 12px;
  opacity: 80%;
  -webkit-filter: var(--dropShadow);
}

.prevmusic {
  margin: 0;
  display: none;
  height: 12px;
  opacity: 80%;
  -webkit-filter: var(--dropShadow);
}

.playmusic:hover,
.pausemusic:hover,
.nextmusic:hover,
.prevmusic:hover {
  opacity: 100%;
  cursor: var(--cursor);
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  cursor: var(--cursor);
}

#nav {
  font-family: "Outrun";
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  min-height: 50vh;
  transform: translateX(-150%);
  transition: transform 0.1s ease;
  z-index: 14;
  align-items: center;
  justify-content: center;
}
#nav.active {
  transform: translateX(0);
  transition: transform 1.5s ease;
}
#nav ul {
  list-style-type: none;
  padding-left: 15px;
}
#nav ul li {
  max-height: 75px;
}
#nav a {
  color: var(--red);
  -webkit-text-stroke: 0.5px var(--white);
  font-size: 37px;
  text-decoration: none;
}

#navLeftImg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.5s;
  z-index: 13;
}
#navLeftImg.active {
  transform: translateX(-5%);
  transition: transform 0.5s;
}

#navLeftImgOutter {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  z-index: 12;
}
#navLeftImgOutter.active {
  transform: translateX(-5%);
  transition: transform 0.8s ease;
  -webkit-animation: navAnimationLeft 1s linear alternate infinite;
          animation: navAnimationLeft 1s linear alternate infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes navAnimationLeft {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(-5.3%);
  }
}

@keyframes navAnimationLeft {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(-5.3%);
  }
}
#navRightImg {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.5s;
  z-index: 13;
}
#navRightImg.active {
  transition: transform 0.5s;
  transform: translateX(5%);
}

#navRightImgOutter {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.5s;
  z-index: 12;
}
#navRightImgOutter.active {
  transition: transform 0.8s;
  transform: translateX(5%);
  -webkit-animation: navAnimationRight 1s linear alternate infinite;
          animation: navAnimationRight 1s linear alternate infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes navAnimationRight {
  from {
    transform: translateX(5%);
  }
  to {
    transform: translateX(5.3%);
  }
}

@keyframes navAnimationRight {
  from {
    transform: translateX(5%);
  }
  to {
    transform: translateX(5.3%);
  }
}
#navRight {
  position: fixed;
  top: 0;
  right: 0;
  height: 50vh;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  color: var(--white);
  font-size: 50px;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 14;
}
#navRight.active {
  transform: translateX(0);
  transition: transform 1.5s ease;
}

.links {
  display: flex;
  align-items: flex-start;
  padding-right: 5px;
  padding-top: 1vh;
}
.links img {
  height: 35px;
  width: auto;
  margin-right: 5px;
  opacity: 70%;
}
.links img:hover {
  opacity: 100%;
  background-color: var(--black);
  border-radius: 50%;
}

.rotateAnimation {
  transform: rotate(0deg);
  transition: transform 0.7s ease-in-out;
  transition-delay: 0.3s;
}
.rotateAnimation:hover {
  cursor: var(--cursor), default;
  transform: rotate(360deg);
  background-color: var(--black);
  border-radius: 50%;
}

.book {
  -webkit-filter: var(--dropShadow);
  overflow: hidden;
  height: 50px;
  width: 50px;
  border: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 60;
  border-radius: var(--radius);
  display: flex;
  transition: opacity 2s ease;
}
.book.loading {
  opacity: 0%;
  transition: opacity 0.3s;
  pointer-events: none;
}
.book.hideShow {
  opacity: 0%;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.book img {
  margin: auto;
  height: 30px;
  width: 30px;
}
.book.active {
  opacity: 0%;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.storyLine p,
h1 {
  overflow: hidden;
  position: relative;
  background-color: var(--red);
  opacity: 100%;
  width: 100vw;
  margin: 0;
  padding: 0px;
  transform: translateY(-1000%);
  transition: opacity 1s ease, transform 0.5s 0.5s ease;
}

.storyLine.active p,
h1 {
  opacity: 100%;
  transform: translateY(0%);
  transition: opacity 1s ease, transform 0.5s 0.5s ease;
}

.menuToggle {
  height: 0px;
  border: none;
  position: fixed;
  top: 10px;
  left: 15px;
  z-index: 60;
  opacity: 100%;
  transition: opacity 0.5s ease-in-out;
  transform: scale(0.95);
}
@media screen and (max-width: 1024px) {
  .menuToggle {
    transform: scale(0.9);
  }
}
@media screen and (max-width: 800px) {
  .menuToggle {
    transform: scale(0.8);
  }
}
@media screen and (max-width: 500px) {
  .menuToggle {
    transform: scale(0.75);
  }
}
.menuToggle.active {
  opacity: 0%;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

#menu {
  opacity: 0%;
  outline: none;
  position: absolute;
  height: 50px;
  width: 50px;
  transform: rotate(0deg);
  z-index: 60;
  opacity: 100%;
  transition: transform 0.5s ease, opacity 2s ease, grid-gap 1s ease;
}
#menu .menuOutter {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  grid-gap: 5px;
}
#menu.hideShow {
  opacity: 0%;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#menu.fadeIn {
  -webkit-animation: fadeInMenu 1s ease;
          animation: fadeInMenu 1s ease;
}
@-webkit-keyframes fadeInMenu {
  from {
    opacity: 0%;
    transform: scale(0);
  }
  to {
    opacity: 100%;
    transform: scale(1);
  }
}
@keyframes fadeInMenu {
  from {
    opacity: 0%;
    transform: scale(0);
  }
  to {
    opacity: 100%;
    transform: scale(1);
  }
}

#bottomLine {
  height: 10px;
  width: 50px;
  background-color: var(--white);
  transition: transform 0.5s ease;
  transform: rotate(0%) translateX(0%);
  border-radius: 4.5px;
  border: 2px black solid;
}
#bottomLine.hover {
  position: absolute;
  transform: rotate(-60deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s ease, width 1s ease, border 1s ease;
}

#upperLine {
  height: 10px;
  width: 50px;
  background-color: var(--white);
  transition: transform 0.5s ease, width 1s ease;
  transform: rotateX(0%) translateX(0%);
  border: 2px black solid;
  border-radius: 4.5px;
}
#upperLine.hover {
  position: absolute;
  width: 32.5px;
  transform: rotate(60deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s ease, width 1s ease, border 1s ease;
}

.menuMainContainer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0%;
  transition: opacity 1s ease;
  overflow: hidden;
  pointer-events: unset;
}
.menuMainContainer.active {
  opacity: 100%;
  transition: opacity 1s ease;
}
.menuMainContainer.pointNone {
  pointer-events: none;
}
.menuMainContainer .navBgImgContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--red);
}
.menuMainContainer .navBgImgContainer .navBgImg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: bottom;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 100%;
  transition: opacity 1s ease;
  z-index: 1;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgImg {
    width: 200%;
  }
}
.menuMainContainer .navBgImgContainer .navBgImgDots {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 75%;
  transform: scale(2);
  transition: opacity 1s ease, transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgImgDots.active {
  transform: scale(1);
  transition: transform 1.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgImgDots {
    width: 200%;
  }
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle {
  position: absolute;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(1) {
  top: 10%;
  left: 10%;
  height: 50px;
  transform: rotate(-50deg) scale(0.5);
  transition: transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(1).active {
  transform: rotate(-25deg) scale(1);
  transition: transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(2) {
  top: 10%;
  left: 20%;
  height: 150px;
  transform: rotate(-50deg) scale(0.5);
  transition: transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(2).active {
  transform: rotate(15deg) scale(1);
  transition: transform 1s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(3) {
  top: 30%;
  left: 5%;
  height: 250px;
  transform: rotate(-50deg) scale(0.5);
  transition: transform 1s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(3).active {
  transform: rotate(55deg) scale(1);
  transition: transform 1.3s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(4) {
  top: 80%;
  left: 25%;
  height: 300px;
  transition: transform 0.5s ease;
  transform: rotate(-50deg) scale(0.5);
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(4).active {
  transform: rotate(100deg) scale(1);
  transition: transform 1.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(5) {
  top: 10%;
  right: 10%;
  height: 50px;
  transition: transform 0.5s ease;
  transform: rotate(50deg) scale(0.5);
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(5).active {
  transform: rotate(25deg) scale(1);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(5) {
    display: none;
  }
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(6) {
  top: 10%;
  right: 20%;
  height: 150px;
  transition: transform 0.5s ease;
  transform: rotate(50deg) scale(0.5);
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(6).active {
  transform: rotate(-15deg) scale(1);
  transition: transform 1s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(6) {
    display: none;
  }
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(7) {
  top: 30%;
  right: 5%;
  height: 250px;
  transform: rotate(50) scale(0.5);
  transition: transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(7).active {
  transform: rotate(-55deg) scale(1);
  transition: transform 1.3s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(7) {
    display: none;
  }
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(8) {
  top: 80%;
  right: 25%;
  height: 300px;
  transform: rotate(50deg) scale(0.5);
  transition: transform 0.5s ease;
}
.menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(8).active {
  transform: rotate(-100deg) scale(1);
  transition: transform 1.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .navBgImgContainer .navBgSparkleContainer .navBgSparkle:nth-of-type(8) {
    display: none;
  }
}
.menuMainContainer .menuPromptContainer {
  position: fixed;
  background-color: rgba(18, 18, 18, 0.4392156863);
  height: 100%;
  width: 100%;
  z-index: 61;
  display: flex;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  transition: all 0.5s ease;
}
.menuMainContainer .menuPromptContainer.hide {
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s 0.4s ease;
}
.menuMainContainer .menuPromptContainer .menuPromptCard {
  max-width: 400px;
  width: 100%;
  min-height: 225px;
  border-radius: 25px;
  background-color: rgba(18, 18, 18, 0.9176470588);
  margin: auto 10px;
  display: flex;
  grid-gap: 10px;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptRedLine {
  height: 3px;
  width: 80%;
  margin: 0px auto 0px auto;
  background-color: var(--red);
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptRedLine.active {
  width: 0%;
  transition: width 0.3s ease;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptContent {
  margin: 20px auto auto auto;
  font-size: 13px;
  font-weight: bolder;
  color: var(--white);
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptContent p {
  margin: 0;
  padding: 0;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptContent .promptTitle {
  margin: 0;
  font-size: 24px;
  text-align: center;
  width: 100%;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptContent .promptP {
  font-weight: 500;
  margin: 10px auto auto auto;
  letter-spacing: 1px;
  line-height: 25px;
  text-align: center;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptButton {
  margin: auto auto 0px auto;
  width: 150px;
  height: 25px;
  background-color: var(--red);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptButton:hover {
  transform: scale(1.025);
  transition: transform 0.3s ease;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptButton.clicked {
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
.menuMainContainer .menuPromptContainer .menuPromptCard .promptButton p {
  font-weight: bolder;
  color: var(--white);
  margin: auto;
  padding: 0;
}
.menuMainContainer .mavMainMenuContainer {
  opacity: 100%;
  position: relative;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  z-index: 60;
  transform-style: flat;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer {
    position: absolute;
    top: -40%;
    flex-direction: column;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight {
  z-index: 999;
  display: flex;
  transform-style: flat;
  perspective-origin: top;
  transform-origin: top;
  transform: perspective(1500px) rotateX(0deg) rotateY(-35deg) rotateZ(0deg) translateX(200%) translateZ(-200px);
  transition: transform 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight.active {
  transform-origin: top;
  transform: perspective(1500px) rotateX(0deg) rotateY(-35deg) rotateZ(0deg) translateX(-20%) translateZ(-200px);
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight.active {
    transform-origin: top;
    transform: perspective(1500px) rotateX(0deg) rotateY(35deg) rotateZ(-3deg) translateX(0%) translateZ(-500px);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer {
  display: flex;
  flex-direction: column;
  font-weight: bolder;
  width: 850px;
}
@-webkit-keyframes floaterR1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-0.5%, 3%);
  }
}
@keyframes floaterR1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-0.5%, 3%);
  }
}
@-webkit-keyframes floaterR2 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-1%, 2%);
  }
}
@keyframes floaterR2 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-1%, 2%);
  }
}
@-webkit-keyframes floaterR3 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-1.5%, 1%);
  }
}
@keyframes floaterR3 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(-1.5%, 1%);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer {
  display: flex;
  flex-direction: column;
  font-weight: bolder;
  padding: 10px;
}
@media screen and (max-width: 1065px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer {
    margin-bottom: 30px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) {
  margin: auto auto auto 0px;
  transition: transform 0.5s 1s ease;
  -webkit-animation: floaterR1 1s alternate infinite;
          animation: floaterR1 1s alternate infinite;
  -webkit-filter: grayscale(1);
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img {
  height: 150px;
  margin-left: 0px;
  -webkit-filter: drop-shadow(10px 10px var(--green));
  transform: translateX(50%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img:hover {
  -webkit-filter: drop-shadow(5px 10px var(--yellow));
  transition: filter 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.active {
  transition: transform 0.5s ease, filter 0.5s ease;
  transform: translateX(0%);
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.homeTrig {
  transform: translateX(35%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.homeTrig {
    transform: translateX(50%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.teamTrig {
  transform: translateX(50%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.teamTrig {
    transform: translateX(50%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.mapTrig {
  transform: translateX(35%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img.mapTrig {
    transform: translateX(40%);
    transition: transform 0.5s ease;
  }
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img {
    -webkit-filter: drop-shadow(-20px 5px var(--green));
    transform: translateX(50%);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(1) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) {
  margin: auto auto auto 0px;
  transition: transform 0.5s 1s ease;
  -webkit-animation: floaterR1 1s alternate infinite;
          animation: floaterR1 1s alternate infinite;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img {
  height: 150px;
  margin-left: 0px;
  -webkit-filter: drop-shadow(10px 10px var(--green));
  transform: translateX(60%);
  transition: filter 0.5s 0.3s ease, transform 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img:hover {
  -webkit-filter: drop-shadow(5px 10px var(--yellow));
  transition: filter 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.active {
  transition: transform 1s ease, filter 0.5s ease;
  transform: translateX(0%);
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.homeTrig {
  transform: translateX(45%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.homeTrig {
    transform: translateX(75%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.teamTrig {
  transform: translateX(50%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.teamTrig {
    transform: translateX(75%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.mapTrig {
  transform: translateX(35%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img.mapTrig {
    transform: translateX(20%);
    transition: transform 0.5s ease;
  }
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img {
    -webkit-filter: drop-shadow(-30px 5px var(--green));
    transform: translateX(50%);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(2) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) {
  margin: auto auto auto 0px;
  transition: transform 0.5s 1s ease;
  -webkit-animation: floaterR1 1s alternate infinite;
          animation: floaterR1 1s alternate infinite;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img {
  height: 150px;
  margin-left: 0px;
  -webkit-filter: drop-shadow(10px 10px var(--green));
  transform: translateX(50%) scale(1);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img:hover {
  -webkit-filter: drop-shadow(5px 10px var(--yellow));
  transition: filter 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.active {
  transition: transform 1.5s ease, filter 0.5s ease;
  transform: translateX(0%) scale(1);
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.clickedAnim {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.homeTrig {
  transform: translateX(40%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.homeTrig {
    transform: translateX(60%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.teamTrig {
  transform: translateX(35%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.teamTrig {
    transform: translateX(60%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.mapTrig {
  transform: translateX(-5%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.mapTrig {
    transform: translateX(0%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.mintTrig {
  transform: translateX(25%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img.mintTrig {
    transform: translateX(60%);
    transition: transform 0.5s ease;
  }
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img {
    -webkit-filter: drop-shadow(-40px 5px var(--green));
    transform: translateX(50%);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuRight .rightMenusContainer .rightMenuItemContainer:nth-child(3) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter {
  -webkit-filter: grayscale(1);
  margin: auto auto 0px 0px;
  transform: perspective(1500px) translateZ(1500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity: 0%;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter {
    transform-origin: center;
    transform: perspective(1500px) translateZ(-500px) translateX(2000px) rotateX(0deg) rotateY(35deg) rotateZ(0deg);
    transition: transform 0.5s ease, opacity 0.3s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter.active {
  opacity: 100%;
  transform: perspective(1500px) translateZ(-200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: transform 0.5s ease, opacity 0.3s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter.active {
    transform-origin: center;
    transform: perspective(1500px) translateZ(-500px) translateX(-270px) rotateX(0deg) rotateY(35deg) rotateZ(0deg);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam {
  padding: 20px;
  transition: transform 0.5s 0.25s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.homeTrig {
  transform: translateY(20%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.homeTrig {
    transform: translateX(50%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.mapTrig {
  transform: translateY(20%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.mapTrig {
    transform: translateX(65%);
    transition: transform 0.5s ease;
  }
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam {
    padding: 0px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.clicked {
  transition: transform 0.5s 0.25s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam.clickedAnim {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam img {
  margin-left: 0;
  height: 100px;
  -webkit-filter: drop-shadow(0px 10px var(--green));
  transition: filter 0.5s ease;
  -webkit-animation: floaterC1 1s alternate infinite;
          animation: floaterC1 1s alternate infinite;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam img:hover {
  -webkit-filter: drop-shadow(0px 10px var(--yellow));
  transition: filter 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam img {
    height: 175px;
    -webkit-filter: drop-shadow(-20px 5px var(--green));
    transform: translateX(50%);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuCenter #centerMenuTeam img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
@-webkit-keyframes floaterC1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, 3%);
  }
}
@keyframes floaterC1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, 3%);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft {
  z-index: 999;
  display: flex;
  transform-style: flat;
  transform-origin: top;
  transform: perspective(500px) rotateX(20deg) rotateY(25deg) rotateZ(-10deg) translateX(-200%) translateZ(-200px);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft {
    transform-origin: bottom;
    transform: perspective(1500px) rotateX(0deg) rotateY(35deg) rotateZ(3deg) translateX(500%) translateZ(-500px);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft.active {
  transform-origin: top;
  transform: perspective(1500px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) translateX(20%) translateZ(-200px);
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft.active {
    transform-origin: bottom;
    transform: perspective(1500px) rotateX(0deg) rotateY(35deg) rotateZ(3deg) translateX(0%) translateZ(-500px);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer {
  display: flex;
  flex-direction: column;
  font-weight: bolder;
  width: 850px;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer {
  padding: 10px;
}
@media screen and (max-width: 1065px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer {
    margin-bottom: 30px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) {
  margin: auto 0px auto auto;
  transition: transform 0.5s 1s ease;
  -webkit-animation: floaterL1 1s alternate infinite;
          animation: floaterL1 1s alternate infinite;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) {
    margin: auto auto auto 0px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img {
  height: 150px;
  margin-right: 0px;
  -webkit-filter: drop-shadow(-10px 10px var(--green));
  transform: translateX(-50%) scale(1);
  transition: filter 0.5s ease, transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img {
    -webkit-filter: drop-shadow(-40px 5px var(--green));
    transform: translateX(50%) scale(1);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img:hover {
  -webkit-filter: drop-shadow(-5px 10px var(--yellow));
  transition: filter 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.active {
  transition: transform 0.5s ease, filter 0.5s ease;
  transform: translateX(0%) scale(1);
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.active {
    transition: transform 1.5s ease, filter 0.5s ease;
    transform: translateX(0%);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.clickedAnim {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.homeTrig {
  transform: translateX(10%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.homeTrig {
    transform: translateY(-10%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.mapTrig {
  transform: translateX(-40%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.mapTrig {
    transform: translateX(120%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.teamTrig {
  transform: translateX(-50%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(1) img.teamTrig {
    transform: translateX(120%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) {
  margin: auto 0px auto auto;
  transition: transform 0.5s 0.5s ease;
  -webkit-animation: floaterL1 1s alternate infinite;
          animation: floaterL1 1s alternate infinite;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) {
    margin: auto auto auto 0px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img {
  height: 150px;
  margin-left: 0px;
  -webkit-filter: drop-shadow(-10px 10px var(--green));
  transform: translateX(-70%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img {
    -webkit-filter: drop-shadow(-30px 5px var(--green));
    transform: translateX(50%) scale(1);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease, transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img:hover {
  -webkit-filter: drop-shadow(-5px 10px var(--yellow));
  transition: filter 0.5s ease, transform 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.active {
  transition: transform 1s ease, filter 0.5s ease;
  transform: translateX(0%);
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.active {
    transition: transform 1s ease, filter 0.5s ease;
    transform: translateX(0%);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.clickedAnim {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.homeTrig {
  transform: translateX(-55%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.homeTrig {
    transform: translateX(30%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.mapTrig {
  transform: translateX(-30%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.mapTrig {
    transform: translateX(100%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.teamTrig {
  transform: translateX(-50%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.teamTrig {
    transform: translateX(100%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.mintTrig {
  transform: translateX(30%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(2) img.mintTrig {
    transform: translateX(50%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) {
  margin: auto 0px auto auto;
  transition: transform 0.5s 0.5s ease;
  -webkit-animation: floaterL1 1s alternate infinite;
          animation: floaterL1 1s alternate infinite;
  -webkit-filter: grayscale(1);
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) {
    margin: auto auto auto 0px;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img {
  height: 150px;
  -webkit-filter: drop-shadow(-10px 10px var(--green));
  transform: translateX(-50%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img {
    -webkit-filter: drop-shadow(-20px 5px var(--green));
    transform: translateX(50%) scale(1);
    transition: filter 0.5s ease, transform 0.5s ease;
  }
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img:hover {
    -webkit-filter: drop-shadow(-15px 10px var(--yellow));
    transition: filter 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img:hover {
  -webkit-filter: drop-shadow(-5px 10px var(--yellow));
  transition: filter 0.5s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.active {
  transition: transform 1.5s ease, filter 0.5s ease;
  transform: translateX(0%);
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.active {
    transition: transform 0.5s ease, filter 0.5s ease;
    transform: translateX(0%);
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.clickedAnim {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.homeTrig {
  transform: translateX(-45%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.homeTrig {
    transform: translateX(20%);
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.mapTrig {
  transform: translateX(-30%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.mapTrig {
    transform: translateX(50%);
    transition: transform 0.5s ease;
    transition: transform 0.5s ease;
  }
}
.menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.teamTrig {
  transform: translateX(-30%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 825px) {
  .menuMainContainer .mavMainMenuContainer .navMainMenuLeft .leftMenusContainer .leftMenuItemContainer:nth-child(3) img.teamTrig {
    transform: translateX(30%);
    transition: transform 0.5s ease;
  }
}
@-webkit-keyframes floaterL1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0.5%, 3%);
  }
}
@keyframes floaterL1 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0.5%, 3%);
  }
}
@-webkit-keyframes floaterL2 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(1%, 2%);
  }
}
@keyframes floaterL2 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(1%, 2%);
  }
}
@-webkit-keyframes floaterL3 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(1.5%, 1%);
  }
}
@keyframes floaterL3 {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(1.5%, 1%);
  }
}

.loadingGif {
  outline: none;
  position: absolute;
  height: 35px;
  transform: rotate(0deg);
  padding: 5px;
  z-index: 200;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  opacity: 0%;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.loadingGif.HideShow {
  transition: opacity 0.3s ease;
  opacity: 100%;
}

.designContainer {
  position: relative;
  max-width: 100%;
  opacity: 100%;
}

.designInitialMembers {
  width: 100%;
  height: 40px;
  display: flex;
}

@-webkit-keyframes redButtonText {
  to {
    color: var(--black);
  }
  from {
    color: var(--white);
  }
}

@keyframes redButtonText {
  to {
    color: var(--black);
  }
  from {
    color: var(--white);
  }
}
@-webkit-keyframes redMembers {
  0% {
    box-shadow: 5px 5px var(--white);
  }
  3% {
    box-shadow: 5px 5px var(--white);
  }
  90% {
    box-shadow: 5px 5px var(--red);
  }
  96% {
    box-shadow: 5px 5px var(--red);
  }
  100% {
    box-shadow: 5px 5px var(--red);
  }
}
@keyframes redMembers {
  0% {
    box-shadow: 5px 5px var(--white);
  }
  3% {
    box-shadow: 5px 5px var(--white);
  }
  90% {
    box-shadow: 5px 5px var(--red);
  }
  96% {
    box-shadow: 5px 5px var(--red);
  }
  100% {
    box-shadow: 5px 5px var(--red);
  }
}
.designInitialFooter {
  width: 100%;
  position: absolute;
}

.designFooter {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  max-width: 100%;
}

.redFooter {
  height: 45px;
  background: var(--white);
  width: 0%;
  margin-right: 5px;
  border-radius: 0px 5px 0px 0px;
}

.redFooterTransition {
  width: 15%;
}

.orangeFooter {
  height: 0px;
  background: var(--black);
  width: 10px;
  margin-right: 5px;
  border-radius: var(--radius) 0px 0px 0px;
}

.orangeFooterTransition {
  height: 45px;
}

.redFooter1 {
  height: 0px;
  background: var(--white);
  width: 10px;
  margin-right: 5px;
  border-radius: 0px var(--radius) 0px 0px;
}

.redFooter1Transition {
  height: 45px;
}

.orangeFooter1 {
  height: 45px;
  background: var(--black);
  width: 60%;
  opacity: 0%;
  margin-right: 5px;
  border-radius: 5px 0px 0px 0px;
}

.redFooter2 {
  height: 45px;
  background: var(--white);
  width: 15%;
  opacity: 100%;
}

.orangeFooter1Transition {
  width: 100%;
  opacity: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .redFooter {
    transition: width 2s ease;
  }
  .redFooter1 {
    transition: height 1s ease;
  }
  .orangeFooter {
    transition: height 2s ease;
  }
  .orangeFooter1 {
    transition: opacity 1s ease, width 2s ease;
  }
}
.headers {
  border-radius: 2.5px;
  font-family: "Underground";
  text-align: center;
  font-size: var(--headers);
}
@media only screen and (max-width: 800px) {
  .headers {
    font-size: calc(var(--headers) * 0.8);
  }
}
@media only screen and (max-width: 600px) {
  .headers {
    font-size: calc(var(--headers) * 0.7);
  }
}
@media only screen and (max-width: 400px) {
  .headers {
    font-size: calc(var(--headers) * 0.6);
  }
}
.headers.fontWhite {
  color: var(--white);
  text-transform: lowercase;
  -webkit-filter: drop-shadow(-2px 2px 0px black);
}

.pCircle {
  position: absolute;
  height: 20px;
  width: 20px;
}

#about {
  width: 100%;
  height: 100%;
}
#about .aboutBg {
  background-color: var(--black);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
#about .aboutBg img {
  height: 100%;
  width: 100%;
  opacity: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#about #aboutSection {
  box-sizing: border-box;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 10px;
}
#about #aboutSection .aboutCard {
  border-radius: 25px;
  max-width: 800px;
  min-height: 500px;
  margin: auto;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
#about #aboutSection .aboutCard .bgBlur {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-filter: brightness(0.75);
  z-index: 0;
  background-image: url(/imgs/CXGNUSALLCHARILLUS.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 1s ease;
}
#about #aboutSection .aboutCard .bgBlur:hover {
  -webkit-filter: brightness(1);
  transition: all 1s ease;
}
#about #aboutSection .aboutCard .pAbout {
  pointer-events: none;
  margin: auto auto 0px auto;
  font-weight: 500;
  line-height: 30px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.768);
  border-radius: 12px;
  z-index: 1;
}
#about #aboutSection .aboutCard .pAbout span {
  font-weight: bolder;
  font-size: 40px;
}
#about #aboutSection .aboutCard .pAbout p {
  border-left: 5px solid var(--red);
  padding: 10px;
  text-align: justify;
}
#about #aboutSection .aboutCard .aboutBottomBar {
  pointer-events: none;
  margin: 0px auto 0px auto;
  height: 50px;
  width: 100%;
  position: relative;
  z-index: 1;
}
#about #aboutSection .aboutCard .aboutBottomBar .hfC {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 100%;
  border: 3px solid var(--red);
  border-bottom: transparent 3px solid;
  -webkit-filter: drop-shadow(2px 0px 0px black) drop-shadow(0px 2px 0px black);
  background-color: transparent;
  z-index: 1;
  -webkit-animation: circleRotate 6s linear infinite;
          animation: circleRotate 6s linear infinite;
}
#about #aboutSection .aboutCard .aboutBottomBar .hfC div {
  margin: 0px;
  height: 5px;
  width: 5px;
  background-color: transparent;
  border: 2px solid transparent;
  border-right: 2px white solid;
  border-radius: 100%;
  -webkit-animation: circleRotate 9s linear infinite;
          animation: circleRotate 9s linear infinite;
}
#about #pioneersSectionRev {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: 25px;
  padding: 10px;
  margin-bottom: 25px;
}
#about #pioneersSectionRev .pioneersSectionTitleRev {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#about #pioneersSectionRev .pioneersSectionTitleRev img {
  position: absolute;
  bottom: -30%;
  left: 20%;
  height: 25px;
  width: auto;
}
#about #pioneersSectionRev .pioneersSectionTitleRev p {
  font-size: 40px;
  font-weight: bolder;
  box-sizing: border-box;
  color: white;
  line-height: 38px;
  margin: 2px auto;
  overflow: hidden;
}
#about #pioneersSectionRev .pioneersSectionTitleRev p span {
  margin: 0px auto;
  background-color: white;
  line-height: 35px;
  padding: 0px 1px;
  color: black;
}
#about .indiContainer {
  padding-bottom: 200px;
  position: relative;
}
#about .indiContainer .indiSideSocmed {
  position: fixed;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
@media screen and (max-width: 1270px) {
  #about .indiContainer .indiSideSocmed {
    display: none;
  }
}
#about .indiContainer .indiSideSocmed img {
  height: 50px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#about .indiContainer .indiSideSocmed img:hover {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
#about .indiContainer .indiBottomSocmed {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-wrap: wrap-reverse;
  justify-content: center;
  grid-gap: 40px;
}
@media screen and (max-width: 1270px) {
  #about .indiContainer .indiBottomSocmed {
    display: flex;
  }
}
#about .indiContainer .indiBottomSocmed img {
  border-radius: 7.5px;
  height: 40px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#about .indiContainer .indiBottomSocmed img:hover {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
#about .indiContainer .indiBottomSocmed .discordContainer {
  display: flex;
  justify-content: center;
  grid-gap: 5px;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
#about .indiContainer .indiBottomSocmed .discordContainer:hover {
  transform: scale(0.99);
}
#about .indiContainer .indiBottomSocmed .twitterContainer {
  display: flex;
  grid-gap: 5px;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
#about .indiContainer .indiBottomSocmed .twitterContainer:hover {
  transform: scale(0.99);
}
#about .indiContainer #artDeptandMngmtSection {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 25px;
  grid-gap: 25px;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection {
  margin: 0px;
  padding: 0;
  display: flex;
  flex-direction: column;
  grid-gap: 25px;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle img {
  position: absolute;
  bottom: -30%;
  left: 20%;
  height: 30px;
  width: auto;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle p {
  font-size: 40px;
  font-weight: bolder;
  color: white;
  line-height: 38px;
  margin: 2px auto;
  padding: 0px;
  overflow: hidden;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle p span {
  margin: 0px auto;
  background-color: white;
  padding: 0px 1px;
  color: black;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .indiClassCards {
  border-radius: 12px;
}
#about .indiContainer #artDeptandMngmtSection .artDeptSection .indiClassCards .indiInfoCard {
  height: 290px;
  width: 220px;
}
#about .indiContainer #artDeptandMngmtSection .managementSection {
  margin: 0px;
  padding: 0;
  display: flex;
  grid-gap: 25px;
  flex-direction: column;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle img {
  position: absolute;
  bottom: -40%;
  left: 25%;
  height: 30px;
  width: auto;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle p {
  font-size: 40px;
  font-weight: bolder;
  color: white;
  margin: 2px auto;
  padding: 0px;
  line-height: 38px;
  overflow: hidden;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle p span {
  margin: 0px auto;
  background-color: white;
  padding: 0px 1px;
  color: black;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .indiClassCards {
  border-radius: 12px;
}
#about .indiContainer #artDeptandMngmtSection .managementSection .indiClassCards .indiInfoCard {
  height: 290px;
  width: 220px;
}
#about .indiContainer #popUpImageView {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  pointer-events: none;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.5s ease;
}
#about .indiContainer #popUpImageView.view {
  background-color: rgba(0, 0, 0, 0.79);
  transition: all 0.5s ease;
}
#about .indiContainer #popUpImageView .viewCard {
  pointer-events: all;
  opacity: 0;
  transform: scale(0);
  margin: auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.835);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  max-width: 1000px;
  z-index: 99;
  position: relative;
  box-sizing: border-box;
  transition: opacity 0.5s ease, transform 0.5s 0.5s ease;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard {
    max-width: 300px;
  }
}
#about .indiContainer #popUpImageView .viewCard.view {
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s ease;
}
#about .indiContainer #popUpImageView .viewCard .closeSection {
  position: absolute;
  right: 10px;
  top: 10px;
  margin: 0px 0px 0px auto;
}
#about .indiContainer #popUpImageView .viewCard .closeSection p {
  margin: 0;
  padding: 0;
  color: white;
  font-weight: bolder;
  font-size: 12px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  grid-gap: 25px;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection {
    grid-gap: 0px;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer {
  margin: 0;
  height: 275px;
  width: 275px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer {
    margin: 25px 0 0 0;
    height: 210px;
    width: 210px;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer {
  margin: 20px auto 0px auto;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 600px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName {
  margin: 0px auto 0px 0px;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName {
    margin: 0px auto 0px auto;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName p {
  font-weight: bolder;
  font-size: 40px;
  padding: 0;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName p {
    font-size: 35px;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription {
  margin: 0px auto auto auto;
  padding: 0px 20px;
  font-weight: 500;
  font-size: 14px;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription {
    font-size: 12px;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p {
  margin: 2.5px;
  padding: 0;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p span {
  color: #ffb401;
  font-weight: bolder;
  margin-right: 3px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p .lvl {
  color: white;
  margin-right: 0px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p .origin {
  color: white;
  margin-right: 0px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p .viewRole {
  color: white;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio {
  box-sizing: border-box;
  margin: 10px auto auto 3px;
  border-left: 3px solid var(--red);
  padding: 10px 20px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio p {
  margin: 0;
  padding: 0;
  font-style: italic;
  font-size: 12px;
  font-weight: normal;
  line-height: 13px;
  text-align: justify;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio p {
    line-height: 12px;
    font-size: 11px;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed {
  margin: 5px 0px 0px auto;
  display: flex;
  justify-content: center;
  grid-gap: 5px;
}
@media screen and (max-width: 940px) {
  #about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed {
    margin: auto;
    flex-direction: column-reverse;
  }
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed a {
  display: flex;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed p {
  margin: auto auto;
  padding: 0;
  font-size: 12px;
}
#about .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed img {
  height: 25px;
  width: 25px;
  margin: auto auto 0px auto;
}

#map {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#map .mapSideSocmed {
  position: fixed;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
  z-index: 10;
}
@media screen and (max-width: 940px) {
  #map .mapSideSocmed {
    display: none;
  }
}
#map .mapSideSocmed img {
  height: 50px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapSideSocmed img:hover {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
#map .mapBottomSocmed {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-wrap: wrap-reverse;
  justify-content: center;
  grid-gap: 40px;
}
@media screen and (max-width: 940px) {
  #map .mapBottomSocmed {
    display: flex;
  }
}
#map .mapBottomSocmed img {
  border-radius: 7.5px;
  height: 40px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapBottomSocmed img:hover {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
#map .mapBottomSocmed .discordContainer {
  display: flex;
  justify-content: center;
  grid-gap: 5px;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
#map .mapBottomSocmed .discordContainer:hover {
  transform: scale(0.99);
}
#map .mapBottomSocmed .twitterContainer {
  display: flex;
  grid-gap: 5px;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
#map .mapBottomSocmed .twitterContainer:hover {
  transform: scale(0.99);
}
#map .mapBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
#map .mapBg img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: blur(2.5px) brightness(0.6) contrast(105%);
  transform: scale(1.05);
}
@media screen and (max-width: 940px) {
  #map .mapBg img {
    -webkit-filter: blur(2.5px) brightness(0.4);
  }
}
#map .mapUpperBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
@media screen and (max-width: 940px) {
  #map .mapUpperBg {
    display: none;
  }
}
#map .mapUpperBg .mapBgBlack {
  position: absolute;
  height: 100%;
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  image-rendering: optimizeQuality;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#map .mapUpperBg .mapBgBlack.active {
  opacity: 1;
  transition: opacity 0.5s ease;
}
#map .mapUpperBg .mapBgRed {
  position: absolute;
  height: 100%;
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
#map .mapTitleContainer {
  position: fixed;
  top: 8%;
  left: 10%;
  width: 300px;
  height: 100px;
  -webkit-filter: drop-shadow(-5px 5px 0px var(--red));
  opacity: 1;
  transition: all 1s ease;
}
#map .mapTitleContainer.active {
  transition: all 1s ease;
  opacity: 0;
}
@media screen and (max-width: 940px) {
  #map .mapTitleContainer {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  #map .mapTitleContainer {
    left: 5%;
  }
}
#map .mapTitleContainer img:nth-child(1) {
  display: none;
  width: 400px;
}
@media screen and (max-width: 1400px) {
  #map .mapTitleContainer img:nth-child(1) {
    width: 350px;
  }
}
@media screen and (max-width: 800px) {
  #map .mapTitleContainer img:nth-child(1) {
    width: 250px;
  }
}
@media screen and (max-width: 400px) {
  #map .mapTitleContainer img:nth-child(1) {
    width: 200px;
  }
}
#map .mapTitleContainer img:nth-child(2) {
  position: absolute;
  top: -25px;
  height: 175px;
  width: auto;
}
#map .mapTitleContainer .cxgLogo {
  transform: translate(-1000px, 200px);
  transition: transform 2s ease;
}
#map .mapTitleContainer .cxgLogo.animate {
  transform: translate(0px, 0px);
  transition: transform 1s 0.5s ease;
}
#map .mapTitleContainer img:nth-child(3) {
  position: absolute;
  top: 50px;
  left: 172px;
  height: 140px;
  width: auto;
}
#map .mapTitleContainer .mapLogo {
  transform: translate(1000px, -200px);
  transition: transform 2s ease;
}
#map .mapTitleContainer .mapLogo.animate {
  transform: translate(0px, 0px);
  transition: transform 1s 0.5s ease;
}
#map .mapTitleContainer img:nth-child(4) {
  position: absolute;
  top: 90px;
  left: 80px;
  height: 60px;
  width: auto;
}
#map .mapTitleContainer .japLogo {
  opacity: 0;
  transition: opacity 1s 1s ease;
}
#map .mapTitleContainer .japLogo.animate {
  opacity: 1;
  transition: opacity 1s 1.5s ease;
}
#map .mapContent {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: auto;
}
@media screen and (max-width: 940px) {
  #map .mapContent {
    display: none;
  }
}
#map .mapContent .chapters {
  margin: auto auto auto 0;
  padding-left: 20px;
  height: 100%;
  width: 55%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  grid-gap: 40px;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 800px) {
  #map .mapContent .chapters {
    width: 45%;
    grid-gap: 50px;
  }
}
#map .mapContent .chapters div {
  position: relative;
  padding: 0px 5px;
  background-color: black;
  -webkit-filter: drop-shadow(-7px 7px 0px var(--green));
  transform: translateX(-500%) scale(1);
  transition: filter 0.3s, transform 0.3s ease;
}
#map .mapContent .chapters div.animate {
  transform: translateX(0%) scale(1);
  transition: filter 0.3s, transform 1s var(--d) ease;
}
#map .mapContent .chapters div.hover {
  -webkit-filter: drop-shadow(-6px 6px 0px var(--yellow));
  transform: translateX(0%) scale(1.01);
  transition: filter 0.3s, transform 0.3s ease;
}
#map .mapContent .chapters div.clicked {
  -webkit-filter: drop-shadow(-2px 2px 0px var(--yellow));
  transform: translateX(0%) scale(0.95);
  transition: filter 0.3s, transform 0.3s ease;
}
#map .mapContent .chapters div.focus {
  transform: translateX(0%) scale(1);
  -webkit-filter: drop-shadow(-7px 7px 0px var(--yellow));
  transition: filter 0.3s, transform 0.3s ease;
}
#map .mapContent .chapters div.pointNone {
  transform: translateX(0%) scale(1);
  pointer-events: none;
  transition: filter 0.3s, transform 0.3s ease;
}
@media screen and (max-width: 800px) {
  #map .mapContent .chapters div {
    rotate: -50deg;
  }
}
#map .mapContent .chapters div p {
  font-size: 50px;
  font-weight: bolder;
  box-sizing: border-box;
  color: white;
  line-height: 40px;
  margin: 2px auto;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  #map .mapContent .chapters div p {
    font-size: 35px;
    line-height: 30px;
  }
}
@media screen and (max-width: 515px) {
  #map .mapContent .chapters div p {
    font-size: 25px;
    line-height: 20px;
  }
}
#map .mapContent .chapters div p span {
  margin: 0px auto;
  background-color: white;
  line-height: 35px;
  padding: 0px 1px;
  color: black;
}
#map .mapContent .chapters div img {
  position: absolute;
  height: 30px;
  bottom: -15px;
  left: 40px;
}
#map .mapContent .chapters .chapProl {
  margin-right: 300px;
}
@media screen and (max-width: 1200px) {
  #map .mapContent .chapters .chapProl {
    margin-right: 200px;
  }
}
@media screen and (max-width: 800px) {
  #map .mapContent .chapters .chapProl {
    margin-right: 0px;
  }
}
#map .mapContent .chapters .chap1 {
  margin-right: 150px;
}
@media screen and (max-width: 1200px) {
  #map .mapContent .chapters .chap1 {
    margin-right: 100px;
  }
}
@media screen and (max-width: 800px) {
  #map .mapContent .chapters .chap1 {
    margin-right: 0px;
  }
}
@media screen and (max-width: 800px) {
  #map .mapContent .chapters .chap2 {
    margin-right: 0px;
  }
}
#map .mapContent .chaptersContent {
  margin: auto 0 auto auto;
  padding: 10px;
  width: 40%;
  height: 100%;
  display: flex;
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#map .mapContent .chaptersContent.active {
  opacity: 1;
  transition: opacity 0.5s ease;
}
@media screen and (max-width: 800px) {
  #map .mapContent .chaptersContent {
    width: 55%;
  }
}
#map .mapContent .chaptersContent .chapContentCard {
  position: fixed;
  top: 28%;
  width: 40%;
  display: flex;
  flex-direction: column-reverse;
  padding-right: 50px;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  width: 90%;
  padding-left: 20px;
  padding-right: 20px;
  transform: translateY(20px);
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .cNC {
  position: absolute;
  top: -8px;
  right: 13px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 100%;
  border: 3px solid var(--red);
  border-bottom: transparent 3px solid;
  background-color: transparent;
  z-index: -1;
  -webkit-animation: circleRotate 6s linear infinite;
          animation: circleRotate 6s linear infinite;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .cNC div {
  margin: 0px;
  height: 5px;
  width: 5px;
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 100%;
  -webkit-animation: circleRotate 9s linear infinite;
          animation: circleRotate 9s linear infinite;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapNextBtn {
  height: 20px;
  transform: translateY(-10px);
  margin: 0 0 auto auto;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapNextBtn:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapNextBtn.clicked {
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapExitBtn {
  height: 20px;
  margin: auto auto 0 0;
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapExitBtn:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .nextButtonContainer .chapExitBtn.clicked {
  transform: scale(1);
  transition: transform 0.3s ease;
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer {
  min-height: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-left: 5px var(--red) solid;
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer p {
  color: white;
  margin: 0;
  padding: 10px 0 0 10px;
  line-height: 15px;
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer p span {
  color: var(--red);
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer .chapContentTitle {
  font-weight: bolder;
  font-size: 35px;
  color: #f9a327;
  text-transform: uppercase;
  line-height: 30px;
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer .chapContentContext {
  margin-bottom: 20px;
  font-size: 12px;
  font-style: italic;
}
#map .mapContent .chaptersContent .chapContentCard .chapContentContainer .chapPage {
  position: absolute;
  bottom: 0;
  right: 10%;
  font-size: 12px;
  font-style: italic;
  opacity: 0.5;
}
#map .mapContent .chaptersContent .mapCXGLogo {
  position: absolute;
  top: 32.5%;
  left: -150px;
  height: 100px;
}
#map .mapContentMobileView {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  grid-gap: 20px;
}
@media screen and (max-width: 940px) {
  #map .mapContentMobileView {
    display: flex;
  }
}
#map .mapContentMobileView .mapTitleContainerMV {
  display: none;
  width: 100%;
  -webkit-filter: drop-shadow(-5px 5px 0px var(--red));
}
#map .mapContentMobileView .mapTitleContainerMV img {
  margin: auto;
  width: 300px;
}
@media screen and (max-width: 940px) {
  #map .mapContentMobileView .mapTitleContainerMV {
    display: flex;
  }
}
#map .mapContentMobileView .chaptersMV {
  padding: 0px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.616);
  border-radius: 25px;
}
#map .mapContentMobileView .chaptersMV div {
  padding: 0px 5px;
  background-color: black;
  -webkit-filter: drop-shadow(-3px 3px 0px var(--red));
  transition: filter 0.3s;
  position: relative;
}
#map .mapContentMobileView .chaptersMV div img {
  position: absolute;
  height: 20px;
  bottom: -10px;
  left: 40px;
}
#map .mapContentMobileView .chaptersMV div.hover {
  -webkit-filter: drop-shadow(-3px 3px 0px var(--yellow));
  transition: filter 0.3s;
}
#map .mapContentMobileView .chaptersMV div.clicked {
  -webkit-filter: drop-shadow(-1px 1px 0px var(--yellow));
  transition: filter 0.3s;
}
#map .mapContentMobileView .chaptersMV div.focus {
  -webkit-filter: drop-shadow(-1px 3px 0px var(--yellow));
  transition: filter 0.3s;
}
#map .mapContentMobileView .chaptersMV div p {
  font-size: 25px;
  font-weight: bolder;
  box-sizing: border-box;
  color: white;
  line-height: 22px;
  margin: 2px auto;
  overflow: hidden;
}
@media screen and (max-width: 560px) {
  #map .mapContentMobileView .chaptersMV div p {
    line-height: 18px;
    font-size: 14px;
  }
}
#map .mapContentMobileView .chaptersMV div p span {
  margin: 0px auto;
  background-color: white;
  padding: 0px 1px;
  color: black;
}
#map .mapContentMobileView .chaptersMV .chapProlMV img {
  position: absolute;
  height: 20px;
  bottom: -10px;
  left: 20px;
}
#map .mapContentMobileView .chaptersContentScrollContainer {
  background-color: rgba(0, 0, 0, 0.616);
  padding: 20px 10px 5px 10px;
  border-radius: 15px;
  opacity: 0;
  transition: all 0.5s 1s ease;
}
#map .mapContentMobileView .chaptersContentScrollContainer.active {
  opacity: 1;
  transition: all 0.5s ease;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV {
  box-sizing: border-box;
  width: 300px;
  height: 0px;
  padding: 0px;
  overflow-y: scroll;
  transition: height 1s ease, padding 1s 1s ease;
  display: flex;
  flex-direction: column;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV.active {
  height: 300px;
  transition: height 1s ease, padding 1s ease;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV .chapterMainContentMV {
  border-left: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  padding-right: 20px;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV .chapterMainContentMV p {
  color: white;
  margin: 0;
  padding: 5px 0 0 10px;
  line-height: 15px;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV .chapterMainContentMV p span {
  color: var(--red);
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV .chapterMainContentMV .chapContentTitleMV {
  font-weight: bolder;
  font-size: 20px;
  color: #f9a327;
  text-transform: uppercase;
  line-height: 18px;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chaptersContentMV .chapterMainContentMV .chapContentContextMV {
  margin: auto auto 10px 0;
  font-size: 10px;
  font-style: italic;
  text-align: justify;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chapterBottomContentMV {
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: row-reverse;
  width: 90%;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chapterBottomContentMV img {
  height: 20px;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chapterBottomContentMV .cBA {
  margin: auto 0 auto auto;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chapterBottomContentMV .chapPageMV {
  color: white;
  right: 10%;
  font-size: 12px;
  font-style: italic;
  opacity: 0.5;
}
#map .mapContentMobileView .chaptersContentScrollContainer .chapterBottomContentMV .cBE {
  margin: auto auto auto 0;
}
#map #pioneersSectionRev {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: 25px;
  padding: 10px;
  margin-bottom: 25px;
}
#map #pioneersSectionRev .pioneersSectionTitleRev {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#map #pioneersSectionRev .pioneersSectionTitleRev img {
  position: absolute;
  bottom: -30%;
  left: 20%;
  height: 25px;
  width: auto;
}
#map #pioneersSectionRev .pioneersSectionTitleRev p {
  font-size: 40px;
  font-weight: bolder;
  box-sizing: border-box;
  color: white;
  line-height: 38px;
  margin: 2px auto;
  overflow: hidden;
}
#map #pioneersSectionRev .pioneersSectionTitleRev p span {
  margin: 0px auto;
  background-color: white;
  line-height: 35px;
  padding: 0px 1px;
  color: black;
}
#map .indiContainer {
  padding-bottom: 200px;
  position: relative;
}
#map .indiContainer .indiSideSocmed {
  position: fixed;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
@media screen and (max-width: 940px) {
  #map .indiContainer .indiSideSocmed {
    display: none;
  }
}
#map .indiContainer .indiSideSocmed img {
  height: 50px;
}
#map .indiContainer #artDeptandMngmtSection {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 25px;
  grid-gap: 25px;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection {
  margin: 0px;
  padding: 0;
  display: flex;
  flex-direction: column;
  grid-gap: 25px;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle img {
  position: absolute;
  bottom: -30%;
  left: 20%;
  height: 30px;
  width: auto;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle p {
  font-size: 40px;
  font-weight: bolder;
  color: white;
  line-height: 38px;
  margin: 2px auto;
  padding: 0px;
  overflow: hidden;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .artDeptSectionTitle p span {
  margin: 0px auto;
  background-color: white;
  padding: 0px 1px;
  color: black;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .indiClassCards {
  border-radius: 12px;
}
#map .indiContainer #artDeptandMngmtSection .artDeptSection .indiClassCards .indiInfoCard {
  height: 290px;
  width: 220px;
}
#map .indiContainer #artDeptandMngmtSection .managementSection {
  margin: 0px;
  padding: 0;
  display: flex;
  grid-gap: 25px;
  flex-direction: column;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle {
  margin: auto;
  padding: 0px 10px;
  background-color: black;
  border-radius: 2.5px;
  text-align: center;
  position: relative;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle img {
  position: absolute;
  bottom: -40%;
  left: 25%;
  height: 30px;
  width: auto;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle p {
  font-size: 40px;
  font-weight: bolder;
  color: white;
  margin: 2px auto;
  padding: 0px;
  line-height: 38px;
  overflow: hidden;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .managementSectionTitle p span {
  margin: 0px auto;
  background-color: white;
  padding: 0px 1px;
  color: black;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .indiClassCards {
  border-radius: 12px;
}
#map .indiContainer #artDeptandMngmtSection .managementSection .indiClassCards .indiInfoCard {
  height: 290px;
  width: 220px;
}
#map .indiContainer #popUpImageView {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  pointer-events: none;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.5s ease;
}
#map .indiContainer #popUpImageView.view {
  background-color: rgba(0, 0, 0, 0.79);
  transition: all 0.5s ease;
}
#map .indiContainer #popUpImageView .viewCard {
  pointer-events: all;
  opacity: 0;
  transform: scale(0);
  margin: auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.835);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  max-width: 1000px;
  z-index: 99;
  position: relative;
  box-sizing: border-box;
  transition: opacity 0.5s ease, transform 0.5s 0.5s ease;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard {
    max-width: 300px;
  }
}
#map .indiContainer #popUpImageView .viewCard.view {
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s ease;
}
#map .indiContainer #popUpImageView .viewCard .closeSection {
  position: absolute;
  right: 10px;
  top: 10px;
  margin: 0px 0px 0px auto;
}
#map .indiContainer #popUpImageView .viewCard .closeSection p {
  margin: 0;
  padding: 0;
  color: white;
  font-weight: bolder;
  font-size: 12px;
}
#map .indiContainer #popUpImageView .viewCard .contentSection {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  grid-gap: 25px;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection {
    grid-gap: 0px;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer {
  margin: 0;
  height: 275px;
  width: 275px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer {
    margin: 25px 0 0 0;
    height: 210px;
    width: 210px;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewImageContainer img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer {
  margin: 20px auto 0px auto;
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 600px;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName {
  margin: 0px auto 0px 0px;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName {
    margin: 0px auto 0px auto;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName p {
  font-weight: bolder;
  font-size: 40px;
  padding: 0;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewName p {
    font-size: 35px;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription {
  margin: 0px auto auto auto;
  padding: 0px 20px;
  font-weight: 500;
  font-size: 14px;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription {
    font-size: 12px;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p {
  margin: 2.5px;
  padding: 0;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p span {
  color: #ffb401;
  font-weight: bolder;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription p .viewRole {
  color: white;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio {
  box-sizing: border-box;
  margin: 10px auto auto 3px;
  border-left: 3px solid var(--red);
  padding: 10px 20px;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio p {
  margin: 0;
  padding: 0;
  font-style: italic;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-align: justify;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewDescription .viewBio p {
    line-height: 15px;
    font-size: 11px;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed {
  margin: 5px 0px 0px auto;
  display: flex;
  justify-content: center;
  grid-gap: 5px;
}
@media screen and (max-width: 940px) {
  #map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed {
    margin: auto;
    flex-direction: column-reverse;
  }
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed a {
  display: flex;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed p {
  margin: auto auto;
  padding: 0;
  font-size: 12px;
}
#map .indiContainer #popUpImageView .viewCard .contentSection .viewInfoContainer .viewSocmed img {
  height: 25px;
  width: 25px;
  margin: auto auto 0px auto;
}

.indiClassCards {
  display: flex;
  justify-content: center;
  margin: auto;
  border-radius: 12px;
  background-color: black;
  flex-wrap: wrap;
  padding: 0px 20px;
}
@media screen and (max-width: 1140px) {
  .indiClassCards {
    background-color: transparent;
  }
}
.indiClassCards .indiInfoCard {
  border-radius: 10px;
  height: 350px;
  width: 250px;
  overflow: hidden;
  position: relative;
  margin: 20px 10px;
  background-color: transparent;
  filter: drop-shadow(0px 0px 0px black) saturate(0);
  transition: filter 0.5s ease;
}
@media screen and (max-width: 1140px) {
  .indiClassCards .indiInfoCard {
    margin: 10px;
    box-sizing: border-box;
    background-color: black;
  }
}
.indiClassCards .indiInfoCard.view {
  pointer-events: none;
}
.indiClassCards .indiInfoCard.focus {
  filter: drop-shadow(5px 5px 0px #f9a327);
  transition: filter 0.5s ease;
}
.indiClassCards .indiInfoCard:hover {
  filter: drop-shadow(5px 5px 0px #f9a327);
  transition: filter 0.5s ease;
}
.indiClassCards .indiInfoCard .indiPic {
  box-sizing: border-box;
  padding: 5px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.indiClassCards .indiInfoCard .indiPic.view {
  pointer-events: none;
}
.indiClassCards .indiInfoCard .infiInfoP {
  color: white;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
.indiClassCards .indiInfoCard .infiInfoP .indiTitle {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}
.indiClassCards .indiInfoCard .infiInfoP .indiScrName {
  margin: 0px;
  padding: 0px;
  font-weight: bolder;
  font-size: 40px;
}

.staffArrow {
  position: absolute;
  height: 20px;
  width: 20px;
}

.indiClassCards {
  display: flex;
  justify-content: center;
  margin: auto;
  border-radius: 12px;
  background-color: black;
  flex-wrap: wrap;
  padding: 0px 20px;
}
@media screen and (max-width: 1140px) {
  .indiClassCards {
    background-color: transparent;
  }
}
.indiClassCards .indiInfoCard {
  border-radius: 10px;
  height: 350px;
  width: 250px;
  overflow: hidden;
  position: relative;
  margin: 8px;
  background-color: transparent;
  filter: drop-shadow(0px 0px 0px black) saturate(0);
  transition: filter 0.5s ease;
}
@media screen and (max-width: 1140px) {
  .indiClassCards .indiInfoCard {
    margin: 10px;
    box-sizing: border-box;
    background-color: black;
  }
}
.indiClassCards .indiInfoCard.view {
  pointer-events: none;
}
.indiClassCards .indiInfoCard.focus {
  filter: drop-shadow(5px 5px 0px #f9a327);
  transition: filter 0.5s ease;
}
.indiClassCards .indiInfoCard:hover {
  filter: drop-shadow(5px 5px 0px #f9a327);
  transition: filter 0.5s ease;
}
.indiClassCards .indiInfoCard .indiPic {
  box-sizing: border-box;
  padding: 5px;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: brightness(0.75);
  transition: filter 1s ease;
}
.indiClassCards .indiInfoCard .indiPic:hover {
  -webkit-filter: brightness(1);
  transition: filter 1s ease;
}
.indiClassCards .indiInfoCard .indiPic.view {
  pointer-events: none;
}
.indiClassCards .indiInfoCard .infiInfoP {
  color: white;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  -webkit-filter: drop-shadow(1px 1px 2.5px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.indiClassCards .indiInfoCard .infiInfoP .indiTitle {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}
.indiClassCards .indiInfoCard .infiInfoP .indiScrName {
  margin: 0px;
  padding: 0px;
  font-weight: bolder;
  font-size: 40px;
}

#mint {
  display: none;
  height: 100vh;
  margin: 10px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
#mint .mintBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}
#mint .mintBg img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: blur(2.5px) brightness(0.6) contrast(105%);
  transform: scale(1.05);
}
@media screen and (max-width: 940px) {
  #mint .mintBg img {
    -webkit-filter: blur(2.5px) brightness(0.4);
  }
}

@-webkit-keyframes textAnimate {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes textAnimate {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes circleRotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes circleRotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes aboutimgTransition {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes aboutimgTransition {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes feedSlider {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3%);
  }
}
@keyframes feedSlider {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3%);
  }
}
@-webkit-keyframes wave {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-3px);
  }
}
@keyframes wave {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-3px);
  }
}
.popUp {
  transition: all ease;
  transform: scale(1.01);
}

.socMedsContainer {
  display: none;
  flex-wrap: wrap-reverse;
  justify-content: center;
  grid-gap: 40px;
  margin-bottom: 10px;
}
@media screen and (max-width: 940px) {
  .socMedsContainer {
    display: flex;
  }
}
.socMedsContainer img {
  border-radius: 7.5px;
  height: 40px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.socMedsContainer img:hover {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.socMedsContainer .discordContainer {
  display: flex;
  justify-content: center;
  grid-gap: 5px;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
.socMedsContainer .discordContainer:hover {
  transform: scale(0.99);
}
.socMedsContainer .twitterContainer {
  display: flex;
  grid-gap: 5px;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  padding: 0px 20px;
  border-radius: 7.5px;
  height: 45px;
  font-weight: bolder;
}
.socMedsContainer .twitterContainer:hover {
  transform: scale(0.99);
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  margin: auto;
}
footer p {
  font-weight: bolder;
  font-size: 12px;
  color: var(--white);
}
@media all and (max-width: 1000px) {
  footer p {
    text-align: center;
    margin: auto;
  }
}/*# sourceMappingURL=styles.css.map */