@font-face {
  font-family: "Metropolis Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Regular"), url("/font/Metropolis-Regular.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Regular Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Regular Italic"), url("/font/Metropolis-RegularItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Extra Light";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Extra Light"), url("/font/Metropolis-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Light";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Light"), url("/font/Metropolis-Light.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Thin";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Thin"), url("/font/Metropolis-Thin.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Extra Light Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Extra Light Italic"), url("/font/Metropolis-ExtraLightItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Light Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Light Italic"), url("/font/Metropolis-LightItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Thin Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Thin Italic"), url("/font/Metropolis-ThinItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Medium";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Medium"), url("/font/Metropolis-Medium.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Semi Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Semi Bold"), url("/font/Metropolis-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Bold"), url("/font/Metropolis-Bold.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Bold Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Bold Italic"), url("/font/Metropolis-BoldItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Medium Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Medium Italic"), url("/font/Metropolis-MediumItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Semi Bold Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Semi Bold Italic"), url("/font/Metropolis-SemiBoldItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Extra Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Extra Bold"), url("/font/Metropolis-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Extra Bold Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Extra Bold Italic"), url("/font/Metropolis-ExtraBoldItalic.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Black";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Black"), url("/font/Metropolis-Black.woff") format("woff");
}
@font-face {
  font-family: "Metropolis Black Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Metropolis Black Italic"), url("/font/Metropolis-BlackItalic.woff") format("woff");
}
:root {
  --body-text: #888888;
  --heading-text: #444444;
}

[data-theme=dark] {
  --body-text: #fafafa;
  --heading-text: #aaaaaa;
}

html,
body {
  font-family: "Metropolis", sans-serif !important;
  color: var(--body-text);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-text);
  font-weight: 900;
}

#navBar .headerCard {
  padding: 6vh;
  max-width: 100%;
  justify-content: left;
  border-radius: 0px;
  border: none;
  padding-top: 0.3em !important;
  padding-bottom: 0.3em !important;
}
#navBar .headerCard img {
  max-width: 100px;
}

#hero {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#hero .heroBackgroundWeb {
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: scale(1.2);
}
#hero .heroBackgroundMobile {
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  z-index: -1;
}
#hero .heroCard {
  padding: 1% 10%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
#hero .heroCard img {
  height: 200px;
  width: 200px;
}

#appIntro {
  background: url("../../img/landingBackground.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#appIntro .appIntroContainer {
  display: flex;
  flex-direction: row;
  padding: 5vw;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#appIntro .appIntroContainer .appIntroContent {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
#appIntro .appIntroContainer .appIntroContent p {
  margin: 3vh 0vw;
  line-height: 25px;
}
#appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg {
  display: flex;
  flex-direction: row;
}
#appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg img {
  margin: 10px;
  width: 168px;
  height: 50px;
}
#appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg img:first-child {
  margin-left: 0px;
}
#appIntro .appIntroContainer .appIntroImg {
  display: flex;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#appIntro .appIntroContainer .appIntroImg img {
  width: 35vw;
  height: 35vw;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 20vh;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.header .headerBackgroundWeb {
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  z-index: -1;
  opacity: 0.1;
}
.header .headerBackgroundMobile {
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  z-index: -1;
  opacity: 0.1;
}
.header .headerCard {
  padding: 6vh;
  width: 100%;
  max-width: 100%;
  justify-content: left;
  border-radius: 0px;
  border: none;
}
.header .headerCard img {
  width: 100px;
}

@keyframes mousescroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    transform: translateY(0.75em);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
.scroll-icon__dot {
  display: block;
  position: absolute;
  left: 50%;
  background: #283c87;
  background: radial-gradient(circle, rgba(40, 60, 135, 0.5) 0%, rgba(243, 130, 33, 0.5) 100%);
  height: 0.5em;
  width: 0.5em;
  top: 0.6em;
  margin-left: -0.25em;
  border-radius: 50%;
  transform-origin: top center;
  backface-visibility: hidden;
  animation: mousescroll 2s ease-out infinite;
}

.scroll-icon {
  display: block;
  position: absolute;
  bottom: 10%;
  height: 3em;
  width: 1.8em;
  border: 0.25em solid #283c87;
  border-radius: 1em;
}

#introText {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#introText .introTextContainer {
  width: 70%;
}
#introText .introTextContainer .introTextEng {
  padding: 1em;
  line-height: 25px;
  font-weight: 500;
}
#introText .introTextContainer .introTextMm {
  padding: 1em;
  line-height: 25px;
  font-size: 0.98em;
}

#story {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#story .storyContainer {
  width: 70%;
}
#story .storyContainer .storyEng {
  display: block;
  line-height: 25px;
  font-weight: 500;
}
#story .storyContainer .storyMm {
  display: block;
  line-height: 25px;
  font-size: 0.97em;
}

.bodyContainer {
  margin-top: 10vh;
}
.bodyContainer #about {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bodyContainer #about .aboutContainer {
  width: 70%;
}
.bodyContainer #about .aboutContainer .aboutEng {
  display: block;
  line-height: 25px;
  font-weight: 500;
}
.bodyContainer #about .aboutContainer .aboutMm {
  display: block;
  line-height: 25px;
  font-size: 0.97em;
}
.bodyContainer #privacyEng,
.bodyContainer #privacyMm {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bodyContainer #privacyEng .privacyContainer,
.bodyContainer #privacyMm .privacyContainer {
  width: 70%;
}
.bodyContainer #privacyEng .privacyContainer .privacyEng,
.bodyContainer #privacyMm .privacyContainer .privacyEng {
  display: block;
  line-height: 25px;
  font-weight: 500;
  text-align: left;
}
.bodyContainer #privacyEng .privacyContainer .privacyEng ul,
.bodyContainer #privacyMm .privacyContainer .privacyEng ul {
  list-style-type: circle;
  margin-left: 5%;
}
.bodyContainer #privacyEng .privacyContainer .privacyEng ol,
.bodyContainer #privacyMm .privacyContainer .privacyEng ol {
  list-style-type: lower-roman;
  margin-left: 5%;
}
.bodyContainer #privacyEng .privacyContainer .privacyMm,
.bodyContainer #privacyMm .privacyContainer .privacyMm {
  display: block;
  line-height: 25px;
  font-size: 0.97em;
  text-align: left;
}
.bodyContainer #privacyEng .privacyContainer .privacyMm ul,
.bodyContainer #privacyMm .privacyContainer .privacyMm ul {
  list-style-type: none;
  margin-left: 5%;
}
.bodyContainer #privacyEng .privacyContainer .privacyMm ol,
.bodyContainer #privacyMm .privacyContainer .privacyMm ol {
  list-style-type: none;
  margin-left: 5%;
}
.bodyContainer #deleteAccount .deleteAccountContainer p {
  line-height: 1.5em;
}

#partners {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#partners .partnersContainer {
  width: 70%;
}
#partners .partnersContainer .partnerEng {
  display: block;
  line-height: 25px;
  font-weight: 500;
}
#partners .partnersContainer .partnerMm {
  display: block;
  line-height: 25px;
  font-size: 0.97em;
}
#partners .partnersLogoContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#partners .partnersLogoContainer .partnerLogo {
  margin: 3em;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#partners .partnersLogoContainer .partnerLogo img {
  height: 70px;
  width: auto;
  display: block;
  margin: 1em auto;
}
#partners .partnersLogoContainer .partnerLogo a {
  text-decoration: none;
}
#partners .partnersLogoContainer .partnerLogo a .partnerTitle {
  cursor: pointer;
  display: block;
  margin-bottom: 0.5em;
  color: var(--heading-text);
}
#partners .partnersLogoContainer .partnerLogo .arrow {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}
#partners .partnersLogoContainer .partnerLogo .arrow:before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background-color: #5a5351;
  top: 50%;
  transition: width 0.5s ease-out;
}
#partners .partnersLogoContainer .partnerLogo .arrow:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid #5a5351;
  border-right: 1px solid #5a5351;
  transform: rotate(45deg);
  top: calc(50% - 5px);
  position: absolute;
  right: 1px;
}
#partners .partnersLogoContainer .partnerLogo:hover .arrow:before {
  width: 40px;
}

#footer .footerCopyright {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: -58px;
}

.footerContainer {
  position: relative;
}
.footerContainer .footerContainerBackground {
  transform: rotate(180deg);
}
.footerContainer .footerContainerCopyright {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: absolute;
  bottom: 0;
}

@media (min-width: 1200px) {
  .heroBackgroundWeb .webAnimation {
    opacity: 0.4;
  }

  .heroBackgroundMobile {
    display: none;
  }

  .partnersLogoContainer .partnerLogo {
    width: 25%;
  }

  #footer {
    min-height: 15vh;
  }

  .footerContainer {
    height: 30vh;
    overflow: hidden;
  }
}
@media (min-width: 991px) and (max-width: 1200px) {
  .heroBackgroundWeb .webAnimation {
    opacity: 0.4;
  }

  .heroBackgroundMobile {
    display: none;
  }

  .partnersLogoContainer .partnerLogo {
    width: 25%;
  }

  #footer {
    min-height: 15vh;
  }

  .footerContainer {
    height: 30vh;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 990px) {
  .header {
    flex-direction: row-reverse;
    background: #fff;
    z-index: 9;
  }

  .bodyContainer {
    margin-top: 25vh;
  }

  #partners .partnersLogoContainer {
    flex-direction: column;
  }

  .heroBackgroundWeb .webAnimation {
    opacity: 0.7;
    transform: scale(2);
    height: 100vh;
  }

  .heroBackgroundMobile {
    display: none;
  }

  #footer {
    min-height: 15vh;
  }

  .footerContainer {
    height: 100%;
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .header {
    flex-direction: row-reverse;
    background: #fff;
    z-index: 9;
  }

  .nav-pills {
    display: none;
  }

  #appIntro {
    margin-bottom: 5vh;
    padding: 3vh;
  }
  #appIntro .appIntroContainer {
    flex-direction: column;
    padding: 0px;
    margin: 5vh;
  }
  #appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg {
    flex-direction: column;
    width: 100%;
  }
  #appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg img {
    margin: 10px;
    width: auto;
    height: 40px;
  }
  #appIntro .appIntroContainer .appIntroContent .appIntroDownloadImg img:first-child {
    margin-left: 0px;
  }
  #appIntro .appIntroContainer .appIntroContent p {
    margin: 3vh 0vw;
    line-height: 25px;
  }
  #appIntro .appIntroContainer .appIntroImg img {
    width: 100vw;
    height: 100vh;
  }

  .bodyContainer {
    margin-top: 25vh;
  }

  #partners .partnersLogoContainer {
    flex-direction: row;
  }
  #partners .partnersLogoContainer .partnerLogo {
    width: 100% !important;
  }
  #partners .partnersLogoContainer .partnerLogo img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
  }

  .heroBackgroundWeb {
    display: none;
  }

  .heroBackgroundMobile {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.1;
  }
  .heroBackgroundMobile .mobileAnimation {
    opacity: 0.4;
    height: 100vh;
    transform: scale(3);
  }

  #footer {
    min-height: 100%;
  }

  .footerContainer {
    height: 100%;
    margin: 5vh 0vw;
  }
}

.btnPrimary {
  color: #fff;
  background-color: #283c87;
  border-color: #283c87;
}

/*# sourceMappingURL=style.css.map */