.button {
  position: relative;
  height: 2.6em;
  width: 120px;
  background-image: none;
  border: none;
  outline: none;
  background-color: #C8AF75;
  color: white;
/*
  text-transform: uppercase;
*/
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  border-radius: 0.3em;
}
.button::after {
/*
  content: '';
  display: block;
  position: absolute;
  width: 160px;
  height: 40px;
  background-color: black;
  z-index: -1;
  left: calc(50% - 80px);
  top: 10px;
  opacity: 0.3;
  filter: blur(5px);
  transition: all 0.2s ease-out;
*/
}
.button:hover::after {
  opacity: 0.5;
  filter: blur(20px);
  transform: translatey(10px) scalex(1.2);
}
.button:active {
  background-color: #dd4b4b;
}
.button:active::after {
  opacity: 0.3;
}
.loading {
/*
  border-radius: 50px;
  width: 50px;
*/
}
.button.loading::after {
/*
  width: 40px;
  left: 5px;
  top: 12px;
  border-radius: 100%;
*/
}
.spinner {
  display: block;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 6px;
  left: calc(50% - 17px);
  background: transparent;
  box-sizing: border-box;
  border-top: 4px solid white;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-radius: 100%;
  animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
  100% {transform: rotate(360deg)}
}

.container-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.container-flex .item{
	width: 18%;
	margin: 1%;
	list-style: none;
	text-align: center;
}

@media screen and (max-width: 767px){
	.container-flex .item{
		width: 48%;
		margin: 1%;
	}
}


/********************************
 * Snack Bar
 ********************************/

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}


.ec-productRole__description {
    word-break: break-all;
}
.ec-productRole__description.spOnly {
    margin: 1em 0 3rem!important;
}