@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Noto+Sans+Display:wght@400;600&family=Playball&display=swap');

/* Body --------------------------------------------------------- */

body {
	margin: 0px; padding: 0px;
}

#welcome, #country_field, #body_content, #primary-menu, #mobile-menu, #body_matches, #karten, #anrede, #vorname, #nachname, #email, #country, #team, #league, #month, #send 
 {
font-family: 'Noto Sans Display', sans-serif;
}

#body_content {
	background-image: url(/images/bg_stadion.jpg);
	height: 100%;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

#body_matches {
	background-image: url(/images/bg_matches.jpg);
	height: 100%;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

#body_video {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  z-index: 0;
}

section {
	display: flex; justify-content: center;align-items: center; 
	width: 100%; height: 100%;
}

/* Welcome Page ------------------------------------------------- */

#country_field {
	font-family: 'Archivo Narrow', sans-serif;
	background-color: rgba(198,160,135,0.60); 
	padding: 8px; border-radius: 10px; 
	width:405px; 
	border: 1px solid silver; color: white; 
	box-shadow: black 1px 1px 2px; 
	font-size:24px; text-shadow: black 1px 1px 2px; 
	position: absolute; margin-right: 10px;
	}

#welcome_logo {
	margin-bottom: 275px;
	}

#welcome {
	padding: 2px; margin-left: 6px; margin-right: 6px; 
	font-size: 22px; 
	border-radius: 5px; 
	width:160px; 
	background-color: #E7E4E4;
	}


/* Header ------------------------------------------------------ */

#header {
	margin-top: 0px; padding: 0px;
	position: fixed; z-index: 20;
	background-image: url(/images/black_50.png); background-repeat: repeat;
	width: 100%;
	border-bottom: 1px solid grey;
	border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;
	animation: einblenden 2s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */
}

/* Content ---------------------------------------------------------*/

#content {
	position: relative;width: 800px;
	padding: 0px; margin-top: 130px;
	display: -ms-flexbox; display: flex; flex-flow: column;
	z-index: 5;
}

#headline {
	width: 100%; text-align: left; color: white; font-family: 'Playball', cursive; font-size: 55px;text-shadow: -1px -1px 1px;
	}

.headline_listing {
	margin-top: 100px;
	}

#content_listing { 
	width:750px; background-color: white; opacity: 0.85;
	color: black; padding: 25px;
	margin-top: 15px; border-radius: 8px; border: 1px solid silver;
	box-shadow: black 1px 1px 2px;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

strong {
	font-size: 18px; font-weight: bolder; line-height: 45px;
}

/* Primary Menu -------------------------------------------------*/

#primary-menu {
	float: right; margin-top: 20px; margin-right: 20px;
}

#primary-menu li {
	display: inline;
}

#primary-menu a {
	color: white; font-size: 14px; text-decoration: none;
	margin-right: 18px;
	opacity: 1;
	z-index: 100000;
}

#primary-menu a:hover {
	color: white; text-decoration: none;
}

/* Mobile Menu -------------------------------------------------*/

#mobile-menu {
	margin-top: 50px;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#mobile-menu li {
	margin: 40px; padding: 8px; width: 200px; text-align: center;
	border: 1px solid white; border-radius: 10px;
	background-color: black;
	list-style-type: none;
}

#mobile-menu a {
	color: white; font-size: 24px; text-decoration: none;
}

/* Logo ---------------------------------------------------------*/


#logo {
	position: relative; display: -ms-flexbox; display: flex; align-items: center;
	-ms-flex-align: center;
	max-height: 100%;
	float: left;
}

#logo img {
	display: block; max-width: 100%; max-height: 100%; height: 100px;
}

/* Request ---------------------------------------------------- */

#request {
	font-size: 18px;
}

/* Copyright ---------------------------------------------------- */

#copyright {
	margin-top: 20px; margin-bottom: 20px; width: 100%;
	color: #FFF;
	text-align: center;
	text-shadow: black 1px 1px 2px; 
	font-size: 16px;
}

#copyright a {
	color: silver;
	text-decoration: none;
}

/* Buttons ------------------------------------------------------ */

.button {
	display: inline-block; position: relative; outline: none; text-align: center;
	white-space: nowrap;
	margin: 5px; padding: 8px 26px;
	font-size: 1rem; font-weight: 700;	color: #FFF; text-decoration: none;	line-height: 30px; letter-spacing: 1px;	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	background-color: #a68a6a;
	border-radius: 5px;
}

.button:hover {
	background-color: #09AB5D;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	text-decoration: none;
	cursor: pointer;
}

.full_button {
display: none;
}


/* Filter Page ------------------------------------------------------ */

#filter_box {
	position: fixed; display: flex; justify-content: center;align-items: center; 
	width: 100%; height: 195px; 
	margin-top:0px; 
	background-image: url(/images/header_center.jpg); z-index: 10;
  	background-position: center;
  	background-repeat: no-repeat;
}

#filter {
	width:800px; position: fixed; top: 185px; z-index: 30; padding: 0px;
	border-radius: 8px; border: 1px solid #545454;
	box-shadow: black 1px 1px 2px;
	background-color: black;
	animation: einblenden 3s;
    -moz-animation: einblenden 3s; /* Für Firefox */
    -webkit-animation: einblenden 3s; /* Für Safari und Chrome */
    -o-animation: einblenden 3s; /* Für Opera */
	}

#country {
	width: 125px;
	}
	
#team {
	width: 190px;
	}

.match_filter select {font-size: 16px; margin: 0px; border-radius: 8px; background-color: #CECECE; color: black;}
.match_filter label {font-size: 13px; margin: 0px; padding: 0px; color: #C3C3C3; font-weight: normal;}
.match_filter td {color: white; padding-left: 10px; padding-top: 8px; padding-bottom: 8px;}
			
#match_listing_box {
	position: relative;
	margin:0px; padding: 0px; border: 0px solid blue; padding-top: 260px;
	display: -ms-flexbox; display: flex; flex-flow: column;
	height: 100%; width: 100%;
	justify-content: center; align-items: center;
	z-index: 5;
	animation: einblenden_content 2s;
        -moz-animation: einblenden_content 2s; /* Für Firefox */
        -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
        -o-animation: einblenden_content 2s; /* Für Opera */
}
#match_listing {
	width:800px; background-color: white; color: black; 
	margin-top:10px; border-radius: 8px; border: 1px solid silver; box-shadow: inset;
	box-shadow: black 1px 1px 2px;
	opacity: 0.85;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#concert_listing_box {
	position: relative;
	margin-top:125px; padding: 0px; border: 0px solid blue;
	display: -ms-flexbox; display: flex; flex-flow: column;
	height: 100%; width: 800px;
	justify-content: center; align-items: center;
	z-index: 5;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#concert_listing {
	width:800px; background-color: white; color: black; 
	margin-top:10px; border-radius: 8px; border: 1px solid silver; box-shadow: inset;
	box-shadow: black 1px 1px 2px;
	opacity: 0.85;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#client_listing { 
	width:770px; background-color: white; color: black; padding: 15px; font-style: italic;
	margin-top:15px; border-radius: 8px; border: 1px solid silver;
	box-shadow: black 1px 1px 2px;
	opacity: 0.85;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}
#client_listing .name  {
	float: right; padding-top: 5px; font-weight: bold; font-size: 16px; font-style: normal;
}
        
.date {float: left; text-align:left; padding: 5px; width: 150px; border: 0px solid red;line-height: 21px; font-size: 20px;}
.date small {font-size: 14px; padding-top: 0px;}	
.match {float: left; text-align:left; padding: 5px; width: 480px; border: 0px solid green; line-height: 21px; font-size: 20px;}
.match small {font-size: 14px; padding-top: 0px;}

.request {float: right; }

.reset {height: 34px; width: 34px; margin-top: 20px;	
}

.contact {
	margin-right: 45px;
	width: 95px; height: 95px;
}

.office {
	height: 150px; margin-top: -20px;
}

#hide {
	display: none;
}
#button {
	display: none;
}

/* Request Form ------------------------------------------------- */

.form-body { height: 510px; padding: 25px;}
.form-headline {color: black; font-family: 'Playball', cursive; font-size: 45px; padding-top: 30px; padding-left: 20px;}
.fixture {font-size: 22px; padding-left: 0px; font-weight: 600;}
.anfrage {font-size: 18px; font-weight: 600;}
.notes {font-size: 16px; margin-left: 10px;}
.close { padding-right:10px; float: right; margin-right: 20px; }

#karten { width: 125px; font-size: 18px; height: 38px;}
#formular {width: 590px;}
#anrede { width: 80px; font-size: 18px; height: 38px; margin-right: 8px;}
#vorname { padding: 8px; font-size: 18px;}
#nachname { padding: 8px; font-size: 18px;}
#email { padding: 8px; font-size: 18px; margin-bottom: 10px;}
#datenschutz { font-size: 10px; float: left; width:200px; margin-top:10px; border: 0px solid red;}
#send { float: right; border: 0px; }








/* Smartphone --------------------------------------------------------

----------------------------------------------------------------------

---------------------------------------------------------------------- */

@media only screen and (max-width: 560px) {
	

#welcome, #country_field, #body_content, #primary-menu, #mobile-menu, #body_matches, #karten, #anrede, #vorname, #nachname, #email, #country, #team, #league, #month, #send 
 {
	font-family: 'Archivo Narrow', sans-serif;
}
	
body {
	margin: 0px; padding: 0px;
	width: 100%; 
}
	
/* Welcome Page ------------------------------------------------- */

#country_field {
	background-color: rgba(198,160,135,0.60); 
	padding: 8px; border-radius: 10px;
	border: 1px solid silver; color: white; box-shadow: black 1px 1px 2px; 
	font-size:18px; width: 350px;
	text-shadow: black 1px 1px 2px; 
	position: absolute; margin-right: 10px;
	}

#welcome_logo {
	margin-bottom: 225px;
	height: 150px; width: auto;
	}

#welcome {
	padding: 2px; margin-left: 6px; margin-right: 6px; 
	font-size: 18px;
	border-radius: 5px; 
	width:160px; 
	background-color: #E7E4E4;
	}

#body_matches {
	background-image: url(/images/bg_mobile.jpg);
	background-attachment: fixed;
	}
	
#body_content {
	background-image: url(/images/bg_mobile.jpg);
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	}

#primary-menu {
	display:none;
}
	
/* Header ------------------------------------------------------ */
	
#header {
	margin-top: 0px; padding: 0px;
	position: fixed; z-index: 20;
	background-color: black;
	width: 100%;
	border-bottom: 1px solid grey;
	border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;
	animation: einblenden 2s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */
}

/* Content ---------------------------------------------------------*/	

#content {
	width: 90%; padding: 0px 0px 0px 0px; margin-top:125px; margin-left: 10px; margin-right: 10px;
	font-size: 16px;
	}
	
#headline {
	color: white; font-family: 'Playball', cursive; font-size: 35px;text-shadow: -1px -1px 1px; margin-left: 15px;
	}
	
.headline_listing {
	margin-top: 70px;
	}

#content_listing { 
	width:86%; background-color: white;
	color: black; padding: 25px;
	margin-top: 15px; border-radius: 8px; border: 1px solid silver;
	box-shadow: black 1px 1px 2px;
	animation: einblenden_content 2s; 
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#filter_box {
	background-image: none;
	position: fixed; display: flex; justify-content: center;align-items: center; 
	width: 100%; height: 195px; 
	margin-top:0px;
}
	
#filter {
	width:95%; position: fixed; top: 156px; z-index: 30;
	border-radius: 8px; border: 1px solid #545454; box-shadow: inset;
	background-image: url(/images/black_50.png);
	background-repeat: repeat;
	animation: einblenden 3s;
    -moz-animation: einblenden 3s; /* Für Firefox */
    -webkit-animation: einblenden 3s; /* Für Safari und Chrome */
    -o-animation: einblenden 3s; /* Für Opera */
	}
	
#country {
	width: 145px; font-size: 21px; margin-top: 5px; margin-bottom: 5px;
	}
	
#team {
	width: 215px;font-size: 21px; margin-top: 5px; margin-bottom: 5px;
	}
	
#match_listing_box {
	padding-top: 220px;
}
	
#match_listing {
	cursor: pointer;
	width:95%; background-color: white; color: black; 
	margin-top:10px; border-radius: 8px; border: 1px solid silver;
	font-size: 14px;
	animation: einblenden_content 2s; 
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}
	
#client_listing_box {
	position: relative;
	margin:0px; padding: 0px; padding-top: 125px;
	display: -ms-flexbox; display: flex; flex-flow: column;
	height: 100%; width: 100%;
	justify-content: center; align-items: center;
	z-index: 5;
	animation: einblenden_content 2s; 
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#client_listing { 
	width:92%; background-color: white; color: black; padding: 15px; font-style: italic;
	margin-top:15px; border-radius: 8px; border: 1px solid silver; box-shadow: inset;
	box-shadow: black 1px 1px 2px;
	animation: einblenden_content 2s; 
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#concert_listing_box {
	position: relative;
	margin-top:125px; padding: 0px; border: 0px solid blue;
	display: -ms-flexbox; display: flex; flex-flow: column;
	height: 100%; width: 800px;
	justify-content: center; align-items: center;
	z-index: 5;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

#concert_listing {
	width:95%; background-color: white; color: black; 
	margin-top:10px; border-radius: 8px; border: 1px solid silver; box-shadow: inset;
	box-shadow: black 1px 1px 2px;
	opacity: 0.85;
	animation: einblenden_content 2s;
    -moz-animation: einblenden_content 2s; /* Für Firefox */
    -webkit-animation: einblenden_content 2s; /* Für Safari und Chrome */
    -o-animation: einblenden_content 2s; /* Für Opera */
}

.date {
	width: 90px;	
}
.date small {font-size: 12px; padding-top: 0px;}	
.match {
	width: 280px;font-size: 20px;
}
	.match small {font-size: 13px; padding-top: 0px;}
.request {
	display: none;	
}
	
.reset {
	height: 34px; width: 34px;	
}
	
.no_show {
	display: none;	
}
	
.contact {
	margin-right: 25px;
	width: 90px; height: 90px;	
}
.office {
	height: 90px; margin-top: 38px;
}

#hide {
	visibility: visible;
}
	
#button {
	display: inline;
	margin-top: 20px; margin-right: 20px;
}

/* Mobile Menu -------------------------------------------------*/

#mobile-menu {
	margin-top: 50px;
	animation: einblenden 2s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */
}

#mobile-menu li {
	margin: 40px; padding: 8px; width: 200px; text-align: center;
	border: 1px solid white; border-radius: 10px;
	background-color: black;
	list-style-type: none;
}

#mobile-menu a {
	color: white; font-size: 24px; text-decoration: none;
}

/* Request Form ------------------------------------------------- */

.form-body {height: 510px; padding-top:10px; padding-left: 20px; padding-right: 20px;  }
.form-headline {color: black; font-family: 'Playball', cursive; font-size: 35px;}
.fixture {font-size: 20px; font-weight: 600;}
.anfrage {font-size: 20px; font-weight: 600;}
.notes {font-size: 15px; margin-left: 10px;}
.close { float: right; margin-top: -10px; padding: 0px;}

#karten { width: 125px; font-size: 18px; height: 38px;}
#formular {width: 350px;}
#anrede { width: 80px; font-size: 18px; height: 38px; margin-right: 10px;}
#vorname { padding: 8px; font-size: 18px; }
#nachname { padding: 8px; font-size: 18px;}
#email { padding: 8px; font-size: 18px; margin-bottom: 10px;}
#datenschutz{ width: 130px; border: 0px solid red; font-size: 9px; float: left;  margin-top:10px;}
#send { margin: 5px; padding: 8px;}
	
}

@media only screen and (max-width: 400px) {
	
	#team {width: 180px;}
	.date {width: 90px;}
	.match {width: 240px;}
	
	
	}

/* Animations ------------------------------------------------------ */

@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@keyframes einblenden_content {
    from { opacity:0; }
    to { opacity:0.85; }
}

@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}