/* reset */

html, body, object, img {
    margin: 0;
    padding: 0;
	}

a:active,
a:hover {
    outline: 0;
	}

img {
    border: 0;
	}

/* structure */

#content{
	width: 300px;
	height: 250px;
	overflow: hidden;
	position: relative;
	background: #68fe01 url(bg.png) no-repeat;
	}

/* elements */

#seq{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	z-index: 100;
	background: url(nike-seq.jpg) no-repeat;
	background-position: 0 0;
	opacity: 1;
	}

.click-through {
    position: absolute;
    width: 300px;
	height: 250px;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 106;
    }

/* Animations */

.animClass {
	-webkit-transform: translate3d(0, 0, 0); /* Force Hardware Acceleration */
	}

.transition{
	-webkit-transition: all 6s ;
	-ms-transition: all 6s ;
	-moz-transition: all 6s ;
	transition: all 6s ;
	}

.animation-trigger{
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: step-start;
	animation-name: animate-guage;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-name: animate-guage;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: step-start;
    -moz-animation-name: animate-guage;
    -moz-animation-fill-mode: forwards;
	}

@keyframes animate-guage {
	0%         { background-position: 0 0; }
	2%     { background-position: -300px 0; }
	4%    { background-position: -600px 0; }
	6%    { background-position: -900px 0; }
	8%    { background-position: -1200px 0; }
	10%    { background-position: -1500px 0; }
	12%    { background-position: -1800px 0; }
	14%    { background-position: -2100px 0; }
	16%    { background-position: -2400px 0; }
	18%    { background-position: -2700px 0; }
	20%    { background-position: -3000px 0; }
	22%    { background-position: -3300px 0; }
	24%    { background-position: -3600px 0; }
	26%    { background-position: -3900px 0; }
	28%    { background-position: -4200px 0; }
	30%    { background-position: -4500px 0; }
	32%    { background-position: -4800px 0; }
	34%    { background-position: -5100px 0; }
	36%    { background-position: -5400px 0; }
	38%    { background-position: -5700px 0; }
	40%    { background-position: -6000px 0; }
	42%    { background-position: -6300px 0; }
	44%    { background-position: -6600px 0; }
	46%    { background-position: -6900px 0; }
	48%    { background-position: -7200px 0; }
	50%    { background-position: -7500px 0; }
	52%    { background-position: -7800px 0; }
	54%    { background-position: -8100px 0; }
	56%    { background-position: -8400px 0; }
	58%    { background-position: -8700px 0; }
	60%    { background-position: -9000px 0; }
	62%    { background-position: -9300px 0; }
	64%    { background-position: -9600px 0; }
	66%    { background-position: -9900px 0; }
	68%    { background-position: -10200px 0; }
	70%    { background-position: -10500px 0; }
	72%    { background-position: -10800px 0; }
	74%    { background-position: -11100px 0; }
	76%    { background-position: -11400px 0; }
	78%    { background-position: -11700px 0; }
	80%    { background-position: -12000px 0; }
	82%    { background-position: -12300px 0; }
	84%    { background-position: -12600px 0; }
	86%    { background-position: -12900px 0; }
	88%    { background-position: -13200px 0; }
	90%    { background-position: -13500px 0; }
	92%    { background-position: -13800px 0; }
	94%    { background-position: -14100px 0; }
	96%    { background-position: -14400px 0; }
	98%    { background-position: -14400px 0; }
	100%    { background-position: -14400px 0; }
	}

@-webkit-keyframes animate-guage {
	0%         { background-position: 0 0; }
	2%     { background-position: -300px 0; }
	4%    { background-position: -600px 0; }
	6%    { background-position: -900px 0; }
	8%    { background-position: -1200px 0; }
	10%    { background-position: -1500px 0; }
	12%    { background-position: -1800px 0; }
	14%    { background-position: -2100px 0; }
	16%    { background-position: -2400px 0; }
	18%    { background-position: -2700px 0; }
	20%    { background-position: -3000px 0; }
	22%    { background-position: -3300px 0; }
	24%    { background-position: -3600px 0; }
	26%    { background-position: -3900px 0; }
	28%    { background-position: -4200px 0; }
	30%    { background-position: -4500px 0; }
	32%    { background-position: -4800px 0; }
	34%    { background-position: -5100px 0; }
	36%    { background-position: -5400px 0; }
	38%    { background-position: -5700px 0; }
	40%    { background-position: -6000px 0; }
	42%    { background-position: -6300px 0; }
	44%    { background-position: -6600px 0; }
	46%    { background-position: -6900px 0; }
	48%    { background-position: -7200px 0; }
	50%    { background-position: -7500px 0; }
	52%    { background-position: -7800px 0; }
	54%    { background-position: -8100px 0; }
	56%    { background-position: -8400px 0; }
	58%    { background-position: -8700px 0; }
	60%    { background-position: -9000px 0; }
	62%    { background-position: -9300px 0; }
	64%    { background-position: -9600px 0; }
	66%    { background-position: -9900px 0; }
	68%    { background-position: -10200px 0; }
	70%    { background-position: -10500px 0; }
	72%    { background-position: -10800px 0; }
	74%    { background-position: -11100px 0; }
	76%    { background-position: -11400px 0; }
	78%    { background-position: -11700px 0; }
	80%    { background-position: -12000px 0; }
	82%    { background-position: -12300px 0; }
	84%    { background-position: -12600px 0; }
	86%    { background-position: -12900px 0; }
	88%    { background-position: -13200px 0; }
	90%    { background-position: -13500px 0; }
	92%    { background-position: -13800px 0; }
	94%    { background-position: -14100px 0; }
	96%    { background-position: -14400px 0; }
	98%    { background-position: -14400px 0; }
	100%    { background-position: -14400px 0; }
	}

@-moz-keyframes animate-guage {
	0%         { background-position: 0 0; }
	2%     { background-position: -300px 0; }
	4%    { background-position: -600px 0; }
	6%    { background-position: -900px 0; }
	8%    { background-position: -1200px 0; }
	10%    { background-position: -1500px 0; }
	12%    { background-position: -1800px 0; }
	14%    { background-position: -2100px 0; }
	16%    { background-position: -2400px 0; }
	18%    { background-position: -2700px 0; }
	20%    { background-position: -3000px 0; }
	22%    { background-position: -3300px 0; }
	24%    { background-position: -3600px 0; }
	26%    { background-position: -3900px 0; }
	28%    { background-position: -4200px 0; }
	30%    { background-position: -4500px 0; }
	32%    { background-position: -4800px 0; }
	34%    { background-position: -5100px 0; }
	36%    { background-position: -5400px 0; }
	38%    { background-position: -5700px 0; }
	40%    { background-position: -6000px 0; }
	42%    { background-position: -6300px 0; }
	44%    { background-position: -6600px 0; }
	46%    { background-position: -6900px 0; }
	48%    { background-position: -7200px 0; }
	50%    { background-position: -7500px 0; }
	52%    { background-position: -7800px 0; }
	54%    { background-position: -8100px 0; }
	56%    { background-position: -8400px 0; }
	58%    { background-position: -8700px 0; }
	60%    { background-position: -9000px 0; }
	62%    { background-position: -9300px 0; }
	64%    { background-position: -9600px 0; }
	66%    { background-position: -9900px 0; }
	68%    { background-position: -10200px 0; }
	70%    { background-position: -10500px 0; }
	72%    { background-position: -10800px 0; }
	74%    { background-position: -11100px 0; }
	76%    { background-position: -11400px 0; }
	78%    { background-position: -11700px 0; }
	80%    { background-position: -12000px 0; }
	82%    { background-position: -12300px 0; }
	84%    { background-position: -12600px 0; }
	86%    { background-position: -12900px 0; }
	88%    { background-position: -13200px 0; }
	90%    { background-position: -13500px 0; }
	92%    { background-position: -13800px 0; }
	94%    { background-position: -14100px 0; }
	96%    { background-position: -14400px 0; }
	98%    { background-position: -14400px 0; }
	100%    { background-position: -14400px 0; }
	}

.fadeout{
	opacity: 0 !important;
	}