html {height: 100%; width: 100%; background: #111; overflow: hidden;}
#content {
background:#000;
width: 100%;
height: 100%;
background-color: #1f1f1f;
@include filter-gradient(#1f1f1f, #000000, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #1f1f1f 0%,#000000 100%));}
h1 {font-family: 'Open Sans', sans-serif; font-size: 30px;
color: #fff;
text-align:center;
position: absolute;
width: 100%;
top: 0px;
background: #000;
margin: 0px;
padding: 15px 0px; z-index:200;}
#instructions {width: 500px;
height: 50px;
border: 1px solid #8E8E8E;
display: block;
border-radius: 10px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -250px; }
#instructions p {
color: #fff;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;}
ul {
list-style: none;
padding: 0;
margin: 0;}
li {
height: 40px;
line-height: 40px;
width: 100%;
display: block;
font-family: 'Open Sans', sans-serif; text-indent: 20px;}
li:hover {
background: rgba(255,255,255,0.4);
cursor: pointer;}
.set3d{ margin: 0;
@include perspective( 800px );
@include perspective-origin ( 0% 50% );
height: 100%; width: 100%;
}
#trigger {position: absolute;
width: 50px;
height: 100%;
display: block;
right: -50px;
background: transparent;
top:0;}
#menu{
display: block;
position: fixed;
background: #333;
color: #eee;
height: 100%;
width: 320px;
top: 0;
left: 0px;
z-index: 2;
margin: 0px;
padding: 20px;
-webkit-transform: rotateY( -30deg ) translateX( -100% );
-moz-transform: rotateY( -30deg ) translateX( -100% );
-ms-transform: rotateY( -30deg ) translateX( -100% );
-o-transform: rotateY( -30deg ) translateX( -100% );
transform: rotateY( -30deg ) translateX( -100% );
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform .4s ease;
-moz-transition: -moz-transform .4s ease;
-ms-transition: -ms-transform .4s ease;
-o-transition: -o-transform .4s ease;
transition: transform .4s ease;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
#menu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#content {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-transform .4s ease;
-moz-transition: -moz-transform .4s ease;
-ms-transition: -ms-transform .4s ease;
-o-transition: -o-transform .4s ease;
transition: transform .4s ease;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
width: 100%; height: 100%; overflow-y: auto;}
.active #content{
-webkit-transform: translateX( 300px ) rotateY( 15deg );
-moz-transform: translateX( 300px ) rotateY( 15deg );
-ms-transform: translateX( 300px ) rotateY( 15deg );
-o-transform: translateX( 300px ) rotateY( 15deg );
transform: translateX( 300px ) rotateY( 15deg );
}