@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700,900);

* {
  box-sizing: border-box;
  transition: all ease-in-out 250ms;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  background-color: #232323;
  color: #ADAAA5;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}

.clearfix::after,
section::after,
footer::after {
  content: '';
  display: block;
  clear: both;
}


/* Column system for links
=================== */
[class^=link-col-] {
  width: 100%;
  margin-top: 1em;
}

[class^=link-col-]:first-child {
  margin-top: 0;
}

.link-col-1 {
  width: 33.333334%;
  float: left;
  /* border: 1px solid pink; */
}



@media (min-width: 40rem) {
  [class^=link-col-] {
    float: left;
    padding: 0 .5em;
    margin-top: 0;
  }

  [class^=link-col-]:first-child {
    padding-left: 0;
  }

  [class^=link-col-]:last-child {
    padding-right: 0;
  }

  .link-col-3 {
    width: 50%
  }

  .link-col-1 {
    width: 16.6666%
  }
}



/* typography
=================== */
h1 {
  font-weight: 300;
  font-size: 1.7rem;
  margin-top: 0;
}

p {
  margin-top: 0;
  line-height: 1.5;
}

p:last-of-type {
  margin-bottom: 0;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 1.5em;
  font-weight: 900;
  margin-top: 1em;
}

.title span {
  font-weight: 300;
  display: block;
  font-size: .9em;
}

.title-cta {
  margin: 0 0 .5em;
}

.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.unstyled-list li {
  font-size: .8em;
  padding: .3em 0;
}

.unstyled-list a {
  text-decoration: none;
  color: #FFF;
}

@media (min-width:60rem ) {
  p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .title {
    font-size: 3.7rem;
  }
}


/* buttons
=================== */
.button {
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  padding: .23em .5em;
}

@media (min-width:60rem ) {
  .button {
    font-size: 1.5rem
  }
}

.button-small {
  position: relative;
  font-size: .7rem;
  font-weight: 700;
  background: #232323;
  color: #adaaa5;
  border-color: #adaaa5;
}

.button-small:hover{
  background: #adaaa5;
  color: #000;
}

.button-small:active,
.button-small:focus {
  background: #232323;
  color: #adaaa5;
}

.button-accent {
  color: #00ff6c;
  border-color: #00ff6c;
}

.button-accent:hover{
  background: #00ff6c;
  color: #232323;
}

.button-dark {
  color: #232323;
  border-color: #232323;
}

.button-dark:hover{
  background: #232323;
  color: #00ff6c;
}


/* header
=================== */

header {
  position: absolute;
  margin: 1em;
  left: 0;
  right: 0;
}

.logo {
  float: left;
  width: 100px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8em;
  padding: .5em;
  color: #FFF;
}

nav a:hover{
  color: #DDD;
}


@media (min-width: 31.25rem) {
    .logo {
      width: 140px;
    }
}

@media (min-width:40rem ) {
    .logo {
      width: 140px;
    }
}

@media (min-width:40rem ) {
    .logo {
      width: 160px;
    }
}

@media (min-width:60rem ) {
  .logo {
    float: left;
    width: 256px;
  }

  nav {
    float: right;
  }
}


/* home-hero
=================== */
.home-hero {
  background-image: url(../img/hero-bg_1600.png);
  background-size: cover;
  background-position: center;
  padding: 10em 0;
  color: #FFF;
}

@media (min-width:60rem ) {
  .home-hero {
    height: 100vh;
    padding-top: 35vh;
  }
}


/* hero-home
=================== */
.textbox-container {
  width: 100%;
  max-width: 70em;
  margin: 0 auto;
}

.home-about-textbox {
  position: relative;
  width: 100vw;
  max-width: 100%;
  padding: 1.5em;
  outline: 2px solid #adaaa5;
  outline-offset: -1.0em;
  background-color: #4a4949;
  color: #FFF;
}


.home-about-textbox h1 {
  color: #00ff6c;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: .75em;
  background: #232323;
  padding: 0 .145em;
}

@media (min-width: 25rem) {
  h1 {
    font-size: 2rem;
  }

  .home-about-textbox h1 {
    top: .6em;
    padding: 0 .325em;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.5rem;
  }

  .home-about{
    background-image: url(../img/who-we-are.png);
    background-repeat: no-repeat;
    background-position: -12em -8em;
    padding-bottom: 16em;
  }

  .textbox-container {
    width: 95%;
  }

  .home-about-textbox {
    width: 35%;
    padding: 1.5em;
    outline-offset: -1.0em;
    margin-left: -2.5%;
    top: -5em;
    text-align: left;
    box-shadow: 0 0 4em 0 rgba(0,0,0,.3);
  }

  .home-about-textbox h1 {
    top: .75em;
    left: 6rem;
    transform: translateX(0);
  }
}


/* recordings
=================== */

.recordings {
  margin: 3em 0 0;
}

.rec-frame {
  margin: 0 0 1em;
  position: relative;
  width: 50%;
  float: left;
}

.rec-item {
  /* padding: .5em .5em 10em; */
  /* padding: .35em .35em; */
  padding: 0 .5em .5em;
  background-color: #232425;
  /* outline: 1px solid black; */
  /* height: 22em; */
}

.rec-item img {
  display: block;
  border: 1px solid #444444;
}

.rec-item p {
  margin-top: .6em;
  margin-bottom: 0;
  line-height: .8em;
  text-align: left;
}

.rec-title {
  font-size: .8em;
  font-weight: 400;
  color: #FFF;
  /* color: #110b86; */
}

/* .rec-desc {
  display: none;
} */

.rec-desc {
  font-size: .7rem;
  width: auto;
  text-align: left;
  float: left;
}

.rec-buy {
  display: none;
}

@media (min-width: 25rem) {
  .rec-buy {
    display: block;
    margin-top: 1em;
    float: right;
  }
}


@media (min-width: 50rem) {
  .rec-frame {
    width: 25%;
  }
}




/* portfolio
=================== */

.portfolio {
  margin: 3em 0 0;
}

.port-item {
  margin: 0;
  position: relative;
  font-size: 0.9em;
  margin-top: 2em;
}


.port-item img {
  display: block;
}

.port-desc {
  position: absolute;
  z-index: 100;
  bottom: 1.15em;
  left: 0em;
  right: 0em;
  color: #FFF;
  background: rgba(0,0,0,.6);
  padding: 1.5em 0;
}

.port-venue {
  text-align: left;
  padding-left: 1em;
  float: left;
  /* border: 1px solid pink; */
}

.port-date {
  font-size: .8em;
  font-style: italic;
}

.port-button {
  padding: .5em 1em 0 0;
  float: right;
  /* border: 1px solid green; */
}

.port-credit {
  position: relative;
  /* z-index: 200; */
  font-size: 0.8em;
  font-style: italic;
  text-align: left;
  padding-left: 1em;
}

@media (min-width: 39rem) {
  .port-item {
    width: 33.3333334%;
    margin-top: 0;
    float: left;
  }
  .port-desc {
    /* bottom: 1.1em; */
  }
}

@media (min-width: 60rem) {
  .port-item {
    /* width: 33.3333334%; */
    overflow: hidden;
  }

  .port-desc {
    transform: translateY(150%);
  }

  .port-item:hover .port-desc {
    transform: translateY(0%);
    /* bottom: 1.1em; */
  }
}




/* CTA
=================== */
.cta {
  padding: 3em 0 3em;
}

.cta img {
  max-width: 30px;
  margin: 0 .8em 0;
}

@media (min-width: 60rem) {
  .cta {
    padding: 3em 0 0;
  }
}


/* Footer
=================== */
footer {
  display: none;
}

@media (min-width: 60rem) {
  footer {
    display: flow-root;
    background: #232323;
    color: #FFF;
    text-align: left;
    padding: 3em 0;
  }
}