/* Clipping Theme by Adam Harms */
/*-------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
/* Colors */
/* Typography */
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td,
th {
  padding: 0; }

/*-------------------------------------------------------------
# Main Styles
--------------------------------------------------------------*/
html {
  min-height: 100%; }

body {
  min-height: 100%;
  color: #141414;
  background-size: auto 60% !important;
  background-attachment: fixed !important;
  background-position: center bottom !important; }

a {
  color: #dd0c0c; }
  a:hover {
    color: #eb2b2b; }
  a:visited {
    color: #dd0c0c; }

#main {
  position: relative;
  top: 40px; }
  #main header {
    width: 100%;
    background: transparent;
    height: 220px;
    overflow: hidden;
    position: relative; }
    #main header img {
      width: 100%; }
    #main header h1 {
      color: white;
      position: relative;
      text-align: center;
      margin: 0;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 100px;
      width: 100%;
      line-height: 209px;
      top: 0px;
      z-index: 99; }
      #main header h1 a {
        color: white; }
        #main header h1 a:hover {
          color: white;
          text-decoration: none; }
        #main header h1 a:visited {
          color: white; }
        #main header h1 a:active {
          color: white; }
    #main header .waveform.wave-1 {
      background: url(/themes/clipping-theme/assets/waveform-animated-pink.gif) right bottom repeat-x transparent;
      position: absolute;
      background-size: 211px 100%;
      bottom: -34px;
      height: 392px;
      width: 100%;
      display: none; }
    #main header .waveform.wave-2 {
      top: -137px;
      position: absolute;
      background: url(/themes/clipping-theme/assets/waveform-animated.gif) right bottom repeat-x transparent;
      background-size: 211px 100%;
      height: 496px;
      -webkit-transition: all .3s;
      transition: all .3s;
      z-index: -99; }
      #main header .waveform.wave-2.big-bg {
        background-size: 4px 100%; }
    #main header .waveform.wave-3 {
      bottom: 74px;
      position: relative;
      background: url(/themes/clipping-theme/assets/waveform-animated.gif) bottom right repeat-x transparent;
      background-size: 186px 242px; }
    #main header nav {
      margin-top: 0.75em;
      text-align: center; }
      #main header nav ul.menu {
        list-style: none;
        padding: 0;
        margin: 0; }
        #main header nav ul.menu li {
          display: inline-block; }
          #main header nav ul.menu li a {
            font-size: 2em;
            text-transform: uppercase;
            z-index: 9999999;
            font-weight: bold;
            color: black;
            margin: 0;
            padding: 1em 0.75em; }

.menu {
  display: none; }

#clipping .slicknav_menu {
  display: block;
  background: black;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999999999999;
  left: 0; }

#clipping a.slicknav_btn {
  background: black; }

#clipping .slicknav_nav a {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px; }

.waveform {
  background: url(/themes/clipping-theme/assets/waveform-animated.gif) right bottom repeat-x transparent;
  position: absolute;
  background-size: 180px 284px;
  height: 200px;
  width: 100%; }

.wrap {
  max-width: 1024px;
  margin: 0 auto; }

.block {
  color: white;
  font-size: 24px;
  border: 4px solid white;
  float: left;
  position: relative;
  width: 20%;
  margin: 20px;
  padding: 20px;
  bottom: 300px; }

div#content {
  background: #fffffff2;
  padding: 118px 75px 45px 75px;
  position: relative;
  font-size: 18px;
  margin-bottom: 100px; }

.title-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 165px 165px 0 0;
  border-color: #0a0a0a transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0; }

.title-triangle h2 {
  color: white;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  position: relative;
  right: 50px;
  bottom: 136px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
  width: 230px; }

#shows {
  position: absolute;
  top: 100vh;
  background: black;
  margin: -180px 0;
  width: 100%;
  color: white;
  font-size: 18px; }
  #shows h1 {
    text-transform: uppercase;
    padding: 0px;
    margin-bottom: 0; }

iframe#merch-frame {
  width: 100%;
  border: none;
  min-height: 600px; }

#merch-iframe-body a {
  color: #dd0c0c; }
  #merch-iframe-body a:hover {
    color: #eb2b2b; }
  #merch-iframe-body a:visited {
    color: #dd0c0c; }

.loading-message {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 45px; }

.merch-container {
  position: relative;
  width: 100%;
  min-height: 600px; }

.see-through {
  opacity: 0; }

/* Footer */
footer {
  text-align: center;
  padding-top: 25px; }

/* Pages */
#playlist {
  height: 500px; }

.parsed-product-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.parsed-product {
  margin: 20px 20px 20px 0px;
  padding: 16px 32px 16px 0;
  text-align: center;
  width: 250px; }
  .parsed-product img {
    max-width: 100%; }

.home-page #content {
  display: none; }

.social-icon {
  padding: 20px 20px 20px 0;
  text-align: center;
  width: 50%; }

.social-icon .fa-5x {
  font-size: 3em;
  padding-bottom: 5px; }

ul.tour-list {
  margin: 0;
  padding: 0; }

.tour-date {
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 12px 0; }

ul.tour-list li.row.collapse {
  display: block;
  margin: 20px auto; }

body.merch-iframe {
  background: transparent; }

/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/
/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 481px) {
  /******************************************************************

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to
481px because at 480px it would load on a landscaped iPhone.
This isn't ideal because then you would be loading all those
extra styles on that same mobile connection.

A word of warning. This size COULD be a larger mobile device,
so you still want to keep it pretty light and simply expand
upon your base.scss styles.

******************************************************************/
  #main header {
    height: 260px; }
  .social-icon {
    padding: 20px 50px 20px 0;
    width: initial; }
  .social-icon .fa-5x {
    font-size: 5em; } }

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  /******************************************************************

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
  body {
    background-size: cover !important;
    background-position: center 170px !important; }
  #clipping .slicknav_menu {
    display: none; }
  .menu {
    display: initial; }
  #main {
    top: 0px; }
    #main header {
      height: 295px; }
  .loading-message {
    top: 175px; } }

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1030px) {
  /******************************************************************

Stylesheet: Desktop Stylsheet

This is the desktop size. It's larger than an iPad so it will only
be seen on the Desktop.

******************************************************************/
  .grid-container {
    display: grid;
    grid-template-columns: 350px 3fr 1fr 1fr;
    grid-template-rows: 300px 400px 300px;
    grid-gap: 10px; }
    .grid-container .box {
      border: 2px solid black;
      background: white; }
    .grid-container .shows {
      grid-row: span 2; }
    .grid-container .transparent {
      background: transparent;
      border: none; }
    .grid-container .box-6 {
      grid-column: span 2; }
    .grid-container .box-7 {
      grid-row: span 2; }
    .grid-container .box-9 {
      grid-row: span 2; }
  #main header nav ul.menu li a {
    margin: 0 1em; } }

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1240px) {
  /******************************************************************

Stylesheet: Super Large Monitor Stylesheet

You can add some advanced styles here if you like. This kicks in
on larger screens.

******************************************************************/ }