.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@-webkit-keyframes h-progress {
  0% {
    width: 0;
  }
}
@-moz-keyframes h-progress {
  0% {
    width: 0;
  }
}
@-ms-keyframes h-progress {
  0% {
    width: 0;
  }
}
@-o-keyframes h-progress {
  0% {
    width: 0;
  }
}
@keyframes h-progress {
  0% {
    width: 0;
  }
}
@-webkit-keyframes v-progress {
  0% {
    height: 0;
  }
}
@-moz-keyframes v-progress {
  0% {
    height: 0;
  }
}
@-ms-keyframes v-progress {
  0% {
    height: 0;
  }
}
@-o-keyframes v-progress {
  0% {
    height: 0;
  }
}
@keyframes v-progress {
  0% {
    height: 0;
  }
}
.row-container {
  max-width: 1210px;
  margin-right: auto;
  margin-left: auto;
}
.row-container:before,
.row-container:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-container:after {
  clear: both;
}






logo-slider {
   
  $min-image-size: 50px;
  $max-image-size: 100px;
  
  --image-size: #{$max-image-size};
  
  border: 1px solid #575757;
  padding: 20px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;	
	position: relative;
	display: flex;

	&:hover div {
		animation-play-state: paused;
	}
	
	div { 
		display: flex;
		position: relative;
		animation: marquee 5s linear infinite;
    justify-content: space-around;
    
    // Debug: This is just to help see where the loop happens
    // &:nth-of-type(1) { &, img { border:1px dashed red;  }}
    // &:nth-of-type(2) { &, img { border:1px dashed blue; }}
    
    // You may need this if there are too few images for the banner width
    //min-width:100%;
    
	}
		
	img {
		display: block;
		min-width: var(--image-size);
		height: var(--image-size);
		margin: 0 1vw;
	}
  
  &:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(to right, white, rgba(white, 0) 80px, rgba(white, 0) calc(100% - 80px), white);
	}
  
  @media (max-width:900px) {
    --image-size: #{$min-image-size};
    --image-size: min(max(#{$min-image-size}, 10vw), #{$max-image-size});
	}

}

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