/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1,
h2,
h4,
section#content div.play-button:after, h2, h4, section#content div.play-button:after, h3, h4, section#content div.play-button:after, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/****************
/*** MIXINS
/****************/
/****************
/*** COLORS
/****************/
/****************
/*** FOUNDATIONS
/****************/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: auto !important; }

img, object {
  max-width: 100%; }

html, body {
  height: 100%; }

.desktop {
  display: none; }

@media only screen and (min-width: 768px) {
  .mobile {
    display: none; }

  .desktop {
    display: block; } }
/****************
/*** BODY
/****************/
body {
  background-color: #1e1e1e; }

hr {
  border: #9d9d9d 1px solid; }

div.clearfix {
  display: none; }
  @media only screen and (min-width: 1020px) {
    div.clearfix {
      display: block; } }

div.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

/****************
/*** TYPOGRAPHY
/****************/
@font-face {
  font-family: "social";
  src: url('../fonts/socialico-webfont.woff?1467234142') format('woff'), url('../fonts/socialico-webfont.svg?1467234142') format('svg'), url('../fonts/socialico-webfont.ttf?1467234142') format('truetype'), url('../fonts/socialico-webfont.eot?1467234142') format('embedded-opentype'); }
body {
  color: #9d9d9d;
  font-family: 'Lato', "HelveticaNeue-4", "Helvetica Neue 4", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 1em;
  letter-spacing: 0.085em;
  line-height: 1.45em; }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    body {
      font-size: .85em; } }

a {
  text-decoration: none;
  color: #D4D4D4; }
  a:hover {
    color: #C7C7C7; }

li.selected a {
  padding-bottom: 3px;
  border-bottom: 1px solid #737373;
  color: #D4D4D4; }

h1, h2, h4, section#content div.play-button:after {
  text-transform: uppercase;
  font-weight: 700;
  margin: 2.5% 0 1% 0;
  font-size: 1.25em;
  letter-spacing: 0.2em; }

h2, h4, section#content div.play-button:after {
  font-size: 1.15em; }

h3 {
  font-size: 1.25em;
  word-spacing: 0.1em; }

h4, section#content div.play-button:after {
  font-size: 1em;
  color: #D4D4D4; }

em {
  font-style: Italic; }

strong, b {
  font-weight: 700; }

em, i {
  font-style: italic; }

/****************
/*** HEADER
/****************/
a#header-link {
  z-index: 3;
  width: 100%;
  height: 70px;
  background: transparent;
  /* IE Hack */ }

header {
  background-color: #1f2f4c;
  z-index: 2; }
  header #tagline {
    margin: 0 auto;
    display: block;
    max-width: 80%; }
  header #peter, header #salett {
    margin: 0 auto;
    display: block;
    max-width: 30%;
    padding: 2em 0; }

#salett-fixed {
  display: none; }

@media only screen and (min-width: 768px) {
  header {
    position: relative;
    height: 70px; }
    header #peter, header #salett {
      position: absolute;
      padding: 0;
      margin: 0; }
    header #peter {
      top: 22px;
      left: 25px;
      width: 150px; }
    header #salett {
      top: 18px;
      right: 25px;
      width: 120px; }
    header #tagline {
      width: 400px;
      padding: 30px 0 30px 15px; }

  body#page #salett-fixed {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    opacity: 0.9;
    display: block;
    position: fixed;
    width: 100px;
    height: 40px;
    top: 20px;
    left: 20px;
    z-index: 1; } }
/****************
/*** NAVIGATION
/****************/
nav {
  width: 100%;
  height: auto;
  padding: 5%; }
  @media only screen and (min-width: 768px) {
    nav {
      padding: 0 0 2.5% 2.5%;
      text-align: left; }
      nav hr {
        width: 100px;
        margin-left: 0; } }
  @media only screen and (min-width: 1020px) {
    nav {
      height: auto;
      padding: 2.5% 0 0 25px; }
      nav hr {
        margin-right: 0; } }

nav ul {
  margin-bottom: 5%; }
  nav ul li {
    text-align: left; }

nav a {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  line-height: 1.85em;
  color: #737373; }

nav ul ul {
  font-size: 0.85em;
  margin-bottom: 0; }
  nav ul ul li:before {
    content: "\2013";
    padding-right: 5px; }
  nav ul ul li a {
    color: #9d9d9d;
    pointer-events: auto; }

nav > ul > li:last-child {
  text-transform: uppercase;
  font-size: 0.85em;
  margin: 1em 0 2em 0; }
  nav > ul > li:last-child:after {
    content: '\2192'; }

nav#work, nav#work.page {
  background-color: #2b2b2b; }
  nav#work > ul > li:first-of-type {
    pointer-events: none; }
  @media only screen and (min-width: 768px) {
    nav#work, nav#work.page {
      background-color: transparent;
      float: left;
      width: 30%; } }
  @media only screen and (min-width: 1020px) {
    nav#work, nav#work.page {
      background-color: #2b2b2b; } }

nav#work.page {
  padding-top: 2.5%;
  padding-bottom: 20px; }
  @media only screen and (min-width: 768px) {
    nav#work.page {
      width: 22.5%; } }
  @media only screen and (min-width: 768px) {
    nav#work.page {
      position: fixed;
      top: 70px;
      left: 0; } }
  nav#work.page ul {
    display: none;
    margin-bottom: 0; }
    @media only screen and (min-width: 768px) {
      nav#work.page ul {
        display: block; } }

nav#follow ul {
  clear: both; }
nav#follow ul li:first-child {
  display: none; }
@media only screen and (min-width: 768px) {
  nav#follow {
    width: 30%;
    float: left;
    clear: left; } }
@media only screen and (min-width: 1020px) {
  nav#follow {
    float: right;
    width: 22.5%; } }

nav#follow div.social-icons {
  font-family: "social";
  font-size: 2.5em; }
  nav#follow div.social-icons a {
    display: inline-block;
    float: left;
    padding: 0 5px;
    margin-right: 5px;
    line-height: 1.5em;
    color: #737373;
    text-transform: none;
    border: none; }
    nav#follow div.social-icons a:first-child {
      padding-left: 0; }
    nav#follow div.social-icons a:hover {
      color: #D4D4D4; }

nav#follow.page ul li:first-child {
  display: block; }
@media only screen and (min-width: 768px) {
  nav#follow.page {
    position: fixed;
    top: 400px;
    left: 0; } }

/****************
/*** CONTENT
/****************/
section#content {
  padding: 5%;
  min-height: 100%; }
  @media only screen and (min-width: 768px) {
    section#content {
      width: 70%;
      float: right;
      padding-top: 10px;
      background-color: #141414; } }
  @media only screen and (min-width: 1020px) {
    section#content {
      width: 77.5%;
      padding: 10px 2.5% 0 2.5%; } }
  section#content.about p {
    margin: 20px 0; }
    @media only screen and (min-width: 1020px) {
      section#content.about p {
        margin: 25px 0; } }
  section#content.about b {
    color: #C7C7C7; }
  section#content.about i {
    color: #D4D4D4;
    border-bottom: 4px solid #1f2f4c;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    margin: 0; }
  @media only screen and (min-width: 1020px) {
    section#content div.poster {
      float: left;
      margin: 0 2.5% 2.5% 0;
      clear: right; } }
  section#content div.poster img {
    border: 2px solid #454545; }
  section#content div.poster a.itunes {
    display: block; }
    section#content div.poster a.itunes:after {
      content: '\2192';
      padding-left: 1%; }
  section#content div.poster span.release-date {
    border-left: 5px solid #9d9d9d;
    padding-left: 10px;
    color: #737373;
    margin: 10px 0;
    display: block; }
  section#content img.video-thumb {
    width: 100%; }
  section#content p {
    display: block;
    margin: 1em 0; }
    @media only screen and (min-width: 1020px) {
      section#content p {
        width: 95%;
        margin-top: 0;
        max-width: 1140px; } }
    section#content p:empty {
      margin: 0; }
  section#content span.portfolio-toggle {
    display: block;
    clear: both;
    font-size: 1.25em;
    margin: 5% 0;
    letter-spacing: 0.075em; }
    section#content span.portfolio-toggle a {
      padding-bottom: 2px;
      border-bottom: 1px dotted #9d9d9d; }
    @media only screen and (min-width: 1020px) {
      section#content span.portfolio-toggle {
        margin: 2.5% 0; } }
  @media only screen and (min-width: 1020px) {
    section#content div.left {
      float: left;
      width: 35%; } }
  section#content div.youtube-embed {
    margin: 20px 0;
    position: relative;
    cursor: pointer; }
    @media only screen and (min-width: 1020px) {
      section#content div.youtube-embed {
        margin: 0;
        float: right;
        width: 60%; } }
  section#content div.play-button:after {
    content: '\25B6  Play';
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
    opacity: 0.95;
    background-color: #1f2f4c;
    padding: 20px;
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -30px;
    display: block; }
  section#content > ul.portfolio > li {
    padding-bottom: 2.5%;
    border-bottom: 5px solid #2b2b2b;
    overflow: auto; }
  section#content ul.no-heading li {
    padding: 5% 0; }
    @media only screen and (min-width: 1020px) {
      section#content ul.no-heading li {
        padding: 2.5% 0; } }
  section#content h3 {
    margin: 5% 0; }
    @media only screen and (min-width: 1020px) {
      section#content h3 {
        margin: 2.5% 0; } }
  section#content div.album-player {
    background-image: url("/img/loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px; }
    @media only screen and (min-width: 1020px) {
      section#content div.album-player {
        width: 45%;
        float: left;
        margin: 0; } }
  section#content p.album-info {
    padding-top: 10px; }
    @media only screen and (min-width: 1020px) {
      section#content p.album-info {
        clear: both; } }
  section#content ul.press span.release-date {
    display: block;
    clear: both;
    margin: 1em 0; }
    @media only screen and (min-width: 1020px) {
      section#content ul.press span.release-date {
        float: right;
        clear: none;
        margin: 0; } }
  section#content ul.press h2, section#content ul.press h4, section#content ul.press div.play-button:after {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    margin: 0 0 1em 0;
    color: #D4D4D4; }
  section#content aside.credits ul li {
    margin: 1em 0; }
    @media only screen and (min-width: 768px) {
      section#content aside.credits ul li {
        margin: 0; } }
  section#content ul.tour li div {
    display: block;
    clear: both;
    margin: .5em 0; }
    @media only screen and (min-width: 1020px) {
      section#content ul.tour li div {
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        max-width: 305px; } }
    @media only screen and (min-width: 1020px) {
      section#content ul.tour li div {
        margin-right: 1em; } }
    section#content ul.tour li div.date {
      text-transform: uppercase; }
      @media only screen and (min-width: 1020px) {
        section#content ul.tour li div.date {
          width: 20%; } }
    @media only screen and (min-width: 1020px) {
      section#content ul.tour li div.location {
        width: 20%; } }
    section#content ul.tour li div.title {
      width: 100%; }
      @media only screen and (min-width: 1020px) {
        section#content ul.tour li div.title {
          width: 40%; } }
    @media only screen and (min-width: 1020px) {
      section#content ul.tour li div.tickets {
        text-align: right;
        width: 10%; } }
    section#content ul.tour li div div {
      font-size: 1em;
      margin: 0; }
    section#content ul.tour li div p {
      margin: 0; }

.portfolio-media {
  display: none; }

/****************
/*** NEWS
/****************/
section#news h2, section#news h4, section#news section#content div.play-button:after, section#content section#news div.play-button:after {
  margin: 0.5% 0 2.5% 5%; }
section#news ul li {
  margin: 5%;
  line-height: 1.5em;
  font-size: 1em; }
  section#news ul li a:after {
    content: '\2192';
    padding-left: 1%; }
@media only screen and (min-width: 768px) {
  section#news {
    width: 100%; }
    section#news ul li {
      margin: 2.5%; } }
@media only screen and (min-width: 1020px) {
  section#news {
    margin-top: 2.5%;
    width: 65%;
    clear: none;
    float: left; }
    section#news h2, section#news h4, section#news section#content div.play-button:after, section#content section#news div.play-button:after, section#news ul li {
      margin-left: 25px; } }

/****************
/*** SLIDER
/****************/
@media only screen and (min-width: 768px) {
  body#home .flexslider {
    margin-bottom: 10%; } }
@media only screen and (min-width: 1020px) {
  body#home .flexslider {
    width: 70%;
    margin-bottom: 0;
    float: right; } }

body#home .flex-control-nav {
  display: none; }
  @media only screen and (min-width: 768px) {
    body#home .flex-control-nav {
      display: block; } }
  @media only screen and (min-width: 1020px) {
    body#home .flex-control-nav {
      display: none; } }

body#home .flex-caption {
  display: none;
  width: 100%;
  padding: 1em;
  background-color: #2b2b2b;
  overflow: hidden;
  white-space: nowrap;
  height: auto;
  text-align: left;
  text-overflow: ellipsis;
  font-size: 0.85em; }

body#page .flex-control-thumbs img {
  float: left;
  margin-right: 1em;
  border: 4px solid #2b2b2b;
  cursor: pointer;
  margin-bottom: 2em; }
  body#page .flex-control-thumbs img.flex-active {
    border: 4px solid #D4D4D4; }

body#page .flex-caption {
  display: block;
  padding: 1em 0;
  overflow: hidden;
  white-space: nowrap;
  height: auto;
  text-align: left;
  text-overflow: ellipsis;
  font-size: 0.85em; }

/****************
/*** MAILCHIMP
/****************/
#mc_embed_signup .indicates-required {
  display: none; }
#mc_embed_signup input, #mc_embed_signup label {
  clear: both;
  display: block;
  margin: 2% 0; }
#mc_embed_signup input[type=email], #mc_embed_signup select {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1em;
  color: #D4D4D4;
  background-color: #454545;
  border: 0;
  padding: 1.5%;
  width: 170px;
  -webkit-appearance: none; }
#mc_embed_signup select {
  width: 150px; }
#mc_embed_signup input[type=submit] {
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #1f2f4c;
  border: 1px solid #2b2b2b;
  font-size: 0.75em;
  letter-spacing: 0.25em;
  color: #D4D4D4;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 2.5%;
  -webkit-appearance: none; }
  #mc_embed_signup input[type=submit]:hover {
    cursor: pointer; }

/****************
/*** OFFICIAL FM
/****************/