html {
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #404040;
}
::-ms-reveal {
  display: none;
}

input:focus,
button:focus {
  outline-style: solid;
  outline-color: slategray;
}

body {
  overflow: hidden;
  overflow-y: auto;
}

body.preload {
  
  background-image:  repeating-linear-gradient(45deg, #171936 25%, transparent 25%, transparent 75%, #171936 75%, #171936), repeating-linear-gradient(45deg, #171936 25%, #1E205D 25%, #1E205D 75%, #171936 75%, #171936);
  background-position: 0 0, 0.5vmin 0.5vmin;
  background-size: 1vmin 1vmin;
  overflow:hidden;
}

body.preload:before {
  width:100vw;
  height:100vh;
  content:'';
  position:absolute;
  background:black;
  animation: bwToColor 1s ease-in-out infinite alternate;
}

@keyframes bwToColor {
  0% {
   opacity:0.3;
  }

  100% {
   opacity:0;
  }
}



body.preload div {
  transition:none !important;
  opacity: 0 !important;
}

body p,
.msg,
#nav-bar,
#demo-nav-bar {
  font-size: clamp(16px, 2vw, 1.8rem);
}

/*
#nav-bar {
    font-size: clamp(12pt, 1.1vw, 1.7rem);
}
*/

#comfy-logo,
.title h1,
.title h1::before {
  font-size: clamp(54px, 7vw, 12.8rem);
}

#bg-headline .tagline {
  font-size: clamp(18px, 2.2vw, 4rem);
}

#bg-headline .btn-groups button {
  font-size: clamp(16px, 1.2vw, 2.2rem);
}

.btn-main {
  padding: clamp(14px, 1.2vw, 1.5rem) clamp(20px, 5vw, 9.1rem);
}

.form-close {
  font-size: clamp(18px, 2.2vw, 2.1rem);
}

.form-group .input-wrapper input,
.form-group .input-wrapper label.placeholder {
  font-family: Roboto;
  font-weight: 500 !important;
  font-size: clamp(16px, 1.4vw, 2rem);
}

.flipped {
  transform: perspective(900px) rotateY(20deg);
}

.error-message {
  background: red;
  color: white;
  font-weight: bold;
}

.alert-success {
  background: green;
  color: white;
  font-weight: bold;
}

.btn-main {
  font-family: "Inter", sans-serif;
  cursor: pointer;
  border: 1px solid #c1401c;
  background: #c1401c;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;
}

.btn-main:hover {
  background: #ad3318;
}

.btn-textOnly {
  color: #282e6d;
  font-weight: bold;
  font-size: 11pt;
  padding: 12pt 9pt;
  border-radius: 20pt;
  align-self: flex-start;
  background: transparent;
  border-color: transparent;
}

.btn-textOnly:hover {
  background: #eaecff;
  transition: all 0.5s ease;
  cursor: pointer;
}

.status-message {
  padding: 8pt;
  display: flex;
  align-items: center;
}

.status-message.error {
  background: #faeaeb;
}
.status-message.error * {
  color: #cc0000;
  display: flex;
  align-items: center;
}

.status-message.error .icon {
  font-weight: bold;
  font-size: 1.5rem;
  padding: 2pt 4pt;
  border-radius: 50%;
  background: #cc0000;
  color: white;
  margin-right: 5pt;
}

.status-message.error .msg {
}

.status-message.success {
  background: lightgreen;
}

.status-message.info {
  background: lightskyblue;
}
.status-message .msg {
  font-size: 11pt;
}

/* THE MODAL + SPINNER */
#modal {
  position: fixed;
  width: 100vw;
  height: max(650px, 100dvh);
  background: #020023;
  opacity: 0;
  z-index: -3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 110, 141, 0.9);
  display: none;
}

#app-wrapper:not(.active),
#demo-wrapper:not(.active) {
  display: none;
  pointer-events: none;
}

#modal.active {
  z-index: 999;
}

.fixed-scrollbar {
  position: fixed;
  right: 20px;
  width: 10px;
  height: 200px;
  background-color: #ccc;
  cursor: pointer;
  pointer-events: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.scroll-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Match scrollbar width */
  height: 30px;
  /* Adjust button height */
  background-color: #999;
  cursor: grab;
}

/* generic, multipurpose responsive grid divs */
.gbox {
  display: flex;
  margin-bottom: 2.5rem; /*make this clamp*/
}

.gbox.column {
  flex-direction: column;
}

.gbox img {
  height: auto;
  object-fit: cover;
}

.gbox > * {
  flex-grow: 1;
}

.gbox .w40 {
  width: 40%;
}

.gbox .highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1401c;
  padding: 1.5vw; /* turn this into clamp */
}

.gbox P {
  font-family: "Inter";
  line-height: 1.7;
  margin-bottom: 2rem;
}

.gbox .highlight p {
  color: white;
}

.gbox h1 {
  font-family: "Solitreo";
  font-size: clamp(24px, 2.5vw, 4rem);
  margin-bottom: 1rem;
}
.login-arrow {
  pointer-events: none;
  transform: rotate(90deg) scale(0.6);
  font-weight: bold;
}

#splash-panel * {
  user-select: none;
}

#bg-main {
  width: 100vw;
  /*height: max(650px, 100dvh);*/
  background-image: url("https://cdn.comfycms.com/web-assets/img/mosaic-splash-min.jpg");
  background-size: cover;
  position: absolute;
  background-position-y: -10vh;
  background-position-x: 1vw;
  overflow: hidden;
}

#bg-main.active {
  height: 100dvh;
  overflow: hidden;
  overflow-y: auto;
}

#bg-main.active #splash-canvas {
  display: none; /*hide the forms */
}

#nav-bar {
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  right: 0;
  background: black;
  width: 100vw;
  justify-content: flex-end;
  transition: all 0.2s ease;
  z-index: 2;
  pointer-events: auto;
  overflow: hidden;
  height: clamp(60px, 6.4rem, 3.5vw);
}

/*
#nav-bar.active {
    overflow: hidden;
}
*/

#nav-bar.active::before,
#demo-nav-bar.active::before {
  content: "";
  position: absolute;
  left: -50%;
  height: 3px;
  width: 40%;
  background-color: #e95b26;
  -webkit-animation: lineAnim 1s linear infinite;
  -moz-animation: lineAnim 1s linear infinite;
  animation: lineAnim 1s linear infinite;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  top: 0;
  z-index: 2;
}

@keyframes lineAnim {
  0% {
    left: -40%;
  }

  50% {
    left: 20%;
    width: 80%;
  }

  100% {
    left: 100%;
    width: 100%;
  }
}

#nav-bar * {
  color: #61b1d4;
}

#nav-bar.preload {
  pointer-events: none;
  margin-top: -12vh;
}

#nav-bar div,
#demo-nav-bar div {
  /*padding: 1vw 1.5vw;*/
  /* padding: clamp(25px, 1.8rem, 1vw) clamp(10px, 2.5rem, 1.5vw);*/
  cursor: pointer;
  transition: all 0.2s ease;
  padding: clamp(10px, 2.5rem, 1.5vw) clamp(10px, 2.5rem, 1.5vw);
  display: flex;
  align-items: center;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  /* apply hover visuals only on devices that support hover! (NOT touch)*/
  #nav-bar div:not(.active):not(.form-close):hover {
    color: orange;
    transform: translateY(-0.05vw);
  }

  #nav-bar div.splash-btn.continue:not(.active):hover {
    background: rgb(33, 153, 33);
    color: white;
  }
}

#nav-bar div.active {
  color: white;
  background: #c1401c;
}

#nav-bar div.splash-btn.continue {
  color: lightgreen;
}

#nav-bar div.inactive {
  color: #2f4751;
}

#bg-headline {
  width: 50vw;
  position: relative;
  padding-left: 3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: max(600px, calc(100dvh - clamp(60px, 6.4rem, 3.5vw) - 10vh));
}

#bg-headline.login {
  transform: translateX(40vw) scale(0.7);
  transition: all 0.3s ease;
}

#bg-headline.login .tagline,
#bg-headline.login .tagline * {
  color: white !important;
}

#bg-headline .title .icon {
  color: white;
  /*font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;*/
  margin-right: 0.5vw;
}

#comfy-logo {
  /*animation: glow 1.5s ease-in-out infinite alternate;*/
  font-weight: bold;
  text-shadow: 0 0 20px #fff, 0 0 30px gray, 0 0 40px gray, 0 0 50px gray,
    0 0 60px gray, 0 0 70px gray, 0 0 80px gray;
  -ms-high-contrast-adjust: none;
}

#comfy-logo::before {
  position: relative;
  content: ".";
  background: white;
  width: 0.2em;
  height: 0.2em;
  left: 0.6em;
  display: inline-block;
  color: transparent;
  top: 0.4em;
  text-shadow: none;
}

#bg-headline .title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#bg-headline.preload {
  opacity: 0;
}

#bg-headline .title .text {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-stretch: normal;
  font-optical-sizing: auto;
  opacity: 1;
  line-height: initial;
  color: white;
  transform-style: preserve-3d;
  display: flex;
}

#bg-headline .title .text::before {
  content: "ComfyCMS";
  position: absolute;
  margin: 0;
  padding: 0;
  color: #c1401c;
  margin-top: 0.2vw;
  margin-left: 0.25vw;
  transform: translateZ(-1px);
}

#tm {
  font-family: Arial;
  font-size: 3vw;
  align-self: flex-start;
  margin-left: -0.5vw;
  color: white;
}

#bg-headline .tagline {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-optical-sizing: auto;
  opacity: 1;
  line-height: initial;
  color: #61b1d4;
  margin-left: 7.8vw;
  margin-top: 1.5vw;
  line-height: 1.5;
}

#bg-headline .tagline .client {
  color: orange;
  font-weight: 500;
}

#bg-headline .btn-groups {
  margin-left: 7vw;
  margin-top: 2vw;
  display: flex;
}

#bg-headline .btn-groups button {
  margin-left: 1vw;
}

#man-laptop,
#lady-phone {
  bottom: 0;
  overflow: hidden;
}

#man-laptop img,
#lady-phone img {
  width: 100%;
  margin-bottom: -0.3rem;
}

#man-laptop {
  width: 45vw;
  position: absolute;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

#lady-phone {
  width: 35vw;
  position: absolute;
  right: 20vw;
  z-index: 3;
  pointer-events: none;
  transform: rotateY(180deg);
}

#lady-phone.hide,
#man-laptop.hide,
#hovering-glyphs.hide,
#bg-headline .btn-groups.hide,
#form-login.hide,
#form-signup.hide,
#form-forgot-password.hide,
#form-not-found.hide {
  transition: all 0.2s ease-out;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

#bg-headline.hide,
#bg-main.hide,
#bg-hero.hide,
#articles.hide,
#articles article.hide,
#bottom-bar.hide,
#bottom-bar .benefits.hide {
  display: none;
}

.fixed-scrollbar.hide {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.for-the-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge, and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#hovering-glyphs {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  padding-top: 4vw;
  width: 60vw;
  height: 60vh;
  padding-left: 4vw;
}

#hovering-glyphs .icon-wrapper {
  position: absolute;
}

#hovering-glyphs .icon {
  will-change: transform;
  color: white;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #b0a6a7, 0 0 40px #b0a6a7,
    0 0 50px #b0a6a7, 0 0 60px #b0a6a7, 0 0 70px #b0a6a7;
}

#hovering-glyphs #man1 {
  animation: techbounce 15s infinite ease-in-out;
  margin-left: 35.1vw;
  bottom: 7vw;
}

#hovering-glyphs #man2 {
  animation: techbounce 12.5s infinite ease-in-out;
  margin-left: 32.2vw;
  bottom: 15vw;
}

#hovering-glyphs #man3 {
  animation: techbounce 10s infinite ease-in-out;
  margin-left: 29.5vw;
  bottom: 16.5vw;
}

#hovering-glyphs #woman1 {
  animation: techbounce 12s infinite ease-in-out;
  margin-left: 20vw;
  bottom: 13vw;
}

#hovering-glyphs #man1 .icon {
  font-size: 9vw;
}

#hovering-glyphs #man2 .icon {
  font-size: 3.4vw;
}

#hovering-glyphs #man3 .icon {
  font-size: 2vw;
}

#hovering-glyphs #woman1 .icon {
  font-size: 6.5vw;
}

#lady-phone.fade-out,
#man-laptop.fade-out,
#hovering-glyphs.fade-out,
#bg-headline.fade-out,
#bottom-bar.fade-out {
  opacity: 0;
  z-index: -1;
}

#bg-animate {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  pointer-events: none;
}

#splash-canvas {
  width: 100vw;
  height: calc(max(650px, 100dvh) - clamp(60px, 6.4rem, 3.5vw) - 10vh);
  z-index: -2;
  background: transparent;
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0;
  overflow: hidden;
  display: none;
}

#splash-canvas.active {
  z-index: 1;
  opacity: 1;
  top: clamp(60px, 6.4rem, 3.5vw);
  display: flex;
}

#bottom-bar {
  height: 10vh;
  width: 100vw;
  background: #010012;
  transition: all 0.2s ease;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10vw;
  position: relative;
  overflow: hidden;
}

#bottom-bar.preload {
  transform: translateY(10vh);
  pointer-events: none;
}

#bottom-bar .benefits.reasons {
  color: white;
  font-size: 1.1vw;
  font-family: "Solitreo", cursive;
  font-weight: bold;
  background: transparent;
  /*
    width: 18vw;
    position: absolute;
    margin-left: 9vw;
    margin-top: 0.2vw;
    */
}

/*
#bottom-bar .benefits.reasons.activate {
    animation: benefitsReasons 0.5s ease-out forwards
}
    */

#bottom-bar .benefits {
  height: 100%;
  background: #010012;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.5s ease-out;
  /*
    position: absolute;
    margin-left: 22.5vw;
    */
}

.benefits.icon-wrapper {
  margin: 0 0.7vw 0 1.4vw;
}

#bottom-bar .benefits.entering,
#bottom-bar .benefits.exiting {
  /* margin-left: 25.5vw;
    transform: translateX(50vw);   
    */
  opacity: 0;
}

#bottom-bar .benefits span {
  color: white;
  font-size: 2vw;
}

#bottom-bar .benefits .text {
  font-family: "Solitreo", cursive;
  margin-top: 0.8vw;
}

#bottom-bar .benefits.entering.enter,
#bottom-bar .benefits.exiting.enter {
  transform: translateX(0);
  opacity: 1;
  order: 2;
}

#bottom-bar .benefits.entering.exit,
#bottom-bar .benefits.exiting.exit {
  transform: translateX(50vw);
  opacity: 0;
  order: 3;
}

#bottom-bar .benefits .icon {
  transition: all 0.5s ease;
  transform: rotateY(0deg);
  font-size: 2.5vw;
}

#bottom-bar .benefits .icon {
  color: limegreen;
}

#bottom-bar .benefits.fadeOut {
  opacity: 0;
}

#bottom-bar .benefits.activate .icon {
  transform: rotateY(360deg);
  font-variation-settings: "wght" 600;
}

.ball {
  position: absolute;
  border-radius: 30%;
  opacity: 0.5;
}
@keyframes techbounce {

    0%,
    30%,
    70%,
    100% {
        transform: translateY(-0.5vw);

    }

    20%,
    50%,
    85% {
        transform: translateY(0);
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #b0a6a7, 0 0 40px #b0a6a7, 0 0 50px #b0a6a7, 0 0 60px #b0a6a7, 0 0 70px #b0a6a7;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px gray, 0 0 40px gray, 0 0 50px gray, 0 0 60px gray, 0 0 70px gray, 0 0 80px gray;
    }
}

@keyframes benefitsReasons {
    0% {
        transform: translateY(5vw) scale(1.75);
    }

    50% {
        transform: translateY(-2vw) scale(1.5);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}/*
@media only screen and (max-height: 600px) and (max-width:900px){
    #bg-headline .tagline,
    #splash-panel #bg-headline .btn-groups,
    #man-laptop,
    #lady-phone,
    #hovering-glyphs,
    #bottom-bar,
    #nav-bar {
        display: none;
    }

    #splash-panel #bg-headline {
        padding:0;
        margin:0;
        width:100%;
        align-items: center;
    }
}
*/

@media only screen and (max-width: 900px) {
  /*portrait OR mobile*/

  body,
  #splash-canvas.active {
    height: calc(100% - clamp(60px, 6.4rem, 3.5vw));
  }

  #bottom-bar,
    /* #nav-bar #about,*/
    #nav-bar #support {
    display: none;
  }

  #splash-panel {
    width: 100%;
    /*height: max(650px, 100dvh);*/
    overflow-y: scroll;
  }

  #nav-bar {
    width: 100vw;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
  }

  #nav-bar div.inactive {
    color: lightblue;
  }

  #nav-bar div.active {
    flex-grow: 1;
    justify-content: center;
    transition: none;
  }

  #nav-bar:has(.active) div.inactive {
    /*chnage the top layout when opening the login, etc.*/
    display: none;
  }

  #nav-bar div.active ~ .form-close {
    /*display the X button */
    display: flex;
    background: #c1401c;
    border-radius: 0;
    color: white;
    padding-right: 15px;
    transform: scale(1.2);
    flex-grow: 0;
  }

  #nav-bar div.active ~ .form-close:hover::before {
    background: transparent;
  }

  body.sp-blank #nav-bar {
    background: white;
    pointer-events: none;
  }

  body.sp-blank #nav-bar div {
    color: white;
    transition: none !important;
  }

  body.sp-blank #nav-bar div:nth-child(1) {
    flex-grow: 1;
  }

  body.sp-blank #nav-bar .form-close {
    pointer-events: auto;
  }

  body.sp-blank .form-group {
    transition: none !important;
  }

  #bg-main {
    width: 100vw;
    height: 100vh;
    background-image: url(../pics/bldg_fullVerticalv3.jpg);
    background-size: cover;
    position: absolute;
    /* overflow: hidden; */
    background-position-x: -1vh;
    /*height: max(650px, 100dvh);*/
  }

  #bg-headline {
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    padding-top: 10vh;
    justify-content: flex-start;
    width: 100vw;
    /* height: max(650px, 100dvh); */
    padding-left: 0;
    bottom: 0;
    height: auto;
  }

  #bg-headline.login {
    display: none;
  }

  #bg-headline .title {
    flex-direction: column;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #bg-headline .title .icon {
    margin-right: 4vw;
  }

  #bg-headline .tagline {
    margin-left: 0;
    width: min(450px, 80vw);
    text-align: center;
  }

  #bg-headline .tagline br {
    display: none;
  }

  #bg-headline .btn-groups {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    margin-top: 10vh;
  }

  #bg-headline .btn-groups button {
    width: 40vw;
    margin-bottom: 1.5vh;
    margin-left: 0;
  }

  #lady-phone {
    width: max(250px, 60dvw);
    left: 0;
  }

  #man-laptop {
    width: max(350px, 80dvw);
  }

  #man-laptop img {
    margin-left: 20dvw;
  }

  #lady-phone img {
    margin-left: 10dvw;
  }

  #hovering-glyphs {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    padding: 0;
    column-gap: 4vw;
  }

  #lady-phone,
  #man-laptop {
    /*bottom: 5vh;*/
    bottom: 0;
  }

  /*
    #hovering-glyphs {
        bottom: 2vh;
    }
*/
  #hovering-glyphs .icon-wrapper {
    position: relative !important;
    height: clamp(150px, 25%, 250px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
  }

  #hovering-glyphs #woman1 {
    margin-left: 6.5rem;
    bottom: 13vh;
  }

  #hovering-glyphs #woman1 .icon {
    font-size: 7rem;
  }

  #hovering-glyphs #man1 .icon {
    font-size: 9rem;
  }

  #hovering-glyphs #man2 .icon {
    font-size: 4rem;
  }

  #hovering-glyphs #man3 .icon {
    font-size: 2.5rem;
  }

  /* for the form groups 
    #splash-canvas.active {
        justify-content: center;
       /* background: white; 
    }
       */

  body.sp-blank #bg-main {
    background: white;
  }

  body.sp-blank .ball {
    opacity: 0 !important;
  }

  #splash-canvas .form-group {
    margin-left: 0;
    padding-left: 10vw;
    padding-right: 10vw;

    /* see if this fixes the full white issue*/
    width: 100%;
    height: 100%;
    justify-content: center;
  }

  #splash-canvas .form-group.flipped {
    transform: none;
    opacity: 0;
  }

  #nav-bar .form-close.inactive {
    display: flex;
    border-radius: 0;
    color: #404040;
    padding-right: 15px;
    transform: scale(1.2);
    flex-grow: 0;
    transition: none;
  }

  #nav-bar .form-close.inactive:hover {
    color: #404040;
  }

  #nav-bar div.active ~ .form-close.inactive:hover {
    color: white;
  }

  #nav-bar .form-close.inactive:hover::before {
    background: none;
  }

  .form-group .form-close {
    display: none !important;
  }

  #articles {
    height: calc(max(650px, 100dvh) - clamp(60px, 6.4rem, 3.5vw));
  }

  #articles .gbox {
    flex-wrap: wrap;
  }

  #articles .gbox > * {
    width: 100%;
  }

  /*
    ANIMATIONS
    */

  @keyframes techbounce {
    0%,
    30%,
    70%,
    100% {
      transform: translateY(-0.6vh);
    }

    20%,
    50%,
    85% {
      transform: translateY(0);
    }
  }
}

@media only screen and (min-width: 900px) and (max-height: 450px) {
  #lady-phone,
  #man-laptop,
  #hovering-glyphs {
    display: none;
  }
}

@media only screen and (min-width: 900px) and (max-height: 750px) {
  #splash-canvas.active {
    height: 100%;
    pointer-events: none;
    bottom: 0;
  }

  #splash-canvas.active .form-group {
    margin-left: 0 !important;
    width: 42vw;
    height: 100%;
    pointer-events: auto;
  }

  #bg-main.active,
  #bg-main.active #bg-hero,
  #bg-main.active #splash-canvas.active {
    height: 100dvh;
  }
}

/*
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 900px) and (max-height: 750px){


    #splash-canvas.active {
       z-index: 2;
        pointer-events: none;
    }

    #splash-canvas .form-group {
        pointer-events: auto;
        margin-left: 0 !important;
        width: 42vw;
        height: 100%;
    }

    #splash-canvas.active~#bottom-bar .benefits {
        display: none;

    }
}

@media screen and (min-aspect-ratio: 2.5/1) {

    #bg-headline .tagline,
    #man-laptop,
    #lady-phone,
    #hovering-glyphs,
    #bottom-bar {
        display: none;
    }

    #bg-headline {
        width: 75vw;
    }

    #bg-headline.login {

        width: 100vw;
    }

    #articles {
        height: calc(max(650px, 100dvh) - clamp(90px, 6.4rem, 3.5vw)) !important;
    }

    #bg-headline {
        padding-top: 15vh;
    }

    #nav-bar {
        height: clamp(90px, 6.4rem, 3.5vw);
    }
        

}

@media screen and ((max-height: 600px) and (min-width:1300px)) {
    #bg-headline {
        width: 100vw;
        padding: 0;
        flex-direction: row;
        align-items: center;
        padding-top: clamp(90px, 6.4rem, 3.5vw);
    }
}


@media only screen and ((max-height: 400px) and (max-width: 400px)) {

   
    #splash-canvas,
    #app-canvas,
    #lady-phone,
    #man-laptop,
    #hovering-glyphs,
    #bg-headline .tagline,
    #bg-headline .btn-groups,
    #bottom-bar {
        display: none;
    }

    #bg-headline {
        transform: none !important;
    }

    #bg-headline.login {
        display: flex;
    }

    #bg-main {
        height: 100vh;
    }
}
*/
@media (prefers-color-scheme: dark) {
  #articles article {
    background-color: rgb(232, 230, 227) !important;
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  background: white;
  padding: clamp(24px, 2.5vw, 2.5vw);
  margin-left: 7vw;
  transition: all 0.4s ease;
  position: absolute;
  width: clamp(250pt, 30vw, 50rem);
  overflow: auto;
}

.form-group * {
  font-family: Inter;
}

.form-group h1 {
  font-family: Arial;
  font-size: 3rem;
}

.form-group .login-title {
  padding-bottom: 1.2vw;
}

.form-group .login-title h2 {
  font-weight: normal;
  font-size: 12pt;
  padding-top: 0.3vw;
  color: #575757;
}

.form-group .input-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 20pt;
}

.form-group .btn-textOnly {
  margin-left: -10pt;
}

.iw-visibility {
  opacity: 1;
  height: 48pt;
  /* position: absolute; */
  display: flex;
  align-items: center;
  /* right: 40pt; */
  font-weight: bold;
  justify-content: flex-end;
  padding-right: 10pt;
  height: 20pt;
}

.iw-visibility span {
  margin-top: -65pt;
  padding: 4pt 7pt;
  background: #efefef;
  border-radius: 8pt;
  padding-bottom: 5pt;
  font-size: 10pt;
  transition: all 0.2s ease;
}

.iw-visibility span:hover {
  cursor: pointer;
  background: #d6d6d6;
}

#form-login #password:placeholder-shown ~ .iw-visibility {
  opacity: 0;
  z-index: -1;
}

.form-group .input-wrapper input {
  padding: 7pt;
  padding-top: 20pt;
  border-radius: 5pt;
  border: 1px solid #919191;
}

.form-group .input-wrapper label.placeholder {
  pointer-events: none;
  transition: all 0.2s ease;
  position: absolute;
  margin-top: 14pt;
  margin-left: 8pt;
  font-weight: 600;
  color: #919191;
}

.form-group input:not(:placeholder-shown) + label.placeholder,
.form-group input:focus + label.placeholder {
  margin-top: 5pt;
  font-size: 9pt;
  font-weight: normal !important;
  color: black;
}

#nav-bar .form-close {
  display: none;
}

.form-close {
  align-self: flex-end;
  font-weight: bold;
  cursor: pointer;
  border-radius: 20pt;
  padding: 0 3pt;
  z-index: 1;
}

.form-close:hover::before {
  background: #dddddd;
}

.form-close::before {
  content: "";
  position: absolute;
  width: 25pt;
  height: 25pt;
  border-radius: 20pt;
  z-index: -1;
  /* margin-top: -3pt;
    margin-left: -5.5pt;
    transition: all 0.2s ease;*/
  margin-top: -1%;
  margin-left: -1.5%;
  transition: all 0.2s ease;
  width: clamp(27px, 2.5vw, 3.5rem);
  height: clamp(27px, 2.5vw, 3.5rem);
}

#login-submit {
  margin-top: 30pt;
  font-size: 15pt;
  padding: 12pt 0;
  background: #282e6d;
  border-color: #282e6d;
}

#login-submit:hover {
  background: #1d2152;
  border-color: #1d2152;
  transition: all 0.2s ease;
}

#forgot-password {
  color: #282e6d;
  font-weight: bold;
  font-size: 11pt;
  padding: 12pt 9pt;
  border-radius: 20pt;
  align-self: flex-start;
  background: transparent;
  border-color: transparent;
}

#forgot-password:hover {
  background: #eaecff;
  transition: all 0.5s ease;
  cursor: pointer;
}
#articles {
    background: #F4F3F2;
    width: 100%;
    /*height: 100vh;*/
    display: flex;
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    position:absolute;
}

#articles article {
    width: 100vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position:absolute;
    background:white;
    min-height: calc(100dvh - clamp(60px, 6.4rem, 3.5vw));

}

#articles .gbox {
    width: 70vw;
}
#articles .gbox:first-child {
    margin-top: 2.5rem; /*make this clamp*/
}
#demo-wrapper {
  width: 100vw;
  min-height: max(650px, 100dvh);
  background: #f5f6fa; /*9898be*/
  display: flex;
  position: relative;
  z-index: -3;
  justify-content: flex-end;
}

#demo-nav-bar {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  right: 0;
  /*background: #1c1d4b;*/
  width: 100%;
  justify-content: flex-end;
  transition: all 0.2s ease;
  z-index: 2;
  pointer-events: auto;
  overflow: hidden;
  height: clamp(60px, 6.4rem, 3.5vw);
}

#demo-wrapper.active {
  z-index: 5;
}

#demo-main {
  width: 75vw;
  padding: 2vw;
  padding-top: 0;
}

#demo-body {
  width: 100%;
}

#demo-sidebar {
  width: 25vw;
  height: 100vh;
  background: #fbfbfb;
  position: fixed;
  left: 0;
  box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
}

#demo-header {
  height: 10vh;
  width: 100%;
  position: sticky;
  top: 0;
  background: #fbfbfb;
  margin-bottom: 1vw;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
}

.dummy-content {
  height: 5000px;
  width: 100%;
  background: #fbfbfb;
  margin-top: 1vw;
  border-radius: 0.375rem;
  box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
}