
/* reset */

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

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

img {
    border: 0;
	}

/* structure */

#content{
	width: 160px;
	height: 600px;
	overflow: hidden;
	position: relative;
	background: #f60fc8 url(bg.png) no-repeat;
	}

/* elements */

#seq{
	width: 160px;
	height: 600px;
	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: 160px;
	height: 600px;
    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: -160px 0; }
	4%    { background-position: -320px 0; }
	6%    { background-position: -480px 0; }
	8%    { background-position: -640px 0; }
	10%    { background-position: -800px 0; }
	12%    { background-position: -960px 0; }
	14%    { background-position: -1280px 0; }
	16%    { background-position: -1440px 0; }
	18%    { background-position: -1600px 0; }
	20%    { background-position: -1760px 0; }
	22%    { background-position: -1920px 0; }
	24%    { background-position: -2080px 0; }
	26%    { background-position: -2240px 0; }
	28%    { background-position: -2400px 0; }
	30%    { background-position: -2560px 0; }
	32%    { background-position: -2720px 0; }
	34%    { background-position: -2880px 0; }
	36%    { background-position: -3040px 0; }
	38%    { background-position: -3200px 0; }
	40%    { background-position: -3360px 0; }
	42%    { background-position: -3520px 0; }
	44%    { background-position: -3680px 0; }
	46%    { background-position: -3840px 0; }
	48%    { background-position: -4000px 0; }
	50%    { background-position: -4160px 0; }
	52%    { background-position: -4320px 0; }
	54%    { background-position: -4480px 0; }
	56%    { background-position: -4640px 0; }
	58%    { background-position: -4800px 0; }
	60%    { background-position: -4960px 0; }
	62%    { background-position: -5120px 0; }
	64%    { background-position: -5280px 0; }
	66%    { background-position: -5440px 0; }
	68%    { background-position: -5600px 0; }
	70%    { background-position: -5760px 0; }
	72%    { background-position: -5920px 0; }
	74%    { background-position: -6080px 0; }
	76%    { background-position: -6240px 0; }
	78%    { background-position: -6400px 0; }
	80%    { background-position: -6560px 0; }
	82%    { background-position: -6720px 0; }
	84%    { background-position: -6880px 0; }
	86%    { background-position: -7040px 0; }
	88%    { background-position: -7200px 0; }
	90%    { background-position: -7360px 0; }
	92%    { background-position: -7520px 0; }
	94%    { background-position: -7680px 0; }
	96%    { background-position: -7680px 0; }
	98%    { background-position: -7680px 0; }
	100%    { background-position: -7680px 0; }
	}

@-webkit-keyframes animate-guage {
	0%         { background-position: 0 0; }
	2%     { background-position: -160px 0; }
	4%    { background-position: -320px 0; }
	6%    { background-position: -480px 0; }
	8%    { background-position: -640px 0; }
	10%    { background-position: -800px 0; }
	12%    { background-position: -960px 0; }
	14%    { background-position: -1280px 0; }
	16%    { background-position: -1440px 0; }
	18%    { background-position: -1600px 0; }
	20%    { background-position: -1760px 0; }
	22%    { background-position: -1920px 0; }
	24%    { background-position: -2080px 0; }
	26%    { background-position: -2240px 0; }
	28%    { background-position: -2400px 0; }
	30%    { background-position: -2560px 0; }
	32%    { background-position: -2720px 0; }
	34%    { background-position: -2880px 0; }
	36%    { background-position: -3040px 0; }
	38%    { background-position: -3200px 0; }
	40%    { background-position: -3360px 0; }
	42%    { background-position: -3520px 0; }
	44%    { background-position: -3680px 0; }
	46%    { background-position: -3840px 0; }
	48%    { background-position: -4000px 0; }
	50%    { background-position: -4160px 0; }
	52%    { background-position: -4320px 0; }
	54%    { background-position: -4480px 0; }
	56%    { background-position: -4640px 0; }
	58%    { background-position: -4800px 0; }
	60%    { background-position: -4960px 0; }
	62%    { background-position: -5120px 0; }
	64%    { background-position: -5280px 0; }
	66%    { background-position: -5440px 0; }
	68%    { background-position: -5600px 0; }
	70%    { background-position: -5760px 0; }
	72%    { background-position: -5920px 0; }
	74%    { background-position: -6080px 0; }
	76%    { background-position: -6240px 0; }
	78%    { background-position: -6400px 0; }
	80%    { background-position: -6560px 0; }
	82%    { background-position: -6720px 0; }
	84%    { background-position: -6880px 0; }
	86%    { background-position: -7040px 0; }
	88%    { background-position: -7200px 0; }
	90%    { background-position: -7360px 0; }
	92%    { background-position: -7520px 0; }
	94%    { background-position: -7680px 0; }
	96%    { background-position: -7680px 0; }
	98%    { background-position: -7680px 0; }
	100%    { background-position: -7680px 0; }
	}

@-moz-keyframes animate-guage {
	0%         { background-position: 0 0; }
	2%     { background-position: -160px 0; }
	4%    { background-position: -320px 0; }
	6%    { background-position: -480px 0; }
	8%    { background-position: -640px 0; }
	10%    { background-position: -800px 0; }
	12%    { background-position: -960px 0; }
	14%    { background-position: -1280px 0; }
	16%    { background-position: -1440px 0; }
	18%    { background-position: -1600px 0; }
	20%    { background-position: -1760px 0; }
	22%    { background-position: -1920px 0; }
	24%    { background-position: -2080px 0; }
	26%    { background-position: -2240px 0; }
	28%    { background-position: -2400px 0; }
	30%    { background-position: -2560px 0; }
	32%    { background-position: -2720px 0; }
	34%    { background-position: -2880px 0; }
	36%    { background-position: -3040px 0; }
	38%    { background-position: -3200px 0; }
	40%    { background-position: -3360px 0; }
	42%    { background-position: -3520px 0; }
	44%    { background-position: -3680px 0; }
	46%    { background-position: -3840px 0; }
	48%    { background-position: -4000px 0; }
	50%    { background-position: -4160px 0; }
	52%    { background-position: -4320px 0; }
	54%    { background-position: -4480px 0; }
	56%    { background-position: -4640px 0; }
	58%    { background-position: -4800px 0; }
	60%    { background-position: -4960px 0; }
	62%    { background-position: -5120px 0; }
	64%    { background-position: -5280px 0; }
	66%    { background-position: -5440px 0; }
	68%    { background-position: -5600px 0; }
	70%    { background-position: -5760px 0; }
	72%    { background-position: -5920px 0; }
	74%    { background-position: -6080px 0; }
	76%    { background-position: -6240px 0; }
	78%    { background-position: -6400px 0; }
	80%    { background-position: -6560px 0; }
	82%    { background-position: -6720px 0; }
	84%    { background-position: -6880px 0; }
	86%    { background-position: -7040px 0; }
	88%    { background-position: -7200px 0; }
	90%    { background-position: -7360px 0; }
	92%    { background-position: -7520px 0; }
	94%    { background-position: -7680px 0; }
	96%    { background-position: -7680px 0; }
	98%    { background-position: -7680px 0; }
	100%    { background-position: -7680px 0; }
	}

.fadeout{
	opacity: 0 !important;
	}

