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

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

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

#bgExitArea{ width:728px; height:90px; top:0; left:0; background:rgba(0,0,0,0.00); cursor:pointer; }
#bg{top:-1px; left:-1px;}

#border {top:-1px; left:-1px;}

/***************** ANIMATION ********************/

#line1{top: 3px; left: 362px; clip: rect(0px, 300px, 1px, 0px);}
#line1.In{clip: rect(0px, 300px, 80px, 0px); transition: ease-in-out 1.5s;}
#line1.Out{ opacity:1; transition: ease-in-out 2s;}

#line2{top: 4px; left: 556px; clip: rect(0px, 300px, 80px, 297px);}
#line2.In{clip: rect(0px, 300px, 80px, 0px); transition: ease-in-out 1.5s;}
#line2.Out{ opacity:1; transition: ease-in-out 2s;}

#copy1_1{top: 34px; left: 6px; opacity:0;}
#copy1_1.In{ transform:translateX(88px); transition: ease-in-out 1s; opacity:1;}
#copy1_1.Out{ opacity:0; transition: ease-in-out 0.6s;}

#copy1_2{top: 38px; left: 366px; opacity:0;}
#copy1_2.In{ transform:translateX(-196px); transition: ease-in-out 1s; opacity:1;}
#copy1_2.Out{ opacity:0; transition: ease-in-out 0.6s;}

#copy2_1{top: 34px; left: -7px; opacity:0;}
#copy2_1.In{ transform:translateX(103px); transition: ease-in-out 1s; opacity:1;}
#copy2_1.Out{ opacity:0; transition: ease-in-out 0.6s;}

#copy2_2{top: 34px; left: 372px; opacity:0;}
#copy2_2.In{ transform:translateX(-183px); transition: ease-in-out 1s; opacity:1;}
#copy2_2.Out{ opacity:0; transition: ease-in-out 0.6s;}

#bottle1{top: 12px; right: 170px; clip: rect( 137px, 53px, 135px, 0px);}
#bottle1.In{clip: rect( 0px, 53px, 135px, 0px); transition: ease-in-out 3s;}

#bottle2{top: 16px; right: 156px; clip: rect( 83px, 84px, 108px, 88px); }
#bottle2.In1{ clip: rect( 83px, 84px, 108px, -5px);  transition: ease-in 1s;}
#bottle2.In2{clip: rect( 0px, 84px, 108px, 0px);  transition: ease-out 2s;}

#copy3{top: -29px; left: 103px;}
#copy3.In{ transform:translateY(50px); transition: ease-in-out 1s;}
#copy3.Out{ opacity:0; transition: ease-in-out 0.6s;}
#copy4{top: 100px; left: 101px;}
#copy4.In{ transform:translateY(-50px); transition: ease-in-out 1s;}
#copy4.Out{ opacity:0; transition: ease-in-out 0.6s;}

#plus{top: 40px; left: 167px; opacity:0;}
#plus.In{ opacity:1; transition: ease-in-out 0.6s;}
#plus.Out{ opacity:0; transition: ease-in-out 0.6s;}

#copy5{top: 31px; left: 290px; opacity:0;}
#copy5.In{ opacity:1; transition: ease-in-out 0.6s;}
#copy5.Out{ opacity:0; transition: ease-in-out 0.6s;}

#logo {top: 17px; left: 20px; opacity:0;}
#logo.In{  opacity:1; transition: ease-in-out 0.5s;}

#copy6 {top: 27px; left: 268px; opacity:0;}
#copy6.In{ opacity:1; transition: ease-in-out 0.5s;}

#details {bottom: 30px; left: 564px; opacity:0;}
#details.In{ opacity:1; transition: ease-in-out 0.8s;}

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

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

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


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

#ctaContainer {
	top: 65px;
    left: 269px;
	width: 100px;
	height: 26px;
	overflow: hidden;
	opacity:0;
	-webkit-transition:ease-out 0.4s;
	transition:ease-out 0.4s;
}

#shimmerMask {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 1px;
	border: 0;
	width: 97px;
	height: 26px;
	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
}

#shimmer.reset {
	top: -50px;
	left: -100px;
	
}

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

#activeArea:hover { cursor: pointer }