/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Generic base elements.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: var(--line-height-base);
}

body {
  margin: 0;
  color: var(--color-text-neutral-medium);
  background-color: var(--color--gray-100);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
  background-position: top left; /* LTR */

  background-color: #f6f8f8;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ebf0f3' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")
}

body.is-fixed {
    position: fixed;
    overflow: hidden;
    width: 100%;
  }

[dir="rtl"] body {
  background-position: top right;
}

a {
  color: var(--color-text-primary-medium)
}

a:hover {
    color: var(--color--primary-50);
  }

button {
  font-family: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

audio {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--sp);
  margin-bottom: 0;
  color: var(--color-text-neutral-loud);
  font-family: var(--font-sans);
  font-weight: bold
}

@media (min-width: 43.75rem) {

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: var(--sp2)
}
  }

h1 {
  display: flex;
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  font-size: 1.75rem;
  line-height: var(--sp2);
  margin-top: 0;
  margin-bottom: var(--sp)
}

@media (min-width: 43.75rem) {

h1 {
    font-size: 2.75rem;
    line-height: var(--sp2-5);
    margin-bottom: var(--sp2)
}
  }

h1.page-title {
    margin-bottom: var(--sp)
  }

@media (min-width: 43.75rem) {

h1.page-title {
      margin-bottom: 0
  }
    }

h1 small {
    font-weight: normal;
  }

h1 .media--type-audio {
    display: inline-block;
    margin-right: 0.75rem
  }

h1 .media--type-audio:before {
      content: '\e800';
      font-family: Fontello;
      font-weight: normal;
      color: var(--color--gray-70);
      cursor: pointer;
      transition: color 0.5s;
    }

h1 .media--type-audio:hover:before {
      color: var(--color-text-primary-medium);
    }

h1 .media--type-audio > div {
      display: none;
    }

@media (min-width: 43.75rem) {

.page-node-type-sentence h1 {
    font-size: 2.375rem;
    line-height: 1.15
}
  }

h2 {
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  line-height: var(--sp2)
}

@media (min-width: 43.75rem) {

h2 {
    font-size: 1.875rem;
    line-height: var(--sp2-5)
}
  }

h2 + h3 {
  margin-top: var(--sp0-25);
}

h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: 1.25rem;
  line-height: var(--sp1-5)
}

@media (min-width: 43.75rem) {

h3 {
    font-size: 1.5rem;
    line-height: var(--sp2)
}
  }

h4 {
  font-size: 1.125rem;
  line-height: var(--sp1-5);
}

h5 {
  font-size: 1rem;
  line-height: var(--sp1-5);
}

h6 {
  font-size: 0.875rem;
  line-height: var(--sp);
}

ul {
  margin-block-start: 0.25em;
  /* margin-block-end: 0.25em; */
  margin-block-end: var(--sp1);
  margin-inline-start: 1.5em;
  /* margin-inline-start: 0; */
  margin-inline-end: 0;
  padding-inline-start: 0;
  list-style-type: disc;
  /* list-style-type: none; */
  list-style-image: none;
}

hr {
  width: var(--sp3);
  border: 0;
  border-top: solid 2px var(--color--gray-95);
  margin-top: var(--sp1-5);
  margin-bottom: var(--sp1-5);
  margin-left: 0;
  margin-right: 0
}

@media (min-width: 62.5rem) {

hr {
    margin-top: var(--sp2-5);
    margin-bottom: var(--sp2-5)
}  
  }

// ----- CUSTOM STYLES

.region--sidebar .block__content {
  display: block;
}

.vocab-info {
  list-style-type: none;
  margin: 0;
  margin-top: var(--sp2)
}

@media (min-width: 62.5rem) {

.vocab-info {
    display: flex;
    grid-column-gap: 6.25rem;
    grid-row-gap: var(--sp2);
    flex-wrap: wrap
}
  }

.vocab-info:first-child {
    margin-top: 0;
  }

.vocab-info + .vocab-info {
    margin-top: 0
  }

@media (min-width: 62.5rem) {

.vocab-info + .vocab-info {
      margin-top: var(--sp2)
  }
    }

.vocab-info li {
    position: relative;
    margin-bottom: var(--sp1-5)
  }

@media (min-width: 62.5rem) {

.vocab-info li {
      margin-bottom: 0
  }
    }

.vocab-info li:after {
      content: '';
      display: none;
      width: 2px;
      height: 3.125rem;
      position: absolute;
      bottom: 0.625rem;
      right: -3.125rem;
      background-color: var(--color--gray-95);
      font-size: 3.125rem;
      transform: rotate(30deg)
    }

@media (min-width: 62.5rem) {

.vocab-info li:after {
        display: block
    }
      }

.vocab-info li:last-child:after {
      display: none;
    }

.vocab-info h3 {
    margin-top: 0;
  }

.view-header hr:first-child {
  margin-top: 0;
}

@media (min-width: 62.5rem) {

.practice-links {
    margin-bottom: calc(var(--sp1)*-1)
}
  }

.practice-links .button {
    margin-top: 0;
  }

.teaser-list {
  list-style-type: none;
  margin-bottom: var(--sp1-5);
  margin-top: 0;
  margin-left: 0
}

@media (min-width: 62.5rem) {

.teaser-list {
    margin-bottom: var(--sp2)
}
  }

.teaser-list li {
    display: flex;
  }

.teaser-list .media--type-audio {
    display: inline-block;
    margin-right: 0.4375rem;
    text-indent: 0
  }

.teaser-list .media--type-audio:before {
      content: '\e800';
      font-family: Fontello;
      font-weight: normal;
      color: var(--color--gray-70);
      cursor: pointer;
      transition: color 0.5s;
    }

.teaser-list .media--type-audio:hover:before {
      color: var(--color-text-primary-medium);
    }

.teaser-list .media--type-audio > div {
      display: none;
    }

.path-frontpage .teaser-list {
  margin-bottom: 0;
}

.embedded-entity {
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 0
}

.embedded-entity + *:not(.embedded-entity) {
    margin-top: var(--sp1);
  }

.embedded-entity li {
    display: flex;
  }

.embedded-entity .media--type-audio {
    display: inline-block;
    margin-right: 0.4375rem;
    text-indent: 0
  }

.embedded-entity .media--type-audio:before {
      content: '\e800';
      font-family: Fontello;
      font-weight: normal;
      color: var(--color--gray-70);
      cursor: pointer;
      transition: color 0.5s;
    }

.embedded-entity .media--type-audio:hover:before {
      color: var(--color-text-primary-medium);
    }

.embedded-entity .media--type-audio > div {
      display: none;
    }

.sources {
  font-size: 1rem;
  line-height: 1.8
}

.sources ul {
    display: inline;
    list-style-type: none;
    margin: 0
  }

.sources ul li,
    .sources ul li div {
      display: inline;
    }

.sources ul em:after {
      content: ',';
      display: inline-block;
    }

.sources ul li:last-child em:after {
      display: none;
    }

.lists {
  columns: 1;
  grid-gap: var(--sp5);
  column-rule: 2px solid var(--color--gray-95);
  list-style-type: none;
  margin-left: 0
}

@media (min-width: 43.75rem) {

.lists {
    columns: 2
}
  }

@media (min-width: 62.5rem) {

.lists {
    columns: 3
}
  }

@media (min-width: 81.25rem) {

.lists {
    columns: 4
}
  }

.search-input {
  margin-left: 1.25rem
}

.search-input p {
    display: flex;
    align-items: center;
  }

.search-input input {
    padding-right: 4.375rem;
    width: 15.625rem;
    font-family: metropolis, sans-serif;
    font-size: 1rem;
  }

.search-input .button {
    font-family: 'Fontello';
    margin-left: -3.625rem;
    margin-right: 0;
    padding: 0 1.25rem;
    border-color: transparent;
    background: none
  }

.search-input .button:hover {
      border-color: transparent;
    }

.header-nav.is-active .search-input {
  margin-left: 0
}

.header-nav.is-active .search-input input {
    width: 100%;
  }

.region--sidebar .block__content {
  margin-top: 0;
  width: 100%;
}

.views-exposed-form {
  margin-top: -1.25rem;
}

.fieldset__legend {
  padding-top: 0.3125rem;
}

.views-exposed-form .fieldset__wrapper {
  padding-top: var(--sp0-5);
  padding-bottom: var(--sp0-5);
}

input[type='text'] {
  padding-top: 2px;
}

.view-id-vocabulary .contextual,
.view-id-sentences .contextual {
  display: none;
}

.flashcards {
  list-style-type: none;
  margin: -0.5625rem 0 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color--gray-60)
}

.flashcards li {
    padding: 3.75rem;
    height: 18.75rem;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

.flashcards .slick-active .card-actions {
    opacity: 1;
  }

.flashcards .card-actions {
    display: flex;
    grid-gap: 0.625rem;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s
  }

.flashcards .card-actions .flag a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.5625rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.flashcards .card-actions .flag a:before {
          content: '\e802';
          font-family: 'Fontello';
          display: block;
        }

.flashcards .card-actions .flag a:hover,
        .flashcards .card-actions .flag a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.flashcards .card-actions .flag.action-unflag a {
        color: var(--color--gray-60)
      }

.flashcards .card-actions .flag.action-unflag a:hover,
        .flashcards .card-actions .flag.action-unflag a:focus {
          color: var(--color--gray-80);
        }

.flashcards .card-actions .flag.action-unflag a:before {
          content: '\e803';
        }

.flashcards .card-actions .learn-more a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.375rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.flashcards .card-actions .learn-more a:before {
          content: '\f08e';
          font-family: 'Fontello';
          display: block;
        }

.flashcards .card-actions .learn-more a:hover,
        .flashcards .card-actions .learn-more a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.flashcards .card-actions .ajax-progress {
      display: none;
    }

.flashcards .media {
    display: none;
  }

.flashcards .french-vocabulary {
    font-size: 1.625rem;
  }

.flashcards .english-translation {
    display: none;
    font-size: 1.25rem;
    padding-top: 1.875rem;
    margin-top: 2.1875rem;
    position: relative
  }

.flashcards .english-translation:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 12.5rem;
      max-width: 100%;
      height: 1px;
      transform: translateX(-50%);
      background-color: var(--color--gray-90);
    }

.flashcards.english-first .french-vocabulary {
      display: none;
      order: 2;
      font-size: 1.25rem;
      padding-top: 1.875rem;
      margin-top: 2.1875rem;
      position: relative
    }

.flashcards.english-first .french-vocabulary:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 12.5rem;
        max-width: 100%;
        height: 1px;
        transform: translateX(-50%);
        background-color: var(--color--gray-90);
      }

.flashcards.english-first .english-translation {
      display: block;
      order: 1;
      font-size: 1.625rem;
      padding-top: 0;
      margin-top: 0
    }

.flashcards.english-first .english-translation:before {
        display: none;
      }

.verb-conjugations {
  list-style-type: none;
  margin: -0.5625rem 0 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color--gray-60)
}

.verb-conjugations li {
    padding: 3.75rem;
    height: 18.75rem;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

.verb-conjugations .slick-active .card-actions {
    opacity: 1;
  }

.verb-conjugations .card-actions {
    display: flex;
    grid-gap: 0.625rem;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s
  }

.verb-conjugations .card-actions .flag a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.5625rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.verb-conjugations .card-actions .flag a:before {
          content: '\e802';
          font-family: 'Fontello';
          display: block;
        }

.verb-conjugations .card-actions .flag a:hover,
        .verb-conjugations .card-actions .flag a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.verb-conjugations .card-actions .flag.action-unflag a {
        color: var(--color--gray-60)
      }

.verb-conjugations .card-actions .flag.action-unflag a:hover,
        .verb-conjugations .card-actions .flag.action-unflag a:focus {
          color: var(--color--gray-80);
        }

.verb-conjugations .card-actions .flag.action-unflag a:before {
          content: '\e803';
        }

.verb-conjugations .card-actions .learn-more a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.375rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.verb-conjugations .card-actions .learn-more a:before {
          content: '\f08e';
          font-family: 'Fontello';
          display: block;
        }

.verb-conjugations .card-actions .learn-more a:hover,
        .verb-conjugations .card-actions .learn-more a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.verb-conjugations .card-actions .ajax-progress {
      display: none;
    }

.verb-conjugations .media {
    display: none;
  }

.verb-conjugations .french-vocabulary .verb {
    font-size: 1.625rem;
  }

.verb-conjugations .conjugation {
    display: none;
    font-size: 1.25rem;
    padding-top: 1.875rem;
    margin-top: 2.1875rem;
    position: relative
  }

.verb-conjugations .conjugation:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 12.5rem;
      max-width: 100%;
      height: 1px;
      transform: translateX(-50%);
      background-color: var(--color--gray-90);
    }

.verb-conjugations .conjugation table {
      display: none;
    }

.verb-conjugations .conjugation .pronoun-conjugation {
      font-size: 1.625rem;
    }

.noun-genders {
  list-style-type: none;
  margin: -0.5625rem 0 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color--gray-60)
}

.noun-genders li {
    padding: 3.75rem;
    height: 18.75rem;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

.noun-genders .slick-active .card-actions {
    opacity: 1;
  }

.noun-genders .card-actions {
    display: flex;
    grid-gap: 0.625rem;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s
  }

.noun-genders .card-actions .flag a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.5625rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.noun-genders .card-actions .flag a:before {
          content: '\e802';
          font-family: 'Fontello';
          display: block;
        }

.noun-genders .card-actions .flag a:hover,
        .noun-genders .card-actions .flag a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.noun-genders .card-actions .flag.action-unflag a {
        color: var(--color--gray-60)
      }

.noun-genders .card-actions .flag.action-unflag a:hover,
        .noun-genders .card-actions .flag.action-unflag a:focus {
          color: var(--color--gray-80);
        }

.noun-genders .card-actions .flag.action-unflag a:before {
          content: '\e803';
        }

.noun-genders .card-actions .learn-more a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.375rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.noun-genders .card-actions .learn-more a:before {
          content: '\f08e';
          font-family: 'Fontello';
          display: block;
        }

.noun-genders .card-actions .learn-more a:hover,
        .noun-genders .card-actions .learn-more a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.noun-genders .card-actions .ajax-progress {
      display: none;
    }

.noun-genders .media {
    display: none;
  }

.noun-genders .french-vocabulary {
    font-size: 1.625rem;
  }

.noun-genders .with-article {
    display: none;
  }

.noun-genders .gender {
    display: none;
    font-size: 1.25rem;
    padding-top: 1.875rem;
    margin-top: 2.1875rem;
    position: relative
  }

.noun-genders .gender:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 12.5rem;
      max-width: 100%;
      height: 1px;
      transform: translateX(-50%);
      background-color: var(--color--gray-90);
    }

.listening-comprehension {
  list-style-type: none;
  margin: -0.5625rem 0 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color--gray-60)
}

.listening-comprehension li {
    padding: 3.75rem;
    height: 18.75rem;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

.listening-comprehension .slick-active .card-actions {
    opacity: 1;
  }

.listening-comprehension .card-actions {
    display: flex;
    grid-gap: 0.625rem;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s
  }

.listening-comprehension .card-actions .learn-more a {
        color: var(--color--gray-90);
        width: 1.5625rem;
        height: 1.5625rem;
        display: block;
        font-size: 1.375rem;
        font-weight: normal;
        line-height: 1.5625rem;
        text-align: center;
        overflow: hidden;
        box-shadow: none;
        transition: color 0.5s
      }

.listening-comprehension .card-actions .learn-more a:before {
          content: '\f08e';
          font-family: 'Fontello';
          display: block;
        }

.listening-comprehension .card-actions .learn-more a:hover,
        .listening-comprehension .card-actions .learn-more a:focus {
          color: var(--color--gray-80);
          box-shadow: none;
          text-decoration: none;
        }

.listening-comprehension .card-actions .ajax-progress {
      display: none;
    }

.listening-comprehension .media--type-audio {
    display: inline-block;
    align-self: center;
    font-size: 3.75rem;
    transition: font-size 0.5s, margin 0.5s
  }

.listening-comprehension .media--type-audio.sentence-shown {
      font-size: 2.125rem;
      margin-bottom: 0.3125rem;
    }

.listening-comprehension .media--type-audio:before {
      content: '\e800';
      font-family: Fontello;
      font-weight: normal;
      color: var(--color--gray-70);
      cursor: pointer;
      transition: color 0.5s;
    }

.listening-comprehension .media--type-audio:hover:before {
      color: var(--color-text-primary-medium);
    }

.listening-comprehension .media--type-audio > div {
      display: none;
    }

.listening-comprehension .french-sentence {
    display: none;
    font-size: 1.625rem;
  }

.listening-comprehension .english-translation {
    display: none;
    font-size: 1.25rem;
    padding-top: 1.875rem;
    margin-top: 2.1875rem;
    position: relative
  }

.listening-comprehension .english-translation:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 12.5rem;
      max-width: 100%;
      height: 1px;
      transform: translateX(-50%);
      background-color: var(--color--gray-90);
    }