body, div, h1, h2, form, fieldset, input, textarea, footer, p {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

body { 
  
	-webkit-perspective:800px;
	background: #ccc url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/bg_out2.png');
	color: #7c7873;
-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}
img {
    display: inline;
}
p {
	font-family: 'Arvo', serif;
	font-size: 20px;
	text-shadow: 0 1px 0 #fff;
	opacity: 0;
}

#wrap{
	width: 530px;
	height: 1000px;
	margin: 20px auto 0;
}

h1{
	font-family: 'Varela Round', sans-serif;
	font-size: 48px;
	margin: 50px 0;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
}

#letter_wrap {
	overlay:hidden;
	height: 446px;
	position:relative;
	top: 0px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#back {
	position:absolute;
	bottom:128px;
	left:0px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/before1.png');
	width:530px;
	height:132px;
}

#flap{
	position:absolute;
	bottom: 65px;
	left: 0px;
	width: 530px;
	height: 390px;
	-webkit-transform-style:preserve-3d;
	z-index: 5;
	-webkit-transition: all 1.5s 1s linear;
}

#flap>div{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display:block;
	position:absolute;
	width: 100%;
	height: 100%;
}

#open_flap {
	top:195px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/flap.png') no-repeat;
	-webkit-transform: rotateY(-180deg);
}

#closed_flap {
	top:0%;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/flap_closed.png') no-repeat 0 195px;
}


#front {
	position:absolute;
	bottom:0px;
	left:0px;
	background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/after.png');
	width:530px;
	height:260px;
}

.checkbox{
	position: absolute;
	opacity: 0;
	top:0;
	left:0;
	width:70%;
	height: 70%;
	z-index: 100;
}

#checkbox:checked + #letter_wrap {
	height:776px;
	top:-200px;
	-webkit-transition: all 1s ease-in-out 2s;
	-moz-transition: all 1s ease-in-out 2s;
	-o-transition: all 1s ease-in-out 2s;
	transition: all 1s ease-in-out 2s;
}

#letter {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background: #ffc url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/144467/letter_bg.png');
	position: relative;
	top:200px;
	overlay: hidden;
	height: 190px;
	width: 400px;
	margin: 0 auto;
	padding: 20px;
	border:1px solid #fff;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
	box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
}

#checkbox:checked + #letter_wrap>#flap{
	-webkit-transition: all 2s linear;
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	z-index: -1;
}

#checkbox:checked +#letter_wrap>#letter{
	height:620px;
	-webkit-transition: all 1s ease-in-out 2s;
	-moz-transition: all 1s ease-in-out 2s;
	-o-transition: all 1s ease-in-out 2s;
	transition: all 1s ease-in-out 2s;
}


#checkbox:checked +#letter_wrap>#letter>p{
	opacity: 1;
	-webkit-transition: opacity 1s ease-in-out 2s;
	-moz-transition: opacity 1s ease-in-out 2s;
	-o-transition: opacity 1s ease-in-out 2s;
	transition: opacity 1s ease-in-out 2s;
}