@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@font-face {
  font-family: BeyondTYPO;
  src: url(/build/fonts/BeyondTYPO-Regular.otf) format("opentype"); }

body {
  background-color: #fef5e5;
  color: #80796c;
  margin: 0;
  font-family: 'Roboto', sans-serif; }
  body #container {
    background-color: #fef5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 100vh; }
    body #container #wrapper {
      max-width: 1200px;
      flex: 0 0 auto;
      background: #fef5e5;
      width: 100%;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      padding: 0.5rem;
      box-sizing: border-box; }
      body #container #wrapper #cover img {
        max-width: 100%; }

.boxes {
  display: flex;
  flex-wrap: wrap; }
  .boxes > div {
    flex: 0 1 100%;
    position: relative; }
    @media (min-width: 700px) {
      .boxes > div {
        flex-basis: 33%; } }
    .boxes > div > img {
      width: 100%; }
      .boxes > div > img:first-of-type {
        display: none; }
      @media (min-width: 700px) {
        .boxes > div > img:first-of-type {
          display: block; }
        .boxes > div > img:last-of-type {
          display: none; } }
    .boxes > div a {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      left: 0;
      align-items: center;
      text-decoration: none; }
      .boxes > div a > img {
        margin-top: 1.5rem;
        width: 25%; }
        @media (min-width: 700px) {
          .boxes > div a > img {
            margin-top: 3rem;
            width: 50%; } }
      .boxes > div a h1 {
        font-family: BeyondTYPO;
        color: #fef5e5;
        font-size: 8vmin;
        margin: 0;
        text-align: center;
        line-height: 1; }
        @media screen and (min-width: 700px) {
          .boxes > div a h1 {
            font-size: 27px; } }
        @media screen and (min-width: 1280px) {
          .boxes > div a h1 {
            font-size: 55px; } }

h1, h2 {
  font-family: BeyondTYPO; }

h1 {
  font-size: 2.5rem; }

a {
  color: #80796c; }

.social-icons {
  display: flex;
  justify-content: center;
  margin-top: 2rem; }
  .social-icons > a {
    padding: 0.5rem; }

.copyright {
  display: flex;
  justify-content: center; }

article h1 {
  text-align: center; }

article .body-text {
  max-width: 700px;
  margin: auto;
  padding: 1rem; }

.boxlisting {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  margin: 0; }
  .boxlisting > li {
    flex: 0 0 auto;
    padding: 1rem;
    margin: 1rem 0;
    width: 25%; }

img {
  max-width: 100%;
  object-fit: contain; }

iframe {
  max-width: 100%; }

.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .list .card {
    flex: 0 0 calc(100% - 4rem);
    margin: 1rem;
    padding: 1rem;
    background-color: #80796c;
    color: #fef5e5;
    text-align: center; }
    @media (min-width: 340px) {
      .list .card {
        flex: 0 0 calc(50% - 2rem);
        margin: 0.5rem;
        padding: 0.5rem; } }
    @media (min-width: 700px) {
      .list .card {
        flex: 0 0 calc(25% - 4rem);
        margin: 1rem;
        padding: 1rem; } }
    .list .card > div a {
      text-decoration: none;
      display: block;
      background: url(/images/brownborderbox.png);
      background-size: contain;
      background-repeat: no-repeat;
      padding: 4rem; }
      @media (min-width: 340px) {
        .list .card > div a {
          padding: 2rem; } }
      @media (min-width: 700px) {
        .list .card > div a {
          padding: 3rem; } }
      .list .card > div a > img {
        position: relative;
        top: -2.5rem; }
        @media (min-width: 340px) {
          .list .card > div a > img {
            top: -1.5rem; } }
        @media (min-width: 700px) {
          .list .card > div a > img {
            top: -2rem; } }
      .list .card > div a h2 {
        position: relative;
        top: -1.5rem;
        margin: 0 -2rem;
        text-align: center;
        color: #80796c;
        height: 1rem;
        padding: 0 1rem; }
        @media (min-width: 340px) {
          .list .card > div a h2 {
            font-size: 1rem; } }
        @media (min-width: 700px) {
          .list .card > div a h2 {
            top: -2rem;
            font-size: 1.5rem; } }

.artists {
  display: flex;
  flex-wrap: wrap; }
  .artists .artist {
    margin: 0.5rem;
    flex: 0 0 calc(50% - 1rem); }
    @media (min-width: 700px) {
      .artists .artist {
        margin: 0.5rem;
        flex: 0 0 calc(25% - 1rem); } }
    .artists .artist h2 {
      display: block;
      text-align: center; }

@font-face {
  font-family: BeyondTYPO;
  src: url(/build/fonts/BeyondTYPO-Regular.otf) format("opentype"); }

#navigation-burger {
  position: absolute;
  right: 25px;
  top: 25px;
  z-index: 99;
  cursor: pointer; }
  @media (min-width: 1280px) {
    #navigation-burger {
      right: 50px;
      top: 50px; } }

nav#navigation {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 1;
  transform: translateX(100%);
  transition: transform 0.2s linear;
  font-family: BeyondTYPO;
  width: 100%;
  margin-top: 75px; }
  @media (min-width: 1280px) {
    nav#navigation {
      width: 50%;
      margin-top: 100px; } }
  nav#navigation a {
    text-decoration: none; }
    nav#navigation a:hover {
      text-decoration: underline; }
  nav#navigation.open {
    transform: translateX(0); }
    @media (min-width: 1280px) {
      nav#navigation.open {
        transform: translateX(-3rem); } }
  nav#navigation #navigation-inner > ul {
    font-size: 2rem;
    list-style-type: none;
    text-align: right;
    padding: 1rem 2rem;
    margin: 0; }
    nav#navigation #navigation-inner > ul > li > ul {
      font-size: 1.5rem;
      list-style-type: none;
      text-align: right;
      padding: 0 0 1rem 0; }


/*# sourceMappingURL=bundle.css.map*/