/*!
Theme Name: Backstreet Boys
Theme URI: http://underscores.me/
Author: Phill Mamula
Author URI: http://underscores.me/
Description: 2022 Theme Migration for BSB - ForSNG
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: backstreetboys
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.

Backstreet 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/
*/


@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;900&display=swap');

@font-face {
    font-family: 'OCR A Std Regular';
    src: url('fonts/OCR A Std Regular.woff2') format('woff2'),
         url('fonts/OCR A Std Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Maple Bold';
    src: url('fonts/maple-bold.woff2') format('woff2'),
         url('fonts/maple-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Maple Regular';
    src: url('fonts/Maple-Regular.woff2') format('woff2'),
         url('fonts/Maple-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* =Global
-------------------------------------------------------------- */
html,body {
  	margin: 0; padding: 0;
  	min-height: 100%;
}
body {
	background: #FFFFFF;
    font-family: 'Work Sans', sans-serif;
	color: #000000;
	font-size: 18px;
	line-height: 1.5em;
}

/* Type */
h1,h2,h3,h4 {
	color: #E41E25;
	font-family: 'Maple Bold', sans-serif;
	font-weight: normal;
    line-height: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 5px 0 15px;
}
h1 { font-size: 4em; }
h2 { font-size: 3em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }

.accent, .mono {
	font-family: 'OCR A Std Regular', sans-serif;
    line-height: 1.2em;
	text-transform: uppercase;
}

strong { font-weight: 600; }
.sm-text { font-size: 0.8em; line-height: 1.2em; }

img { width: 100%; height: auto; margin: 0 0 -5px; }
p { margin: 0 0 15px; }

a, a:link, a:visited { 
	color: #E41E25;
    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: #000000; }

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

/* CTA Buttons */
.large-cta,
a.large-cta,
.outline-cta,
a.outline-cta {
	color: #FFFFFF;
	background: #E41E25;
    font-size: 0.7em;
    border: 1px solid;
	font-family: 'OCR A Std Regular', sans-serif;
	text-transform: uppercase;
    display: table;
    padding: 9px 40px 8px;
    text-decoration: none;
    text-align: center;
    border-radius: 25px;
}
.large-cta:hover,
a.large-cta:hover {
    border-color: #000000;
    background: #000000;
    color: #FFFFFF;
}
.outline-cta,
a.outline-cta { 
	color: #000000;
	background: transparent;
}
.outline-cta:hover,
a.outline-cta:hover {
	border-color: #000000;
	background: #000000;
	color: #FFFFFF;
}

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

#section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	min-height: 70vh;
	padding: 50px 0;
}

.flex { display: flex; flex-wrap: wrap; align-items: center; }
.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%; }

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


/* Owl Carousel - Auto Height Plugin */
.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
.owl-carousel {
    margin: 0 auto;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-stage-outer {
    overflow: hidden;
}
.owl-carousel .owl-stage-outer {
    z-index: 999;
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-nav .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-dot {
  color: inherit;
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
  display: none;
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}


.owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}


.owl-dot {}
.owl-dot {
    background: none;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    text-transform: uppercase;
    padding: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    margin-right: 15px;
}
.owl-dot:hover { 
    border: 1px solid #32475F;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;  
}
.owl-dot.active { 
    background: #32475F;
    border: 1px solid #32475F;
  }

.owl-nav { width: 100%; height: 100%; position: absolute; top: 0;left: 0; }

.owl-nav button { 
    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 {
    color: #FFFFFF;
    background: #000000;
    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% - 25px);
    z-index: 999;
}
.owl-nav .owl-next { right: 3vw; }
.owl-nav .owl-prev { left: 3vw; }
.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%);
}

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


/* =Header
-------------------------------------------------------------- */
header#masthead { padding: 20px 3vw; }
header#masthead .flex { max-width: 1400px; margin: 0 auto; }
header#masthead .flex .site-branding { flex: 1; }
header#masthead .flex .site-nav { flex: 3; padding-left: 5vw; }

header#masthead .main-navigation ul {
    justify-content: space-between;
}
header#masthead .main-navigation ul li a {
    color: inherit;
    font-family: 'Maple Regular', sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
}
body.single-events header#masthead .main-navigation ul li.events a,
body.single-media header#masthead .main-navigation ul li.media a,
body.single-news header#masthead .main-navigation ul li.media a,
body.single-releases header#masthead .main-navigation ul li.releases a,
header#masthead .main-navigation ul li a:hover,
header#masthead .main-navigation ul li.current-menu-item a {
    color: #E41E25;
}

body.single-events header#masthead .main-navigation ul li.events:before,
body.single-media header#masthead .main-navigation ul li.media:before,
body.single-news header#masthead .main-navigation ul li.media:before,
body.single-releases header#masthead .main-navigation ul li.releases:before,
header#masthead .main-navigation ul li.current-menu-item:before {
    content: '';
    width: 1px;
    height: 20px;
    position: absolute;
    background: #E41E25;
    left: 50%;
    bottom: -20px;
}



header#masthead nav.main-navigation li.menu-item-has-children a:after {
    font-size: 0.9em;
    content: '\f107';
    font: var(--fa-font-regular);
    display: inline-block;
    margin-left: 10px;
}
header#masthead nav.main-navigation li.menu-item-has-children ul.sub-menu li a:after { display: none; }

header#masthead nav.main-navigation ul ul.sub-menu {
    background: #FFFFFF;
    position: absolute;
    box-shadow: none;
    border: 1px solid #EFEFEF;
    display: block;
    margin: 0;
    padding: 0;
}
header#masthead nav.main-navigation ul ul li { 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px solid #EFEFEF;
}
header#masthead nav.main-navigation ul ul li:last-of-type { border-bottom: none; }
header#masthead nav.main-navigation ul ul li a{
    font-size: 0.8em;
    padding: 10px 15px 5px;
    margin: 0 auto;
}


/* =Homepage
-------------------------------------------------------------- */
/* Hero */
#section.home-carousel {
    display: block;
    min-height: auto;
    background: #000000;
    padding: 0;
}
#section.home-carousel .container { max-width: 1600px; width: 100%; }
#section.home-carousel .owl-nav .owl-prev { left: 35px; }
#section.home-carousel .owl-nav .owl-next { right: 25px; }

/* News */
#section.home-news {
    padding: 50px 0;
    min-height: auto;
    background: #EEE url('images/gray-dna-bg.jpg') no-repeat center center / cover;
}
#section.home-news article { border: none; padding: 50px 0; }

a.view-more { 
    font-size: 0.85em;
    text-decoration: none; 
    margin: 40px auto; 
    display: table; 
}

/* Events */
#section.home-events { min-height: auto; }
#section.home-events a.view-more { margin-bottom: 0; }

/* Instagram */
#section.home-instagram {
    min-height: auto;
    padding: 50px 0;
}
#section.home-instagram a.view-more { 
    text-align: left;
    position: relative;
    margin: 40px 0 0;
}
#section.home-instagram a.view-more i {
    background: #E41E25;
    color: #FFFFFF;
    font-size: 1.1em;
    padding: 5px 5px 3px;
    border-radius: 50%;
    margin-left: 110px;
}
#section.home-instagram a.view-more:before {
    content: '';
    width: 90px;
    height: 1px;
    background: #E41E25;
    position: absolute;
    right: 40px;
    top: 50%;
}

/* Socials */
#section.home-socials {
    padding: 100px 0 0;
    min-height: auto;
    margin-bottom: -200px;
}
#section.home-socials h3 {
    font-family: 'Maple Regular', sans-serif;
    font-size: 2em;
    line-height: 1.3em;
    color: inherit;
    text-transform: inherit;
    letter-spacing: 0;
    margin: 0 0 50px;
    max-width: 520px;
}
#section.home-socials .container.flex {
    align-items: initial;
    justify-content: space-between;
}
#section.home-socials .spotify {
    padding: 15px 15px 10px;
    border: 1px solid #DEDEDE;
    background: #EDEDED;
    border-radius: 8px;
}


/* =Pages
-------------------------------------------------------------- */
#hero.page-header {
    background: url(images/dnsstrains.jpg) repeat top center / auto 100%;
    padding: 80px 0;
    text-align: center;
}
#hero.page-header h1 { 
    font-size: 2.25em;
    line-height: 1em;
    margin: 0;
}

/* Socials */
#section.socials-listing { padding-top: 50px; }
.socials-section { 
    padding: 5vw 0; 
    border-bottom: 3px solid #EEEEEE; 
}
.socials-section:first-of-type { padding-top: 0; }
.socials-section.flex .artist-image { flex: 1.5; padding-right: 5vw; }
.socials-section.flex .artist-image img { border-radius: 10px; }

.socials-section .artist-socials {
    text-align: center;
}
.socials-section .artist-socials h4 {
    font-size: 1.25em;
    margin: 0 auto 10px;
    color: inherit;
}
.socials-section .social-links {
    position: relative;
    padding-top: 50px;
}
.socials-section .social-links:before {
    content: '';
    width: 1px;
    height: 45px;
    background: #E41E25;
    position: absolute;
    top:  0;
    left: 50%;
}
.socials-section .social-links li { padding: 5px 0; flex: 1 0 100%; width: 100%; max-width: 100%;}
.socials-section .social-links a { font-size: 0.9em; text-decoration: none; }


/* =News
-------------------------------------------------------------- */
article.post-list {
    padding: 100px 0;
    border-bottom: 3px solid #EEEEEE;
}
article.post-list .article-list-image { padding-right: 5vw; }
article.post-list .article-list-content { text-align: center; }
article.post-list h2 { font-size: 2.25em; margin: 5px auto 25px;}
article.post-list h2 a { text-decoration: none; color: #000000; }
article.post-list h2 a:hover { color: #AAAAAA; }

body.blog article.post-list:first-of-type {
    background: #EEE url('images/gray-dna-bg.jpg') no-repeat center center / cover;
    border: none;
}
body.paged article.post-list:first-of-type {
    border-top: 1px solid #EEEEEE;
    background: transparent;
    border-bottom: 3px solid #EEEEEE;
}

article.post-list a.read-more { font-size: 0.75em; text-decoration: none; display: block; margin-top: 50px; }

/* Single */
body.single article.post { padding: 15px 0; }
body.single article.post header { text-align: center; padding: 50px 0; }
body.single article.post h1 { color: initial; font-size: 2.5em; width: 80%; margin: 0 auto;}
article.post .entry-date {
    font-size: 0.8em;
    position: relative;
    margin: 0 auto 60px;
}
article.post .entry-date:after {
    content: '';
    width: 1px;
    height: 30px;
    position: absolute;
    background: #E41E25;
    left: 50%;
    top: 25px;
}

/* Entry Content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 { color: inherit; margin: 35px 0 5px; font-size: 1.5em; }


/* Pagination */
.paginate .wp-paginate { 
    padding: 25px 0;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.paginate .wp-paginate span.title {
    font-family: 'OCR A Std Regular', sans-serif;
    text-transform: uppercase;
    font-size: 0.7em;
    padding-right: 15px;
}
.paginate .wp-paginate .current {
    color: #FFFFFF;
    background: #000000;
    border: 1px solid #000000;
    margin-right: 5px;
    padding: 5px 10px;
    font-size: 0.8em;
}
.paginate .wp-paginate a {
    background: transparent;
    border: 1px solid #bfbfbf;
    color: #000000;
    margin-right: 5px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 0.8em;
}
.paginate .wp-paginate a:hover {
    border-color: #E41D25;
    background: #E41D25;
    color: #FFFFFF;
}


/* =Events
-------------------------------------------------------------- */
/* Listing */
.event-list-item { padding: 30px 20px; }
.event-list-item:hover { background: #f8f8f8; }
.event-details.flex { align-items: initial; }
.event-details.flex .event-date,
.event-details.flex .event-location { flex: 1.4; }
.event-date a,
.event-location a { text-decoration: none; color: inherit; }

.event-list-item .event-date { color: #e41d25; font-size: 0.9em;}
.event-list-item .event-date>* { display: inline-block; }
.event-list-item .event-date .mono { position: relative; padding-right: 50px; width: 195px; }
.event-list-item .event-date .mono:before {
    content: '';
    width: 30px;
    height: 1px;
    background: #e41d25;
    position: absolute;
    top: 50%;
    right: 10px;
}
.event-list-item .event-date .event-city { font-weight: 600; }
.event-list-item .event-location span.event-title {
    font-size: 0.85em;
    line-height: 1.4em;
    font-weight: 300;
    display: block;
}
.event-list-item .event-purchase>* { margin: 0 2px; }

.large-cta.status,
.outline-cta.status {
    cursor: default;
    border: 1px solid #CCCCCC;
    background: #CCCCCC;
    color: #999999;
}
.outline-cta.travel { margin: 5px auto 0; }
body.single .outline-cta.travel { margin-top: 6px; }

/* EDP */
.event-details.container.small { max-width: 720px; }

.event-single-details .event-date { text-align: center; padding: 0 0 25px; margin: 0 auto 15px; position: relative; }
.event-single-details .event-date:before {
    content: '';
    width: 1px;
    height: 30px;
    background: #e41d25;
    position: absolute;
    bottom: -10px;
    left: 50%;
}
.event-single-details .event-image { text-align: center; margin-bottom: 15px;}
.event-single-details .event-image img { border-radius: 10px; }

.event-single-details .event-venue { 
    padding: 5px 0 10px;
    text-align: center; 
}
.event-single-details .event-venue .event-location { 
    margin: 10px auto 5px;
}
.event-single-details .event-venue .event-location strong { display: block; font-size: 1.2em; margin: 5px auto; }
.event-single-details .event-venue .event-city { font-size: 0.9em; }

.event-single-details .event-purchase { max-width: 400px; margin: 10px auto 40px; }
.event-single-details .event-purchase>* { margin: 0 5px; }

.event-additional .venue-address {
    border-top: 2px solid #EEEEEE;
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 20px 0;
    margin: 25px auto 0;
}
.event-additional .venue-address a {
    margin-top: 15px;
    display: table;
    font-size: 0.8em;
    text-decoration: none;
}

/* =History
-------------------------------------------------------------- */
#section.history { padding: 15px 0 0 0px; }

.history-listing {
    padding: 0;
    position: relative;
}
.history-listing:before {
    content: '';
    width: 1px;
    height: 100%;
    background: #E41E25;
    left: 50%;
    top: 0;
    position: absolute;
}
.history-container.flex { align-items: initial; }
.history-container.flex>* { flex: 1 0 50%; width: 50%; padding: 15px 50px; }

.history-title { text-align: center; display: block; padding: 50px 0; }
.history-section:first-of-type .history-title { padding-top: 0; }
.history-title .large-cta { 
    margin: 0 auto;
    border: none; 
    font-size: 0.9em; 
    padding: 12px 50px 10px;
    position: relative;
    z-index: 99; 
}
.history-title .large-cta:hover { background: #E41E25; }

.media-item,
.timeline-item { margin-bottom: 15px; }
.media-item .caption {
    color: #999999;
    display: block;
    margin: 10px 0 25px;
    font-size: 0.75em;
    line-height: 1.2em;
}
.timeline-item .date {
    color: #e41d25;
    font-size: 0.8em;
    line-height: 1em;
    position: relative;
    margin-bottom: 5px;
}
.timeline-item .date:before {
    content: '';
    width: 45px;
    background: #e41d25;
    height: 1px;
    position: absolute;
    top: 40%;
    left: -50px;
}
.timeline-item .caption {
    padding: 5px 0 25px;
    font-size: 0.9em;
    line-height: 1.4em;
}


.history-section:nth-child(even) .history-container.flex { flex-direction: row-reverse; }
.history-section:nth-child(even) .timeline { text-align: right; }
.history-section:nth-child(even) .timeline-item .date:before { left: auto; right: -50px; }


/* =Media
-------------------------------------------------------------- */
#section.media,
#section.media.pages {
    padding: 0;
}

/* Page */
#section.featured-video { 
    background: #EEE url('images/gray-dna-bg.jpg') no-repeat center center / cover;
    padding: 50px 0;
    min-height: auto;

}
.media-section { padding: 50px 0; border-bottom: 3px solid #EEEEEE; }
.media-section h3 {
    text-align: center;
    margin: 0 auto 25px;
}
.media-section a.view-more { margin: 25px auto 10px; }
.media-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Listing */
.media-container.flex {
    align-items: initial;
}
.media-container.flex>* { 
    flex: 1 0 33.3%; 
    width: 33.3%; max-width: 33.3%; 
    padding: 5px; 
    margin-bottom: 15px;
}
article.media-list .article-list-header {
    margin: 10px auto 15px;
}
article.media-list h4 {
    font-family: 'Maple Regular', sans-serif;
    font-size: 0.9em;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
}
article.media-list h4 a {
    color: #000000;
    text-decoration: none;
}
article.media-list h4 a:hover { color: #E41E25; }
article.media-list img { border-radius: 5px; }

/* Videos */
body.single,
body.page-template-page-media {
    background: url('images/dnsstrains.jpg') repeat-x top 60px left / auto 250px;
}
body.single-media .featured-video { margin: 10px auto; }
body.single-media .article-list-header { text-align: center; }
body.single-media .article-list-header h1 { 
    font-size: 1.75em;
    line-height: 1em;
    color: initial;
}
body.single-media .video-label {
    color: #E41E25;
    font-size: 0.8em;
    position: relative;
    margin: 0 auto 35px;
}
body.single-media .video-label:after {
    content: '';
    width: 1px;
    height: 25px;
    position: absolute;
    background: #E41E25;
    left: 50%;
    top: 20px;
}
body.single-media .video-caption {
    font-size: 0.9em;
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 5px auto;
}
body.single-media article { margin: 10px auto -25px; }

/* Photo Gallery */
header.photo-details {
    padding: 30px 0;
}
body.single-media header.photo-details.article-list-header h1 { font-size: 2em; }
header.photo-details .photo-credit { font-size: 0.8em; position: relative; }
header.photo-details .photo-credit:after {
    content: '';
    width: 1px;
    height: 25px;
    position: absolute;
    background: #E41E25;
    left: 50%;
    top: 20px;
}

.photo-grid.flex {
    align-items: initial;
    flex-wrap: wrap;
    margin: 10px auto 50px;
}
.photo-grid.flex>* { flex: 1 0 25%; width: 25%; max-width: 25%; padding: 5px; }

/* Lightbox */
.nivo-lightbox-theme-default.nivo-lightbox-overlay { background: rgba(0,0,0,0.85) !important; }
.nivo-lightbox-theme-default .nivo-lightbox-nav:hover { background-color: transparent !important; }
.nivo-lightbox-theme-default .nivo-lightbox-close { display: none !important; }


/* =HTML
-------------------------------------------------------------- */
body.page-template-page-html header#masthead,
body.page-template-page-html footer.site-footer { display: none; }

body.page-template-page-html {
    background: url(images/dnsstrains.jpg) repeat top center / auto 250px;
    padding: 2vw 0;
    text-align: center;
}
body.page-template-page-html .container { background: #FFFFFF; }

/* Form Styling */
.entry-content form { max-width: 520px; margin: 0 auto 25px; }
.entry-content form p { margin: 2px 0; }
.entry-content form label {
    display: block;
    font-size: 0.7em;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: left;
    opacity: 0.8;
}
.entry-content form input,
.entry-content form select { 
    width: 100%; 
    margin: 5px 0 15px;
    padding: 5px 10px; 
}
.entry-content form fieldset {
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #dcdcdc;
    margin: 5px 0 15px;
}
.entry-content form input[type="submit"],
.entry-content form button[type="submit"] {
    color: #FFFFFF;
    background: #E41E25;
    font-size: 0.8em;
    line-height: 1em;
    border: 1px solid;
    font-family: 'OCR A Std Regular', sans-serif;
    text-transform: uppercase;
    display: table;
    padding: 15px 50px 12px;
    text-decoration: none;
    text-align: center;
    border-radius: 25px;
    margin: 0 auto;
}
.entry-content form input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover  {
    border-color: #000000;
    background: #000000;
    color: #FFFFFF;
}

/* =Fan Club
-------------------------------------------------------------- */
#section.fanclub {
    background: url('images/dnsstrains.jpg') repeat-x top left / auto 250px;
}
.fanclub-poster { margin: 0 auto 25px; }
.fanclub-poster img { border-radius: 10px; }

.fanclub-details { padding: 25px 0; }
.fanclub-details.flex { align-items: initial; }
.fanclub-details.flex .entry-content { flex: 2.5; padding-right: 30px; }

.fanclub-details .entry-content h2,
.fanclub-details .entry-content h3,
.fanclub-details .entry-content h4 { 
    font-size: 2em;
    margin: 0 0 10px;
}
.fanclub-ctas .column {
    text-align: center;
    margin-bottom: 25px;
}
.fanclub-ctas .column label { font-size: 0.75em; }
.fanclub-ctas .column .large-cta {
    width: 100%;
    padding: 12px 25px 10px;
    font-size: 0.8em;
    margin: 5px auto;
}
.fanclub-ctas .disclaimer { 
    color: #999999;
    font-size: 0.75em; 
    line-height: 1.3em;
}

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




/* =404
-------------------------------------------------------------- */
.error-404 { text-align: center; }
.error-404 h1 { font-size: 2.5em; margin: 100px auto 25px; }
.error-404 a.large-cta { margin: 50px auto; display: table; padding: 10px 50px; }


/* =Releases
-------------------------------------------------------------- */
/* Grid */
#section.releases { padding: 50px 0; display: block; }
.releases-listing.flex { align-items: initial; margin-bottom: 50px;}
.releases-listing .releases-grid-item { 
    flex: 1 0 25%; width: 25%; max-width: 25%; 
    padding: 5px; 
    margin-bottom: 20px;
    text-align: center;
}
.releases-grid-item img { 
    border-radius: 8px;
    border: 1px solid #EEEEEE;
}
.releases-grid-item .album-title { padding: 15px 0 5px; }
.releases-grid-item .album-title h4 {
    font-family: 'Maple Regular', sans-serif;
    font-size: 1.1em;
    margin: 0 auto 5px;
}
.releases-grid-item .album-title h4 a { text-decoration: none; color: #000000; }
.releases-grid-item .album-title h4 a:hover { color: #F94C57; }
.releases-grid-item .album-title .album-year {
    color: #747070;
    font-size: 0.75em;
    display: block;
}


/* Releases Carousel */
.releases-carousel { margin: 15px auto 100px; }
.releases-carousel .album-details { display: none; }
.releases-carousel .releases-grid-item img { margin: 0;}

 
/* Detail */
.releases-detail.container.flex { align-items: initial; }
.releases-detail .album-image { padding-right: 50px; }
.releases-detail .album-image img { 
    width: 100%; 
    margin: 0 auto;
    border: 1px solid #EEEEEE;
}
.releases-detail .album-download {
    margin: 10px auto;
    padding: 0 15px;
}
.releases-detail .album-download.flex { justify-content: flex-end; }
.releases-detail .album-download.flex>* { flex: initial; }
.releases-detail .album-download .label { font-size: 0.85em; margin-top: 5px; }  
.releases-detail .album-download .stream.flex>* { flex: initial; margin: 0 0 0 20px; }
.releases-detail .album-download a.stream {
    background: #e41d25;
    width: 30px;
    text-align: center;
    height: 30px;
    border-radius: 50%;
    line-height: 1.7em;
    font-size: 1.05em;
    color: #FFFFFF;
}
.releases-detail .album-download a.stream:hover { background: #000000; }


.releases-detail .album-title { text-align: center; }
.releases-detail .album-title .album-year {
    font-size: 0.8em;
    display: block;
    margin-bottom: 45px;
    position: relative;
}
.releases-detail .album-title .album-year:before {
    content: '';
    width: 1px;
    height: 25px;
    background: #e41d25;
    position: absolute;
    top: 25px;
    left: 50%;
}
.releases-detail .album-title h1.album-name { 
    font-size: 2em;
    margin: 0 auto 25px; 
}
.releases-detail .tracklisting {
    padding: 15px 0;
    line-height: 1.6em;
    text-align: center;
}


/* =Footer
-------------------------------------------------------------- */
footer.site-footer { 
    margin-top: 50px;
    align-items: flex-end;
    position: relative;
}
footer.site-footer a:hover { color: #FFFFFF; }

/* Footer Image */
footer.site-footer .footer-image { overflow: hidden; max-width: 650px; position: relative;}
footer.site-footer:before {
    content: '';
    width: 60%;
    height: 200px;
    background: url(images/dnsstrains.jpg) repeat center center / auto 105%;
    position: absolute;
    z-index: -3;
    top: 0;
}
footer.site-footer .footer-image:after {
    content: '';
    width: 100%;
    height: 45px;
    background: #000;
    position: absolute;
    bottom: 0; left: 0;
}
footer.site-footer .footer-image img { margin: 0 0 35px; }
footer.site-footer .footer-content {
    background: #262626;
    color: #FFFFFF;
    padding: 25px 3vw; 
}

/* Global */
.global {
    font-size: 14px;
    max-width: 250px;
    margin: 20px 0 0px;
    display: flex;
    align-items: center;
}
.global a { color: #999999; }
.global a:hover { color: #FFFFFF; }
.global img { max-width: 30px; margin-right: 15px; }
.global img.fanclub { max-width: 130px; margin-right: 0; }
/* Socials */
footer.site-footer .footer-socials { 
	max-width: 450px; 
	font-size: 1.15em; 
	padding: 0 0 20px;
}
footer.site-footer .footer-socials a { color: #FFFFFF; padding: 2px 10px; }
footer.site-footer a { color: inherit; }
footer.site-footer a:hover { color: #E41E25; }


/* Copyright */
footer.site-footer {
    font-size: 0.8em;
    line-height: 1.35em;
}
footer.site-footer  ul {
    width: auto;
    display: block;
    margin-bottom: 5px;
}
footer.site-footer ul li {
    display: inline-block;
    margin-right: 1vw;
}
footer.site-footer ul li a { color: #FFFFFF;}


footer.site-footer .copyright.flex { padding: 5px 0;}
footer.site-footer .copyright.flex>* { flex: inherit; }
footer.site-footer .copyright.flex .legal { color: #ababab; }
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: 1180px) {
}
@media only screen and (max-width: 1024px) {
    /* Socials */
	.socials-section.flex .artist-image { flex: 1; padding-right: 2vw; }

    /* Home */
    #section.home-instagram iframe { height: 300px !important; } 

    /* Events */
    .event-details.flex .event-date, 
    .event-details.flex .event-location { flex: 1;}
    .event-list-item .event-date .event-city { display: block; }

    /* Media */
    .photo-grid.flex>* { flex: 1 0 33.3%; width: 33.3%; max-width: 33.3%; }

    /* News */
    article.post-list h2 { font-size: 1.75em; }
    article.post-list .article-list-image { padding-right: 3vw; }

    /* Footer */
    footer.site-footer { margin-top: 150px; }
    footer.site-footer .footer-image { flex: 2; }
    footer.site-footer .footer-socials a { padding: 5px 2vw; }
    footer.site-footer:before { width: 100%; height: 130px; }

    footer.site-footer .copyright.flex { flex-direction: column-reverse; align-items: initial; font-size: 0.9em; }
    footer.site-footer .please-co { margin: 10px 0; }
}   
@media only screen and (max-width: 820px) {
    body { font-size: 19px; line-height: 1.6em; }
    #section { min-height: auto;}
    h1 { font-size: 2.25em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.25em; }

    header#masthead h1.site-title { font-size: 2.5em; }

    /* Mobile Navigation */
    header#masthead { padding: 15px 5vw; text-align: left; background: #FFFFFF; }
    header#masthead .flex { display: block; }
    header#masthead .flex .site-nav { padding: 0; }
    header#masthead .flex .site-branding img { max-width: 350px; margin: 3px 0 0; }
    button.menu-toggle {
        display: block;
        background: transparent;
        border-radius: 0;
        border: none;
        width:  40px;
        height: 40px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .15s ease-in-out;
        -moz-transition: .15s ease-in-out;
        -o-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
        cursor: pointer;
        position: absolute;
        top: 3px;
        right: calc(5vw + 15px);
    }
    button.menu-toggle span {
        display: block;
        position: absolute;
        height: 2px;
        width: 40px;
        background: #e41e25;
        opacity: 1;
        -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: 15px;}
    button.menu-toggle span:nth-child(2),
    button.menu-toggle span:nth-child(3) { top: 28px;}
    button.menu-toggle span:nth-child(4) { top: 40px;}    
    .main-navigation.toggled button.menu-toggle span { background: #e41e25; }   
    .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%;
    }
    .main-navigation .menu-main-navigation-container { display: none; } 
    .main-navigation.toggled .menu-main-navigation-container {
        display: flex;
        align-items: center;
        margin-top: 15px;
    }
    header#masthead nav.main-navigation.toggled ul {
        flex-direction: column;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border: none;
        margin-bottom: -15px;
    }
    header#masthead nav.main-navigation.toggled ul li {
        flex: 1 0 100%;
        width: 100%;
        text-align: left;
        border-top: 1px dotted #DDDDDD;
    }
    header#masthead nav.main-navigation.toggled li a { 
        width: 100%;
        font-size: 1em;
        display: block;
        padding: 15px 0 10px;
    }

    header#masthead nav.main-navigation ul li:hover ul.sub-menu {
        position: relative;
        margin-bottom: 15px;
        border: none;
        border-bottom: 1px dotted #DDDDDD;
    }
    header#masthead nav.main-navigation ul li:hover ul.sub-menu li { border-bottom: none; padding-left: 5vw; }

    body.single-events header#masthead .main-navigation ul li.events a,
    body.single-media header#masthead .main-navigation ul li.media a,
    body.single-releases header#masthead .main-navigation ul li.releases a,
    body.single-news header#masthead .main-navigation ul li.media a,
    header#masthead .main-navigation ul li a:hover,
    header#masthead .main-navigation ul li.current-menu-item a { color: initial; }

    body.single-events header#masthead .main-navigation ul li.events:before,
    body.single-media header#masthead .main-navigation ul li.media:before,
    body.single-news header#masthead .main-navigation ul li.media:before,
    body.single-releases header#masthead .main-navigation ul li.releases:before,
    header#masthead .main-navigation ul li.current-menu-item:before { display: none; }

    /* Home */
    a.view-more { margin: 25px auto; }
    #section.home-instagram iframe { height: 200px !important; }
    #section.home-instagram a.view-more { margin-top: 20px; }
    #section.home-socials { margin-bottom: 50px; }
    #section.home-socials .container.flex .mailinglist { flex: 1; padding-right: 50px; }
    #section.home-socials h3 { font-size: 1.75em; }
    #section.home-socials .container.flex .spotify iframe { height: 350px; }
    #section.home-video,
    #section.home-news { padding: 50px 0 25px; }

    /* Pages */
    #hero.page-header h1 { font-size: 2em; }
    #hero.page-header { padding: 50px 0; }

    /* Media */
    body.single-media article { margin-bottom: 50px; }
    .photo-grid.flex>*,
    .media-container.flex>* { flex: 1 0 50%;  width: 50%;  max-width: 50%;}
    .owl-nav button { width: 35px; height: 35px; }

    /* Socials */
    .socials-section { padding: 35px 0; }
	.socials-section.flex { flex-direction: column; }
	.socials-section.flex .artist-image { flex: 1; padding-right: 0; }
	.socials-section.flex .artist-image img { max-width: 520px; margin: 0 auto 15px; }
	.socials-section .artist-socials h4 { font-size: 1.5em; }
	.socials-section .social-links { display: flex; flex-wrap: wrap; max-width: 500px; }
	.socials-section .social-links:before { left: 50%; }
	.socials-section .social-links li { flex: 1 0 50%; width: 50%; max-width: 50%; }
    .socials-section .social-links li:last-of-type { flex: 1 0 100%; width: 100%; max-width: 100%; }
    .socials-section:first-of-type .social-links li:last-of-type { flex: 1 0 50%; width: 50%; max-width: 50%; }

    /* News */
    article.post-list { padding: 50px 0; }
    article.post-list .container.flex { flex-direction: column; }
    article.post-list .article-list-image { padding-right: 0; margin-bottom: 25px; }
    article.post-list .article-list-image img { max-width: 520px; }
    body.single article.post h1 { color: initial; font-size: 2em; width: 100%; margin: 0 auto;}

    /* Releases */
    .releases-carousel { margin-bottom: 50px; }
    .releases-listing .releases-grid-item { flex: 1 0 50%; width: 50%; max-width: 50%;}
    .releases-detail.container.flex { flex-direction: column;}
    .releases-detail .album-image .album-download { margin-bottom: 50px; }
    .releases-detail .album-image { padding-right: 0; }

    /* History */
    .history-title .large-cta { margin: 0; }
    .history-listing:before { left: 50px; }
    .history-container.flex,
    .history-section:nth-child(even) .history-container.flex { flex-direction: column-reverse; padding-left: 50px; }
    .history-container.flex>* { flex: 1 0 100%; width: 100%; max-width: 100%; padding: 15px 0 15px 50px; }
    .history-section:nth-child(even) .timeline { text-align: left; }
    .history-section:nth-child(even) .timeline-item .date:before { right: auto; left: -50px; }


    /* Events */
    .event-list-item { padding: 50px 0; border-bottom: 2px solid #EFEFEF; }
    .event-list-item:first-of-type { padding-top: 25px; }
    .event-list-item:hover { background: transparent; }
    .event-details.flex { align-items: initial; }
    .event-details.flex .event-date>* { flex: 1 0 100%; width: 100%; display: inline-block; }
    .event-details.flex .event-purchase { flex: 1 0 100%; margin-top: 25px;}
    .event-list-item .event-date .mono:before { right: auto; left: 165px; }

    /* Fan Club */
    .fanclub-details.flex { flex-direction: column-reverse; padding: 0;}
    .fanclub-details.flex .entry-content { margin: 40px auto; padding: 0; }
    .fanclub-details.flex .fanclub-ctas {
        display: flex;
        flex-wrap: wrap;
        align-items: initial;
    }
    .fanclub-details.flex .fanclub-ctas>* { flex: 1; padding: 0 5px; margin: 0 auto 15px; }
    .fanclub-details.flex .fanclub-ctas .disclaimer { flex: 1 0 100%; width: 100%; margin: 0 auto 15px; }

    /* Footer */
    footer.site-footer { margin-top: 25px; }
    footer.site-footer.flex { flex-direction: column; }
    footer.site-footer .footer-content { 
        background: #000000; 
        margin: -5px auto 0; 
        width: 100%; 
        text-align: center; 
        padding: 30px 10vw;
    }
    footer.site-footer .footer-socials { width: 100%; max-width: 320px; margin: 0 auto; }
    footer.site-footer .footer-image { max-width: 100%; }
    footer.site-footer .socials.flex { display: flex; flex-wrap: wrap; }
    footer.site-footer .socials.flex a { flex: 1 0 20%; padding: 10px; font-size: 1.2em; }
    footer.site-footer .global { margin: 15px auto 5px; text-align: center; justify-content: center; }
}
@media only screen and (max-width: 640px) {
    body { font-size: 17px; line-height: 1.5em; }
    .container { width: 85vw; }

    /* Home */
    #section.home-instagram iframe { height: 150px !important; }
    #section.home-socials { padding: 0 0 50px; }
    #section.home-socials .container.flex { flex-direction: column-reverse; }
    #section.home-socials .container.flex h3 { margin: 50px 0 15px; }
    #section.home-instagram a.view-more i { margin-left: 50px; }
    #section.home-instagram a.view-more:before { width: 30px; }

    /* News */
    article.post-list h2 { font-size: 1.75em; margin: 5px auto 15px; }
    body.single article.post h1 { font-size: 2em;}

    /* Events */
    .event-details.flex { flex-direction: column; }
    .event-location { margin: 10px 0 0; }

    /* Media */
    .photo-grid.flex>*,
    .media-container.flex>* { flex: 1 0 100%;  width: 100%; max-width: 100%; padding: 0;}
    body.single-media .featured-video { margin: 25px auto; }

    /* Pages */
    #hero.page-header h1 { font-size: 1.75em; }

    .history-listing:before { left: 20px; }
    .history-title .large-cta { margin-left: -2vw; }
    .timeline-item .caption { font-size: 1em; }
    .history-container.flex, .history-section:nth-child(even) .history-container.flex { padding-left: 20px; }
    .history-container.flex>* { padding-left: 30px; }
    .timeline-item .date:before,
    .history-section:nth-child(even) .timeline-item .date:before { width: 20px; left: -30px; }

    /* Releases */
    #section.releases { padding: 20px 0; }
    .releases-listing .releases-grid-item { flex: 1 0 100%; width: 100%; max-width: 100%; padding: 0; margin-bottom: 5vw;}
    .releases-listing .releases-grid-item img { max-width: 350px; }
    .releases-detail .album-image { padding-right: 0; }

    /* Socials */
    .socials-section { padding: 25px 0; }
    .socials-section .artist-socials h4 { font-size: 1.2em; }
    .socials-section .social-links a { font-size: 0.8em; }
}

@media only screen and (max-width: 420px) {
    header#masthead .flex .site-branding img { max-width: 255px; margin: 8px 0 0; }
    header#masthead nav.main-navigation.toggled li a { font-size: 1em; }
}