@font-face
{
 font-family:'meatfist';
 src:url('meatfist.woff') format('woff');
}
body,html
{
 height:100%;
 margin:0;
 padding:0;
}
body
{
 background-repeat:no-repeat;
 background-position:center center;
 background-attachment:fixed;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
body.meatfist
{
 background-image:url('../img/meatfist.png');
}
body.music
{
 background-image:url('../img/music.png');
}
body.pictures
{
 background-image:url('../img/pictures.png');
}
body.video
{
 background-image:url('../img/video.png');
}
body.biography
{
 background-image:url('../img/biography.png');
}
#page
{
 position:relative;
 height:100%;
}
#meatfist #garage
{
 position:absolute;
 height:100%;
 width:100%;
 background-image:url('../img/garage.png');
 background-position:center center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
 bottom:0px;
}
#meatfist #nav
{
 position:absolute;
 width:240px;
 left:50%;
 top:16%;
 margin-left:-120px;
 z-index:2;
}
#meatfist #nav a
{
 display:block;
 font-family:meatfist,verdana,arial,helvetica,sans-serif;
 font-size:2.4em;
 font-weight:bold;
 text-decoration:none;
 color:#664f14;
}
#meatfist #nav a:hover
{
 color:#ffffff;
}
#meatfist #history
{
 position:absolute;
 display:none;
 margin:20px;
 padding:20px;
 width:60%;
 left:20%;
 background:#3a0601;
 font-family:meatfist,verdana,arial,helvetica,sans-serif;
 font-size:1.8em;
 z-index:4;
}
#meatfist #history #kill
{
 float:right;
 color:#ffffff;
 font-size:1.2em;
 cursor:pointer;
}
#meatfist #history a
{
 text-decoration:none;
 cursor:default;
}
#meatfist #logo
{
 position:absolute;
 display:block;
 width:348px;
 height:214px;
 right:4%;
 bottom:4%;						 
 overflow:hidden;
 background-image:url('../img/meatfistlogo.png');
 background-position:0 0;
 z-index:2;
}
#meatfist #logo:hover
{
 background-position:0 -218px;
 cursor:pointer;
								
}
#music .icon
{
 float:left;
 cursor:pointer;			
}
#music .logo
{
 clear:both;
}
#music #panel
{
 overflow:visible;
}
		  
 
				
			  
			 
			
			 
		  
			  
										   
 
#music #tune
{
 position:fixed;
 display:block;
 float:right;
 right:4%;
 bottom:4%;
 color:#ecf2da;
 background:#3a0601;
 font-family:meatfist,verdana,arial,helvetica,sans-serif;
 font-size:4em;
}
#music #stop
{
/* position:absolute;*/
 width:200px;
 height:200px;
 margin:12px;
/* right:4%;
 top:200px;*/
 background:url('../img/stop.png') no-repeat;
 cursor:pointer;
}
#pictures #thumbs
{
 width:220px;
 margin:20px;
 -webkit-perspective:120px;
 perspective:120px;
}
#pictures .thum
{
 width:200px;
 height:150px;
 -webkit-clip-path:polygon(20% 10%,85% 30%,100% 100%,0% 100%);
 clip-path:polygon(20% 10%,85% 30%,100% 100%,0% 100%);
 background-position:center center;
}
#pictures .thum:hover
{
 cursor:pointer;
}

#video #cut
{
 float:left;
 width:122px;
 height:114px;
 background-image:url('../img/cut.png');
 margin-top:20px;
 margin-right:20px;
}
#video #player
{
 position:fixed;
 display:block;
 top:50%;
 left:50%;
 min-width:100%;
 min-height:100%;
 width:auto;
 height:auto;
 z-index:-2;
 transform:translateX(-50%) translateY(-50%);
 background:url('../img/video.png') no-repeat;
 background-size:cover;
 transition:1s opacity;
}
#video #mnu
{
 width:100%;
}
#video #vwhat
{
 background:url('../img/video/vwhat.png') top left no-repeat;
}
#video #vwhat:hover
{
 background:url('../img/video/owhat.gif') top left no-repeat;
}
#video #vstlk
{
 background:url('../img/video/vstlk.png') top left no-repeat;
}
#video #vstlk:hover
{
 background:url('../img/video/ostlk.gif') top left no-repeat;
}
#video #vbish
{
 background:url('../img/video/vbish.png') top left no-repeat;
}
#video #vbish:hover
{
 background:url('../img/video/obish.gif') top left no-repeat;
}
#video #vkiss
{
 background:url('../img/video/vkiss.png') top left no-repeat;
}
#video #vkiss:hover
{
 background:url('../img/video/okiss.gif') top left no-repeat;
}
#video #vart
{
 background:url('../img/video/vart.png') top left no-repeat;
}
#video #vart:hover
{
 background:url('../img/video/oart.gif') top left no-repeat;
}
#video .telly
{
 float:left;
 width:140px;
 height:114px;
 margin:40px;
 overflow:hidden;
}
#video .telly:hover
{
 cursor:pointer;
}
#biography #bio
{
 padding:40px;
}
#biography p
{
 color:#ecf2da;
 background:#3a0601;
 font-family:meatfist,verdana,arial,helvetica,sans-serif;
 font-size:1.4em;
}
.logo
{
 position:absolute;
 display:block;
 float:right;
 right:4%;
 top:4%;
 width:220px;
 height:138px;
 background:url('../img/logo.svg#svgView(viewBox(0,0,640,420))')top left no-repeat;				 
				 
}
.logo:hover
{
 cursor:pointer;
 background-position:bottom left;
}
.apictures
{
 margin-top:-10px;
}
.avideo
{
 margin-top:-10px;
 margin-left:36px;
}
.left
{
 float:left;
}
.right
{
 float:right;
}
.clr
{
 clear:both;
}