/********************* 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 #000000;
	background-color:#8bbd50;
	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:300px; height:250px; top:0; left:0; background:rgba(0,0,0,0.00); cursor:pointer; }

/****************** Elements ****************************/

#bg{ top:-15px; left:0px;}
#bg.Out{ -webkit-transform:translate(-150px, -111px) scale(.5); transform:translate(-150px, -111px) scale(.5); -webkit-transition: cubic-bezier(0.535, 0.005, 0.315, 0.995) .8s; transition: cubic-bezier(0.535, 0.005, 0.315, 0.995) 1.8s;}

#copy1{ opacity:0; top:45px; left:125px; width: 155px; height: 107px }
#copy2{ opacity:0; top:67px; left:125px; width: 152px; height: 60px}
#copy3{ opacity:0; top:33px; left:13px; width: 209px; height: 99px}

#bar { opacity:0; top: 145px; left: -1px; width: 300px; height: 91px; background-color:#00172a; }
#bar.SlideOut{ -webkit-transform: translate(0px,22px); transform: translate(0px,22px); -webkit-transition:ease-in-out 0.6s; transition: ease-in-out 0.6s; }

#yellowBG { top: -1px; left: -1px; opacity:0; width: 300px; height: 250px; background-color:#ffcf34; }

#logo{ opacity:0; width:300px; height:59px; bottom:-1px; left:-1px; }
#footer{ bottom:-1px; left:-1px;}

#legal{ top: 226px; left: 16px; opacity:0;}

#Details{ bottom: 2px; left: 8px; opacity:1;}

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

/*#arrow{ top:147px; left: 98px; opacity:0; cursor:pointer; -webkit-transform:scale(.2); transform:scale(.2); } 
#arrow.on{opacity:1; -webkit-transform:scale(.6); transform:scale(.6); transition: ease-out 0.2s; -webkit-transition: ease-out 0.2s;}
#arrow.out{-webkit-transform:scale(.5); transform:scale(.5); transition: ease-out 0.3s;-webkit-transition: ease-out 0.3s;} */

#cta{ top:0; left:0;width: 102px;
	height: 13px;}

#ctaContainer {
	top: 154px;
	left: 15px;
	width: 106px;
	height: 16px;
	overflow: hidden;
	opacity:0;
	display: none;
}

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

#activeArea:hover { cursor: pointer; }