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

body{ margin:0; background-color:#FFF; }
img, div, p{ position:absolute; margin:0px; padding:0px; vertical-align:baseline; }

#banner{
	position:relative;
	width:298px;
	height:248px;
	border:1px solid #000;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	 -webkit-perspective: 300px; /* Chrome, Safari, Opera */
    perspective: 300px;
}

#bgExitArea{ width:300px; height:250px; top:0; left:0; background:rgba(0,0,0,0.00); cursor:pointer; }


/***************** CUSTOM STYLES ********************/
#copy1{ top:42px; left:108px; opacity:0;}
#copy2{ top:42px; left:108px; opacity:0;}
#bg_image{top:176px;}
#img_bg{left:0;}
#img_bg.In{ -webkit-transform: translateX(-30px) ; -ms-transform: translateX(-30px) ; transform: translateX(-30px);  -webkit-transition: ease-out 4s;  transition: ease-out 4s }

#line1{ left:200px; top: 134px; width:1px; height:48px; overflow:hidden;  }
#line1.In { width:108px;transition: ease-in 0.4s }
#line2{ left:37px; top:127px; width:1px; height:50px; overflow:hidden;}
#line2.In{ width:265px; transition: ease-in 0.4s }
#line3{ top:137px; width:1px; height:40px; overflow:hidden;}
#line3.In{ width:300px; transition: ease-in 0.4s }

#copyFooter{top:181px; }
#legal {top: 237px;}




#logo{ top:250px;}

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

#copy1.In { opacity:1; transition: ease-in 0.4s }
#copy2.In { opacity:1; transition: ease-in 0.4s}

#copy1.Out { opacity:0; transition: ease-in 0.4s }
#copy2.Out { opacity:0; transition: ease-in 0.4s }


/********************* DETAILS ************************/


#legalHoverArea{
	position:absolute; margin:0; padding:0;
	left:0px; bottom:0px;
	width:54px; height:15px;
	cursor:pointer;
	background:rgba(0,0,0,0.00);
}

#legalHoverArea.active{ display:block; }

#legalCopy{
	position:absolute; margin:0; padding:0;
	top:300px; left:-1px;
	transition: ease-out 0.3s;
	-webkit-transition: ease-out 0.3s;
}

#legalCopy.visible{ top: 150px; }


/********************* CTA ************************/
#ctaContainer.In{ top:199px; -webkit-transition: cubic-bezier(0,.71,.38,1) 0.4s; transition: cubic-bezier(0,.71,.38,1) 0.4s  }

#ctaContainer {
	top: 207px;
	left: 28px;
	width: 82px;
	height: 24px;
	overflow: hidden;
	opacity:1;
	-webkit-transition:ease-out 0.4s;
	        transition:ease-out 0.4s;
}

#shimmerMask {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 1px;
	border: 0;
	width: 82px;
	height: 24px;
	margin: 0;
	overflow: hidden;
}

#shimmer {
	top: -50px;
	left: -100px;
	width: 35px;
	height: 200px;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0.04) 98%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0.04) 98%, rgba(255,255,255,0) 100%);
}

#shimmer.on {
	left: 87px;
	-webkit-transition: ease-in-out .8s;
	        transition: ease-in-out .8s
}

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

#activeArea:hover { cursor: pointer }