@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|UnifrakturMaguntia');

body {
  margin: 0;
  padding: 16px;
  padding: 1rem;
  font-family: 'Source Code Pro', sans-serif;
  background: url(/img/logo.png) 50% no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

a {
  color: red
}

a:hover {color: #fff;background: red;}

h1, h2, h3, h4, h5, h6 {
  display: inline;
  text-transform: uppercase;
  font-weight: 400;
  background: #000;
  color: #fff;
}

.logo {
    float: left;
    width: 100px;
    margin: -32px 16px 0 -32px;
    margin: -2rem 1rem 0 -2rem;
}

.site {
  position: relative;
  padding-bottom: 80px;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {.site-main {display: flex;align-items: flex-start;}}

@media (min-width: 768px) {.site-main--index {flex-wrap: nowrap;}}

.site-title {
  margin: 0 0 32px;
  margin: 0 0 2rem;
}

.site-title a {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 50%;
    background: url(/img/logo.png) no-repeat;
    background-size: 100%;
    text-indent: -10000px;
  }

.site-header {
  display: none;
}

@media (min-width: 768px) {.site-header {position: fixed;top: 0;bottom: 0;left: 0;width: 300px;padding: 1rem;box-sizing: border-box;}}

@media (min-width: 768px) {.site-footer {position: fixed;bottom: .5rem;right: 1rem;z-index: 10;}}

.menu-heading {
  font-size: 12.8px;
  font-size: .8rem;
}

.menu-links {
  line-height: 28.8px;
  line-height: 1.8rem;
  text-align: right;
}

@media (min-width: 768px) {.menu-links {line-height: 1.4rem;}}

.menu-list {
  margin-bottom: 32px;
  margin-bottom: 2rem;
  padding-left: 16px;
  padding-left: 1rem;
  list-style: none;
}

.menu-list--links {
  display: inline;
}

.menu-item {
  position: relative
}

.menu-item::before {position: absolute;content: '\2301';left: -16px;left: -1rem;}

.menu-item--links {
  display: inline;
  margin-right: 16px;
  margin-right: 1rem;
}

.section {
  position: relative;
  z-index: 5;
  min-height: 350px;
  margin-bottom: 32px;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {.section {margin-right: 4rem;}}

.section--news,
.section--discography {
  margin-left: -16px;
  margin-left: -1rem;
  width: calc(100% + 2rem);
  padding-left: 48px;
  padding-left: 3rem;
  box-sizing: border-box;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {.section--news,
.section--discography {margin-left: 0;overflow: visible;overflow: initial;}}

.section--news {
  flex-direction: column;
}

.section-header {
  position: absolute;
  left: 16px;
  display: block;
  width: 350px;
  margin-top: 350px;
  transform: rotate(-90deg) translateZ(0);
  transform-origin: left;
  text-align: right;
  z-index: 100;
}

.section-header h1 {
    font-size: 32px;
    font-size: 2rem
  }

.section-header h1::after {content: '\21AF';padding-left: 8px;padding-left: .5rem;}

.entry {
  display: flex;
  flex-direction:  column;
  vertical-align: top;
  width: 100%;
  min-width:  70vw;
  margin-bottom: 32px;
  margin-bottom: 2rem;
  padding: 16px;
  padding: 1rem;
}

@media (min-width: 768px) {.entry {position: relative;width: 350px;min-width: 350px;padding-right: 2rem;}}

.entry--intro {
  width: auto;
}

@media (min-width: 768px) {.entry--release {width: 350px;}}

.entry--news {
  margin-bottom: 0;
}

.entry--news p {
    margin: 0;
  }

.entry-content {
  position: relative;
}

.entry-content p:first-of-type {
    margin-top: 0;
  }

.entry-content--intro{
  padding: 16px;
  padding: 1rem;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  font-size: 12.8px;
  font-size: .8rem;
  line-height: 24px;
  line-height: 1.5rem;
}

.entry-content--news {
  margin-top: 16px;
  margin-top: 1rem;
  padding: 8px 16px;
  padding: .5rem 1rem;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  font-size: 14.4px;
  font-size: .9rem;
  line-height: 22.4px;
  line-height: 1.4rem;
  text-align: right;
}

.entry-content--news .news-source {
    display: block;
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 12.8px;
    font-size: .8rem
  }

.entry-content--news .news-source:before {content: '–';}

.entry-header {
  position: relative;
  z-index: 5;
  width: 80%;
  margin: -16px 0 0 -16px;
  margin: -1rem 0 0 -1rem;
}

.entry-title {
  margin: 0;
}

.entry-title a {
    color: #fff;
    text-decoration: none;
    background: #000;
  }

.entry-meta {
  position: absolute;
}

.entry-image {
  display: block;
  width: 100%;
}

.entry-content--intro .entry-image {
    margin: 16px 0;
    margin: 1rem 0;
  }

@media (min-width: 768px) {.entry-image {width: auto;max-width: 350px;}}

.image-zoom {
  position: relative;
  display: block
}

.image-zoom:hover::after {content: "+ zoom";position: absolute;right: 8px;right: 0.5rem;bottom: 8px;bottom: 0.5rem;display: block;font-size: 12.8px;font-size: .8rem;line-height: 16px;line-height: 1rem;text-transform: uppercase;color: #fff;background: #000;cursor: pointer;}

.entry-date,
.entry-format {
  display: inline-block;
  color: #fff;
  background: #000;
  font-size: 11.2px;
  font-size: .7rem
}

.entry-date::before, .entry-format::before {content: '\25B0';margin: 0 8px;margin: 0 .5rem;}

.entry-tracklist {
  position: absolute;
  top: 16px;
  top: 1rem;
  width: 60%;
  padding-left: 20%;
  color: red;
}

.entry-content strong {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 20.8px;
  font-size: 1.3rem;
  letter-spacing: 0.8px;
  letter-spacing: .05rem;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

.entry-play {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 0
}

.entry-play:after {content: '\25B6\FE0E';position: absolute;bottom: 0;left: 16px;left: 1rem;color: red;font-size: 80px;font-size: 5rem;text-indent: 0;}

.entry-play:hover {background: none;outline: 16px solid red;outline: 1rem solid red;}

.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .25) 50%), linear-gradient(90deg, rgba(255, 0, 0, .06), rgba(0, 255, 0, .02), rgba(0, 0, 255, .06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  opacity: .8;
}

.player-container {
  position: fixed;
  z-index: 10;
  bottom: 16px;
  bottom: 1rem;
  right: 16px;
  right: 1rem;
  width: calc(100% - 2rem);
  max-width: 700px;
}

@media (min-width: 768px) {.player-container {bottom: 3rem;}}

.player {
  display: block;
  width: 100%;
  height: 42px;
  border: 0;
}