@mixin fade-transition($element) {
	-webkit-transition: $element 0.15s ease-in-out;
	-moz-transition: $element 0.15s ease-in-out;
	-ms-transition: $element 0.15s ease-in-out;
	-o-transition: $element 0.15s ease-in-out;
	transition: $element 0.15s ease-in-out;
}





s {
/*   positioning */
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
  
/*   gradient   */
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
/*  forming the shine element
    play around with the width, skew and gradient to get different effects
  */
		width: 15%;
		height: 100%;
     transform: skew(-10deg,0deg);
		-webkit-transform: skew(-10deg,0deg);
     -moz-transform: skew(-10deg,0deg);
     -ms-transform: skew(-10deg,0deg);
     -o-transform: skew(-10deg,0deg);
  
/*  animating it  */
     animation: move 2s;
		animation-iteration-count: infinite;
		animation-delay: 1s;
		-webkit-animation: move 2s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-delay: 1s;
		-moz-transform: skew(-10deg,0deg);
		-moz-animation: move 2s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-delay: 1s;
		-ms-transform: skew(-10deg,0deg);
		-ms-animation: move 2s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-delay: 1s;
		-o-transform: skew(-10deg,0deg);
		-o-animation: move 2s;
		-o-animation-iteration-count: infinite;
		-o-animation-delay: 1s;
	}

/*  */
@keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-webkit-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-moz-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 88%}
}

@-ms-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-o-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}