@charset "utf-8";
/* CSS Document */

/* Allgemeine Formatierungen */
body {
	background-image: url(../img/hintergrund_rechts.gif);
	background-attachment: fixed;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 100%;
}
a {
	color: #F3A445;
}
a:hover {
	text-decoration: none;
}

#kopf {
}
.logo {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
}
.fas {
	font-size: 40px;
	color: rgba(241,161,28,0.73);
}
#iconbar {
	float: right;
}
#iconbar a{
	padding-left: 20px;
}
#iconbar i:hover {
	color: rgba(131,0,0,1.00);
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#carouselExampleIndicators img {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;	
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
} 
/* Scroll to Top */
#totop {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    cursor: pointer;
    padding: 15px; 
}
#totop:hover i{
	color: rgba(131,0,0,1.00);
}

/* Sitemap */
#sitemap {
	margin-left: 80px;
}
#sitemap li {
	list-style-type: none;
}
#sitemap i {
	font-size: 1rem;
	margin-right: 10px;
}


/**********************************************************************/


/* Slider */
.carousel-indicators li {
	background-color: rgba(241,161,28,0.73);
}

.carousel-indicators .active {
  background-color:rgba(240,91,19,1.00);
}

#oben, #unten {
	width: 100%;
	height: 10px;
	z-index: 10;
	background-color: rgba(244,123,15,0.38);
}
#oben {
	position: absolute;
}
#unten {
	position: absolute;
	bottom: 0px;
}
/**********************************************************************/



/* Navigation */
.navi {
	list-style-type: none;
	height: 30px;
}
.navi li {
	display:inline;
	line-height: 30px;
}
#sta.aktiv a,
#bad.aktiv a,
#gar.aktiv a,
#mat.aktiv a,
#tre.aktiv a,
#kue.aktiv a,
#gar.aktiv a,
#gra.aktiv a {
	background-color: white;
	color: #F3A445;	
}
#kon.aktiv.fas,
#imp.aktiv.fas,
#sit.aktiv.fas {
	color: rgba(131,0,0,1.00);
}

#navigation {
	background-color: #F3A445;
	height: 30px;
}
#navigation a {
	color: white;
	display:inline-block;
	padding-left: 10px;
	padding-right: 10px;
	height: 30px;
	position: relative;
}
#hauptnavi a:hover {
	background-color: white;
	color: #F3A445;
	text-decoration: none;
	border-bottom: .5px solid #F3A445;
	transition: all 0.3s ease-in;
}
#hamburger_menu a:hover {
	display: inline-block;
	width: 100%;
	background-color: white;
	color: #F3A445;
	text-decoration: none;
	transition: all 0.3s ease-in;	
}

@keyframes rotieren {
	0% {
		opacity: 0;
	}
	100% {
		transform: rotate(90deg);
		opacity: 1;
	}
}

#hamburger_icon i:hover {
	animation-name: rotieren;
	animation-duration: 1s;
}

/*#navigation a:hover::before {
	position: absolute;
	content: url(../images/balken.jpg);
	width: 100%;
	z-index: 20;
	bottom: 21px;
	left: 0px;
}*/

#hamburger_icon .fas {
	font-size: 20px;
	padding-top: 3px;
	color: white;
}
#hamburger_menu li{
	list-style-type: none;
}

@media (min-width: 960px){
	#hamburger_menu, #hamburger_icon, #hamburger_icon i{
		display: none;
		float: right;
	}
}
@media (max-width: 960px){
	#iconbar, #hauptnavi, #hamburger_menu {
		display: none;
	}
	#navigation {
		height: auto;
	}
}
/**********************************************************************/



/* Inhaltsformatierungen */
#inhalt1, #inhalt2 {
	min-height: 400px;
	margin: 10px 20px 10px 20px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
#inhalt1 h1 {
	padding-top: 15px;
	color: rgba(131,0,0,1.00);
	border-bottom: 1px solid rgba(71,70,70,1.00);
}
.sub_titel {
	color: rgba(131,0,0,1.00);
	font-size: 1.2rem;
}
h2,h3,h4 {
	margin-top: 15px;
}
.in_rot {
	color: rgba(131,0,0,1.00);
}
#inhalt1 {
	border-bottom: 1px solid rgba(71,70,70,1.00);
}
.bild_text {
	width: 40%;
	max-width: 350px;
	height: auto;
	float: right;
	padding: 5px;
}
.logo_kontakt {
	width: 100%;
	height: auto;
	margin-top: 30px;
}
#accordion button {
	color: #F3A445;
}

/* Bildergalerie FancyBox*/
.bilder_galerie img {
	width: 100px;
	height: auto;
	margin: 10px;
	border: 1px solid white;
	/*-webkit-box-shadow: 3px 3px 5px 4px rgba(100,100,100,.7);*/
	box-shadow: 2px 2px 5px 1px rgba(100,100,100,.5);}

/* Isotope */
/* Isotope Sortier-Tool */
#muster {
	padding-bottom: 25px;
}
#sort_button .button {
	display: inline-block;
	padding: 0.5em 1.0em;
	margin-bottom: 10px;
	background: #EEE;
	border: none;
	background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );

	color: #222;
	font-family: sans-serif;
	font-size: 16px;
	cursor: pointer;
}

#sort_button .button:hover {
  background-color: #8CF;
  color: #222;
}

#sort_button .button:active,
#sort_button .button.is-checked {
  background-color: #28F;
}

#sort_button .button.is-checked {
  color: white;
}

#sort_button .button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */
.button-group {
	margin-bottom: 15px;
}

#sort_button .button-group:after {
  content: '';
  display: block;
  clear: both;
}

#sort_button .button {
  border-radius: 0;
  margin-left: 0;
 
}

#sort_button .button:first-child { 
	border-radius: 0.5em 0 0 0.5em; 
}
#sort_button .button:last-child { 
	border-radius: 0 0.5em 0.5em 0; 
}

/* ---- grid ---- */

.grid figcaption {
	font-size: 70%;
	text-align: center;
}


/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
	position: relative;
	float: left;
	width: 130px;
	height: 75px;
	color: #262524;
	margin-bottom: 15px;
	margin-right: 5px;
}

.element-item > * {
/*  margin: 0;
  padding: 0;*/
}




/* Formulare */
fieldset {
}

/**********************************************************************/




/* Footer-Formatierung */
#footer {
	background-color: rgba(77,75,75,1.00);
	color: white;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 80%;
}
#footer a{
	color: white;
	text-decoration: none;
}
#footer a:hover {
	color: #F3A445;
}
#footer p {
	margin: 3px;
}
.logo_unten {
	width: 150px;
	height: auto;
}
.linie {
	background-color: rgba(179,177,177,1.00);
}
#iconfooter .fas {
	font-size: 30px;
	color: rgba(176,176,175,0.98);
	padding-right: 10px;
}
#iconfooter .fas:hover {
	color: white;
}