html,body {
	padding:0;
	margin:0;
	background-color:#667788;
	color:#efefef;
	font-family:'Open Sans';
}
.container {
	box-sizing:border-box;
	padding:25px;
	text-align:center;
}
.container h2 {
	margin-bottom:40px;
}
.container p {
	margin-top:40px;
}
@-moz-keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@-webkit-keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@keyframes dothabottomcheck {
	0% {
	height:0;
}
100% {
	height:50px;
}
}@keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}@-webkit-keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}@-moz-keyframes dothatopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:120px;
}
}input[type=checkbox] {
	display:none;
}
.check-box {
	height:100px;
	width:100px;
	background-color:transparent;
	border:10px solid black;
	border-radius:5px;
	position:relative;
	display:inline-block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition:border-color ease 0.2s;
	-o-transition:border-color ease 0.2s;
	-webkit-transition:border-color ease 0.2s;
	transition:border-color ease 0.2s;
	cursor:pointer;
}
.check-box::before,.check-box::after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	height:0;
	width:20px;
	background-color:#34b93d;
	display:inline-block;
	-moz-transform-origin:left top;
	-ms-transform-origin:left top;
	-o-transform-origin:left top;
	-webkit-transform-origin:left top;
	transform-origin:left top;
	border-radius:5px;
	content:' ';
	-webkit-transition:opacity ease .5;
	-moz-transition:opacity ease .5;
	transition:opacity ease .5;
}
.check-box::before {
	top:72px;
	left:41px;
	box-shadow:0 0 0 5px #667788;
	-moz-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	-o-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
}
.check-box::after {
	top:37px;
	left:5px;
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
input[type=checkbox]:checked + .check-box,.check-box.checked {
	border-color:#34b93d;
}
input[type=checkbox]:checked + .check-box::after,.check-box.checked::after {
	height:50px;
	-moz-animation:dothabottomcheck 0.2s ease 0s forwards;
	-o-animation:dothabottomcheck 0.2s ease 0s forwards;
	-webkit-animation:dothabottomcheck 0.2s ease 0s forwards;
	animation:dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-box::before,.check-box.checked::before {
	height:120px;
	-moz-animation:dothatopcheck 0.4s ease 0s forwards;
	-o-animation:dothatopcheck 0.4s ease 0s forwards;
	-webkit-animation:dothatopcheck 0.4s ease 0s forwards;
	animation:dothatopcheck 0.4s ease 0s forwards;
}