html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html, body {
	height:100%;
	margin:0;
	overflow:hidden;
	padding:0;
	width:100%;
}

p, h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

a, a:hover{
	color:#000000;
	text-decoration:none;
}

img{
	position:absolute;
	top:-1px;
	left:-1px;
    border: 0;
	transform-origin:center;
	
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */    
}

.tint {
	-webkit-filter: sepia(1);
	-moz-filter: sepia(1);
	-o-filter: sepia(1);
	-ms-filter: sepia(1);
	filter: sepia(1);
}

#container, .size, #txt1Outer{
	width: 300px;
	height: 250px;
}

#container{
	font-family:Verdana, sans-serif;
	overflow: hidden;
	position: absolute;
	border: 1px solid grey;
	background-color:#FFFFFF;
	display:none;
	cursor:pointer;
    background-image: url("img_bg.jpg");
}

.outerFrames, .animFrames{
	position: absolute;
	overflow: hidden;
	top:0px;
	left:0px;
    width: 300px;
    height: 449px;
}

.animFrames{
    background-image: url("frames_pillow.png");
    background-repeat: no-repeat;
    background-position: 0px, 0px;
}

#walletF1{
	background-position: -300px 0px;
}

#walletF2{
	background-position: 0px 0px;
    animation: walletFalling 0.4s steps(1, end) forwards;
	
}

#arm{
	background-position: 0px -449px;
}

.arm{
	background-position: 0px -449px;
}

#adjust{
	position: absolute;
    transform: translate(6px, 45px) scale(.96);
}

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

#container:hover #cta_off{
	visibility:hidden;
}

#container:hover #cta_on{
	visibility:visible;
}

/*initial*/

#txt1, #txt2, #txt3, #cta{
	opacity:0;
	visibility:hidden;
}

#txt1, #txt2, #txt3{
	transform:translateY(-10px);
}

#walletF1Outer{
    transform:translate(3px, -344px) scale(.75);
}

#walletF2Outer{
    transform:translate(-4px, -350px) scale(0.26);
}

#armOuter{
    transform:translate(287px, -224px) scale(1);
}

#walletF2Outer, #armOuter{
	display:none;
}

/*animation*/

.blur{
	-webkit-filter: blur(3px);
	filter: blur(3px);
	animation: blur-this .6s ease-out forwards;
}

@keyframes blur-this {
	0% { 
		-webkit-filter: blur(3px);
		filter: blur(3px);
		opacity: 1;
	}
	100% { 
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

@keyframes walletFalling {
	0%   { background-position: 0px 0px; }
	25%  { background-position: -300px 0px; }
	50%  { background-position: -600px 0px; }
	75%  { background-position: -900px 0px; }
	100% { background-position: -1200px 0px; }
}

@keyframes catch {
	0%   { background-position: 0px -449px; }
	25%  { background-position: -300px -449px; }
	50%  { background-position: -300px -449px; }
	75%  { background-position: -300px -449px; }
	100% { background-position: -300px -449px; }
}