/* 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: #00ff00;
	}

/* elements */

#frame-1, #frame-2, #frame-3, #swoosh{
	width: 100%;
	height: 100%;
	}

#main-frame-1{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	left: -300px;
	z-index: 103;
	}

#main-frame-2{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	left: 300px;
	z-index: 103;
	}

#main-frame-3{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 103;
	opacity: 0;
	}

#main-swoosh{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 103;
	opacity: 0;
	}

#shoe{
	width: 300px;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 104;
	background: url(shoe.png) no-repeat;
	opacity: 0;
	}

.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-1{
	-webkit-transition: all 0.6s ease-in-out !important;
	-ms-transition: all 0.6s ease-in-out !important;
	-moz-transition: all 0.6s ease-in-out !important;
	transition: all all 0.6s ease-in-out !important;
	}

.transition-2{
	-webkit-transition: all 0.4s ease-in-out !important;
	-ms-transition: all 0.4s ease-in-out !important;
	-moz-transition: all 0.4s ease-in-out !important;
	transition: all 0.4s ease-in-out !important;
	}

.move-left{
	-webkit-transform: translate( -300px, 0px);
	-ms-transform: translate( -300px, 0px);
	-moz-transform: translate( -300px, 0px);
	transform: translate( -300px, 0px);
	}

.move-right{
	-webkit-transform: translate( 300px, 0px);
	-ms-transform: translate( 300px, 0px);
	-moz-transform: translate( 300px, 0px);
	transform: translate( 300px, 0px);
	}

.scale{
	-webkit-transform: translate( 0, 0) scale(1) !important;
	-ms-transform: translate( 0, 0) scale(1) !important;
	-moz-transform: translate( 0, 0) scale(1) !important;
	transform: translate( 0, 0) scale(1) !important;
	}

.fadein{
	opacity: 1 !important;
	}

.fadeout{
	opacity: 0 !important;
	}