@charset "UTF-8";

html {
/*	height: 100%; */	
	background-color: #fff;
	background-image: url(images/bg.png);
	background-repeat: repeat;
}

body {
	font-family: Myriad, Verdana, Geneva, sans-serif;
	font-size: 1.1em;
	letter-spacing: 0.04em;
	line-height: 1.4em;
	height: 100%;
	color: #69ab26;
	
}

h1 {
	font-size: 1.4em;
	line-height: 1.4em;
	padding: 0 2% 1.5em 3%;
}

h2 {
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 0.5em 0 0.2em 0;
	color: rgba(188,235,35,1);
}

h3 {
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 0.5em 0 0.2em 0;
	color: 	#e93938;
}



#header {
	position: relative;
	width: 100%;
	min-height: 400px;
	max-height: 400px;
	background: url(images/malen_slider.jpg) no-repeat center center;
	clear: both;
	background-size: 100% auto;

}

#logo {
	background: rgba(255,255,255,0.5);
	width: 400px;
	min-width: 20%;
	max-width: 40%;
	position: absolute;
	right: 10%;
	top: 19%;
	padding: 30px;
}


/*-------------------- Navi mobile ausblenden -----------------------  */


#nav-mobil {
	display: none !important;	
}


.js #nav-mobil {
		display: none !important;	
}

 
/*-------------------- Navi Anfang -----------------------  */

#headerSlideContainer {
	position: fixed;
    top:-60px;
    width: 100%;
	max-height: 400px;
    background: url(images/bg.png) #fff;
background: rgba(188,235,35,1);
background: -moz-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(188,235,35,1)), color-stop(100%, rgba(152,219,70,1)));
background: -webkit-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -o-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -ms-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: linear-gradient(to bottom, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bceb23', endColorstr='#98db46', GradientType=0 );
	list-style-type: none;	
}

#headerSlideContent {
	    width: 100%;
	    height: 50px;
	    margin: 0 auto;
}


#navibereich-statisch {
	width: 100%;
	height: 50px;
	z-index: 100;
background: rgba(188,235,35,1);
background: -moz-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(188,235,35,1)), color-stop(100%, rgba(152,219,70,1)));
background: -webkit-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -o-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -ms-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: linear-gradient(to bottom, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bceb23', endColorstr='#98db46', GradientType=0 );
	list-style-type: none;
}



#navibereich {
	margin: 0px auto 0px;
	height: 50px;
	z-index: 100;
}


#nav {
	display: block !important;
	height: 50px !important;
}


#nav li {
	width: 20%;
	float: left;
	list-style-type: none;
}


#nav li:hover {
	background: url(images/bg.png) #fff;
	background-repeat: repeat;
}


#nav span {
	display: none;
}


#nav a {
	text-align: center;
	display: block;
	height: 33px;
	text-decoration: none;
	padding: 12px 0 5px 0;
	color: #fff;
}


/* Hover Zustände */

#nav a:hover {
	display: block;
	height: 33px;
	padding-top: 12px;
	text-decoration: none;
	color: #68ab26; 
}


#nav li:active{
	background: url(images/bg.png) #fff;
	background-repeat: repeat;
}


#nav li:active a{
color: #fff;
}


.sie-sind-hier {
	background: url(images/bg.png) #fff;
	background-repeat: repeat;
	list-style-type: none;
}


#nav .sie-sind-hier a {
	color: #68ab26; 
}


#nav li a:hover-visited {
	color: #110188;
			
}


/*-------------------- Navi Ende -----------------------  */


/*   ------------------ Gallerie Navi Start --------------------------- */

#nav-gallerie {
  display: flex;
  background-repeat: repeat-x;
  width: 93%;
  margin: 2% 0% 10% 0%;
  padding-left: 7%;
 }
 
#nav-gallerie img {
	max-width: 100%;
	height: auto;
	
}

 
.nav-gallerie-box {  
	width: 30%;
}


	


#nav li:hover {
	background: url(images/bg.png) #fff;
	background-repeat: repeat;
}



/*   ------------------ Gallerie Navi Ende --------------------------- */

#wrapper {
	margin: 0% auto 0% ;
	width: 100%;
	padding: 0;
	min-height: 300px;
	height: auto;
	overflow-x: hidden;
}



/*#content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 1%;
	width: 92%;
	padding: 1% 3%;
	height: auto;
	overflow-x: hidden;
}*/

#color-of-animals {
	width: 84%;
	padding: 5% 8% 5% 8%;
	height: auto;
	overflow-x: hidden;
}

#rahel-buehlmann {
	width: 84%;
	padding: 6% 8% 0% 8%;
	height: auto;
	overflow-x: hidden;
	background: #69ab26; 
	color: #f5f5f5;

}

#danke {
	width: 84%;
	padding: 6% 8% 0% 8%;
	height: auto;
	overflow-x: hidden;
	
}

#icons {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	min-height: 100%;
  height:auto !important;
  height:100%;
  
}

/*#gallerie {
	width: 84%;
	padding: 6% 8% 0% 8%;
	height: auto;
	overflow-x: hidden;
	
		min-height: 100%;
  height:auto !important;
  height:100%;

}
*/

#gallerie {
	width: 84%;
	padding: 6% 8% 0% 8%;
	overflow-x: hidden;
	min-height: 100%;
/*  height:auto !important;
*/  height:100%;

}



#preise {
	width: 84%;
	padding: 6% 8% 5% 8%;
	height: auto;
	overflow-x: hidden;
	background: #69ab26; 
	color: #f5f5f5;

}

#kontakt {
	width: 84%;
	padding: 6% 8% 8% 8%;
	height: auto;
	overflow-x: hidden;
}



/*---- Ab hier die Eigenschaften für die Kontaktseite ----*/


form {
	width: 100%;
	margin-top: 0px;
}

label {
	display: inline-block; /* Beschriftung auf eigener Zeile */
	cursor: pointer; /* Mauszeiger wird zur Hand */
	width: 25%;
}
#kontakt div  {
	margin-bottom: 1.2em;
	vertical-align: middle;
}
input#besuchername, input#besuchermail, input#vorname, input#name, input#strasse, input#plz, input#ortschaft, input#telefon, input#mail, textarea {
	color: #69ab26; /* ---Farbe der Schrift die im Feld vor und nach der Eingabe ersichtlich ist ---*/
	float: right;
	width: 70%;
	height: 1.5em;
	border: 1px solid #69ab26; /* ---Farbe des Rahmen im inaktivem Zustand ---*/
	padding-left: 5px;
}
textarea {
	width: 70%;
	height: 8.6em;
	padding-top: 5px;
}
input#besuchername:focus, input#besuchermail:focus, input#vorname:focus, input#name:focus, input#strasse:focus, input#plz:focus, input#ortschaft:focus, input#telefon:focus, input#mail:focus, input:focus, textarea:focus {
	border: 2px solid rgba(188,235,35,1); /* ---Farbe des Rahmen im aktivem Zustand ---*/
	background-color:  #69ab26;  /* ---Hintergrundfarbe vom Eingabefeld im aktivem Zustand--- */
	color: #fff;
}
input#senden {
	height: 20px;
	border: 1px solid green; /* ---Farbe des Rahmen im aktivem Zustand ---*/
	color: #fff;
	background: rgba(188,235,35,1);
background: -moz-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(188,235,35,1)), color-stop(100%, rgba(152,219,70,1)));
background: -webkit-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -o-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: -ms-linear-gradient(top, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
background: linear-gradient(to bottom, rgba(188,235,35,1) 0%, rgba(152,219,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bceb23', endColorstr='#98db46', GradientType=0 );
}

.textarea {
	height: auto;
}
.googlemaps {
	height: 260px;
	text-decoration: none;
	padding: 0px 0px 0px 0px;
	margin-left: 5px;
	color: 	color: #69ab26;
	border: solid 5px #69ab26;
	margin-bottom: 10px;
}


.icons-kontakt {
	display: none;
}




/*---- Ende der Eigenschaften für die Kontaktseite ----*/






article {
	display: flex;
	max-width: 20%;
	padding: 1% 1%;
	margin: 0 1%;
}

.img {
	max-width: 100%;
	height: auto;
}


.col_1 {
	float: left;
	width: 19%;
	padding: 1% 2%;
	min-height: 600px;
	margin: 0 1% 2em 0;
}

.col_1-1 {
	float: left;
	width: 15%;
	padding: 1% 2%;
	margin: 0 1% 2em 0;
}


.col_2 {
	float: left;
	width: 44%;
	padding: 1% 2%;
	margin: 0 1%;
}




.col_3 {
	float: left;
	width: 66%;
	padding: 1% 2%;
	margin: 0 1%;		
}

.col_4 {
	float: left;
	width: 88%;
	padding: 1% 2%;
	margin: 0 1%;	
}

.col_gallerie {
	float: left;
	width: 26%;
	padding: 1% 3% 1% 4%;
	min-height: 400px;
}



.clear {
	clear: both;
}

.anchor {
	top: -100px;	
}



.mb-text {
	margin-bottom: 2em;
}


.mt-text {
	margin-top: 2em;

}

 .m-text-1em {
	 margin-top: -1.3em;
 }
 
  .minus-margin-rahel {
	 margin-top: -20%;
	 margin-left: 10%;
 }
 
 
 .boxshadow  {
    box-shadow: 5px 5px 15px rgb(50, 50, 50);
 }


img { max-width: 100%;
 height: auto; }

.ml {
	margin-left: 1em;
}

.ml10 {
	margin-left: 10%;
}

mmt {
	margin-top: -250px;
}

.tel {
	color: #69ab26;
	text-decoration: none;
}


.m-adresse {
	margin-top: 5%;
}


a {
	color: rgba(188,235,35,1);
	text-decoration: none;
}
	




table {
	text-align: left;
	margin-top: 15px;
	margin-bottom: 20px;

}

table tr td {
	font-style: normal;
	padding-bottom: 2px;
	padding-top: 0px;
	padding-left: 15px;
}

table th{
	padding-bottom: 0px;
}	
	
.linie {
	padding-top: 10px;
	border-bottom: 1px solid rgba(188,235,35,1);
}

.align-right {
	text-align: right;
}

.align-left {
	text-align: left;
}

.h2-padding-right {
	padding-right: 1.7em;
}

.green {
	color: rgba(188,235,35,1);
}

.mb-table {
	margin-bottom: 3em;
}