@font-face {
    font-family: 'Open Sans';
    src: url('img/OpenSans.ttf');
}

body {
	margin:0px;
	min-height:100%;
	background-color:#424242;
	background-image:url('img/back.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	font-family:'Open Sans', sans-serif;
	font-size:13px;
	color:#fff;
}

div.centered {
	margin:100px 20px 100px 20px;
	max-height:100%;
	text-align:center;
}

div.door-container {
	display:inline-block;
	position:relative;
	margin:20px;
	width:150px;
	height:150px;
	cursor:pointer;
	perspective:100px;
	transition:box-shadow 0.5s, background-color 0.5s;
}

div.door-container:hover{
	box-shadow:0px 0px 10px #fff inset;
}

div.door-locked {
	cursor:auto;
}

div.door-locked:hover {
	box-shadow:none;
}

div.door-cover {
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	z-index:2;
	border:1px solid #fff;
	background-color:transparent;
	transform-style:preserve-3d;
	transform-origin:0 0;
	-webkit-transform-style:preserve-3d;
	-webkit-transform-origin:0 0;
	transition:transform 0.8s, -webkit-transform 0.8s, width 0.7s, background-color 0.5s, opacity 0.5s;
}

div.door-cover-open {
	width:70px;
	background-color:rgba(255,255,255,0.3);
	transform:rotateY(-160deg);
	-webkit-transform:rotateY(-160deg);
}

div.door-number {
	position:absolute;
	bottom:10px;
	right:10px;
}

div.door-link {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	opacity:0;
	transition:opacity 0.9s;
}

#footer {
	position:fixed;
	bottom:0px;
	right:0px;
	padding:10px;
	background-color:rgba(0,0,0,0.6);
	color:#fff;
}

#footer span {
	opacity: 0.6;
}