/*
Theme Name: Goldies Parade
Theme URI: https://goldiesparade.co.uk/
Author: Goldies Parade
Version: 5
*/

:root {
	--darkpurple: #5e3b81;
	--purple: #9370db;
	--yellow: #ffff64;
	--white: #fff;
	--offwhite: #d3d3d3;	
	--black: #000;
	--green: #00CEB6;
	--orange: #c60;	
	--red: #d31145;	
	--lightgrey: #aaa;
	--midgrey: #363636;
	--grey: #1a1a1a;
	--darkgrey: #272727;
	--outline: #555;
}

*:focus { outline: none; }

html { position: relative; min-height: 100%; scroll-behavior: smooth; }

body {
	color: var(--lightgrey);
	font-size: 12pt;
	font-family: 'Montserrat Alternates', Arial, sans-serif;
	margin-bottom: 86px;
	background: url('images/background.jpg') var(--darkgrey) no-repeat;
	background-position: bottom;
	background-attachment: fixed;
	background-size: cover;
}

::selection { background: var(--darkpurple); color: var(--offwhite); }

#middle { margin: 80px auto 0 auto; text-align: center; width: 1024px; border: 1px var(--outline) solid; border-top-left-radius: 10px; border-bottom: 0;  border-top-right-radius: 10px; background: rgba(26,26,26,.98); margin-bottom: 800px; }

#container { position: relative; border-bottom: 6px solid var(--darkpurple); }

#block { padding: 165px 10px 0 220px; left: 200px; min-height: 980px; }

#top {
	position: absolute;
	height: 120px;
	width: 200px;
	top: 0;
	left: 0;
	border-top-left-radius: 10px;
	background: url('images/top.jpg') no-repeat;
}

.concert { width: 65px; height: 13px; position: relative; top: 2px; left: auto; float: right; }
.right { float: right; }

.formats { list-style: none; display: flex; padding: 0; margin: 0; }
.cassette { background: url('images/cassette.svg'); width: 25px; height: 20px; margin-right: 8px; }
.cdformat { background: url('images/cd.svg'); width: 20px; height: 20px; margin-right: 8px; }
.vinyl { background: url('images/record.svg'); width: 20px; height: 20px; margin-right: 8px; }
.mp3 { background: url('images/mp3.svg'); width: 20px; height: 20px; margin-right: 8px; }
.dvd { background: url('images/dvd.svg'); width: 30px; height: 18px; margin-right: 8px; }
.vhs { background: url('images/vhs.svg'); width: 30px; height: 20px; margin-right: 8px; }
.bluray { background: url('images/bluray.svg'); width: 30px; height: 18px; margin-right: 8px; }
.tv { background: url('images/tv.svg'); width: 30px; height: 20px; margin-right: 8px; }

.rating { width: 97px; height: 17px; position: relative; top: -15px; left: auto; margin-bottom: -15px; }
.rating[data-rating='0'] 	{ background: url('images/sprite.png') 0 58px; width: 97px; }
.rating[data-rating='1'] 	{ background: url('images/sprite.png') 0 77px; width: 97px; }
.rating[data-rating='1.5']	{ background: url('images/sprite.png') 0 96px; width: 97px; }
.rating[data-rating='2'] 	{ background: url('images/sprite.png') 0 115px; width: 97px; }
.rating[data-rating='2.5'] 	{ background: url('images/sprite.png') 0 134px; width: 97px; }
.rating[data-rating='3'] 	{ background: url('images/sprite.png') 0 153px; width: 97px; }
.rating[data-rating='3.5'] 	{ background: url('images/sprite.png') 0 172px; width: 97px; }
.rating[data-rating='4'] 	{ background: url('images/sprite.png') 0 192px; width: 97px; }
.rating[data-rating='4.5'] 	{ background: url('images/sprite.png') 0 211px; width: 97px; }
.rating[data-rating='5'] 	{ background: url('images/sprite.png') 0 230px; width: 97px; }

.sbtn.s-whatsapp { display: none; }

#banner {
	position: absolute;
	height: 120px;
	width: 824px;
	top: 0;
	left: 200px;
	border-top-right-radius: 10px;
	background: url('images/banner.jpg') no-repeat;	
}

#bannerimg { border-top-right-radius: 10px; }

.posttop { position: relative; margin-top: 20px; }
.postimg {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	animation: animatedBackground 16s linear 1;
}

	@keyframes animatedBackground {
		0% 		{ background-position: center top; }
		50% 	{ background-position: center bottom; }
		100% 	{ background-position: center top; }
	}

.postimg::before { content: ""; background: rgba(0, 0, 0, 0.8); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; }
.postmeta { position: relative; padding: 10% 8%; margin-bottom: 40px; z-index: 20; display: flex; flex-direction: column; }
.postmeta time { font-size: 20px; font-weight: 300; color: var(--white); letter-spacing: 1px; text-align: left; margin-left: 0; }
.postmeta .cat6 { margin-bottom: 30px; text-align: left; }

.postmeta .tag { text-align: left; font-size: 80%; text-transform: uppercase; margin-top: 1rem; color: var(--white); letter-spacing: 1px; }
.postmeta .tag::before {
	content: '';
	position: relative;
	top: -6px;
	width: 2rem;
	background-color: var(--purple);
	height: 3px;
	display: block;
	left: 0;
}

#recent-posts-3 { background: var(--grey); border-top-right-radius: 25px; }
.recentnews .click { padding: 10px 10px 30px 10px; text-align: left; background-color: var(--darkgrey); }
.recentnews img, .links img { object-fit: cover; height: 200px; width: 100%; }
.textwidget { background-color: var(--darkgrey); }
.widget_recent_entries { margin-bottom: 16px; }
.textwidget p { padding: 0 10px !important; } 
	 
#side {
	position: absolute;
	width: 200px;
	left: 0;
	top: 120px;
	background: url('images/border_05.png') no-repeat;
	padding-top: 120px;
	float: left;
	height: calc(100% - 224px);
}
.sticky { position: sticky; top: 40px; float: left; }

.adsbygoogle{ margin: 0; }
.shares { text-align: left; }

.search { width: 50%; margin: 30px 0; }

body.home header, body.albums h2 { padding: 15px 0 0; clear: both; }

article h2, article h3 { width: 75%; clear: both; margin-top: 40px; }
.articleBody > ol { clear: both; }

.articleBody > p:first-child::first-letter {
    font-size: 7rem;
	margin-top: 8px;
	padding: 0 5px 5px 0;
    line-height: 4.5rem;
	color: var(--purple);
	float: left;
	font-family: 'Cormorant Garamond', Arial, serif;
	font-weight: 300;
}

.featuredimg { width: 75% !important; position: relative; }
.featuredimg img { max-height: 450px; width: 100%; object-fit: cover; object-position: left top; }
.featback { position: relative; }
.featcredit { transform: rotate(90deg);
	right: 10px;
	bottom: 0px;
	position: absolute;
	transform-origin: right;
	font-size: 80%;
	text-transform: uppercase;
}

.featcaption {
    background: var(--purple);
	color: var(--white);
    left: 0;
    bottom: 0;
    padding: 10px 40px 10px 20px;
    position: absolute;
    margin: 20px;
    font-size: 80% !important;
	max-width: 60%;
	text-transform: uppercase;
	text-align: left;
	line-height: 20px;
	box-shadow: 5px 5px var(--darkpurple);
}

.wp-block-separator { color: var(--purple); border-top-width: 0px; margin: 30px 0; }

#authorbio, .featback { background: var(--midgrey); color: var(--lightgrey); border-right: 3px solid var(--purple); margin: 40px 0; letter-spacing: 1px; clear: both; }

#authorbio { text-align: left; padding: 15px; }
#authorbio span { color: var(--offwhite); font-size: 120%; font-weight: 100; }
#authorbio p, #authorbio a { font-size: 90%; margin: 0; padding: 10px 0; width: 75%; }

.twitter a:link, .twitter a:visited { color: #00acee; letter-spacing: 1px; }
div.twitter:before { content: url('images/twitter.svg'); padding-right: 5px; }

.footernav {
	height: 87px;
	width: 1026px;
	font-size: 14px;
	text-transform: uppercase;
	position: fixed;
	bottom: 0;
	background: url('images/footer.png') no-repeat var(--black);
	margin-left: -1px;
	z-index: 99;
}

a.rss:link, a.rss:visited, a.rss:active { color: var(--orange); }
.rss:before { content: url('images/rss.png'); padding-right: 5px; }
a[target=_blank]:not(#orange):not(.sbtn):after { content: url('images/link.svg'); padding-left: 3px; }

del { color: var(--red); }

a:link, a:visited {
	color: var(--yellow);
	text-decoration: none;
	transition: 0.2s;
} 

p a, p a:visited, .recentnews span, time a, h3 a, h2 a, .links a, .twitter a, div.flash a, #performances a, a.shown {
	background-image: linear-gradient(var(--purple), var(--purple)), linear-gradient(transparent, transparent);
	background-size: 0% 1px, 100% 1px;
	background-position-y: 100%;
	background-position-x: 50%;
	background-repeat: no-repeat;
	transition: background-size 0.2s ease-in-out;
	text-decoration: none;
	padding-bottom: 2px;
}

p a:hover, .recentnews span:hover, time a:hover, h2 a:hover, h3 a:hover, dd a:hover, .links a:hover, .links .current-page-ancestor a, p a.selected, .current-menu-item a, .twitter a:hover, div.flash a:hover, a[aria-current="page"], #performances a:hover, a.shown:hover  { background-size: 100% 1px, 100% 1px; }

a:hover, .current-menu-item a, .links .current-page-ancestor a, a[aria-current="page"] {
	color: var(--white);
}

h1 {
	font-weight: 300;
	color: var(--offwhite);
	text-align: left;
	padding: 0;
	line-height: 110%;
	font-size: 250%;
	width: 80%;
}

h2 {
	font-weight: 300;
	color: var(--yellow);
	text-align: left;
	padding: 0;
	font-size: 150%;
	line-height: 120%;
} 

article h1 {
	color: var(--yellow);
	padding: 0;
	width: 100%;
	margin: 0 0 50px 0;
	font-size: 3vw;
} 

.articleBody p {
    line-height: 1.5em;
    font-size: large;
	margin-right: 25%;
}

h3 {
	font-weight: 300;
	color: var(--yellow);
	text-align: left;
	font-size: 115%; 
	line-height: 120%;
	margin-top: 30px;
} 

h3.widgettitle {
	font-weight: 600;
	font-size: 20px;
	color: var(--grey);
	line-height: 110%;
	box-sizing: border-box;
	height: 35px;
	text-transform: uppercase;
	padding: 17px 10px 0;
	margin: 5px 0 0;
	text-align: left;
	background-color: var(--purple);
	border-top-right-radius: 25px;
} 

p {
	padding: 0;
	text-align: left; 
}

p { line-height: 1.5em;}

body.home p { padding: 0 10px;}

ul {
	list-style: square;
	text-align: left;
	line-height: 1.5em;
}

ol {
	text-align: left;
	padding-left: 0;
}

ol em { padding-right: 8px; display: inline-block; }

ol li {
	padding: 8px 10px;
	counter-increment: list;
	list-style-type: none;
	position: relative;
}

ol li::before {
    content: counter(list) ".";
    left: 5px;
    position: absolute;
    text-align: right;
    width: 26px;
	font-size: 80%;
	margin-top: 2px;	
}

dl {
	text-align: left;
	margin: 35px 0;
}

dl.band, .provider { margin-top: -15px; }
dl.running { margin-top: 0; margin-bottom: 50px; }

dl dt {
    color: var(--yellow);
	float: left;
    padding: 2px; 
    width: 150px;
	clear: both;
}
 
dd {
    margin-left: 152px;
    padding: 2px;
}

p > em { color: var(--offwhite); letter-spacing: 1px; }

.topstory { font-size: 130%; line-height: 140%; }

.flash { color: var(--white); background: repeating-linear-gradient(-65deg, #d7373f,#d7373f 1rem,#a11219 0,#a11219 2rem) !important; border-left: 0 !important; letter-spacing: 1px; padding: 8px; }
.flash span { padding: 10px; background-color: var(--grey); margin: 0; display: inherit; text-align: left; }
.flash a { margin-top: 10px; display: inline-block; }
li.flash { width: 100%; }
li.flash span { margin: 4px 0; }
li.flash a { left: -5px; position: relative; }

blockquote {
  color: var(--offwhite);
  margin: 15px;
  padding: 10px;
  quotes: "\201C""\201D""\201C""\201D";
  width: 33%;
  float: left;
  border-left: 3px solid;
  text-align: left;
}

cite {
	display: block;
	margin-top: 15px;
	font-style: italic;
	font-weight: 300;
	letter-spacing: 1px;
	font-size: 100%;
}

.articleBody blockquote { float: unset; width: auto; }

blockquote:before {
  content: open-quote;
  font-size: 7em;
  line-height: 0em;
  margin-right: 0.15em;
  vertical-align: -0.36em;  
  font-family: 'Cormorant Garamond', Arial, serif;
}

blockquote > p {
  display: inline;
  font-size: 30px !important;
  line-height: 31px !important;
  font-family: 'Cormorant Garamond', Arial, serif;
}

body.albums h1, .large {
	font-size: 200%;
	color: var(--yellow);
	margin: 0;
	padding: 10px 0;
}

.large  { margin-bottom: 12px; }

.counter { font-size: 200%; }

body.albums .discwrapper li { line-height: 150%; }

img, #svgsymbol {
	vertical-align: text-top;
	border: none;
	max-width: 100%;
	height: auto;
	width: auto;
}

sup {
	color: var(--yellow);
	font-size: 11px;
	font-weight: 100;
	line-height: 0;
}

.spanorange { color: var(--yellow); }

.spanwhite { color: var(--offwhite); }

.excerpt { color: var(--lightgrey); font-size: 10pt; display: block; padding: 10px 0; }

/* Album link hover preview */
.preview { position: relative; z-index: 1; }                                    
	
.shown div {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.9);
	height: 120px;
	width: 315px; 
	opacity: 0;
	color: var(--offwhite);
	text-decoration: none;
	margin-top: -142px;
	left: 0;
	transform: scaleY(0);
	overflow: hidden;
	transition: transform .4s, opacity 0.2s ease-in-out;
	border-right: var(--purple) 5px solid;
	box-sizing: border-box;
	display: flex;
	align-items: center; 
}

.shown:hover div { opacity: 1; transform: scaleY(1); }
.shown div > span { font-size: 20px; margin: 0 8px; word-wrap: anywhere;  }
.shown div > span > span { font-size: 65%; display: block; }
				
.shown div img {
		margin: 0;
		width: auto;
		height: 100%;
		max-height: 120px;
		float: left;
}

article.wrap {
	height: 250px;
	display: flex;
	margin-bottom: 30px;
	background-color: var(--darkgrey);
}

article.wrap:after { border-right: 4px var(--purple) solid; height: 0; transition: height 0.4s ease-in-out; }
article.wrap.latest:after { border-right: 4px var(--red) solid; }
article.wrap:hover:after { height: 100%; }

article .txt { margin: 20px; }
article .txt h2 { margin-top: 0; }

article.wrap .txt > p {
	opacity: 1;
	transform: translateY(-90px);
	transition: transform .4s, opacity 0.2s ease-in-out;
}

article.wrap .txt div {
	opacity: 0;
	transform: translateY(40px);
	transition: transform .4s, opacity 0.2s ease-in-out;
	letter-spacing: 1px;
}

article.wrap .shares { margin: -18px 0 5px; }

article.wrap:hover .txt > p { opacity: 0; transform: translateY(0px); }
article.wrap:hover .txt div { opacity: 1; transform: translateY(5px); }
article.wrap .button { width: max-content; font-size: 80%; padding: 10px 20px; }

article.wrap img {
    width:  250px;
    height: 100%;
    object-fit: cover;
	max-width: unset;
}

.tagwrapper img {
	width: 300px;
    object-fit: cover;
	max-width: unset;
}

.tagwrapper { clear: both; display: flex; background: var(--darkgrey); margin: 40px 0; }
.tagtextwrap { display: flex; align-items: center; padding: 25px; }
.tagtextwrap p:last-of-type { margin-bottom: 0; }

.breadcrumb, .bread { font-size: 80%; margin-top: 30px; }
.breadcrumb_last { color: var(--white); font-size: 100%; font-weight: 300; letter-spacing: 0; }

time { display: block; color: var(--offwhite); font-size: 80%; text-align: left; margin: -10px 0 20px 0; }

.pagination { margin: 40px 0 60px; }  
.page-numbers { background: var(--midgrey); padding: .75rem 1.5rem; margin: -3px; }
.page-numbers:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.page-numbers:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.page-numbers:hover, .current { background: var(--purple); color: var(--white); }

.nextpost { float: left; border-left: 4px solid var(--purple); padding-left: 8px; box-sizing: border-box; }
.prevpost { float: right; text-align: right; border-right: 4px solid var(--purple); padding-right: 8px; box-sizing: border-box; }

.next, .prev { color: var(--lightgrey) !important; }
.next:hover, .prev:hover { color: var(--white) !important; }

p.searchcat { padding-left: 6px; border-left: 3px solid var(--purple); }

body.home time { display: inline; color: var(--offwhite); font-size: 120%; }

.date-news { color: var(--offwhite); font-size: 70%; margin: -1px 0 0 5px; }
a[rel~="tag"] { text-transform: uppercase; letter-spacing: 1px; }
.recent { margin: 0;  }

body.discography .discwrapper strong {
	color: var(--offwhite);
	margin-top: -10px;
	font-size: 11pt;
	font-weight: 300;
	letter-spacing: 0;
}

.links {
	text-align: center;
	padding: 10px 20%;
	margin: auto;
	clear: both;
	border-top: var(--outline) 1px solid;	
}

.links { margin-top: 40px; margin-bottom: 40px; clear: both; border-top: var(--outline) 1px solid; padding: 0 10%; }
.links ul { list-style: none; text-align: center; padding: 0; }
.links li { display: inline-block; }
.links li:not(:last-child):after { content: ' | '; }
.links.inpage { border-bottom: 1px solid var(--outline); border-top: 0; }

.articles { width: 45%; }

.box {
	font-size: 70%;
	margin-top: 13px;
	padding: 0 10px;
	border: var(--outline) 1px solid;
	border-radius: 5px;
	width: auto;
}

figure {
	margin: 4px 20px 40px 0;
	float: left;
	width: 300px;
}

.aligncenter {
    float: unset;
    width: auto;
    display: flex;
    flex-direction: column;
}

figcaption, .caption {
	background: var(--midgrey);
	color: var(--offwhite);
	font-size: 80%;
	padding: 10px 0;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: 1px;
}

figcaption strong { text-transform: uppercase; }

.absolute-text {
	position: absolute;
	color: var(--offwhite);
	bottom: 4px;
	left: 4px;
	background-color: var(--orange);
	padding: 10px 15px;
	margin: 0;
	text-align: center;
	z-index: 1;
	transform: scale(1);
	opacity: 1;
	transition: transform .5s, opacity 0.2s ease-in-out;
}

.relative:hover .absolute-text { transform: scale(0); opacity: 0; }

.relative { position: relative; font-size: 130%; }

.shadow { box-shadow: 0 12px 6px -6px var(--black); margin-bottom: 20px; }

body.albums .cover img { width: 100%; height: auto; }
body.discography .cover img, #grid img, .result img { width: 200px; height: 100%; min-height: 200px; object-fit: cover; }
body.reviews .cover img { width: 240px !important; height: 240px; object-fit: cover; }
body.albums .cover { width: 143px; }

.left {
	float: left;
	margin-right: 2.5px;
	text-align: left;
}

a.cd {
	float: left;	
	border: 1px solid var(--yellow);
	text-align: left;
	padding: 3px;
	border-radius: 6px;	
}

.round { border-radius: 50% !important; }
.unlinked { padding-top: 8px; padding-bottom: 10px; }

a.cd:hover { border: 4px solid var(--orange); padding: 0; }
a.cd img { transition: 0.3s ease; }
a.cd img:hover { transition: 0.3s ease; transform: scale(1.2) rotate(8deg); }

a.button, #searchsubmit {
   width: auto;
   display: block;
   text-align: center;
   border-radius: 8px;
   color: var(--white) !important;
   background: var(--purple);
   font-size: 80%;
   height: auto;
   line-height: 120%;
   padding: 8px;
   font-weight: 600;
   border: 1px solid var(--purple);
   text-decoration: none;
}

a.newrels { width: 139px;  }

input { -webkit-appearance: none; }

a#orange { background: var(--orange); border: 1px solid var(--orange); }

#searchsubmit {
	height: 42px;
	font-family: inherit;
	display: inline;
	vertical-align: bottom;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -4px;
}

span .button { margin-top: 10px;}
	
a.button:hover, a.button:active, #searchsubmit:hover, a#orange:hover { background-color: transparent; cursor: pointer; transition: 0.3s linear; border-radius: 0; }

.searchform #s {
	height: 42px;
	width: 75%;
	font-size: 16px;
	font-family: inherit;
	box-sizing: border-box;
	background: var(--darkpurple);
	border: 2px solid var(--purple);
}

.searchform #s:hover { border-color: var(--white); }
input:focus{ outline: none; }
#searchform input, .result { color: var(--white); text-transform: capitalize; }

.searchform {
	text-align: left;
	margin: 20px 10px;
}
 
#navfooter {
 	width: 824px;
	margin: 0;
	padding: 0;
}

#navfooter {
	position: absolute;
	left: 205px;
	top: 10px;
}

#navfooter li {
	list-style: none;
	float: left;
}
 
#navfooter li a { 
	display: block;
	padding: 5px 0;
	border-radius: 8px;
	margin: 1px;
	text-decoration: none; 
	color: var(--white);
	width: 158px;
	text-align: center;
	background: var(--darkpurple);
	border: var(--black) 2px solid;
	letter-spacing: 1px;
}

#navfooter li a:hover, #navfooter li a:active { background: transparent; color: var(--white); border: var(--white) 2px solid; border-radius: 0; transition: all 0.3s linear; }

#navfooter li ul, .symbol, .searchform .screen-reader-text { display: none; }

#navfooter li:hover ul, #navfooter li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	margin: 0;
	padding: 0;
}

#navfooter li:hover li a, #navfooter li.hover li a{ background: var(--orange); }

#navfooter li li a:hover { background: var(--black); color: var(--white); }

#tourslides {
	position: absolute;
	height: 99px;
	width: 373px;
	top: 0;
	left: 128px;
}

table {
    width: 100%;
    border-collapse: collapse;
	table-layout: fixed;
}

td {
	padding: 8px 5px;
	text-align: left;
	vertical-align: text-top;
}

li.encore { border-top: 2px solid var(--purple); }
li.piano { border-left: var(--green) 4px solid; }
li.piano::before { left: 1px; } 
ol li.piano:nth-child(n) { padding-left: 36px; }
.set { background-color: var(--green); font-size: small; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; width:fit-content; font-weight: 600; padding: 2px 15px; margin-top: -10px; }
 
th {
	font-weight: 600;
	color: var(--grey);
	background-color: var(--purple);
	text-align: left;
	padding: 5px;
	line-height: 180%;
	position: sticky;
	top: 0;
}

tr:nth-child(even), ol li:nth-child(odd) { background: var(--midgrey); }
tr:hover { background-color: var(--offwhite); color: var(--grey); }
tr:hover sup { color: var(--grey); }
tr:hover a:link, tr:hover a:visited { color: var(--purple); }

ol li:nth-child(n) { padding-left: 40px; }

.discwrapper:not(body.reviews .discwrapper) {
	margin-bottom: 40px;
	clear: both;
}

.cover {
	vertical-align: text-top;    
	margin-top: 15px;
	display: inline-block;
}

body.reviews .cover { margin-top: 25px; }

.cdtext {
	float: right;
	width: 500px;
	padding-right: 25px;
}

#grid .cdtext {
	width: 140px;
	height: 70px;
	clear: both;
	padding: 0;
}

#grid .gridtext { width: 220px; margin-bottom: 20px; }

#grid h2 {
	letter-spacing: 1px;
	text-align: center;
	font-size: 90%;
	margin: 0;
	padding: 0;
}

#grid .spanwhite {
	margin-top: 5px;
	font-size: 80%;
	text-align: center;
}

#grid {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: stretch;
}

#grid a.cd { margin: 5px; }

.single { width: 425px; }

strong { font-size: 108%; letter-spacing: 1px; }
h3 strong { font-weight: 300; }

body.albums .title, li .title, h1 .title { font-size: 110%; color: var(--offwhite); padding-right: 5px; }
li .title { display: inline-block; }
body.home a.title { font-size: 110%; padding: 0; }
body.albums li .segue { font-style: italic; padding-right: 8px; }

body.discography .discwrapper h3 a:link, body.discography .discwrapper h2 a:link, #grid title a:link, body.albums h3 a:link, body.albums h3 a:visited, body.discography .discwrapper h3 a:visited, body.discography .discwrapper h2 a:visited {	color: var(--purple); }

body.albums .discwrapper li:hover { position: relative; z-index: 10; }

body.discography .discwrapper h2 a:hover, body.discography .discwrapper h3 a:hover, body.discography .discwrapper a:active, body.albums h3 a:hover, .twitter a:hover { color: var(--offwhite); }

body.discography .discwrapper h2, .cdtext h3 {
	font-size: 150%;
	letter-spacing: 1px;
	color: var(--purple);
	margin: 10px 0 -12px;
}

.tagtextwrap h3 { color: var(--purple); font-size: 150%; font-weight: 100; letter-spacing: 1px; margin: 0 0 -8px; }

.review > h2, body.albums h1, .title { letter-spacing: 1px; }

.review {
	float: right;
	width: 450px;	
}

body.albums .review { width: 630px; }

.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after, .nextprev, #dates { clear: both; }

/* home page layouts and styles
----------------------------------------------------------------------------------*/
.headlineimg {
	width: 300px;
	height: 300px;
	margin-top: 7px;
	right: 20px;
	position: absolute;
	overflow: hidden;
  }

.over { position: relative; }

.hvrimg {
  display: block;
  height: 300px; 
  object-fit: cover;
  width: 100%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--purple);
  opacity: 0.96;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.over:hover .overlay { height: 100%; }

.ovrtext {
  color: var(--white);
  font-size: 150%;
  font-weight: 300;
  width: 80%;
  height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;  
  align-items: center;
}

.overlay a { 	
	padding: 8px 10%;
	border-radius: 8px;
	font-size: 70%;
	margin: 0 8%;
	color: var(--white);
	background: transparent;
	border: var(--white) 1px solid;
}

.overlay a:hover { background: var(--grey); border: var(--grey) 1px solid; }

.ovrtext > span { font-size: 55%; letter-spacing: 1px; text-transform: uppercase; }

.release p { overflow: auto; }
.show { border-left: 4px solid var(--purple); margin-left: 10px; box-sizing: border-box; }

body.home figure { margin-top: 20px; }

.headlines { min-height: 330px; }

.shows, .release, ul.headlines, a.cd, article { overflow: hidden; }

.headlines li {
	margin: 7px 15px 10px -35px;
	list-style-type: none;
	border-left: 4px var(--purple) solid;
	font-size: 110%;
	letter-spacing: 1px;
	line-height: 120%;
	left: 0;
	position: relative;
	clear: both;
	padding: 5px 10px;
	width: 430px;
}

.headlines .new, .update { background: var(--midgrey); }
.headlines .new, .show.new { border-left: 4px var(--red) solid !important; }

.new a:after { content: "NEW"; margin-left: 10px; color: var(--offwhite); }
.date-news a:after, .new a:hover:after { content: none; }

.new a:after{ animation: flashing 2s infinite; }
@keyframes flashing {
    0%	 { color: var(--offwhite); }
    49%  { color: var(--offwhite); }
    60%  { color: transparent; }
    99%  { color: transparent; }
    100% { color: var(--offwhite); }
}

.spotlight { float: right; margin: 20px; }
.currtour { position: relative; margin-bottom: 60px; }

.currtour > div:first-of-type, .spotlight > div:first-of-type {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.currtour > div:first-of-type { width: 100%; height: 450px; }
.spotlight > div:first-of-type { width: 250px; height: 250px; }

.caption {
	background: rgba(0, 0, 0, 0.8);	
	color: var(--white);
	position: absolute;
	box-shadow: 0 12px 6px -6px var(--black);
	font-weight: 100;	
	bottom: 0;
	width: 100%;
	font-size: inherit;
}

.swiper-wrapper .caption p { font-size: 25px; padding: 0 15px; text-align: left; line-height: 115%; }

.caption p { padding: 0 20px; text-align: center; }
.highlight { background-color: var(--purple); color: var(--grey); font-weight: 600; font-size: 75%; padding: 3px 5px; position: absolute; top: -15px; left: 5px; z-index: 0; text-transform: uppercase; }
.currtour .caption p { padding: 0 50px; font-size: 115%; text-align: left; width: 80%; line-height: 120%; }

#dates table { font-weight: 100; }
#dates table tr:not(:first-child) { border-bottom: 2px solid var(--purple); background: transparent; }
#dates table tr:hover { background-color: var(--offwhite); color: var(--grey); }
#dates table td:first-child { font-size: 135%; };

h2:first-of-type { padding: 0; }
body.reviews .discwrapper:nth-of-type(even) { background-color: var(--darkgrey); }
body.reviews .discwrapper { padding: 20px; }

.cat6 { color: var(--green); font-weight: 600; letter-spacing: 1px; display: block; }

.headlines a:link, .headlines a:visited {
	color: var(--yellow);
	padding: 5px;
	display: inline-block;
	font-weight: 300;
	text-decoration: none;
}

.headlines a:hover, .headlines a:active {
	color: var(--grey);
	background-color: var(--offwhite);
	border-radius: 4px;
	border-bottom: 0 !important;
	padding-bottom: 5px !important;
	transition: ease-in;
	transition-duration: 0.4s;
}

body.home h2, h4 {
	font-size: 30px;
	font-weight: 600;
	color: var(--grey);
	line-height: 110%;
	box-sizing: border-box;
	height: 40px;
	text-transform: uppercase;
	padding: 14px 10px 0 20px;
	margin: 20px 0 0;
	text-align: left;
	background: var(--purple) url("images/hsymbol.png") right top no-repeat;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

h5 { margin: 20px 0 0; }

.news h5 { font-family: 'Cormorant Garamond', Arial, serif; text-align: left; font-size: 200%; color: var(--white); font-weight: 100; }

.news a {
	border-radius: 0;
	color: var(--white) !important;
	background: transparent;
	font-size: 90%;
	padding: 10px 20px;
	font-weight: 600;
	border: 1px solid var(--purple);
	letter-spacing: 1px;
	float: left;
	margin: 10px 10px 25px 0;
 }
 .news a:hover { background: var(--purple); }

/* navigation bar
----------------------------------------------------------------------------------*/
nav {
	font-size: 18px;
	width: 824px;
	height: 54px;
	position: absolute;
	top: 120px;
	left: 200px;
	background: url('images/menu.jpg') no-repeat;
}

body.home nav { background: url('images/menu-home.jpg') no-repeat; }

nav > ul {
	padding: 0;
	display: flex;
	justify-content: space-evenly;
	line-height: unset;
}

nav li:hover:after { width: 100%;}

nav li:after {
    content: '';
    height: 2px;
    width: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid var(--purple);
    transition: width 0.6s ease-out;}

nav li { list-style: none; }

nav a:link, nav a:visited {	color: var(--white); transition-property: letter-spacing; }

nav a:hover { border-bottom: 0; color: var(--purple); letter-spacing: 2px; }
nav .current-menu-item a, nav .current-page-ancestor a { border-bottom: 2px var(--purple) solid; padding-bottom: 12px; color: var(--purple); }

nav #pull, figure p, #card span, .logotab { display: none; }

/* small desktop
----------------------------------------------------------------------------------*/
@media only screen and (max-width : 1058px) {

body, #top, #banner, .footernav { background: none var(--outline); }
#top, .footernav, #banner, #bannerimg, #tourslides, article .txt p { display: none; }
#block { margin-bottom: 0; border-bottom: 0; }

blockquote { width: auto; float: unset; margin-left: 0; margin-right: 0; border-left: 0; padding-left: 0; padding-right: 0; }
blockquote > p { font-size: 180%; line-height: 115%; }

#authorbio > p { width: auto; }

.postmeta .tag { margin-top: 4rem; }

.headlineimg { width: 100%; right: 0; position: relative; }
.headlines .new, .update { width: auto; }
.featuredimg { width: 80% !important; }

body { background: var(--grey); }

#side {
	float: left;
	width: 25%;
	left: 10px;
	top: 180px;
	bottom: 0;
	background: none;
	padding-top: 10px;
	height: auto;
}

#middle, #container {	
	width: auto;
	height: auto;
	margin-top: 0;
	margin-left: 0;
	position: static;
	top: auto;
	left: auto;
	border: 0;
}

#block {
	width: 70%;
	float: right;
	padding: 10px;
	min-height: 0;
	margin-bottom: 0;
}

.searchform { margin: 10px 0; }

.logotab {
	position: absolute;
	top: 18px;
	left: 8px;
	background: url('images/logo-320.svg');	
	width: 193px;
	height: 28px;
	background-repeat: no-repeat;
	display: unset;
}

 /* text
----------------------------------------------------------------------------------*/
h1 {
	color: var(--offwhite);	
	padding: 5px 0;
}

body.albums h1 { color: var(--yellow); }

p {
	line-height: 1.5em;
	text-align: left;
}

.breadcrumb, .bread, .box { font-size: 100%; margin-top: 6px; }
.provider { margin-top: -10px; }

.links { padding: 20px 0%; }

body.albums time { margin-top: -5px; }

figure { margin-right: 10px; }

a.button {
   color: var(--offwhite);
   text-decoration: none;
   font-size: 120%;
   padding: 10px 5px;
}

body.albums h1 { text-align: left; margin-top: 20px; }

#card { display: flex; flex-direction: column; align-items: center; padding: 30px; margin: 0 -50%; }
#card > span { color: var(--offwhite); font-size: 150%; display: unset; letter-spacing: 1px; font-weight: 100; }
#card span:last-child { color: var(--lightgrey); font-size: 85%; padding-top: 8px; }
#card img.big { width: 300px !important; }

.discwrapper { padding-top: 25px; }

.cover {
	margin-top: 15px;
	display: inline-block;
}

body.albums .cover, .cover img { width: 200px; }

.cdtext {
	float: left;
	width: 50%;
	padding-right: 0;
}

.cdtext strong, .links ul { font-size: large; line-height: 35px; }

.review h2, .title { letter-spacing: 1px; }

.review, body.albums .review, article .txt h2 { width: auto; }

/* home page layouts and styles
----------------------------------------------------------------------------------*/
.headlines li {
	padding: 8px 5px;
	margin-right: 5px;
	font-size: 140%;
}

body.home h1 { margin: 0; }

/* navigation bar
----------------------------------------------------------------------------------*/
nav, body.home nav {
	font-size: large;
	border-top: 5px var(--purple) solid;
	height: auto;
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 40px;
	background: none;
}

nav .current-menu-item a, nav .current-page-ancestor a { background-color: var(--purple); }
nav a:link, nav a:visited {	padding: 5px 0; margin: 0; transition: all .4s ease-in-out; }
nav li { line-height: 120%; }

nav a:hover, nav .current-menu-item a, nav .current-page-ancestor a { border-bottom: none; padding-bottom: 5px; }

nav > ul {
	margin: 0 auto;
	width: 100%;
}

nav a {
	display: inline-block;
	width: 80px;
	text-decoration: none;
	line-height: 30px;
}

nav a:hover, nav a:active, nav .current-menu-item a, nav .current-page-ancestor a { color: var(--grey); background: var(--purple); }

nav > ul {
	height: auto;
	flex-wrap: wrap;
	border-bottom: 5px var(--purple) solid;
}

nav li {
	width: 50%;
	float: left;
	position: relative;
}

nav a {
 	text-align: left;
 	width: 100%;
 	text-indent: 10px;
}

/* Nav Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after { clear: both; }

article h1 { font-size: 4vw; } 
article p { overflow: visible;}

.discwrapper .sticky { position: static; float: none; }

.spotlight { float: unset; margin: 0; }
.spotlight > div:first-of-type { width: 100%; }

}


/* tablet
----------------------------------------------------------------------------------*/

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

.box p { text-align: center; font-size: 110%; }

body.home h2, h4, body.home h4 { margin: 20px -18px 0; border-radius: 0; }

#block, a.newrels, .review { width: auto; }

#side { display: none; }

article h1 { font-size: 5vw; }
article .txt h2 { width: 85%; }

body.home p, .links { padding: 5px 0;}
.show { padding-left: 10px !important; margin-left: 0; }

.discwrapper, .search { width: 100%; }

.sticky .button { margin: 15px 0; }

#card { background-color: var(--midgrey); margin: 0 -50%; }

.currtour .caption p { padding: 0 10px; width: auto; }

}

/* mobile
----------------------------------------------------------------------------------*/

@media screen and (max-width: 680px) {
	
#block { padding: 0 0 60px 0; left: 0; float: none; position: absolute; width: 100%; }

body.reviews .discwrapper { padding: 20px 0; }

article h1 { font-size: 40px; }
.postmeta { padding: 15% 4%; border-bottom: var(--purple) 5px solid; }
.articleBody { margin-top: 80px; }
.articleBody p { margin-right: 10%;  }
.featuredimg { width: 100% !important; }
.featuredimg img { max-height: unset; }
.featback { padding: 0; background-color: transparent; border: 0; margin-bottom: 60px; }
.featcredit { transform: unset; bottom: -20px; }

.sbtn.s-whatsapp { display: inline-block; }

article.wrap {
	height: auto;
	flex-direction: column;
	margin-bottom: 0;
	background-color: transparent;
	border-right: none;
}

article.wrap:not(:first-of-type) { border-top: 4px var(--purple) solid; }
article.wrap img { height: 0; transition: height 0.4s ease-in-out; }
article.wrap img:hover { height: 300px; }
article.wrap img {
    width:  100%;
    height: 250px;
    object-fit: cover;
	max-width: unset;
}

.tagwrapper { flex-direction: column; border-bottom: 3px solid var(--purple); }
.tagwrapper img { width: 100%; max-height: 300px; }
.tagtextwrap h3 { margin-left: 10px; }

.links {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;	
	background: var(--grey);
	z-index: 99;
	margin-bottom: unset;
	border-top: var(--purple) 2px solid;		
}

.links:not(.inpage) { bottom: 0; position: fixed; }

.links.inpage { border: none; }

.links.years { position: unset !important; border-top: 0 !important; }

.links > ul { flex: 0 0 auto; margin: 0 0; }

.links li:not(:last-child):after { content: none; }

.links li {
	text-align: center;
	border-radius: 50px;
	background: transparent;
	font-size: 80%;
	height: auto;
	line-height: 120%;
	padding: 10px 18px;
	margin: 5px;
	font-weight: 600;
	border: 1px solid var(--purple) !important;
 }

 .links li:hover, .links .current-page-ancestor, .links .current-menu-item { background: var(--purple); color: var(--white); }
 .links li a:hover, .links .current-page-ancestor a, .links .current-menu-item a { border: 0 !important; }

 body.albums .set { margin-left: 0; }

.breadcrumb, .bread { font-size: 120%; margin-top: 15px; }

#card { margin: auto; }
.page-numbers { padding: .75rem .75rem; }

h1, body.home h1, body.albums h1, h2, body.albums h2, h3, .cdtext h3, p, blockquote, dl, .rating, body.discography .discwrapper h2, .shares, a.newrels, time { margin-left: 10px; margin-right: 10px; }

body.home h2, h4, body.home h4, article .news { margin: 20px 0; padding: 14px 10px 0 10px; }

h2:target:before { 
  display: block; 
  content: " "; 
  margin-top: -30px; 
  height: 100px; 
  visibility: hidden; 
}

.articles, .headlines li { width: auto; background: var(--midgrey); padding: 10px; }
.articles { float: unset; margin: 10px 0; }

.show { text-align: center; border-left: 0; }
	
#middle { margin-top: 70px; margin-bottom: auto; }

h1, article h2, body.albums .cover img  { width: auto; }
body.albums .cover { width: 90%; }
.cdtext { width: 100%; }

.searchform #s { width: 90%; margin-left: 10px; }

nav, body.home nav { margin-top: 0; position: fixed; background: var(--grey); z-index: 99; border-bottom: 2px var(--purple) solid; border-top: 0; }

nav ul, .logotab {
	display: none;	
	height: auto;
	border-bottom: 0;
}

table {
	width: 100%;
	margin: 0;
	border-bottom: var(--purple) 1px solid;
}

nav a {
	text-align: center;
	font-size: 120%;
	text-indent: 0;	
	line-height: 50px;
}

td, th { display: block; width: auto; padding: 2%; }
tr td:first-child { padding-top: 30px; font-size: 135%; font-weight: 100; }
tr td:last-child { padding-bottom: 30px; }
td, th { padding: 5px 30px; }

nav a:hover { color: var(--white); background: var(--grey); }
nav a:active, nav .current-menu-item a, nav .current-page-ancestor a { color: var(--grey); background: var(--purple); }

nav #pull {
	display: block;
	cursor: pointer;
	background: none;
	color: var(--white);
	margin: 10px 20px 10px 0;
	position: relative;
	width: auto;
	float: right;
}

blockquote::before { margin-right: 0; }

#pull::before {
	content: url('images/logo-320.svg');
    float: left;
    margin: 10px 0 0 -210px;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--white);
    margin: 6px 0;
    transition: 0.4s;	
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.shares { text-align: right; }

figure, p iframe {
	float: unset;
	display: block;
	margin: 15px auto;
}

dl dt {
	float: none;
    padding: 2px; 
    width: auto;
	margin-top: 8px;
}

dd {
    margin-left: 0;
	padding: 2px;
}

.shown:focus div { visibility: visible; display: flex; align-items: center; }

article.wrap .txt div, .noheader, body.reviews .spotlight { display: none !important; }

}

@media only screen and (max-width : 384px) {
nav li { width: 100%; }

body.home h2, h4, body.home h4 { background-image: none; text-align: right; }

#grid .cdtext { margin: 0; width: 100%; }

#grid h2 { font-size: 120%; }

.cover, body.albums .cover { padding: 0; }
#card img.big { width: 250px !important; }

#grid img { width: 200px; height: 200px; }

.cover a.cd {
	margin: 0;
	float: none;
	display: inline-block;
}

figure { float: none; margin: 15px auto; }

}

/* Instant Search Suggest iss */
html { overflow-y: scroll;}

.iss_results {
	background: var(--darkgrey);
	display: none;
	min-width: 250px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10000;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
	box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
}

.iss_results li {
	padding: 8px 10px;
	text-align: left;
	word-wrap: break-word;
}

.iss_over {
	background: var(--purple);
	cursor: pointer;
}

.iss_results li:last-child, .iss_reuslts li.ac_over:last-child 	{
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-top-right-radius: 0;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 0;
}

.iss_match {
	font-weight: 600;
	color: var(--white);
}
	
.iss_results li.iss-result {
	overflow: hidden;
	line-height: 1.2em;
	color: var(--yellow);
}
	
span.iss-sub {
	display: block;
	color: var(--lightgrey);
	font-size: 10px;
	line-height: 1em;
}

.iss_results li img {
	float: left;
	margin-right: 10px;
}

.iss_results li.iss-more {
	text-align: center;
	background: var(--purple);
	color: var(--white);
	padding: 5px;
}

.iss-on {
	background-repeat: no-repeat !important;
	background-position: 98.5% center !important;
}


/* animations */
.animated, .bounce {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  .fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
  }

  .attention:hover {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
  }
  
  @keyframes shake {
	10%, 90% {
	  transform: translate3d(-1px, 0, 0);
	}
	
	20%, 80% {
	  transform: translate3d(2px, 0, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(-4px, 0, 0);
	}
  
	40%, 60% {
	  transform: translate3d(4px, 0, 0);
	}
  }

/* social shares */
.social-btn { display: block; width: 100%; }
a.sbtn span { display: none; }
a.sbtn {
    display: inline-block;
    text-align: center;
    padding-top: 10px;
    margin: 0 4px 14px 0;
	height: 50px;
	min-width: 50px;
	transition: transform .2s ease-in-out;
	transform: translateY(2px);
	box-sizing: border-box;
}

article.wrap a.sbtn { height: 42px; min-width: 42px; padding-top: 6px; }

a.sbtn:hover { transform: translateY(0px); border-bottom: 3px solid var(--purple); }

.s-twitter { background: #00acee; }
.s-twitter::before { content: url('images/share-twitter.svg'); }

.s-facebook { background: #3b5998; }
.s-facebook::before { content: url('images/share-facebook.svg'); }

.s-whatsapp { background: #25D366; }
.s-whatsapp::before { content: url('images/share-whatsapp.svg'); }