/*------------------------------------*\

# HOME PAGE COMPONENTS

\*------------------------------------*/

.c-list li:before {
  content: '✓';
}
.c-hero-link:hover svg,
.c-hero-link:focus svg,
.c-al:hover svg,
.c-al:focus svg {
  animation: arrow 0.5s infinite alternate;
}

@media (min-width: 45em) {
  .heroimage {
    background-image: url(/myaccount/assets/images/hero.jpg);
  }
}

@media (min-width: 125em) {
  .heroimage {
    background-size: contain !important;
    background-position: 0 0 !important;
  }
}

@keyframes arrow {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
}

/*------------------------------------*\

# VIDEO WIDGET

\*------------------------------------*/

.js-video {
  height: 0;
  margin-bottom: 1.5rem;
  padding-top: 56.25%;
  position: relative;
}

.js-video > :first-child {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.js-video-link {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.js-video-link:before {
  background-color: rgba(0, 0, 0, 0.15);
  background-image: url(/img/icons/site/play.svg) !important;
  background-position: 50%;
  background-size: 3rem;
  background-repeat: no-repeat;
  content: '';
  display: inline-flex;
  height: 100%;
  width: 100%;
}

.js-video-link:hover,
.js-video-link:focus {
  outline: 1px solid #15c;
}