@font-face {
  font-family: 'triumph';
  font-weight: 600;
  src: url("../assets/_Fonts/triumph-sans-serif-wide-font-2021-08-31-07-08-57-utc/OTF/SATriumph.otf");
}

/* the font below is the webfont version of triumph font*/
@font-face {
  font-family: 'sa_triumphregular';
  src: url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff2") format("woff2"), url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'triumphOutline';
  src: url("../assets/_Fonts/triumph-sans-serif-wide-font-2021-08-31-07-08-57-utc/OTF/SATriumph-Outline.otf");
}

@font-face {
  font-family: 'sourceSansPro-black';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Black.otf");
}

@font-face {
  font-family: 'sourceSansPro-blackIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BlackIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-bold';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Bold.otf");
}

@font-face {
  font-family: 'sourceSansPro-boldIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BoldIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-extraLight';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLight.otf");
}

@font-face {
  font-family: 'sourceSansPro-extraLightIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLightIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-it';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-It.otf");
}

@font-face {
  font-family: 'sourceSansPro-light';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Light.otf");
}

@font-face {
  font-family: 'sourceSansPro-lightIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-LightIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-regular';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Regular.otf");
}

@font-face {
  font-family: 'sourceSansPro-semibold';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Semibold.otf");
}

@font-face {
  font-family: 'sourceSansPro-semiboldIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-SemiboldIt.otf");
}

#slcket-logo {
  width: 16vw;
}

.preview-image {
  max-height: 26vh;
}

#title-header {
  text-transform: uppercase;
  font-size: 1.6vw;
  text-align: center;
  font-family: sa_triumphregular;
  margin: 0;
}

#body-text {
  text-transform: uppercase;
  font-size: 1.2vw;
}

@media screen and (max-width: 767px) {

  .enter-rectangle-wrapper {
    display: none !important;
  }

  #title-header {
    font-size: 3vw;
  }

  #body-text {
    font-size: 2.5vw;
  }

  nav img {
    max-width: 40vw;
  }

  .preview-image {
    max-height: 15vh;
  }
}

.body__enter {
  background-image: url("https://static.slcket.com/web2022/assets/_Backgrounds/enter-background.png");
}

.body__enter .page-wrapper {
  overflow: hidden;
}

.enter-wrapper .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: sa_triumphregular;
  height: 83.5vh;
}

.s-stamp {
  position: absolute;
  top: -5vh;
  right: -10vw;
  opacity: 0.2;
  height: 100%;
}

.enter-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.6vw 3vw;
}

.enter-content .btn {
  font-size: 1.8vw;
  z-index: 1;
  -webkit-transform: translateY(70%);
          transform: translateY(70%);
  -webkit-transition: all 300ms;
  transition: all 300ms;
  letter-spacing: 0.1vw;
}

.enter-content .btn:hover {
  color: #e9222d;
  border-color: #e9222d;
}

.enter-h1 {
  margin-top: 3vw;
  text-align: center;
  font-size: 2.1vw;
  max-width: 65vw;
}

.enter-rectangle-wrapper {
  position: absolute;
  width: 77%;
  height: 100%;
}

.enter-rectangle {
  position: absolute;
}

.enter-rectangle__top {
  top: 0;
  width: 100%;
  border-top: 0.1vw solid #e9222c91;
}

.enter-rectangle__side-top-left {
  top: 0;
  left: 0;
  height: 28%;
  border-left: 0.1vw solid #e9222c91;
}

.enter-rectangle__side-top-right {
  top: 0;
  right: 0;
  height: 28%;
  border-right: 0.1vw solid #e9222c91;
}

.enter-rectangle__side-bottom-left {
  bottom: 0;
  left: 0;
  height: 26.5%;
  border-left: 0.1vw solid #e9222c91;
}

.enter-rectangle__side-bottom-right {
  bottom: 0;
  right: 0;
  height: 26.5%;
  border-right: 0.1vw solid #e9222c91;
}

.enter-rectangle__bottom-left {
  bottom: 0;
  left: 0;
  width: 40%;
  border-bottom: 0.1vw solid #e9222c91;
}

.enter-rectangle__bottom-right {
  bottom: 0;
  right: 0;
  width: 40%;
  border-bottom: 0.1vw solid #e9222c91;
}

.login-enter {
  display: none;
  color: #717171;
  margin-top: 20vw;
  font-size: 2.5vw;
  font-family: 'sourceSansPro-bold';
}

@media screen and (max-width: 991px) {
  .enter-wrapper .container {
    padding: 0;
  }
  .enter-h1 {
    margin-top: 4.5vw;
    font-size: 2.65vw;
    max-width: 85vw;
    padding-top: 0vw;
    padding-bottom: 0vw;
  }
  .enter-rectangle-wrapper {
    width: 77%;
  }
  .enter-content {
    margin-top: 0vh;
  }
  .enter-content .btn {
    font-size: 2vw;
    padding: 0.65vw 1vw;
  }
}

@media screen and (max-width: 767px) {
  .enter-content {
    margin-top: 40vh;
  }
  .enter-content .btn {
    display: block;
  }
  .enter-h1 {
    margin-top: 5.75vw;
  }

  .enter-wrapper .container {
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .login-enter {
    display: block;
    margin-top: 30vh;
    font-size: 3vw;
  }
}

@media screen and (max-width: 479px) {
  .enter-wrapper .container {
    min-height: none;
  }
  .enter-content {
    margin-top: 0;
  }

  .enter-content .btn {
    font-size: 3.5vw;
  }

  #slcket-logo {
    width: 32vw;
  }
}

/* mixins */
/* variables */
.core-page-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wheel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
}

.wheel-outer {
  position: relative;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  border: 1.7vw solid #717171;
}

.wheel-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1.05vw solid #717171;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.circle-link {
  position: absolute;
  background-color: black;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.2vw;
  font-family: 'sourceSansPro-bold';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
}

.circle-link:hover {
  color: #e9222d;
  border-color: #e9222d;
}

#circle-link-1 {
  top: -4.5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-2 {
  right: -0.3vw;
  top: 0;
}

#circle-link-3 {
  right: -4.5vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-4 {
  right: -0.3vw;
  bottom: -0;
}

#circle-link-5 {
  bottom: -4.5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-6 {
  left: -4,5vw;
  bottom: -0vw;
}

#circle-link-7 {
  left: -4.5vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-8 {
  left: -0.3vw;
  top: 0vw;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .wheel {
    margin-right: auto;
  }
  .wheel-outer {
    width: 40vh;
    height: 40vh;
    border-width: 2.4vh;
  }
  .wheel-inner {
    width: 25vh;
    height: 25vh;
    border-width: 1.2vh;
  }
  .circle-link {
    width: 9.5vh;
    height: 9.5vh;
    font-size: 1.25vh;
    border-width: 0.21vw;
  }
  #circle-link-1 {
    top: -5.85vh;
  }
  #circle-link-2 {
    right: -0.6vh;
    top: -0.6vh;
  }
  #circle-link-3 {
    right: -5.85vh;
  }
  #circle-link-4 {
    right: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-5 {
    bottom: -5.85vh;
  }
  #circle-link-6 {
    left: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-7 {
    left: -5.85vh;
  }
  #circle-link-8 {
    left: -0.6vh;
    top: -0.6vh;
  }
}

@media screen and (max-width: 991px) {
  .wheel-outer {
    width: 23vw;
    height: 23vw;
    border: 1.5vw solid #717171;
  }
  .wheel-inner {
    border: 0.8vw solid #717171;
    width: 14.5vw;
    height: 14.5vw;
  }
  .circle-link {
    width: 5.25vw;
    height: 5.25vw;
    border-width: 0.3vw;
    font-size: 0.75vw;
  }
  #circle-link-1 {
    top: -3.25vw;
    left: 50%;
  }
  #circle-link-2 {
    right: -0.75vw;
    top: -0.75vw;
  }
  #circle-link-3 {
    right: -3.25vw;
    top: 50%;
  }
  #circle-link-4 {
    right: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-5 {
    bottom: -3.25vw;
    left: 50%;
  }
  #circle-link-6 {
    left: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-7 {
    left: -3.25vw;
    top: 50%;
  }
  #circle-link-8 {
    left: -0.75vw;
    top: -0.75vw;
  }
  /*
    .wheel-outer {
        width: 35vh;
        height: 35vh;
        border-width: 2.2vh;
    }

    .wheel-inner {
        width: 21vh;
        height: 21vh;
        border-width: 1.2vh;
    }

    .circle-link {
        width: 8.7vh;
        height: 8.7vh;
        font-size: 1.3vh;
        border-width: 0.22vh;
    }

    #circle-link-1 {
        top: -6.25vh;
    }

    #circle-link-2 {
        right: -1.6vh;
        top: -1.2vh;
    }

    #circle-link-3 {
        right: -6.25vh;
    }

    #circle-link-4 {
        right: -1.6vh;
        bottom: -1.2vh;
    }

    #circle-link-5 {
        bottom: -6.25vh;
    }

    #circle-link-6 {
        left: -1.6vh;
        bottom: -1.2vh;
    }

    #circle-link-7 {
        left: -6.5vh;
    }

    #circle-link-8 {
        left: -1.6vh;
        top: -1.2vh;
    }
    */
}

@media screen and (max-width: 767px) {
  .wheel {
    margin-top: 10vw;
    margin-bottom: 0;
  }
  .wheel-outer {
    width: 65vw;
    height: 65vw;
    border-width: 3.8vw;
  }
  .wheel-inner {
    width: 41vw;
    height: 41vw;
    border-width: 2.2vw;
  }
  .circle-link {
    border-width: 0.5vw;
    font-size: 2.2vw;
    width: 17vw;
    height: 17vw;
  }
  #circle-link-1 {
    top: -11.5vw;
  }
  #circle-link-2 {
    right: -3vw;
    top: -2vw;
  }
  #circle-link-3 {
    right: -11.5vw;
  }
  #circle-link-4 {
    right: -3vw;
    bottom: -2vw;
  }
  #circle-link-5 {
    bottom: -11.5vw;
  }
  #circle-link-6 {
    left: -3vw;
    bottom: -2vw;
  }
  #circle-link-7 {
    left: -11.5vw;
  }
  #circle-link-8 {
    left: -3vw;
    top: -2vw;
  }
}

@media screen and (max-width: 479px) {
  .circle-link {
    border-width: 0.65vw;
  }
}

/* mixins */
/* variables */
.body__core-page {
  background-image: url("https://static.slcket.com/web2022/assets/_Backgrounds/enter-background.png");
}

.body__core-page .page-wrapper {
  max-height: 100vh;
}

.bg-text {
  position: absolute;
  z-index: -1;
  top: 1vw;
  right: -4.5vw;
  width: 85%;
  height: 40vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.core-page-wrapper {
  height: 83.5vh;
  font-family: 'sourceSansPro-bold';
}

.core-page-wrapper .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-bottom: 0;
  padding-left: 3vw;
  padding-right: 3vw;
}

.core-page-left {
  width: 45%;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.core-page__bottom {
  margin-top: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: auto;
}

.core-page__bottom-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 0.35vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 0.75vw;
  cursor: pointer;
}

.core-page__bottom-item__usay {
  border: none;
}

.usay-text {
  position: absolute;
  color: #717171;
}

/*
.core-page__msg-bubble {
    position:relative;
    width: 4.75vw;
    margin: 0 0.35vw;
    border-radius: 50%;;
    border: 0.3vw solid $grey;
}

.core-page__msg-bubble:before,
.core-page__msg-bubble:after {
    content: "\0020";
    display: block;
    position: absolute;
    left: 14%;
    bottom: -1vw;
    transform: scaleY(-1);
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    border: solid 1.5vw transparent;
    border-top: 0;
    border-bottom-color: #131313;
}
.core-page__msg-bubble:before {
    bottom: -1.2vw;
    z-index:1;
    border-bottom-color: $grey;
}
*/
.core-page__bottom img {
  border: none;
  width: 3.8vw;
  height: 3.8vw;
  cursor: pointer;
}

/* I was thinking about creating this button using the
.core-page__bottom-item class above, but decided to make it its own class for more clarity */
.core-page-btn__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.05vw 2.75vw;
  border-radius: 10vw;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.4vh;
  margin-top: 1.8vh;
  margin-bottom: 5.5vh;
  margin-inline: auto;
  cursor: pointer;
}

.policies-wrapper {
  white-space: nowrap;
  position: relative;
  font-size: 0.65vw;
  letter-spacing: 0.08vw;
  text-align: center;
}

.policies-wrapper a {
  line-height: 1.5;
  color: #717171;
}

.policies-wrapper__mobile {
  display: none;
}

.home-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
  /* to more accurately position the text content */
  margin-right: 4vw;
}

.btn {
  line-height: 1;
  font-family: sa_triumphregular;
  padding: 0.35vw 0.35vw;
  border: 0.1vw solid white;
  margin-top: 0.8vw;
  font-size: 1.4vw;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
  letter-spacing: 0.1vw;
  text-align: center;
}

.btn__mobile {
  display: none;
}

.btn:hover {
  color: #e9222d;
  border-color: #e9222d;
}

.page-content-wrapper {
  margin-top: -14vh;
  width: 55%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.back-arrow {
  margin-left: -250%;
  height: 2vw;
  width: 2vw;
}

.next-arrow {
  margin-left: 250%;
  height: 2vw;
  width: 2vw;
}

.page-navigation {
  position: relative;
  margin-top: -5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page-navigation-app-name {
  margin-top: 25vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page-navigation-text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: 'sourceSansPro-Light';
  font-size: 0.85vw;
}

@media screen and (min-width: 992px) and (orientation: portrait) {
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-left: -3vw;
  }
  .home-text-wrapper {
    margin-top: 2vh;
    margin-right: 0;
  }
  .core-page__bottom {
    margin-top: 6.5vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 6vw;
    height: 6vw;
    font-size: 1.2vw;
  }
  .core-page__bottom img {
    width: 5.75vw;
    height: 5.75vw;
  }
  .core-page-btn__bottom {
    font-size: 1.2vw;
    padding: 1.25vw 3.5vw;
  }
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .bg-text {
    top: 2vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .core-page-wrapper .container {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .core-page__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: -2vw;
  }
  .core-page__bottom-item {
    width: 6.5vh;
    height: 6.5vh;
    font-size: 1.5vh;
  }
  .core-page__bottom img {
    width: 6.5vh;
    height: 6.5vh;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.5vh 3vh;
    border-radius: 10vw;
    border: 0.21vw solid #717171;
    color: #717171;
    font-size: 1.65vh;
    margin-inline: auto;
    cursor: pointer;
  }
  .home-text-wrapper {
    width: 100%;
    margin-top: 5vh;
    margin-left: 7.5vw;
  }
  .policies-wrapper {
    font-size: 1vh;
    margin-top: 1vh;
  }
  .policies-wrapper a {
    letter-spacing: 0.15vh;
  }
  .btn {
    margin-top: 1.6vh;
    border-width: 0.1vw;
    padding: 0.4vh 0.4vh;
    font-size: 1vw;
    letter-spacing: 0.2vh;
  }
}

@media screen and (max-width: 991px) {
  .home-text-wrapper {
    margin-top: 8vh;
  }
  .page-navigation {
    margin-top: 2vh;
  }
  .page-navigation-both {
    margin-top: 5vh;
  }
  .page-content-wrapper {
    margin-top: -19vh;
  }
  .page-navigation-text {
    font-size: 1.2vw;
  }
  .back-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    margin-left: 150%;
  }
  .bg-text {
    top: -10vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .body__core-page {
    min-height: 100vh;
  }
  .body__core-page .page-wrapper {
    max-height: 100%;
  }
  .core-page-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    margin-top: 6vw;
  }
  .core-page-wrapper .container {
    height: auto;
    padding: 0;
  }
  .core-page-left {
    margin-top: 5vh;
    margin-left: -5vw;
  }
  .core-page__bottom {
    margin-top: 6vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 4.75vw;
    height: 4.75vw;
    font-size: 0.9vw;
    border-width: 0.3vw;
  }
  .core-page__bottom img {
    width: 4.5vw;
    height: 4.5vw;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.1vw 2.85vw;
    border-radius: 10vw;
    border: 0.3vw solid #717171;
    color: #717171;
    font-size: 1.1vw;
  }
  .policies-wrapper {
    font-size: 0.7vw;
    margin-top: 0;
  }
  .policies-wrapper a {
    letter-spacing: 0.05vw;
  }
  .core-page-text-wrapper {
    margin-top: 1.5vw;
  }
  .btn {
    margin-top: 1.8vh;
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .home-text-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-top: 0;
  }
  .page-content-wrapper {
    margin-top: -4vh;
  }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
  .core-page-wrapper {
    padding-bottom: 10vh;
  }
}

@media screen and (max-width: 767px) {
  .page-navigation {
    margin-top: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-navigation-text {
    font-size: 1.7vw;
  }
  .page-navigation-both {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .back-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .next-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .body__core-page .page-wrapper {
    max-height: auto;
  }
  .page-content-wrapper {
    width: 100%;
    margin-top: 0;
  }
  .core-page-wrapper {
    height: auto;
  }
  .core-page-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .mobile-bottom-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .core-page-left {
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-top: 15vw;
    padding-bottom: 6.5vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .bg-text {
    display: none;
  }
  .core-page__bottom {
    display: none;
  }
  .policies-wrapper__mobile {
    font-size: 1.9vw;
    margin-top: 5vw;
    display: block;
    padding-bottom: 5vh;
  }
  .core-page-text-wrapper {
    display: none;
  }
  .btn {
    display: none;
  }
  .btn__mobile {
    font-size: 2.5vw;
    margin-inline: auto;
    margin-top: 25vw;
    display: block;
    padding: 1.1vw 2.25vw;
    letter-spacing: 0.25vw;
  }
  .policies-wrapper__mobile {
    margin-top: 17vw;
    font-size: 1.65vw;
  }
  .policies-wrapper__mobile a {
    letter-spacing: 0.15vw;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .page-content-wrapper {
    margin-top: 25vh;
  }
  .back-arrow {
    width: 7vh;
    height: 7vh;
  }
  .next-arrow {
    width: 7vh;
    height: 7vh;
  }
}

@media screen and (max-width: 479px) {
  .policies-wrapper__mobile {
    font-size: 2vw;
  }
  .btn__mobile {
    font-size: 3.25vw;
    margin-inline: auto;
    display: block;
    padding: 1.1vw 2.25vw;
  }
  .page-navigation-text {
    font-size: 2.2vw;
  }
  .back-arrow {
    width: 4vh;
    height: 4vh;
  }
  .next-arrow {
    width: 4vh;
    height: 4vh;
    margin-right: 0;
  }
}

/* mixins */
/* variables */
.home-heading {
  white-space: nowrap;
  font-size: 4.65vw;
}

.login {
  color: #717171;
  margin-top: 21vh;
  font-size: 2vw;
}

.login-mobile {
  margin: 0;
  display: none;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .login {
    margin-top: 30.5vh;
    font-size: 2.5vh;
  }
}

@media screen and (max-width: 991px) {
  .login {
    margin-top: 30vh;
    font-size: 1.3vw;
  }
  .login-mobile {
    margin-top: 0;
  }
  .home-heading {
    text-align: center;
    font-size: 4.5vw;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .login {
    margin-top: 16vh;
  }
}

@media screen and (max-width: 767px) {
  .login {
    display: none;
  }
  .login-mobile {
    display: block;
    font-size: 4vw;
    margin-top: 0;
  }
  .home-heading {
    display: none;
  }
}

/* mixins */
/* variables */
/* mixins */
/* variables */
.body__core-page {
  background-image: url("https://static.slcket.com/web2022/assets/_Backgrounds/enter-background.png");
}

.body__core-page .page-wrapper {
  max-height: 100vh;
}

.bg-text {
  position: absolute;
  z-index: -1;
  top: 1vw;
  right: -4.5vw;
  width: 85%;
  height: 40vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.core-page-wrapper {
  height: 83.5vh;
  font-family: 'sourceSansPro-bold';
}

.core-page-wrapper .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-bottom: 0;
  padding-left: 3vw;
  padding-right: 3vw;
}

.core-page-left {
  width: 45%;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.core-page__bottom {
  margin-top: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: auto;
}

.core-page__bottom-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 0.35vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 0.75vw;
  cursor: pointer;
}

.core-page__bottom-item__usay {
  border: none;
}

.usay-text {
  position: absolute;
  color: #717171;
}

/*
.core-page__msg-bubble {
    position:relative;
    width: 4.75vw;
    margin: 0 0.35vw;
    border-radius: 50%;;
    border: 0.3vw solid $grey;
}

.core-page__msg-bubble:before,
.core-page__msg-bubble:after {
    content: "\0020";
    display: block;
    position: absolute;
    left: 14%;
    bottom: -1vw;
    transform: scaleY(-1);
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    border: solid 1.5vw transparent;
    border-top: 0;
    border-bottom-color: #131313;
}
.core-page__msg-bubble:before {
    bottom: -1.2vw;
    z-index:1;
    border-bottom-color: $grey;
}
*/
.core-page__bottom img {
  border: none;
  width: 3.8vw;
  height: 3.8vw;
  cursor: pointer;
}

/* I was thinking about creating this button using the
.core-page__bottom-item class above, but decided to make it its own class for more clarity */
.core-page-btn__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.05vw 2.75vw;
  border-radius: 10vw;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.4vh;
  margin-top: 1.8vh;
  margin-bottom: 5.5vh;
  margin-inline: auto;
  cursor: pointer;
}

.policies-wrapper {
  white-space: nowrap;
  position: relative;
  font-size: 0.65vw;
  letter-spacing: 0.08vw;
  text-align: center;
}

.policies-wrapper a {
  line-height: 1.5;
  color: #717171;
}

.policies-wrapper__mobile {
  display: none;
}

.home-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
  /* to more accurately position the text content */
  margin-right: 4vw;
}

.btn {
  line-height: 1;
  font-family: sa_triumphregular;
  padding: 0.35vw 0.35vw;
  border: 0.1vw solid white;
  margin-top: 0.8vw;
  font-size: 1.4vw;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
  letter-spacing: 0.1vw;
  text-align: center;
}

.btn__mobile {
  display: none;
}

.btn:hover {
  color: #e9222d;
  border-color: #e9222d;
}

.page-content-wrapper {
  margin-top: -14vh;
  width: 55%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.back-arrow {
  margin-left: -250%;
  height: 2vw;
  width: 2vw;
}

.next-arrow {
  margin-left: 250%;
  height: 2vw;
  width: 2vw;
}

.page-navigation {
  position: relative;
  margin-top: -5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page-navigation-app-name {
  margin-top: 25vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page-navigation-text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: 'sourceSansPro-Light';
  font-size: 0.85vw;
}

@media screen and (min-width: 992px) and (orientation: portrait) {
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-left: -3vw;
  }
  .home-text-wrapper {
    margin-top: 2vh;
    margin-right: 0;
  }
  .core-page__bottom {
    margin-top: 6.5vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 6vw;
    height: 6vw;
    font-size: 1.2vw;
  }
  .core-page__bottom img {
    width: 5.75vw;
    height: 5.75vw;
  }
  .core-page-btn__bottom {
    font-size: 1.2vw;
    padding: 1.25vw 3.5vw;
  }
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .bg-text {
    top: 2vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .core-page-wrapper .container {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .core-page__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: -2vw;
  }
  .core-page__bottom-item {
    width: 6.5vh;
    height: 6.5vh;
    font-size: 1.5vh;
  }
  .core-page__bottom img {
    width: 6.5vh;
    height: 6.5vh;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.5vh 3vh;
    border-radius: 10vw;
    border: 0.21vw solid #717171;
    color: #717171;
    font-size: 1.65vh;
    margin-inline: auto;
    cursor: pointer;
  }
  .home-text-wrapper {
    width: 100%;
    margin-top: 5vh;
    margin-left: 7.5vw;
  }
  .policies-wrapper {
    font-size: 1vh;
    margin-top: 1vh;
  }
  .policies-wrapper a {
    letter-spacing: 0.15vh;
  }
  .btn {
    margin-top: 1.6vh;
    border-width: 0.1vw;
    padding: 0.4vh 0.4vh;
    font-size: 1vw;
    letter-spacing: 0.2vh;
  }
}

@media screen and (max-width: 991px) {
  .home-text-wrapper {
    margin-top: 8vh;
  }
  .page-navigation {
    margin-top: 2vh;
  }
  .page-navigation-both {
    margin-top: 5vh;
  }
  .page-content-wrapper {
    margin-top: -19vh;
  }
  .page-navigation-text {
    font-size: 1.2vw;
  }
  .back-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    margin-left: 150%;
  }
  .bg-text {
    top: -10vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .body__core-page {
    min-height: 100vh;
  }
  .body__core-page .page-wrapper {
    max-height: 100%;
  }
  .core-page-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    margin-top: 6vw;
  }
  .core-page-wrapper .container {
    height: auto;
    padding: 0;
  }
  .core-page-left {
    margin-top: 5vh;
    margin-left: -5vw;
  }
  .core-page__bottom {
    margin-top: 6vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 4.75vw;
    height: 4.75vw;
    font-size: 0.9vw;
    border-width: 0.3vw;
  }
  .core-page__bottom img {
    width: 4.5vw;
    height: 4.5vw;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.1vw 2.85vw;
    border-radius: 10vw;
    border: 0.3vw solid #717171;
    color: #717171;
    font-size: 1.1vw;
  }
  .policies-wrapper {
    font-size: 0.7vw;
    margin-top: 0;
  }
  .policies-wrapper a {
    letter-spacing: 0.05vw;
  }
  .core-page-text-wrapper {
    margin-top: 1.5vw;
  }
  .btn {
    margin-top: 1.8vh;
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .home-text-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-top: 0;
  }
  .page-content-wrapper {
    margin-top: -4vh;
  }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
  .core-page-wrapper {
    padding-bottom: 10vh;
  }
}

@media screen and (max-width: 767px) {
  .page-navigation {
    margin-top: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-navigation-text {
    font-size: 1.7vw;
  }
  .page-navigation-both {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .back-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .next-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .body__core-page .page-wrapper {
    max-height: auto;
  }
  .page-content-wrapper {
    width: 100%;
    margin-top: 0;
  }
  .core-page-wrapper {
    height: auto;
  }
  .core-page-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .mobile-bottom-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .core-page-left {
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-top: 15vw;
    padding-bottom: 6.5vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .bg-text {
    display: none;
  }
  .core-page__bottom {
    display: none;
  }
  .policies-wrapper__mobile {
    font-size: 1.9vw;
    margin-top: 5vw;
    display: block;
    padding-bottom: 5vh;
  }
  .core-page-text-wrapper {
    display: none;
  }
  .btn {
    display: none;
  }
  .btn__mobile {
    font-size: 2.5vw;
    margin-inline: auto;
    margin-top: 25vw;
    display: block;
    padding: 1.1vw 2.25vw;
    letter-spacing: 0.25vw;
  }
  .policies-wrapper__mobile {
    margin-top: 17vw;
    font-size: 1.65vw;
  }
  .policies-wrapper__mobile a {
    letter-spacing: 0.15vw;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .page-content-wrapper {
    margin-top: 25vh;
  }
  .back-arrow {
    width: 7vh;
    height: 7vh;
  }
  .next-arrow {
    width: 7vh;
    height: 7vh;
  }
}

@media screen and (max-width: 479px) {
  .policies-wrapper__mobile {
    font-size: 2vw;
  }
  .btn__mobile {
    font-size: 3.25vw;
    margin-inline: auto;
    display: block;
    padding: 1.1vw 2.25vw;
  }
  .page-navigation-text {
    font-size: 2.2vw;
  }
  .back-arrow {
    width: 4vh;
    height: 4vh;
  }
  .next-arrow {
    width: 4vh;
    height: 4vh;
    margin-right: 0;
  }
}

@font-face {
  font-family: 'triumph';
  font-weight: 600;
  src: url("../assets/_Fonts/triumph-sans-serif-wide-font-2021-08-31-07-08-57-utc/OTF/SATriumph.otf");
}

/* the font below is the webfont version of triumph font*/
@font-face {
  font-family: 'sa_triumphregular';
  src: url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff2") format("woff2"), url("../assets/_Fonts/triumph-webfont/triumph-webfontkit/satriumph-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'triumphOutline';
  src: url("../assets/_Fonts/triumph-sans-serif-wide-font-2021-08-31-07-08-57-utc/OTF/SATriumph-Outline.otf");
}

@font-face {
  font-family: 'sourceSansPro-black';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Black.otf");
}

@font-face {
  font-family: 'sourceSansPro-blackIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BlackIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-bold';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Bold.otf");
}

@font-face {
  font-family: 'sourceSansPro-boldIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-BoldIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-extraLight';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLight.otf");
}

@font-face {
  font-family: 'sourceSansPro-extraLightIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-ExtraLightIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-it';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-It.otf");
}

@font-face {
  font-family: 'sourceSansPro-light';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Light.otf");
}

@font-face {
  font-family: 'sourceSansPro-lightIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-LightIt.otf");
}

@font-face {
  font-family: 'sourceSansPro-regular';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Regular.otf");
}

@font-face {
  font-family: 'sourceSansPro-semibold';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-Semibold.otf");
}

@font-face {
  font-family: 'sourceSansPro-semiboldIt';
  src: url("../assets/_Fonts/source-sans-pro/SourceSansPro-SemiboldIt.otf");
}

.app-type-buttons-wrapper:first-child {
  margin-bottom: 5vw;
}

.app-type-buttons-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto;
      grid-template-columns: auto auto auto;
  -webkit-column-gap: 5vh;
          column-gap: 5vh;
  row-gap: 0.75vh;
}

.app-type-buttons-wrapper .btn {
  white-space: nowrap;
  font-size: 0.9vw;
}

.app-type-wrapper h2:nth-of-type(2) {
  margin-top: 10vh;
}

.app-type-heading {
  text-align: center;
  font-family: 'sourceSansPro-extraLight';
  font-size: 1vw;
  margin-bottom: 1.25vw;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .app-type-heading {
    font-size: 1.7vh;
  }
  .app-type-buttons-wrapper {
    margin-bottom: 8vh;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .app-type-buttons-wrapper .btn {
    margin-top: 0.5vh;
  }
}

@media screen and (max-width: 991px) {
  .app-type-heading {
    font-size: 1vw;
  }
}

@media screen and (max-width: 767px) {
  .app-type-buttons-wrapper {
    -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
    width: 75%;
    margin-inline: auto;
  }
  .app-type-buttons-wrapper .btn {
    font-size: 1.25vh;
    margin-inline: auto;
    margin-top: 2.5vh;
    display: block;
  }
  .app-type-wrapper {
    margin-top: 8vh;
  }
  .app-type-buttons-wrapper .btn {
    width: 100%;
    padding-top: 1.3vh;
    padding-bottom: 1.3vh;
    font-size: 1.25vh;
    margin-top: 2.5vh;
    display: block;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .app-type-buttons-wrapper .btn {
    font-size: 3vh;
  }
}

/* mixins */
/* variables */
/* mixins */
/* variables */
.body__core-page {
  background-image: url("https://static.slcket.com/web2022/assets/_Backgrounds/enter-background.png");
}

.body__core-page .page-wrapper {
  max-height: 100vh;
}

.bg-text {
  position: absolute;
  z-index: -1;
  top: 1vw;
  right: -4.5vw;
  width: 85%;
  height: 40vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.core-page-wrapper {
  height: 83.5vh;
  font-family: 'sourceSansPro-bold';
}

.core-page-wrapper .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-bottom: 0;
  padding-left: 3vw;
  padding-right: 3vw;
}

.core-page-left {
  width: 45%;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.core-page__bottom {
  margin-top: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: auto;
}

.core-page__bottom-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 0.35vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 0.75vw;
  cursor: pointer;
}

.core-page__bottom-item__usay {
  border: none;
}

.usay-text {
  position: absolute;
  color: #717171;
}

/*
.core-page__msg-bubble {
    position:relative;
    width: 4.75vw;
    margin: 0 0.35vw;
    border-radius: 50%;;
    border: 0.3vw solid $grey;
}

.core-page__msg-bubble:before,
.core-page__msg-bubble:after {
    content: "\0020";
    display: block;
    position: absolute;
    left: 14%;
    bottom: -1vw;
    transform: scaleY(-1);
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    border: solid 1.5vw transparent;
    border-top: 0;
    border-bottom-color: #131313;
}
.core-page__msg-bubble:before {
    bottom: -1.2vw;
    z-index:1;
    border-bottom-color: $grey;
}
*/
.core-page__bottom img {
  border: none;
  width: 3.8vw;
  height: 3.8vw;
  cursor: pointer;
}

/* I was thinking about creating this button using the
.core-page__bottom-item class above, but decided to make it its own class for more clarity */
.core-page-btn__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.05vw 2.75vw;
  border-radius: 10vw;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.4vh;
  margin-top: 1.8vh;
  margin-bottom: 5.5vh;
  margin-inline: auto;
  cursor: pointer;
}

.policies-wrapper {
  white-space: nowrap;
  position: relative;
  font-size: 0.65vw;
  letter-spacing: 0.08vw;
  text-align: center;
}

.policies-wrapper a {
  line-height: 1.5;
  color: #717171;
}

.policies-wrapper__mobile {
  display: none;
}

.home-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
  /* to more accurately position the text content */
  margin-right: 4vw;
}

.btn {
  line-height: 1;
  font-family: sa_triumphregular;
  padding: 0.35vw 0.35vw;
  border: 0.1vw solid white;
  margin-top: 0.8vw;
  font-size: 1.4vw;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
  letter-spacing: 0.1vw;
  text-align: center;
}

.btn__mobile {
  display: none;
}

.btn:hover {
  color: #e9222d;
  border-color: #e9222d;
}

.page-content-wrapper {
  margin-top: -14vh;
  width: 55%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.back-arrow {
  margin-left: -250%;
  height: 2vw;
  width: 2vw;
}

.next-arrow {
  margin-left: 250%;
  height: 2vw;
  width: 2vw;
}

.page-navigation {
  position: relative;
  margin-top: -5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page-navigation-app-name {
  margin-top: 25vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page-navigation-text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: 'sourceSansPro-Light';
  font-size: 0.85vw;
}

@media screen and (min-width: 992px) and (orientation: portrait) {
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-left: -3vw;
  }
  .home-text-wrapper {
    margin-top: 2vh;
    margin-right: 0;
  }
  .core-page__bottom {
    margin-top: 6.5vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 6vw;
    height: 6vw;
    font-size: 1.2vw;
  }
  .core-page__bottom img {
    width: 5.75vw;
    height: 5.75vw;
  }
  .core-page-btn__bottom {
    font-size: 1.2vw;
    padding: 1.25vw 3.5vw;
  }
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .bg-text {
    top: 2vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .core-page-wrapper .container {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .core-page__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: -2vw;
  }
  .core-page__bottom-item {
    width: 6.5vh;
    height: 6.5vh;
    font-size: 1.5vh;
  }
  .core-page__bottom img {
    width: 6.5vh;
    height: 6.5vh;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.5vh 3vh;
    border-radius: 10vw;
    border: 0.21vw solid #717171;
    color: #717171;
    font-size: 1.65vh;
    margin-inline: auto;
    cursor: pointer;
  }
  .home-text-wrapper {
    width: 100%;
    margin-top: 5vh;
    margin-left: 7.5vw;
  }
  .policies-wrapper {
    font-size: 1vh;
    margin-top: 1vh;
  }
  .policies-wrapper a {
    letter-spacing: 0.15vh;
  }
  .btn {
    margin-top: 1.6vh;
    border-width: 0.1vw;
    padding: 0.4vh 0.4vh;
    font-size: 1vw;
    letter-spacing: 0.2vh;
  }
}

@media screen and (max-width: 991px) {
  .home-text-wrapper {
    margin-top: 8vh;
  }
  .page-navigation {
    margin-top: 2vh;
  }
  .page-navigation-both {
    margin-top: 5vh;
  }
  .page-content-wrapper {
    margin-top: -19vh;
  }
  .page-navigation-text {
    font-size: 1.2vw;
  }
  .back-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    margin-left: 150%;
  }
  .bg-text {
    top: -10vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .body__core-page {
    min-height: 100vh;
  }
  .body__core-page .page-wrapper {
    max-height: 100%;
  }
  .core-page-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    margin-top: 6vw;
  }
  .core-page-wrapper .container {
    height: auto;
    padding: 0;
  }
  .core-page-left {
    margin-top: 5vh;
    margin-left: -5vw;
  }
  .core-page__bottom {
    margin-top: 6vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 4.75vw;
    height: 4.75vw;
    font-size: 0.9vw;
    border-width: 0.3vw;
  }
  .core-page__bottom img {
    width: 4.5vw;
    height: 4.5vw;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.1vw 2.85vw;
    border-radius: 10vw;
    border: 0.3vw solid #717171;
    color: #717171;
    font-size: 1.1vw;
  }
  .policies-wrapper {
    font-size: 0.7vw;
    margin-top: 0;
  }
  .policies-wrapper a {
    letter-spacing: 0.05vw;
  }
  .core-page-text-wrapper {
    margin-top: 1.5vw;
  }
  .btn {
    margin-top: 1.8vh;
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .home-text-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-top: 0;
  }
  .page-content-wrapper {
    margin-top: -4vh;
  }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
  .core-page-wrapper {
    padding-bottom: 10vh;
  }
}

@media screen and (max-width: 767px) {
  .page-navigation {
    margin-top: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-navigation-text {
    font-size: 1.7vw;
  }
  .page-navigation-both {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .back-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .next-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .body__core-page .page-wrapper {
    max-height: auto;
  }
  .page-content-wrapper {
    width: 100%;
    margin-top: 0;
  }
  .core-page-wrapper {
    height: auto;
  }
  .core-page-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .mobile-bottom-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .core-page-left {
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-top: 15vw;
    padding-bottom: 6.5vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .bg-text {
    display: none;
  }
  .core-page__bottom {
    display: none;
  }
  .policies-wrapper__mobile {
    font-size: 1.9vw;
    margin-top: 5vw;
    display: block;
    padding-bottom: 5vh;
  }
  .core-page-text-wrapper {
    display: none;
  }
  .btn {
    display: none;
  }
  .btn__mobile {
    font-size: 2.5vw;
    margin-inline: auto;
    margin-top: 25vw;
    display: block;
    padding: 1.1vw 2.25vw;
    letter-spacing: 0.25vw;
  }
  .policies-wrapper__mobile {
    margin-top: 17vw;
    font-size: 1.65vw;
  }
  .policies-wrapper__mobile a {
    letter-spacing: 0.15vw;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .page-content-wrapper {
    margin-top: 25vh;
  }
  .back-arrow {
    width: 7vh;
    height: 7vh;
  }
  .next-arrow {
    width: 7vh;
    height: 7vh;
  }
}

@media screen and (max-width: 479px) {
  .policies-wrapper__mobile {
    font-size: 2vw;
  }
  .btn__mobile {
    font-size: 3.25vw;
    margin-inline: auto;
    display: block;
    padding: 1.1vw 2.25vw;
  }
  .page-navigation-text {
    font-size: 2.2vw;
  }
  .back-arrow {
    width: 4vh;
    height: 4vh;
  }
  .next-arrow {
    width: 4vh;
    height: 4vh;
    margin-right: 0;
  }
}

/* mixins */
/* variables */
/* mixins */
/* variables */
.body__core-page {
  background-image: url("https://static.slcket.com/web2022/assets/_Backgrounds/enter-background.png");
}

.body__core-page .page-wrapper {
  max-height: 100vh;
}

.bg-text {
  position: absolute;
  z-index: -1;
  top: 1vw;
  right: -4.5vw;
  width: 85%;
  height: 40vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.core-page-wrapper {
  height: 83.5vh;
  font-family: 'sourceSansPro-bold';
}

.core-page-wrapper .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-bottom: 0;
  padding-left: 3vw;
  padding-right: 3vw;
}

.core-page-left {
  width: 45%;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.core-page__bottom {
  margin-top: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: auto;
}

.core-page__bottom-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 0.35vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 0.75vw;
  cursor: pointer;
}

.core-page__bottom-item__usay {
  border: none;
}

.usay-text {
  position: absolute;
  color: #717171;
}

/*
.core-page__msg-bubble {
    position:relative;
    width: 4.75vw;
    margin: 0 0.35vw;
    border-radius: 50%;;
    border: 0.3vw solid $grey;
}

.core-page__msg-bubble:before,
.core-page__msg-bubble:after {
    content: "\0020";
    display: block;
    position: absolute;
    left: 14%;
    bottom: -1vw;
    transform: scaleY(-1);
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    border: solid 1.5vw transparent;
    border-top: 0;
    border-bottom-color: #131313;
}
.core-page__msg-bubble:before {
    bottom: -1.2vw;
    z-index:1;
    border-bottom-color: $grey;
}
*/
.core-page__bottom img {
  border: none;
  width: 3.8vw;
  height: 3.8vw;
  cursor: pointer;
}

/* I was thinking about creating this button using the
.core-page__bottom-item class above, but decided to make it its own class for more clarity */
.core-page-btn__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.05vw 2.75vw;
  border-radius: 10vw;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.4vh;
  margin-top: 1.8vh;
  margin-bottom: 5.5vh;
  margin-inline: auto;
  cursor: pointer;
}

.policies-wrapper {
  white-space: nowrap;
  position: relative;
  font-size: 0.65vw;
  letter-spacing: 0.08vw;
  text-align: center;
}

.policies-wrapper a {
  line-height: 1.5;
  color: #717171;
}

.policies-wrapper__mobile {
  display: none;
}

.home-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
  /* to more accurately position the text content */
  margin-right: 4vw;
}

.btn {
  line-height: 1;
  font-family: sa_triumphregular;
  padding: 0.35vw 0.35vw;
  border: 0.1vw solid white;
  margin-top: 0.8vw;
  font-size: 1.4vw;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
  letter-spacing: 0.1vw;
  text-align: center;
}

.btn__mobile {
  display: none;
}

.btn:hover {
  color: #e9222d;
  border-color: #e9222d;
}

.page-content-wrapper {
  margin-top: -14vh;
  width: 55%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.back-arrow {
  margin-left: -250%;
  height: 2vw;
  width: 2vw;
}

.next-arrow {
  margin-left: 250%;
  height: 2vw;
  width: 2vw;
}

.page-navigation {
  position: relative;
  margin-top: -5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page-navigation-app-name {
  margin-top: 25vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page-navigation-text {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: 'sourceSansPro-Light';
  font-size: 0.85vw;
}

@media screen and (min-width: 992px) and (orientation: portrait) {
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-left: -3vw;
  }
  .home-text-wrapper {
    margin-top: 2vh;
    margin-right: 0;
  }
  .core-page__bottom {
    margin-top: 6.5vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 6vw;
    height: 6vw;
    font-size: 1.2vw;
  }
  .core-page__bottom img {
    width: 5.75vw;
    height: 5.75vw;
  }
  .core-page-btn__bottom {
    font-size: 1.2vw;
    padding: 1.25vw 3.5vw;
  }
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .bg-text {
    top: 2vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .core-page-wrapper .container {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .core-page__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: -2vw;
  }
  .core-page__bottom-item {
    width: 6.5vh;
    height: 6.5vh;
    font-size: 1.5vh;
  }
  .core-page__bottom img {
    width: 6.5vh;
    height: 6.5vh;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.5vh 3vh;
    border-radius: 10vw;
    border: 0.21vw solid #717171;
    color: #717171;
    font-size: 1.65vh;
    margin-inline: auto;
    cursor: pointer;
  }
  .home-text-wrapper {
    width: 100%;
    margin-top: 5vh;
    margin-left: 7.5vw;
  }
  .policies-wrapper {
    font-size: 1vh;
    margin-top: 1vh;
  }
  .policies-wrapper a {
    letter-spacing: 0.15vh;
  }
  .btn {
    margin-top: 1.6vh;
    border-width: 0.1vw;
    padding: 0.4vh 0.4vh;
    font-size: 1vw;
    letter-spacing: 0.2vh;
  }
}

@media screen and (max-width: 991px) {
  .home-text-wrapper {
    margin-top: 8vh;
  }
  .page-navigation {
    margin-top: 2vh;
  }
  .page-navigation-both {
    margin-top: 5vh;
  }
  .page-content-wrapper {
    margin-top: -19vh;
  }
  .page-navigation-text {
    font-size: 1.2vw;
  }
  .back-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    bottom: 20vh;
    width: 2.2vw;
    height: 2.2vw;
  }
  .next-arrow {
    margin-left: 150%;
  }
  .bg-text {
    top: -10vh;
    right: -4.5vw;
    width: 85%;
    height: 50vh;
  }
  .body__core-page {
    min-height: 100vh;
  }
  .body__core-page .page-wrapper {
    max-height: 100%;
  }
  .core-page-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    margin-top: 6vw;
  }
  .core-page-wrapper .container {
    height: auto;
    padding: 0;
  }
  .core-page-left {
    margin-top: 5vh;
    margin-left: -5vw;
  }
  .core-page__bottom {
    margin-top: 6vh;
    margin-right: 0;
  }
  .core-page__bottom-item {
    width: 4.75vw;
    height: 4.75vw;
    font-size: 0.9vw;
    border-width: 0.3vw;
  }
  .core-page__bottom img {
    width: 4.5vw;
    height: 4.5vw;
  }
  .core-page-btn__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1.1vw 2.85vw;
    border-radius: 10vw;
    border: 0.3vw solid #717171;
    color: #717171;
    font-size: 1.1vw;
  }
  .policies-wrapper {
    font-size: 0.7vw;
    margin-top: 0;
  }
  .policies-wrapper a {
    letter-spacing: 0.05vw;
  }
  .core-page-text-wrapper {
    margin-top: 1.5vw;
  }
  .btn {
    margin-top: 1.8vh;
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .home-text-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper {
    margin-top: 0;
  }
  .core-page-wrapper .container {
    height: auto;
  }
  .core-page-left {
    margin-top: 0;
  }
  .page-content-wrapper {
    margin-top: -4vh;
  }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
  .core-page-wrapper {
    padding-bottom: 10vh;
  }
}

@media screen and (max-width: 767px) {
  .page-navigation {
    margin-top: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-navigation-text {
    font-size: 1.7vw;
  }
  .page-navigation-both {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .back-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .next-arrow {
    height: 5vh;
    width: 5vh;
    margin: 0;
  }
  .body__core-page .page-wrapper {
    max-height: auto;
  }
  .page-content-wrapper {
    width: 100%;
    margin-top: 0;
  }
  .core-page-wrapper {
    height: auto;
  }
  .core-page-wrapper .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .mobile-bottom-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .core-page-left {
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-top: 15vw;
    padding-bottom: 6.5vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .bg-text {
    display: none;
  }
  .core-page__bottom {
    display: none;
  }
  .policies-wrapper__mobile {
    font-size: 1.9vw;
    margin-top: 5vw;
    display: block;
    padding-bottom: 5vh;
  }
  .core-page-text-wrapper {
    display: none;
  }
  .btn {
    display: none;
  }
  .btn__mobile {
    font-size: 2.5vw;
    margin-inline: auto;
    margin-top: 25vw;
    display: block;
    padding: 1.1vw 2.25vw;
    letter-spacing: 0.25vw;
  }
  .policies-wrapper__mobile {
    margin-top: 17vw;
    font-size: 1.65vw;
  }
  .policies-wrapper__mobile a {
    letter-spacing: 0.15vw;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .page-content-wrapper {
    margin-top: 25vh;
  }
  .back-arrow {
    width: 7vh;
    height: 7vh;
  }
  .next-arrow {
    width: 7vh;
    height: 7vh;
  }
}

@media screen and (max-width: 479px) {
  .policies-wrapper__mobile {
    font-size: 2vw;
  }
  .btn__mobile {
    font-size: 3.25vw;
    margin-inline: auto;
    display: block;
    padding: 1.1vw 2.25vw;
  }
  .page-navigation-text {
    font-size: 2.2vw;
  }
  .back-arrow {
    width: 4vh;
    height: 4vh;
  }
  .next-arrow {
    width: 4vh;
    height: 4vh;
    margin-right: 0;
  }
}


.app-type-buttons-wrapper:first-child {
  margin-bottom: 5vw;
}

.app-type-buttons-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto;
      grid-template-columns: auto auto auto;
  -webkit-column-gap: 5vh;
          column-gap: 5vh;
  row-gap: 0.75vh;
}

.app-type-buttons-wrapper .btn {
  white-space: nowrap;
  font-size: 0.9vw;
}

.app-type-wrapper h2:nth-of-type(2) {
  margin-top: 10vh;
}

.app-type-heading {
  text-align: center;
  font-family: 'sourceSansPro-extraLight';
  font-size: 1vw;
  margin-bottom: 1.25vw;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .app-type-heading {
    font-size: 1.7vh;
  }
  .app-type-buttons-wrapper {
    margin-bottom: 8vh;
  }
}

@media screen and (max-width: 991px) and (orientation: portrait) {
  .app-type-buttons-wrapper .btn {
    margin-top: 0.5vh;
  }
}

@media screen and (max-width: 991px) {
  .app-type-heading {
    font-size: 1vw;
  }
}

@media screen and (max-width: 767px) {
  .app-type-buttons-wrapper {
    -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
    width: 75%;
    margin-inline: auto;
  }
  .app-type-buttons-wrapper .btn {
    font-size: 1.25vh;
    margin-inline: auto;
    margin-top: 2.5vh;
    display: block;
  }
  .app-type-wrapper {
    margin-top: 8vh;
  }
  .app-type-buttons-wrapper .btn {
    width: 100%;
    padding-top: 1.3vh;
    padding-bottom: 1.3vh;
    font-size: 1.25vh;
    margin-top: 2.5vh;
    display: block;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .app-type-buttons-wrapper .btn {
    font-size: 3vh;
  }
}

.select-features-wrapper {
  margin-top: 0vh;
}

.select-features-buttons-wrapper:first-child {
  margin-bottom: 5vw;
}

.select-features-buttons-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto auto;
      grid-template-columns: auto auto auto auto;
  -webkit-column-gap: 3.25vh;
          column-gap: 3.25vh;
  row-gap: 0.75vh;
}

.select-features-buttons-wrapper .btn {
  font-size: 0.75vw;
  white-space: nowrap;
}

.btn-red {
  border-color: #e9222d;
  color: #e9222d;
}

.select-features-wrapper h2:nth-of-type(2) {
  margin-top: 10vh;
}

.app-type-heading {
  text-align: center;
  font-family: 'sourceSansPro-extraLight';
  font-size: 2vh;
  margin-bottom: 1.25vw;
}

@media screen and (max-width: 991px) {
  .select-features-wrapper h2:nth-of-type(2) {
    margin-top: 3vh;
  }
  .app-type-heading {
    font-size: 1.15vw;
  }
  .select-features-buttons-wrapper {
    -webkit-column-gap: 2.25vh;
            column-gap: 2.25vh;
    row-gap: 0vh;
  }
  .select-features-buttons-wrapper .btn {
    margin-top: 1.1vh;
  }
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .app-type-heading {
    font-size: 1.7vh;
  }
  .select-features-buttons-wrapper {
    margin-bottom: 8vh;
  }
}

@media screen and (max-width: 767px) {
  .app-type-heading {
    font-size: 2vh;
  }
  .select-features-wrapper {
    margin-top: 10vh;
  }
  .select-features-buttons-wrapper {
    -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
    width: 65%;
    margin-inline: auto;
  }
  .select-features-buttons-wrapper .btn {
    font-size: 1.25vh;
    margin-inline: auto;
    margin-top: 2.5vh;
    display: block;
  }
  .app-type-wrapper {
    margin-top: 8vh;
  }
  .select-features-buttons-wrapper .btn {
    width: 100%;
    padding-top: 1.3vh;
    padding-bottom: 1.3vh;
    font-size: 1.25vh;
    margin-top: 2.5vh;
    display: block;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .app-type-heading {
    font-size: 4vh;
  }
}

@media screen and (max-width: 479px) {
  .select-features-buttons-wrapper {
    width: 75%;
  }
}

.select-plan-wrapper {
  margin-top: 10vh;
}

.select-plan-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20vw 10vw 10vw 10vw;
      grid-template-columns: 20vw 10vw 10vw 10vw;
  -webkit-column-gap: 0;
          column-gap: 0;
  row-gap: 0;
}

.grid-label {
  font-size: 0.9vw;
}

.grid-text {
  font-size: 0.9vw;
  font-family: 'sourceSansPro-extraLight';
}

.grid-text__disclaimer {
  line-height: 1.5;
  font-size: 0.7vw;
  color: #717171;
  font-family: 'sourceSansPro-Light';
  text-align: left;
}

.select-plan__grid-item {
  text-align: center;
  padding: 1.3vh 0.5vh;
  min-width: 12vh;
}

.select-plan__grid-item-red {
  text-align: center;
  padding: 1.3vh 0.5vh;
  outline: 0.01vh solid #e9222c91;
}

.btn-grid {
  font-size: 1.1vw;
}

.page-navigation-both__select-plan {
  margin-top: 15vh;
}

@media screen and (max-width: 991px) {
  .select-plan__grid-item {
    min-width: auto;
  }
  .grid-label {
    font-size: 1.1vw;
  }
  .grid-text {
    font-size: 1.1vw;
  }
  .grid-text__disclaimer {
    font-size: 0.8vw;
  }
}

@media screen and (max-width: 767px) {
  .select-plan-grid {
    -ms-grid-columns: 35vw 17.5vw 17.5vw 17.5vw;
        grid-template-columns: 35vw 17.5vw 17.5vw 17.5vw;
  }
  .select-plan-wrapper {
    margin-top: 10vh;
  }
  .btn-grid {
    display: block;
  }
  .grid-label {
    font-size: 1.55vw;
  }
  .grid-text {
    font-size: 1.55vw;
  }
  .grid-text__disclaimer {
    font-size: 1.15vw;
  }
  .btn-grid {
    margin-top: -1.5vh;
    font-size: 2.25vw;
  }
}

@media screen and (max-width: 479px) {
  .grid-label {
    font-size: 2.3vw;
  }
  .grid-text {
    font-size: 2.3vw;
  }
  .grid-text__disclaimer {
    font-size: 1.6vw;
  }
}

.check-white {
  margin-top: 0.5vh;
  margin-right: 0.5vw;
  -o-object-fit: cover;
     object-fit: cover;
  font-size: 0.55vw;
  min-width: 1vw;
  min-height: 1vw;
  max-width: 1vw;
  max-height: 1vw;
  border: 0.1vw solid white;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn-grid-red {
  border-color: #e9222d;
  color: #e9222d;
}

.custom-pro-attributes-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 3.5vh;
  margin-inline: auto;
}

.grid-text-bottom {
  margin: 0.75vh 0;
  font-size: 0.7vw;
  font-family: 'sourceSansPro-extraLight';
}

.grid-text-bottom-grey {
  color: #717171;
}

.page-navigation-both__custom-pro {
  margin-top: 6vh;
}

@media screen and (max-width: 991px) {
  .grid-text-bottom {
    font-size: 1.1vw;
  }
}

@media screen and (max-width: 767px) {
  .check-white {
    margin-top: 0.7vh;
  }
  .grid-text-bottom {
    font-size: 1.55vw;
  }
}

@media screen and (max-width: 479px) {
  .custom-pro-attributes-wrapper {
    margin-top: 1vh;
  }
  .grid-text-bottom {
    font-size: 2vw;
  }
}

.app-name-wrapper {
  margin-top: 15vh;
  text-align: center;
}

.app-name-wrapper > h2 {
  font-family: 'sourceSansPro-extraLight';
  font-size: 1.45vw;
}

.app-name-wrapper > input {
  width: 80%;
  background: transparent;
  font-size: 1.4vw;
  outline: none;
  border: none;
  border-bottom: 0.32vh solid #717171;
  margin-top: 14vh;
  margin-bottom: 10vh;
}

.app-name-wrapper > p {
  font-size: 0.95vw;
}

.blue-text {
  color: #4e81c4;
}

@media screen and (max-width: 991px) {
  .app-name-wrapper h2 {
    font-size: 1.8vw;
  }
  .app-name-wrapper p {
    font-size: 1.1vw;
  }
  .app-name-wrapper input {
    font-size: 1.75vw;
  }
  .page-navigation-app-name .next-arrow {
    margin: 0;
    width: 3vw;
    height: 3vw;
  }
}

@media screen and (max-width: 767px) {
  .app-name-wrapper {
    margin-top: 15vh;
  }
  .app-name-wrapper h2 {
    font-size: 3vw;
  }
  .app-name-wrapper p {
    font-size: 1.8vw;
  }
  .app-name-wrapper input {
    margin-top: 17vh;
    margin-bottom: 13vh;
    font-size: 3vw;
  }
  .page-navigation-app-name .next-arrow {
    margin: 0;
    width: 5vw;
    height: 5vw;
  }
}

@media screen and (max-width: 479px) {
  .app-name-wrapper {
    margin-top: 10vh;
  }
  .app-name-wrapper h2 {
    font-size: 3.5vw;
  }
  .app-name-wrapper p {
    font-size: 1.9vw;
  }
  .app-name-wrapper input {
    margin-top: 13vh;
    margin-bottom: 10vh;
    font-size: 3.5vw;
  }
  .page-navigation-app-name .next-arrow {
    margin: 0;
    width: 7vw;
    height: 7vw;
  }
}

.body__app-creation {
  background-image: url("../assets/_Creation-Process/cs-bg.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  font-family: 'sourceSansPro-regular';
}

.app-creation-page {
  position: relative;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.left-frame {
  width: 35vw;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.left-frame-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 12vh;
}

.controls-btn-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.05vw 4.25vw;
  border-radius: 10vw;
  border: 0.21vw solid #baacb6;
  color: #baacb6;
  font-size: 0.77vw;
  margin-top: 1.8vh;
  margin-bottom: 5.5vh;
  margin-inline: auto;
  cursor: pointer;
}

.control-button {
  width: 3vw;
  height: 3vw;
  margin: 0 0.5vw;
}

.insert-title-img {
  margin-top: 7vh;
  margin-bottom: 10vh;
  width: 9vw;
}

.right-frame {
  position: relative;
  padding-top: 13vh;
  width: 65vw;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}

.choose-skin-ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 1.5vw;
}

.choose-skin-img {
  cursor: pointer;
  border-radius: 50%;
  width: 3.5vw;
  height: 3.5vw;
}

.creation-semicircle {
  position: absolute;
  top: -92vh;
  left: -50%;
  width: 200%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.creation-semicircle span {
  line-height: 8vh;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: white;
  font-size: 1.3vw;
}

.app-creation-text {
  font-family: 'sourceSansPro-light';
  font-weight: 300;
  font-size: 1vw;
  text-align: center;
  margin-bottom: 3.75vh;
}

.app-creation-text__margin-none {
  margin-bottom: 0;
}

.app-creation-text__regular {
  font-family: 'sourceSansPro-regular';
  font-size: 1vw;
}

.app-creation-row {
  padding: 0 5vw;
  margin-top: 6vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.app-creation-row__center {
  padding: 0 5vw;
  margin-top: 6vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.choose-options-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.choose-options-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

input[type="file"] {
  display: none;
}

/* height & width of upload-file-btn must match upload-file-btn label */
.upload-file-btn {
  height: 1.75vw;
  width: 11vw;
}

.upload-file-btn label {
  cursor: pointer;
  position: absolute;
  background-color: #00ccff;
  height: 1.75vw;
  width: 11vw;
  font-size: 1vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 2vw;
}

.or {
  font-size: 1vw;
  margin: 0 1.5vw;
}

.plus {
  font-size: 1.7vw;
  font-weight: bold;
}

.header-color-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.color-selectable {
  cursor: pointer;
  margin: 0 0.5vw;
  display: inline-block;
  height: 2vw;
  width: 2vw;
  border-radius: 50%;
}

.color-selectable-long {
  width: 3.5vw;
  border-radius: 3.5vw;
}

.color-selectable-black {
  background-color: black;
  border: 0.2vw solid white;
}

.color-selectable-white {
  background-color: white;
}

.color-selectable-orange {
  background-color: #bc4012;
}

.color-selectable-purple {
  background-color: #7000a4;
}

.color-selectable-green {
  background-color: #269a5e;
}

.color-selectable-cyan {
  background-color: #269ca3;
}

.color-selectable-blue {
  background-color: #0c2a8c;
}

.color-selectable-red-orange {
  background-color: #c30;
}

.color-selectable-hot-pink {
  background-color: #906;
}

.color-selectable-pink {
  background-color: #f240a1;
}

.color-selectable-red {
  background-color: #ed2027;
}

.choose-font-wrapper {
  margin-top: 6vh;
  padding: 0 2.75vw;
}

.choose-font-ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 1.5vw;
}

.choose-font-ul {
  font-size: 1.4vw;
}

.choose-app-button-color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.device-view {
  margin-inline: 1vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.device-view img {
  cursor: pointer;
  margin-bottom: 1vw;
  height: 4vh;
}

.left-arrow {
  cursor: pointer;
  position: absolute;
  width: 1.85vw;
  bottom: 7.5vh;
  left: 3vw;
}

.right-arrow {
  cursor: pointer;
  position: absolute;
  width: 1.85vw;
  bottom: 7.5vh;
  right: 3vw;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}

#pen {
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
}

/* mixins */
/* variables */
/* mixins */
/* variables */
.core-page-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wheel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
}

.wheel-outer {
  position: relative;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  border: 1.7vw solid #717171;
}

.wheel-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1.05vw solid #717171;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.circle-link {
  position: absolute;
  background-color: black;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  border: 0.21vw solid #717171;
  color: #717171;
  font-size: 1.2vw;
  font-family: 'sourceSansPro-bold';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-transition: color 350ms, border-color 350ms;
  transition: color 350ms, border-color 350ms;
}

.circle-link:hover {
  color: #e9222d;
  border-color: #e9222d;
}

#circle-link-1 {
  top: -4.5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-2 {
  right: -0.3vw;
  top: 0;
}

#circle-link-3 {
  right: -4.5vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-4 {
  right: -0.3vw;
  bottom: -0;
}

#circle-link-5 {
  bottom: -4.5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-6 {
  left: -4,5vw;
  bottom: -0vw;
}

#circle-link-7 {
  left: -4.5vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-8 {
  left: -0.3vw;
  top: 0vw;
}

@media screen and (min-width: 992px) and (orientation: landscape) {
  .wheel {
    margin-right: auto;
  }
  .wheel-outer {
    width: 40vh;
    height: 40vh;
    border-width: 2.4vh;
  }
  .wheel-inner {
    width: 25vh;
    height: 25vh;
    border-width: 1.2vh;
  }
  .circle-link {
    width: 9.5vh;
    height: 9.5vh;
    font-size: 1.25vh;
    border-width: 0.21vw;
  }
  #circle-link-1 {
    top: -5.85vh;
  }
  #circle-link-2 {
    right: -0.6vh;
    top: -0.6vh;
  }
  #circle-link-3 {
    right: -5.85vh;
  }
  #circle-link-4 {
    right: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-5 {
    bottom: -5.85vh;
  }
  #circle-link-6 {
    left: -0.6vh;
    bottom: -0.6vh;
  }
  #circle-link-7 {
    left: -5.85vh;
  }
  #circle-link-8 {
    left: -0.6vh;
    top: -0.6vh;
  }
}

@media screen and (max-width: 991px) {
  .wheel-outer {
    width: 23vw;
    height: 23vw;
    border: 1.5vw solid #717171;
  }
  .wheel-inner {
    border: 0.8vw solid #717171;
    width: 14.5vw;
    height: 14.5vw;
  }
  .circle-link {
    width: 5.25vw;
    height: 5.25vw;
    border-width: 0.3vw;
    font-size: 0.75vw;
  }
  #circle-link-1 {
    top: -3.25vw;
    left: 50%;
  }
  #circle-link-2 {
    right: -0.75vw;
    top: -0.75vw;
  }
  #circle-link-3 {
    right: -3.25vw;
    top: 50%;
  }
  #circle-link-4 {
    right: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-5 {
    bottom: -3.25vw;
    left: 50%;
  }
  #circle-link-6 {
    left: -0.75vw;
    bottom: -0.75vw;
  }
  #circle-link-7 {
    left: -3.25vw;
    top: 50%;
  }
  #circle-link-8 {
    left: -0.75vw;
    top: -0.75vw;
  }

}

@media screen and (max-width: 767px) {
  .wheel {
    margin-top: 10vw;
    margin-bottom: 0;
  }
  .wheel-outer {
    width: 65vw;
    height: 65vw;
    border-width: 3.8vw;
  }
  .wheel-inner {
    width: 41vw;
    height: 41vw;
    border-width: 2.2vw;
  }
  .circle-link {
    border-width: 0.5vw;
    font-size: 2.2vw;
    width: 17vw;
    height: 17vw;
  }
  #circle-link-1 {
    top: -11.5vw;
  }
  #circle-link-2 {
    right: -3vw;
    top: -2vw;
  }
  #circle-link-3 {
    right: -11.5vw;
  }
  #circle-link-4 {
    right: -3vw;
    bottom: -2vw;
  }
  #circle-link-5 {
    bottom: -11.5vw;
  }
  #circle-link-6 {
    left: -3vw;
    bottom: -2vw;
  }
  #circle-link-7 {
    left: -11.5vw;
  }
  #circle-link-8 {
    left: -3vw;
    top: -2vw;
  }
}

@media screen and (max-width: 479px) {
  .circle-link {
    border-width: 0.65vw;
  }
}

.wheel-outer__creation {
  position: relative;
  width: 18.5vw;
  height: 18.5vw;
  border: 1.152vw solid #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wheel-inner__creation {
  width: 11.25vw;
  height: 11.25vw;
  border: 1vw solid #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wheel-creation-text {
  text-align: center;
  font-size: 1.4vw;
}

.circle-link__creation {
  position: absolute;
  width: 4.4vw;
  height: 4.4vw;
  background-color: #e9222d;
  border-radius: 50%;
}

#circle-link-creation-1 {
  top: -2.7vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-creation-2 {
  top: 0;
  right: -0.5vw;
}

#circle-link-creation-3 {
  right: -3.35vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-creation-4 {
  bottom: 0;
  right: -0.5vw;
}

#circle-link-creation-5 {
  bottom: -3.35vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

#circle-link-creation-6 {
  bottom: 0;
  left: -0.5vw;
}

#circle-link-creation-7 {
  left: -2.7vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#circle-link-creation-8 {
  top: 0;
  left: -0.5vw;
}

#nav-icon2 {
  position: absolute;
  height: 3vh;
  top: 3.5vh;
  left: 1.8vw;
  width: 4vh;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 0.6vh;
  width: 50%;
  background: white;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 1vh 1vh 0;
}

#nav-icon2 span:nth-child(odd) {
  left: 0;
  border-radius: 1vh 0 0 1vh;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 1.5vh;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 3vh;
}

#nav-icon2.open span:nth-child(1), #nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2), #nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
  left: 0.15vw;
  top: 0.75vh;
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 0.35vw);
  top: 0.75vh;
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 0.15vw;
  top: 1.8vh;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 0.35vw);
  top: 1.8vh;
}

/* styling below is for general structure and */
* {
  line-height: 1;
  margin: 0;
  padding: 0;
  color: white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

p {
  font-family: 'sourceSansPro-light';
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

.page-wrapper {
  width: 100%;
  position: relative;
  margin: auto;
}

body {
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: 90vw;
  padding: 3vh 5vw;
  margin: auto;
}