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

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

#banner{
	position:relative;
	width:318px;
	height:48px;
	border:1px solid #000;
	background-color:#ffffff;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	 -webkit-perspective: 300px; /* Chrome, Safari, Opera */
    perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	display:none;
}

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

/***************** ANIMATION ********************/
#banner.color{
     background-color:#8cc63f;
}
#green_bar{ bottom:-1px; left:-1px; opacity:0;}
#green_bar.In{  opacity:1; -webkit-transition: ease-in 0.7s ; transition: ease-in 0.7s ;}

#bgStatic{ width:320px; height:50px; top:-1px; left:-1px; background-image:url(bgStatic.jpg); background-repeat:repeat;}

#bg{ top:-1px; left:300px;}
#bg.Slide1{ -webkit-transform:translate(-144px,0px); -ms-transform:translate(-144px,0px); transform:translate(-144px,0px); -webkit-transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ; transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ;}
#bg.Slide2{ -webkit-transform:translate(-448px,0px); -ms-transform:translate(-448px,0px); transform:translate(-448px,0px); -webkit-transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ; transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ;}
#bg.Slide3{ -webkit-transform:translate(-750px,0px); -ms-transform:translate(-750px,0px); transform:translate(-750px,0px); -webkit-transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ; transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ;}
#bg.Slide4{ -webkit-transform:translate(-1060px,0px); -ms-transform:translate(-1060px,0px); transform:translate(-1060px,0px); -webkit-transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ; transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ;}


#tab{ top:0px; left: -1px; opacity:0; -webkit-transform:scaleX(.3); -ms-transform:scaleX(.3); transform:scaleX(.3); -webkit-transform-origin:left; -ms-transform-origin:left; transform-origin:left;}
#tab.Pos1{ opacity:1; -webkit-transform:scaleX(1); -ms-transform:scaleX(1); transform:scaleX(1); -webkit-transform-origin:left; -ms-transform-origin:left; transform-origin:left; -webkit-transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ; transition: cubic-bezier(0.615, 0.005, 0.345, 1.000) 0.7s ;}


#copy1{ opacity:0; top:12px; left:19px;}
#copy2{ opacity:0; top:18px; left:19px; }
#copy3{ opacity:0; top:13px; left:19px; }
#copy4{ opacity:0; top:8px; left:19px; }

#final_copy{ top:20px; left:19px; opacity:0; }

#footer{ left: 16px; bottom: -1px; opacity:0;}

#logo{ opacity:0; top:15px; left:242px;}

.fadeIn{ opacity:1 !important; -webkit-transition: ease-in-out .6s; transition: ease-in-out .6s;}
.fadeOut{ opacity:0 !important; -webkit-transition: ease-in-out .4s; transition: ease-in-out .4s;}

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

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

#legalHoverArea.active{ display:block; }

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

#legalCopy.visible{ top:0px; }

/********************* CTA ************************/

#cta{ opacity:0; top:0px; left:0px;}

#ctaContainer {
	top: 16px;
	left: 167px;
	width: 60px;
	height: 18px;
	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: 111px;
	height: 32px;
	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: 100px;
	-webkit-transition: ease-in-out .6s;
	        transition: ease-in-out .6s
}

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

#activeArea:hover { cursor: pointer }