/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Material+Icons');

*{
}

html, body{
	width:100%;
	height:100%;
 	margin: 0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

em a{
	color:#000;
}

button{
  background-color: #4CAF50;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  font-size: 1em;

}

#Home{
	background-image: url("../img/csm_Plan_Afrika_Kenia_Kisumu_Kinder_Patenschaft_Klassenraum_201108-KEN-28_bc5836a264.jpg");
}
#Projekte{
	background-image: url("../img/Hintergrund_Projekte.jpg");
}
#BerufPers{
	background-image: url("../img/csm_Berufliche_Perspektiven_Jugendlcihe2_648fe6f2f3.jpg")
}
#ueberUns{
	background-image: url("../img/Hintergrund_UeberUns.jpg");
}
#Patenkinder{
	background-image: url('../img/Hintergrund_Patenkinder.jpg');
}
#Spenden{
	background-image: url("../img/csm_Plan_Asien_Bangladesch_Barguna_Kinder_Patenschaft_Fruehkindliche_Erziehung_201305-BGD-26_d63eb8b463.jpg");
}
#Kontakt{
	background-image: url("../img/csm_Plan_Lateinamerika_Ecuador_El_Pollo_Kinder_Patenschaft_Maedchen_Tisch_malen_Stift_200903-ECU-223_59e443c864.jpg");
}
#FAQ{
	background-image: url("../img/csm_Plan_Lateinamerika_Bolivien_Kinder_Patenschaft_Tanzen_Kreis_Wiese_bunte_Kleidung_201102-BOL-47_7dd6876a2c.jpg");
}
#Links{
	background-image: url("../img/Peru_Allin-Mikuna_GNO0439_Alf-Berg_1440x450.jpg");
}
#Impressum{
	background-image: url("../img/csm_Plan_Afrika_Liberia_Kinder_Patenschaft_Kindergarten_Tafel_CPPR-LBR-2012-CP5-02_8b9eba5f6a.jpg")
}
#Datenschutz{
	background-image: url("../img/csm_Plan_Asien_Nepal_Kinder_Patenschaft_Schuluniform_RS33572_200902_NPL_013_Wirsel_Nepal_c410391939.jpg");
}

.container {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0;
	padding: 0;
    display: grid;
	grid-template-columns: 15vw 35vw 35vw 15vw;
	grid-template-rows: 15vh 80vh 5vh;
	grid-template-areas:
		"header header header header"
		". content content ."
		"footer footer footer footer";
}

header{
	color:#FFDE00;
	font-size: 1.2em;
	background-color: rgba(40,68,30,0.25);
	grid-area: header;
    display: flex;
    justify-content: space-between;
	align-items: center;
}

header nav ul li{
	display: inline;
}

nav{
    margin-right:10px;
}

header a{
	padding: 5px;
	text-decoration: none;
	color: #FFDE00

}

brand{
	font-family: Alize, "Alize Demi";
	font-size: 2.5em;
	margin-left: 10px;
}

content{
	background-color: rgba(255,255,255,0.75);
	color: #0D159A;
	grid-area: content;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	font-size: 1.5em;
	overflow-y:scroll;
}

sidebar{
	background-color: rgba(0,0,255,0.3);
	grid-area: sidebar;
}

footer{
	font-size: 1.2em;
	color: white;
	background-color: rgba(0,0,0,0.5);
	grid-area: footer;
    display: flex;
	align-items: center;
	padding-left: 5px;

}

.toggle-Button{
	color: white;
	background-color: #007BFF;
	border-radius: 5px;
	padding: 5px;
}

content ul li{
	text-decoration: none;
	list-style: none;
}

#contentPatenkinder{
    justify-self: center;
}

.btnForm{
    padding:10px;
    border-width:medium;
    border-color: black;
    border-radius: 5px;
	background-color: #007BFF;
	color:#FFDE00;
}

#logo{
    display: flex;
    justify-content: center;
}

/* Dropdown Button */
.dropbtn {
		color:#FFDE00;
	background-color: rgba(40,68,30,0.25);
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.active{
	color: white;
	background-color: #007BFF;
	border-radius: 5px;
}

#Projekte ul li{
	list-style: disc;
}

#BerufPers ul li{
	list-style: disc;
}

ul.links li{
	margin-bottom: 5px;
	text-decoration: none;
}

ul.links li::before{
	content: '\00bb  '
	}

	ul.links li a{
		text-decoration: none;
		color: #0D159A
	}

	ul.links li a:visited{
		color: #0D159A;
	}