@charset "utf-8";

/********************* COMMON STYLES ************************/

body{ margin:0; background-color:#FFF; }
img, div, p{ position:absolute; margin:0px; padding:0px; vertical-align:baseline; }
img{webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);}

#banner{
	position:relative;
	width:298px;
	height:248px;
	border:1px solid #000000;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	 -webkit-perspective: 300px; /* Chrome, Safari, Opera */
    perspective: 300px;
    background-color:#0099a9;
}
 #bkg{  top:0px; left:0px;    }
 #bkg2{ opacity:0;  top:0px; left:0px;   }


#bubbleCont1{opacity:0; top: 29px; left:8px; width:284px; height:80px; -webkit-transform:scale(0); transform:scale(0); -webkit-transform-origin:89px 80px; transform-origin:89px 80px;}
#bubbleCont2{opacity:0;top: 29px; left:8px; width:284px; height:80px; -webkit-transform:scale(0); transform:scale(0); -webkit-transform-origin:195px 80px; transform-origin:195px 80px;}
#bubbleCont3{opacity:0;top: 29px; left:8px; width:284px; height:80px; -webkit-transform:scale(0); transform:scale(0); -webkit-transform-origin:89px 80px; transform-origin:89px 80px;}
#copy1{top:10px; left:54px; background:url(copySprite.png); background-position:0 0; width:190px; height:48px;}
#copy2{top:10px; left:52px; background:url(copySprite.png); background-position:0px -48px; width:190px; height:51px;}
#copy3{top:10px; left:4px; background:url(copySprite.png); background-position:0px -99px; width:274px; height:48px;}
#copy4{opacity:0; top:41px; left:7px;  -webkit-transform:scale(0); transform:scale(0);}

#pointer{bottom: 1px; left:72px; background:url(pointerSprite.png); width:17px; height:19px;  }
#pointer2{bottom: 1px; left:192px; background:url(pointerSprite.png); background-position:-17px 0; width:17px; height:19px;}

#logo{opacity:0; top:204px; left:114px;}

#name1{opacity:1; top:131px; left:-53px;  background:url(nameSprite.png); width:62px; height:23px; }
#name2{opacity:1; top:131px; right:-66px;   background:url(nameSprite.png); background-position:-62px 0; width:77px; height:23px; }

#cathy1{ bottom:-237px; left:0px;}
#andy1{bottom:-201px; right:0px;}

#cathy2{opacity:0; top:83px; left:-100px;}
#andy2{opacity:0; top:121px; right:-120px;}

#cathy3{opacity:1; top:73px; right:-110px;}
#andy3{opacity:1; top:95px; right:-125px;}
 
#bgExitArea{ width:300px; height:250px; top:0; left:0; background:rgba(0,0,0,0.00); cursor:pointer; }


/********************* Animation ************************/




#logo.In{opacity:1; -webkit-transition: ease-in .5s; transition: ease-in .5s;}

#logo.Out {opacity:0; -webkit-transition: ease-out .5s; transition: ease-out .5s;}

#bubble.pop {opacity:1; -webkit-transform: translate(-365px, 6px) scale(.56); transform: translate(-365px, 6px) scale(.56); -webkit-transition: ease-in-out 6s; transition: ease-in-out 6s;}



/********************* CTA ************************/
#ctaCont{ height:27px; width:300px; background-color:#0099a9; bottom:0px;}
#cta{  top:7px; left:9px; }

#activeArea {
	position: absolute;
	left: 0px;
    top: 0px;
    width: 105px;
    height: 18px;
	background:rgba(0,0,0,0.00);
}

#activeArea:hover { cursor: pointer; }