body
{
	margin: 0px;
	padding: 0px;	
}

#container
{
	position: relative;
	width: 728px;
	height: 90px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#border {
	position: absolute;
	width: 726px;
	height: 88px;
	border: solid 1px #000;
}

img,
#container > img,
#hotSpot
{
	position: absolute;
}

#hotSpot
{
	width: 728px;
	height: 90px;
	background-color: teal;
	opacity: 0;
}

.frame1
{
	width: 728px;
	height: 90px;
	position: absolute;	
	overflow: hidden;
}

.frame2
{
    width: 728px;
    height: 380px;
	top: -70px;
    right: -50px;
	opacity: 1;
	transform:rotate(15deg);
    clip: rect(-110px,790px,370px,670px);
    -webkit-transition: all 0.75s ease-out;
    -moz-transition: all 0.75s ease-out;
    transition: all 0.75s ease-out;
	position: absolute;	
	overflow: hidden;
}

.car
{
	left: 0px;
}

.txt1 
{
	opacity: 0;
}

.frame2 > img {
    top: 84px;
    right: 68px;
	transform:rotate(-15deg);

}


.contentBG
{
	bottom: -90px;
}

.logo,
.tires,
.tire-types 
{
	opacity: 0;
}

/* animations */ 
.animate-car
{
	left: -30px;
    -webkit-transition: left 0.75s ease-out; /* Safari */
    transition: left 0.75s ease-out;
}

.animate-opacity
{
	opacity: 1;
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
}

.animate-contentBG
{
	opacity: 1;
	bottom: 0px;
    -webkit-transition: bottom 0.5s; /* Safari */
    transition: bottom 0.5s;
}

.animateClip-path
{
    clip: rect(-110px,790px,370px,430px);
}