/********************/
/*	  INHALT		*/
/*********************
1.0 ALLGEMEIN				
2.0 CONTAINER		
3.0 TEXT
4.0 FORMULAR
5.0 TABELLEN
6.0 SONSTIGES
********************/

/*!* ============================================= 1.0 ALLGEMEIN ============================================= *!

	html, body {
		background-color: #FFF;
		margin: 0px;
		padding: 0px;

		font-family: 'Charter';
		font-size: 20px;
		font-weight: 100;
		
		outline: none;
		color: #818485;
	}
	
	a, a:link, a:hover, a:active {
		color: #000;
		outline: none !important;
		text-decoration: none !important;
	}
	img {
		outline: none;
		border: none;
	}
	strong { font-weight: 500; }
	
!* ============================================= 2.0 CONTAINER ============================================= *!
	
	#main {
		background-color: #FFF;
		width: 1000px;
		min-height: 100%;
		position: relative;
		left: 50%;
		margin: 0px 0px 0px -500px;
	}
		#phone-logo.container {
			margin: 0px 15px;
		}
		#phone-logo {
			padding: 30px 0px 0px 0px;
			border-top: 9px solid #E9E9DF;
		}

		!* NAVIGATION *!
		#nav {
			position: relative;
			margin: 0px;
			padding: 0px;
			z-index: 300;
			background-color: #000000;
		}
			#nav .container {
				position: relative;
				height: 100%;
			}
				#nav .logo {
					float: left;
					width: 240px;
					height: 26px;
					margin: 25px 32px 0px -15px;
				}
				
				#nav ul {
					position: relative;
					height: 100%;
					margin: 0px -15px 0px 0px;
					padding: 0px;
					float: right;
					list-style: none;
				}
					#nav li {
						background-color: #000000;
						color: #ffff00;
						margin: 0px;
						list-style: none;
						float: left;
						font-family: 'Knockout';
						font-weight: bolder;
						text-transform: uppercase;
						font-size: 45px;
					}
						#nav li:hover, #nav li:active { background: #1d1d1b; color: #FFF; }
		
		!* CONTENT *!
		#content .container {
			padding: 80px 0px 90px 0px;
		}

		#teaser {
			background: url("../img/bg-teaser.jpg") no-repeat #0F0F0F center;
		}
			#teaser .container {
				padding: 30px 0px 20px 0px;
			}
		#design {
			background: #ffff00;
		}
		#contact, #contact a {
			font-size: 15px;
			background-color: #000;
			color: #FFF;
		}

		#contact a:hover {
			color: #66C000;
		}
			
			!* Tabelle *!
			table {
				color: #554e55;
				font-weight: 500;
				border: none;
			}
				table thead tr {
					border-top: none;
					border-bottom: 2px #554e55 solid;
				}
					table thead th {
						font-weight: 500;
						padding: 12px 2px;
					}
				
				table tbody tr {
					border-top: 1px #b9b8b8 dotted;
					border-bottom: none;
				}
					
					table tbody .file-tick {
						margin: 6px 0px 6px 0px;
					}
					table tbody .file-detail {
						margin: 6px 0px 6px 20px;
						font-weight: 300;
					}

				#advantages {
					margin-bottom: 65px;
				}

				.advantage-number {
					font-family: 'Knockout';
					width: 20%;
					float: left;
				}
				.advantage-text {
					width: 80%;
					float: right;
				}

				.design-ipad {
					margin: 0px 0px 0px 55px;
					width: 550px;
					text-align: center;
				}

				.contact-margin { margin: 80px 0px 70px 0px; }
			
			
		.margin-bottom {
			margin-bottom: 40px;
		}
		
		.low-opacity { opacity: 0.4; }
		.text-shadow { text-shadow: 0px 0px 3px #888888; }
		.img-shadow { box-shadow: 0px 0px 3px #888888; }
		.img-rounded { border-radius: 4px; }
		
		.border-solid-top-white	{ border-top: 1px #FFF solid; padding: 20px 0px 20px 0px; }
		.border-solid-top		{ border-top: 2px #555553 solid; }
		.border-dotted-top		{ border-top: 1px #b9b8b8 dotted; padding: 10px 0px 20px 0px; overflow: hidden; }
		.border-dotted-right	{ border-right: 1px #554e55 dotted; padding-right: 17px; }
		.border-dotted-bottom	{ border-bottom: 1px #b9b8b8 dotted;  }
		.border-dotted-left		{ border-left: 1px #554e55 dotted; padding-left: 17px; }
		
			#kontakt .border-dotted-top, #schulunterricht .border-dotted-top { border-top-color: #FFFFFF; }
			
!* ============================================= 3.0 TEXT ============================================= *!

	!* ------ 3.1 Titel ------ *!
	h1, h2, h3, h4, h5, h6 {
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		font-family: 'Knockout';
		font-weight: 500;
		text-transform: uppercase;
	}
	
	h1 {
		padding: 140px 0px 45px 50px;
		font-size: 40px;
		font-weight: 300;
		color: #FFFF00;
	}
	h2 {
		padding: 0px 0px 40px 0px;
		
		font-size: 40px;
		font-weight: 300;
		line-height: 45px;
		color: #000;
	}
		h2 strong {
			font-weight: 500;
		}
			#contact h2 { color: #FFF; }
	
	h3 {
		padding: 0px 0px 0px 0px;
		font-size: 40px;
		font-weight: 300;
		line-height: 35px;
	}

	#content p {
		margin: 10px 0px 15px 0px;
		font-weight: 500;
		color: #000000;
	}
		#content .text-small {
			font-size: 15px;
			margin: 0;
		}
		#content .text-large {
			font-size: 40px;
			margin: 0;
		}
		#content strong { font-weight: 700; }
		#content .text-light { font-weight: 100; }

	.text-black		{ color: #000; }
	.text-lightgrey	{ color: #b9b8b8; }

	#feature-row {
		margin-top: 65px;
	}*/



h1, h2, h3, h4, h5, h6 {
	font-family: "Knockout 69 A", "Knockout 69 B", Impact, sans-serif;
	text-transform: uppercase;
}

h1 {
	padding-bottom: 25px;
}

p {
	font-family: Charter;
	font-size: 18px;
}

a {
    color: white !important;
    font-family: "Knockout 69 A", "Knockout 69 B", Impact, sans-serif !important;
    font-size: 32px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    height: 100%;
    position: relative;
    display: inline-block;
}

a:hover {
    color: yellow !important;
    border-bottom: 1px solid yellow;
}

#kontakt a {
    height: fit-content;
    display: flex;
}

#kontakt a:hover {
    border-bottom: 0px;
}

#kontakt a:hover svg {
    fill: yellow;
}

#kontakt a:hover h3 {
    color: yellow;
}

#kontakt .btn-primary:hover {
    background-color: black !important;
    color: yellow !important;
    border: 1px solid yellow !important;
}

#kontakt .btn-primary:hover svg {
    fill: yellow !important;
}

footer {
    background-color: black;
}

footer > .container {
    padding: 0px !important;
}

footer .btn-primary {
    background-color: yellow !important;
    color: black;
}

footer h1 {
    color: white;
}

footer h3 {
    color: white;
}

footer p {
    color: white;
}

hr {
    color: white;
}

#gemeindewebseiten {
    background-color: black;
    color: white;
}

#gemeindewebseiten h1, h2 {
    color: white;
}

#stoerer {
    background-color: yellow;
    color: black;
}

.btn {
    padding: 6px 34px !important;
    font-family: "Knockout 69 A", "Knockout 69 B", Impact, sans-serif;
    text-transform: uppercase;
    background-image: none !important;
    font-size: 20px;
    border-radius: 0;
    min-width: 300px;
}

.btn-primary {
    border-color: black !important;
    background-color: black !important;
    color: yellow;
}

.btn-secondary {
    border-color: black !important;
    background-color: yellow !important;
    color: black;
}

#our_website, #write_us {
    margin-left: 12px !important;
}

#our_website svg {
    margin-bottom: 6px;
}

#write_us svg {
    margin-bottom: 3px;
}

.container {
    padding: 200px 45px !important;
}

#raumreservation {
    background-color: black;
}

#raumreservation h1 {
    color: white;
}

#raumreservation p {
    color: white;
}

.btn:hover {
    background-color: black !important;
    color: yellow !important;
}

.btn-primary:hover {
    background-color: yellow !important;
    color: black !important;
}

#our_website:hover svg {
    fill: yellow;
}

#our_website svg {
    margin-left: 18px;
    margin-bottom: 7px;
}

#write_us:hover svg {
    fill: black;
}

#our_website svg {
    margin-left: 18px;
}

#header > .container {
    padding: 0px !important;
}



#header {
    width: 100%;
    height: 90vh;
    background-color: black;
    color: yellow;
}

#headline {
    text-transform: uppercase;
    font-size: 56px;
}

img {
    max-width: 100%;
}

a.nav-link {
    font-size: 24px;
}

button.navbar-toggler {
    border: none;
}

nav {
    background-color: black !important;
}