/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Pavlo Tka
Author URI: http://www.kriesi.at
Template: enfold
*/


/**
  Products cloud in the footer with animated gradient background.
 */
.products-cloud {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(90deg, #8cc640, #132138, #572c88, #db9232);
  background-size: 400%;
  animation: gradientAnimation 10s ease infinite;

  /* Set the same border as the footer beneath it */
  border-top: 1px solid var(--enfold-socket-color-border);

  /* Fix an issue where on some pages the gradient background was taking up all page height,
     invading upper sections, and be visible between their margins. This is a result of some issue in the Enfold theme
     because the container's <div> also takes out full page height. */
  overflow: auto;
  position: relative;
}

.products-cloud .product-item {
  display: inline-block;
  margin-block: .25rem;
}
.products-cloud .product-item:not(:last-child):after {
  content: '|';
  color: white;
  vertical-align: top;
  margin-inline: .5em
}

.products-cloud .product-link {
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
}
.products-cloud .product-link:hover {
  color: white;
  mix-blend-mode: difference;
}

/* Hide it on mobile devices */
@media (max-width: 767px) {
  .products-cloud {
    display: none;
  }
}

@keyframes gradientAnimation {
  0% { background-position: 0 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0 50% }
}
/* END of Product cloud */