body {
	margin: 0px;
	margin-top: 10px;
	font: 16px/1.6em "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
	color: #000000;
	overflow-x: hidden;
}

h1 {
	font-size: 30px;
	font-weight: bold;
	color: #F78F07;
}

h2 {
	font-size: 20px;
	font-weight: bold;
	color: #000000;
}

h3 {
	font-size: 17px;
	font-weight: bold;
	color: #000000;
}

button, .button {
	background-color: #F78F07;
	color: #fff;
	border: none;
	font-size: 16px;
	padding: 5px 10px;
}

a {
	color: #000;
}

header, footer {
	background: url('../images/background/friseur1.png');
	background-size: 100%;
	clear: both;
}

header {
	padding-bottom: 30px;
}

header div#logokreis {
  	float: left;
  	width: 326px;
  	height: 117px;
  	background-color: #fff;
  	border-radius: 100%;
  	border-bottom: 5px solid #F78F07;
  	margin-top: 31px;
  	border-right: 5px solid #F78F07;
  	border-left: 5px solid #F78F07;
  	margin-right: -5px;
  	margin-left: -5px;
}

div#logokreisHinten {
  	background-color: #fff;
  	height: 70px;
  	margin-top: -33px;
}

header div#logokreisInnen {
  	background-color: #fff;
  	width: 339px;
  	height: 158px;
  	top: 0px;
  	position: absolute;
  	border-radius: 100%;
  	left: -10px;
}

header img#logo {
  	width: 291px;
  	margin-left: 30px;
  	margin-top: 27px;
}

header div#menue p#mobileTelefon {
	display: none;
}

header input#menueA, header label#menueB, header label#menueC {
	display: none;
}

header div#menue {
  	background-color: #fff;
  	border-bottom: 5px solid #F78F07;
  	float: left;
  	position: absolute;
  	left: 325px;
  	right: 0px;
}

nav {
	clear: both;
	display: block ruby;
	text-align: center;
}

nav a {
  	text-decoration: none;
  	color: #000000;
}

nav ul {
	
}

header nav#rechtlich {
  	text-align: right;
	margin-right: 15px;
}

header nav#rechtlich ul {
  	margin: 0px;
}

nav#rechtlich ul#haupt li {
  	list-style: none;
  	float: left;
  	padding: 0px 5px;
	border-right: 1.4px solid #000;
}

nav ul li.letzter, nav ul#haupt li ul#unter li {
  	border-right: none !important;
}

nav ul#haupt li:hover, nav ul#haupt li ul#unter li:hover, nav ul#haupt li ul#unter li ul#uunter li:hover {
	font-weight: bold;
}

nav ul#haupt li:hover li, nav ul#haupt li ul#unter li:hover li, nav ul#haupt li ul#unter li ul#uunter li:hover li {
	font-weight: normal;
}

nav#hauptmenue ul#haupt li {
	font-size: 25px;
	color: #000000;
	list-style: none;
  	float: left;
  	padding: 0px 5px;
	border-right: 2px solid #000;
}

nav#hauptmenue ul#haupt li.activ {
	font-weight: bold;
	color: #F78F07;
}

nav#hauptmenue ul#haupt li.activ ul#unter li {
	font-weight: normal;
	color: #000000;
}

nav#hauptmenue ul#haupt li:hover ul#unter, nav#hauptmenue li ul#unter li:hover ul#uunter {
 	display: block;
	position: absolute;
}

nav#hauptmenue ul#haupt li ul#unter, nav#hauptmenue li ul#unter li ul#uunter {
  	display: none;
	z-index: 100000;
}

nav#hauptmenue ul#haupt li ul#unter {
  	width: max-content;
  	padding: 10px;
  	background-color: #F78F07;
	border-top: 20px solid #fff;
}

nav#hauptmenue ul#haupt li ul#unter::before {
  	width: 0px;
  	height: 0px;
  	border-top: 20px solid transparent;
  	border-right: 20px solid transparent;
  	border-bottom: 20px solid #F78F07;
  	border-left: 20px solid transparent;
  	position: absolute;
  	top: -40px;
  	left: 0;
  	content: "";
}

nav#hauptmenue ul#haupt li ul#unter li {
  	clear: both;
}

nav#hauptmenue ul#haupt li ul#unter li.activ {
	font-weight: bold;
}

nav#hauptmenue ul#haupt li ul#unter li.activ ul#uunter li {
	font-weight: normal;
}

nav#hauptmenue ul#haupt li ul#unter li ul#uunter {
  	width: max-content;
  	padding: 10px;
  	background-color: #F78F07;
	margin-left: -8.1em;
	width: 100%;
	margin-top: -25px;
}

nav#hauptmenue ul#haupt li ul#unter li ul#uunter li.activ {
	font-weight: bold;
}

div#mobile p.erstelltVon {
	display: none;
}

div#mobile p.erstelltVon img {
	width: 100%;
}

div.slideshow {
  	width: auto;
  	text-align: center;
}

div.slideshow-innen {
  	position: initial;
  	display: inline-block;
	overflow: hidden;
	width: 80%;
	background: url('../images/background/sliderHintergrund.jpg') no-repeat;
  	background-size: 100%;
}

div.slideshow-innen div.slider {
  	width: 100%;
  	//opacity: 0;
	display: none;
  	transition: 3s ease-in-out all;
	//margin-top: -425px;
	height: 33.3vw;
}

.animate-left {
	position: relative;
	animation: animateleft 3s
}

.animate-opacity {
	position: relative;
	animation: animateopacity 3s
}

.animate-opacity-rueck {
	position: relative;
	animation: animateopacityrueck 3s
}

@keyframes animateleft { 
	from { left :-500px; opacity:0 } 
	to { left:0; opacity:1 }
}

@keyframes animateopacity { 
	from { opacity:0 } 
	to { opacity:1 }
}

@keyframes animateopacityrueck { 
	from { opacity:1 } 
	to { opacity:0 }
}

div.slideshow-innen div.slider.activ {
  	opacity: 1;
}

div.slideshow-innen div#slider0 {
	//margin-top: 0px;
}

div.slideshow-innen div.slider img {
  	width: 100%;
}

div.slideshow-innen div.sliderTextelement div {
  	background: url('../images/background/sliderTextelementHintergrund.jpg') no-repeat;
  	background-size: 100%;
	margin-top: -4.2vw;
}

div.slideshow-innen div.sliderTextelement div h2 {
  	font-size: 5vw;
  	color: #F78F07;
	width: 36.5vw;
	padding: 50px 40px 0px 40px;
	line-height: 5vw;
	margin-bottom: 25px;
}

div.slideshow-innen div.sliderTextelement div p {
  	font-size: 2.6vw;
	font-weight: bold;
	width: 36.5vw;
	padding: 0px 40px 40px 40px;
	line-height: 3.3vw;
}

div#slideshowTitel {
  	background-color: #000;
  	margin-top: -8px;
  	text-align: center;
  	width: auto;
	display: block ruby;
}

div#slideshowTitelInnen {
  	width: max-content;
  	margin: 0px auto;
}

div#slideshowTitel h1.titel {
  	float: left;
  	padding: 5px 15px;
  	font-size: 20px;
	font-weight: normal;
  	color: #fff;
  	margin: 0px;
	cursor: pointer;
  	transition: 3s ease-in-out all;
}

div#slideshowTitel h1.titel:hover {
  	background-color: #F78F0794;
}

div#slideshowTitel h1.titel.activ {
	background-color: #F78F07;
}

section#grund {
  	border: none;
  	clear: both;
	padding: 20px 60px;
	width: 100%;
	background-color: #fff;
}

section {
	float: left;
	border-right: 5px solid #F78F07;
	padding-right: 40px;
	width: 70%;
}

section .versteckt {
	display: none;
}

div.aufklappbalken input:checked + label {
  	margin-bottom: 0px;
}

div.aufklappbalken input:checked + label + div.inhalt {
  	display: block;
}

div.aufklappbalken label.haupt {
  	background-color: #F78F07;
  	width: 100%;
  	display: block;
  	padding: 5px 10px;
  	font-weight: bold;
	margin-bottom: 10px;
}

div.aufklappbalken label.haupt h2 {
	width: 95%;
	float: left;
	margin: 0px;
}

div.aufklappbalken label.haupt::after {
  	content: '....';
  	background: url('../../../images/pfeilUntenSchwarz.png') no-repeat;
  	background-size: 100%;
  	color: transparent;
  	font-size: 14px;
}

div.aufklappbalken input:checked + label.haupt::after {
  	content: '....';
  	background: url('../../../images/pfeilObenSchwarz.png') no-repeat;
  	background-size: 100%;
  	color: transparent;
  	font-size: 14px;
}

div.aufklappbalken div.inhalt {
  	border: 2px solid #F78F07;
  	margin-bottom: 10px;
  	width: 100%;
  	padding: 5px 8px;
  	transition: 2s ease-in-out all;
  	display: none;
}

div.aufklappbalken div.inhalt div.bilder {
  	text-align: center;
}

div.aufklappbalken div.inhalt div.bilder img {
  	height: 180px;
  	margin: 0px 10px;
}

div.schachteln {
  	clear: both;
	height: max-content;
	display: flow-root;
}

div.schachteln div {
  	width: 180px;
  	margin: 0px 20px;
  	float: left;
}

div.schachteln div p.schachteln {
  	height: 180px;
}

div.schachteln label.button {
  	width: 100%;
}

div.schachteln input:checked + label + div.lightbox {
  	display: block;
}

aside {
	float: left;
	padding-left: 40px;
	width: 14%;
}

nav#untermenue ul {
  	text-align: left;
	padding-left: 0px;
}

nav#untermenue li {
	list-style: disclosure-closed;
}

nav#untermenue ul li.activ {
  	color: #F78F07;
	font-weight: bold;
}

div#news figure {
	border-right: 5px solid #F78F07;
}

div#social {
  	position: fixed;
  	right: -70px;
  	top: 40%;
  	background-color: #F78F07;
  	width: 60px;
  	border-radius: 100%;
  	padding: 25px 43px 15px 25px;
}

div#social img {
  	width: 27px;
}

div#social img:hover {
  	width: 29px;
}

div#social img.social0 {
  	width: 24px;
}

div#social img.social0:hover {
  	width: 26px;
}

div#social img.social1 {
  	position: relative;
  	left: -16px;
  	top: 3px;
}

footer {
  	color: #fff;
  	padding: 5px 60px;
}

footer img#logoChris {
  	height: 70px;
  	display: block;
}

div.balken {
	width: 100%;
	height: 150px;
	clear: both;
}

div#ladenAussen {
	background: url('../images/background/ladenAussen1_geschnitten.jpg');
}

div#ladenInnen {
	background: url('../images/background/ladenInnen1_geschnitten.jpg');
}

div.backgroundFixed {
	background-position: bottom center !important; 
	background-repeat: no-repeat !important; 
	background-size:cover !important; 
	background-attachment:fixed !important;
}

div.lightbox {
  	display: none;
  	position: fixed;
  	left: 0px;
  	top: 0px;
  	right: 0px;
  	bottom: 0px;
  	width: 100% !important;
}

.backgroundBlack {
  	background-color: #000c;
  	position: fixed;
  	left: 0px;
  	top: 0px;
  	right: 0px;
  	bottom: 0px;
}

.closs {
  	background: url('../../../images/closeSchwarz.png') no-repeat #fff;
  	background-size: 60%;
  	background-position: center;
  	border: 1.5px solid #000;
  	width: 20px;
  	height: 20px;
  	padding: 5px;
  	border-radius: 100px;
	cursor: pointer;
}

div.lightbox label.closs {
  	position: fixed;
  	top: 35px;
  	right: 35px;
  	z-index: 10000000;
}

div.lightbox div#inhalt {
  	background-color: #fff;
  	position: absolute;
  	left: 10px;
  	top: 50px;
  	right: 50px;
  	bottom: 50px;
  	width: auto;
  	overflow-x: auto;
}

figure {
  	float: left;
  	margin: 5px 20px;
}

figure.eins {
  	width: 70%;
}

figure.zwei {
  	width: 20%;
}


figure.zwei img {
  	width: 100%;
}

div.team.uebersicht {
  	width: max-content;
  	transition: 2s ease-in-out all;
	text-align: center;
	background-color: #fff;
}

div.team label.img {
  	width: 167px;
  	display: block;
  	height: 223px;
  	background-size: 100% !important;
  	background-repeat: no-repeat !important;
 	border: 4px solid #F78F07;
  	margin: 5px 10px;
}

div.team div.steckbrief {
  	display: none;
}

div.team h3 {
  	margin-bottom: 0px;
	margin-top: 0px;
}

div.team p{
  	margin-top: 0px;
}

div.team input:checked ~ label.versteckt {
	display: block;
	position: absolute;
}

div.team input:checked ~ label.img {
	float: left;
}

div.team input:checked ~ label, div.team input:checked ~ p {
	text-align: left;
}

div.team input:checked ~ div.steckbrief {
	display: inline;
	text-align: left;
}

div.steckbrief tr {
  	text-align: left;
}

div.bilderZwei {
	width: 50%;
}

div.newsbereich {
  	width: 100%;
	padding: 20px 60px;
	clear: both;
	display: flow-root;
}

div.news {
  	width: 250px;
  	margin: 5px 10px;
  	border-right: 5px solid #F78F07;
	float: left;
}

img.preise {
	width: 50%;
}

form#kontaktformular label {
  	display: block;
	margin-top: 15px;
}

form#kontaktformular input {
  	display: block;
}

form#kontaktformular textarea {
  	display: block;
	margin-bottom: 20px;
}

form#kontaktformular input.datenschutz, form#kontaktformular label.datenschutz p {
  	float: left;
}

form#kontaktformular label.datenschutz p {
	margin-top: -3px;
}

form#kontaktformular input[type="submit"] {
  	clear: both;
  	background-color: #F78F07;
  	border: none;
  	color: #fff;
  	padding: 5px 10px;
  	font-weight: bold;
}