/*!
Theme Name: KD Lang
Theme URI: http://underscores.me/
Author: Phill Mamula
Author URI: https://www.phillm.com
Description: 2023 Theme for k.d. lang
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: kdlang
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.

KD Lang 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: 'Sarge Regular';
    src: url('fonts/sarge.woff2') format('woff2'),
         url('fonts/sarge.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Hideaki';
    src: url('fonts/hideaki-regular.woff2') format('woff2'),
         url('fonts/hideaki-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Metro Sans Bold';
    src: url('fonts/metro-sans-bold.woff2') format('woff2'),
         url('fonts/metro-sans-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Metro Sans';
    src: url('fonts/metro-sans-regular.woff2') format('woff2'),
         url('fonts/metro-sans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Overpass+Mono:wght@300;400&display=swap');


/* =Global
-------------------------------------------------------------- */
html,body {
  	margin: 0; padding: 0;
  	min-height: 100%;
}
:root {
 — app-height: 100%;
}
body {
    background: #faf1e4;
    color: #151515;
	font-family: 'Inter', sans-serif;
    font-weight: 400;
	font-size: 17px;
	line-height: 1.65em;
}
#page { 
    overflow: hidden;
    position: relative;
}

/* Type */
h1,h2,h3,h4 {
    font-family: 'Hideaki', serif;
    font-weight: normal;
    line-height: 1em;
    margin: 0 0 15px;
}
h1 { font-size: 4em;}
h2 { font-size: 3em; }
h3 { font-size: 2.5em; }
h4 { font-size: 2em; }

strong { font-weight: 600; }

.monospace {
    text-transform: uppercase;
    font-family: 'Overpass Mono', monospace;
}

img { width: 100%; height: auto; margin: 0 0 -8px; }
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: #a8182a; }

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; }


/* Structure */
#page {
    overflow: hidden;
    position: relative;
}
.post, .page, .page-content, 
.entry-content, .entry-summary { margin: 0; }

.flex { display: flex; flex-wrap: wrap; }
.flex>* { flex: 1; }
.flex .half { flex: 1 0 50%; width: 50%; }
.flex .two-third { flex: 2; }
.flex .third { flex: 1 0 33.3%; width: 33.3%; max-width: 33.3%; }
.flex .quarter { flex: 1 0 25%; width: 25%; max-width: 25%; }

.container {
    width: 90vw;
    max-width: 1120px;
    position: relative;
    margin: 0 auto;
}
.container.small { max-width: 900px; }
.container.fullwidth { width: 95vw; max-width: 1600px; }
.container.center { text-align: center; }

/* Owl Carousel - Navigation */
.owl-nav { width: 100%; height: 100%; position: absolute; top: 0;left: 0; }
.owl-nav button { 
    opacity: 0.5;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 0 0 3px 0;
    font-size: 1.25em;
    line-height: 0;
    margin-right: 8px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;  
}
.owl-nav button:hover {
    opacity: 1;
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;  
}
.owl-nav>* {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 999;
}
.owl-nav .owl-next { right: 50px; }
.owl-nav .owl-prev { left: 50px; }
.owl-nav.disabled { display: none !important; }

/* Embed Resposively */
.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%; }

/* Video Hero */
.iframe-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}
.iframe-wrapper video {
  width: 100vw;
  height: 56.25vh; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 120vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

/* CTA Buttons */
.cta-buttons.flex {
	width: auto;
	justify-content: center;
	align-items: center;
	margin: 50px auto 0;
}
.cta-buttons.flex>* { flex: inherit; margin: 0 5px; }

a.large-cta,
.large-cta {
	font-size: 0.8em;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    padding: 10px 35px;
    text-transform: uppercase;
    font-weight: 600;
}
a.large-cta:hover {
    background: #000000;
    border-color: #000000;
    color: #FFFFFF;
}


/* =Header
-------------------------------------------------------------- */
header#masthead {
	padding: 15px 0;
	border-bottom:  1px solid rgba(0,0,0,0.1);
}
header#masthead .container.flex { 
	justify-content: space-between;
	align-items: center;
}
header#masthead .container.flex>* { flex: inherit; }

/* Logo */
header#masthead h1.site-title {
    font-size: 4em;
    font-family: 'Sarge Regular', sans-serif;
    text-transform: lowercase;
    font-weight: normal;
    margin: -10px 0 5px;
}
header#masthead h1.site-title a {
    text-decoration: none;
}
header#masthead .site-branding img {
    width: auto;
    max-height: 35px;
    margin: 2px 0 -10px;
}
body.home header#masthead .site-branding img,
body.post-type-archive-videos header#masthead .site-branding img, 
body.single-videos header#masthead .site-branding img {
    filter: invert(1);
}

/* Navigation */
header#masthead .main-navigation { width: auto; }
header#masthead ul {
	display: flex;
	align-items: center;
	justify-content: center;
}
header#masthead ul li {
    margin-left: 3vw;
}
header#masthead ul li a {
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* =Homepage
-------------------------------------------------------------- */
.mobile-only { display: none; }

body.home header#masthead,
body.home footer.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
}
body.home header#masthead {
    bottom: auto;
    top: 0;
}

/* Overlay text */
.overlay-hero {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    padding: 10vh 0;
    position: relative;
    z-index: 9;
}
.overlay-hero .container { margin: auto; padding-right: 40vw; }
.overlay-hero:before {
    opacity: 0.8;
    content: '';
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.91) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.91) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.91) 100%);
    position: absolute;
    bottom: 0; left: 0;
    z-index: -2;
}
.overlay-hero .cta-buttons {
    margin: 25px 0;
    display: inline-flex;
}
.overlay-hero .cta-buttons a.large-cta {
    border: 1px solid rgba(255,255,255,0.4);
}
.overlay-hero .cta-buttons a.large-cta:hover {
    background: #a8182a;
    border: 1px solid #a8182a;
}

/* Carousel */
.photo-hero { 
    height: 100vh; 
    min-height: -webkit-fill-available;
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.fullscreen-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.8;
    z-index: -2;
}
.fullscreen-gallery .owl-item { 
    width: 100%; 
    height: 100vh;
    min-height: -webkit-fill-available;
}
.fullscreen-gallery .owl-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* =Releases
-------------------------------------------------------------- */
article.releases.hide { display: none !important; }
article.releases.show { display: block !important; }

/* Releases Grid */
.releases-listing.flex {
    width: calc(100% + 10px);
    margin-left: -5px;
    padding: 25px 0 25px;
}
article.releases {
    padding: 10px;
}
article.releases .post-thumbnail {
    margin: 0 auto;
}
article.releases h4 a {
    text-decoration: none;
}
span.album-year,
article.releases span.year {
    opacity: 0.5;
    display: block;
    font-size: 0.85em;
}

/* Single Releases */
body.single-releases .blur-bg { opacity: 0.75; }
.featured-releases { margin: 20px auto 50px; }
.featured-releases .releases-title { padding-left: 5vw; }
.featured-releases .releases-title h2 {
    font-size: 3.5em;
    color: #a8182a;
    margin-bottom: 10px;
}
.featured-releases .releases-title .entry-content {
    width: 100%;
    max-width: 640px;
    margin-top: 15px;
}
.featured-releases .releases-title .entry-content iframe {
    margin: 15px 0 0;
}
.featured-releases .stream {
    padding: 0;
    margin: 5px auto;
    width: calc(100% - 1px);
}
.featured-releases .stream a {
    font-size: 1.2em;
    padding: 10px 20px;
    text-align: center;
    border: 1px solid;
    margin-right: -1px;
}
.featured-releases .stream a:hover {
    background: #000000;
    border-color: #000000;
    color: #FFFFFF;
}
.featured-releases .stream a.apple:hover {
    background: #555555;
    border-color: #555555;
    color: #FFFFFF;
}
.featured-releases .stream a.spotify:hover {
    background: #1DB954;
    border-color: #1DB954;
    color: #FFFFFF;
}
.featured-releases .stream a.amazon:hover {
    background: #FFFFFF;
    border-color: #111111;
    color: #FF9900;
}

body.single-releases .releases-listing .album-title { display: none; }

/* =Videos
-------------------------------------------------------------- */
body.post-type-archive-videos,
body.single-videos,
body.home {
    background: #000000;
    color: #FFFFFF;
}
body.post-type-archive-videos header#masthead,
body.single-videos header#masthead,
body.home header#masthead {
    border-color: rgba(255,255,255,0.15);
}
body.post-type-archive-videos header#masthead h1.site-title,
body.single-videos header#masthead h1.site-title,
body.home header#masthead h1.site-title {
    color: #f0d39b;
}
body.post-type-archive-videos footer.site-footer, 
body.single-videos footer.site-footer,
body.home footer.site-footer {
    color: #908C85;
}
body.post-type-archive-videos footer.site-footer .copyright a, 
body.single-videos footer.site-footer .copyright a, 
body.home footer.site-footer .copyright a { color: inherit; }
body.post-type-archive-videos footer.site-footer a, 
body.single-videos footer.site-footer a, 
body.home footer.site-footer a { color: #f5ebd7;}
body.post-type-archive-videos footer.site-footer a:hover, 
body.single-videos footer.site-footer a:hover, 
body.home footer.site-footer a:hover { color: #FFFFFF; }

/* Blur Background */
.blur-bg {
    filter: blur(25px);
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: -2;
}
.blur-bg img {
    opacity: 0.25;
    width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center;
}

.featured-video {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
}
body.single .featured-video { padding-top: 25px; }

/* Video Listing */
.video-listing {
	margin: 0 auto 25px;
}
.video-listing .container .flex {
    width: calc(100% + 20px);
    margin-left: -10px;
	align-items: initial;
}
.video-listing .container .flex>* { flex: inherit; }
.video-listing article {
	padding: 10px; 
    text-align: center;
    margin-bottom: 20px;
}
.video-listing article .post-thumbnail {
    width: 100%;
    height: 220px;
    border: 2px solid rgba(0,0,0,0.25);
    overflow: hidden;
}
.video-listing article .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.video-listing article h4.entry-title {
    font-size: 0.9em;
    line-height: 1.1em;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 400;
    margin: 10px 0 0;
}
.video-listing article h4.entry-title a {
    color: #f9f3e3;
    text-decoration: none;
}
.video-listing article h4.entry-title a:hover { color: #FFFFFF; }

.video-listing.media-carousel article { padding: 0; }
.video-listing.media-carousel article .post-thumbnail { height: 225px; }

/* Single Video */
body.single-videos .container .flex { align-items: inherit; }
body.single-videos .container .flex .spotlight-video { flex: 2; }

.breadcrumbs {
	font-size: 0.8em;
	line-height: 1em;
	padding: 0 0 25px;
}
.breadcrumbs span { opacity: 0.5;}
.breadcrumbs a { 
    opacity: 1;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}
body.single-videos .breadcrumbs { color: #FFFFFF; }


body.single-videos article.quarter {
    flex: 1 0 100%;
    width: 100%;
    padding: 0;
    max-width: 100%;
    margin: 0;
}

.video-details {
    padding: 0 0 0 50px;
}
.video-title { position: relative; margin-bottom: 40px; }
.video-title h1 {
    font-size: 3.25em;
    line-height: 1em;
    width: 80%;
}

.video-title span {
    color: #f0d39b;
    letter-spacing: 0.06em;
    margin: 0 0 15px;
    display: block;
}
.video-title span.type {
    font-family: 'Sarge Regular', sans-serif;
    text-transform: lowercase;
    display: block;
    font-size: 3.5em;
    margin-top: -10px;
}
.video-details .entry-content {
    color: #f9f3e3;
    font-weight: 300;
}



/* =Fullwidth
-------------------------------------------------------------- */
article.fullscreen .container.flex {
    padding: 50px 0;
    align-items: initial;
}

.float-image .post-thumbnail {
    width: 100%;
    margin-top: 25px;
    border: 2px solid #000000;
    transform:rotate(2deg);
}
.float-image .post-thumbnail img{
    border: 10px solid #FFFFFF;
    margin: 0 0 -6px;
}

/* =Pages
-------------------------------------------------------------- */
header.entry-header h1.entry-title {
    margin: 50px 0;
}

/* Gallery */
.gallery-caption { display: none; }
.nivo-lightbox-theme-simple .nivo-lightbox-title,
.entry-content.photo-gallery .monospace { 
    text-transform: uppercase;
    font-family: 'Overpass Mono', monospace;
    font-size: 0.8em;
    line-height: 1.2em;
    opacity: 0.75;
}

.gallery { margin: 40px auto; grid-gap: 1em; }
figure { margin: 0; }
.nivo-lightbox-theme-default .nivo-lightbox-close,
.nivo-lightbox-theme-simple .nivo-lightbox-close {
    background-size: cover;
    background-position: center center;
    width: 24px;
    height: 24px;
    top: 25px;
    right: 25px;
}
.nivo-lightbox-theme-simple .nivo-lightbox-close:hover,
.nivo-lightbox-theme-simple .nivo-lightbox-prev,
.nivo-lightbox-theme-simple .nivo-lightbox-next { filter: invert(1); opacity: 0.5; }

.gallery-item img {
    border: 5px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;  
}
.gallery-item img:hover {
    border: 5px solid #a8182a;
}

/* Entry Content */
.entry-content .embed-container {
    margin: 25px auto;
}
.entry-content h2, 
.entry-content h3, 
.entry-content h4 {
    color: #5d3f2f;
    font-size: 1.15em;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin: 40px 0 5px;
    clear: both;
}

.entry-content ul { margin: 10px auto 25px; padding-left: 35px; }
.entry-content li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1.5em;
    padding-left: 1.2em;
    margin-left: 15px;
    line-height: 1.3em;
    margin-bottom: 10px;
}

.entry-content .aligncenter { margin: 20px auto; }
.entry-content .alignleft {
    float: left;
    margin-left: -5vw;
    margin-right: 25px;
    margin-bottom: 5px;
    margin-top: 10px;
}
.entry-content .alignright {
    float: right;
    margin-right: -5vw;
    margin-left: 25px;
    margin-bottom: 5px;
    margin-top: 10px;
}
.wp-caption .wp-caption-text {
    margin: 20px auto 0;
    text-transform: uppercase;
    font-family: 'Overpass Mono', monospace;
    font-size: 0.75em;
    line-height: 1em;
    display: block;
    color: #5c554b;
}

.entry-content img.alignleft,
.entry-content img.alignright {
    width: auto;
}

/* Columns */
.columns.flex { align-items: inherit; margin-top: 25px; }
.column {
    padding-right: 50px;
}
.column strong {
    line-height: 1.4em;
}

/* Accordion */
.accordion-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
.accordion-title { 
    position: relative;
    padding: 10px 20px 10px 0;
}
.accordion-title.flex { justify-content: space-between; }
.accordion-title>* { flex: inherit; }
.accordion-title h4 {
    color: #04102f;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    display: inline-flex;
    margin-right: 15px;
}
.accordion-item i.flip { 
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out; 
}
.accordion-item.is-active i.flip { transform: rotate(180deg); }
.accordion-panel {
    display: none;
    margin: 0 auto 15px;
    padding-top: 10px;
}

.band-members {
    padding: 50px 0;
}
.artist-name h4{
    color: #853800;
    text-transform: uppercase;
}
.artist-name span.monospace { 
    font-size: 0.85em;
    opacity: 0.7; 
}

/* Contact */
body.page-contact {
    background: #faf1e4 url(images/kdlang-contact.jpg) no-repeat right top / contain;
}
body.page-contact header.entry-header { display: none; }
body.page-contact main { padding: 50px 0; }
body.page-contact main .container {    
    width: 95vw;
    max-width: 1600px;
    padding-right: 15vw;
}
.column h4 {
    color: #853800;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.2em;
    margin: 0 0 25px;
    letter-spacing: 0.04em;
}


/* =Footer
-------------------------------------------------------------- */
footer.site-footer .container {
	padding: 50px 0 25px;
}
footer.site-footer .container.flex {
	align-items: flex-end;
	flex-direction: row-reverse;
	justify-content: space-between;
}

footer.site-footer .container.flex>* { flex: inherit; }
footer.site-footer .footer-socials {
    font-size: 1.25em;
    margin: 0 0 3px;
}
footer.site-footer .footer-socials .socials.flex { justify-content: space-between; }
footer.site-footer .footer-socials .socials.flex>* { flex: inherit; margin-left: 25px; }

/* Navigation */
footer.site-footer ul {
    display: flex; 
    margin: 0 auto 10px;
}
footer.site-footer ul li { flex: inherit; padding: 0; margin-right: 15px; }
footer.site-footer ul li a {
    font-size: 1em;
    line-height: 1.25em;
	font-weight: 600;
    border-bottom: 1px solid;
    text-decoration: none;
    letter-spacing: 0;
    display: table;
}

/* Copyright */
footer.site-footer .site-info { 
    font-size: 0.75em; 
    line-height: 1.5em; 
}

/* Please Co */
footer.site-footer .copyright.flex { padding: 10px 0; }
footer.site-footer .copyright.flex>* { flex: inherit; }
footer.site-footer .please-co { 
	display: none;
	margin: 15px auto;
}
footer.site-footer .please-co img { 
	max-width: 60px; 
	opacity: 0.25;
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;  }
footer.site-footer .please-co img:hover { opacity: 1; }



/* =Mobile (Media Queries)
-------------------------------------------------------------- */
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

@media only screen and (max-width: 1280px) {
    .flex .quarter { 
        flex: 1 0 33.3%; 
        width: 33.3%; 
        max-width: 33.3%;
    }

    /* Pages */
    body.page-contact main .container { padding-right: 0;}
    .gallery-columns-5 { grid-template-columns: repeat(4,1fr);}
}

@media only screen and (max-width: 1024px) {
    /* Pages */
    .gallery-columns-5 { grid-template-columns: repeat(3,1fr);}
}

@media only screen and (max-width: 900px) {
    .container, body.page-contact main .container,
    .container.fullwidth { width: 90vw; }
    .flex .quarter,
    .flex .third { flex: 1 0 50%; width: 50%; max-width: 50%; }
    .flex .half { flex: 1 0 100%; width: 100%; max-width: 100%; }

    .mobile-only { display: block; overflow: hidden; }
    .hide-desktop { display: none; }

    .owl-nav .owl-next { right: 3vw; }
    .owl-nav .owl-prev { left: 3vw; }

    /* Home */
    .photo-hero,
    .fullscreen-gallery .owl-item { height: 100dvh; }

    /* Mobile Navigation */
    header#masthead { padding: 10px 0 0; }
    header#masthead .container { width: 100%; }
    button.menu-toggle {
        display: block;
        background: transparent;
        border: none;
        width:  40px;
        height: 40px;
        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;
        position: absolute;
        top: 8px;
        right: 5vw;
    }
    button.menu-toggle span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #000000;
        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: 17.5px;}
    button.menu-toggle span:nth-child(4) { top: 30px;}
    header#masthead .main-navigation ul { display: none; }
    header#masthead .main-navigation.toggled ul { display: block; }     
    .main-navigation.toggled button.menu-toggle span { background: #a8182a; }  
    body.home button.menu-toggle span,
    body.post-type-archive-videos button.menu-toggle span,
    body.single-videos 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%;
    }

    header#masthead .container.flex {
        padding: 0;
        min-height: 65px;
        flex-direction: column;
        justify-content: inherit;
    }
    header#masthead .container.flex>* { flex: 1 0 100%; width: 100%; max-width: 100%; }
    header#masthead .site-branding {
        position: absolute;
        top: -3px;
        left: 5vw;
        width: auto;
        text-align: left;
    }
    header#masthead .site-branding h1.site-title { font-size: 4em; }
    header#masthead .toggled .menu-main-navigation-container ul{
        width: 100%;
        max-width: 100%;
        margin: 75px 0 0;
    }
    header#masthead .toggled .menu-main-navigation-container ul li {
        text-align: left;
        padding: 0 5vw;
        border-top: 1px dotted rgba(0,0,0,0.1);
        margin: 0 5px;
    }
    header#masthead .toggled .menu-main-navigation-container ul li a {
        font-size: 1.1em;
        font-weight: 400;
        letter-spacing: 0.1em;
        padding: 10px 0;
        margin-left: -5px;
    }
    body.home header#masthead .toggled .menu-main-navigation-container,
    body.post-type-archive-videos header#masthead .toggled .menu-main-navigation-container ,
    body.single-videos header#masthead .toggled .menu-main-navigation-container {
        background: rgba(0,0,0,0.9);
    }
    body.home header#masthead,
    body.post-type-archive-videos header#masthead,
    body.single-videos header#masthead { 
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 3%, rgba(0,0,0,0.5) 8%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 3%,rgba(0,0,0,0.5) 8%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.7) 3%,rgba(0,0,0,0.5) 8%,rgba(0,0,0,0) 100%);
    border: none;
 }
    body.home header#masthead .toggled .menu-main-navigation-container ul li,
    body.post-type-archive-videos header#masthead .toggled .menu-main-navigation-container ul li ,
    body.single-videos header#masthead .toggled .menu-main-navigation-container ul li  { 
        border-top: 1px dotted rgba(255,255,255,0.1);
    } 

    /* Homepage */
    .overlay-hero { height: auto; }
    .overlay-hero h2.hero-title {
        font-size: 2.5em;
        line-height: 1.1em;
    }
    .overlay-hero .container { padding: 250px 0 150px; }
    .overlay-hero .cta-buttons.flex { flex-direction: row; }
    .overlay-hero .cta-buttons a.large-cta { padding: 10px 20px; margin: 0 5px 0 0; }

    /* Pages */
    header.entry-header h1.entry-title { margin: 25px 0; }
    body.page-contact { background: #faf1e4; }
    body.page-contact main {
        background: #faf1e4 url(images/kdlang-contact.jpg) no-repeat right top / contain;
    }
    .float-image .post-thumbnail { width: 95%; margin: 25px auto; border: 1px solid rgba(0,0,0,0.2); }
    .entry-content .alignright { margin-right: 0; }
    .entry-content .alignleft { margin-left: 0; }
    .entry-content .alignright,
    .entry-content .alignleft { max-width: 50%; }
    .band-members h3 { font-size: 2em; }

    /* Releases */
    article.releases { padding: 0; margin: 10px auto; }
    .featured-releases .flex { flex-direction: column; }
    .featured-releases .album-image { margin: -5px auto 25px; padding: 0; }
    .featured-releases .stream.flex { flex-direction: row; }
    .featured-releases .releases-title { padding: 0 0 50px; }

    /* Videos */
    .featured-video { display: none; }
    body.single-videos .featured-video { display: block; }
    .featured-video .flex { flex-direction: column; }
    .featured-video .flex>* { flex: 1 0 100%; width: 100%; max-width: 100%; }
    .video-details { padding: 25px 0 50px; }
    .video-title span { font-size: 0.8em; margin: 0 0 5px; }
    h1, h1.entry-title { width: 100%; }
    .video-title { margin-bottom: 25px; }
    .video-title h1.entry-title { font-size: 2.5em; }
    .video-listing { padding-top: 25px; }
    .video-listing article { padding: 0; }
    .video-listing article h4.entry-title { font-size: 1em; margin-bottom: 10px; }
    .video-listing article .post-thumbnail,
    .video-listing article .post-thumbnail img,
    .video-listing.media-carousel article .post-thumbnail { height: 280px; }

    /* Footer */
    footer.site-footer { padding-top: 0; }
    footer.site-footer .container.flex { flex-direction: column; }
    footer.site-footer .container.flex>* { flex: 1 0 100%; width: 100%; max-width: 100%; }
    footer.site-footer .footer-socials {
        font-size: 1.25em;
        margin: 0 auto 20px;
    }
    footer.site-footer .footer-socials .socials { display: inline-flex; }
    footer.site-footer .footer-socials .socials.flex>* { font-size: 1.25em; margin: 0 25px 0 0; }
    footer.site-footer .site-info { font-size: 0.8em; }
}

@media only screen and (max-width: 640px) {
    body { font-size: 16px; line-height: 1.6em; }
    h1, h1.entry-title { font-size: 3em; margin: 0; }
    h2 { font-size: 1.5em; }
    h3, h4 { font-size: 1em; }

    .hide-on-mobile { display: none; }
    .show-mobile { display: block; }

    /* Home */
    .overlay-hero h2.hero-title {
        font-size: 2.2em;
        line-height: 1em;
        margin: 50px 0 15px;
    }

    .post-listing article.post,
    .flex article.quarter.releases,
    .video-listing article.quarter,
    .flex .half,
    .flex .third { flex: 1 0 100%; width: 100%; max-width: 100%; }

    /* Pages */
    .column { margin-bottom: 50px; }
    .column:last-of-type { margin-bottom: 15px; }
    .gallery-columns-5 { grid-template-columns: repeat(2,1fr);}
    .accordion-item { padding: 10px 0; }
    .accordion-title { padding: 15px 0 5px; }
    .accordion-title h4,
    .artist-name span.monospace { display: block; margin-bottom: 5px; }
}

@media only screen and (max-width: 520px) {
}