html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ }

/* Extends the .sr-only class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
.sr-only.focusable:active, .sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }

.hidden { display: none; }

body.shotunes { font-family: Roboto, sans-serif; font-weight: 400; margin: 0; padding: 0; display: grid; grid-template-columns: auto; grid-template-rows: auto; justify-content: stretch; grid-template-areas: "header" "main" "footer"; }

body.shotunes.home { grid-template-columns: auto; grid-template-rows: auto; justify-content: stretch; grid-template-areas: "header" "main" "footer"; }

h2 { font-family: Oswald, sans-serif; font-weight: 700; padding: 0.25em 20px 0.25em 20px; }

p { padding: 0 20px 20px 20px; }

.site-header { background-color: #DAA520; padding: 1em 2em 0 2em; margin-top: -1px; grid-area: header; border-bottom: 3em solid #3E78B2; border-top: 1.25em solid #3E78B2; max-width: 100vw; }

.header-alt-text { display: none; }

.header-image { max-height: 300px; width: auto; max-width: 100%; margin-bottom: 1em; shape-rendering: crispedges; }

.header-image.desktop-header { display: block; margin-top: 15px; max-width: 85%; }

.header-image.mobile-header { display: none; }

.mobile-only { display: none; }

.main { grid-area: main; border-left: 1.25em solid #3E78B2; border-right: 1.25em solid #3E78B2; }

article { padding: 0.25em 0 1em 0; }

article:nth-child(even) { background-color: #3E78B2; color: white; }

article:nth-child(odd) { background-color: white; color: #121414; }

#about-sho-tunes-llc { font-size: 1.25em; font-style: italic; padding: 0 calc(20px + 1.5rem); }

.media-object { display: grid; grid-template-columns: minmax(300px, max-content) auto; grid-template-rows: 1.75em auto; grid-template-areas: "image text" "image footer"; padding: 3em 1.5em 2em 1.5em; }

.media-object-image { grid-area: image; align-self: start; border: none; max-width: 100%; height: auto; padding-left: 20px; padding-right: 1em; }

.media-object-image img { max-width: 100%; height: auto; }

.media-object-text { grid-area: text; display: flex; flex-direction: column; line-height: 1em; margin-top: 0; padding-top: 0; }

.media-object-footer { grid-area: footer; }

.media-object-link, .media-object-link:visited { color: #3E78B2; transition: all 0.8s ease-out; }

.media-object-link:hover, .media-object-link:focus, .media-object-link:active { background-color: #3E78B2; color: white; }

.offsite-link, .offsite-link:visited { background-color: #3E78B2; color: white; border: 2px solid transparent; text-align: center; text-decoration: underline; transition: all 0.8s ease-out; }

.offsite-link:hover, .offsite-link:focus, .offsite-link:active { border: 2px solid white; background-color: white; color: #3E78B2; }

.action, .action:visited { background-color: goldenrod; color: #121414; font-family: Oswald, sans-serif; font-size: 1em; font-weight: 700; margin: 0 1em 1em 1em; padding: 0.25em 0.5em; border: 2px solid transparent; cursor: pointer; max-width: 160px; text-align: center; text-decoration: none; transition: all 0.8s ease-out; }

.action:hover, .action:focus, .action:active { border: 2px solid goldenrod; background-color: #121414; color: goldenrod; }

footer { background-color: white; border-top: #004BA8; grid-area: footer; font-family: "Roboto Light", sans-serif; font-weight: 300; }

footer .site-info { position: relative; }

footer p { text-align: center; }

footer .legal-nav { margin: 1em auto; text-align: center; }

footer .legal-nav a, footer .legal-nav a:visited { color: #121414; text-decoration: underline; text-decoration-color: goldenrod; }

footer .legal-nav a:hover, footer .legal-nav a:active { color: #004BA8; text-decoration: none; }

.cookie-banner { position: fixed; bottom: 1em; left: 5%; right: 5%; width: 90%; padding: 0.4em 1em; min-height: 5em; display: flex; align-items: center; justify-content: space-between; color: white; background-color: #121414ee; border-radius: 0.33em; border: 2px solid white; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); }

.cookie-banner.hidden { display: none; }

.cookie-banner p { margin-top: auto; margin-bottom: auto; padding: 0 2em; }

.cookie-banner .cookie-agree { font-size: 1.1em; margin-bottom: auto; margin-top: auto; margin-left: 0.5em; margin-right: 2em; padding: 0.25em 0.5em; background-color: goldenrod; color: #121414; text-align: center; border: 0.125em solid white; }

.cookie-banner .cookie-agree:hover { color: goldenrod; background-color: #121414; border-color: goldenrod; }

.cookie-banner .close { height: 1.25em; background-color: #121414; border: none; color: white; border-radius: 0.125em; cursor: pointer; position: absolute; top: 1em; right: 1em; }

@media only screen and (max-width: 912px) { body.shotunes.home, body.shotunes { grid-template-columns: auto; grid-template-areas: "menu" "header" "feature" "main" "events" "footer"; }
  .header-image.mobile-header { display: block; max-height: 33vh; margin: 0 auto; }
  .header-image.desktop-header { display: none; }
  .main { border: none; max-width: 100vw; }
  .mobile-only { display: inline-block; }
  article:nth-child(even) { background-color: #3E78B2; color: white; }
  article:nth-child(odd) { background-color: white; color: #121414; }
  h2 { font-size: 1.25em; }
  p { font-size: 0.9em; }
  .action, action:visited { font-size: 0.85em; font-family: "Roboto Light", sans-serif; }
  #about-sho-tunes-llc { font-size: 1em; padding-right: 40px; }
  .media-object { grid-template-columns: auto; grid-template-rows: 1fr; grid-template-areas: "image" "text" "footer"; }
  .media-object-image img { max-width: 80vw; height: auto; }
  .media-object-text { flex-direction: row; font-size: 1.2em; font-weight: 700; margin-top: 1em; margin-bottom: 0.8em; }
  .media-object-footer { margin-top: 0; }
  .desktop-only { display: none; }
  .cookie-banner { flex-direction: column; padding: 1.5em 2em; left: 0; right: 0; width: 100%; }
  .cookie-banner p { margin-top: auto; margin-bottom: auto; padding: 0; }
  .cookie-banner .cookie-agree { margin-top: 1em; }
  .blog-wrapper { padding: 0.5em 1em; }
  .blog-wrapper img { max-width: 95%; } }

.contact-form { padding: 2em 4em; width: 100%; }

.form-container { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 1fr 1fr 2fr 1fr; justify-content: stretch; grid-template-areas: "name name" "email email" "booking booking" "submit submit"; grid-row-gap: 1em; }

.form-container input { line-height: 2; margin: 0.25em 0 0.1em 0; }

.form-container textarea { margin: 0.25em 0 0.1em 0; }

.field-name { grid-area: name; display: flex; flex-direction: column; }

.field-name fieldset { border: none; padding-right: 0; padding-left: 0; }

.field-name .field-row { display: flex; justify-content: space-between; }

.field-name .field-row .field-row-block { flex-grow: 1; }

.field-name .field-row .field-row-block.first.one-half { margin-right: 2em; }

.field-name .field-row .field-row-block input { width: 100%; }

.field-email { grid-area: email; }

.field-email input { width: 100%; }

.field-phone { grid-area: phone; display: none; }

.field-phone input { width: 75%; }

.field-textarea { grid-area: booking; width: 100%; }

.field-textarea textarea { width: 100%; height: 100%; }

.submit-container { grid-area: submit; align-self: end; justify-self: end; }

.submit-container button { padding: 0.5em 1em; background-color: goldenrod; border-top-color: white; border-left-color: white; border-bottom-color: #ccc; border-right-color: #ccc; }

field-label { font-weight: 700; }

.required-label { color: goldenrod; }

.field-medium { display: block; }

.field-sublabel, .field-description { font-size: 0.8em; }

.after { display: block; }

@media only screen and (max-width: 768px) { .contact-form { padding: 2em 2em; }
  .contact-form .submit-container button { padding: 0.25em 1em; } }

@media (prefers-color-scheme: dark) { img, iframe { filter: brightness(0.8) contrast(1.2); }
  article:nth-child(even) { background-color: #121414; color: #ebeded; }
  article:nth-child(odd) { background-color: #ebeded; color: #121414; }
  .merch-box { background-color: #ebeded; }
  footer { background-color: #ebeded; }
  .feature { background-color: #121414; color: #ebeded; }
  #contact-form input, #contact-form textarea { background-color: #ebeded; } }

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