/* @import url('http://example.com/example_style.css'); */
@import url("https://use.typekit.net/nbe7jed.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.hs-button { font-weight: bold; }
.btn  { font-weight: bold; }
.hs-form-booleancheckbox-display {  }
.hs-form .input .hs-form-booleancheckbox-display { line-height: 16px !important;  }

h1, h2, h3, h4, h5, h6{
font-family: adobe-garamond-pro, serif;
font-weight: 600;
font-style: normal;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: adobe-garamond-pro, serif;
font-weight: 600;
font-style: normal;
}

body {
  font-family: "adobe-garamond-pro",sans-serif;
  color: #54565A;
  line-height: 32px;
  letter-spacing: -.01em;
  font-weight:400;
  overflow-x: hidden;
}

b, strong {
font-family: adobe-garamond-pro, serif;font-weight:600;}

.sticky {position: sticky;}

.ibm {
  color:#7a54ff !important;
  font-family: 'IBM Plex Sans', sans-serif; 
  font-weight:700;
  font-size:16px;
  letter-spacing: 4px;
  line-height: 24px;
  text-transform: uppercase;

}

.section-intro__overline{
font-family: 'IBM Plex Sans', sans-serif; 
  font-weight:700;
  letter-spacing: 3px;
  line-height: 24px;
  font-size:14px;
  text-transform: uppercase;
  color:#7a54ff;
}

.btn {
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style:normal;
}
.top {z-index:1000; position:relative;}

/*Smooth scrolling on the whole document*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -64.5px;
  margin-top: -85.5px;
}

.ghost {
  animation: float 3s ease-out infinite;
}

@keyframes float {
  50% {
     transform: translate(0, 20px);
  }
}
.shadowFrame {
  width: 130px;
  margin-top: 15px;
}
.shadow {
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 90%;
    margin: 0 5%;
  }
  50% {
    width: 60%;
    margin: 0 18%;
  }
  100% {
    width: 90%;
    margin: 0 5%;
  }
}

/*List Styles*/
.fa-ul>li {
    position: relative;
    line-height: 30px;
    margin: 0 0 10px 0;
}

.fa-regular, .far {
    font-weight: 400;
    color: #41019a;
    padding-right: 25px;
}

/*Featued*/
.featshow__btn{
  font-family: adobe-garamond-pro,serif !important;
  font-style: normal;
  font-weight: 600;
}
/*div.featshow__button{ display:none !important;}*/

/*Form*/
.hs-input{font-family: adobe-garamond-pro,sans-serif;padding: 0.8rem;}

.form--btn-large .hs-button {
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style:normal;
}

.hs-form-field{ margin-bottom:12px;}

.hs-input[type=checkbox]+*, .hs-input[type=radio]+* {font-size: 12px;}
.inputs-list {line-height: 1em;}

/*Animations*/
#graphic {height: 700px; width:600px;}
#xray {height: 400px; width:700px;}
#pills {height: 930px; width:930px;}
#girl {height: 1000px; width:992px;}
#laptop {height:800px; width:700px;}
.stage {
        border-bottom: 3px solid #444;
        display: flex;
        height: 330px;
        width: 100%;
    }
    .box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        height: 500px;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
        width: 500px;
    }
    .bounce-1 {
      animation-name: bounce-1;
      animation-timing-function: linear;
      animation-timing-function: ease;
    }
    @keyframes bounce-1 {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-6px); }
        100% { transform: translateY(0); }
    }

.slidein{
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count:1;
  animation-direction: reverse;}

@keyframes slidein {
  from {
    margin-left: 0%;
    width: 100%;
  }

  to {
    margin-left: -20%;
    width: 100%;
  }
}



.sun {
  /*background-color: yellow;*/
  border-radius: 50%; /* creates a circular background */
  height: 90vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
  animation-iteration-count:1;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}


/*Mobile*/
@media (max-width:600px){
#laptop {
  height:320px; width:300px;
  }
}

@media (max-width:600px){
#xray {
 height: 200px; width: 320px; margin-right: 20px;
  }
}

@media (max-width:600px){
  .hide
  {display:none;}
}


@media (max-width:600px){
.ibm {
  font-size:14px;
  }
}


@media (max-width:600px){
#graphic{
  display:none; }
}

@media (max-width:600px){
  #pills {height: 630px; width:630px;}
}

@media (max-width:600px){
.featshow__btn {
  font-size:1.5rem !important;
  }
}

/*Animations*
#girl {height: 1000px; width:992px;}
}/