body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
	background:#fff;
	text-align:center;
}
span.logo {
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	position:fixed;
	top:50%;
	float:left;
	width:100%;
	opacity:0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
span.logo.active {
	opacity:1;
}
img {
	max-width:400px;
	width:80%;
}
span.left {
	position: fixed;
	top:0px;
	left:-100%;
	width:100%;
	height:100%;
	background:rgba(44,54,59,0.5);
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
span.left.active {
	left:0px;
}
span.right {
	position: fixed;
	top:0px;
	left:-100%;
	width:100%;
	height:100%;
	background:#2a363b;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
span.right.active {
	left:0px;
}
span.top {
	position: fixed;
	top:-50%;
	left:0px;
	width:100%;
	height:50%;
	background:rgba(0,0,0,1);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
span.top.active {
	top:0px;
}
span.bottom {
	position: fixed;
	bottom:-50%;
	left:0px;
	width:100%;
	height:50%;
	background:rgba(0,0,0,1);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
span.bottom.active {
	bottom:0px;
}