/* ############################################################### */
/* ##                                                           ## */
@media all {
	
	#TestContent::before {
		content: "ALL"; 
	}
	body {
		background-image: url('https://www.jffv.de/09-Tools/09-Grafiken/JFFV-BG-101.jpg');
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
	}


	.jconfirm {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999999;
		font-family: inherit;
		overflow: hidden;
		background-color: #8898ff;
	}
	.jconfirm .jconfirm-scrollpane {
		perspective: 500px;
		perspective-origin: center;
		display: table;
		width: 100%;
		height: 100%;
	}
	.jconfirm .jconfirm-row {
		display: table-row;
		width: 100%;
	}
	.jconfirm .jconfirm-cell {
		display: table-cell;
		vertical-align: middle;
	}
	.jconfirm .jconfirm-holder {
		max-height: 100%;
		padding: 50px 0;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		background-color: #7f8c92;
		color: #fff;
	}
	.jconfirm .jconfirm-box-container.jconfirm-no-transition {
		transition: none !important;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-box {
		background-color: transparent;
		box-shadow: none;
	}
	.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}
	.jconfirm .jconfirm-box.jconfirm-type-animated {
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	.jconfirm .jconfirm-box {
		opacity: 1;
		transition-property: all;
	}
	.jconfirm .jconfirm-box {
		background: white;
		border-radius: 4px;
		position: relative;
		outline: none;
		padding: 15px 15px 0;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
	}
	.jconfirm .jconfirm-box div.jconfirm-title-c {
		display: block;
		font-size: 22px;
		line-height: 20px;
		user-select: none;
		cursor: default;
		padding-bottom: 15px;
	}
	.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty {
		display: none;
	}
	.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
		margin-right: 8px;
		margin-left: 0px;
	}
	.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
		font-size: inherit;
		display: inline-block;
		vertical-align: middle;
	}
	.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
		user-select: none;
		font-size: inherit;
		font-family: inherit;
		display: inline-block;
		vertical-align: middle;
	}
	.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll {
		overflow-y: hidden;
	}
	.jconfirm .jconfirm-box div.jconfirm-content-pane {
		margin-bottom: 15px;
		height: auto;
		transition: height 0.4s ease-in;
		display: inline-block;
		width: 100%;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
		overflow: auto;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons {
		width: 100%;
		float: none;
	}
	.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
		float: right;
	}
	.jconfirm .jconfirm-box .jconfirm-buttons {
		padding-bottom: 11px;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button {
		float: right;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button {
		text-transform: none;
		text-align: left;
		padding: 10px 15px;
		margin-bottom: 20px;
		width: 45%;
		min-width: 128px;
		font-weight: 700;
	}
	.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		text-shadow: none;
	}
	.jconfirm .jconfirm-box .jconfirm-buttons button {
		display: inline-block;
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border-radius: 4px;
		min-height: 1em;
		transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
		-webkit-tap-highlight-color: transparent;
		border: none;
		background-image: none;
	}
	.jconfirm .jconfirm-box .jconfirm-buttons > button {
		margin-bottom: 4px;
		margin-left: 2px;
		margin-right: 2px;
	}

	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:after, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:after {
		font-size: 27px;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:before, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:before, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:after, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:after {
		top: 8px;
	}
	.button-arrow:after {
		top: 8px;
	}
	.btn-primary-rte:after, .btn-primary-rte-left:after, .button-arrow:after {
		-moz-osx-font-smoothing: grayscale;
		color: #fff;
		/* content: "\f105"; */
		display: inline-block;
		font: 35px/1 FontAwesome;
		position: absolute;
		text-rendering: auto;
		top: 0px;
		right: 15px;
		padding-left: 10px;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:before, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:before {
		font-size: 25px;
	}
	.jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:before, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:before, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.confirm-button:after, .jconfirm.jconfirm-light .jconfirm-box-container .jconfirm-buttons button.cancel-button:after {
		top: 8px;
	}
	.back-button:before {
		-moz-osx-font-smoothing: grayscale;
		color: #fff;
		/* content: "\f104"; */
		display: inline-block;
		font: 35px/1 FontAwesome;
		position: absolute;
		text-rendering: auto;
		top: 0px;
		left: 10px;
		padding-right: 10px;
	}

	.H102Top {
		margin-top: 2% !important;
	}

	.NeuerAbstandContent {margin-top: 570px !important;}
	.NeuerAbstandMatrix  {margin-top: -250px !important;}

	/* ## -----------------------------------## */
	/* ## Background-Overlay                 ## */
	/* ## -----------------------------------## */
	.jqbga-slider:after, .jqbga-web--image:after, .jdbga-web--color:after  {
		content: "";    
		background: -moz-linear-gradient(-45deg,  rgba(6,13,43,0.78) 0%, rgba(6,13,43,0.63) 20%, rgba(12,106,120,0.01) 100%); 
		background: -webkit-linear-gradient(-45deg,  rgba(6,13,43,0.78) 0%,rgba(6,13,43,0.63) 20%,rgba(12,106,120,0.01) 100%); 
		background: linear-gradient(135deg,  rgba(6,13,43,0.78) 0%,rgba(6,13,43,0.63) 20%,rgba(12,106,120,0.01) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7060d2b', endColorstr='#030c6a78',GradientType=1 ); 
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position:absolute;
		padding: 30px 100vw;
		margin: -5px -100vw;
		z-index:999;
	}

	/* ## -----------------------------------## */
	/* ## Slider-Navigation außerhalb        ## */
	/* ## -----------------------------------## */
	#cc-m-gallery img {
		border-radius:5px;
		width:60%; 
		height:auto !important;
	}

	.mySlides {
		display: none
	}
	.slideshow-container {
		max-width: 1000px;
		position: relative;
		margin: auto;
	}
	/* Fading animation */
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 6.5s;
		animation-name: fade;
		animation-duration: 6.5s;
	}
	@-webkit-keyframes fade {
		from {
			opacity: .4
		}
		to {
			opacity: 1
		}
	}
	@keyframes fade {
		from {
			opacity: .4
		}
		to {
			opacity: 1
		}
	}

	.JFFVLI {
		font-family: 'Fira Sans';
		font-size: 32px !important;
		text-shadow: 2px 2px 0px rgb(150 178 215), 
			2px -2px 0px rgb(150 178 215), 
			-2px 2px 0px rgb(150 178 215), 
			-2px -2px 0px rgb(150 178 215), 
			2px 0px 0px rgb(150 178 215), 
			0px 2px 0px rgb(150 178 215), 
			-2px 0px 0px rgb(150 178 215), 
			0px -2px 0px rgb(150 178 215);
	}

	.top-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: space-between; */
		justify-content: center;
		/* background-color: #00BAF0; */
		/* background: linear-gradient(to left, #f46b45, #eea849); */
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color: #FFF;
		height: 50px;
		/* padding-left: 1em; */
	}

	.menu {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.menu > li {
		margin: 0 1rem;
		overflow: hidden;
	}

	.menu > a > li {
		font-size: 35px;
		cursor: pointer;
	}

	.menu-button-container {
		display: none;
		height: 100%;
		width: 30px;
		cursor: pointer;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#menu-toggle {
		display: none;
	}

	.menu-button,
	.menu-button::before,
	.menu-button::after {
		display: block;
		background-color: #fff;
		position: absolute;
		height: 4px;
		width: 30px;
		transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
		border-radius: 2px;
	}

	.menu-button::before {
		content: '';
		margin-top: -8px;
	}

	.menu-button::after {
		content: '';
		margin-top: 8px;
	}

	#menu-toggle:checked + .menu-button-container .menu-button::before {
		margin-top: 0px;
		transform: rotate(405deg);
	}

	#menu-toggle:checked + .menu-button-container .menu-button {
		background: rgba(255, 255, 255, 0);
	}

	#menu-toggle:checked + .menu-button-container .menu-button::after {
		margin-top: 0px;
		transform: rotate(-405deg);
	}			

	.StandardHoehe {
		height: 90%;
		height: -webkit-calc(100vh - 150px);
		height: -moz-calc(100vh - 150px);
		height: calc(100vh - 200px);
	}
		
	#JFFVSocial   {display: none;}
	#JFFVSocial01 {display: none;}
	#JFFVSocial02 {display: none;}
	#JFFVSocial03 {display: none;}

	.JFFVSozialBox {display: none;}

	#HeaderTop {margin-top: 0%;}
				
	.NavVersatz  {
		padding-right: 0;
	}

		
	#TitelTextJFFV::before {
		content: "Jugendfußballförderverein Broitzem e.V."; 
	}

	.textcolor {
		 background-image:linear-gradient(90deg,blue,yellow,red,purple);
		 -webkit-background-clip: text;
		 -webkit-text-fill-color: transparent;
	}

	.JFFVSP {
		display: none;
	}


	#footer_area {
		/* padding: 35px; */
		margin-top: -35px;
		/* width: 50%; */
		width: 100%;
		/* margin-left: 25%; */
		padding-bottom: 0.5%;
		color: white;
		position: fixed;
		/* padding: .6em; */
		bottom: 0;
		left: 0;
		right: 0;
		
		padding: 15px 0 15px 0;
		background-color: rgb(55 55 55 / 59%);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
	}
	
	.JFFVHintergrund01 {
		display: block;
		background-color: rgba(107, 107, 255, 0.67);
		padding-left: 10px;
		padding-bottom: 10px;
	}

	#JFFV_FB_01, #JFFV_Insta_01 {
		display: none;
	}

	#SMViewport {
		display: none;
	}

	#JFFVMWDownload {
		display: none;
	}

	.JFFVKonto {
		padding-left: 28%;
	}
	
	/* ########################################################### */ 
	/* ## */
	.JFFVMitgliederAdmin01 {
		color: grey;
		font-size: x-small;
	}
	.JFFVMitgliederAdmin02 {
		/* color: grey; */
		font-size: x-small;
	}
	.JFFVMitgliederEingabe01 {
		/* background-color: white; */
		background-color: #94b1ff;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	.JFFVMitgliederEingabe02 {
		/* background-color: white; */
		background-color: #ecebef;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	/* ## */
	/* ########################################################### */ 

	/* ########################################################### */ 
	/* ## */
	.GridMitglieder {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		border: 5px solid #70a4d6;
		margin-bottom: 1%;
	}
	.GridNeuesMitglied {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridMitglieder__VN {
		grid-column: 1/2;
		grid-row: 1;
	}
	.GridMitglieder__NN {
		grid-column: 2/3;
		grid-row: 1;
	}
	.GridMitglieder__OnOff {
		grid-column: 3/4;
		grid-row: 1;
	}
	.GridMitglieder__Geb {
		grid-column: 1/2;
		grid-row: 2;
	}
	.GridMitglieder__Mail {
		grid-column: 2/4;
		grid-row: 2;
	}
	.GridMitglieder__TN {
		grid-column: 1/4;
		grid-row: 3;
	}
	.GridMitglieder__Str {
		grid-column: 1/3;
		grid-row: 4;
	}
	.GridMitglieder__HN {
		grid-column: 3/4;
		grid-row: 4;
	}
	.GridMitglieder__PLZ {
		grid-column: 1/2;
		grid-row: 5;
	}
	.GridMitglieder__Ort {
		grid-column: 2/4;
		grid-row: 5;
	}
	.GridMitglieder__Dat {
		grid-column: 1/2;
		grid-row: 6;
	}
	.GridMitglieder__Erf {
		grid-column: 3/4;
		grid-row: 6;
	}
	.GridMitglieder__Button {
		grid-column: 4/5;
		grid-row: 1 / span 5;
	}
	/* ## */
	/* ########################################################### */

	/* ########################################################### */ 
	/* ## */
	.GridFirmen {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		border: 5px solid #70a4d6;
		margin-bottom: 1%;
	}
	.GridNeueFirma {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridFirmen__FN {
		grid-column: 1/3;
		grid-row: 1;
	}
	.GridFirmen__OnOff {
		grid-column: 3/4;
		grid-row: 1;
	}
	.GridFirmen__Mail {
		grid-column: 1/4;
		grid-row: 2;
	}
	.GridFirmen__TN {
		grid-column: 1/4;
		grid-row: 3;
	}
	.GridFirmen__Str {
		grid-column: 1/3;
		grid-row: 4;
	}
	.GridFirmen__HN {
		grid-column: 3/4;
		grid-row: 4;
	}
	.GridFirmen__PLZ {
		grid-column: 1/2;
		grid-row: 5;
	}
	.GridFirmen__Ort {
		grid-column: 2/4;
		grid-row: 5;
	}
	.GridFirmen__Dat {
		grid-column: 1/2;
		grid-row: 6;
	}
	.GridFirmen__Erf {
		grid-column: 3/4;
		grid-row: 6;
	}
	.GridFirmen__Button {
		grid-column: 4/5;
		grid-row: 1 / span 5;
	}
	/* ## */
	/* ########################################################### */
	
	/* ########################################################### */ 
	/* ## */
	.JFFVAdminButtonEingabe01 {
		/* background-color: white; */
		background-color: #94b1ff;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	.GridNeuerAdminButton {
		display: grid;
		grid-row: auto;
		grid-template-columns: 43% 43% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridAdminButton__BBEZ {
		grid-column: 1/2;
		grid-row: 1;
	}
	.GridAdminButton__BBEF {
		grid-column: 2/3;
		grid-row: 1;
	}
	.GridAdminButton__OnOff {
		grid-column: 3/4;
		grid-row: 1;
	}
	.GridAdminButton__BBN {
		grid-column: 1/2;
		grid-row: 2;
	}
	.GridAdminButton__BRF {
		grid-column: 2/3;
		grid-row: 2;
	}
	.GridAdminButton__BPF {
		grid-column: 1/3;
		grid-row: 3;
	}
	.GridAdminButton__BBER {
		grid-column: 1/2;
		grid-row: 4;
	}
	.GridAdminButton__BD {
		grid-column: 2/3;
		grid-row: 4;
	}
	.GridAdminButton__Button {
		grid-column: 4/5;
		grid-row: 1 / span 5;
	}
	.GridBackgroundBlue {
		background-color: #03A9F4;
	}
	.GridBackgroundGreen {
		background-color: lime;
	}
	.GridUeberschriftColorGray {
		color: grey;
	}
	.GridUeberschriftColorWhite {
		color: white;
	}
	/* ## */
	/* ########################################################### */





	.JFFVMitglied__Geb_Tag, .JFFVMitglied__Geb_Monat {
		width: 27%;
	}
	.JFFVMitglied__Geb_Jahr {
		width: 42%;
	}
	.JFFVMG_Button_C, .JFFVMG_Button_D, .JFFVMG_Button_N {
		border: none;
	}
	
	
	
	/* ########################################################### */ 
	/* ## */
	.JFFVHeadFooterAdmin01 {
		color: grey;
		font-size: x-small;
	}
	.JFFVHeadFooterAdmin02 {
		/* color: grey; */
		font-size: x-small;
	}
	.JFFVHeadFooterEingabe01 {
		background-color: #009f20;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	.JFFVHeadFooterEingabe02 {
		background-color: #dfffea;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	.JFFVHeadFooterEingabe03 {
		background-color: #ad94ff;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	.JFFVHeadFooterEingabe04 {
		background-color: #eee1ff;
		padding: 1%;
		border: 2px solid rgb(75 96 224);
		border-radius: 10px;
		margin-bottom: 0.5%;
	}
	/* ## */
	/* ########################################################### */ 

	/* ########################################################### */ 
	/* ## */
	.GridHeadFooter {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		border: 5px solid #70a4d6;
		margin-bottom: 1%;
	}
	.GridNeuerButtonH {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridNeuerButtonF {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 40% 6% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridHeadFooter__NN {
		grid-column: 1/2;
		grid-row: 1;
	}
	.GridHeadFooter__VN {
		grid-column: 2/3;
		grid-row: 1;
	}
	.GridHeadFooter__OnOff {
		grid-column: 3/4;
		grid-row: 1;
	}
	.GridHeadFooter__Geb {
		grid-column: 1/2;
		grid-row: 2;
	}
	.GridHeadFooter__Mail {
		grid-column: 2/4;
		grid-row: 2;
	}
	.GridHeadFooter__TN {
		grid-column: 1/4;
		grid-row: 3;
	}
	.GridHeadFooter__Str {
		grid-column: 1/3;
		grid-row: 4;
	}
	.GridHeadFooter__HN {
		grid-column: 3/4;
		grid-row: 4;
	}
	.GridHeadFooter__PLZ {
		grid-column: 1/2;
		grid-row: 5;
	}
	.GridHeadFooter__Ort {
		grid-column: 2/4;
		grid-row: 5;
	}
	.GridHeadFooter__Button {
		grid-column: 4/5;
		grid-row: 1 / span 3;
	}
	/* ## */
	/* ########################################################### */
	
	.JFFVHeadFooter__LZ_Tag, .JFFVHeadFooter__LZ_Monat {
		width: 27%;
	}
	.JFFVHeadFooter__LZ_Jahr {
		width: 42%;
	}
	.JFFV_HF_Button_C, .JFFV_HF_Button_D, .JFFV_HF_Button_N {
		border: none;
	}
	
	.GridRowNachOben {
		grid-row: 1;
	}
	
	
}
/* ##                                                           ## */
/* ############################################################### */
	

/* ############################################################### */
/* ##                                                           ## */
@media (min-width: 360px) {
	
	#TestContent::before {
		content: "(min-width: 360px)"; 
	}

	#content_area, .jtpl-content__inner {
		padding: 35px;
		margin-top: -35px;
		background-color: rgba(55, 55, 55, .45);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
	}
	
	.NeuerAbstandMatrix  {margin-top: -50px !important;}
	
}
/* ##                                                           ## */
/* ############################################################### */

/* ############################################################### */
/* ##                                                           ## */
@media only screen and (max-width:1024px) and (orientation: landscape) {
	
	#TestContent::before {
		content: "(max-width:1024px) and (orientation: landscape)"; 
	}

	.JFFVLI {
		font-size: 24px !important;
	}
	.Section01Top {
		margin-top: 25px;
	}
	.Section02Top {
		margin-top: 0;
	}
	.H101Top {
		padding-top: 0% !important;
	}
	.H102Top {
		margin-top: -2% !important;
	}
}
/* ##                                                           ## */
/* ############################################################### */

/* ############################################################### */
/* ##                                                           ## */
@media only screen and (max-width: 900px) and (orientation: landscape) {
	
	#TestContent::before {
		content: "(max-width: 900px) and (orientation: landscape)"; 
	}
	
	#HeaderTop01 {
		/* margin-top: 6% !important; */
		margin-top: 6%;
	}	

	.SectionLandscape {
		margin-top: 2.5%;
	}
	
	.FooterLandscape {
		padding-bottom: 2% !important;
	}
	
	.jtpl-logo a img {
		max-height: 180px;
	}
	.JFFVLI {
		font-size: 24px !important;
	}
	
}
/* ##                                                           ## */
/* ############################################################### */

/* ############################################################### */
/* ##                                                           ## */
@media (max-width: 800px) {
	
	
	#TestContent::before {
		content: "(max-width:800px)"; 
	}
	
	.JFFVPaddingRight {
		padding-right: 0px !important;
	}

	.LogoMargin {
		/* margin-top: 10%; */
	}
	.jtpl-logo a img {
		max-height: 180px;
	}
	.BreiteWert {
		width: 100%;
	}
	.JFFVSMText01 {
		font-size: large;
	}
	.JFFVSMText02 {
		font-size: small;
	}
	#JFFV_SM_DoIt, #JFFV_SM_Exit {
		width: 100%;
	}
	#JFFV_SM_DoIt {
		float: none;
		margin-bottom: 0px;
	}
	#JFFV_SM_Exit {
		margin-top: 10px;
	}
	.JFFVSP {
		display: none;
	}

	#TitelTextJFFV {font-size: 24px;}
	
	#TitelTextJFFVXX::before {
		content: "Jugendfußballförderverein Broitzem e.V."; 
	}
	.H101Top {
		padding-top: 33% !important;
	}

	#footer_areaX {
		padding: 0px;
		/* margin-top: -35px; */
		width: 100%;
		margin-left: 0%;
		padding-bottom: 6.5%;
		color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.StandardHoehe {height: 624px;}
	
	.NavVersatz  {
		padding-right: 0;
		margin-top: 10px;
	}
	
	#HeaderTop {margin-top: 25%;}
	
	.FooterTextHoeheXXX {font-size: x-small; margin: 0 !important;}
	
	#JFFVSocial01 {display: block;}
	#JFFVSocial02 {display: block;}
	
	.menu-button-container {
		display: flex;
	}
	.menu {
		position: absolute;
		top: 0;
		margin-top: 50px;
		left: 0;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	
	.menuSM {
		flex-direction: row;
		position: relative;
		margin-top: 0;
	}
	
	#menu-toggle ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	#menu-toggle:checked ~ .menu li {
		border: 1px solid #333;
		height: 3.5em;
		padding: 0.5em;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu > li {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0.5em 0;
		width: 100%;
		color: white;
		/* background-color: #222; */
		background-color: #445dff;
	}
	.menu > li:not(:last-child) {
		border-bottom: 1px solid #444;
	}
	#menu-toggle ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	#menu-toggle:checked ~ .menu li {
		border: 1px solid #333;
		height: 3.5em;
		padding: 0.5em;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.menu > a > li {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0.5em 0;
		width: 100%;
		color: white;
		/* background-color: #222; */
		background-color: #445dff;
		border-bottom: 1px solid #444;
		font-size: 20px;
	}
	.menuSM > a > li:not(:last-child) {
		border-bottom: 1px solid #444;
	}
	.menuSM > a > li {
		background-color: transparent;
		border-bottom: transparent;
		filter: invert(100%);
	}
	.menu > a > li:not(:last-child) {
		border-bottom: 1px solid #444;
	}
	.nav-item-Point {
		display: none !important;
	}

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
	/* xx */
	label.hamburg { 
	   display: block;
	   background: #555; width: 75px; height: 50px; 
	   position: relative; 
	   margin-left: auto; margin-right: auto;
	   border-radius: 4px;
	   z-index: 1;
	}

	input#hamburg {display:none}

	.hamburg { 
	   display: block;
	   /* background: #555; */
	   width: 75px;
	   height: 50px; 
	   position: relative; 
	   margin-left: auto;
	   margin-right: auto;
	   border-radius: 4px; 
	   transition: border-radius .5s;
	   margin-left: 0%;
	}

	.line { 
	   position: absolute; 
	   left:10px;
	   height: 4px; width: 55px; 
	   background: #fff;
	   border-radius: 2px;
	   display: block; 
	   transition: 0.5s; 
	   transform-origin: center; 
	}

	.line:nth-child(1) { top: 12px; }
	.line:nth-child(2) { top: 24px; }
	.line:nth-child(3) { top: 36px; }

	.hamburg.checked .line:nth-child(1){
	   transform: translateY(12px) rotate(-45deg);
	}

	.hamburg.checked .line:nth-child(2){
	   opacity:0;
	}

	.hamburg.checked .line:nth-child(3){
	   transform: translateY(-12px) rotate(45deg);
	}
	/* xx */
	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

	.JFFVMenu {display:none;}
	
	.JFFVLI {
		font-size: 20px !important;
		text-shadow: none;
	}
	
	.JFFVNav {display:none;}
	
	.JFFVSozialBox {display: block;}
	
	#JFFV_FB_01, #JFFV_Insta_01 {
		display: block;
	}
	
	#JFFV_FB_02, #JFFV_Insta_02 {
		display: none;
	}
	
	#SMViewport {
		display: block;
	}
	#JFFVMWDownload {
		display: block;
	}
	.JFFVKonto {
		padding-left: 0%;
	}
}
/* ##                                                           ## */
/* ############################################################### */

/* ############################################################### */
/* ##                                                           ## */
@media only screen and (max-width: 800px) and (orientation: landscape) {
	
	#TestContent::before {
		content: "(max-width: 800px) and (orientation: landscape)"; 
	}
	
	#HeaderTop01 {
		/* margin-top: 6% !important; */
		margin-top: 6%;
	}	

	.SectionLandscape {
		margin-top: 2.5%;
	}
	
	.FooterLandscape {
		padding-bottom: 2% !important;
	}
	
	.jtpl-logo a img {
		max-height: 180px;
	}
	
}
/* ##                                                           ## */
/* ############################################################### */

/* ############################################################### */
/* ##                                                           ## */
@media (max-width: 683px) {
	
	#TestContent::before {
		content: "(max-width: 683px)"; 
	}

	#TitelTextJFFV {font-size: 24px;}
	
	#TitelTextJFFV::before {
		content: "Jugendfußballförderverein Broitzem e.V."; 
	}
	.H101Top {
		padding-top: 33% !important;
	}
	.JFFVNavUl {
		padding-top: 3%;
		padding-bottom: 0%;
	}
	
	.FooterTextHoehe {font-size: x-small; margin: 0 !important;}
	
	.GridMitglieder {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 39% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		border: 5px solid #70a4d6;
		margin-bottom: 1%;
	}
	.GridNeuesMitglied {
		display: grid;
		grid-row: auto;
		grid-template-columns: 40% 39% auto;	
		grid-gap: 1%;
		align-items: center;
		padding: 0% 0.5% 2% 0.5%;
		/* border: 5px solid #70a4d6; */
		margin-bottom: 1%;
	}
	.GridMitglieder__Button {
		grid-column: 1/5;
		grid-row: 6;
	}
	.JFFVMitglied__Geb_Tag, .JFFVMitglied__Geb_Monat {
		width: 24%;
	}
	.JFFVMG_Button_C {
		border: none;
		width: 15%;
	}
	.JFFVMG_Button_D {
		border: none;
		width: 15%;
		float: right;
	}
	.JFFVMG_Button_N {
		border: none;
		width: 30%;
		margin-left: 33%;
	}

}
/* ##                                                           ## */
/* ############################################################### */