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 );
}