* {
  box-sizing: border-box; }

a {
  transition: color 0.25s; }
  a:link,
  a:visited {
    color: #ebebeb;
    text-decoration: none; }
  a:hover,
  a:focus {
    color: #6353ec; }

h1 {
  font-weight: bold; }

html {
  font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
  font-size: 62.5%;
  width: 100%; }
  html:before,
  html:after {
    content: "";
    position: fixed;
    background-color: black;
    height: 100%;
    top: 0;
    width: 2vw;
    z-index: 1000; }
    @media (min-width: 421px) {
      html:before,
      html:after {
        width: 2vw; } }
    @media (min-width: 960px) {
      html:before,
      html:after {
        width: 20px; } }
  html:before {
    left: 0; }
  html:after {
    right: 0; }

body {
  background: url("../images/bg.png");
  color: #ebebeb;
  display: flex;
  font-size: 1.7em;
  flex-direction: column;
  justify-content: flex-center;
  line-height: 1.1;
  font-weight: 400;
  /*
    &:before {
        background-color: black;
        top: 0;

        content: "phone";
        @include media('>phone') {
            content: "tablet";
        }
        @include media('>tablet') {
            content: "desktop";
        }
    }
    */ }
  @media (min-width: 421px) {
    body {
      font-size: 1.7em;
      line-height: 1.2; } }
  body:before,
  body:after {
    background-color: black;
    content: "";
    position: fixed;
    left: 0;
    height: 2vw;
    width: 100%;
    z-index: 1000; }
    @media (min-width: 421px) {
      body:before,
      body:after {
        height: 2vw; } }
    @media (min-width: 960px) {
      body:before,
      body:after {
        height: 20px; } }
  body:after {
    background-color: black;
    bottom: 0; }

header,
section {
  position: relative;
  width: 100%; }
  header .wrapper,
  section .wrapper {
    margin: 0 auto;
    max-width: 960px;
    padding: 4vw;
    position: relative;
    width: 100%; }
    @media (min-width: 421px) {
      header .wrapper,
      section .wrapper {
        padding: 4vw; } }
    @media (min-width: 960px) {
      header .wrapper,
      section .wrapper {
        padding: 40px; } }

header {
  position: fixed;
  margin-top: 2vw;
  z-index: 1000;
  /* Top and bottom shadows */ }
  @media (min-width: 421px) {
    header {
      margin-top: 4vw; } }
  @media (min-width: 961px) {
    header {
      margin-top: 30px; } }
  header:before,
  header:after {
    content: "";
    display: block;
    height: 2vw;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1001; }
    @media (min-width: 421px) {
      header:before,
      header:after {
        height: 8vw; } }
    @media (min-width: 960px) {
      header:before,
      header:after {
        height: 20px; } }
  header:before {
    background-image: linear-gradient(black, transparent);
    top: 2vw; }
    @media (min-width: 769px) {
      header:before {
        top: 2vw; } }
    @media (min-width: 960px) {
      header:before {
        top: 20px; } }
  header:after {
    background-image: linear-gradient(transparent, black);
    bottom: 2vw; }
    @media (min-width: 769px) {
      header:after {
        bottom: 2vw; } }
    @media (min-width: 960px) {
      header:after {
        bottom: 20px; } }

section {
  z-index: 100; }
  section + section {
    margin-top: 4vw; }
    @media (min-width: 960px) {
      section + section {
        margin-top: 20px; } }

#about {
  margin: 2vw; }
  @media (min-width: 960px) {
    #about {
      margin: 20px 0 0 0; } }
  #about .wrapper {
    background: url("../images/chris-osborn.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 98vw;
    padding-top: 100vw;
    padding-left: 2vw;
    padding-right: 2vw;
    max-width: 960px;
    width: 98vw; }
    @media (min-width: 421px) {
      #about .wrapper {
        min-height: 98vw;
        max-height: 960px;
        padding-top: 43vw; } }
    @media (min-width: 960px) {
      #about .wrapper {
        min-height: auto;
        padding-top: 410px;
        height: 960px; } }
  #about svg {
    border-bottom: 0.5em solid white;
    padding-bottom: 0.5em;
    left: 4vw;
    position: absolute;
    top: 4vw;
    width: 20%; }
    @media (min-width: 769px) {
      #about svg {
        width: 8%; } }
    @media (min-width: 960px) {
      #about svg {
        left: 40px;
        top: 40px; } }
  #about h1,
  #about p {
    display: block;
    vertical-align: top;
    width: 100%; }
  @media (min-width: 769px) {
    #about h1 {
      display: inline-block;
      padding-right: 2vw;
      width: 49%; } }
  #about p {
    margin-top: 1em; }
    @media (min-width: 769px) {
      #about p {
        display: inline-block;
        margin-top: 0;
        width: 49%; } }
  #about .bars {
    font-size: 2em; }

.row {
  align-items: stretch;
  display: flex;
  flex-direction: column; }
  @media (min-width: 421px) {
    .row {
      flex-direction: row; } }
  .row > * {
    position: relative; }
  .row + .row {
    font-size: 0.75em; }
  .row.bars > * {
    padding-bottom: 4vw;
    margin-bottom: 2vw; }
    @media (min-width: 960px) {
      .row.bars > * {
        padding-bottom: 40px;
        margin-bottom: 20px; } }
    .row.bars > *:after {
      border-bottom: 2vw solid white;
      content: "";
      display: inline-block;
      left: 0;
      padding-bottom: 0.5em;
      position: absolute;
      bottom: 0%;
      width: 10vw; }
      @media (min-width: 768px) {
        .row.bars > *:after {
          border-bottom-width: 10px;
          width: 70px; } }
  .row.bars + .row {
    margin-top: 0.25em; }
  .row h1,
  .row p {
    padding-right: 6vw; }

@media (min-width: 421px) and (max-width: 959px) {
  .row h1:nth-child(2),
  .row p:nth-child(2) {
    padding-left: 4vw;
    padding-right: 4vw; }
    .row h1:nth-child(2):after,
    .row p:nth-child(2):after {
      margin-left: 4vw; } }
    @media (min-width: 960px) {
      .row h1:nth-child(2),
      .row p:nth-child(2) {
        padding-left: 20px;
        padding-right: 20px; }
        .row h1:nth-child(2):after,
        .row p:nth-child(2):after {
          margin-left: 20px; } }

#music .wrapper {
  padding-left: 2vw;
  padding-right: 2vw; }
  @media (min-width: 960px) {
    #music .wrapper {
      padding-left: 20px;
      padding-right: 20px; } }

#music iframe {
  height: 407px;
  width: 100%; }
  #music iframe + iframe {
    margin-top: 2vw; }

#contact {
  padding-bottom: 9vw; }
  #contact .email,
  #contact nav {
    display: block;
    line-spacing: 2em;
    margin-bottom: 2em;
    margin-top: 1em;
    vertical-align: top; }
    @media (min-width: 421px) {
      #contact .email,
      #contact nav {
        display: inline-block;
        width: 49%; } }
    @media (min-width: 769px) {
      #contact .email,
      #contact nav {
        padding-left: 8vw; } }
  #contact .email {
    overflow: hidden;
    text-overflow: ellipsis; }
  #contact h2 {
    font-size: 1.5em;
    margin-bottom: 1em; }
    @media (min-width: 421px) {
      #contact h2 {
        font-size: 1.75em;
        margin-bottom: 1.75em; } }
  #contact ul
li {
    display: block;
    margin-bottom: 1em; }

#triangles {
  bottom: 2vw;
  display: inline-block;
  height: 3vw;
  left: 46.75vw;
  margin-bottom: 2vw;
  position: fixed;
  width: 6.5vw;
  z-index: 1002; }
  @media (min-width: 768px) {
    #triangles {
      bottom: 4vw;
      max-width: 100px; } }
  #triangles:before,
  #triangles:after {
    border-style: solid;
    content: "";
    height: 0;
    position: absolute;
    transition: border-width 0.25s, border-radius 0.25s;
    width: 0; }
  #triangles:before {
    margin-right: 0.25vw;
    right: 50%;
    border-width: 0 3vw 3vw 0;
    border-color: transparent #8665fe transparent transparent;
    border-radius: 0.5vw 0 0.5vw 0; }
  #triangles:after {
    left: 50%;
    margin-left: 0.25vw;
    border-width: 0 0 3vw 3vw;
    border-color: transparent transparent transparent #8665fe;
    border-radius: 0 0.5vw 0.5vw 0.5vw; }
  #triangles.up:before {
    border-width: 3vw 3vw 0px 0;
    border-color: transparent #8665fe transparent transparent;
    border-radius: 0 0.5vw 0 0.5vw; }
  #triangles.up:after {
    border-width: 3vw 0 0 3vw;
    border-color: transparent transparent transparent #8665fe;
    border-radius: 0.5vw 0 0.5vw 0; }