* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: Sans-Serif;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}


@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

}



.mainPictur {
  position: relative; /* Container für absolute Positionierung */
  display: inline-block; /* Passt sich der Bildgröße an */
  background-size: cover;
}

/* Für "index"*/
.ueberschrift {
  position: absolute; /* Positioniert den Text */
  top: 35%; /* Vertikal zentrieren */
  left: 50%; /* Horizontal zentrieren */
  transform: translate(-50%, -50%); /* Exakte Zentrierung */
  color: #116CEB; /* Textfarbe */
  font-size: 20px;
  padding: 10px;
  float:center;
  text-align:center;
}




/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #116CEB;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #AA001D;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #AA001D;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: withe;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #116CEB;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}





/* Für logo links oben*/
.logo {
  position: fixed; /* Positioniert den Text */
top: 0;
right: 0;

}
  
.musican_main_text {
  position: absolute; /* Positioniert den Text */
  top: 0%; /* Vertikal zentrieren */
  left: 50%; /* Horizontal zentrieren */
  transform: translate(-50%, -50%); /* Exakte Zentrierung */
  color: #2068C4; /* Textfarbe */
  font-size: 20px;
  padding: 10px;
  float:center;
}



/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container_membership {
  border-radius: 5px;
  background-color: #eaeaea;
  padding: 20px;
}

.mainTextMembership {
color: #116CEB; /* Textfarbe */
}

.ueberschrift_aboutUs{
	color: #116CEB; /* Textfarbe */
	text-align: center;
}

.text_aboutUs{
	text-align: center;
}

#boxleft_aboutUs{ 
			width: 29%;
			float: left;
			height: auto;
			padding-left:1%;
		}
		
#boxright_aboutUs{
			width: 69%;
			float: left;
			height: auto;
			padding-left:1%;
		}
		
.ueberschrift_member{
	text-align: center;
	color: #116CEB; /* Textfarbe */
}

.ueberschrift_musicans{
	text-align: center;
	color: #116CEB; /* Textfarbe */
}



/* Für "become_member" Kontaktdaten */
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: #eaeaea;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container_become_member {
  padding: 2px 16px;
}


#boxleft_contact{ 
			width: 48%;
			float: left;
			height: auto;
			padding-left:1%;
		}
		
#boxright_contact{
			width: 49%;
			float: left;
			height: auto;
			padding-left:1%;
		}
		

.kontakt_member{
	text-align:center;
	margin-top:4%;
}

/* Für "contact"*/
#boxleft_contact{ 
			width: 50%;
			float: left;
			height: auto;

		}
		
#boxright_contact{
			width: 50%;
			float: left;
			height: auto;

		}
		
.ueberschrift_contact{
	text-align: center;
	color: #116CEB;
}

.kontakt_contact{
	text-align:center;
	margin-top:4%;
	margin-bottom:2%;
}

.ueberschrift_termine{
	text-align: center;
	color: #116CEB;
	margin-bottom:2%;

}

th{
	border:1px solid #000 ;
		}
		
td{
	border:1px solid #000 ;
	width: 500px;
	height: 50px;

		}
		
table{
		border-collapse: collapse;	

		}

.musicans_dirigentenstab{
	position: absolute;
	left:43%;
	transform: translate(-50%, -50%);
	top:50%;
}

.musicans_dirigentenstab:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_marschstab{
	position: absolute;
	left:50%;
	top:25%;
}

.musicans_marschstab:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_marketenderin_fass1{
	position: absolute;
}

.musicans_marketenderin_fass1:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_marketenderin_fass2{
	position: absolute;
	left: 80%;
}

.musicans_marketenderin_fass2:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_klarinette{
	position: absolute;
	top: 100%;
	left:55%;
}

.musicans_klarinette:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_querfloete{
	position: absolute;
	top: 100%;
	left: 20%;
}

.musicans_querfloete:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_posaune{
	position: absolute;
	top: 140%;
	left: 20%;
}

.musicans_posaune:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_saxophon{
	position: absolute;
	top: 140%;
	left: 55%;
}

.musicans_saxophon:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_trompete{
	position: absolute;
	top: 240%;
	left: 20%;
}

.musicans_trompete:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_fluegelhorn{
	position: absolute;
	top: 230%;
	left: 55%;
}

.musicans_fluegelhorn:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_tenorhorn{
	position: absolute;
	top: 350%;
	left: 20%;
}

.musicans_tenorhorn:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_tuba{
	position: absolute;
	top: 350%;
	left: 55%;
}

.musicans_tuba:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.musicans_schlagzeug{
	position: absolute;
	top: 430%;
	left: 40%;
}

.musicans_schlagzeug:hover{
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card_dirigent {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container_card_dirigent {
  padding: 2px 16px;
}

#boxleft_musicans{ 
			width: 79%;
			float: left;
			height: auto;
			padding-left:1%;
			
		}
		
#boxright_musicans{
			width: 19%;
			float: left;
			height: auto;
			padding-left:1%;
			text-align:left;
		}
		
		
.ueberschrift_pictures{
color: #116CEB;
	text-align: center;
}

.maps{
		text-align: center;
}