
$hscroller-lateral-padding: 10px !default;
$hscroller-card-height: 160px !default;
$hscroller-card-width: 120px !default;
$hscroller-image-height: 120px !default;
$hscroller-image-width: 120px !default;
$hscroller-card-animate-time: 0.4s !default;
$hscroller-cards-to-animate: 12 !default;



div.hscroller{

	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	padding-left: $hscroller-lateral-padding;

	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	&::-webkit-scrollbar{
		display:none;
	}

}

div.hscroller-card{
	width: $hscroller-card-width;
	height: $hscroller-card-height;
	display: inline-block;
	background-color: #262626;
	vertical-align: middle;
	margin: 0 2px;

	img{
		height: $hscroller-image-height;
		width: $hscroller-image-width;
	}

	div.hscroller-label{
		font-family: "Helvetica Neue", "Roboto", Helvetica, sans-serif;
		font-size: 11px;
		line-height: 14px;
		padding: 0 0.5em;
		color: #fff;
		margin: 0;
		word-wrap: break-word;
		white-space: normal;
		height: calc($hscroller-card-height - $hscroller-image-height);
	}

	&:last-child {margin-right: $hscroller-lateral-padding;}
}


@media screen and (min-width:1025px){
	div.hscroller{
		overflow-x: hidden;
	}
}

$i: 1;
@while $i < $hscroller-cards-to-animate {
  div.hscroller-card-animated-#{$i}{
  	animation: fadein $hscroller-card-animate-time * $i;
	-moz-animation: fadein $hscroller-card-animate-time * $i; /* Firefox */
	-webkit-animation: fadein $hscroller-card-animate-time * $i; /* Safari and Chrome */
	-o-animation: fadein $hscroller-card-animate-time * $i; /* Opera */
  }
  $i: $i + 1;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}