/*----------------------------------------------*\
    BLOCK - Marquee Text
	====================

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
.marquee-text {
  font-size: var(--size-400);
  padding: var(--size-200) 0;
  background-color: var(--color-maquee-bg);
  color: var(--color-maquee-text);
  font-family: var(--font-sans);
  text-transform: uppercase; }
  .marquee-text a {
    text-decoration: none; }
    .marquee-text a:hover, .marquee-text a:focus {
      color: var(--color-maquee-text-hover); }
  .marquee-text--no-scrolling .marquee {
    text-align: center;
    padding-left: var(--size-700);
    padding-right: var(--size-700); }
    .marquee-text--no-scrolling .marquee__inner {
      max-width: 50ch;
      display: inline-block; }
  .marquee-text--scrolling .marquee {
    /* https://tympanus.net/codrops/2020/03/31/css-only-marquee-effect/ */
    position: relative;
    overflow: hidden;
    --offset: 1vw;
    --move-initial: calc((-100% / var(--items)) + var(--offset));
    --move-final: calc(((-100% / var(--items)) * 2) + var(--offset)); }
    .marquee-text--scrolling .marquee__inner {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      -webkit-transform: translate3d(var(--move-initial), 0, 0);
              transform: translate3d(var(--move-initial), 0, 0);
      -webkit-animation: marquee-animation linear infinite forwards;
              animation: marquee-animation linear infinite forwards;
      -webkit-animation-duration: calc(60s/var(--items));
              animation-duration: calc(60s/var(--items)); }
      .marquee-text--scrolling .marquee__inner:hover {
        -webkit-animation-play-state: paused;
                animation-play-state: paused; }
      .marquee-text--scrolling .marquee__inner span, .marquee-text--scrolling .marquee__inner a {
        white-space: nowrap; }
      .marquee-text--scrolling .marquee__inner a {
        display: block; }
@-webkit-keyframes marquee-animation {
  0% {
    -webkit-transform: translate3d(var(--move-initial), 0, 0);
            transform: translate3d(var(--move-initial), 0, 0); }
  100% {
    -webkit-transform: translate3d(var(--move-final), 0, 0);
            transform: translate3d(var(--move-final), 0, 0); } }
@keyframes marquee-animation {
  0% {
    -webkit-transform: translate3d(var(--move-initial), 0, 0);
            transform: translate3d(var(--move-initial), 0, 0); }
  100% {
    -webkit-transform: translate3d(var(--move-final), 0, 0);
            transform: translate3d(var(--move-final), 0, 0); } }
    .marquee-text--scrolling .marquee__item {
      padding: 0 var(--size-700); }