@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Righteous);
a, b, body, canvas, div, em, footer, form, h1, h2, h3, h4, h5, h6, header,
html, i, img, label, li, menu, nav, ol, p, section, small, span, strong, table, tbody,
td, tfoot, th, thead, tr, u, ul, video {
  margin: 0;
  padding: 0;
  border: 0; }

a {
  outline: 0; }

body {
  min-width: 320px;
  position: relative; }

html {
  font-size: 10px; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@-webkit-keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fade {
  -webkit-animation: .6s .3s both fade;
          animation: .6s .3s both fade; }

@-webkit-keyframes slide-right {
  from {
    left: 100%; }
  to {
    left: 0%; } }

@keyframes slide-right {
  from {
    left: 100%; }
  to {
    left: 0%; } }

.slide-right {
  -webkit-animation: .4s .2s both slide-right;
          animation: .4s .2s both slide-right; }

@-webkit-keyframes slide-left {
  from {
    right: 100%; }
  to {
    right: 0%; } }

@keyframes slide-left {
  from {
    right: 100%; }
  to {
    right: 0%; } }

.slide-left {
  -webkit-animation: .4s .2s both slide-left;
          animation: .4s .2s both slide-left; }

body {
  -webkit-animation: .4s .4s both fade;
          animation: .4s .4s both fade;
  height: 100%;
  opacity: 0;
  overflow: auto;
  position: relative; }

html {
  background: black;
  height: 100%; }

h1 {
  color: #eee;
  display: block;
  font-family: 'righteous', sans-serif;
  font-size: 16em;
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  text-shadow: 0 0 8px #000;
  z-index: 1; }
  h1.center {
    right: 100%;
    text-align: center; }
  h1.left {
    right: 100%;
    padding-left: .2em;
    text-align: left; }
  h1.right {
    left: 100%;
    padding-right: .2em;
    text-align: right; }

h2 {
  color: #ddd;
  display: block;
  font-family: 'righteous', sans-serif;
  font-size: 2.6em;
  font-weight: bold;
  padding: .5em 1em;
  text-align: center;
  text-transform: uppercase;
  background: #851313;
  background: -webkit-linear-gradient(top, #851313, #610e0e);
  background: linear-gradient(to bottom, #851313, #610e0e);
  box-shadow: 0 0 4px #4f0b0b;
  /*
	&.blue {
		background: $color-blue;
		background: linear-gradient(to bottom, $color-blue, darken($color-blue, 8%));
		box-shadow: 0 0 4px darken($color-blue, 12%);
	}

	&.green {
		background: $color-green;
		background: linear-gradient(to bottom, $color-green, darken($color-green, 8%));
		box-shadow: 0 0 4px darken($color-green, 12%);
	}

	&.orange {
		background: $color-orange;
		background: linear-gradient(to bottom, $color-orange, darken($color-orange, 8%));
		box-shadow: 0 0 4px darken($color-orange, 12%);
	}

	&.red {
		background: $color-red;
		background: linear-gradient(to bottom, $color-red, darken($color-red, 8%));
		box-shadow: 0 0 4px darken($color-red, 12%);
	}
	 */ }

h3, h4 {
  font-family: 'righteous', sans-serif;
  font-size: 2.2em;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  text-shadow: 0 0 2px #111; }

h3.blue {
  background: -webkit-linear-gradient(left, #0d486b, #126799 80%, #0d486b);
  background: linear-gradient(to right, #0d486b, #126799 80%, #0d486b);
  color: #fff; }

h3.orange {
  background: -webkit-linear-gradient(left, #473200, #ac7901 80%, #473200);
  background: linear-gradient(to right, #473200, #ac7901 80%, #473200);
  color: #fff; }

h3.red {
  background: -webkit-linear-gradient(left, #2c0606, #851313 80%, #2c0606);
  background: linear-gradient(to right, #2c0606, #851313 80%, #2c0606);
  color: #fff; }

b {
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.5; }

p {
  display: block;
  font-size: 1.6em;
  line-height: 1.6;
  margin: auto;
  max-width: 992px;
  padding: .5em 1em;
  position: relative;
  text-align: left; }

.anchor {
  position: relative;
  top: -48px; }

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 992px;
  padding: 6em;
  position: relative; }
  .container img {
    display: block;
    background: #ddd;
    float: left;
    margin: 1.4em 4em 2em;
    max-width: 200px;
    padding: 1em; }
  @media all and (max-width: 767px) {
    .container {
      padding: 2em 3em; }
      .container img {
        display: none; } }

.panel {
  padding: 4em 4em 6em; }
  @media all and (max-width: 767px) {
    .panel {
      padding: 2em 2em 4em; } }

footer {
  background: #851313;
  background: -webkit-linear-gradient(bottom, #851313, #610e0e);
  background: linear-gradient(to top, #851313, #610e0e);
  box-shadow: 0 0 4px #4f0b0b;
  height: 6em;
  position: relative; }

header {
  background-image: url(/img/headers/red-lines.jpg);
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 12px solid black;
  box-sizing: border-box;
  font-size: 9.8px;
  margin-top: 48px;
  min-width: 320px;
  overflow: hidden;
  padding: 2em;
  text-align: center; }
  header .indie, header .music, header .url {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    display: inline-block;
    margin: 2em;
    position: relative; }
  header .indie, header .music {
    height: 26.4em; }
  header .indie {
    background-image: url(/img/logo-indie-white.png);
    right: 100%;
    width: 75.5em; }
  header .music {
    background-image: url(/img/logo-music-white.png);
    left: 100%;
    width: 76.9em; }
  header .url {
    background-image: url(/img/logo-url-white.png);
    height: 9.8em;
    opacity: 0;
    width: 126.2em; }
  @media all and (max-width: 1600px) {
    header {
      font-size: 7.3px; } }
  @media all and (max-width: 1200px) {
    header {
      font-size: 6px; } }
  @media all and (max-width: 992px) {
    header {
      font-size: 4.6px; } }
  @media all and (max-width: 768px) {
    header {
      font-size: 2.9px; } }
  @media all and (max-width: 540px) {
    header .url {
      font-size: 2.3px; } }

.header {
  border-bottom: 12px solid black;
  border-top: 12px solid black;
  font-size: 9.6px;
  height: 40em;
  overflow: hidden;
  position: relative; }
  .header div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    height: 80em;
    position: absolute;
    top: 0;
    width: 100%; }
  .header .drums {
    background-image: url(/img/headers/drums.jpg); }
  .header .guitars {
    background-image: url(/img/headers/guitars.jpg); }
  .header .lessons {
    background-image: url(/img/headers/lessons.jpg); }
  .header .sheet-music {
    background-image: url(/img/headers/sheet-music.jpg); }
  .header .orchestra {
    background-image: url(/img/headers/orchestra.jpg); }
  @media all and (max-width: 1600px) {
    .header {
      font-size: 7.2px;
      height: 44em; }
      .header div {
        height: 88em; } }
  @media all and (max-width: 1200px) {
    .header {
      font-size: 6px;
      height: 48em; }
      .header div {
        height: 96em; } }
  @media all and (max-width: 992px) {
    .header {
      font-size: 5.2px;
      height: 52em; }
      .header div {
        height: 104em; } }
  @media all and (max-width: 768px) {
    .header {
      font-size: 3.2px;
      height: 56em; }
      .header div {
        height: 112em; } }
  @media all and (max-width: 540px) {
    .header {
      font-size: 2.8px;
      height: 60em; }
      .header div {
        height: 120em; } }

menu {
  background: -webkit-linear-gradient(left, #580d0d, #851313 20%, #851313 80%, #580d0d);
  background: linear-gradient(to right, #580d0d, #851313 20%, #851313 80%, #580d0d);
  border-bottom: 3px solid black;
  display: block;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  white-space: nowrap;
  width: 100%;
  z-index: 2; }
  menu a {
    border-radius: 4px;
    color: #fce8e8;
    display: block;
    font-size: 1.6em;
    font-family: 'righteous', sans-serif;
    line-height: 1;
    padding: 1em;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: background .4s;
            transition: background .4s; }
    menu a:hover {
      background: rgba(187, 27, 27, 0.5); }
  menu li {
    display: inline-block; }
  @media all and (max-width: 768px) {
    menu {
      background: url(/img/menu.png) no-repeat 2em top, #851313;
      background: url(/img/menu.png) no-repeat 2em top, -webkit-linear-gradient(top, #851313, #610e0e);
      background: url(/img/menu.png) no-repeat 2em top, linear-gradient(to bottom, #851313, #610e0e);
      box-sizing: border-box;
      cursor: pointer;
      height: 4.8em;
      -webkit-transition: height .2s;
              transition: height .2s;
      max-height: 100%;
      overflow: hidden;
      padding-top: 4.8em; }
      menu li {
        border-top: 1px solid #971616;
        display: block; }
        menu li:last-child {
          border-bottom: 1px solid #971616; }
      menu ul {
        height: 100%;
        overflow: auto; } }

@media all and (max-width: 768px) {
  .noscript menu:hover, menu.show {
    height: 34.3em; } }

section {
  background: #111;
  color: #eee;
  font-family: 'open sans', sans-serif;
  min-width: 320px;
  overflow: hidden;
  position: relative;
  text-align: center; }
  section a {
    color: #fff; }
  section li {
    font-family: 'open sans', sans-serif;
    font-size: 1.8em;
    line-height: 1.5;
    list-style: none;
    text-align: center;
    margin: .5em 0; }
  section ul {
    display: inline-block;
    padding: 4em 4em 0;
    vertical-align: top; }

.dark {
  background: black;
  background: -webkit-linear-gradient(top, black, #1a1a1a 30%, #1a1a1a 70%, black);
  background: linear-gradient(to bottom, black, #1a1a1a 30%, #1a1a1a 70%, black);
  border-right: 1px solid #333333; }
  .dark:last-child {
    border: none; }

.grid, .grid-2, .grid-3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative; }
  .grid > div, .grid-2 > div, .grid-3 > div {
    display: inline-block;
    position: relative;
    vertical-align: top; }

.grid-2 > div {
  width: 50%; }

@media all and (max-width: 768px) {
  .grid-2 {
    display: block; }
    .grid-2 > div {
      border: none;
      display: block;
      width: auto; } }

.grid-3 > div {
  width: 33.33%; }

@media all and (max-width: 992px) {
  .grid-3 {
    display: block; }
    .grid-3 > div {
      border: none;
      display: block;
      width: auto; } }

/*
.grid {

.grid-box {
color: #ddd;
border-left: 1px solid #333;
height: 100%;
padding: 0 0 4em;

p {
padding: 1em 4em 0;
}
}

section {
background: #000;
display: inline-block;
vertical-align: top;
width: 33.33%;

&:first-child .grid-box {
border-left: none;
}
}

@media all and (max-width: $bp-lg) {
display: block;

.grid-box {
border-left: none;
border-top: 1px solid #333;
}

section {
display: block;
width: auto;
}
}
}
 */
html:not(.noscript) h1.center, html:not(.noscript) h1.left {
  right: 100%; }

html:not(.noscript) h1.right {
  left: 100%; }

html:not(.noscript) menu a {
  opacity: 0; }

html:not(.noscript) section ul {
  opacity: 0; }

html:not(.noscript) .container, html:not(.noscript) .grid-2 > div, html:not(.noscript) .grid-3 > div {
  opacity: 0; }