@charset "utf-8";
/* CSS Document */

#mitglieder-info {
	margin: 0 auto;
	margin-bottom: 20px;
}

#mitglieder-info .bild-achtung figure img {
	height: 100%;
	width: 100%;
}
#mitglieder-info .mitglider-info-text h2, #mitglieder-info .mitglider-info-text p {
	color: #FFF;
}

#menu_mitglieder .invisible {
	display: none;
}
#menu_mitglieder ul {
	//display: grid;
	//grid-template-columns: auto auto auto;
}
#menu_mitglieder ul li {
	//border: 1px solid #EEE;
	border-radius: 0 1em;
	height: 300px;
	position: relative;
	margin: 30px;
	background-color: #000;
}
#menu_mitglieder ul li:nth-child(1) {
	background-image: url("/files/master/themes/theme_pics/kontakt-jugendtrainer.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#menu_mitglieder ul li:nth-child(2) {
	//background-image: url("/files/master/themes/theme_pics/JoinTeam_Jugend_Person_Cut.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#menu_mitglieder ul li:nth-child(3) {
	background-image: url("/files/master/themes/theme_pics/mitglied-werden.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#menu_mitglieder ul li a {
	display: block;
	position: absolute;
	bottom: 1em;
	//left: 1em;
	padding: 0.5em;
	background-color: #333;
	border-radius: 0 0.5em;
	color: #FFF;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
	transition: background-color 0.5s ease;
}
#menu_mitglieder ul li a:hover {
	//background-color: #FFF;
	background-color: #db1c21;
	//color: #555;
	color: #FFF;
}

#user_daten {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #FFF;
	border-radius: 0 2em;
}
#user_daten .downloads {
	padding-bottom: 20px;
}
#user_daten .downloads h3 {
	margin-bottom: 10px;
}
#user_daten .downloads ul li a {
	display: block;
	color: #555;
	padding: 0.6em 0.5em 0.5em 0.5em;
	border: 1px solid #EEE;
	margin: 5px 0;
}
#user_daten .downloads ul li a:hover {
	color: #db1c21;
}

#modul_passwort_edit {
	//width: 500px;
	//height: 240px;
	padding: 1em;
	//margin-left: 30px;
	//float: left;
	border: 1px solid #EEE;
	border-radius: 0 1em;
	margin-bottom: 20px;
}
#modul_passwort_edit h3 {
	margin-bottom: 1em;
}
#modul_passwort_edit .widget-text {
	width: 100%;
}
#modul_passwort_edit label {
	display: block;
	margin-bottom: 0.5em;
}
#modul_passwort_edit input {
	//width: 480px;
	padding: 10px;
	font-size: 1em;
	display: block;
	margin-bottom: 1em;
	color: #555;
	border-radius: 0 0.5em;
}
#modul_passwort_edit .widget-submit {
	width: 200px;
	margin: 0 auto;
}
#modul_passwort_edit .widget-submit button {
	padding: 0.5em;
	width: 100%;
	background-color: #333;
	border: 0;
	border-radius: 0 0.5em;
	color: #FFF;
	transition: background-color 0.5s ease;
	font-Size: 1em;
	cursor: pointer;
}
#modul_passwort_edit .widget-submit button:hover {
	background-color: #db1c21;
	color: #FFF;
}
	
#menu-daten-change {
	//width: 500px;
	//float: right;
	//margin-right: 30px;
	margin-bottom: 20px;
}
#menu-daten-change .invisible {
	display: none;
}
#menu-daten-change li a {
	display: block;
	padding: 0.5em;
	font-size: 1em;
	background-color: #333;
	border-radius: 0 0.5em;
	color: #FFF;
	text-align: center;
	transition: background-color 0.5s ease;
}
#menu-daten-change li a:hover {
	background-color: #db1c21;
}


@media (min-width: 1200px) {
	
	#modul_passwort_edit {
		width: 500px;
		height: 240px;
		margin-left: 30px;
	}
	#modul_passwort_edit input {
		width: 480px;
	}

	#menu-daten-change {
		width: 500px;
		float: right;
		margin-right: 30px;
	}

	#menu_mitglieder ul {
		display: grid;
		grid-template-columns: auto auto auto;
	}
	#menu_mitglieder ul li a {
		left: 1em;
	}
	
	#user_daten {
		width: 1160px;
		padding: 20px;
	}
	#user_daten .downloads {
		width: 1100px;
		margin: 0 auto;
	}
	#user_daten .downloads ul {
		display: grid;
		grid-template-columns: auto auto;
	}

	#user_daten .menu_mitglieder {

	}
	
	#mitglieder-info {
		width: 1160px;
		padding: 20px;
		margin-top: 100px;
		height: 50px;
	}
	#mitglieder-info .bild-achtung figure {
		height: 70px;
		width: 70px;
	}
	#mitglieder-info .bild-achtung {
		float: left;
	}
	#mitglieder-info .mitglider-info-text {
		float: left;
		padding-left: 25px;
	}
	#mitglieder-info {
		width: 1160px;
		padding: 20px;
		margin-top: 100px;
		height: 50px;
	}

}
@media (max-width: 1199px) and (min-width: 600px) {
	
	#modul_passwort_edit {
		width: 470px;
		height: 270px;
		margin-left: 30px;
	}
	#modul_passwort_edit input {
		width: 450px;
	}

	#menu-daten-change {
		width: 500px;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	
	
	#menu_mitglieder ul {
		display: grid;
		grid-template-columns: auto auto auto;
	}
	#menu_mitglieder ul li a {
		left: 0em;
	}
	
	#user_daten {
		width: 560px;
		padding: 20px;
	}
	#user_daten .downloads {
		width: 500px;
		margin: 0 auto;
	}
	#user_daten .downloads ul {
	}


	
	#mitglieder-info {
		width: 560px;
		padding: 20px;
		margin-top: 50px;
		height: 80px;
	}
	#mitglieder-info .bild-achtung figure {
		height: 30px;
		width: 30px;
	}
	#mitglieder-info .bild-achtung {
		float: left;
		width: 40px;
	}
	#mitglieder-info .mitglider-info-text {
		float: left;
		width: 520px;
	}
}
@media (max-width: 599px) {
	
	#modul_passwort_edit {
		width: 230px;
		height: 250px;
	}
	#modul_passwort_edit input {
		width: 210px;
	}

	#menu-daten-change {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	
	
	
	#menu_mitglieder ul {
		
	}
	#menu_mitglieder ul li a {
		left: 1em;
	}
	
	#user_daten {
		width: 260px;
		padding: 20px;
	}
	#user_daten .downloads {
		width: 200px;
		margin: 0 auto;
	}
	#user_daten .downloads ul li a {
		font-size: 8px;
	}

	#mitglieder-info {
		width: 260px;
		padding: 20px;
		margin-top: 50px;
		height: 100px;
	}
	#mitglieder-info .bild-achtung figure {
		height: 20px;
		width: 20px;
	}
	#mitglieder-info .bild-achtung {
		float: left;
		width: 30px;
	}
	#mitglieder-info .mitglider-info-text {
		float: left;
		width: 230px;
	}
}