/*!
Theme Name: The Beach Boys
Theme URI: https://thebeachboys.com/
Author: Phill Mamula
Author URI: http://www.phillm.com
Description: 2021 Theme for The Beach Boys
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: thebeachboys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

The Beach Boys is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
    font-family: 'NueueHaas Bold';
    src: url('fonts/NeueHaasDisplayBold.woff2') format('woff2'),
         url('fonts/NeueHaasDisplayBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NueueHaas Grotesk XBold';
    src: url('fonts/NHaasGroteskTXPro-75Bd.woff2') format('woff2'),
         url('fonts/NHaasGroteskTXPro-75Bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NueueHaas Roman';
    src: url('fonts/NeueHaasDisplayRoman.woff2') format('woff2'),
         url('fonts/NeueHaasDisplayRoman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NueueHaas Thin';
    src: url('fonts/NeueHaasDisplayThin.woff2') format('woff2'),
         url('fonts/NeueHaasDisplayThin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* =Global
-------------------------------------------------------------- */
html,body {
  	margin: 0; padding: 0;
  	min-height: 100%;
}
body {
	background: #050505;
	color: #F5F6F7;
    font-family: 'NueueHaas Thin', sans-serif;
	font-size: 19px;
	line-height: 1.7em;
	letter-spacing: 0.05em;
}

/* Type */
h1,h2,h3,h4 {
    font-family: 'NueueHaas Grotesk XBold', sans-serif;
    line-height: 1em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 25px 0 15px;
}
h1 { font-size: 2.25em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
b, strong { font-family: 'NueueHaas Bold', sans-serif; }
img { margin-bottom: -10px; }
p { margin: 0 0 15px; }
a, a:link, a:visited { 
	color: inherit;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out; 
}
a:hover { color: #2f6cbd; }
button { cursor: pointer; }
video:focus,
input:focus,
button:focus {outline:0; cursor: pointer;}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
ul, li { margin: 0; padding: 0; list-style: none; }


/* Colors */
.gray { font-size: 0.85em; line-height: 1.4em; color: #a6abaa; }

/* Structure */
.post, .page, .page-content, 
.entry-content, .entry-summary { margin: 0; }

#section {
	padding: 5vw 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: center;
}

.flex { display: flex; flex-wrap: wrap; align-items: center; }
.flex>* { flex: 1; }
.flex .half { flex: 1 0 50%; width: 50%; }
.flex .third { flex: 1 0 33.3%; width: 33.3%; }

.container {
    width: 90vw;
    max-width: 1300px;
    position: relative;
    margin: 0 auto;
}
.container.small { max-width: 1024px; }



/* =Header
-------------------------------------------------------------- */

header#masthead .container.flex { align-content: flex-end; max-width: 1500px; }
header#masthead .container.flex .site-branding,
header#masthead .container.flex .socials { flex: 1; }
header#masthead .container.flex nav { flex: 4; }

h1.site-title { margin: 10px 0 -25px; }

/* Sticky */
header#masthead {
    background: #000000;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 999;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 100ms;
}
header#masthead.hide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 100ms;
}
.scroll-offset { height: 70px; }
body.home .scroll-offset { display: none; }

/* Navigation */
ul.menu {
    width: auto;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
ul.menu li { flex: 1; }

header#masthead ul.menu {
    padding: 0 3vw;
    max-width: 900px;
    margin: 0 auto;
}
header#masthead ul.menu li {
    text-align: center; 
}
header#masthead ul.menu li a {
    color: #FFFFFF;
    font-size: 0.9em;
    letter-spacing: ;
    padding: 25px 15px 25px;
    text-transform: uppercase;
}
header#masthead ul.menu li a:hover { color: #2f6cbd; }
header#masthead .main-navigation ul ul.sub-menu {
    display: block;
    background: #000000;
    line-height: 1.1em;
    border: none;
    box-shadow: none;
}
header#masthead .main-navigation ul ul.sub-menu li a { padding: 12px 5px; font-size: 0.85em; }
header#masthead .socials { font-size: 0.9em; }



/* =Pages
-------------------------------------------------------------- */

.fullwidth-hero.page-hero.parallax-window {
    width: 100%;
    height: 40vw;
}

/* Entry Content */
.entry-content { padding: 10px 0 5vw; }
.entry-content h1 { margin-bottom: 35px; }


/* About */
body.page-template-page-about .fullwidth-hero.page-hero { position: relative; text-align: center; width: 100%; }
body.page-template-page-about .fullwidth-hero.page-hero img {
    margin: 0 auto;
    width: 100%;
    max-width: 2000px;
    height: auto;
}
.about-bio.flex { align-items: flex-start; }
.about-bio.flex .entry-content {
    flex: 2.5;
    padding-right: 6vw;
}
.band-members { margin-top: 50px; }
.band-members h3 {
    background: url(images/TheBeachBoys-White.png) no-repeat top left / 250px auto;
    text-transform: uppercase;
    padding: 75px 0 0 0;
    margin: 0 0 25px;
    font-family: 'NueueHaas Thin', sans-serif;
    font-size: 1.15em;
}
.member-item {
    padding: 12px 0;
}
.member-item h4 {
    font-size: 1.35em;
    line-height: 1em;
    font-family: 'NueueHaas Thin', sans-serif;
    text-transform: capitalize;
    margin: 0 0 -5px;
}

.member-socials { padding-top: 5px; }
.member-socials .website { font-size: 0.9em; color: #d9d7d6; }
.member-socials .social-icons { text-align: right; }
.member-socials .social-icons>* { margin-left: 10px; }

/* Trivia */
.entry-content .trivia-answer {
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 25px;
    padding: 50px 0;
    display: block;
    clear: both;
	text-align: center;
}
.entry-content .trivia-answer h4 { margin: 0 auto 15px; font-size: 1.5em; }


/* =Home
-------------------------------------------------------------- */

body.home { background: #FFFFFF; }

/* Overlay Navigation */
body.home header#masthead { 
    background: transparent; 
    border: none; 
}
body.home header#masthead .site-branding { display: none; }
body.home header#masthead .socials { display: none; }

body.home header#masthead.sticky { background: #000000; }
body.home header#masthead.sticky .site-branding { display: block; }
body.home header#masthead.sticky .socials { display: flex; }

.homepage-sections { padding: 50px 0; }

/* Hero */
.home-logo-overlay {
    left: 50vw;
    position: absolute;
    top: 30vw;
    transform: translate(-50%,-50%);
    width: 60vw;
    z-index: 1;
}
.homepage-hero { padding-bottom: 179%; }

/* Spotlight Releases */
.homepage-sections.spotlight { background: #000000; margin-bottom: -150px; }
.homepage-sections.spotlight h4 {
    font-size: 2.75em;
    margin: 25px auto 50px;
    display: table;
    font-family: 'NueueHaas Thin', sans-serif;
    line-height: 1em;
}
.homepage-sections.spotlight .spotlight-item { position: relative; }
.homepage-sections.spotlight .play-button {
    position: absolute;
    bottom: calc(50% - 45px);
    right: calc(50% - 45px);
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    padding: 32px;
    font-size: 1.8em;
    line-height: 0;
    text-align: center;
}
.homepage-sections.spotlight .spotlight-item a:hover .play-button {
    background: #2f6cbd;
    color: #FFFFFF;
}

/* Videos */
.homepage-sections.videos {
    color: #000000;
    position: relative;
    z-index: 99;
    background: linear-gradient(225deg,#ecadb3 0%,#f89f58 17%,#f9e04d 38%,#f9e64d 52%,#f9e94c 66%,#9cd173 84%,#87d2d7 100%);
}
.featured-video { padding-top: 50%; position: relative; max-width: 80vw; margin: 0 auto;}
.featured-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* Store */
.stores-listing.flex { align-items: inherit !important; }
.stores-listing.flex>* { padding: 5px 10px; }
.homepage-sections.storefronts { padding: 0 0 50px; color: #000000; }
.homepage-sections.storefronts a { color: inherit; text-decoration: none; }
.homepage-sections.storefronts .store-image {
    background: #EFEFEF;
    width: 100%;
    height: 450px;
    overflow: hidden;
    transition: transform .2s; 
}
.homepage-sections.storefronts .store-image img {
    width: 100%;
    height: 450px;
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out; 
    object-fit: cover;
}
.homepage-sections.storefronts .store-image:hover img {
    transform: scale(1.1);
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out; 
}
.storefront-details h4 { margin: 30px 0 5px; font-size: 1.75em; }
.storefront-details p { margin: 15px 0 25px; width: 90%; font-size: 0.9em; line-height: 1.5em; }
.storefront-details a.cta {
    font-size: 0.9em;
    display: table;
    padding: 10px 45px;
}

.storefront-details { padding: 0 20px; }

.site-newsletter-inner { text-align: center; background: #000000; }
.site-newsletter-inner>* { max-width: 80vw; margin: 15px auto 0; }
body.home footer.site-footer { background: #000000; }


/* =Events
-------------------------------------------------------------- */

.event-container,
.releases-container { padding: 25px 0 10vw; }

.listing-title { 
    text-align: center;
    margin-bottom: 25px; 
    text-transform: uppercase; 
}
.listing-title h1 { font-size: 2em; }

/* Event Listing */
.event-list-item {
    padding: 25px 0;
    line-height: 1.2em;
    border-bottom: 1px solid #444444;
}
.event-list-item a { text-decoration: none; }

.event-details.flex>* { padding-right: 3vw; }
.event-details.flex .event-title { flex: 2; }

.event-list-item .event-date { 
    font-family: 'NueueHaas Roman', sans-serif; 
    text-transform: uppercase;
    font-size: 0.9em;
}
.event-list-item .event-title h3 {
    font-family: 'NueueHaas Thin', sans-serif;
    font-size: 1.1em;
    line-height: 1.15em;
    text-transform: none;
    margin: 0;
}
.event-list-item .event-city { 
    color: #b7b4b0;
    font-size: 0.9em;
}

.event-details.flex .event-purchase { padding-right: 0; flex: 1.5; }
.cta,
.event-purchase .ticket-button {
    font-family: 'NueueHaas Roman', sans-serif;
    font-size: 0.9em;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    padding: 12px 15px;
    display: block;
    text-transform: uppercase;
}
.event-purchase .ticket-button.vip {
    background: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}
.cta:hover,
.event-purchase .ticket-button:hover {
    background: #2f6cbd;
    color: #FFFFFF;
    border-color: #2f6cbd;
}

/* Event Detail */
.event-single-details { 
    padding: 75px 0; 
}
.event-single-details.flex { align-items: flex-start; }
.event-single-details.flex .event-details { flex: 3; padding-right: 5vw; }
.event-single-details.flex .event-image { flex: 2; }
.event-single-details.flex .event-image img { width: 100%; }
.event-single-details .event-title h1 {
    font-family: 'NueueHaas Thin', sans-serif;
    text-transform: none;
    margin: 10px 0 25px;
}
.event-single-details .event-date {
    font-family: 'NueueHaas Roman', sans-serif;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
}
.event-single-details .event-location {
    font-size: 1.8em;
    line-height: 1.1em;
    margin: 0 0 5px;
    text-decoration: none;
}

.event-single-details .event-venue .event-city { font-size: 1em; margin: 0; text-transform: uppercase;}
.event-single-details .event-venue .venue-details { margin-bottom: 50px; }
.event-single-details .event-venue .venue-details a{
    color: #999999;
    font-size: 0.9em;
    margin-right: 10px;
}
.event-single-details .venue-details a:hover { color: #FFFFFF; }

.event-single-details .event-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 450px;
    margin: 25px 0;
}
.event-single-details .event-purchase>* { flex: 1; max-width: 250px; margin-right: 10px; }




/* =Videos
-------------------------------------------------------------- */
.videos-container { padding: 40px 0; }
.spotlight-video { border-bottom: 1px solid #222222; padding-bottom: 50px; margin-bottom: 25px; }

/* Embed Responsively */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videos-grid { padding: 15px 0 40px; }
.videos-grid.flex { align-items: flex-start; }
.videos-grid.flex>* { 
    flex: 1 0 33.3%; 
    max-width: 33.3%; 
    padding: 10px 5px 25px; 
}
.videos-grid h3.videos-title {
    font-family: 'NueueHaas Thin', sans-serif;
    font-size: 1.35em;
    width: 80%;
    line-height: 1.1em;
    margin: 15px 0 2px;
}
.videos-grid a { text-decoration: none; }
.video-type.gray {
    font-family: 'NueueHaas Roman', sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    margin: 10px 0;
}

/* Single Video */
.single-video.flex {
    padding: 50px 0;
    align-items: flex-start;
}
.single-video.flex .main-video { flex: 2; }
.single-video.flex .main-video iframe { width: 100%; height: 32vw;}

.single-video .video-title { padding-left: 3vw; }
.single-video .video-title h1 {
    margin: 5px 0 15px;
    font-family: 'NueueHaas Thin', sans-serif;
}
.single-video .video-title .video-type { margin: 0 0 15px; }

.more-videos { 
    border-top: 1px solid #222222;
}

/* =Releases
-------------------------------------------------------------- */
.releases-grid { padding: 25px 0 0; }

.releases-grid.flex>* { 
    flex: 1 0 calc(25% - 10px); 
    max-width: calc(25% - 10px); 
    margin: 5px; 
}
a.post-thumbnail {
    background: #4169e1;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
}
a.post-thumbnail:hover img { 
    opacity: 0.2;
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;  }

/* Single Release */
.album-single { padding: 50px 0 100px; }

.album-single.flex { align-items: flex-start; }
.album-single.flex .album-details { flex: 2; }
.album-single.flex .album-tracklisting { flex: 3; padding-left: 50px; }

.album-title h1 { 
    font-size: 2.5em;
    text-transform: uppercase;
    margin: 0 0 5px; 

}
.album-title h4 {
    font-family: 'NueueHaas Thin', sans-serif;
    text-transform: capitalize;
    font-size: 1.6em;
    line-height: 1.1em;
    margin: 0;
}
.album-title .album-year { 
    margin-top: 5px;
    display: block;
}
span.album-year.gray {
    display: block;
    margin: 15px 0;
    letter-spacing: 0.06em;
}

.album-details img { width: 100%; }

.disc-tracklisting {
    margin-top: 50px;
}
.disc-tracklisting:last-of-type { border-bottom: none; }
.disc-tracklisting .disc-name {
    background: #000000;
    font-size: 0.8em;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'NueueHaas Roman', sans-serif;
    text-transform: uppercase;
    padding: 15px 25px 5px;
    border: 1px solid #505050;
    border-bottom: none;
    margin-bottom: -1px;
    display: table;
    z-index: 99;
    position: relative;
}
.disc-tracklisting .disc-name i { margin-right: 10px; }
.tracklisting {
    border-top: 1px solid #505050;
    line-height: 1.75em;
    padding: 25px 0 0;
}

/* CTA Buttons */
.cta { 
    font-size: 0.9em;
    text-decoration: none; 
    font-family: 'NueueHaas Roman', sans-serif; 
}
.cta i { margin-right: 10px; font-size: 1.2em;}

.cta.physical { flex: 1 0 100%; }

a.physical.cta {
    background: #2f6cbd;
    border-color: #2f6cbd;
    margin-bottom: 25px;
}
a.physical.cta:hover {
    background: #151515;
    border-color: #151515;
    color: #FFFFFF;
}

.album-download { margin-top: 25px; display: block; }
.album-download a { font-size: 1.5em; margin-right: 20px;}

/* More Releases */
.more-releases,
.more-events { border-top: 1px solid #222222; }
.more-releases h3,
.more-events h3 { text-align: left; font-size: 1.2em; letter-spacing: 0.1em; }
.more-releases .releases-container,
.more-events .event-container { padding: 25px 0; }

.view-more { padding: 25px 0 15px;}
.view-more a.cta {
    font-family: 'NueueHaas Roman', sans-serif;
    display: table;
    margin: 0 auto;
    padding: 3px 0;
    letter-spacing: 0.1em;
    border: none;
    border-bottom: 2px solid;
}
.view-more a.cta:hover {
    background: none;
    color: inherit;
}

/* =Default Page
-------------------------------------------------------------- */
.page-title {
    text-align: center;
    padding: 50px 0 10px;
}
.page-title h1 { font-size: 3em; }

.entry-content { overflow: hidden; line-height: 1.5em; }
.entry-content h2,
.entry-content h3,
.entry-content h4 { font-size: 1.5em; line-height: 1em; margin: 25px 0 5px; }
.entry-content iframe { margin: 25px auto !important; display: block; }
.entry-content hr { background: #444444; }
.entry-content img { margin: 5px auto; }

.entry-content .wp-caption-text {
    margin: 2px 0;
    text-transform: uppercase;
    font-size: 0.7em;
    color: #999999;
}

span.edit-link { display: block; clear: both;}

/* =Newsletter
-------------------------------------------------------------- */
body.page-template-page-newsletter header#masthead,
body.page-template-page-newsletter .scroll-offset { display: none; }

#section.newsletter-main {
    padding: 0;
    background: #FFFFFF;
    color: #000000;
}
#section.newsletter-main .page-title { margin: 15px auto; }
#section.newsletter-main .page-title h1 { font-size: 2.25em; }


#section.newsletter-main .container.small { max-width: 850px; }

.newsletter-header .site-title { max-width: 300px; margin: 5px 0 -35px; }
.newsletter-header .volume-title { text-align: right; }
.newsletter-header .volume-title h4 {
    margin: 10px 0 0;
    font-family: 'NueueHaas Thin', sans-serif;
    text-transform: none;
}
.newsletter-header .volume-title .volume { opacity: 0.6; display: block; }


/* =Footer
-------------------------------------------------------------- */
footer.site-footer {
	padding: 0;
	border-top: 1px solid #222222;
}
footer.site-footer .container { padding: 25px 0 35px; text-align: center; }

/* Copyright */
footer.site-footer .footer-copyright .socials { font-size: 1.1em; max-width: 320px; margin: 5px auto 10px; }
footer.site-footer .footer-copyright .socials a { margin: 0 5px; }
footer.site-footer .footer-copyright .site-info { font-size: 0.75em; line-height: 1.5em; color: #8d8d8d;}

footer.site-footer .footer-copyright .site-info ul {
    width: auto;
    display: block;
    margin: 20px 0 5px;
}
footer.site-footer .footer-copyright .site-info ul li {
    display: inline-block;
    margin-right: 1vw;
}
footer.site-footer .copyright.flex { padding: 12px 0; text-align: left; margin: 0 auto; width: 100%; max-width: 650px; }
footer.site-footer .copyright.flex>* { flex: inherit; }
footer.site-footer .please-co { margin-right: 25px; }
footer.site-footer .please-co img { max-width: 60px; }


/* =Mobile (Media Queries)
-------------------------------------------------------------- */
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
    
@media only screen and (max-width: 1120px) {
    header#masthead ul.menu li a { padding: 20px 0 15px;}
    .album-single.flex .album-tracklisting { padding-left: 30px; }
    .album-single.flex .album-details { flex: 3; }
}
@media only screen and (max-width: 1024px) {
    header#masthead .container.flex nav { flex: 3; }
    header#masthead ul.menu { padding: 0 0 0 5vw; }

    header#masthead .container.flex .socials { display: none; }

    /* Home */
    .homepage-sections.spotlight h4 { text-align: center; font-size: 2em; margin: 0 auto 25px;}
    .releases-listing.flex>* { flex: 1 0 50%; width: 50%; max-width: 50%; }

    /* About */
    .band-members h3 { background: url(images/TheBeachBoys-White.png) no-repeat top left / contain; padding: 75px 0 0 0; font-size: 1.1em;}

    /* Releases */
    .releases-grid.flex>* { flex: 1 0 calc(33.3% - 10px); max-width: calc(33.3% - 10px); margin: 5px; }
    a.cta.spotify { flex: 1 0 100%;}
    a.cta.spotify div { flex: 6; }

    /* Events */
    .event-details.flex .event-date { flex: 1 0 100%; margin-bottom: 15px; }
    .event-details.flex .event-title { flex: 1; }
    .event-purchase .ticket-button { padding: 13px 15px; font-size: 0.8em; }
    .event-single-details .event-title h1 { margin: 5px 0 15px; font-size: 2em; }
    .event-single-details .event-location { font-size: 1.5em; }

    /* Footer */
    footer.site-footer .copyright.flex { flex-direction: column-reverse; padding: 0; text-align: center; }
    footer.site-footer .copyright.flex>* { padding: 10px 0; }
    footer.site-footer .please-co { margin-right: 0; }

}
@media only screen and (max-width: 820px) {
    body { font-size: 19px; line-height: 1.6em; }
    h1 { font-size: 2.25em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.25em; }

    /* Header */
    header#masthead { min-height: 65px; }
    header#masthead .container.flex { width: 100%; }
    body.home header#masthead.sticky .socials,
    header#masthead .main-navigation ul { display: none; }
    header#masthead ul.menu { padding: 0; }
    header#masthead .main-navigation.toggled ul { display: block; margin-top: 10px; }

    body.home header#masthead { background: #000000; }
    body.home header#masthead .site-branding { display: block; }

    header#masthead .container.flex .site-branding { flex: 3; padding-left: 5vw; position: relative; z-index: 12; }
    header#masthead .container.flex .site-branding svg { max-width: 250px; }
    h1.site-title { margin: 5px 0 -30px; }
    button.menu-toggle {
        display: block;
        background: transparent;
        border: none;
        width: 35px;
        height: 35px;
        border-radius: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        text-indent: -999em;
        margin-top: 0;
        margin-right: 8vw;
        float: right;
    }
    button.menu-toggle span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #FFFFFF;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    button.menu-toggle span:nth-child(1) { top: 5px;}
    button.menu-toggle span:nth-child(2),
    button.menu-toggle span:nth-child(3) { top: 15px;}
    button.menu-toggle span:nth-child(4) { top: 25px;}     
    .main-navigation.toggled button.menu-toggle span { background: #FFFFFF; }   
    .main-navigation.toggled button.menu-toggle span:nth-child(1) {
        top: 20px;
        width: 0%;
        left: 50%;
    }
    .main-navigation.toggled button.menu-toggle  span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .main-navigation.toggled button.menu-toggle span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .main-navigation.toggled button.menu-toggle span:nth-child(4) {
        top: 20px;
        width: 0%;
        left: 50%;
    }

    /* Overlay */
    .menu-main-navigation-container {
        position: absolute;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.9);
        top: 65px;
        z-index: 9;
    }
    header#masthead ul.menu li { border-top: 1px solid #222222; }
    header#masthead ul.menu li a { font-size: 1em; padding: 15px 0; }
    header#masthead ul.menu li ul.sub-menu { display: block; width: 100%; }
    header#masthead .main-navigation ul ul.sub-menu li a { width: 100%; font-size: 1em; padding: 20px 0; }
    header#masthead ul.menu li ul.sub-menu { margin: 0; background: rgba(0,0,0,0.9); border-bottom: 1px solid #222222; }

    /* Home */
    .homepage-hero { margin-top: 50px; }
    .home-logo-overlay { width: 80vw; top: 50vh; }
    .homepage-sections.spotlight h4 { text-align: center; font-size: 2.5em; margin: 0 auto 25px; width: 80%;}
    .stores-listing.flex,
    .releases-listing.flex { margin: 0 auto; flex-direction: column; }
    .stores-listing.flex>*,
    .releases-listing.flex>* { flex: 1 0 100%; width: 100%; max-width: 420px; margin-bottom: 15px; padding: 0; }
    .stores-listing.flex>* { margin-bottom: 50px; max-width: 100%; }
    .homepage-sections.storefronts .store-image,
    .homepage-sections.storefronts .store-image img { height: 350px; }
    .storefront-details { padding: 5px 0; }
    .storefront-details h4 { margin: 15px 0 0; }
    .storefront-details p { width: 100%; padding: 0; }
    .storefront-details a.list-cta { float: left; }

    /* About */
    body.page-template-page-about .fullwidth-hero.page-hero.parallax-window { height: 450px !important; }
    .entry-content { padding: 25px 0 50px; }
    .entry-content h1 { margin: 50px 0 20px; font-size: 1.75em; }
    .about-bio.flex { flex-direction: column; }
    .about-bio.flex>* { flex: 1 0 100%; width: 100%; }
    .about-bio.flex .entry-content { padding: 0 0 50px; }
    .band-members { margin: 0 auto 50px; }

    /* Videos */
    .videos-grid.flex>* { flex: 1 0 50%;  max-width: 50%; }
    .videos-grid h3.videos-title { width: 100%; font-size: 1.4em; }
    .single-video.flex { flex-direction: column-reverse; }
    .single-video.flex>*,
    .single-video.flex .main-video { flex: 1 0 100%; width: 100%;}
    .single-video .video-title { padding-left: 0; margin-bottom: 15px; }
    .single-video.flex .main-video iframe { height: 50vw; }

    /* Releases */
    .album-title h1 { font-size: 2.25em; }
    .album-title h4 { font-size: 1.3em; }
    .releases-grid.flex>* { flex: 1 0 calc(50% - 10px); max-width: calc(50% - 10px); }

    .album-single.flex { flex-direction: column; }
    .album-single.flex>* { flex: 1 0 100%; width: 100%; }
    .album-single.flex .album-details { max-width: 450px; margin-bottom: 25px; }
    .album-single.flex .album-tracklisting { padding-left: 0; }

    /* Events */
    .listing-title h1 { margin: 10px 0 0; font-size: 1.7em; }
    .event-details.flex .event-date { margin-bottom: 15px; letter-spacing: 0.1em; }
    .event-details.flex .event-title { flex: 1 0 100%; margin-bottom: 10px; }
    .event-details.flex .event-title h3 { font-size: 1.5em; }

    .event-single-details { padding: 25px 0 50px; }
    .event-single-details.flex { flex-direction: column-reverse; }
    .event-single-details .event-title h1 {  margin: 0; font-size: 2.1em; font-family: 'NueueHaas Roman';}
    .event-single-details .event-location { font-size: 1.4em; margin-top: 25px; }
    .event-single-details.flex>* { flex: 1 0 100%; }
    .event-single-details.flex .event-details { padding: 25px 0 0; }
    .event-single-details .event-purchase { flex-direction: column; max-width: 100%; margin: 25px 0; }
    .event-single-details .event-purchase>* { flex: 1 0 100%; width: 100%; max-width: 100%; font-size: 1em; }

}
@media only screen and (max-width: 768px) {
    .container { width: 90vw; }
    .fullwidth-hero.page-hero.parallax-window { height: 250px; }

    .page-title { padding: 50px 0 20px; }
    .page-title h1 { font-size: 2em; line-height: 1.1em; }

    /* Home */
    .homepage-sections.spotlight h4 { text-align: center; font-size: 2em; width: 100%;}
    .site-newsletter-inner>*  { max-width: 100%; height: 650px !important; }

    /* About */
    body.page-template-page-about .fullwidth-hero.page-hero.parallax-window { height: 350px !important; }

    /* Videos */
    .videos-grid.flex>* { flex: 1 0 100%;  max-width: 100%; padding: 0 0 20px; }
	
    /* Newsletter */
    .newsletter-header .site-title { max-width: 225px; margin: 5px 0 -25px; }
    .newsletter-header .volume-title h4 { font-size: 1em; }
    .newsletter-header .volume-title .volume { font-size: 0.8em; }

    /* Events */
    .event-details.flex { align-items: flex-start; }
    .event-details.flex .event-date { margin-bottom: 5px; }
    .event-list-item .event-title h3 { margin: 5px 0 10px; font-size: 1.5em; line-height: 1.1em; }
    .event-details.flex .event-location { flex: 1 0 100%; margin-bottom: 10px; font-size: 1.15em; line-height: 1em; margin: 0 0 3px; padding-right: 0;}
    .event-details.flex .event-purchase { flex: 1 0 100%; display: flex; margin-top: 15px;}
    .event-details.flex .event-purchase>* { flex: 1; max-width: 180px;}

    /* Footer */
    footer.site-footer { padding: 15px 0; }
}
@media only screen and (max-width: 420px) {
	/* Pages */
	.alignleft, .alignright { float: none; }
	.alignleft img, .alignright img { width: 100%; height: auto; }
    /* Newsletter */
    .newsletter-header { padding: 15px 0; }
    .newsletter-header .site-branding { flex: 1 0 100%; width: 100%; text-align: center; }
    .newsletter-header .site-title { margin: 0 auto -15px; }
    .newsletter-header .volume-title { text-align: center; }
    .newsletter-header .volume-title h4 { font-size: 1.2em; }
    .newsletter-header .volume-title .volume { font-size: 1em; }
	
    /* About */
    .home-logo-overlay { top: 80vw; }
    body.page-template-page-about .fullwidth-hero.page-hero.parallax-window { height: 250px !important; }
    .homepage-sections.spotlight h4 { font-size: 1.4em; }

}