/* @override 
	http://dev.phatplastic.com/assets/css/main.css
	http://phatplastic.com/assets/css/main.css
*/

@font-face {
    font-family: 'Ultramagnetic';
    src: url('../fonts/ultramagnetic_bold-webfont.woff2') format('woff2'),
         url('../fonts/ultramagnetic_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'Ultramagnetic';
    src: url('../fonts/ultramagnetic-webfont.woff2') format('woff2'),
         url('../fonts/ultramagnetic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;

}


body {
	background: #2B2C2B url(../img/bg-head.jpg) no-repeat center top;
	font-family: Ultramagnetic, sans-serif;
	padding-bottom: 100px;
}

header {
	height: 470px;
	width: 100%;
	display: block;
}

header .hero {
	height: 490px;
	margin-left: auto;
    margin-right: auto;
	position: relative;
	display: block;
	width: 940px;
}

header .banner {
	width: 980px;
	background: url(../img/banner.png) no-repeat;
	height: 320px;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	top: 34px;
	z-index: 1;
	visibility: visible;
}

header .waveholder .info img {
	display: block;
	width: 30px;
	height: 30px;
	border-style: none;
	background-color: #d0d2d2;
	position: absolute;
	top: 50px;
	z-index: 5;
	left: 30px;
}

header .waveholder span.title {
	display: block;
	position: absolute;
	color: #fff;
	font-size: 15px;
	width: 100%;
	text-align: left;
	left: 71px;
	height: 20px;
	top: 47px;
	z-index: 2;
	text-transform: uppercase;
}

header .waveholder span.date {
	display: block;
	position: absolute;
	color: #d0d2d2;
	font-size: 12px;
	width: 100%;
	text-align: center;
	left: -108px;
	height: 20px;
	top: 66px;
	z-index: 2;
}

header .waveholder {
	overflow: hidden;
	height: 94px;
	width: 456px;
	position: absolute;
	display: block;
	top: 331px;
	right: -4px;
}

header #waveform {
	width: 100%;
	height: 185px;
	position: absolute;
	top: 130px;
}

header .waveholder a {
	width: 13px;
	height: 13px;
	background: url(../img/icon-stop.png) no-repeat;
	display: block;
	position: absolute;
	right: 0;
	top: 4px;
	z-index: 8;
}

header .shealan .body {
	width: 536px;
	height: 235px;
	position: absolute;
	background: url(../img/shealan-body.png) no-repeat;
	top: 232px;
	z-index: 5;
}

header .shealan .head {
	width: 114px;
	height: 120px;
	background: url(../img/shealan-head.png) no-repeat;
	z-index: 10;
	position: absolute;
	top: 200px;
	left: 299px;
}

header .redbull {
	background: url(../img/redbull.png) no-repeat;
	width: 110px;
	height: 60px;
	position: absolute;
	right: 3px;
	bottom: 39px;
	z-index: 1;
}

header .laptop {
	width: 150px;
	height: 140px;
	display: block;
	position: absolute;
	bottom: 40px;
	left: 45px;
	z-index: 7;
	cursor: pointer;
}

section {
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.playlist {
	width: 752px;
	height: 415px;
	display: none;
	z-index: 100;
	background: url(../img/laptop.png) no-repeat;
}

.playlist ul {
	background-color: #191919;
	width: 467px;
	position: absolute;
	left: 142px;
	bottom: 82px;
	height: 157px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: auto;
}

.playlist ul li {
	color: #fff;
	height: 20px;
	padding: 5px;
	text-transform: uppercase;
	border-bottom: 1px solid #2b2b2b;
	cursor: pointer;
	width: 442px;
	display: block;
	position: relative;
}

.playlist ul li.cat {
	text-indent: 3px;
	line-height: 22px;
	color: #a9a9a9;
}

.playlist ul li:hover {
	background-color: #a9a9a9;
}

.playlist ul li.cat:hover {
	background-color: transparent;
}

.playlist ul li a {
	text-decoration: none;
	color: #fff;
	height: 21px;
	display: inline-block;
	line-height: 22px;
	text-indent: 3px;
	width: 361px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.playlist ul li span.time {
	position: absolute;
	right: 8px;
	top: 7px;
	color: #777;
	letter-spacing: 0;
}

.playlist a.close-modal {
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
	right: -657px;
	width: 21px;
	background: url(../img/icon-close.png) no-repeat;
	height: 21px;
	text-indent: -9999px;
	overflow: hidden;
	top: -16px;
}

.playlist .display {
	width: 341px;
	height: 85px;
	position: absolute;
	left: 262px;
	top: 73px;
	text-transform: uppercase;
}

.playlist .display .readout {
	color: #a9a9a9;
	display: block;
}

.playlist .display .info {
	color: #5f5f5f;
	display: block;
	text-align: center;
	margin-top: 35px;
	font-size: 13px;
}

.playlist .display .name {
	color: #fff;
	font-size: 24px;
	display: block;
	overflow: hidden;
	height: 26px;
	text-overflow: ellipsis;
}

.playlist .display .released {
	color: #a9a9a9;
}

.playlist .display .time {
	color: #747474;
	position: absolute;
	left: -106px;
	display: inline-block;
	width: 70px;
	text-align: center;
	top: 58px;
}

section .sidebar {
	position: absolute;
	top: 17px;
	right: 0;
}

.listings {
	width: 310px;
	min-height: 30vh;
	margin: 0;
	position: relative;
	bottom: 36px;
	z-index: 0;
	background: #E80C8A url(../img/stain.png) no-repeat 282px 0;
	list-style-type: none;
	padding: 0 0 7px;
}

.listings ul {
	margin: 0;
	list-style-type: none;
	position: relative;
	bottom: 20px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
}

.listings ul li {
	border-bottom: 1px solid #BD1474;
	position: relative;
	height: 68px;
	text-shadow: #000000 1px 1px 0;
}

.listings ul li a.tickets {
	width: 16px;
	height: 15px;
	display: block;
	background-image: url(../img/icon-ticket.png);
	position: absolute;
	right: 24px;
	bottom: 11px;
}

.listings ul li a.link {
	width: 16px;
	height: 16px;
	background: url(../img/icon-link.png) no-repeat;
	display: block;
	position: absolute;
	right: 0;
	bottom: 10px;
}

.listings ul li span.tickets {
	width: 16px;
	height: 15px;
	display: block;
	background-image: url(../img/icon-ticket.png);
	position: absolute;
	right: 24px;
	bottom: 11px;
	opacity: 0.41;
}

.listings ul li span.link {
	width: 16px;
	height: 15px;
	display: block;
	position: absolute;
	right: 0;
	bottom: 11px;
	opacity: 0.41;
	background: url(../img/icon-link.png) no-repeat;
}

.listings ul li:last-child {
	border-bottom-style: none;
}

.listings ul li span.title {
	color: #fff;
	display: block;
	font-size: 24px;
	height: 23px;
	position: absolute;
	left: 0;
	top: 9px;
}

.listings ul li span.place {
	color: #fff;
	display: block;
	font-size: 19px;
	height: 16px;
	line-height: 26px;
	position: absolute;
	left: 0;
	top: 36px;
}

.listings a.beatnode {
	color: #fff;
	font-size: 14px;
	position: absolute;
	left: 15px;
	bottom: 14px;
	text-shadow: #000000 1px 1px 0px;
}

.listings a.beatnode i {
	margin-right: 5px;
}

.listings:before {
	width: 100%;
	height: 29px;
	content:  '';
	display: block;
	position: relative;
	bottom: 28px;
	background: url(../img/bg-top-diary.png) no-repeat left;
}

.listings:after {
	width: 100%;
	height: 16px;
	display: block;
	background: url(../img/fringe.png) no-repeat;
	position: absolute;
	z-index: 2;
	content:  '';
	bottom: -16px;
}

div.facebook {
	background-color: #3b3d3a;
	height: 215px;
	padding: 10px;
	position: relative;
	margin-top: 10px;
}

div.facebook iframe {
	position: relative;
	left: 2px;
}

div.body {
	padding-top: 90px;
	width: 590px;
}

div.body a.promo {
	display: block;
	margin-top: 10px;
}

.body h1 {
	color: #fff;
	padding: 0;
	margin: 28px 0;
	display: block;
	width: 100%;
	float: left;
	text-align: center;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 46px;
}

.body p {
	font-weight: nomral;
	color: #919191;
	width: 100%;
	font-size: 20px;
	line-height: 34px;
	text-shadow: #000000 1px 1px 0px;
}

.body p.links {
	font-size: 16px;
	color: #919191;
	text-align: center;
}

.body p.links a.soundcloud {
	width: 84px;
	height: 48px;
	display: inline-block;
	background-image: url(../img/icon-soundcloud.png);
	margin-left: 10px;
	position: relative;
	top: 12px;
	margin-right: 10px;
}

.body p.links a.twitter {
	width: 28px;
	display: inline-block;
	margin-left: 10px;
	position: relative;
	top: 8px;
	margin-right: 2px;
	background-image: url(../img/icon-twitter.png);
	height: 28px;
}

.body p.links a.facebook {
	width: 28px;
	display: inline-block;
	position: relative;
	top: 8px;
	margin-right: 3px;
	background-image: url(../img/icon-facebook.png);
	height: 28px;
}

.body p.links a.email {
	width: 27px;
	display: inline-block;
	position: relative;
	top: 8px;
	margin-right: 10px;
	background-image: url(../img/icon-email.png);
	height: 28px;
}

.body img {
	float: left;
	margin-right: 22px;
	border: 4px solid #686868;
}

.tracks ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 620px;
}

.tracks li {
	background-color: #494a49;
	margin: 0 10px 50px 0;
	width: 190px;
	height: 190px;
	float: left;
	display: block;
	position: relative;
}

.tracks li a {
	display: block;
	width: 170px;
	height: 170px;
	position: absolute;
	top: 10px;
	left: 10px;
	background-size: 100% auto !important;
	z-index: 0;
}

.tracks li .name {
	z-index: 1;
	position: absolute;
	display: inline-block;
	color: #fff;
	text-shadow: #000000 1px 1px 0px;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	font-size: 18px;
	bottom: -30px;
}

.bubble {
	position: absolute;
	width: 220px;
	height:  auto;
	padding: 15px;
	background: rgba(156,189,34,0.95);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	left: 447px;
	top: 200px;
	z-index: 7;
	color: #fff;
	text-shadow: #000000 1px 1px 0px;
	font-size: 21px;
	line-height: 25px;
	display: block;
}

.bubble:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 12px 15px 12px 0;
	border-color: transparent rgba(156,189,34,0.95);
	display: block;
	width: 0;
	z-index: 1;
	left: -15px;
	top: 50px;
}

.bassface {
    -webkit-animation-name: webkitbassface;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: mozbassface;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes webkitbassface {
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 8px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes mozbassface {
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 8px);}
    to {-moz-transform: translate(0, -0px);}    
}