@charset "utf-8";

@import "settings";
@import "imports";

body {
  // background: $offwhite url(/assets/img/bg/white_wall_hash.png);
  color: $dark;
  font-family: $main_font;
  font-size: 16px;
}

.spacer-20 { margin:  20px 0 0 0; }
.spacer-50 { margin:  50px 0 0 0; }
.spacer-100{ margin: 100px 0 0 0; }

header{
  background: $dark; // url(/assets/img/bg/congruent_outline.png);
  color: $offwhite;
	width: 100%;
	height: auto;
  position: relative;
}

header nav{
  overflow: hidden;
  display: inline-block;
  margin: 10px 0 0 0;
  padding: 13px 0px;
}

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

header ul li{
  float: left;
  margin-left: 0;
  font-size: 16px;
  letter-spacing: 1px;
}

header ul.social{
  position: absolute;
  top: 13px;
  right: 0px;
  margin: 10px 0 0 0;
}

header a {
  text-decoration: none;
  color: $offwhite;
  padding: 0 10px;
}

header a:hover {
  color: $offwhite;
  text-decoration: none;
  border-bottom: 4px solid $accent_color;
}

.post_footer {
  font-size: .75em;
  margin: 50px 0 0 0;
  color: $grey;
  font-family: $accent_font;
}

.social a:hover {
  text-decoration: none;
  border: none;
  color: $accent_color;
}

.player {
  width: 100%;
  margin: 50px 0;
}

a {
  color: $dark;
  text-decoration: underline;
}

a:hover{
  color: $accent_color;
}


.side-links {
  font-family: $accent_font;
  text-align: right;
  font-size: .85em;
}

.side-links ul {
  margin: 0 0 20px 0;
  padding: 0;
}
.side-links ul li {
  list-style: none;
}

.side-links a {
  color: $dark;
  font-weight: bolder;
  text-decoration: none;
}

.side-links a:hover{
  color: $accent_color;
  text-decoration: none;
}

.side-links ul.social{
  float: left;
  margin: 0 0 0 10px;
}

.side-links ul.social li {
  padding: 0  0 10px 5px;
}

.poster {
  width: 100%;
  height: 300px;
  padding: 0 auto;
  background-position: center 0;
  background-size: cover;
}

@media all and (min-width: 768px) {
  .poster {
    width: 100%;
    height: 300px;
    background-position: center 0;
  }
}

@media all and (max-width: 1280px) and (min-width: 768px) {
  .poster {
    width: 100%;
    height: 300px;
    background-position: center 0;
  }
}

@media all and (max-width: 1280px) and (min-width: 992px) {
  .poster {
    width: 100%;
    height: 400px;
    background-position: center 0;
  }
}

@media all and (min-width: 1280px ) {
  header {
    width: 1280px;
    margin: 0 auto;
  }
  .poster {
    width: 1280px;
    margin: 0 auto;
    height: 400px;
    background-position: 0 0;
  }
}