@font-face { font-family: 'Lastwaerk black'; src: url('/sl/fonts/aac/Lastwaerk black.ttf'); }
@font-face { font-family: 'Funhouse'; src: url('/sl/fonts/Funhouse.ttf'); }

html, body { width: 100%; display: inline-block; margin: 0 auto; padding: 0; border: 0; outline: 0; 
	background: #000;
	background-image: url('/media/nn.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /*background-size: cover;*/
    color: rgba(200,150,0,0.7); text-shadow: none; text-align: left; font-size: 1em; font-family: 'Lastwaerk black','Funhouse'; }
h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h5 { font-size: .83em; } h6 { font-size: .75em; }
a { color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }
a:hover { color: #eec600; /*text-shadow: 0 -2px 0 #000fff, 2px 0 0 #000f00, 0 2px 0 #0000f0, -2px 0 0 #00000f;*/ }
span { white-space: nowrap; color: #000; text-shadow: 0 -5px 0 #ff0, 5px 0 0 #ff0, 0 5px 0 #ff0, -5px 0 0 #ff0; }

div.header { float: left; width: 100%; height: auto; background: rgba(0,0,0,0.5); }
header { float: left; width: 30%; min-height: 150px; overflow: hidden; }
header img { position: relative; width: 98%; height: auto; max-height: 100%; margin: 0 1%; z-index: 100; }
.header header h1 { position: relative; z-index: 100; float: left; margin: 0; padding: 0; }
.header header h1 a { position: relative; float: left; display: inline-block; height: 100px; margin: 0; padding: 5px 0 0 0; text-decoration: none; }


#c { width: 20%; top: -32px; font-size: 4.0em; }
#h { width: 16.5%; top: -22px; font-size: 3.2em; }
#o { width: 15%; top: -22px; font-size: 2.95em; }
#oo { width: 13.5%; top: -20px; font-size: 2.55em; }
#f { width: 11.5%; top: -12px; font-size: 2.1em; }
#stop { position: absolute; float: right; right: 21.6%; top: -15px; font-size: 2.1em; width: 5%; }
#t { width: 9%; top: -8px; font-size: 1.7em; }
#ooo { width: 8%; top: -6px; font-size: 1.45em; }
#p { width: 5%; top: -3px; font-size: 1.15em; }

.header header:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0px;
  top: -40px;
  width: 30%;
  height: 120px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(-10.5deg);
  -moz-transform: skewY(-10.5deg);
  -ms-transform: skewY(-10.5deg);
  -o-transform: skewY(-10.5deg);
  transform: skewY(-10.5deg);
  border-bottom: 4px solid #888; 
  box-shadow: -2px 8px 10px 0px #111;
}
nav { float: left; width: 70%; min-height: 150px; overflow: hidden; }
nav a { position: relative; float: left; width: 10%; margin: 0 1% 0 0; text-decoration: none; color: #000; text-align: center; font-size: 0.9em; z-index: 100; }
nav a img { width: 100%; float: left; margin: 0; }
nav:after {
  content: '';
  position: absolute;
  z-index: 1;
  right: 0px;
  top: -60px;
  width: 70%;
  height: 160px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(7.1deg);
  -moz-transform: skewY(7.1deg);
  -ms-transform: skewY(7.1deg);
  -o-transform: skewY(7.1deg);
  transform: skewY(7.1deg);
  border-bottom: 4px solid #888; 
  box-shadow: -0px 8px 10px 0px #111;
}

#middle { float: left; clear: both; width: 100%; min-height: 80vh; height: auto; margin: 0; padding: 0; background: rgba(0,0,0,0.5); color: rgba(200,150,0,0.7);}

.funk { clear: both; float: left; width: 78%; margin: 0 11% 10px 11%; }

.main { float: left; width: 70%; }
.side { float: left; width: 30%; }


article { position: relative; float: left; width: 90%; margin: 10% 1% 15% 1%; padding: 1%; border: 4px solid #999; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
box-shadow: -8px 8px 10px 0px #111; color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }

article header { position: relative; width: 100%; height: auto; min-height: auto; overflow: visible; z-index: 100; }

article header h1 { float: left; position: relative; display: inline-block; max-width: 50%; margin: -10% 0 1% 5%; padding: 2%; border: 2px solid #888; background: #222; box-shadow: 1px 1px 10px 0 #000; }

article header h2 { float: right; display: inline-block; max-width: 30%; margin: -8% 5% 0% 0; padding: 1% 2%; border: 2px solid #888; background: #303080; box-shadow: 1px 1px 10px 0 #000; font-size: 1.4em; }
article header h2 .feat { padding: 5px 0 0 0; font-size: 0.8em; }

article section { clear: left; padding: 1% 4% 2% 4%; }
article section img {}
article section p .blob { display: inline; font-size: 1.15em; }
article section iframe {  }
article section .genres { float: right; clear: right; display: inline-block; width: 30%; margin: 0 0 30px 0; padding: 1% 2% 2% 2%; border: none; }
article section .genres a { position: relative; float: right; display: inline-block; width: 80%; margin: 0% 2% 8% 0; padding: 4%; border: 1px solid #888; background: #551955; box-shadow: 1px 1px 10px 0 #000; text-decoration: none; text-align: center; font-size: 0.9em; }
article section .genres a:after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  margin: 0% 1% 2% 0;
  left: -1px;
  bottom: -7px;
  height: 7px;
  background: #551955; 
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  border: 1px solid #888; 
  border-top: none;
  box-shadow: 1px 4px 6px 0px #111;
}
article footer { position: relative; height: auto; margin: 0; z-index: 100; background: none; }
article footer h3 {}
article footer h3 .author {}
article footer h3 .author img {}
article footer h3 time { clear: both; float: left; position: relative; display: inline-block; width: 40%; margin: -3% 0 -40px 5%; padding: 1.4% 2% 3% 2%; border: 1px solid #888; background: #311; box-shadow: 1px 1px 10px 0 #000; font-size: 0.8em; text-align: center; }
article footer h3 time:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -1px;
  top: -10px;
  width: 100%;
  height: 15px;
  background: #311;
  -webkit-transform: skewY(-2.0deg);
  -moz-transform: skewY(-2.0deg);
  -ms-transform: skewY(-2.0deg);
  -o-transform: skewY(-2.0deg);
  transform: skewY(-2.0deg);
  border: 1px solid #888; 
  border-bottom: none; 
}

article:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  top: -36px;
  width: 100%;
  height: 60px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(1.5deg);
  -moz-transform: skewY(1.5deg);
  -ms-transform: skewY(1.5deg);
  -o-transform: skewY(1.5deg);
  transform: skewY(1.5deg);
  border: 4px solid #888; 
  border-bottom: none; 
}
article:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  bottom: -36px;
  width: 100%;
  height: 60px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(-2.5deg);
  -moz-transform: skewY(-2.5deg);
  -ms-transform: skewY(-2.5deg);
  -o-transform: skewY(-2.5deg);
  transform: skewY(-2.5deg);
  border: 4px solid #888; 
  border-top: none;
  box-shadow: -8px 8px 10px 0px #111;
}

.pagecontainer { position: relative; float: left; width: 90%; margin: 10% 1% 15% 1%; padding: 1%; border: 4px solid #999; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
box-shadow: -8px 8px 10px 0px #111; color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }
.pagecontainer:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  top: -26px;
  width: 100%;
  height: 30px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(1.5deg);
  -moz-transform: skewY(1.5deg);
  -ms-transform: skewY(1.5deg);
  -o-transform: skewY(1.5deg);
  transform: skewY(1.5deg);
  border: 4px solid #888; 
  border-bottom: none; 
}
.pagecontainer:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  bottom: -20px;
  width: 100%;
  height: 30px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(-2.5deg);
  -moz-transform: skewY(-2.5deg);
  -ms-transform: skewY(-2.5deg);
  -o-transform: skewY(-2.5deg);
  transform: skewY(-2.5deg);
  border: 4px solid #888; 
  border-top: none;
  box-shadow: -8px 8px 10px 0px #111;
}
.pagecontainer header { position: relative; width: 10%; height: auto; min-height: auto; overflow: visible; z-index: 100; }
.pagecount h1 { float: left; position: relative; display: inline-block; margin: -10% 0 1% 1.4%; padding: 2%; border: 2px solid #888; background: #222; box-shadow: 1px 1px 10px 0 #000; }
.pagepos h2 { float: left; position: relative; display: inline-block; margin: -8% 0 1% 1.4%; padding: 1% 2%; border: 2px solid #888; background: #303080; box-shadow: 1px 1px 10px 0 #000; text-align: center; }
.pagepos h2 a { text-decoration: none; }


aside { position: relative; float: left; width: 90%; margin: 35% 1% 15% 1%; padding: 1%; border: 4px solid #999; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
box-shadow: -8px 8px 10px 0px #111; color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }

aside header { position: relative; width: 100%; height: auto; min-height: auto; overflow: visible; z-index: 100; }

aside header h2 { float: left; position: absolute; display: inline-block; margin: -20% 0 1% 7%; padding: 2%; border: 2px solid #888; background: #222; box-shadow: 1px 1px 10px 0 #000; }

aside section { padding: 5% 5% 5% 6%; }
aside section a.genres {  position: relative; float: left; display: inline-block; width: 42%; margin: 0% 2% 8% 1%; padding: 2% 2% 1% 2%; border: 1px solid #888; background: #551955; box-shadow: 1px 1px 10px 0 #000; text-decoration: none; text-align: center; font-size: 0.9em; }
aside section a.genres:after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  margin: 0% 1% 2% 0;
  left: -1px;
  bottom: -7px;
  height: 7px;
  background: #551955; 
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  border: 1px solid #888; 
  border-top: none;
  box-shadow: 1px 4px 6px 0px #111;
}
aside section p { margin: 0; padding: 1% 0; }
aside section img { width: 100%;  }
aside section p .blob { display: inline; font-size: 1.15em; }
aside section iframe { float: right; display: inline-block; width: 96%; padding: 1% 2% 6% 2%; border: none; }
aside footer { position: relative; height: auto; z-index: 100; background: none; }
aside footer h3 {}
aside footer h3 .author {}
aside footer h3 .author img {}
aside footer h3 time { float: left; position: absolute; display: inline-block; margin: -3% 0 1% 5%; padding: 1% 2% 2% 2%; border: 1px solid #888; background: #311; box-shadow: 1px 1px 10px 0 #000; }
aside footer h3 time:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -1px;
  top: -10px;
  width: 100%;
  height: 15px;
  background: #311;
  -webkit-transform: skewY(-2.0deg);
  -moz-transform: skewY(-2.0deg);
  -ms-transform: skewY(-2.0deg);
  -o-transform: skewY(-2.0deg);
  transform: skewY(-2.0deg);
  border: 1px solid #888; 
  border-bottom: none; 
}

aside:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  top: -36px;
  width: 99.9%;
  height: 40px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(-1.5deg);
  -moz-transform: skewY(-1.5deg);
  -ms-transform: skewY(-1.5deg);
  -o-transform: skewY(-1.5deg);
  transform: skewY(-1.5deg);
  border: 4px solid #888; 
  border-bottom: none; 
}
aside:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -4px;
  bottom: -36px;
  width: 99.9%;
  height: 40px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  border: 4px solid #888; 
  border-top: none;
  box-shadow: -8px 8px 10px 0px #111;
}

input#email, input#search { width: 100%; height: 30px; background: none; border: none; color: #0f0; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }
textarea:focus, input:focus{ outline: none; color: #0f0; }
input[placeholder], [placeholder], *[placeholder] {
    color: #cdcdcd !important; text-shadow: 5px 5px 30px rgba(0,0,0,0.5) !important; font-size: 1.1em; }
::placeholder { color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }
}
.invite { width: 100%; margin: 0 0px 0px 0px; padding: 0; }
.snips { display: block; clear: both; margin: 0 10px 30px 10px; padding: 10px 15px 10px 15px; text-align: center; overflow: hidden;}
.hr .snips { clear: right; margin: 0 10px 30px 10px; padding: 10px 15px 10px 15px; text-align: center; }
.snips h2 { width: 100%; font-family: 'Orbitron Light'; }
.email { height: 30px; margin: 3% 0; padding: 0 12px 0 15px; border: 1px solid #888; box-shadow: -2px 2px 10px 0px #111; }
.email input#email { width: 88%; color: #f00;}
.invite a { float: left; font-size: 1.2em; margin: 1% 0 6% 0; padding: 10px 20px; border: 1px solid #888; box-shadow: -2px 2px 10px 0px #111; text-decoration: none; }
#subscribe { float: left; font-size: 1.2em; font-weight: 600; font-family: 'Lastwaerk black','Funhouse'; margin: 1% 0 6% 0; padding: 10px 20px; border: 1px solid #888; box-shadow: -2px 2px 10px 0px #111; text-decoration: none; background: none; color: #cdcdcd; text-shadow: 5px 5px 30px rgba(0,0,0,0.5); }
.search { height: 30px; margin: 0 0px 0px 0px; padding: 0 20px 0 15px; border: 1px solid #888; box-shadow: -2px 2px 10px 0px #111; }
input#search { width: 88%; }
.search img { width: 12%; display: inline-block; float: right; max-height: 22px; padding: 4px 0 10px 0; }












.youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(125%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url('/media/play.png') no-repeat;
        cursor: pointer;
    }









.footer { position: relative; z-index: 50; clear: both; float: left; width: 100%; height: 100px; padding: 180px 0 0 0; background: rgba(0,0,0,0.5); overflow: hidden; }
.beginning { float: left; position: relative; z-index: 49; clear: both; margin: -100px 0 0 66%; padding: 0 0 0px 0; text-align: center; /*background: rgba(0,0,0,0.5);*/ }
.beginningz { float: left; position: relative; z-index: 100; clear: both; margin: -100px 0 0 66%; padding: 0 0 0px 0; text-align: center; /*background: rgba(0,0,0,0.5);*/ }
.beginning a, .beginningz a { position: absolute; float: left; display: inline-block; margin: -32px 0 0 0%; padding: 0px 20px; z-index: 999; text-decoration: none; }
.beginning a h2, .beginningz a h2 { margin: 0; text-decoration-line: none;  position: relative; z-index: 100; }
.footer .beginning a:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -120%;
  top: 20px;
  width: 170%;
  height: 100px;
  background: #311;
  -webkit-transform: skewY(-28deg);
  -moz-transform: skewY(-28deg);
  -ms-transform: skewY(-28deg);
  -o-transform: skewY(-28deg);
  transform: skewY(-28deg);
  border-top: 1px solid #888; 
  box-shadow: -0px -7px 0px 0px #111;
}
.footer .beginning a:after {
  content: '';
  position: absolute;
  z-index: 1;
  right: -120%;
  top: 20px;
  width: 170%;
  height: 100px;
  background: #311;
  -webkit-transform: skewY(28deg);
  -moz-transform: skewY(28deg);
  -ms-transform: skewY(28deg);
  -o-transform: skewY(28deg);
  transform: skewY(28deg);
  border-top: 1px solid #888; 
  box-shadow: -0px -7px 0px 0px #111;
}
.footer footer { clear: both; float: left; width: 100%; height: 00px; margin: -200px 0 0 0; padding: 0; background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7); }
.footer footer .designz h3 { position: relative; float: left; width: 90%; margin: 0px 1% 0 0; padding: 23px 0 5px 30px; text-decoration: none; color: #000; text-align: left; z-index: 10; }

.copy, .design { position: absolute; z-index: 50; height: 300px; margin: 0; padding: 2% 0%; text-align: left; overflow: hidden; }
.copy { width: 70%; }
.copyz { position: relative; float: left; width: 70%; height: 274px; margin: 0 0 0 0px; padding: 0px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }

.footertop { position: relative; float: left; clear: left; width: 30%; height: 136px; margin: 0; padding: 0px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }
.footertop a { position: relative; float: left; display: inline-block; height: 100px; margin: 0; padding: 5px 0 0 0; text-decoration: none; }
.footersocial { position: relative; float: left; width: 30%; height: 36px; margin: 0 0 0 0; padding: 100px 0 0 0; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }
.footersocial img { width: 6%; margin-left: 1%; }

.copyz .official { position: relative; float: left; width: 30%; height: 274px; margin: 0 1.5% 0 10%; padding: 0px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }
.copyz .pages { position: relative; float: left; width: 25%; height: 274px; margin: 0 1.5%; padding: 20px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }
.copyz .contact { position: relative; float: left; width: 25%; height: 274px; margin: 0 1.5%; padding: 20px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; overflow: hidden; }
.copyz .official a, .copyz .pages a, .copyz .contact a { float: left; clear: left; padding: 5px 15px; text-decoration: none; }
.copyz .official h2, .copyz .pages h2, .copyz .contact h2 { float: left; clear: left; margin: 0; padding: 0; }

.design { right: 0; float: right; width: 30%; text-align: right; }
.designz { position: relative; float: right; width: 30%; height: 274px; margin: 0 0 0 0px; padding: 20px 0px; text-decoration: none; color: #000; text-align: left; z-index: 119; box-shadow: -0px 8px 10px 0px #111; overflow: hidden; }

footer .copy:after {
  content: '';
  position: absolute;
  overflow: hidden;
  z-index: 1;
  left: 0px;
  bottom: -60px;
  width: 100%;
  height: 320px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(7.1deg);
  -moz-transform: skewY(7.1deg);
  -ms-transform: skewY(7.1deg);
  -o-transform: skewY(7.1deg);
  transform: skewY(7.1deg);
  border-top: 4px solid #888; 
  box-shadow: -0px -8px 10px 0px #111;
}
footer .design:after {
  content: '';
  position: absolute;
  overflow: hidden;
  z-index: 1;
  right: 0px;
  bottom: -80px;
  width: 100%;
  height: 320px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
  -webkit-transform: skewY(-10.5deg);
  -moz-transform: skewY(-10.5deg);
  -ms-transform: skewY(-10.5deg);
  -o-transform: skewY(-10.5deg);
  transform: skewY(-10.5deg);
  border-top: 4px solid #888; 
  box-shadow: -0px -8px 10px 0px #111;
}


::-webkit-scrollbar { background: rgba(0,0,0,1); }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,1); border-radius: 0; }
::-webkit-scrollbar-thumb { background: rgba(143,2,34,1.0); border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,1.0); 
	font-size: 2em; /* This controls the size. */
	display: inline-block;
	width: 0.2em;
	height: 0.4em;
	border: 0.05em solid rgba(136,136,136,0.7);
	position: relative;
	border-radius: 0em;
	z-index: 1;}

@media only screen and (min-width: 1381px) and (max-width: 1920px) {}
@media only screen and (min-width: 1201px) and (max-width: 1380px) {}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {}
@media only screen and (min-width:  769px) and (max-width: 1024px) {}
@media only screen and (min-width:  601px) and (max-width:  768px) {}
@media only screen and (min-width:  481px) and (max-width:  600px) {}
@media only screen and (min-width:  321px) and (max-width:  480px) {}
@media only screen and (min-width:  100px) and (max-width:  320px) {}