/* ------------------------------
    Util: Mixins
------------------------------ */
/* Calculate px to rem */
/* Breakpoints */
/*
  // Print styles
  @else if $canvas == 'print' {
    @media print {
      @content;
    }
  }

}
*/
.only-l {
  display: none; }
  @media only screen and (min-width: 840px) {
    .only-l {
      display: block; } }
.only-s {
  display: block; }
  @media only screen and (min-width: 840px) {
    .only-s {
      display: none; } }
.lay-row {
  display: flex;
  flex-direction: row;
  column-gap: 16px; }

.lay-col {
  display: flex;
  flex-direction: column; }

.lay-spread {
  justify-content: space-between; }

@media only screen and (min-width: 840px) {
  .lay-l-row {
    display: flex;
    flex-direction: row; } }

@media only screen and (min-width: 840px) {
  .lay-l-block {
    display: block; } }

.lay-s-col-rev {
  flex-direction: column-reverse; }
  @media only screen and (min-width: 840px) {
    .lay-s-col-rev {
      flex-direction: row; } }
.lay-grow {
  flex-grow: 1; }

body.is-open {
  height: 100%;
  overflow-y: hidden; }

.l-navigation__menu .scrollable {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 30px; }

.l-navigation__menu__links ul li a em {
  font-style: normal;
  color: #FFA500;
  font-weight: 600; }

.l-collections .l-books {
  width: 100%; }

@media only screen and (min-width: 1172px) {
  .l-books, .l-books__grid {
    gap: 20px; }
    .l-books .l-books__item, .l-books__grid .l-books__item {
      margin: 0; } }

.slick-track {
  margin: 0; }
  @media only screen and (min-width: 1172px) {
    .slick-track .l-books__item {
      width: 214.4px;
      margin-left: 17px;
      margin-right: 0; }
      .slick-track .l-books__item:first-of-type {
        margin-left: 0px; } }
.l-books__item {
  width: 100%;
  padding: 5.28vw; }
  @media only screen and (min-width: 360px) {
    .l-books__item {
      width: calc(50vw - 32px/2 - 10px);
      padding: 3.8vw; } }
  @media only screen and (min-width: 520px) {
    .l-books__item {
      width: calc(33.33vw - 32px/3 - 10px);
      padding: 2.73vw; } }
  @media only screen and (min-width: 680px) {
    .l-books__item {
      width: calc(25vw - 32px/4 - 10px);
      padding: 2.1vw; } }
  @media only screen and (min-width: 840px) {
    .l-books__item {
      width: calc(20vw - 32px/5 - 10px);
      padding: 1.63vw; } }
  @media only screen and (min-width: 1172px) {
    .l-books__item {
      width: 212px;
      padding: 21px; } }
.by-popularity .l-books__item {
  order: attr(data-pop); }

.toggle-input {
  left: calc(50% - 77px/2);
  opacity: 0;
  position: absolute;
  height: 26px;
  width: 77px;
  z-index: 2; }
  .toggle-input:checked {
    z-index: 0; }

.l-checkout__box {
  position: relative; }

.l-checkout__footer__content__item > div ul {
  font-weight: normal;
  font-size: 15px;
  line-height: 150%;
  color: #808080; }

.l-checkout__form__row .iframe {
  margin-bottom: 16px; }

.l-books__item__content {
  width: 100%; }
  .l-books__item__content .fragment-text {
    max-width: 390px;
    margin-top: 20px;
    font-weight: 400;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 150%;
    color: #474747; }
    .l-books__item__content .fragment-text h1, .l-books__item__content .fragment-text h2, .l-books__item__content .fragment-text h3, .l-books__item__content .fragment-text h4 {
      font-size: 1em; }

#user-menu {
  position: absolute;
  top: 60px;
  z-index: 50;
  position: absolute;
  width: 186px;
  top: 48px;
  right: 45px;
  /* yellow 900 */
  background: #F7BA00;
  box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 200ms opacity; }
  #user-menu.is-open {
    pointer-events: all;
    opacity: 100%; }
  #user-menu ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    #user-menu ul li a {
      color: #474747;
      display: block;
      line-height: 27px;
      padding: 8px 21px; }
      #user-menu ul li a:hover {
        color: #474747;
        background: #EDAA00; }
      #user-menu ul li a strong {
        font-weight: 600; }

form label.required:before {
  content: "* ";
  color: #FF4C54; }

form .helptext {
  color: #808080;
  font-size: 15px;
  line-height: 150%;
  margin-bottom: 30px; }

.socialaccount_providers {
  list-style: none;
  padding: 0; }
  .socialaccount_providers li {
    display: inline-block;
    margin-right: 10px; }

.experiment {
  display: flex;
  margin: 1em 16px;
  font-size: 1.5em;
  align-items: center;
  flex-direction: column;
  margin-top: 2em; }
  @media only screen and (min-width: 840px) {
    .experiment {
      flex-direction: row;
      align-items: flex-end; } }
  .experiment > span, .experiment > div {
    text-align: center; }
    @media only screen and (min-width: 840px) {
      .experiment > span, .experiment > div {
        width: 50%; } }
.legend {
  margin: 1em 16px;
  font-size: .7em;
  color: #777;
  text-align: right;
  font-style: italic; }

.funding-promo-bar {
  margin: auto; }
  .funding-promo-bar .l-checkout__support {
    margin: 18px 0; }
    .funding-promo-bar .l-checkout__support a {
      display: flex;
      align-items: start;
      gap: 0 10px;
      flex-wrap: wrap; }
      @media only screen and (min-width: 680px) {
        .funding-promo-bar .l-checkout__support a {
          flex-wrap: nowrap; } }
      .funding-promo-bar .l-checkout__support a .buttonlike {
        background: #FFA500;
        color: black;
        border-radius: 5px;
        font-size: 1.125rem;
        line-height: 50px;
        letter-spacing: -0.01em;
        padding: 0 20px;
        font-weight: 600;
        transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms; }
        .funding-promo-bar .l-checkout__support a .buttonlike:hover {
          background: #92BD39; }
      .funding-promo-bar .l-checkout__support a .funding-bar-container {
        flex-grow: 1;
        display: contents; }
        @media only screen and (min-width: 680px) {
          .funding-promo-bar .l-checkout__support a .funding-bar-container {
            display: block; } }
.l-checkout__support__bar {
  overflow: hidden; }

.poll-bar {
  height: 10px;
  width: 100%;
  display: block;
  border-radius: 5px;
  position: relative;
  overflow: hidden; }
  .poll-bar .poll-bar-inner {
    height: 100%;
    position: absolute;
    border-radius: 5px;
    background-color: #006066;
    top: 0;
    left: 0; }