/* -------------------------------- 

File#: _1_ticker
Title: Ticker
Descr: News-like Horizontal Scrolling List
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --ticker-animation-duration: 20s;
  --ticker-gap-x: var(--space-md);
  /* horizontal gap */
  --ticker-img-width: 280px;
}
@media (min-width: 48rem) {
  :root {
    --ticker-img-width: 400px;
  }
}
@media (min-width: 64rem) {
  :root {
    --ticker-img-width: 550px;
  }
}

.ticker {
  overflow: hidden;
}

.ticker__list {
  display: flex;
  overflow: auto;
  will-change: transform;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* class added in JS to trigger the scrolling animation */
.ticker--animate .ticker__list {
  -webkit-animation: ticker-animation var(--ticker-animation-duration) infinite;
          animation: ticker-animation var(--ticker-animation-duration) infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

/* pause animation on hover or using an external control button */
.ticker[data-ticker-pause-hover=on] .ticker__list:hover,
.ticker--paused .ticker__list {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.ticker__item {
  flex-shrink: 0;
  margin-right: calc(var(--ticker-gap-x)/2);
  margin-left: calc(var(--ticker-gap-x)/2);
}

.ticker__img {
  display: block;
  width: var(--ticker-img-width);
}

.ticker-control {
  /* pause/play button */
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
  border-radius: 50%;
  transition: 0.2s;
}
.ticker-control i {
  /* icon */
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  color: var(--color-bg);
  /* icon color */
}
.ticker-control i::before, .ticker-control i::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: currentColor;
  transition: -webkit-clip-path 0.2s var(--ease-out);
  transition: clip-path 0.2s var(--ease-out);
  transition: clip-path 0.2s var(--ease-out), -webkit-clip-path 0.2s var(--ease-out);
}
.ticker-control i::before {
  -webkit-clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
          clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
}
.ticker-control i::after {
  -webkit-clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
          clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
}
.ticker-control:hover {
  cursor: pointer;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
}
.ticker-control[aria-pressed=true] i::before {
  -webkit-clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
          clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
}
.ticker-control[aria-pressed=true] i::after {
  -webkit-clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
          clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
}

/* js enabled style */
.js {
  /* ticker--anim-off class turns off translate animation - added in JS if reduced-motion option is on */
}
.js .ticker:not(.ticker--anim-off) .ticker__list {
  overflow: visible;
}
.js .ticker--reverse:not(.ticker--anim-off) .ticker__list {
  flex-direction: row-reverse;
}
.js .ticker--reverse.ticker--animate:not(.ticker--anim-off) .ticker__list {
  -webkit-transform: translateX(calc(100vw - 100%));
          transform: translateX(calc(100vw - 100%));
  -webkit-animation-name: ticker-animation-reverse;
          animation-name: ticker-animation-reverse;
}

/* intermediate steps are added to fix a bug on Safari */
@-webkit-keyframes ticker-animation {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes ticker-animation {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes ticker-animation-reverse {
  0% {
    -webkit-transform: translateX(calc(100vw - 100%));
            transform: translateX(calc(100vw - 100%));
  }
  100% {
    -webkit-transform: translateX(calc(100vw - 50%));
            transform: translateX(calc(100vw - 50%));
  }
}
@keyframes ticker-animation-reverse {
  0% {
    -webkit-transform: translateX(calc(100vw - 100%));
            transform: translateX(calc(100vw - 100%));
  }
  100% {
    -webkit-transform: translateX(calc(100vw - 50%));
            transform: translateX(calc(100vw - 50%));
  }
}


#ticker-list-logos{
  width: 3000px !important;
}