/*
dark #6f533b
normal #875f46
light #d0a771
contrast: #fab72d
*/

/* great-vibes-regular - latin */


@font-face {
	font-family: 'Great Vibes';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/great-vibes-v14-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/great-vibes-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/great-vibes-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/great-vibes-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/great-vibes-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/great-vibes-v14-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
  }
  
  :root {
	--black-color: #35281c;
	/*--dark-color: #6f533b;*/
	--dark-color: #311d08;
	--dark-color-t: #6f533b80;
	--normal-color: #875f46;
	--light-color: #efbe7f;
	--white-color: #ffdfb5;
	--contrast-color: #fab72d;
	--red-color: #ff0000;
	--headline-color: var(--contrast-color);
	--text-dark: var(--black-color);
	--text-light: var(--white-color);
	--text-size: 3vw;
}

body {
	/*background-image: url('../res/wood-2.webp');*/
	/*background-image: url('../res/wooden_background_1920.webp');*/
	background-image: url('../res/wooden_background_800.webp');
	background-position: center;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	font-size: large;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	scroll-padding-top: 55px; 
}

.w3-container {
	padding: 0px;
	margin: 0px;
}

#big-container {
	overflow-y: scroll;
	scrollbar-width: auto;  /* Firefox */
	-ms-overflow-style: auto;  /* IE and Edge */
	height: 100vh;
	background-color: #ff000000;
	padding: 0px;
	max-width: 1024px;
	margin: auto;
}

#big-container::-webkit-scrollbar {
	display: none;
}

#big-container header {
	margin: 0px;
}

.widget {
	margin: 0px;
	padding: 0px;
}

.dark-widget {
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.95;
	margin: 0px;
	padding: 0px;
}

.lyrics-widget h2 {
	font-size: 1.5rem;
	line-height: 1.0;
}

.widget-header-small {
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	color: var(--headline-color);
	font-family: 'Great Vibes', normal;
	position: relative;
}
.darkbg {
	background-color: var(--dark-color);
}
.blackbg {
	background-color: var(--black-color);
}

.widget-header p, .widget-header-small p {
	margin: 0px;
	font-size: 2rem;
}

/* band widget */
.smallh1 h1 {
	font-size: .2rem;
	line-height: .2;
}

h1, h2 {
	font-family: 'Great Vibes', normal;
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	margin: 0px;
}
.widget-header-small h2 {
	font-size: 2.5rem;
	line-height: 2.0;
}

#home-widget h1 {
	font-size: 7rem;
}
#home-widget h1 {
	font-size: 5rem;
	font-family: 'Great Vibes', normal;
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	margin: 0px;
}


.band-widget, .lyrics-widget, .lyrics-viewer, .song-viewer, .contact-widget, .impressum-widget, .privacy-widget, .pastgigs {
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.85;
	/*border-radius: 1vh;*/
	margin: 0rem;
	padding: 0rem;
}

.lyrics-widget, .lyrics-viewer, .song-viewer {
	line-height: 1.5;
	position: relative;
	height: 100%;
}

.lyrics-viewer, .song-viewer {
	background-color: transparent;
}

.song-viewer {
	padding: 1rem 1rem 1rem 1rem;
}

#viewer-container .widget-header {
	position: relative;
}

.lyrics-widget a {
	text-decoration: none;
}
.lyrics-widget a:link, a:visited  {
	color: var(--text-light);
}
.lyrics-widget a:hover  {
	color: var(--contrast-color);
}

.lyrics-viewer, .song-viewer{
	opacity: 1.0;
}

.pastgigs {
	padding: 0rem;
}


/* images */
#imagelist {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
}

#imagelist img {
	/*display: block;*/
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	object-fit: cover;
	object-position: center;
}
#Images img.active {
	z-index: 3
}


/* event widget */

.event-widget {
	background-color: var(--light-color);
	text-align: center;
	border-bottom: 0.3rem solid var(--dark-color);
}
.event-widget .w3-row, .pastgigs .w3-row {
	margin-bottom: 1rem;
}
 
.event-date {
	color: var(--text-light);
	background-color: var(--dark-color);
	border-radius: 0.3rem;
	width: 6rem;
	margin: 1rem auto;
}

.event-name {
	margin: 1rem 0 0 0;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.event-name a {
	color: var(--text-dark);
	text-decoration: none;
}

.event-name a:link {
	text-decoration: underline;
}

.event-name h3 {
	font-size: large;
	font-weight: bold !important;
}

.event-location {
	margin: 0 0 1rem 0;
}

.event-time {
	margin: 2rem 0;
}

.event-status {
	margin: 0vw 0vw -2rem 0vw;
}

@media screen and (max-width: 600px) {
	.event-date {
		width: 9rem;
		margin: .5rem auto;
	}
	.event-name, .event-location, .event-time {
		margin: 0;
	}
}

.music-widget p {
	text-align: center;
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.75;
	padding: 1rem;
	margin: 0px;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.video {
	padding: 1rem;
	aspect-ratio: 16 / 9;
}

.music-widget iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*#news-widget, #band-widget, #lyrics-widget, #events-widget, #music-widget, #info-widget, #contact-widget {
	background-color: var(--dark-color-t);
}*/

.contact-widget {
	min-height: calc(100vh - 11.8rem);
}
.contact-widget p {
		float: right;
}

/*#Home, #News, #Band, #Events, #Music, #Info, #Contact {
	margin: 0px;
	padding: 0px;
	height: 500px;
	background-color: #ff6600ff;
}
#News{
	margin: 20px;
	padding: 0px;
	height: 500px;
	background-color: #ff660080;
}*/

#home-widget {
	/*background-color: #ff660080;*/
	padding: 10%;
	min-height: 90vh;
}

#home-widget p {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#description, #pre-description {
	font-family: 'Great Vibes', normal;
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	line-height: 0.75;
}

#pre-description {
	font-size: 2rem;
}
#description {
	padding-top: .5rem;	
	font-size: 2rem;
	line-height: 10rem;
}

.bandname, .bandname-prefix {
	font-size: 5rem;
	font-family: 'Great Vibes', normal;
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	line-height: 1.2;
	/*background-color: #66ff0080;*/
}

.bandname {
	font-size: 7rem;
}

.bandname-prefix {
	font-size: 3.5rem;
}

#home-widget h1 {font-size: 3.5rem;}
@media screen and (min-width: 600px) {

	#home-widget h1 {font-size: 4.5rem;}
	
	.bandname {
		font-size: 9rem;
	}
	.bandname-prefix {
		font-size: 4.5rem;
	}
	#description {
		font-size: 3rem;
		line-height: 15rem;
		padding-top: .75rem;	
	}
	#pre-description {
		font-size: 3rem;
	}
}

@media screen and (min-width: 1024px) {
	#home-widget h1 {font-size: 5.5rem;}
	.bandname {
		font-size: 11rem;
	}
	.bandname-prefix {
		font-size: 5.5rem;
	}
	
	#description {
		font-size: 4rem;
		line-height: 20rem;
		padding-top: 1rem;	
	}
	#pre-description {
		font-size: 4rem;
	}
}

#home-widget img {
	width: 100%;
	/*margin: 5% 0.5% 0.5%;
	padding: 2%;*/
	height: auto;
	/*opacity: 0.9;*/
	/*transform: rotate(25deg);*/
}

footer {
	margin: 0px;
	padding: 0px;
	background-color: var(--black-color);
}

#copyright {
	clear: both;
	background-color: var(--black-color);
	color: var(--text-light);
	padding: 0 0 40px 0;
	margin: 0px;
	margin-top: 3em;
	text-align: center;
	/*font-size: var(--text-size);*/
}

.button {
	background-color: darkgreen; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.75rem;
}

.sortbutton {
	top: 0;
	color:  var(--dark-color);
	background: var(--text-light);
	border: none;
	border-radius: 5px;
	padding: 0 0.5rem;
	margin: 0.25rem;
	transition: background .2s linear;
	font-size: 0.75rem;
}

#SortField {
	margin: 1rem;
	font-style: italic;
}

.messagebox {
	background-color: var(--light-color);
	padding: 1rem;
	border-radius: 1vh;
	opacity: 1.0;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.doorplate {
	height: 10rem;
	background-image: url("../res/doorplate.png");
	background-size: 100% 100%;
	margin: 3rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 400px) {
	.doorplate {
		width: 80%;
	}
}

@media screen and (min-width: 600px) {
	.messagebox {
		width: 60%;
		margin:auto;
	}
	.doorplate {
		width: 60%;
		height: 15rem;
	}
}
@media screen and (min-width: 1024px) {
	.messagebox {
		width: 60%;
		margin:auto;
	}
	.doorplate {
		width: 60%;
		height: 20rem;
	}
}

#myName {
	width: 8rem;
	height: 1.5rem
}

#rehearsals {
	display:block;
}
#rehearsals td {
	text-align: left;
	vertical-align: top;
}

.box {
	margin: auto;
	padding: 1rem;
	background-color: var(--light-color);
	border-color: var(--dark-color);
	border-width: 3px;
	border-style: solid;
	border-radius: .75rem;
	max-width: 300px;
}

#signupHeader {
	font-size: 2.5rem;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.box input {
	height: 3rem;
	margin: 0.5rem  auto;
    display: block;
}
.box button {
	margin: 0.5rem auto;
    display: block;
}

.boxlink {
	text-align: center;
}