@charset "utf-8";
/* CSS Document */

body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

#main {
	width: 298px;
	height: 248px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #000;
	opacity: 0;
}




/* ANIMATION ELEMENTS PROPERTIES */


#top_banner {
	background: url('spritesheet.png') no-repeat 0 -1458px; 
	width:300px; height: 83px;
	position: absolute;
	top:-86px;
	left:0px;
	opacity:1;
	z-index:45;
}

#stage {
	background: url('spritesheet.png') no-repeat 0 -1329px; 
	width: 271px; height: 52px;
	position: absolute;
	top:294px;
	left:16px;
	opacity:1;
	z-index:2;
}

#copy1 {
	background: url('spritesheet.png') no-repeat 0 -329px; 
	width: 208px; height:26px;
	position: absolute;
	top:34px;
	left:46px;
	opacity:0;
	z-index:46;
}

#copy2 {
	background: url('spritesheet.png') no-repeat 0 -365px; 
	width: 205px; height: 42px;
	position: absolute;
	top:28px;
	left:47px;
	opacity:0;
	z-index:47;
}


#copy3 {
	background: url('spritesheet.png') no-repeat 0 -417px; 
	width: 174px; height:26px;
	position: absolute;
	top:34px;
	left:63px;
	opacity:0;
	z-index:48;
}


#copy4 {
	background: url('spritesheet.png') no-repeat 0 -453px; 
	width: 223px; height:26px;
	position: absolute;
	top:34px;
	left:39px;
	opacity:0;
	z-index:49;
}

#person1 {
	background: url('spritesheet.png') no-repeat 0 -1055px; 
	width: 30px; height: 63px;
	position: absolute;
	top:151px;
	left:-154px;
	opacity:1;
	z-index:3;
}

#person2 {
	background: url('spritesheet.png') no-repeat 0 -1055px; 
	width: 30px; height: 63px;
	position: absolute;
	top:133px;
	left:-124px;
	opacity:1;
	z-index:3;
}

#person3 {
	background: url('spritesheet.png') no-repeat 0 -1128px; 
	width: 33px; height: 71px;
	position: absolute;
	top:132px;
	left:-85px;
	opacity:1;
	z-index:3;
}

#person4 {
	background: url('spritesheet.png') no-repeat 0 -1128px; 
	width: 33px; height: 71px;
	position: absolute;
	top:143px;
	left:-45px;
	opacity:1;
	z-index:3;
}

#person5 {
	background: url('spritesheet.png') no-repeat 0 -1209px; 
	width: 31px; height: 64px;
	position: absolute;
	top:134px;
	left:-31px;
	opacity:1;
	z-index:3;
}

#person6 {
	background: url('spritesheet.png') no-repeat 0 -1209px; 
	width: 31px; height: 64px;
	position: absolute;
	top:147px;
	left:-30px;
	opacity:1;
	z-index:3;
}

#phone {
	background: url('spritesheet.png') no-repeat 0 -1283px; 
	width: 51px; height: 36px;
	position: absolute;
	top:163px;
	left:-167px;
	opacity:1;
	z-index:4;
}

#monitor {
	background: url('spritesheet.png') no-repeat 0 -860px; 
	width: 121px; height: 86px;
	position: absolute;
	top:-87px;
	left:90px;
	opacity:1;
	z-index:5;
}

#laptop {
	background: url('spritesheet.png') no-repeat 0 -734px; 
	width: 56px; height: 39px;
	position: absolute;
	top:160px;
	left:411px;
	opacity:1;
	z-index:4;
}

#house {
	background: url('spritesheet.png') no-repeat 0 -548px; 
	width: 85px; height: 97px;
	position: absolute;
	top:-106px;
	left:108px;
	opacity:1;
	z-index:6;
}

#house_copy {
	background: url('spritesheet.png') no-repeat 0 -655px; 
	width: 250px; height: 69px;
	position: absolute;
	top:114px;
	left:26px;
	opacity:0;
	z-index:7;
}

#circle1 {
	background: url('spritesheet.png') no-repeat 0 -108px; 
	width: 84px; height: 45px;
	position: absolute;
	top:156px;
	left:21px;
	opacity:0;
	z-index:8;
}

#circle2 {
	background: url('spritesheet.png') no-repeat 0 -163px; 
	width: 65px; height: 45px;
	position: absolute;
	top:95px;
	left:55px;
	opacity:0;
	z-index:8;
}

#circle3 {
	background: url('spritesheet.png') no-repeat 0 -218px; 
	width: 77px; height: 45px;
	position: absolute;
	top:100px;
	left:186px;
	opacity:0;
	z-index:8;
}

#circle4 {
	background: url('spritesheet.png') no-repeat 0 -273px; 
	width: 81px; height: 46px;
	position: absolute;
	top:157px;
	left:198px;
	opacity:0;
	z-index:8;
}



#carpet_mask {
	position: absolute;
	overflow: hidden;
	width:300px; 
	height: 0px;
	top:152px;
	left:0px;
	opacity:1;
}

#carpet {
	background: url('spritesheet.png') no-repeat  0 0;
	width:300px; height: 98px;
	position: absolute;
	top:0px;
	left:-1px;
	opacity:1;
	z-index:2;
}


#tablet {
	background: url('spritesheet.png') no-repeat 0 -1391px; 
	width: 71px; height: 57px;
	position: absolute;
	top:154px;
	left:403px;
	opacity:1;
	z-index:11;
}

#monitor2 {
	background: url('spritesheet.png') no-repeat 0 -956px; 
	width: 126px; height: 89px;
	position: absolute;
	top:-97px;
	left:90px;
	opacity:1;
	z-index:9;
}

#end_laptop {
	position: absolute;
	width: 87px; 
	height: 67px;
	top:149px;
	left:-171px;
	opacity:1;
	z-index:10;
}

#hand {
	position: absolute;
	top:17px;
	left:50px;
	opacity:1;
	z-index:12;
}


#laptop2 {
	background: url('spritesheet.png') no-repeat 0 -783px; 
	width: 87px; height: 67px;
	position: absolute;
	top:0px;
	left:0px;
	opacity:1;
	z-index:11;
}







/* CLICKTAG BUTTONS PROPERTIES */



#btn_cta {
	background: url('spritesheet.png') no-repeat 0 -489px; 
	width: 69px; height: 49px;
	position: absolute;
	left: 116px;
	top: 251px;
	opacity:1;
	cursor: pointer;
	z-index: 100;
}



#btn_bg {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 250px;
	opacity:0;
	cursor: pointer;
	z-index: 50;
}