html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: baseline;
	font-family: 'Quicksand', Bahnschrift light, sans-serif;
	font-size: 16px;

}

section {
	width: 100%;
	min-height: 100%;
	float: left;

}

a {
	text-decoration: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;

}

li {
	list-style-type: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
}

h1, h3, a {
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	color: #494949;
	text-transform: uppercase;
}

h3 {font-size: 40px;
	padding-top: 6%;
	margin-bottom: 5px;
	margin-top: 0;
	}

h4, p {
	font-size: 15px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	color: #494949;
}


#logo, li, img, .fa-bars {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}

.fa-bars {display: none;}
button {display: none;}

/*HEADER********/

header {
	width: 100%;
	height: 67px;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	z-index: 1;
}

#logo {
	width: 140px;
	float: left;
	margin: 10px 0 0 25px;
}

#logo:hover {
	opacity: 0.5;
}

#logo img {
	width: 42%;
}

	.main-nav {
	float: right;
	margin: 10px 50px 0 0;
	clip-path: initial;
}

	.main-nav ul li {
	float: left;
	margin-left: 25px;
}

	.main-nav ul li a {
	font-size: 16px;
}

	.main-nav ul li:hover {
	opacity: 0.5;
}

/*HOME****/

#home {
	background: url(../images/BG.jpg);
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}


#home .headingcontainer .heading {
	position: absolute;
	left: 0;
	width: 100%;
	top: 45%;
	text-align: center;
}

#home hr {
	width: 40px;
	height: 3px;
	background: #494949;
	border: 0;
	margin: 0 auto 40px auto;
}


#home h1 {
	font-size: 100px;
	color: #fff;
	margin-top: 0;
	margin-bottom: 0;
}

#home h2 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	font-size: 35px;
	color: #fff;
	margin: 0 auto 0 auto;
}

/* PRAXIS***/

#praxis {
	background-color: #eef0ee;
	padding-bottom: 100px;
}

#praxis hr {
	width: 50px;
	height: 1px;
	background: #494949;
	border: 0;
	margin: 0 auto 40px auto;
}


#praxis h4 {
	font-size: 18px;
}


#praxis img {
	width: 300px;
	height: 450px;
	border-radius: 5px;
	margin: 5px;
}

#praxis img:hover {
	transform: scale(1.5);
	-webkit-transform: scale(1.5)
	-moz-transform: scale(1.5)
	-o-transform: scale(1.5);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}

#praxis p {
	width: 700px;
	margin: 0 auto 0 auto;
	padding-top: 25px;
	padding-bottom: 50px;
}

#raumlichkeiten h4 {
	font-size: 18px;

}

#raumlichkeiten {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 50px;
	margin-left: 15px;
	margin-right: 15px;
}

#bilder img {
	width: 400px;
	height: 300px;
	border-radius: 5px;
	margin: 5px;
}

/*
#raumlichkeiten ul li {
	width: 50%;
	float: left;
	margin-bottom: 20px;

}
*/

#raumlichkeiten ul li img {

	width: 400px;
	height: 300px;
	border-radius: 5px;

}

#raumlichkeiten ul li img:hover {
	transform: scale(1.5);
	-webkit-transform: scale(1.5)
	-moz-transform: scale(1.5)
	-o-transform: scale(1.5);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}



/* LEISTUNGEN***/

#leistungen {
	background-color: #a5d245;
	padding-bottom: 100px;
}

#leistungen hr {
	width: 50px;
	height: 1.1px;
	background: #fff;
	border: 0;
	margin: 0 auto 40px auto;
}

#leistungen h3 {
	color: #fff;
	margin: 0;
}

#auflistung h4 {
	font-size: 20px;
	color: #fff;
}


#auflistung {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: table;
	padding-top: 20px;
}



/* AKTUELL***/

#aktuell {
	background-color: #eef0ee;
	padding-bottom: 100px;
}

#aktuell hr {
	width: 50px;
	height: 1.1px;
	background: #494949;
	border: 0;
	margin: 0 auto 40px auto;
}


#aktuell h3 {
	margin: 0;
}

#news {
	width: 900px;
	margin: 0 auto 0 auto;
}

#news ul {
	padding: 0;
}

#news ul li {
	width: 50%;
	float: left;
	margin-bottom: 15px;
}

#news ul li p {
	text-align: left;
	float: left;
	padding-right: 15px;
}

#news img {
	width: 400px;
	height: 287px;
	border-radius: 5px;
	margin:15px;
}

/* KONTAKT***/

#kontakt {
	background-color: #a5d245;
}

#kontakt hr {
	width: 50px;
	height: 1.1px;
	background: #fff;
	border: 0;
	margin: 0 auto 40px auto;
}


#kontakt h3 {
	margin: 0;
	color: #fff;
}

#kontakt div a {
	color: #fff;

}

#kontakt p {
	color: #fff;
	margin: 45px 15px 30px 15px;
}

.tabelle {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

caption h5 {
	font-size: 20px;
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 10px;
	text-align: left;
}

table {
	margin: 40px;
}


/*responsive iframe GoogleMaps Karte*/

	.responsive-frame iframe {
	  position: absolute;
		top: 0;
		left: 0;
	  width: 100%;
	  height: 100%;
	}

	.responsive-frame {
	position: relative;
	padding-bottom: 41.66%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	}


/* FOOTER***/

#footer {
	width: 100%;
	min-height: 13%;
	background-color: #fff;
	padding-bottom: 25px;
}

#meta_nav {
	padding-top: 35px;
}

#meta_nav p {
	font-size: 12px;
	color: #494949;
	padding-top: 5px;
}

#meta_nav a {
	margin-top: 10px;
}

/* IMPRESSUM & DATENSCHUTZ ***/

#impressum {
	padding-bottom: 30px;
	background-color: #eef0ee;
}

#impressum hr {
	width: 50px;
	height: 1px;
	background: #494949;
	border: 0;
	margin: 0 auto 40px auto;
}


#impressum h2 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	font-size: 25px;
	margin: 0 auto 0 auto;
	color: #494949;
}

#impressum p {
	margin: 0 35px 0 35px;
	color: #494949;

}


#datenschutz {
	padding-bottom: 30px;
	background-color: #eef0ee;
}

#datenschutz hr {
	width: 50px;
	height: 1.1px;
	background: #494949;
	border: 0;
	margin: 0 auto 40px auto;
}


#datenschutz h2 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	font-size: 25px;
	margin: 0 auto 0 auto;
	color: #494949;
}

#datenschutz p {
	margin: 0 35px 0 35px;
	color: #494949;
}




/* MEDIA QUERIES **********/

/* TABLETS ***/

@media screen and (max-width: 1024px) {
	header {
		height:auto;
	}

	#logo {
		width: 100px;
		margin-top: 5px;
		margin-left: 20px;
	}

	.main-nav {
		margin-top: 0;
		clip-path: initial;
	}

	.main-nav ul li {
		font-size: 12px;
	}

	#home h1 {
		font-size: 400%;
	}

	#home h2 {
		font-size: 150%;
	}

	h3 {
		padding-top: 8%;

	}

	#praxis {
		height: auto;
	}

	#praxis p {
		width: 80%;

	}

	#räumlichkeiten {
		width: auto;
	}

	#raumlichkeiten ul li {
		width: 100%;
		float: none;
	}

	#raumlichkeiten ul li:last-child {
		padding-bottom: 20%;
	}

	#bilder img {
		width: 50%;
		height: auto;
		}

	#leistungen {
		height: auto;
	}

	#auflistung h4 {
		font-size: 18px;
	}

	#aktuell {
		height: auto;
	}

	#news {
		width: 100%;
	}

	#news ul li {
		width: 100%;
		float: none;
	}

	#news ul li:last-child {
		padding-bottom: 20%;
	}

	#news ul img {
		width: 50%;
		height: auto;
	}

	#news ul li p {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
	}

	#kontakt {
		height: auto;
	}


/*
	#kontakt iframe {
		width: 400px;
		height: 300px;
	}
*/

.responsive-frame {
padding-bottom: 60%;
}



/* MOBILE ***/

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

	#logo {
		width: 80px;
		margin-left: 20px;
		}

		/*
			.fa-bars {
				font-size: 17px;
				display: inline-block;
				width: 100%;
				cursor: pointer;
				text-align: right;
				float: right;
				margin: -25px 30px 0 0;
				color: gray;

			}

			.fa-bars:hover {
				opacity: 0.5;
			}

		*/

	.main-nav {
		margin:0;
		float: none;
		position: absolute;
		width: 100%;
		top: 100%;
		-webkit-clip-path: circle(0px at top);
						clip-path: circle(0px at top);
		-webkit-transition: all ease-in-out 900ms;
						transition: all ease-in-out 900ms;
	}

	.main-nav--open {
		-webkit-clip-path: circle(100% at top);
						clip-path: circle(100% at top);
	}

	.main-nav ul {
		margin: 0;
		padding: 0;
	}

	.main-nav ul li {
		color: #494949;
		width: 100%;
		padding: 5px 0;
		margin: 0;
		font-size: 11px;
		border-top: 1px solid #a5d245;
		background-color: #fff;
		opacity: 0.95;
	}

	.main-nav ul li:hover,
	.main-nav ul li:focus,
	.main-nav ul li:active {
		background-color: #ebf5cc !important;
		opacity: 0.9;
	}


		/*Hamburger menu*/
		.menu-toggle{
			padding: 0.9em;
			position: absolute;
			top: 0.4em;
			right: 1.2em;
			cursor: pointer;
		}

		.menu-toggle:hover {
			opacity: 0.5;
		}

		.hamburger,
		.hamburger::before,
		.hamburger::after {
			content: '';
			display: block;
			background: gray;
			height:2px;
			width: 1.2em;
			border-radius: 3px;
			-webkit-transition: all ease-in-out 500ms;
							transition: all ease-in-out 500ms;
		}

		.hamburger::before {
			-webkit-transform: translateY(-5px);
							transform: translateY(-5px);
		}

		.hamburger::after {
			-webkit-transform: translateY(3px);
							transform: translateY(3px);
		}

		.open .hamburger {
			-webkit-transform: rotate(45deg);
							transform: rotate(45deg);
		}

		.open .hamburger::before {
			opacity: 0;
		}

		.open .hamburger::after {
			-webkit-transform: translateY(-1.9px) rotate(-90deg);
							transform: translateY(-1.9px) rotate(-90deg);

		}



		h3 {
			padding-top: 16%;
			font-size: 170%
		}

	#home h1 {
		font-size: 240%;
	}

	#home h2 {
		font-size: 130%;
		height: auto;
	}

	#praxis {
		height: auto;
	}

	#praxis h4 {
		font-size: 93%;
	}

	#praxis p {
		font-size: 90%;
	}

	#praxis img {
		width: 200px;
		height: 300px;

	}

	#bilder img {
		width: 60%;
		height: auto;
	}

	#leistungen {
		height: auto;
	}

	#auflistung h4 {
		font-size: 15px;
	}

	#aktuell {
		height: auto;
	}

	#aktuell p {
		font-size: 80%;
	}

	#news {
		width: 100%;
	}

	#news ul li {
		width: 100%;
		float: none;
	}

	#news ul li:last-child {
		padding-bottom: 20%;
	}

	#news ul img {
		width: 65%;
		height: auto;
	}

	#news ul li p {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
	}

	#kontakt {

		height: auto;
	}


	#kontakt div p {
		font-size: 85%;
	}


	#kontakt div h5 {
		font-size: 110%;
	}

	table {
		margin: 25px;
	}

/*
	#kontakt iframe {
		width: 100%;
		height: auto;
	}
*/

.responsive-frame {
padding-bottom: 70%;
}

	#impressum h3 {
		font-size: 170%;
	}

	#impressum p {
		font-size: 90%;
	}

	#datenschutz h3 {
		font-size: 170%;
	}

	#datenschutz p {
		font-size: 90%;
	}


}