/*

Font Size
14, 18, 23, 29, 37, 47

Line Height
31, 38, 47, 58, 73

Spacing Units
4, 7, 12, 19, 31, 50, 81, 131, 212, 343


EC1C24

*/

@font-face {
    font-family:fontDiner;
    src: url(/fonts/fontdinerswanky.ttf);
}


/*************************************** VARIABLES ***********************************/

:root {
  font-size:18px !important;
  --red:#EC1C24;
  --grey: hsla(360, 100%, 100%, 0.25);
  --white:#f2f0f0;
  --cream:#FAFFD8;
  --black:#000;
  --blue:#087E8B;
  --darkGrey:#3c3c3c;
  --lightGrey:hsl(0,0%,0%, .10);
  --pxUnit:8px;
  --rotateLeft:-3deg;
  --rotateRight:6deg;
  --h1:54px;
  --h2:54px;
  --h3:32px;
  --h4:24px;
  --fontShadowRed:5px 5px var(--red);
  --fontShadowGrey:5px 5px var(--grey);
  --borderRadius:8%;
  --headingFont:'Cherry Cream Soda', sans-serif;
  --bodyFont:'Onest', sans-serif;
  --darkBackground: background:url("/img/raster/black-retro-background.jpg") no-repeat;
}

/*----------------------------------------- END --------------------------------------*/

body {
	line-height:1.6;
  font-family:var(--bodyFont);
  background:url("/img/raster/amp-pattern.jpg");
  background-attachment: fixed;
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color:var(--darkGrey);
}


/*************************************** ANIMATION ***********************************/

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes rotatePicRight {
    0% {
        rotate: 0;
        scale:1;
    }
    50% {
      scale:1.1;
    }
    100% {
        rotate: 8deg;
        scale:1;
     }
}
@keyframes rotatePicLeft {
    0% {
        rotate: 0;
        scale:1;
    }
    50% {
      scale:1.1;
    }
    100% {
        rotate: -6deg;
        scale:1;
     }
}
@keyframes scaleHeading {
    0% {
        scale:1;
    }
    50% {
      scale:1.5;
    }
    100% {
        scale:1;
     }
}


.js-fixed {
  position: fixed;
  top:0;
  right:0;
  left:0;
  z-index:10;
}


/*Backgrounds*/
.bg-card {
  background:#222;
  margin:16px 24px;
  padding:16px;
  border-radius:2px;
}

/* div {
  border:1px solid black;
} */


/*========color palete=========

body { font-size:100%; line-height:1.5; }
h1, h2, h3 { margin-top:0; margin-bottom:0; }
h1 { font-size:1.5em; padding:1.75em 0; }
h2 { font-size:1.33333em; padding:1.5em 0; }
h3 { font-size:1.16667em; padding:1.82143em 0; }

/*transition
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
-ms-transition:all .25s ease;
transition:all .25s ease;

*/
/*==========fonts==============*/
h1, h2, h3 {
  line-height: 1.2;
}
h1, h2 {
  font-family:var(--headingFont);
}
h1, h2 {
  font-weight:500;
}
h1, .h1 { 
  font-size:var(--h1);
  color:var(--white);
}
h2 { 
  font-size:var(--h2);
}
h1, h2 {
  margin-bottom:1.5rem;
}
h2 {
  margin-bottom:1rem; 
}
h3, .h3 { 
  font-size:var(--h3); 
  font-weight:600; 
}
h4 {
  font-size:1.25rem;
  font-weight:800; 
}
.shadow-light {
  text-shadow:var(--fontShadowGrey);
}
.shadow-red {
  text-shadow:var(--fontShadowRed);
}

p {
	font-size:1rem;
	margin:0 0 1.5rem 0;
  font-weight:300 !important;
}
.text-lg {
  font-size:1.25rem;  
  line-height:31px;
  margin-bottom:.5rem;
}
a {	
	-webkit-transition:all .25s ease;
	-moz-transition:all .25s ease;
	-ms-transition:all .25s ease;
	transition:all .25s ease;
}
.a.learn {
  color:var(--red);
  text-decoration: underline;
}
.a.learn:hover {
  color:var(--blue);
}
.custom-hr {
  border:none;
  margin:0 0 1.5rem 0;
  background-color:var(--red);
  height:4px;
  width:64px;
}
iframe.youtube {
  width:100%;
  min-height:380px; 
}
.list-inline li {
	padding:0;
}
.clear {
  margin:0;
  padding:0;
}
strong {
  font-weight:700;
}
.italic {
  font-style:italic;
}
section {
  padding:3rem 0;
}
.form-control {
  color:var(--black);
  border-radius:4px;
  border-color:var(--lightGrey);
  font-size:1rem;
  margin-bottom:1rem;
}
.form-control:focus {
   border-color:var(--red); 
   box-shadow:none;
}
.form-button {
   margin-top:1.5rem; 
}
.list-group-item {
  background: none;
}
.border-bottom {
  border-bottom: 1px solid #333 !important;
}


/* Colors */
.clr-bright {
  color:var(--white);
}
.clr-dark {
  color:var(--black);
}
.clr-offwhite {
  color:var(--cream);
}
.clr-red {
  color:var(--red);
}
.clr-ltgrey {
  color:hsla(0, 6%, 71%, 1);
}
.clr-grey {
  color:var(--grey);
}
.clr-bg-bright {
  background:hsl(0, 100%, 100%);
}
.clr-bg-black {
  background:var(--black);
}
.clr-bg-offwhite {
  background:hsla(55, 100%, 93%, 1);
}
.clr-bg-red {
  background:var(--red);
}
.clr-bg-ltgrey {
  background:hsla(0, 6%, 81%, 1);
}
.clr-bg-grey {
  background:var(--grey);
}

.c-link {
  color:hsla(0, 100%, 100%, 1);
  text-decoration:underline;
}
.c-link:hover {
  color:var(--blue);
  text-decoration: underline;
}
.c-link.first {
  margin-right:.5rem;
}



/*Images*/
.img-fluid {
  position: relative;
  z-index:2;
}
.img-border {
  border:.5rem solid hsla(357, 85%, 52%, 1);
}


/*************************************** NAVBAR ***********************************/
.navbar {
  background-color:var(--black);
  margin-bottom:0;
}
#mabel-collapse {
  padding:5rem 0 1.5rem;
}
.mabel-nav {
  text-align:center;
  padding:0;
  margin-bottom:0;
  list-style: none;
}
  .mabel-nav-right .nav-item:last-child {
    margin-top:24px;
  }
.mabel-nav-right svg {
  margin-right:.5rem;
}
.navbar-toggler {
  padding:1rem 0;
}
.navbar-toggler svg {
  fill:var(--white);
}
.brand-wrapper {
  display:flex;
  position:relative;
  width:100%;
  justify-content: center;
}
.navbar-brand {
  position: absolute;
  width:7rem;
  padding:0;
  width:auto;
}
.navbar-brand img {
  width:7rem;
}
.nav-link {
  text-align:left;
}
.icon-header {
  height:2.25rem;
  width:2.25rem;
  margin:0 0 0 .5rem;
}
svg:hover .svg-path {
  fill:#C71019;
}
.navbar-collapse {
  padding-top:48px;  
}
.nav-link, .btn-primary {
  line-height:1;
}
.nav-link  {
  color:var(--white);
  transition: all cubic-bezier(.6,.04,.98,.34) .15s;
  padding:1rem;
  border-bottom:1px solid var(--grey);
}
.nav-link:hover, .nav-link:focus, .nav-link:active, .nav-item.active .nav-link {
  color:var(--blue);
}
.wrap-social {
  display:inline-block;
  width:100%;
  text-align:center;
}
.wrap-social svg {
  fill:#fff;
}
.navbar-toggler {
  z-index:100;
}

/*Banner*/


/*************************************** BUTTONS ***********************************/
.btn {
  padding:.75rem 1.25rem;
  border-radius:4px;
}
.btn-primary {
  background:var(--red);
  color:hsl(0, 100%, 100%);
  border:none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background:var(--blue);
  color:var(--cream);  
}
.btn-ghost {
  background:none;
  border:1px solid var(--white);
  border-radius:4px;
}
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active {
  background:var(--black);
  border:1px solid transparent;
  color:var(--white);
}


/*************************************** HERO ***********************************/


.hero-img {
  position: relative;
  z-index:1;
  width:100%;
}
.hero-container {
  position: relative;
  width:100%;
}
.mabel-text-wrap.bg-red {
  display: inline-block;
  width: 100%;
  background: red;
  position: relative;
  top:0;
  text-align: center;
  z-index: 3;
  height:64px;
}
.mabel-text {
    position:relative;
    z-index:4;
    width:80%;
}
.flex-grid {
  display:none;
}
.show-row-outer {
  background:var(--white);
}
.section-bg {
  background:linear-gradient(to bottom, var(--black) 0%, var(--black) 50%, var(--white) 50%, var(--white) 100%);
}

/* Headings */

.shows-link {
  color:hsl(0, 100%, 100%);
}
.shows-link:hover {
  color:hsla(357, 85%, 52%, 1);
  text-decoration:none;
}

/*Homepage Show Block*/
.upcoming {
  margin-top:2rem;
  background:var(--black);
}
.grid.current {
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:1rem;
  padding-top:1.5rem;
}
.grid.full {
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:1rem;
}
.current .show {
  background:hsla(0, 0%, 16%, 0.5);
  color:var(--white);
  padding:2rem 1.5rem;
}
.full .show {
  background:hsla(0, 0%, 16%, 0.5);
  color:var(--white);
  padding:.5rem;
}
.date {
  display: inline-block;
  text-transform: uppercase;
  text-align:center;
  padding:.25rem;
  font-size:1rem;
  background:var(--red);
  color:var(--white);
  border-radius:var(--borderRadius);
  min-width:120px;
}
.current .date {
  margin-bottom:1.5rem;
}
.full .date {
 
}
.date span {
  display:inline-block;
  width:100%;
  line-height:1;
}
.day {
  font-size:var(--h2);
  font-family:var(--bodyFont);
  font-weight:600;
}
.show .title {
  font-family:var(--bodyFont);
  font-size:var(--h4);
  margin-bottom:.5rem;
}
.current .time {
  line-height:1.5;
  margin-bottom:.5rem;
}
.current .link {
  display:inline-block;
  font-weight:600;
  margin-top:1.5rem;
  padding:.5rem 1.5rem;
  border:1px solid var(--white);
}
.current .link:hover {
  color:var(--white);
  background:var(--black);
  border:1px solid var(--black);
}
.bi {
  margin:-4px .25rem 0 0;
}
.current .bi-clock-fill {
  fill:var(--red);
}


.show-wrap {
  position: relative;
  padding:1.25rem;
  border-width:0 0 1px 0;
  border-style:solid;
  border-color:var(--lightGrey);
}
.show-row-outer .show-wrap:last-child {
  border-width:0 0 0 0;
}
@keyframes popUp {
  0% {
    transform: translateY(0);
    box-shadow:1px 2px 4px hsla(0, 100%, 50%, 1.0);
  }
  10% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
    box-shadow:none;
  }  
}
.show-wrap.upcoming .large-text-wrap {
  background:var(--red);
  color:var(--cream);
}
.large-show-date, .show-month, .show-year {
  line-height:1;
}
.full .date {
  margin-right:24px;
}

.sm-month {
  display:inline-block;
  width: 100%;
  text-transform:capitalize;
}
.show-time svg {
  margin:0px 6px 4px 0;
}
.show-link {
  margin-top:8px;
  color: hsla(357, 85%, 52%, 1);
  text-decoration:none;
}
.show-link:hover {
    color:var(--blue);
}
.cover-span {
  display:inline-block;
  width: 100%;
  background:var(--black);
  color:var(--white);
}

.paper-quote {
  rotate:4deg;
}
}  

/*********************************** WIDGET ****************************************/

    .bit-widget .bit-event {
      font-family:var(--bodyFont);
      line-height:1.2;
    }
    .bit-location {
      display:none;
    }
    .bit-widget.bit-layout-desktop .bit-event {
      padding:2rem;
    }
    .bit-widget.bit-layout-desktop .bit-titleWrapper .bit-venue {
      width:auto;
      height:auto;
      font-size:var(--h3);
    }
    .bit-widget .bit-follow-section-heading-text {
      display:none;
    }
    .bit-widget .bit-offers {
      background-color:var(--red);
    }

/*************************************** MAILBOX ***********************************/

.mail-band-pic {
  margin-bottom:4rem;
}
/*music section*/
/*About Page*/
.o-about_row {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
}
.o-about_row > div {
  width:calc(50% - .75rem);
  margin-bottom:1.5rem;
  padding:1.5rem;
}
.c-about_image {
  margin-bottom:1.5rem;
}
.c-about_member_name {
 font-size:1.25rem;
  margin-bottom:calc(1.5rem / 3);
}
.c-about_likely {
  font-size:1rem;
}
/*Past Shows*/
.o-past_row {
  padding:.5rem;
}

/*About Us*/
.bio {
  padding:0 0 3rem 0;
}
.bio:last-child {
  border: none;
}
.bio-inst {
  font-style:normal;
}
.img-container.bio-img {
  height:400px;
  width:70%;
  margin-bottom:1.5rem;
}
.bio-img img {
  height:100%;
  width:100%;
  object-fit:cover;
}

/*Electronic Press Kit*/
.o-epk_image_wrap {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
}
.c-epk_image_link {
  width:calc(50% - .5rem);
  margin-bottom:1rem;
}
.c-epk_image {
  object-fit:cover;
  height:6rem;
  width:100%;
}
.c-epk_iframe {
  width:100%;
}
/*form controls*/
#mc_embed_signup_scroll {
  width:100%;
}
.indicates-required {
	font-size:.75rem;
	margin-top:calc(1.5rem / 2);
  text-align:right;
}

/*************************************** FOOTER  ***********************************/
footer {
  background:var(--black);
  color:hsla(0, 100%, 100%, 1);
}
footer a {
  color:hsla(357, 85%, 52%, 1);  
}
footer a:hover {
  color:hsla(357, 85%, 32%, 1);   
}
.footer-logo {
  max-width:8rem;
  margin-bottom:1.5rem;
}
.footer_credits_p {
	padding-top:.5rem;
}

/* ============= Audio ============== */
audio {
   width:100%;
}


/* ============= Setlist Generator ============== */
.song-list {
  list-style: none;
  margin:0;
}
.song-list li {
  display:flex;
  margin:4px 0;
  padding:8px;
  border:1px solid var(--darkGrey);
}
.song-list .title {
  width:50%;
}
.song-list .artist {
  width:40%;
}
.song-list .key {
  width:10%;
}

/* CSS to add space between table rows */
table tbody tr {
    margin-bottom: 10px; /* Adjust the value as needed */
}
/* CSS to add space within table rows */
table tbody tr {
    padding: 10px 0; /* Adjust the value as needed */
}




/* ============= media queries ============== */

@media (min-width: 300px) { 

}

@media (min-width: 576px) { 
  .mabel-text-wrap.bg-red {
    height:124px;
  }
  .mabel-text {
      width:80%;
  }
  .mabel-nav-right .nav-item:last-child {
    margin-top:24px;
  }
}


@media (min-width: 768px) {
  section {
    padding:3rem 0;
  }
  .bg-amp {
    background-attachment: fixed;
  }
  .navbar {
    padding:1rem 0;
  }
  .nav-link {
    padding:.5rem 1rem;
  }
  .mabel-text-wrap.bg-red {
    top:0;
    height:136px;
  }
  .mabel-nav-right .nav-item:last-child {
    margin:8px 0 0 0;
  }
  .navbar-collapse {
    padding-top:0;
  }
  h1.secondary {
    padding:4rem 0 2rem;
  }
  .form-control {
    margin-bottom:0;
  }
  .grid.full {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
  }
}

@media (min-width: 992px) {
  html {
    font-size:18px !important;
  }
  section {
    padding:4rem 0;
  }
  #mabel-collapse {
    padding:0;
    justify-content:space-between;
  }
  .mabel-nav {
    display:flex;
  }
  .brand-wrapper {
    display:flex;
    position:absolute;
    padding:0;
  }
  .navbar-brand {
    margin-top:1rem;
  }
  .navbar-brand img {
    position: relative;
  }
  .nav-item {
    padding:0;
    margin-right:1rem;
  }
  .nav-link {
    display:inline-block;
    padding:1rem 0;
    border:none;
  }
  .heading-banner {
  font-size:7rem;
  padding:15rem 0;
  }
  .navbar-brand img {
    max-width:7rem;
    top:-3rem;
  }
  .mabel-text-wrap.bg-red {
    top:0;
    height:124px;
  }
  .mabel-text {
      width:80%;
  }
  .bio-pic {
    margin-bottom:0;
  }
  .footer-logo {
   margin:-7rem 0 3rem 0;   
 }
 .grid.current {
    grid-template-columns:repeat(3, 1fr);
  }

}


@media (min-width: 1200px) {
  .container {
    max-width:1600px;
  }
  .nav-item {
    margin-right:3rem;
  }
  .mabel-text-wrap.bg-red {
    top:0;
    height:10rem;
  }
  .paper-quote {
    margin-top:-4rem;
  }
  .show-wrap.upcoming {
    width:calc(100%/2);
  }
  .grid.current {
    grid-template-columns:repeat(3, 1fr);
  }
 .current .date {
  margin-top:-100%;
 }
  .mail-col {
    padding-left:3rem;
  }
  .mail-band-pic {
    margin-bottom:0;
  }
  .flex-grid {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    height:800px;
    overflow:hidden;
  }
  .flex-grid .grid {
    height: 400px;
    margin: 8px;
    width:calc(100%/3 - 16px);
  }
  .flex-grid img {
    height: 400px;
    object-fit: cover;
    margin: 8px;
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .heading-banner {
  padding:10rem 0;
  }
  .mabel-text-wrap.bg-red {
  top:0;
  height:14rem;
  }
  .mabel-text {
      position:relative;
      z-index:4;
      max-width:1400px;
  }
  .flex-grid {
    height:800px;
    overflow:hidden;
  }
  .flex-grid .grid {
    width:calc(100%/4 - 16px);
  }
}