/* -------------------------------------------------*/
/* GENERAL  
/* -------------------------------------------------*/
* { margin: 0; 
	padding: 0;
}

html, body {
	font-family: Arial, Helvetica, sans-serif;
}

#ad-container {
  	position: relative;
  	width: 320px;
  	height: 480px;
  	margin: 0 auto;
}

#viewport {
  	position: absolute;
  	border: 1px solid #666666;
  	text-align: center;
  	background: #FFF;
}

.collapse-viewport {
  	top: 380px;
  	left: 0px;
  	width: 318px;
  	height: 98px;
}

.expand-viewport {
 	width: 318px;
 	height: 478px;
}

.default{
  left:300px;
  top:50px;

}

:focus {outline:none;}
::-moz-focus-inner {border:0;}


/* -------------------------------------------------*/
/* COLLAPSED CONTAINER  
/* -------------------------------------------------*/
#collapse_container_dc {
	position: absolute;
	top: 0px;
	left: 0px;
	width:318px;
	height:98px;
	background: #FFF;
	overflow: hidden;
}

#collapsedBG {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

#charCol {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0;
	-webkit-transform-origin: 50% 100%; /* Chrome, Safari, Opera */
	transform-origin: 50% 100%;
}

#logoCol {
	position: absolute;
	top: 0;
	left: 1px;
	opacity: 0;
	-webkit-transform-origin: 50% 60%; /* Chrome, Safari, Opera */
	transform-origin: 50% 60%;
}

#legalCol {
	position: absolute;
	bottom: 0;
	left: 9px;
	opacity: 0;
}



/* -------------------------------------------------*/
/* EXPANDED CONTAINER  
/* -------------------------------------------------*/
#expand_container_dc {
  position: absolute;
  width:318px;
  height:478px;
  z-index: 100;
  top: 0;
  left: 0;
  display:none;
  overflow:hidden;
  opacity:0;
  z-index:10;
  -webkit-transform-style:preserve-3d;
}

#expand_content_dc {
  	position: absolute;
  	top: 0;
  	left: 0;
  	background-color: #FFF;
  	z-index: 100;
  	-webkit-transform-style:preserve-3d;
  	transition: all .7s;
  	display: none;
}

#vidPlayer {
	position:absolute;
	top:210px;
	left:31px;
	width:258px; 
	height:144px;
	opacity: 0;
	margin: 0 auto;
}

#expand_content_dc{
	position: absolute;
	width:100%;
	height:100%;
	top: 0px;
	left: 0px;
}

#charContainer{
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	display: block;
	-webkit-transform-origin: 50% 100%; /* Chrome, Safari, Opera */
	transform-origin: 50% 100%;
}

#character {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#logoContainer{
	position: absolute;
	top: 0px;
	width: 100%;
	height: 107px;
	opacity: 0;
	display: block;
	-webkit-transform-origin: 50% 60%; /* Chrome, Safari, Opera */
	transform-origin: 50% 60%;
}
	
#logoExp {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
}

#legal {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
}



/* -------------------------------------------------*/
/* BUTTONS 
/* -------------------------------------------------*/
#tapBtn {
	position: absolute;
	bottom: 0;
	right: 7px;
	opacity: 0;
	z-index:200;
}

#close_button{
  	position: absolute;
  	left: 290px;
  	top: 5px;
  	width:25px;
  	height:25px;
  	z-index:100;
  	display: none;
}

#download_button {
	position: absolute;
	bottom: 78px;
	left: 48px;
	height: 39px;
	opacity: 0;
	z-index:200;
	display: block;
}

#google_button {
	position: absolute;
	bottom: 25px;
	left: 50px;
	opacity: 0;
	z-index:200;
}

#apple_button {
	position: absolute;
	bottom: 25px;
	right: 50px;
	opacity: 0;
	z-index:200;
}



/* -------------------------------------------------*/
/* ANIMATION CLASSES  
/* -------------------------------------------------*/
.fadeIn {
	-webkit-animation: fade-in .6s cubic-bezier(.25,0,.5,1) forwards;
	animation: fade-in .6s cubic-bezier(.25,0,.5,1) forwards;
}

	@-webkit-keyframes fade-in {
	    0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@keyframes fade-in {
		0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	
.bg-in {
	-webkit-animation: bg-in .5s cubic-bezier(0,0,.5,1) forwards;
	animation: bg-in .5s cubic-bezier(0,0,.5,1) forwards;
}

	@-webkit-keyframes bg-in {
	    0% { opacity: 0; -webkit-transform: translate3d(0,0,0) scale(3,3); }
	  100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1,1); }
	}

	@keyframes bg-in {
		0% { opacity: 0; transform: translate3d(0,0,0) scale(3,3); }
	  100% { opacity: 1; transform: translate3d(0,0,0) scale(1,1); }
	}


.char-in {
	-webkit-animation: character-in .5s cubic-bezier(.5,0,.5,1) forwards;
	animation: character-in .5s cubic-bezier(.5,0,.5,1) forwards;
}

	@-webkit-keyframes character-in {
	    0% { opacity: 0; -webkit-transform: translate3d(0,0,0) scale(.3,.3); }
	   50% { opacity: 1; }
	  100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1,1); }
	}

	@keyframes character-in {
		0% { opacity: 0; transform: translate3d(0,0,0) scale(.3,.3); }
	   50% { opacity: 1; }
	  100% { opacity: 1; transform: translate3d(0,0,0) scale(1,1); }
	}
	

.logo-in {
	-webkit-animation: logoCol-logo-in .6s cubic-bezier(.5,0,.5,1) forwards;
	animation: logoCol-logo-in .6s cubic-bezier(.5,0,.5,1) forwards;
}

	@-webkit-keyframes logoCol-logo-in {
	    0% { opacity: 0; -webkit-transform: scale(.3,.3); }
	  100% { opacity: 1; -webkit-transform: scale(1,1); }
	}

	@keyframes logoCol-logo-in {
		0% { opacity: 0; transform: translate3d(0,0,0) scale(.25,.25); }
	  100% { opacity: 1; transform: translate3d(0,0,0) scale(1,1); }
	}


.slideDown {
	-webkit-animation: slide-down .6s cubic-bezier(.15,.3,.6,1) forwards;
	animation: slide-down .6s cubic-bezier(.15,.3,.6,1) forwards;
}

	@-webkit-keyframes slide-down {
	    0% { opacity: 0; -webkit-transform: translate3d(0,-15px,0); }
	  100% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
	}

	@keyframes slide-down {
		0% { opacity: 0; transform: translate3d(0,-15px,0); }
	  100% { opacity: 1; transform: translate3d(0,0,0); }
	}