/* ==|== primary styles =====================================================
   Author: Skuba Design Studio
   				-Jay Casteel

	For more information about:
	
	Standard Nested Formatting: http://na.isobar.com/standards/#_css_formatting
	Classes vs Ids: http://na.isobar.com/standards/#_classes_vs_ids
	
	!!!!!!!!! Please use the above guidelines when creating any code !!!!!!!!!
	
	If using CSS3 add the following "behavior" property after CSS3 styles for IE6-8 compatibility. See: http://css3pie.com/
	
	#someId {
		[ ...css3 properties... ]
		behavior: url('/assets/css/PIE.htc');
	}
	
	
	
	Using .less files
	
	
	1. Put you base variables in mixins.less (look at the starter variables for help)
	2. Put your main CSS in style.less
	3. Magic
	4. Fully styled website

			IMPORTANT!!!! YOU MUST USE MAMP TO PREVIEW FILES
			
			PART 2!!!! We are styling up from 320px to 980px (sometimes 1140px).
					This is so that mobile browsers don't load unnecessary elements (ie. huge
					images). It takes time to get used to, but I believe you.  For documentation
					check out:
					
					http://stuffandnonsense.co.uk/projects/320andup/
			
			PART 3!!!!! If you have issues with the CSS not reloading, delete styleLess.css

	
   ========================================================================== */
/*======================================
     MIXINS (VARIABLES)
  ===================================== */
/*yellow*/
@font-face {
  font-family: 'Alpha Quadrant';
  src: url('/assets/fonts/AlphaQuadrant.eot');
  src: url('/assets/fonts/AlphaQuadrant.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/AlphaQuadrant.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/AlphaQuadrant.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/AlphaQuadrant.svg#abc8ea4c247314180177db28f5778afd') format('svg');
  font-style: normal;
  font-weight: 400;
  
  /* IE9 Compat Modes */
  /* Legacy iOS */
}
@font-face {
  font-family: 'AkzidenzGroteskBELightCn';
  src: url('/assets/fonts/AkzidGroCFFLigCn.eot');
  src: url('/assets/fonts/AkzidGroCFFLigCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/assets/fonts/AkzidGroCFFLigCn.woff') format('woff'), /* Modern Browsers */ url('/assets/fonts/AkzidGroCFFLigCn.ttf') format('truetype'), /* Safari, Android, iOS */ url('/assets/fonts/AkzidGroCFFLigCn.svg#ec188195dda9b4288331974ee34535c9') format('svg');
  font-style: normal;
  font-weight: 200;
  
  /* IE9 Compat Modes */
  /* Legacy iOS */
}
.fontFamily {
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  color: #fff;
}
.titleText {
  font-family: "Alpha Quadrant", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  zoom: 1;
}
.lightGrey {
  color: #bbbbbb;
}
.darkGrey {
  color: #606060;
}
.transitionNone {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.transitionAll {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.coverImage {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.coverImageImportant {
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}
.hidden {
  display: none !important;
}
/* ===================================
		PUT YOUR 320px OPTIMIZED CODE HERE
	===================================== */
/** {
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-ms-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	behavior: url(PIE.htc);
}
*/
a {
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
  outline: none;
}
a:link {
  outline: none;
  color: #6e90ee;
}
a:active {
  outline: none;
  color: #6e90ee;
}
a:visited {
  outline: none;
  color: #6e90ee;
}
a:hover {
  outline: none;
  color: #49609f;
}
::selection {
  background: #4961a4;
  color: #606060;
}
::-moz-selection {
  background: #4961a4;
  color: #606060;
}
.noMarginTop {
  margin-top: 0 !important;
}
.noMarginBottom {
  margin-bottom: 0 !important;
}
/* NO JAVASCRIPT FIX */
.no-js #preloaderOverlay img {
  display: none;
}
.no-js #preloaderOverlay .no-jsFix {
  display: block;
  width: 400px;
  text-align: center;
  font-size: 20px;
  height: 113px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -184px;
  text-transform: uppercase;
  color: #4961a4;
}
.breakText {
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.hideText {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0%;
  color: transparent;
}
.centerText {
  text-align: center;
}
.clearBoth {
  clear: both;
}
.facebook {
  padding: 0;
}
.facebook a {
  padding: 20px 65px;
  background: url(/assets/img/facebook-icon-small.png) left center no-repeat;
}
/* ===================================
		START MAIN STYLES
===================================== */
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Alpha Quadrant", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  zoom: 1;
  font-size: 12px;
  /*	.transitionAll;*/
  font-weight: 300;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
body h1 {
  padding: 60px 0 0 0;
  font-family: "Alpha Quadrant", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  zoom: 1;
  color: #ff7a32;
  text-align: center;
  font-size: 150px;
  line-height: 70px;
  margin: 0;
}
body h2 {
  font-size: 90px;
  font-weight: normal;
  color: #73769b;
  margin: 0 0 10px 0;
  padding: 0;
  font-family: "Alpha Quadrant", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  zoom: 1;
  text-align: center;
  line-height: 50px;
}
body h3 {
  font-size: 52px;
  color: #73769b;
  width: 100%;
  text-align: center;
  line-height: 0;
  padding: 0px;
  font-family: "Alpha Quadrant", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  zoom: 1;
}
body h4 {
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin: 0;
}
body p {
  color: #606060;
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
  margin: 0;
  padding: 30px 0 30px 0;
}
body .stars {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -99999;
  min-height: 815px;
}
body .stars .background {
  background: url(../img/background2.jpg) repeat 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
body .stars .midground {
  background: url(../img/midground2.png) repeat 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
body .stars .foreground {
  background: url(../img/midground.png) repeat 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}
body .stars .wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 400px;
  height: 400px;
  margin: 20% auto 0 auto;
  position: relative;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-top: 200px;
}
body .stars .cube {
  margin: auto;
  position: relative;
  height: 400px;
  width: 400px;
  transform-style: preserve-3d;
}
body .stars .cube div {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  color: #fff;
  font: 10px arial;
  transition: transform 0.2s ease-in;
}
body .stars .cube .front {
  -ms-transform: translateZ(300px);
  transform: translateZ(300px);
  background: url(/assets/img/earth4/5.jpg) no-repeat 0 0;
}
body .stars .cube .back {
  -ms-transform: translateZ(-100px) rotateY(180deg);
  transform: translateZ(-100px) rotateY(180deg);
  background: url(/assets/img/earth4/1.jpg) no-repeat 0 0;
}
body .stars .cube .right {
  -ms-transform: rotateY(-270deg) translateX(100px);
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  background: url(/assets/img/earth4/4.jpg) no-repeat 0 0;
}
body .stars .cube .left {
  -ms-transform: rotateY(270deg) translateX(-100px);
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  background: url(/assets/img/earth4/2.jpg) no-repeat 0 0;
}
body .stars .cube .top {
  -ms-transform: rotateX(-270deg) translateY(-100px);
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
  background: url(/assets/img/earth4/3.jpg) no-repeat 0 0;
}
body .stars .cube .bottom {
  -ms-transform: rotateX(270deg) translateY(100px);
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
  background: url(/assets/img/earth4/6.jpg) no-repeat 0 0;
}
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
body .stars .cube {
  animation: rotate 20s infinite linear;
}
body .stars .wrap.playing .front {
  transform: translateZ(400px);
}
body .stars .wrap.playing .back {
  transform: translateZ(-200px) rotateY(180deg);
}
body .stars .wrap.playing .right {
  transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}
body .stars .wrap.playing .left {
  transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}
body .stars .wrap.playing .top {
  transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}
body .stars .wrap.playing .bottom {
  transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
body .content {
  position: relative;
  z-index: 10000;
  height: 100%;
  width: 100%;
}
body .content.home {
  min-height: 815px;
}
body .content.about {
  background: url(/assets/img/cover-bg-3.jpg) no-repeat 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  height: auto;
  padding-top: 50px;
}
body .content.about h2 {
  padding-top: 75px;
}
body .content.about .aboutCopy {
  width: 70%;
  margin: 0 auto;
}
body .content.about .aboutCopy.contact {
  padding-bottom: 60px;
}
body .content .playerWrapper .bbplayer {
  border: none;
  display: block;
  width: 364px;
  margin: 0 auto;
}
body .content .playerWrapper .bbplayer.playing .bb-rewind,
body .content .playerWrapper .bbplayer.playing .bb-forward {
  visibility: visible;
}
body .content .playerWrapper .bbplayer .bb-rewind,
body .content .playerWrapper .bbplayer .bb-forward {
  visibility: hidden;
}
body .content .playerWrapper .bbplayer .bb-trackTime,
body .content .playerWrapper .bbplayer .bb-trackLength,
body .content .playerWrapper .bbplayer .bb-trackTitle {
  display: none;
}
body .content .footer {
  position: absolute;
  bottom: 60px;
  width: 100%;
}
body .content .footer .buyLinks {
  width: 665px;
  margin: 0 auto;
}
body .content .footer h4.buyText {
  font-size: 48px;
}
body .content .footer .itunes {
  width: 326px;
  height: 121px;
  display: inline-block;
  background: url(/assets/img/apple-btn.png) no-repeat 0 0;
}
body .content .footer .amazon {
  width: 326px;
  height: 121px;
  display: inline-block;
  background: url(/assets/img/amazon-btn.png) no-repeat 0 0;
}
body .content #sc-widget {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -350px;
}
body .content .lyricsBox,
body .content .lyrics,
body .content .tracks {
  height: 650px;
  overflow: hidden;
}
body .content .lyrics,
body .content .tracks {
  overflow-y: auto;
}
body .content .lyrics::-webkit-scrollbar-track,
body .content .tracks::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #4961a4;
}
body .content .lyrics::-webkit-scrollbar,
body .content .tracks::-webkit-scrollbar {
  width: 10px;
  background-color: #4961a4;
}
body .content .lyrics::-webkit-scrollbar-thumb,
body .content .tracks::-webkit-scrollbar-thumb {
  background-color: #6e90ee;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
}
body .content .lyricsBox {
  width: 70%;
  margin: 0 auto 0 auto;
  padding: 50px 0 60px 0;
}
body .content .lyricsBox ul,
body .content .lyricsBox ol {
  margin: 0;
}
body .content .lyricsBox ul li,
body .content .lyricsBox ol li {
  margin: 0;
  padding: 0;
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  color: #fff;
  font-size: 30px;
}
body .content .lyricsBox ul li p,
body .content .lyricsBox ol li p {
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
}
body .content .lyricsBox .tracks {
  width: 30%;
  float: left;
}
body .content .lyricsBox .tracks li {
  margin-bottom: 20px;
  line-height: 28px;
  color: #6e90ee;
}
body .content .lyricsBox .tracks li.active {
  color: #ff7a32;
}
body .content .lyricsBox .tracks li.active a {
  color: #ff7a32;
  text-decoration: none;
  pointer: cursor;
  pointer-events: none;
}
body .content .lyricsBox .lyrics {
  width: 70%;
  float: right;
}
body .content .lyricsBox .lyrics li {
  display: none;
  padding-left: 40px;
}
body .content .lyricsBox .lyrics li p {
  margin: 0 0 20px 0;
  padding: 0;
}
body .content .lyricsBox .lyrics li .title {
  margin-bottom: 10px;
}
body .content .lyricsBox .lyrics li .title h4 {
  text-align: left;
  font-size: 70px;
  line-height: 68px;
}
body .content .lyricsBox .lyrics li.active {
  display: block;
}
body .content .lyricsBox .lyrics .selectBox {
  display: none;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-bottom: 40px;
}
body .content .lyricsBox .lyrics .selectBox select {
  background: rgba(73, 97, 164, 0.5);
  width: 100%;
  height: 50px;
  padding: 5px;
  font-family: "AkzidenzGroteskBELightCn", "Helvetica Neue", "Helvetica", Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  zoom: 1;
  font-size: 40px;
  line-height: 40px;
  border: 0;
  border-radius: 10;
  color: #fff;
}
@media (max-width: 959px) {
  body .content .lyricsBox {
    height: auto;
    width: 70%;
    padding-bottom: 0;
  }
  body .content .lyricsBox .lyrics {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  body .content .lyricsBox .lyrics ul {
    padding: 0;
  }
  body .content .lyricsBox .lyrics li {
    padding: 0;
    margin-bottom: 0;
  }
  body .content .lyricsBox .lyrics li .title {
    display: block;
    margin-bottom: 20px;
  }
  body .content .lyricsBox .lyrics .selectBox {
    display: block;
  }
  body .content .lyricsBox .tracks {
    display: none;
  }
}
@media (max-width: 740px) {
  body h1 {
    font-size: 100px;
    line-height: 10px;
  }
  body h2 {
    font-size: 65px;
    line-height: 20px;
  }
  body h3 {
    font-size: 33px;
    line-height: 23px;
  }
  body .stars {
    min-height: 665px;
  }
  body .content.home {
    min-height: 665px;
  }
  body .content p {
    font-size: 30px;
    line-height: 34px;
    font-weight: 100;
  }
  body .content .lyricsBox .lyrics li {
    font-size: 30px;
    line-height: 34px;
  }
  body .content .lyricsBox .lyrics li .title {
    margin-bottom: 20px;
    font-size: 50px;
  }
  body .content .lyricsBox .lyrics li p {
    font-size: 30px;
    line-height: 34px;
  }
  body .content .footer .buyLinks {
    width: 408px;
  }
  body .content .footer .itunes,
  body .content .footer .amazon {
    width: 200px;
    height: 74px;
    background-size: 200px 74px;
  }
}
@media (max-width: 515px) {
  body h1 {
    font-size: 60px;
    line-height: 10px;
    padding-top: 40px;
  }
  body h2 {
    font-size: 50px;
    line-height: 20px;
  }
  body h3 {
    font-size: 25px;
    line-height: 23px;
  }
  body h4 {
    font-size: 23px;
    font-weight: 100;
  }
  body .stars .wrap {
    margin: 0;
    padding-top: 70px;
  }
  body .stars .wrap .cube div {
    width: 200px;
    height: 200px;
  }
  body .stars .wrap .cube div.front,
  body .stars .wrap .cube div.back,
  body .stars .wrap .cube div.top,
  body .stars .wrap .cube div.bottom,
  body .stars .wrap .cube div.right {
    background-size: 200px 200px;
  }
  body .stars .wrap .cube div.front {
    transform: translateZ(100px);
  }
  body .stars .wrap.playing .cube div.front {
    transform: translateZ(200px);
  }
  body .content.home {
    min-height: 550px;
  }
  body .content.home h4.debut,
  body .content.home h4.streamText {
    display: none;
  }
  body .content p {
    font-size: 25px;
    line-height: 27px;
  }
  body .content .lyricsBox .lyrics li .title {
    margin-bottom: 10px;
  }
  body .content .lyricsBox .lyrics li .title h4 {
    font-size: 50px;
    line-height: 48px;
  }
  body .content .lyricsBox .lyrics li p {
    font-size: 25px;
    line-height: 27px;
  }
  body .content .playerWrapper .bbplayer {
    width: 275px;
  }
  body .content .playerWrapper .bb-forward {
    margin-left: 10px;
  }
  body .content .playerWrapper .bb-rewind {
    margin-right: 10px;
  }
  body .content .footer {
    bottom: 20px;
  }
  body .content .footer h4.buyText {
    font-size: 30px;
  }
  body .content .footer .buyLinks {
    width: 201px;
  }
  body .content .footer .itunes,
  body .content .footer .amazon {
    display: block;
  }
}