*,*:after,*:before
{
	transition-duration:0.5s;
	outline:none;
}
html
{
	min-height:100%;
	margin:0;
	box-shadow:inset 0 0 100px 0 #000;
}
body
{
	margin:10px;
}
.door
{
    border-radius: 3px;
    background-color: #fff;
    z-index: 1;
    position: absolute;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    left: 10%;
    right: 10%;
    margin-top: 10%;
    top: 0;
    box-shadow: 0 0 10px 0 #000;
    bottom: 0;
	padding-top: 30%;
}
.door:after,
.door:before
{
	content:'';
	background:url(../images/design/wide_throw_hinges.jpg) no-repeat;
	background-size:auto 100%;
	right:-1%;
	width:2%;
	height:0;
	padding:8% 0;
	position:absolute;
	top:10%;
}
.door:after
{
	bottom:10%;
	top:auto;
}
.box
{
    position: relative;
    max-width: 1000px;
    margin: auto;
    perspective: 4000px;
    perspective-origin: left 40%;
    transform-style: preserve-3d;
    background-color: #000;
}
.box:after,
.box:before,
.topbox
{
	width:10%;
	content:'';
	top:0;
	height:0;
	padding:100% 0;
	display:inline-block;
	box-shadow:inset 0 0 10px 0 #000;
	background-color:#fff;
    z-index: -1;
}
.topbox
{
    width: 90%;
    height: 0;
    padding: 5% 0;
    margin: 0;
    position: absolute;
    left: 5%;
}
.box:after
{
	left:90%;
	position:absolute;
	z-index:-1;
}
.box:hover .door
{
	transform:rotateY(15deg);
	-webkit-transform:rotateY(15deg);
}
.box:hover .door .headl:before
{
	transform:rotateZ(25deg);
	-webkit-transform:rotateZ(25deg);
}
h1
{
	background-color:#3c0;
	color:#fff;
	margin:auto;
	text-transform:uppercase;
	border:10px solid #fff;
	padding:5px 10px;
	box-shadow:-3px 3px 3px 0 #aaa;
    margin: 30px;
}
h1:hover
{
	background-color:#0f0;
}
.inlinecenter
{
	text-align:center;
}
.inlinecenter > *
{
	display:inline-block;
}
.headl
{
	background:url(../images/design/el27_kreta_2___1.png) no-repeat center;
	background-size:auto 100%;
	width:6%;
	padding:12% 0;
	position:absolute;
	left:1%;
	top:50%;
}
.headl:before
{
    content: '';
    background: url(../images/design/el27_kreta______2.png) no-repeat center;
    background-size: auto 100%;
    width: 500%;
    padding: 18% 0;
    position: absolute;
    left: -200%;
    top: 34%;
}
.soc
{
	width:200px;
	margin:auto;
	margin-top:5%;
	background-color:#eee;
	padding:2%; 
	position:relative;
	box-shadow:inset 0 0 10px 0 #fff,-3px 3px 5px 0 #000;
	border:5px solid #999;
	border-left-color:transparent;
	text-align:center;
}
.soc:after
{
	content:'';
	position:absolute;
	left:0;
	width:1px;
	height:100%;
	background-color:#FFF;
	top:0px;
	z-index:1;
}
button
{
	display:inline-block;
	width:50px;
	height:50px;
	background:none;
	border:none;
	background:url(../images/design/soc.png) no-repeat left;
	margin:0 2%;
}
button:hover
{
	transform:scale(1.5,1.5);
	-webkit-transform:scale(1.5,1.5);
	box-shadow:0 0 10px 0 #000;
}