:root {
	--bg-color: #111;
	--gold: #a6966a;
	--white: #fff;
	--font-color-gold: var(--gold);
	--font-color-white: var(--gold);
}



* {
	box-sizing: border-box;
	transition: all 150ms ease-out;

}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	padding: 0 0em;
	font: normal 1em Arial; 
	color: white; 
	background: var(--bg-color);
}

header {
	height: 50vh;
	display: flex;
	background-image: url('../img/turntable3.jpg');
	background-size: cover;
	background-position-y: center;
	background-position-x: right;
}

main {
	padding: 2em;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 2em 15%;
}

footer .small-band {
	background-color: var(--gold);
	padding: 0 15%;
	display: flex;
	gap: 1em;
	height: 2em;
	align-items: center;
	position: absolute;
	border: 0;
	width: 100%;
	left: 0;
}

footer .small-band span {
	color: var(--white);
}

footer .small-band a {
	color: var(--white);
}

footer .small-band a:hover {
	color: #000;
}

h1,h2,h3 { margin: 0; padding: 0; }

.closedBurgerView {
	display:none;
}

.navbar {
  overflow: hidden;
  background-color: #000;
  width: 100%;
  height: 80px;
  display:flex;
  flex-direction: row;
  align-items: center;
  padding:0 15%;
}

.us {
	text-align: center;
	padding: 1em;
}

.dropbtn, .navbar a {
	display: block;
	padding: 1em 2em;
	color: var(--font-color-white);
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
	text-decoration: none;
}

.dropdown {
	float: left;
	overflow: hidden;
}

.dropdown .dropbtn {
	  border: none;
	  outline: none;
	  background-color: inherit;
	  font-family: inherit;
	  margin: 0;
}
#logo {
	max-height: 80px;
	transform: translateX(-2em);
}

#logo:hover {
	background-color: unset;
}

.navbar a:hover, .dropdown:hover .dropbtn {
	color: #000;
	background-color: #a6966a;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #000;
	min-width: 160px;
	z-index: 1;
}

.dropdown-content a:hover {
	background-color: #a6966a;
}

.dropdown:hover .dropdown-content {
	display: block;
}


#burgerMenu {
	display: none;
}

#navigation{
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	background-color: black;
}

.dropdown-content { display: none; }

.dropdown-container:hover .dropdown-content {
	  display: flex;
	  flex-direction: column;
	  position: absolute;
	  background: black;
	  margin-top: 1.3em;
}


.artistSidebar { padding: 2em; padding-left: 7em;}
.navLinks a:hover, 
.navLinks a:focus, 
.navLinks a:active {
	background: #a6966a;
	color: black;
}



/* === Farben, Formen und Schriftgrößen === */
h1 {
	margin: 0;
	color: var(--font-color-gold);	
}

h2 {
	margin: 0;
	color: var(--font-color-white);	
}

h3 {
	margin: 0;
	color: var(--font-color-gold);	
}

	
a { 
	color: var(--font-color-white);	
	outline: none;
	text-decoration: none; 
}

a:hover, a:focus { 
	color: var(--white); 
	text-decoration: none;
}


/* ============== booking button auf artist seite =============== */	

.book { 
	display: inline-block;
	color: white;
	background: #a6966a;
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
	margin: 1em 0;
	padding: .5em;
	border: none;
}

.book:hover,
.book:focus	{ 
	color: black;
	background: #a6966a;
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
}

/* ============== download links artist page =============== */
	
a.links { 
	color: var(--font-color-white);
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
	line-height: 2;
}
a.links:hover,
a.links:focus	{ 
	color: var(--white);
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
}

.links i {
	padding-left: 15px;
}
/* ===============home: alle artists ============= */

.artists {
	margin-top: -100px;
	padding-top: 100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 20rem);
	gap: 5px;
	justify-content: center;
}

.artists a > span {
	position: absolute;
	font-size: 1.2em;
	font-weight: bold;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.artistStory {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr auto;
	padding-top: 4em;
}

.artistStory .txt {
	color: #a6966a;
}

.txt img {
	display: none;
}

.foto {
	max-height: 20rem;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.foto a{
	position: relative;
}
.foto:hover img {
	border: 3px solid #a6966a;
}


.foto:hover img:first-child {
	display: none;
}

.foto:hover .hoverImg {
	display: inline;
}

.hoverImg {
	display:none;
}



/* <------ Formular styles start --------> */

#fbooking {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.formRow {
	display: flex;
}


.formItemBase {
	border: 1px solid #a6966a;
	font-size: 1.4em;
	background-color: #eee;
	padding: 0.15em;
	position: relative;
	margin: 0.5em;
}

.formItemBase:active,.formItemBase:focus {
	border: 2px solid #a6966a;
}


.miniForm textarea, .miniForm input[type=text], .miniForm input[type=email] {
	border: 1px solid var(--gold);
	background-color: #333;
	color: #fff;
	font-size: 1.2em;
	padding: 0.3em;
}

.miniForm textarea {
  width: 100%;
  height: 40ch;
}

.miniForm div {
	width: 100%;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.miniForm div > * {
	flex: 1;
}

#ftVenueName {
	flex: 1;
}

#ftDate {
	width: 33%;
}

#ftCity {
	flex: 1;
}

#ftCountry {
	flex: 1;
}


#ftPromoterName {
	flex: 1
}

#ftPromoterPhone {
	flex: 1
}


#ftVenueWebsite {
	flex: 1
}


#ftPromoterWebsite {
	flex: 1
}

#ftCapacity {
	width: 25%	
}

#ftProposedLineUp {
	width: 50%;
}

#ftSetTime {
	width: 25%;
}

#ftPreviousDjsBookedByPromoter {
	flex: 1;
}

#ftPreviousDjsBookedByVenue {
	flex: 1;
}

#ftDoorCharge {
	flex: 1;
}

#ftSponsors {
	flex: 1;
}

#ftNearestAirport {
	flex: 1;
}

#ftOffer {
	flex: 1;
}



/* <------ Formular styles end --------> */


/* =============== footer ============= */

/* insta wrapper */

#instagram_embed {
	width: 100%;
  	height: 980px;
  	border: none;
  	left: 0;
}

#instaWrapper {
	position: relative;
	color: #000;
	width: 100vw;
	transform: translateX(-50%);
	left: 50%;
}
.instaHeader {
	margin-block: 2em;
}

#instafeed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	padding: 20px;
	justify-content: center;
	align-items: center;
}


.instaPost {
	color: #000;
	font-weight: normal;
	position: relative;
}

.instaPost span {
	display: none;
	position: absolute;
	width: 100%;
	top: 10px;
	color: white;
	background-color: rgba(1,1,1,0.7);
	padding: 5px;
}

.instaPost:hover span{ 
	display: block;
}

.instaPost:hover { 
	color: #000;
}

.instaPost img { 
	width: 100%;
	height: auto;
}

.instaPost img:hover { 
	outline: 3px solid var(--gold);
}

/* insta end */


footer {
	background-color: black;
	font: normal 1em Arial;  
	color: #a6966a;
	padding: 2em 0em;
}

.contact {
	display: grid;
	max-width: 70vw;
	height: auto;
	grid-gap: 1em;
	padding-bottom: 2em;
	margin: 0 auto;
	color: var(--font-color-white);
	padding: 0;
}

#contact:target footer {
	box-shadow: 0px 0px 25px rgb(0,0,0,0);
	animation-delay: 400ms;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-name: highlight;
	animation-timing-function: ease-in-out;
}

@keyframes highlight {
    from {
	box-shadow: 0px 0px 25px rgb(166, 150, 106, 1);
    }
    to {
	box-shadow: 0px 0px 25px rgb(0,0,0,0);
    }
}

.contact a { color: var(--font-color-white); }
.contact-header { 
	grid-area: 1 / 1 / 2 / 3;
	align-self: center;
	padding-bottom: 1em;
}

.contact-header > h3 {
	color: var(--font-color-white);
	font-weight: bold;
	margin: 0;
}

.mail { grid-area: 2 / 1 / 3 / 2;}
.mail a:hover { text-decoration: underline;}
.mail a:before { 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0e0";
	color: #a6966a;
	display: inline-block;
	padding-right: 30px;
}
.mail a:before:hover { text-decoration: none; }

.adr { grid-area: 3 / 1 / 4 / 2; transform: translateY(-3em);}
.adr div:before { 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f3c5";
	color: #a6966a;
	display: inline-block;
	padding-right: 30px;
}

.adr p {
	margin: 0;
}

.tel { grid-area:  2 / 2 / 3 / 3; max-width: 40ch;}

.tel div:before { 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f879";
	color: #a6966a;
	display: inline-block;
	padding-right: 30px;
}

.tel p {
	margin: 0;
}

.social { grid-area: 3 / 2 / 4 / 3; font-size: 1.5em; padding: 1em 0; margin-left: 2em;} 

.social a { color: #a6966a;} 
.social a:hover { color: white;} 


@media only screen and (max-width: 810px) {
	header {
		height: 45vh;
		flex-direction: column;
		align-items: center;
		background-image: url('../img/turntable_m.jpg');
	}

	main { max-width: 100vw; padding: 1em;}
	.contact-header > h3 { text-align: center;}


	.miniForm textarea {
		width: 100%;
	}

	.navbar {
	  overflow: hidden;
	  background-color: #000;
	  width: 100%;
	  height: 80px;
	  display:flex;
	  flex-direction: row;
	  align-items: center;
	  padding: 0 1em;
	}

	.dropbtn, .navbar a {
		display: none;
	}

	.contact {
		max-width: 100vw;
		margin: 0;
		padding: 0 1em;
	}

	.dropdown {
	  display: none;
	  float: left;
	  overflow: hidden;
	}

	.dropdown .dropbtn {
	  border: none;
	  outline: none;
	  background-color: inherit;
	  font-family: inherit;
	  margin: 0;
	}

	.navbar a:hover, .dropdown:hover .dropbtn {
		color: #000;
		background-color: #a6966a;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #000;
	  min-width: 160px;
	  z-index: 1;
	}

	.dropdown-content a:hover {
	  background-color: #ddd;
	}

	.dropdown:hover .dropdown-content {
	  display: block;
	}

	#fbooking {
		display:flex;
		flex-direction: column;
	}

	#burgerMenu {
		font-size: 2em;
		position: relative;
		z-index: 20;
		display: block;
		margin-left: auto;
		padding: 0.7em;
	}

	#logo {
		display: flex;
		margin-right: 25vw;
		z-index: 20;
		transform: unset;
		padding: 0;
	}

	#burgerViewContainer {
		font-size: 1em;
  	}

	.closedBurgerView {
		display:none;
		z-index: -10;
	}

	#burgerViewContainer .closedBurgerView a {
		display:none;
		color: #fff;
	}

	.openBurgerView a {
		display: block;
		padding: 0.5em 0;
		width: 100%;
		text-align: center;
		color: #a6966a;
	}

	.openBurgerView {
		z-index: 10;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%);
		font-size: 2em !important;
		display: flex;
		flex-direction: column;
		position: absolute;
		height: 100vh;
		width: 100vw;
		top: 0;
		left: 0;
		align-items: center;
		align-items: center;
		padding-top: calc(80px + 2em);
  	}

	.hiddenSubMenuContent {
		display:none;
	}
	.visibleSubMenuContent {
		display:block;
		background-color: rgba(255,255,255,0.1);
		font-size: 0.5em;
		width: 100vw;
	}

	.txt { text-align: center; }

	.txt img {
		display: block;
		padding: 2em 0;
		width: 70%;
		margin: 0 auto;
	}
	.artistSidebar { padding: 2em 0; }
	.artistSidebar img { display: none; }
	.artistStory { grid-template-columns: 1fr; }
	.artists { justify-items: center;}
	#instaWrapper { left: 50%; transform: translateX(-50%);} 

}


@media only screen and (max-width: 550px) {
	.artists { justify-items: center;}
	.contact-header { grid-area: unset; }
	.mail { grid-area: unset; }
	.mail span { border-bottom: 1px dashed var(--gold); }
	.adr { grid-area: unset; transform: unset;}
	.tel { grid-area: unset; }
	.social { grid-area: unset; }
	footer .small-band { padding: 0 0 0 5px; }
	.miniForm div { flex-direction: column; }
}