/* *****
This is a CSS partial, minified file. It is referenced by the theme by default in theme.liquid.
If you would like to edit this code we recommend swapping to the un-minified version.
For full details and instructions please see our documentation:
https://support.weareeight.com/hc/en-us/articles/360020236137-Un-minified-CSS-Javascript
***** */

.homepage-section--feature-cards-wrapper .homepage-sections-wrapper {
  padding: 20px;
  background: #def2ef;
}

.scrollable-features-grid {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  animation: icon-marquee 20s linear infinite;
}

.scrollable-features-grid:hover {
  animation-play-state: paused;
}

.scrollable-features-grid-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.feature-card {
  position: relative;
  display: flex;
  color: #003a5d;
}

.feature-card__media {
  flex: 0 0 80px;
  max-width: 80px;
  margin-right: 20px;
}

.feature-card__content {
  display: inline-flex;
  flex: 1 1 auto;
  white-space: nowrap;
  vertical-align: middle;
}

.feature-card__content > h3 {
  margin-bottom: 10px;
  color: #003a5d;
}

.feature-card__content > *:last-child {
  margin-bottom:0;
}


@media screen and (min-width: 768px) {
  .homepage-section--feature-cards-wrapper .homepage-sections-wrapper {
  padding: 30px 0 40px;
}
  
  .scrollable-features-grid {
    animation-duration: 25s;
  }
  
  .scrollable-features-grid-item {
    padding-left: 50px;
  }
}


@keyframes icon-marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-66.6666666666%)
  }
}