/* SHAGRATH © 2014 */

@charset "utf-8";

@font-face
{
	font-family: DINWeb-Light;
	src: url(typefaces/DINWeb-Light.eot);
	font-weight: 400!important;
	font-style: normal
}

@font-face
{
	font-family: DINWeb-Light;
	src: url(typefaces/DINWeb-Light.woff) format("woff");
	font-weight: 400!important;
	font-style: normal
}

body
{
	margin: 0;
	min-width: 980px;
	padding: 0;
	padding-top: 82px;
	cursor: default;
	background-color: #333;
}

p { margin: 0 0 20px 0; }

p, ul
{
	font-family: "Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust: 0.488;
	font-weight: 200;
	font-style: normal;
}

img { border: 0; }

h1, #pixels
{
	font-family: "Museo 900", Verdana, serif;
	font-size-adjust: 0.40;
	font-weight: 700;
	font-style: normal;
}

h2
{
	font-family: "Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust: 0.531;
	font-weight: 500;
	font-style: normal;
}

#header
{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: #1d1d1d;
	height: 82px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}

#nav
{
	display: block;
	position: absolute;
	height: 20px;
	width: 960px;
	margin-top: 15px;
	z-index: 10;
}

#leftnav
{
	display: block;
	height: 20px;
	width: 350px;
	float: left;
}

#rightnav
{
	display: block;
	height: 20px;
	width: 350px;
	float: right;
}

#leftnav a, #rightnav a
{
	display: block;
	font-family: DINWeb-Light, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #bbb;
	text-decoration: none;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

#leftnav a:hover, #rightnav a:hover { color: #fff; }

#leftnav span, #rightnav span
{
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #444;
	text-decoration: none;
	margin: 0 28px;
}

#leftnav a, #leftnav span { float: left; }

#rightnav a, #rightnav span { float: right; }

#logo
{
	display: block;
	position: absolute;
	height: 52px;
	width: 111px;
	margin-left: 425px;
	z-index: 20;
}

#logo a
{
	display: block;
	height: 52px;
	width: 111px;
	border: none;
	background-image: url(sprites/asasi.png);
	background-repeat: no-repeat;
}

#recorder
{
	display: block;
	position: absolute;
	font-size: 1px;
	height: 10px;
	width: 10px;
	margin-left: 526px;
	margin-top: 42px;
	background-color: #1d1d1d;
	z-index: 201;
	-webkit-animation: pulsate 2s;
	-webkit-animation-iteration-count: infinite;
	opacity: 0.0;
}
 @-webkit-keyframes 
pulsate { 0% {
opacity: 0.0;
}
 25% {
opacity: 1.0;
}
 50% {
opacity: 0.0;
}
 100% {
opacity: 0.0;
}
}

#headspace
{
	display: block;
	width: 960px;
	height: 51px;
	margin: auto;
	margin-top: 15px;
}

.section-jump
{
	position: absolute;
	width: 45px;
	height: 45px;
	width: 100%;
	bottom: 15px;
	left: 0px;
}

.section-jumpup
{
	position: absolute;
	width: 45px;
	height: 45px;
	width: 100%;
	top: 15px;
	left: 0px;
}

.section-jump a, .section-jumpup a
{
	display: block;
	height: 45px;
	width: 45px;
	margin: 0 auto;
	border: none;
	background-image: url(sprites/arrow_down_home.png);
	background-repeat: no-repeat;
}

.section-jump a.jumpup, .section-jumpup a.jumpup { background-image: url(sprites/arrow_up_home.png); }

.section-jumpup a.jumpup
{
	opacity: 0.3;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

.section-jumpup a.jumpup:hover { opacity: 1; }

/*boxes*/



.bx-midpad-intro { padding-top: 0px; }

.bx-midshade-intro
{
	width: 960px;
	height: 540px;
	background: url(sprites/shadek.png);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -480px;
	margin-top: -300px;
}

.bx-intro-media
{
	position: absolute;
	z-index: 12;
	width: 860px;
	height: 440px;
	background-color: #000;
	margin-top: 50px;
	margin-left: 50px;
	background-image: url(sprites/video_02.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.bx-intro-caption
{
	position: absolute;
	z-index: 14;
	width: 860px;
	height: 90px;
	font-family: "DINWeb-Light", sans-serif;
	text-align: center;
	line-height: 45px;
	font-size: 45px;
	color: #fff;
	margin-top: 350px;
	margin-left: 50px;
	text-align: center;
	overflow: hidden;
	opacity: 1;
	text-shadow: 0px 0px 10px #000;
}

.bx-intro-play
{
	position: absolute;
	z-index: 16;
	height: 112px;
	width: 112px;
	margin-top: 214px;
	margin-left: 424px;
}

.bx-intro-play a
{
	display: block;
	height: 112px;
	width: 112px;
	border: 0px;
	background-image: url(sprites/media_play.png);
	opacity: 0.8;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	-webkit-animation: pulsateplay 5s;
	-webkit-animation-iteration-count: infinite;
}
 @-webkit-keyframes 
pulsateplay { 0% {
opacity: 0.5;
}
 50% {
opacity: 0.8;
}
 100% {
opacity: 0.5;
}
}

.bx-midpad { padding-top: 0px; }

.bx-midshade
{
	width: 960px;
	height: 470px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -480px;
	margin-top: -265px;
	overflow: hidden;
}

.bx-sub-lt
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -265px;
	height: 470px;
	width: 40px;
	margin-left: -540px;
	z-index: 20;
}

.bx-sub-rt
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -265px;
	height: 470px;
	width: 40px;
	margin-left: 500px;
	z-index: 20;
}

.bx-sub-lt a, .bx-sub-rt a
{
	visibility: hidden;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	display: block;
	margin-top: 213px;
	opacity: 0.6;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	height: 40px;
	width: 40px;
}

.bx-sub-lt a:hover, .bx-sub-rt a:hover { opacity: 1; }

.bx-sub-lt a
{
	float: left;
	background-image: url(sprites/arrow_left_home-k.png);
	background-position: -2px 0;
}

.bx-sub-rt a
{
	float: right;
	background-image: url(sprites/arrow_right_home-k.png);
	background-position: 1px 0;
}

.bx-mid-cardstack
{
	display: block;
	height: 470px;
	width: 10000px;
}

.bx-white-card
{
	width: 300px;
	height: 470px;
	background-color: #fff;
	display: block;
	float: left;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	margin-right: 30px;
}

.bx-card-artwork
{
	width: 300px;
	height: 169px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-border-radius-topleft: 3px;
	-moz-border-radius-topleft: 3px;
	border-top-left-radius: 3px;
	-webkit-border-radius-topright: 3px;
	-moz-border-radius-topright: 3px;
	border-top-right-radius: 3px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	position: absolute;
	z-index: 10;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

.bx-card-artwork:hover { height: 300px; }

.bx-card-data-foot
{
	display: block;
	width: 270px;
	height: 24px;
	margin-left: 15px;
	overflow: hidden;
	background-color: #fff;
	padding-top: 28px;
}

.bx-card-data-wrap
{
	display: block;
	width: 270px;
	height: 220px;
	margin-top: 185px;
	margin-left: 15px;
	overflow: hidden;
}

.bx-card-data-wrap h1
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #333;
	line-height: 32px;
	font-size: 28px;
	margin: 0;
	padding: 0;
	margin: 15px 0;
}

.bx-card-data-wrap p
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #444;
	line-height: 20px;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

.bx-midpad2 { padding-top: 0px; }

.bx-midshade2
{
	position: absolute;
	width: 850px;
	height: 450px;
	background: url(sprites/shadek.png);
	top: 50%;
	left: 50%;
	margin-left: -425px;
	margin-top: -195px;
}

.bx-midshade3
{
	position: absolute;
	width: 850px;
	height: 450px;
	background: url(sprites/shadek.png);
	top: 50%;
	left: 50%;
	margin-left: -425px;
	margin-top: -225px;
}

.bx_about_scr
{
	position: relative;
	width: 285px;
	height: 450px;
	overflow: hidden;
}

.bx_about_lt
{
	display: block;
	width: 285px;
	height: 450px;
	float: left;
	overflow: hidden;
}

.bx_about_mid
{
	display: block;
	width: 280px;
	height: 450px;
	float: left;
	background-image: url(sprites/about_photo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.bx_about_rt
{
	display: block;
	width: 285px;
	height: 450px;
	float: left;
}

.bx-about-pad { padding: 20px 15px 15px 15px; }

.bx-about-pad h1
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #be410b;
	line-height: 32px;
	font-size: 28px;
	margin: 0;
	padding: 0;
	margin: 15px 0;
}

.bx-about-pad p
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #ccc;
	line-height: 17px;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

.bx-sub-body2
{
	display: block;
	float: left;
	width: 810px;
	margin: 0 20px;
	padding: 55px 0;
	text-align: center;
}

.bx-sub-body2 h1
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	line-height: 34px;
	font-size: 34px;
	margin: 0;
	padding: 0;
}

.bx-sub-body2 h2
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	line-height: 34px;
	font-size: 34px;
	margin: 0;
	padding: 0;
}

.bx-sub-body2 p
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	line-height: 20px;
	font-size: 14px;
	margin-top: 20px;
	padding: 0 30px;
}

.bx-artist-paras
{
	display: block;
	height: 210px;
}

.bx-artist-thumbs
{
	margin-top: 20px;
	display: block;
	height: 55px;
}

.bx-artist-thumbs a
{
	text-decoration: none;
	display: inline-block;
	height: 55px;
	width: 75px;
}

.bx-artist-thumbs a:hover .bx-artist-large-media
{
	opacity: 1;
	margin-top: -420px;
	visibility: visible;
}

.bx-artist-thumbs a .bx-artist-large-media
{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	margin-top: -410px;
	margin-left: -261px;
	border: 6px solid rgba(255,255,255,0.1);
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
	height: 400px;
	-o-transition: .2s;
	-ms-transition: .2s;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	transition: .5s;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.bx-artist-nav
{
	display: block;
	height: 100px;
	width: 850px;
	position: absolute;
	margin-top: -80px
}

.bx-artist-nav a
{
	display: block;
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	line-height: 22px;
	font-size: 20px;
	float: left;
	text-decoration: none;
	opacity: 0.5;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	text-shadow: 0px 0px 10px #000;
}

.bx-artist-nav a:hover { opacity: 1; }

.bx-artist-nav span
{
	display: block;
	float: left;
	margin: 0 15px;
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	line-height: 22px;
	font-size: 24px;
	opacity: 0.5;
}

.bx-sub-topball
{
	display: block;
	height: 100px;
	width: 850px;
	position: absolute;
	margin-top: -40px
}

.bx-sub-topball img
{
	display: block;
	margin: 0 auto;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.bx-contacttitle
{
	display: block;
	position: absolute;
	margin-left: 50px;
	margin-top: 30px;
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	font-size: 34px;
}

.bx-contactform
{
	display: block;
	position: absolute;
	width: 750px;
	margin-left: 50px;
	margin-top: 110px;
	height: 300px;
}

.bx-contactform-bar
{
	display: block;
	margin-bottom: 20px;
	clear: both;
}

.bx-contactform input[type=text]
{
	width: 345px;
	height: 40px;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #000;
	background-color: #fff;
	font-size: 18px;
	padding: 0 10px;
	outline: none;
}

.bx-contactform textarea
{
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	color: #000;
	background-color: #fff;
	padding: 10px;
	outline: none;
	width: 730px;
	height: 150px;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	resize: none;
	margin: 0;
}

.bx-contactform input[type=button]
{
	width: 100px;
	height: 40px;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: "DINWeb-Light", sans-serif;
	font-weight: normal;
	color: #fff;
	background-color: #000;
	font-size: 18px;
	padding: 0 10px;
	outline: none;
	opacity: 0.8;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	cursor: pointer;
}

.bx-contactform input[type=button]:hover { opacity: 1; }

.in-pr { margin-right: 20px; }

#header, #intro, #second { width: 100%; }

#spotlight
{
	background: url(sprites/parallax_00.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#releases
{
	background: url(sprites/parallax_01.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#artists
{
	background: url(sprites/parallax_02.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#aboutus
{
	background: url(sprites/parallax_03.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#contactus
{
	background: url(sprites/parallax_04.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#fifth
{
	background: #aaa;
	margin: 0 auto;
	height: 175px;
	padding: 0;
	background-color: #000;
	height: 115px;
}

.bx-foothold
{
	width: 960px;
	height: 115px;
	background-color: #000;
	margin: 0 auto;
}

.bx-footpanel
{
	color: #bbb;
	font-family: DINWeb-Light, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	display: block;
	width: 240px;
	float: left;
	height: 100px;
	margin-top: 15px;
}

.bx-footpanel strong
{
	display: block;
	font-weight: normal;
	color: #fff;
	font-size: 14px;
	padding-bottom: 5px;
}

.bx-footpanel span
{
	display: block;
	font-size: 12px;
	line-height: 16px;
}

.bx-footpanel a
{
	display: block;
	font-family: DINWeb-Light, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #bbb;
	text-decoration: none;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

.bx-footpanel a:hover { color: #fff; }

.slide
{
	width: 100%;
	display: block;
	background-color: #333;
	margin: 0 auto;
	height: 660px;
	padding: 0;
	-moz-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.1);
	box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.1);
	min-width: 1230px;
}

.story
{
	position: relative;
	margin: 0 auto;
	width: 100%;
	color: #fff;
	display: block;
	height: 100%;
}

.story .float-left, .story .float-right
{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;
}

/*! perfect-scrollbar - v0.4.6
* http://noraesae.github.com/perfect-scrollbar/
* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */



.ps-container .ps-scrollbar-x-rail
{
	position: absolute;
	bottom: 3px;
	height: 8px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity: 0;
	filter: alpha(opacity=0);
	-o-transition: background-color .2s linear, opacity .2s linear;
	-webkit-transition: background-color.2s linear, opacity .2s linear;
	-moz-transition: background-color .2s linear, opacity .2s linear;
	transition: background-color .2s linear, opacity .2s linear
}

.ps-container:hover .ps-scrollbar-x-rail, .ps-container.hover .ps-scrollbar-x-rail
{
	opacity: .6;
	filter: alpha(opacity=60)
}

.ps-container .ps-scrollbar-x-rail:hover, .ps-container .ps-scrollbar-x-rail.hover
{
	background-color: #eee;
	opacity: .9;
	filter: alpha(opacity=90)
}

.ps-container .ps-scrollbar-x-rail.in-scrolling
{
	opacity: .9;
	filter: alpha(opacity=90)
}

.ps-container .ps-scrollbar-y-rail
{
	position: absolute;
	right: 3px;
	width: 8px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity: 0;
	filter: alpha(opacity=0);
	-o-transition: background-color .2s linear, opacity .2s linear;
	-webkit-transition: background-color.2s linear, opacity .2s linear;
	-moz-transition: background-color .2s linear, opacity .2s linear;
	transition: background-color .2s linear, opacity .2s linear
}

.ps-container:hover .ps-scrollbar-y-rail, .ps-container.hover .ps-scrollbar-y-rail
{
	opacity: .6;
	filter: alpha(opacity=60)
}

.ps-container .ps-scrollbar-y-rail:hover, .ps-container .ps-scrollbar-y-rail.hover
{
	background-color: #000;
	opacity: .9;
	filter: alpha(opacity=90)
}

.ps-container .ps-scrollbar-y-rail.in-scrolling
{
	opacity: .9;
	filter: alpha(opacity=90)
}

.ps-container .ps-scrollbar-x
{
	position: absolute;
	bottom: 0;
	height: 8px;
	background-color: #aaa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-o-transition: background-color .2s linear;
	-webkit-transition: background-color.2s linear;
	-moz-transition: background-color .2s linear;
	transition: background-color .2s linear
}

.ps-container.ie6 .ps-scrollbar-x { font-size: 0 }

.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x { background-color: #999 }

.ps-container .ps-scrollbar-y
{
	position: absolute;
	right: 0;
	width: 8px;
	background-color: #aaa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-o-transition: background-color .2s linear;
	-webkit-transition: background-color.2s linear;
	-moz-transition: background-color .2s linear;
	transition: background-color .2s linear
}

.ps-container.ie .ps-scrollbar-y { font-size: 0 }

.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y { background-color: #999 }




/* end */