/*** FONTS ***/
@font-face { font-display:swap; font-family:'OpenSans'; font-style:normal; font-weight:300; src:url('/fonts/OpenSans-Light-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:italic; font-weight:300; src:url('/fonts/OpenSans-LightItalic-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:normal; font-weight:400; src:url('/fonts/OpenSans-Regular-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:italic; font-weight:400; src:url('/fonts/OpenSans-RegularItalic-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:normal; font-weight:600; src:url('/fonts/OpenSans-Semibold-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:italic; font-weight:600; src:url('/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:normal; font-weight:700; src:url('/fonts/OpenSans-Bold-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:italic; font-weight:700; src:url('/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:normal; font-weight:800; src:url('/fonts/OpenSans-ExtraBold-webfont.woff') format('woff'); }
@font-face { font-display:swap; font-family:'OpenSans'; font-style:italic; font-weight:800; src:url('/fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'); }
/*** AUDIO PLAYLIST ***/
ul.playlist { margin:0; padding:0; list-style:none; }
ul.playlist a.track { display:flex; line-height:1.25em; padding:1em 0; text-decoration:none; }
ul.playlist a.track.active { color:var(--red); }
ul.playlist a.track:not(.active):hover { color:var(--blue); }
ul.playlist a.track:not(.active):not(:hover) { color:inherit; }
ul.playlist a.track span.playbtn { align-items:center; display:flex; font-size:2.4em; margin-right:0.25em; }
ul.playlist a.track span.info { display:flex; flex:1; flex-direction:column; }
ul.playlist a.track span.info span.title { font-weight:700; }
ul.playlist a.track.active span.info span.title:after { content: ' (now playing)'; font-style:oblique; }
ul.playlist a.track.active span.playbtn i:before { content:'\f28d'; }
ul.playlist a.track:not(.active) span.playbtn i:before { content:'\f144'; }
ul.playlist li + li { border-top:0.1rem solid #eee; }
/*** BUTTONS ***/
.btn { border-radius:var(--borderRadius); color:#fff; display:inline-block; font-size:1.1em; font-weight:700; padding:0 2em; position:relative; text-shadow:1px 1px 0.5px rgb(0 0 0 / 25%); }
.btn:before { content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/img/bg.png'); }
.btn.primary { background-color:var(--blue); background-image:-webkit-linear-gradient(top,rgba(97, 184, 219, 1),rgba(97, 184, 219, 1)); background-image:linear-gradient(top,rgba(97, 184, 219, 1),rgba(97, 184, 219, 1)); box-shadow:inset 0 0 0 1px var(--blueDark), inset 0 2px 1px 0 rgb(255 255 255 / 75%); }
.btn.sm { font-size:0.9em; line-height:4rem; }
.btn.con { background-color:var(--blue); background-image:-webkit-linear-gradient(top,rgba(97, 184, 219, 1),rgba(97, 184, 219, 1)); background-image:linear-gradient(top,rgba(97, 184, 219, 1),rgba(97, 184, 219, 1)); box-shadow:inset 0 0 0 1px var(--blueDark), inset 0 2px 1px 0 rgb(255 255 255 / 75%); }
.btn.fbk { background-color:#3b5998; box-shadow:inset 0px 0px 0px 1px #0b2968, inset 0px 2px 1px 0px rgb(255 255 255 / 75%); }
a.btn { line-height:3.25em; }
button.btn { height:3.25em; }
.btn:disabled {
  box-shadow: none;
  background-color: var(--mediumDark);
  opacity: 0.75;
  background-image: none;
  color: var(--medium);
  cursor: not-allowed;
  transition:all 0.25s ease-in-out;
}
/*** HEADER ***/
#header, #header .container, #header .container .flex { align-items:stretch; display:flex; flex:1; width:100%; }
#header { background-color:var(--dark); box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%), 0 2px 3px 0 rgb(0 0 0 / 10%); height:var(--headerHt); left:0; position:fixed; top:0; width:100%; }
#header div.buttons { align-items:center; display:flex; justify-content:center; }
#header div.buttons a + a { margin-left:1.2rem; }
#header img { display:block; max-height:3.2rem; }
#header .logo { align-items:center; display:flex; }
/*** EVENTS ***/
div.event { align-items:flex-start; display:flex; }
div.event + div.event { border-top:0.1rem solid #eee; margin-top:1.5em; padding-top:1.5em; }
div.event div.event-calendar { border:0.1rem solid #fff; border-radius:var(--borderRadius); box-shadow:0rem 0rem 0.4rem 0.2rem rgb(0 0 0 / 10%); margin-right:1em; margin-top:0.2em; text-align:center; width:4em; }
div.event div.event-calendar div.event-day { background-image:linear-gradient(#fff, #f0f0f0 50%); font-size:1.25em; font-weight:600; text-shadow: 0.1rem 0.1rem 0 #fff; }
div.event div.event-calendar div.event-month { background-color:var(--red); border-top-left-radius:inherit; border-top-right-radius:inherit; color:#fff; font-size:0.8em; font-weight:800; text-shadow:none; text-transform:uppercase; }
div.event div.event-info { align-self:stretch; display:flex; flex:1; flex-direction:column; font-size:0.9em; justify-content:center; line-height:1.5em; }
div.event div.event-info div.event-date { font-size:110%; font-weight:600; }
div.event div.event-location strong { color:var(--red); font-weight:600; }
/*** FORM ELEMENTS ***/
button, input, select, textarea { border:none; border-radius:var(--borderRadius); font-family:'OpenSans', sans-serif; font-size:1.6rem; width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
button, input, select { height:3.25em; padding:0 1.25em; }
button { cursor:pointer; }
label { display:block; width:100%; }
textarea { min-height:10em; padding:1.25em; }
.grecaptcha-badge { visibility: hidden; }
/*** FORMS - CONTACT ***/
form.contact > *:not(:first-child) { margin-top:1.5em; }
form.contact input, form.contact textarea { background-color:var(--dark); box-shadow:inset 0 2px 5px 0 rgb(0 0 0 / 5%), 0 1px 0 0 rgb(255 255 255 / 3%); color:#fff; }
#contact-message { font-size:0.9em; }
#contact-message i { margin-right:0.5em; }
#contact-message i.fa-check { color:#0C0; }
#contact-message i.fa-times { color:#C00; }
/*** LISTS - VENUES ***/
ul.venues { line-height:1.5; padding:0 0 0 2em; }
ul.venues li + li { margin-top:0.5em; }
/*** MAIN BOX ***/
.mainbox { margin-left:auto; margin-right:auto; max-width:100rem; }
.mainbox.flex { flex-flow:row wrap; }
.mainbox .contentbox { background-color:#fff; border-radius:var(--borderRadius); box-shadow:inset 0 0 0 0.1rem rgb(0 0 0 / 10%), 0 0.4rem 0.8rem 0 rgb(0 0 0 / 10%); padding:2em; }
.mainbox .contentbox > *:not(:first-child) { margin-top:2em; }
.mainbox .contentbox section > *:not(:first-child) { margin-top:1.25em; }
.mainbox blockquote.contentbox { margin:0; }
.mainbox blockquote.contentbox div.source { font-size:0.9em; font-weight:700; line-height:1.5em; }
/*** NAV ***/
#nav { align-items:center; display:flex; justify-content:center; }
#nav a { align-items:center; color:#fff; display:flex; font-weight:600; justify-content:center; line-height:4rem; padding:0 2rem; text-decoration:none; }
#nav a:active { background-color:rgb(255 255 255 / 25%); }
#nav a:not(:active):hover { background-color:rgb(255 255 255 / 10%); }
#nav a:not(:active):not(:hover) { background-color:rgb(255 255 255 / 0%); }
/*** SECTION - ABOUT ***/
section#about .flex-container { align-items:flex-start; justify-content:flex-start; }
/*** SECTION - CONTACT ***/
section#contact hr { margin:3em 0 2em 0; }
/*** SECTION - HOME ***/
section#home { background-image:url('/img/section-home-bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; position:relative; }
section#home a.btn { margin-top:1.5em; }
section#home div.flex > * { align-items:center; display:flex; flex-direction:column; justify-content:center; }
section#home div.intro { flex:1; }
section#home h1 { font-size:3em; font-weight:800; letter-spacing:-0.05em; line-height:1; text-shadow:2px 2px 2px rgb(0 0 0 / 25%); }
section#home h1 span { color:var(--blue); font-style:oblique; font-weight:300; padding:0 0.05em; }
section#home img.lead { max-height:30rem; }
section#home p { color:var(--mediumLight); font-size:1.25em; font-weight:600; line-height:1.5em; margin:1em auto 0 auto; padding:0; }
/*** SECTIONS - DEFAULT ***/
section.wrapper { background-image:url('/img/section-bg.png'); box-shadow:inset 0 1px 0 0 rgb(0 0 0 / 5%), inset 0 2px 3px 0 rgb(0 0 0 / 10%); text-align:center; text-shadow:0.1rem 0.1rem 0 #fff; }
section.wrapper h1,
section.wrapper h2 { color:var(--mediumDark); }
section.wrapper:nth-child(even) { background-color:#fcfcfc; }
section.wrapper:nth-child(odd) { background-color:#f0f0f0; }
section.wrapper.dark { background-color:#303030; color:var(--mediumLight); text-shadow:-1px -1px 0 #181818; }
section.wrapper.dark h1,
section.wrapper.dark h2 { color:#fff; }
section.wrapper .container > *:not(:first-child) { margin-top:2em; }
/*** Z-INDEX ***/
#header { z-index:99999; }
/*** EVERYTHING ELSE ***/
* { box-sizing:border-box; outline:none; -webkit-tap-highlight-color:transparent; }
:root { --blue:#61b8db; --blueDark:#3188AB; --dark:#282828; --mediumDark:#3e3e3e; --medium:#888; --mediumLight:#bbb; --red:#C03; }
:root { --borderRadius:0.4rem; --headerHt:6.4rem; }
::-webkit-input-placeholder { color:var(--medium); }
::-moz-placeholder { color:var(--medium); }
:-ms-input-placeholder { color:var(--medium); }
:-moz-placeholder { color:var(--medium); }
a { transition:all 0.25s ease-in-out; }
a:hover { color:var(--blueDark); }
a:not(:hover) { color:var(--blue); }
a.btn { color:#fff; text-decoration:none; }
audio { display:block; margin-left:auto; margin-right:auto; max-width:100%; width:100%; }
body { color:#565656; font-family:'OpenSans', sans-serif; line-height:1.75; margin:var(--headerHt) 0 0 0; }
h1, h2, h3, h4 { letter-spacing:-0.05rem; line-height:1.4; margin:0; padding:0; }
h2 { font-size:1.8em; }
figure { margin:0; padding:0; }
figure.portrait { background-color:#fff; border:1rem solid #fff; border-radius:var(--borderRadius); box-shadow:0 0 1rem rgb(0 0 0 / 25%); }
figure.portrait figcaption { color:var(--medium); font-size:0.825em; font-style:oblique; padding-top:0.5em; }
figure img { display:block; }
html { font-size:62.5%; }
hr { border:0; border-top:solid 1px rgb(0 0 0 / 50%); box-shadow:0 1px 0 0 rgb(255 255 255 / 10%); height:1px; }
img { height:auto; max-width:100%; width:auto; }
p { margin-left:auto; margin-right:auto; max-width:100rem; text-align:left; }
p:not(:first-child) { margin-top:1.2em; }
p:first-child { margin-top:0; }
p:not(:last-child) { margin-bottom:1.2em; }
p:last-child { margin-bottom:0; }
#photos figure.portrait img { margin-left:auto; margin-right:auto; max-height:30rem; width:auto; }
.container { margin-left:auto; margin-right:auto; max-width:120rem; position:relative; z-index:1; }
.flex { display:flex; }
.flex-container { display:flex; }
.textcenter { text-align:center; }
.textleft { text-align:left; }
.textright { text-align:right; }
/*** MEDIA QUERIES ***/
@media all and (max-width:767px){
  body { font-size:11pt; }
  div.event div.event-info > *:not(:first-child), 
  div.event div.event-info > *:not(:first-child) > *:not(:first-child) { margin-top:0.25em; }
  div.event div.event-info div.event-date span,
  div.event div.event-info div.event-location span { display:block; }
  form.contact div.flex { flex-direction:column; }
  form.contact div.flex > *:not(:first-child) { margin-top:1.5em; }
  section.wrapper { padding:3.2rem; }
  ul.venues li span { display:block; }
  .mainbox.flex .flexcontent { flex-basis:100%; }
  .mainbox.flex .flexcontent:nth-child(n+2) { margin-top:3.2rem; }
}
@media all and (min-width:768px){
  body { font-size:12pt; }
  div.event div.event-info > *:not(:first-child) { margin-top:0.15em; }
  div.event div.event-info div.event-date span:not(:first-child):before,
  div.event div.event-info div.event-location span:not(:first-child):before { color:var(--mediumLight); content:'/'; font-weight:300; padding:0 0.5em; }
  form.contact div.flex > *:not(:first-child) { margin-left:1.5em; }
  section.wrapper { padding:4.8rem; }
  ul.venues li span:not(:first-child):before { color:var(--mediumLight); content:'/'; font-weight:300; padding:0 0.5em; }
  .mainbox.flex .flexcontent { flex-basis:50%; }
  .mainbox.flex .flexcontent:nth-child(even) > * { margin-left:1em; }
  .mainbox.flex .flexcontent:nth-child(odd) > * { margin-right:1em; }
  .mainbox.flex .flexcontent:nth-child(n+3) { margin-top:2em; }
}
@media all and (max-width:1023px){
  section#about .flex-container { flex-direction:column; }
  section#about .flex-container > *:not(:first-child) { margin-top:2em; }
  section#home div.flex { flex-direction:column-reverse; }
  section#home div.photo { margin-bottom:2em; }
}
@media all and (min-width:1024px){
  section#about figure { margin-right:2em; max-width:50%; }
}
@media all and (min-width:1024px) and (max-width:1279px){
  section#home div.photo { flex:1; }
}
@media all and (max-width:1279px){
  a.nav { align-items:center; color:#fff; display:flex; font-size:16px; justify-content:center; text-decoration:none; width:6.4rem; }
  body.nav-open #nav { left:0; }
  body:not(.nav-open) #nav { left:-99999px; }
  #header div.buttons { margin-right:1.2rem; }
  #header div.buttons a { align-items:center; display:flex; font-size:16px; height:4rem; justify-content:center; line-height:4rem; padding:0; width:4rem; }
  #header div.logo { flex:1; }
  #nav { background-color:var(--dark); bottom:0; flex-direction:column; position:fixed; top:var(--headerHt); width:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #nav a { font-size:2em; line-height:2; width:100%; }
}
@media all and (min-width:1280px){
  a.nav { display:none; }
  body { font-size:13pt; }
  section.wrapper { padding:6.4rem; }
  #nav { flex:1; text-align:center; }
  #nav a { border-radius:4rem; }
  .btn:after { margin-left:0.25em; }
  .btn.con:after { content:'Contact'; }
  .btn.fbk:after { content:'Follow'; }
}
@media all and (min-width:1280px) and (max-width:1599px){
  section#home:after { background-image:url('/img/guitar-bg.png'); background-position:bottom left; background-repeat:no-repeat; content:''; height:100%; position:absolute; bottom:0; left:-250px; width:100%; }
  section#home div.intro { margin-left:15%; }
}
@media all and (min-width:1600px){
  section#home div.photo { flex:1; }
}