/* === STYLES: ==================================================================================================================== */

/* ======= BASE STYLE ======= */

html { background: rgb(41, 41, 41); } /* Background */
body { color: white; }      /* Schrift */
section {                    
    width: 50%;               /* max Breite vom Inhalt */
    margin: auto;             /* Alles Zentriert */
}


/* ======= BACKGROUND SLIDESHOW STYLE ======= */

.background{
    position: fixed;
    inset:0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index:-2;
    opacity:0;
    transition:opacity 1.5s ease-in-out;
}
#bg1 { opacity:1; }


/* ======= FONT STYLE ======= */

@font-face {
    font-family: 'Fish';
    src: url('../fonts/Fish.ttf');
}

@font-face {
    font-family: 'Lemon';
    src: url('../fonts/LEMONMILK-Regular.otf');
}

/* FONT NAV-BAR */
nav a {
    font-family: 'Fish', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 320%;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: justify;
    margin: 0px;
    color: white;
    padding: .6em;
    text-decoration: none;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}

/* FONT KONTAKT ÜBERSCHRIFTEN */
p {
    font-family: 'Lemon', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 150%;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: justify;
    margin: 0px;
    color: white;
    padding: .6em;
    text-decoration: none;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}

/* FONT Kontakt EMails */
#contact a {
    font-family: 'Lemon', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 80%;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: justify;
    color: rgb(174, 193, 255);
    text-decoration: none;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}

/*FONT IMPRINT*/
#imprint p {
    font-family: 'Lemon', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 100%;
    letter-spacing: 4px;
    text-align: justify;
    margin: 0px;
    color: white;
    padding: .6em;
    text-decoration: none;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}
td {    /*FONT IN TABELLEN*/
    margin-left: auto;
    margin-right: auto;
    font-family: 'Lemon', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 120%;    
    letter-spacing: 4px;
    text-transform: uppercase;    
}
/* FONT BEI SECTION ÜBERSCHRIFTEN */
h2.subtitles{
    margin-left: auto;
    margin-right: auto;
    font-family: 'Fish', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 500%;    
    letter-spacing: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;  
}


/* ======= SECTION STYLE ======= */

/* Sub Sections Titel Bilder & Divider */
.section_images {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 12%;
}
.section-divider {
    border: none;
    height: 3px;
    background-color: rgb(60, 60, 60);
    margin-top: 5%;
    margin-bottom: 5%;
    max-width: 77%;
}



/* === WEBSITE CHRONOLOGISCH VON OBEN NACH UNTEN: ================================================================================== */

/* Header & Navigation */
header {
    padding-bottom: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
}
nav {
    padding-top: 2%;
    width: 50%;
    margin: auto;
    text-align: center;
}
nav a:hover {
    color: #949494;
}

/* Banner (Gruppenfoto) */
#banner {
    padding-top: 1%;
    width: 100%;
}

/* Social Media Icons */
.socialmedia_logo {
    max-width: 100%;
    transition: filter 0.2s ease; 
}
.socialmedia_logo:hover {
    filter: brightness(0.7);
}

/* Music */
#music{
    margin-bottom: 5%;
}
#music .section_images {
    width: 12%;
    margin-top: 4%;
    margin-bottom: -7%;
}

/* Konzerte  */
#live {
	text-align: center;
    margin-bottom: 5%;
}
#live .section_images {
    width: 12%;
    margin-top: -2%;
    margin-bottom: -7%;
}
section table { /* Tabelle */
    width: 100%;
    margin-bottom: 5%;
}
table {
    border-collapse: collapse;
}
#live td { /* Tabellen-Zelle */
    width: 25%;
    border: 1px solid grey;
    text-align: center;
}
#aPreviousShows:hover {
    color: grey;
    border:1px solid grey;
}

/* Bandfotos & Namen */
#band .section_images {
    width: 10%;
    margin-bottom: -9%;
}
#band td img {
    padding-bottom: 10px; 
    width: 100%;
    border-radius: 5%;
}
#band td {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 0.5%;
    width: 25%;
    text-align: center;  
    font-size: 140%;
}
#previous_shows td{
	background-color: black;
}
#previous_shows {
    display: none;   
}
#aPreviousShows {
    color: lightgrey !important;
    font-family: 'Lemon', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: normal;
    font-size: 130%;    
    text-decoration: none;
	text-align: center;
    border:1px solid lightgrey !important;
    padding-top: 3px;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-right: 25px;
	color: lightgrey;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    	
}

/* Kontakt, MailTo & Downloads */
#contact .section_images {
    width: 7%;
    margin-bottom: 2%;
    margin-top: 0%;
}
a.mailto-link {
    color: lightgrey;
    transition: filter 0.5s ease;
    text-decoration: none;
}
a.mailto-link:hover {
    filter: brightness(0.7);
}

.downloads-container {
    display: flex;
    justify-content: center;
    margin-left: 20px;
}
.download-button:hover {
    background-color: #555;
    border-color: #555;
}
.download-button {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    font-family: 'Agency FB';
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
p {
    margin-top: 0px;
    padding-top: 0px;
    text-align: center;
}

/* Footer */
footer p, footer a {
    font-size: 100%;
}