/* peralta-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Peralta';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/peralta-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--item-w: 12em;
}
*,*:before,*:after {
	box-sizing: border-box;
}
html,
body {
	margin: 0; padding: 0;
	padding-bottom: 40%;
}
body {
	font-family: sans-serif;
	/*background-color: #550527;*/
	background-color: #220210;
	color: #f44708;
	padding: 2rem 0;
	font-size: 1em;
	line-height: 1.4em;
	background-image: url(/assets/img/corduroy-small.png);
	background-size: 20%;
	background-position: center bottom;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
h1,h2,h3 {
	/*font-family:Georgia, Times, serif;*/
	color: #f44708;
}

h1,
.section-heading,
.cta h2 {
	color: inherit;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: normal;
}
.section-heading,
.cta h2 {
	font-family:'Peralta', Georgia, Times, serif;
	display: block;
	text-align: center;
}
.section-heading {
	color: #48A8E0;
	font-size: 1.8em;
	line-height: 1.15;
}
@media screen and ( min-width: 45em ) {
	.section-heading {
		font-size: 2.5em;
	}
}
a {
	color: #a10702;
}
img {
	max-width: 100%;
	height: auto;
}
.page > header,
.page > nav,
.page > main,
.page > footer {
	width: 90%;
	max-width: 75em;
	margin-left: auto;
	margin-right: auto;
}
/*
.page > header {
	padding: 1rem 2rem;
	color: #faa613;
	text-align: center;
}*/
.page > header > a {
	text-decoration: none;
}
.page > header > a > h1 {
	font-family: sans-serif;
	color:  #f44708;
}

.page > main {
	padding: 1rem 2rem;
	background-color: #faa613;
	background-color: #e8e8e8;
	color: #550527;
	border-bottom: 2rem solid #f44708;
}

.page > main > section + section {
	margin-top: 4rem;
}

.more-link {
	text-align: center;
}

.hero {
	/*width: 100%;*/
	/*background-color: #220210;*/
	/*width: 90%;
	max-width: 75em;
	margin-left: auto;
	margin-right: auto;*/
}
	.full-width > img {
		display: block;
		width: 100%;
		max-width: 75em;
		margin-left: auto;
		margin-right: auto;
	}
.cta {
	display: block;
	text-decoration: none;
	max-width: 17em;
	margin-left: auto;
	margin-right: auto;
	border-radius: 1.5rem;
	padding: 0.5rem;
	text-align: center;
	/*
	background-color: #B49255;
	border: 2px solid #B49255;
	*/
	background-color: #220210;
	border: 12px solid #F44708;

	color: #FFF;
	transform: rotate(-3deg) translateY(-2rem);
}

.page > footer {
	text-align: center;
	padding: 1rem 2rem;
	/*background-color: #550527;*/
	/*background-color: #220210;*/
	color:  #faa613;
}
.page > footer a {
	color: #f44708;
}
.page > footer > nav {
	margin-top: 2rem;
	font-size: 0.75em;
}
.meta-nav {
	margin: 0; padding: 0;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.meta-nav > li {
	margin: 0; padding: 0;
}
.meta-nav > li > a {
	text-decoration: none;
}

.topstick {
	position: sticky;
	top: 0;
	z-index: 10;
}
.main-nav {
	margin: 0; padding: 0;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;
	font-family: 'Peralta';
	font-weight: normal;
}
.main-nav > li {
	flex: 1 1 auto;
}
.main-nav > li > a {
	display: block;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	color: #550527;
	color: #fff;
	background-color: #f44708;
	text-transform: uppercase;

	letter-spacing: 0.08em;
	transition: all ease-in-out 0.3s;
}
.main-nav > li.shop > a {
	color: #fff;
	background-color: #2BA9E1;
}
.main-nav > li.gigs > a {
	color: #fff;
	background-color: #F9B234;
}
.main-nav > li.music > a {
	color: #fff;
	background-color: #BF1822;
}
.main-nav > li.active > a,
.main-nav > li > a:hover,
.main-nav > li > a:focus,
.main-nav > li > a:active {
	color: #fff;
	background-color: #C91F28;
	background-color: #000;
}

.hero {
	position: relative;
	margin: 0; padding: 0;
}
.hero img {
	width: 100%;
	height:auto;
	display: block;
}

.hero .swiper {
	--swiper-navigation-color: #A10703;
	--swiper-pagination-color: #FAA613;
	width: 100%;
	aspect-ratio: 16/9;
}
.hero .swiper-slide {
	margin: 0;
}
.hero .swiper-slide img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.hero .credits {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0.7rem 0.5rem;
	font-size: 0.75em;
	color: #fff;
	font-weight: normal;
	background-color: rgba(0,0,0,0.4);
}

	.hero .credits p {
		margin: 0; padding: 0;
	}
	.hero .credits a {
		color: currentColor;
	}

.promo-grid {
	background-color: rgba(255,255,255,0.3);
	padding: 1rem;
}

.promo-wrap {
	margin: 0 auto;
	padding: 0;
	display: block;
	width: 100%;
	max-width: 30em;
	display: flex;
	flex-flow: column;
}
.promo-img {
	max-width: 100%;
	height: auto;
	display: block;
	/*aspect-ratio: 3/4;*/
}
.promo-info {
	font-size: 0.85em;
	line-height: 1.5;
	margin-top: .5rem;
}

.promo-wrap h2 a {
	text-decoration: none;
}
.all .promo-wrap {
	position: relative;
}
.all .promo-wrap h2 > a::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}
.all .promo-wrap .promo-info {
	text-align: center;
	margin-top: 0;
}

.grid {
	--item-w:clamp(180px,33.3%,270px);
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fill,minmax(var(--item-w),1fr));
}
.shop-grid {
	--item-w:clamp(120px,25%,215px);
}
.gigs {
	--rotate: 0;
	--pin-color: hsl(0deg,90%,50%);
	--pin-y: -10px;
	--pin-x: 50%;
}
.gig {
	align-self: start;
	padding: 1rem;
	background-color: #f4f4f4;
	transform-origin: top center;
	transform: rotate( var(--rotate) );
	transition: all ease-in-out 0.3s;
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
	position: relative;
}
.gig::before {
	content: '';
	display: block;
	aspect-ratio: 1;
	background-color: var(--pin-color);
	border-radius: 999px;
	position: absolute;
	width: 7%;
	top: var(--pin-y);
	left: var(--pin-x);
	transform: translate(-50%, 5px);
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
	background-image: radial-gradient( circle at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,0.3));
}
.gig:hover,
.gig:focus,
.gig:focus-within,
.gig:target {
	transform: rotate(0);
	background-color: #fff;
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
	z-index: 5;
}
.gig__date {
	color: #a10702;
	margin-bottom: 0;
	margin-top: 0;
}
.gig__location {
	margin: 0;
	font-family:'Peralta', Georgia, Times, serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: normal;
	font-size: 1.1em;
	line-height: 1.2;
	hyphens: auto;
	word-break: break-word;
}

.members > dl {
	margin: 0; padding: 0;
}

.gallery {
	--rotate: 0;
}
.gallery > a {
	display: block;
	background-color: #fff;
	padding: 0.6rem;
	padding-bottom: 1.6rem;
	transform: rotate( var(--rotate) );
	box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.3);
}
.gallery > a:hover,
.gallery > a:focus,
.gallery > a:active {
	transform: rotate(0) translate(-1px,-2px);
	box-shadow: 6px 6px 4px 2px rgba(0,0,0,0.2);
	z-index: 5;
}
.shop-grid {
	--rotate: 0;
}
.shop-grid > a {
	background-color: #fff;
	padding: 0.6rem;
	padding-bottom: 1.6rem;
	transform: rotate( var(--rotate) );
	box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.3);
}
.shop-grid > a:hover,
.shop-grid > a:focus,
.shop-grid > a:active {
	transform: rotate(0) translate(-1px,-2px);
	box-shadow: 6px 6px 4px 2px rgba(0,0,0,0.2);
	z-index: 5;
}
.shop-grid > a > img {
	display: block;
}
@media screen and (min-width: 45em) {
	.members {
		--rotate: -3deg;
		display: flex;
		flex-flow: row;
		gap: 1rem;
	}
	.members > dl {
		flex-basis: 20%;
		padding: 1rem;
		background-color: rgba(255,255,255,0.4);
		transform: rotate( var(--rotate) );
	}
}

.members > dl > dt {
	margin: 0; padding: 0;
	font-weight: bold;
}
.members > dl > dd {
	margin: 0; padding: 0;
	font-size: 0.9em;
}
.setlist {
	margin: 0; padding: 0;
	list-style-type: none;
}
.setlist > li {
	margin: 0; padding: 0;
}
.setlist > li.inactive {
	opacity: 0.3;
}
.setlist__title {
	display: block;
}
.setlist__artist {
	font-size: 0.866em;
}
.setlist__artist:before {
	content: '(';
}
.setlist__artist:after {
	content: ')';
}
.exlist {
	opacity: 0.6;
}

/* sortable */
.target {
	padding: 1em;
	border: 1px dashed #a10702;
}
.sortable-chosen {
	background-color: #fff;
	padding: 0.25em !important;
	border: 1px dashed #a10702;
}
.sortable-ghost {
	background-color: rgba(255,255,255,0.5);
}

@media screen and (min-width: 65.15em) {
	.promo-grid.latest .promo-wrap:nth-of-type(4n) {
		display: none;
	}
}

.news-item {
	width: 90%;
	max-width: 40rem;
	margin: auto;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.news-item .section-heading {
	word-break: normal;
}
.news-item .gallery > a:hover,
.news-item .gallery > a:focus,
.news-item .gallery > a:active {
	transform: none;
	box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.3);
	z-index: 1;
}

/* flip card test */
 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  aspect-ratio: 3/4;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  -moz-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: rotateY(0deg);
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	aspect-ratio: 3/4;
}
.flip-card-front  img {
	width: 100%;
	height:100%;
	object-fit: cover;
}

/* Style the back side */
.flip-card-back {

  transform: rotateY(180deg);
}