@charset "UTF-8";
/**
 Colors
 */
/**
 Breakpoints
 */
/**
 Custom spacings
 */
/**
Fonts
 */
/**
 Font weights
 */
/**
 Borders
 */
@-webkit-keyframes bounceLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounceLeft {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(0); } }
@keyframes bounceRight {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(0); } }
@-webkit-keyframes bounceRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
/*
 *  get-spacer function
 *  Used to access spacer variable values for usage outside of margins and paddings (i.e. top, left, right, bottom)
 *  Usage: get-spacer($size, $bp);
 *  Example: get-spacer(mini, xs);
 *  Params: $size - spacer size needed
 *          $bp - breakpoint for spacer value
 *  Requires: $spacings and $breakpoints variables
 */
/*
 *  Breakpoints generator mixin
 *  Usage: bp($width) {@content;};
 *  Example: bp(xs) {...};
 *  Params: $width - corresponds to label of desired breakpoint from breakpoints var list
 *          @content - block with code to be included in the breakpoint
 *  Requires: $breakpoints variables
 */
/*
 *  Margin generator mixin
 *  Usage: margin($size, $sides);
 *  Example: margin(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply margin to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Padding generator mixin
 *  Used to fake margins when margin is not possible
 *  Usage: padding($size, $sides);
 *  Example: padding(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply padding to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Text styles mixin
 *  Usage: text($type);
 *  Example: text(p2);
 *  Params: $type - corresponds to label of desired text from fonts var list
 *  Requires: $fonts and $breakpoints variables
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
@media only screen and (min-width: 1001px) {
  .languagepicker {
    position: relative; } }

.languagepicker__button {
  font-family: "Source Sans Pro Regular";
  color: #58585a;
  font-size: 20px;
  padding: 15px 30px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  position: relative;
  min-height: 50px;
  white-space: nowrap;
  width: 100%; }
  @media only screen and (min-width: 1001px) {
    .languagepicker__button {
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      text-decoration: none;
      font-family: "Source Sans Pro Light";
      letter-spacing: normal;
      color: #58585a;
      padding-top: 0;
      padding-bottom: 0;
      background: transparent; } }
  @media only screen and (min-width: 1001px) and (min-width: 701px) {
    .languagepicker__button {
      padding-left: 15px;
      padding-right: 15px; } }
  @media only screen and (min-width: 1001px) and (min-width: 1001px) {
    .languagepicker__button {
      padding-left: 20px;
      padding-right: 20px; } }
  @media only screen and (min-width: 1001px) and (min-width: 0px) {
    .languagepicker__button {
      font-size: 12px;
      line-height: 16px; } }
  @media only screen and (min-width: 1001px) and (min-width: 421px) {
    .languagepicker__button {
      font-size: 13px;
      line-height: 17px; } }
  @media only screen and (min-width: 1001px) and (min-width: 701px) {
    .languagepicker__button {
      font-size: 14px;
      line-height: 18px; } }
  @media only screen and (min-width: 1001px) and (min-width: 1001px) {
    .languagepicker__button {
      font-size: 14px;
      line-height: 20px; } }
  @media only screen and (min-width: 1001px) and (min-width: 1301px) {
    .languagepicker__button {
      font-size: 14px;
      line-height: 20px; } }
  @media only screen and (min-width: 1001px) {
      .languagepicker__button:hover .languagepicker__button-text, .languagepicker__button:focus .languagepicker__button-text, .languagepicker__button:active .languagepicker__button-text {
        text-decoration: underline; } }
  .languagepicker__button:after {
    font-family: "FontAwesome", "sans-serif";
    content: "\";
    color: #58585a;
    font-size: 20px; }
    @media only screen and (min-width: 1001px) {
      .languagepicker__button:after {
        display: none; } }

@media only screen and (min-width: 1001px) {
  .languagepicker__button-text {
    margin-right: 5px; } }

.languagepicker__list {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  background: #ffffff;
  width: 100%;
  height: 100vh;
  overflow: auto;
  z-index: 1; }
  @media only screen and (min-width: 421px) {
    .languagepicker__list {
      max-width: 80%; } }
  @media only screen and (min-width: 701px) {
    .languagepicker__list {
      max-width: 60%; } }
  @media only screen and (min-width: 1001px) {
    .languagepicker__list {
      position: absolute;
      height: auto;
      width: auto;
      top: 100%;
      left: auto;
      right: 0;
      min-width: 100%;
      max-width: none;
      box-shadow: rgba(0, 0, 0, 0.2) 0 5px 3px -3px; } }

.languagepicker__list--open {
  display: block; }
  @media only screen and (min-width: 1001px) {
    .languagepicker__list--open {
      display: none; } }

.languagepicker__link {
  font-family: "Source Sans Pro Regular";
  color: #58585a;
  font-size: 20px;
  padding: 15px 30px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  min-height: 50px;
  white-space: nowrap;
  width: 100%; }
  @media only screen and (min-width: 1001px) {
    .languagepicker__link {
      font-family: "Source Sans Pro Light";
      letter-spacing: normal;
      padding: 10px 30px;
      min-height: 30px; } }
  @media only screen and (min-width: 1001px) and (min-width: 0px) {
    .languagepicker__link {
      font-size: 12px;
      line-height: 16px; } }
  @media only screen and (min-width: 1001px) and (min-width: 421px) {
    .languagepicker__link {
      font-size: 13px;
      line-height: 17px; } }
  @media only screen and (min-width: 1001px) and (min-width: 701px) {
    .languagepicker__link {
      font-size: 14px;
      line-height: 18px; } }
  @media only screen and (min-width: 1001px) and (min-width: 1001px) {
    .languagepicker__link {
      font-size: 14px;
      line-height: 20px; } }
  @media only screen and (min-width: 1001px) and (min-width: 1301px) {
    .languagepicker__link {
      font-size: 14px;
      line-height: 20px; } }

  .languagepicker__link:hover {
    background: #f3f3f3; }

.languagepicker__link-flag {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px; }

.icon--languagepicker-hidden {
  display: none; }
  @media only screen and (min-width: 1001px) {
    .icon--languagepicker-hidden {
      display: inline; } }

/*# sourceMappingURL=language-picker.css.map */