@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@font-face {
	src: url(fonts/OpenSans-V.ttf);
	font-family: body;
}
@font-face {
	src: url(fonts/Bentosa.ttf);
	font-family: handwriting;
}

@font-face {
	src: url(fonts/themicons.woff);
	font-family: icons;
}
:root {
	--dark: #000;
	--darkExtra: #353538;
	--darkContrast: #017260;
	--light: #fff;
	--lightContrast: #499f92;
	--lightContrastSemiOpaque: hsla(171,37%,45%, .5);
	--comp: #ffa500;
}
* {
	box-sizing: border-box;
}
html {
	min-height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	font-family: body;
}
main {
    padding: 1em 1em 15em 1em;
    margin: 0 auto;
    width: 100%;
}
section {
	overflow: auto;
	width: 70%;
	margin: 0 auto;
	font-family: Arial, sans-serif;
}
section p {
	line-height: 1.8;
	margin: 1em 2em;
}
section ul {
	padding: 0;
}
ul {
	list-style-type: none;
}
#index header {
    background-image: url(images/darkhero2a.jpg);
}
#gigs header {
    background-image: url(images/darkhero3a.jpg);
}
#music header {
    background-image: url(images/darkhero4a.jpg);
}
#videos header {
    background-image: url(images/darkhero18.jpg);
}
#gallery header {
    background-image: url(images/darkhero15.jpg);
}
#contact header {
    background-image: url(images/darkhero19.jpg);
}
#credits header {
    background-image: url(images/darkhero20.jpg);
}
#success-email header {
    background-image: url(images/darkhero1.jpg);
    background-position: 0;
}
#error-email header {
    background-image: url(images/darkhero1.jpg);
    background-position: 0;
}
#events header {
    background-image: url(images/darkhero22.jpg);
}



@media only screen and (max-width: 1875px) {
	#gigs section {
		width: 70%;
	}
}
@media only screen and (max-width: 1510px) {
	nav li:not(.simple-audio-player li) {
		letter-spacing: initial;
	}
	#gigs section {
		width: 90%;
	}
}
@media only screen and (max-width: 1302px) {
	nav li:not(.simple-audio-player li) {
		min-width: initial;
	}
	.social {
		justify-content: flex-start;
	}
}
@media only screen and (max-width: 1230px) {
	.social a {
		margin-right: .5em;
	}
	.social a:last-of-type {
		margin-right: 0;
	}
	.simple-audio-player {
		width: 25%;
	}
	.social {
		justify-content: flex-end;
		padding-right: 70px;
	}
	section {
		width: 60%;
	}
	.gallery-lightbox div.gallery {
	    grid-template-columns: repeat(5, 1fr);
	}
}
@media only screen and (max-width: 1100px) {
	.simp-cover {
		display: none;
	}
	.simp-controls {
	    padding-top: 1em;
	    flex: 3.5;
	}
	.simp-info {
	    left: 11px;
	}
	.simp-title {
		margin-left: .5em;
		font-size: .8rem;
	}
	nav ul:not(.simple-audio-player ul) {
		align-items: center;
	}
	nav ul a {
		padding: 0;
	}
	section {
		width: 70%;
	}
	#gigs .date {
	    width: 17%;
	}
	.gallery-lightbox div.gallery {
	    grid-template-columns: repeat(4, 1fr);
	}
	#contact form {
	    width: 95%;
	}
}
@media only screen and (max-width: 900px) {
	header {
		justify-content: center;
		align-items: flex-end;
		background-position: 80% 0;
	}
	nav {
		flex-direction: column;
		width: 0;
		overflow: hidden;
		transition: .3s;
	}
	#main-nav:target {
		width: 30%;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 0 110px 110px 0;
	}
	.social {
		order: 1;
		padding: 0;
		width: 100%;
		justify-content: center;
		margin-top: 3em;
	}
	nav ul {
		order: 2;
	}
	nav ul:not(.simple-audio-player ul) {
	    flex-direction: column;
	    align-items: flex-start;
	    margin-top: 1.5em;
	    width: 100%;
	}
	nav li:not(.simple-audio-player li) {
		width: 100%;
		margin-bottom: 1em;
	}
	nav ul a {
		padding: .5em;
	}
	#menubutton {
	    display: block;
	    position: absolute;
	    /* top: 0; */
	    left: 16px;
	    color: white;
	    z-index: 20;
	    font-size: 2rem;
	    text-decoration: none;
	}
	#menubutton span {
    font-size: 1.5rem;
	}
	#menubutton:has(+#main-nav:target) {
		display: none;
	}
	.simple-audio-player {
		flex: 3;
	}
	.simp-title {
		font-size: .7em;
	}
	.simp-display {
		flex: .5;
	}
	section {
		width: 80%;
	}
	#videos section p:nth-of-type(odd),
	#videos section p:nth-of-type(even) {
		float: none;
		width: 100%;
	}
	div.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
	.gallery-lightbox div.gallery {
	    grid-template-columns: repeat(3, 1fr);
	}
	#music section ul {
	    grid-template-columns: repeat(3, 1fr);
	}
	blockquote {
		width: 30%;
		margin-left: .5em;
	}
}
@media only screen and (max-width: 635px) {
	#videos section, 
	#index section,
	section {
		width: 90%;
	}
	section p {
		margin-left: 0;
		margin-right: 0;
	}
	#main-nav:target {
	    width: 50%;
	}
	blockquote p {
		margin-left: 1.3em;
	}
	.simple-audio-player {
	    flex: 2;
	}
	.simp-player {
		flex-direction: column;
		align-items: flex-start;
	}
	.simp-volume {
	    display: none;
	}
	.simp-title {
	    margin-left: 0.5em;
	}
	.stream ul {
		padding: 0;
		margin: 0;
	}
	.stream a {
		margin-right: 0;
	}
	#toggle {
		bottom: 78px;
	}
	#gigs .date,
	#gigs .venue {
		display: inline-block;
		width: 50%;
		border-bottom: none;
	}
	#gigs .tickets {
		display: block;
	}
	.gallery-lightbox div.gallery {
	    grid-template-columns: repeat(2, 1fr);
	}
	.hiddenbreak {
		display: block;
	}
	header {
		font-size: 15vw;
	}
	h1 {
		font-size: 4rem;
	}
	blockquote {
		width: 40%;
	}
}
@media only screen and (max-width: 615px) {
	.simple-audio-player {
		width: 50%;
	}
	#contact textarea {
		width: 99%;
	}
}
@media only screen and (max-width: 520px) {
	#videos section, 
	#index section,
	section {
		width: 97%;
	}
	#main-nav:target {
	    width: 60%;
	}
	div.gallery {
		grid-template-columns: repeat(1, 1fr);
	}
	#gallery-2 .gallery-prettyphoto {
		pointer-events: none;
		cursor: context-menu;
	}
	#music section ul {
	    grid-template-columns: repeat(2, 1fr);
	}
	.simp-time,
	.simp-tracker {
		display: none;
	}
	.simple-audio-player button {
	    width: 40px;
	    height: 40px;
	}
	.simple-audio-player .simp-shide-bottom {
	    margin-top: -40px;
	}
	blockquote,
	blockquote:nth-of-type(even) {
		float: none;
		width: 80%;
		border-top: 3px double var(--lightContrast);
		border-right: none;
		border-bottom: 3px double var(--lightContrast);
		border-left: none;
		background-color: initial;
	    margin: 0 auto;
	    box-shadow: initial;
	}

}
@media only screen and (max-width: 480px) {
	#videos section, 
	#index section,
	section {
		width: 98%;
	}
	main {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.simple-audio-player {
		width: 60%;
	}
	.simp-controls {
	    padding-top: 2em;
	}
	.simp-player:has(+.simp-hide) .simp-shide-bottom::before {
	    margin-top: 19px;
	}
	.simp-player:not(:has(+.simp-hide)) .simp-shide-bottom::before {
	    margin-top: 21px;
	}
	#gigs td {
		padding-top: .5em;
		padding-bottom: .5em;
	}
	#gigs .date,
	#gigs .venue {
		display: block;
		width: 100%;
	}
	#gigs .tickets {
		padding-bottom: 1.5em;
	}
	.gallery-lightbox div.gallery {
	    grid-template-columns: repeat(1, 1fr);
	}
	#music section ul {
	    grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 420px) {
	.credits {
		display: none;
	}
	nav .credits {
		display: block;
	}
}