@font-face {
  font-family: "StabilGrotesk";
  src: url("../fonts/StabilGrotesk-Regular.woff2") format("woff2"), url("../fonts/StabilGrotesk-Regular.woff") format("woff");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "StabilGrotesk";
  src: url("../fonts/StabilGrotesk-Bold.woff2") format("woff2"), url("../fonts/StabilGrotesk-Bold.woff") format("woff");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "StabilGrotesk";
  src: url("../fonts/StabilGrotesk-Medium.woff2") format("woff2"), url("../fonts/StabilGrotesk-Medium.woff") format("woff");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "StabilGrotesk";
  src: url("../fonts/StabilGrotesk-Light.woff2") format("woff2"), url("../fonts/StabilGrotesk-Light.woff") format("woff");
  font-display: swap;
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "RightGrotesk";
  src: url("../fonts/RightGrotesk-Bold.woff2") format("woff2"), url("../fonts/RightGrotesk-Bold.woff") format("woff");
  font-display: swap;
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "forma";
  src: url("../fonts/formadjrdisplay-regular-webfont.woff2") format("woff2"), url("../fonts/formadjrdisplay-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ardina";
  src: url("../fonts/ardinadisplay-book-webfont.woff2") format("woff2"), url("../fonts/ardinadisplay-book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ardina";
  src: url("../fonts/ardinadisplay-book-webfont.woff2") format("woff2"), url("../fonts/ardinadisplay-book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ardina";
  src: url("../fonts/ardinadisplay-bold-webfont.woff2") format("woff2"), url("../fonts/ardinadisplay-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
body {
  background: #F4E9E1;
  overscroll-behavior-y: none;
}

.handsomeletter-modal {
  background-color: #F4E9E1;
  bottom: 0;
  font-family: StabilGrotesk;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.handsomeletter-scroller {
  position: relative;
  width: 100vw;
}
.handsomeletter-scroller > .content {
  position: relative;
  padding: 36px 62px 68px 62px;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-scroller > .content {
    padding: 98px 100px;
  }
}
.handsomeletter-scroller > .content .body {
  box-sizing: border-box;
  font-family: "EB Garamond", san-serif;
  margin: 112px auto 0;
  width: 100%;
}
.handsomeletter-scroller > .content .body strong {
  font-weight: 600;
}
.handsomeletter-scroller > .content .body a {
  color: #000;
  text-decoration: none;
  border-bottom: 3px solid #8572FF;
  transition: color 0.3s ease-out;
}
.handsomeletter-scroller > .content .body a:hover {
  color: #8572FF;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-scroller > .content .body {
    margin-top: 0px;
    max-width: 988px;
    width: 68%;
  }
}
.handsomeletter-scroller > .content .body p {
  text-indent: 32px;
  font-size: 24px;
}
.handsomeletter-scroller > .content .body p.strike {
  text-decoration: line-through;
}
.handsomeletter-scroller > .content .body p.clear-margin-bottom {
  margin-bottom: 0;
}
.handsomeletter-scroller > .content .body p.clear-margin-top {
  margin-top: 0;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-scroller > .content .body p {
    text-indent: 42px;
    font-size: 30px;
  }
}
.handsomeletter-scroller > .content .body p:first-child {
  margin-top: 0;
}
.handsomeletter-header {
  align-items: end;
  display: flex;
  flex-direction: column;
  flex-flow: column-reverse;
  font-family: forma, sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-header {
    align-items: center;
    flex-direction: row;
    margin-bottom: 327px;
  }
}
.handsomeletter-header .logo {
  display: block;
  margin-top: 43px;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-header .logo {
    margin-top: 0;
  }
}
.handsomeletter-header div {
  flex-grow: 1;
  width: 100%;
}
.handsomeletter-header div img {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-header div img {
    width: 325px;
  }
}
.handsomeletter-header div .button {
  display: block;
  text-align: center;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter-header div .button {
    display: inline-block;
  }
}
.handsomeletter-header div:last-child {
  text-align: right;
}
.handsomeletter .raw-materials {
  font-family: StabilGrotesk, serif;
  font-size: 24px;
  height: 100vh;
  width: 100vw;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .raw-materials {
    height: 100vh;
  }
}
.handsomeletter .raw-materials .content {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .raw-materials .content {
    padding: 61px 149px;
  }
}
.handsomeletter .raw-materials .cta {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 25%;
  width: 100%;
  z-index: 999;
}
.handsomeletter .raw-materials .header {
  align-items: end;
  box-sizing: border-box;
  display: flex;
  padding: 0 35px;
  position: relative;
  width: 100%;
  z-index: 999;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .raw-materials .header {
    position: relative;
  }
}
.handsomeletter .raw-materials .header .logo {
  flex-shrink: 1;
  height: 61px;
  width: 83px;
}
.handsomeletter .raw-materials .header .text {
  flex-grow: 1;
  line-height: 24px;
  text-align: right;
}
.handsomeletter .raw-materials .sunburst {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 0;
}
.handsomeletter .raw-materials .sunburst .sunburst-lottie {
  width: auto;
}
.handsomeletter .raw-materials .sunburst .sunburst-lottie svg {
  width: 250vw !important;
  height: auto !important;
  margin-left: -75vw;
}
@media only screen and (min-width: 414px) {
  .handsomeletter .raw-materials .sunburst .sunburst-lottie {
    width: auto;
  }
  .handsomeletter .raw-materials .sunburst .sunburst-lottie svg {
    width: 300vw !important;
    height: auto !important;
    margin-left: -100vw;
  }
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .raw-materials .sunburst {
    bottom: auto;
    left: 58px;
    position: absolute;
    right: 58px;
  }
  .handsomeletter .raw-materials .sunburst .sunburst-lottie {
    margin-left: 0;
    width: auto;
  }
  .handsomeletter .raw-materials .sunburst .sunburst-lottie svg {
    width: 100% !important;
    height: 135vh !important;
    margin-left: auto;
  }
}
@media only screen and (min-width: 1440px) {
  .handsomeletter .raw-materials .sunburst {
    left: 200px;
    right: 200px;
  }
}
.handsomeletter .raw-materials .makethedifferent {
  bottom: 20px;
  font-size: 11px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
@media only screen and (min-width: 414px) {
  .handsomeletter .raw-materials .makethedifferent {
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .raw-materials .makethedifferent {
    bottom: 46px;
  }
}
.handsomeletter .readerline {
  border-bottom: 4px #8572FF solid;
  box-sizing: border-box;
  left: 15px;
  position: absolute;
  top: 199px;
  width: calc(100% - 30px);
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .readerline {
    left: auto;
    top: 460px;
    width: calc(100% - 202px);
  }
}
.handsomeletter .readerline div {
  font-size: 11px;
}
@media only screen and (max-width: 1023px) {
  .handsomeletter .readerline div {
    height: 106px;
    margin-bottom: 6px;
    transform: rotate(-180deg);
    writing-mode: vertical-rl;
  }
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .readerline div {
    margin-bottom: 19px;
    max-width: 100px;
  }
  .handsomeletter .readerline div .hidden-desktop {
    display: none;
  }
}
.handsomeletter .button {
  border-radius: 14px;
  display: inline-block;
  font-size: 11px;
  height: 28px;
  line-height: 28px;
  padding: 0 24px;
  text-decoration: none;
  transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
@media only screen and (min-width: 1024px) {
  .handsomeletter .button {
    border-radius: 47px;
    font-size: 16px;
    height: 47px;
    line-height: 47px;
  }
}
.handsomeletter .button-black {
  background-color: #000;
  border: 1px #000 solid;
  color: #F4E9E1;
}
.handsomeletter .button-black:hover {
  background: #F4E9E1;
  border: 1px #000 solid;
  color: #000;
}
.handsomeletter .button-beige {
  background-color: #F4E9E1;
  border: 1px #000 solid;
  color: #000;
}
.handsomeletter .button-beige:hover {
  background: #000;
  color: beige;
}

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