/*Ab dieser Version styles >10 responsive */

/*Stylesheet f�r die Demosite (interner Bereich) von aniSYS ohne die aniSYS Startseite*/

/* 	ERKL�RUNG ZU DEN IMG :
	HS - hoch und schmal, ausgeschnitten f�rs Phone
	PNG sind Bilder die ich mit dem Snipingtool bearbeitet habe
	

*/
/* 	====================================
		aniSYS - Anwendung
	==================================== */	
.dateanimaldocpost{font-family: inherit; font-size:0.7em; letter-spacing:0.2em; float:right; margin-left:0.5em;}	
/* Bilder vergr��er mit Mouseover, z.B. f�r Thumbnaisl in Tabelle Hunde�besicht*/
.thumbnail{float:left; width:7%;  transition: transform .2s; /* Animation */  /*width: 200px; height: 200px;*/  }

.thumbnail:hover { transform: scale(2.5); /* (250% zoom )*/ }	
	
/* 	====================================
	 vorr�bergehend nur zum Testen
	==================================== */	
.red{background-color:red:}
/* The popup form - hidden by default */
.form-popup {
 display: none;
  position: fixed;
  top:16em;
	left:50%;
	margin-left: -21em; 
  width:42em;
	height:auto;
 border-radius: 2px 73px 2px 2px;
	box-shadow: 2em 2em 2em -1em #6B6767;
	padding:2.2em 2em;
	background: rgb(0, 3, 9); 
  z-index: 9;
}
.form-popup  p{ 
	font-size:1.2em;
	margin:0em 0.8em 0.6em 0; 
	padding:0;
color:white;}

/* 	====================================
		Popup Fenster 
	==================================== */	
/*.popwindow{
	width:42em;
	height:auto;
	border-radius: 2px 73px 2px 2px;
	box-shadow: 2em 2em 2em -1em #6B6767;
	padding:2.2em 2em;
	background: rgb(0, 3, 9); 
	position:absolute;
	top:16em;
	left:50%; /* f�ngt in der Mitte des Bildschirms an*/
/*	margin-left: -21em; /*das 800px bild beginnt nun 400px nach links verschoben von der
									Mitte aus und ist somit perfekt zentriert*/
	/*display:none;
	z-index:3002;
}*/

.popwindow p{ 
	font-size:1.2em;
	margin:0em 0.8em 0.6em 0; 
	padding:0;
	color:white;
}
.popwindow ul{margin:0.9em 0em 0.9em 0em;}
.popwindow li {margin:0em 0.5em 0.4em 0.23em; color:white; font-size: 1.1em; line-height:0em;}

#whitesurface{
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			position:fixed;
			background-image:url(./img/wGruen_XXL.jpg);
			background:rgba(1, 3, 20, 0.59); /*rgba(4, 7, 33, 0.91); /*#030724; /*#010839; dunkelblau k�nigsblau	/*#000;  schwarz /*#000003; /* blau #3d3868;*/
			opacity:0.95; /* Deckkraft 70%*/
			filter:alpha(opacity=60); /*f�r �ltere Browser*/
			display:none;
			z-index:8;
}*/

/*===========================================*/

/*===========================================
	Helfer - Klassen
==========================================*/

.butt{padding:0.3em; border-radius:4px; box-shadow:1em 1em 1em -1em; border:0.5px solid #e4e4e4;}

summary{cursor:pointer;}  /* um den Text innerhalb der summary auszuklappen */

.borderg{border:5px solid green;}
.borderb{border:5px solid blue;}
.borderr{border:5px solid red;}
.bordery{border:5px solid yellow;}

.color_green{color:#2c872c; }

#blur{filter:blur(15px);}

.bgBlack{background-color:black;}
.bgporange{background-color:orange; }
.bgpearl{background-color:teal; }	
.bgwhite{background-color:white;}	
 
.bgimg{background-image:url(../img/nelkeGelb20_XXL.jpg);}
/* */
span.innertitle{
	font-size: 1.0em;
	font-family: Calbibri, Helvetica, Verdana;
	font-weight: 200;
	line-height: 2em;
	color:inherit;
	/*color: rgba(66, 69, 78, 0.95);*/
	letter-spacing: 0.1em;
	margin: 6px; /* Abstand ist angepasst an Label einstellung, damit die Überschrift für die Formulare passt, ggf. alles gemeinsam anpassen*/
}
/*li.button{margin:1em;}*/

/*RWD Einstellungen f�r Bilder, damit sie nie gr��er als gew�nscht werden, aber kleiner scalierbar sind! Quelle: W3C*/
img {
    max-width: 100%;
    height: auto;
} 

img#loginLogo{
	max-width:45%;
}
/* Damit das Bild beim Hovern gr��er wird: Transform!*/
.img{
/*	-moz-animation-direction-webkit-transform:scale(0.6);*/
	-moz-transform:scale(0.6); /*hier ist wichtig, dass der Wert kleiner ist als bei der Hoverangabe! Dann wirds beim Hovern gr��er!*/
	-o-transform:scale(0.6);
	float:left;
	margin-left:-50px;
	margin-right:-50px;
	margin-top:-10px;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	width:10%;
	}

.img:hover{
	-webkit-transform:scale(3.0);
	-webkit-box-shadow:0px 0px 30px #ccc;
	-moz-transform:scale(3.0);
	-moz-box-shadow:0px 0px 30px #ccc;	
	-o-transform:scale(3.0);
	-o-box-shadow:0px 0px 30px #ccc;	
}	 

/* exakte Kopie von aniSYS.css*/
.iconbtn { 
  /*  background-color: rgba(33,45,80,0);*/
   /* color:white; /*rgba(33,45,80,0.85);*/
    background-color: transparent;
	margin-left:0;
	padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	/*font-size:1em; Größe wird über das I bestimmt */  
}

/*btn_small {
  /*background-color: rgba(33, 45, 80, 0);*/
 /* color: #42d30e;
  margin-top: 0.8em;
  padding: 15px 20px;
  border-radius: 4px;
  cursor: pointer;
  width:20em;
}*/

li {
  list-style: none;
  font-family: Calibri, Helvetica;
  font-size: 1.1em;
  line-height: 1.5em;
  margin: 0.4em 2.3em;
  border-radius: 5px;
  /*width: 100%; das führt dazu dass die Pagination links untereinander sind */@
  box-shadow: 1em, 1em, 1em, 1em black;
}
 

/* 	====================================
	 General Style
	==================================== */	
html{
	/*background-color:blue;  wenn ich hier die BG Color angebe, dann wird der Body tats�chlich 100%  und ich sehe drumherum die Farbe
	, lasse ich die ANgabe weg, wird das BG-IMG vom Body eben gr��ern und das sieht immer noch besser aus.  ;*/
	/*max-width:100%;*/
	/* musste die zwei zeilen rausnehmen, weils auf dem iphone nicht ging! */
	
	margin:0;
	padding:0;
	
	/* damit der Footer am Boden klebt */
	height: 100%;
	
}
body {
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	
	/*max-width:100vw;*/
	margin:0em;
	padding:0em;
	
	/*
	Empfehlung nach w3schools:
	*/
	/*max-width: 100vw;  /* max!!! angabe f�hrt dazu dass der horizontale Scrollbalken verschwindet  N������������?!!*/
	/*H�henangaben m�ssen noch gel�st werden. insbes. wg footer!*/
	/*border: 6px solid red;*/
	/*background: blue; /*#DCDCDC;*/
	
	/*streifen horizontal blau*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2f39ff+0,2f39ff+1,2b39ff+1,2e38fc+2,2d34ff+3,2b36fd+4,2d3bff+4,2c3afe+5,3149ff+5,2f4eff+5,3157ff+6,2c4bfa+6,294cfb+7,2d50ff+7,3150ff+7,2c44fe+8,313bff+8,2825fb+9,2e31fe+9,293eff+11,2b44ff+11,2d49ff+12,2d4cfb+12,325bfe+13,2d59f7+13,2c5ff6+13,2157eb+13,2569e7+14,2266e4+14,286ae6+14,276fe3+15,296ee5+16,276adf+16,2568dd+16,286fe0+17,276edf+17,236adb+17,226cd4+18,2265d2+18,2367d5+18,2767cf+19,2364cd+20,2768d1+20,2f70d9+21,2970e1+21,2f81f3+22,2c85fa+22,2e86fa+22,358bfb+23,2976f3+24,2b7bf3+24,2f82f7+24,297cf1+25,2e82f0+26,297deb+26,267be2+28,287ce2+29,2b7fe5+30,2c80e6+30,287ae6+30,2c7bf2+30,3881fe+30,3b80ff+30,356bff+31,2d42ff+31,2530ff+31,2129fd+31,242bfe+31,2b39ff+32,2f44ff+32,284ffe+32,2954ff+32,2557fb+32,2a62fc+32,2e69fe+33,336dff+33,4378ff+33,3d6aff+33,2f4eff+33,273dff+33,2930ff+33,2623f5+34,2d29f9+34,2929f9+34,2d3bff+34,334bff+34,4261fe+35,4162f3+35,385de2+35,254fcb+35,1847b6+35,1544b1+35,3863e2+35,3560e3+35,3966e1+36,4274d2+36,4e85d2+36,6498d0+36,76a5be+36,6e97a6+36,5a819a+36,3d648b+36,13376d+36,02246e+36,2446a4+37,4b70df+37,4871ee+37,3f72f3+37,3a74fa+37,3b7cff+37,3787ff+37,2985f5+37,2285ee+37,2b95eb+37,349cdc+38,40a1d2+38,4495c4+38,4589b3+38,396993+38,204368+38,021b40+38,001528+38,001132+38,001132+38,001b3a+39,001f42+39,05274b+39,113653+39,10395a+39,06366a+39,083f7a+39,1c538e+39,2c66a0+39,235f9b+39,0e4d88+39,004480+40,004a86+40,0c5998+40,1c81c4+40,1d8acd+40,1b8ed1+40,178ed3+40,178ad1+40,1180c5+41,1179b9+41,0a6ba0+41,15719b+41,126c92+41,146e92+41,106c8e+41,137497+41,1b80a1+42,1b86a9+42,2696bc+42,2597bd+42,38a3ce+42,3094c2+42,1e729c+42,1a6990+42,18648a+42,156e91+43,1f80a7+43,248cb8+43,4aabf0+43,51a8ff+43,519cff+43,478af5+43,3f79dd+43,3269b0+44,1d4e83+44,06315c+44,082234+44,02161e+44,031215+44,0b1719+44,0a161a+44,0c171c+44,030f19+45,060f1a+45,020712+45,070b13+45,080a10+45,07020e+46,09040e+46,101012+46,0e140e+46,0e1314+46,000510+47,010817+47,0a1722+47,0d222b+47,123038+47,1e4354+47,355e81+47,436eab+47,4773cb+47,4773e1+47,4371f1+47,3c6af2+48,3e70f8+48,477bff+48,4277f4+48,3b70db+48,487cca+48,33649f+48,1e4a6a+48,032939+48,002026+48,0a2824+49,0f231d+49,071510+49,121a19+49,111617+49,0a1014+49,101a1a+49,091510+49,101a13+50,101a13+50,0c2421+50,0b2425+50,05141b+50,030b17+50,0b101d+50,0a0d1e+50,000416+51,000914+51,021326+51,001c24+51,001d32+51,001c34+51,041f3e+51,001a36+51,001b36+52,0d2859+52,0f3781+52,174599+52,245ab6+52,2f6acf+52,3273dc+52,296edd+52,216bdb+52,206dda+53,2676de+53,2675dc+53,2470d4+53,2b75bf+53,4692d4+53,4591cf+53,4c99d4+53,57a4db+54,4b9acf+54,005586+54,004e6a+54,003850+54,002c40+54,002c3c+54,00273c+54,04263a+54,052433+55,001d2a+55,001b2a+55,042030+55,001f2e+55,00202c+55,002434+55,002836+55,00263a+55,002134+56,001d32+56,001c2c+56,011a2b+56,0a2232+56,082032+56,0d273b+56,203d58+57,223e62+57,234369+57,33587f+57,2b5275+57,316385+57,286286+57,0d5881+58,0c5f88+58,0f6695+58,227fae+58,1d7cab+58,0d6b9d+58,0b6599+58,0f689b+58,1e78ac+58,1475aa+59,167db4+59,1e7bc2+59,1c6ac4+59,1558bd+59,1655ba+59,1856b2+59,2161af+60,1f60ab+60,1e61a4+60,195799+60,0c4084+60,01306d+60,002c5c+60,002a46+60,073253+61,235879+61,326e94+61,4486b6+61,4388bd+61,3f86bd+61,377aad+61,1c435c+61,18404e+61,124046+62,13454b+62,0c3b4c+62,0b3955+62,1e4b82+62,2955a1+62,1b4b97+62,1b4c91+62,164988+63,0e4778+63,114d75+63,1c597a+63,1b5579+63,093b6d+63,0d3a6b+63,1c486e+63,28526c+63,2c5464+63,1e444e+64,183e4c+64,082f44+64,09385f+64,0e436e+64,1e6292+64,20699a+64,1c6298+64,1d5a93+65,1f5793+65,1d548f+65,164e86+65,104678+65,154b7b+65,285e8a+65,3c7194+65,3a6f8e+66,164964+66,12465e+66,184a60+66,224e64+66,234d65+66,1c4478+66,1e4882+67,204a84+67,204d80+67,2e5a84+67,315e85+67,2c5682+67,37608f+67,3a6490+68,234f79+68,114067+68,0d3c63+68,134367+68,124364+68,0c3b5a+68,093555+68,022a44+68,00233c+68,02192a+69,08171e+69,0e171e+69,0f1e29+69,0a2840+69,052d4d+69,0b385b+69,1b5989+69,20689c+70,1c69a8+70,166bb0+70,1a73c0+70,1975cb+70,1d79d5+70,2b81e9+70,3487f4+70,3485f6+70,3d8eff+71,358dff+71,2f87fb+71,2f8af9+71,3287fe+71,3780ff+71,316bfd+71,375cff+72,3553ff+72,324afe+72,2d42fb+72,2d3eff+72,2335ff+72,2130fb+72,2335fd+73,2747fd+73,2d50ff+73,315aff+73,2e4dfe+73,2933fb+73,2930fd+73,2530fd+74,2125ff+74,252cfd+75,2b39ff+75,2739fb+76,2d45ff+76,2432fe+77,2d3eff+77,2f44ff+78,2f40fd+79,2629fe+79,2828fc+80,2b2bff+80,312dfd+84,2a2afc+85,2b2fff+85,2a2dfe+85,2e31fe+86,2e31fe+86,2b36ff+87,2a31fe+87,2e3cfe+88,2d42ff+89,2f4bff+90,334efb+90,3355ff+91,3052fe+92,335fff+92,305cfc+93,2f66ff+93,316fff+94,3172ff+95,2f74ff+97,3071fc+97,2b6ff7+99,3172f3+99,2e6df4+100,2b60f3+100&1+60,1+83,1+85,1+93,1+97,1+98,0.05+100,0.05+100;kreisBlau */
	
	background-color: rgb(219, 219, 207); /* angepasst an Gallery für Kunden. Beige ganz hell als Alternative zum Foto*/

	
	/*min-height: 100%;*/
    
/*	background-image:url(../img/wStrandRuecken_XXL.jpg); /*url(../img/hundInBach2.jpg);url(../img/nelkeGelb20_XXL.jpg);*/
	background-size: cover; /*If the background-size property is set to "cover", the background image will scale to cover the entire content area. 
							Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:*/
	-moz-background-size:cover;
    -webkit-background-size:cover;

	/*background-image:url(./img/felsentor_L.jpg);/* 5 zu blau: url(./img/sonnenblume_XXL.jpg); /* 4 das beste: url(./img/BlumenXXL/calendula20_XXL.jpg); /* 3  mit dem breiten Content ist das Motiv nicht mehr zu sehen: url(./img/wGruen_XXL.jpg); /* 1 etwas blass: url(./img/blumeGelb_XS.jpg);  2: gut: :url(./img/BlumenXXL/nelkeGelb20_XXL.jpg);*/
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	position:relative; /* um die Hinweise Infopopup erneut �ffnen und nach oben zu poitionieren*/
	font-size:100%;	
	
	/* damit der Footer am Boden klebt */
	max-height: 100%;
	width: 100%;
	display: table;
	table-layout: fixed;
}

/* ====================================================================0
	Schriften für die öffentlichen Seiten 
	Das sind nur die Überschriften, die sich von aniSYS Tool unterscheiden
	alles andere wie p Li etc das ist gleich und wird über 
	aniSYS.css für alles verwendet
=======================================================================*/

h1, h2, h3, h6, h4, h5, p, li {color: black;}


/* Seiten Überschrift Kat. 1*/
h1 {
	font-size:2.3em;
	line-height:2em;
	font-family: Montserrat, Calibri, Helvetica, Verdana; 	
	font-weight:500; /*100;*/
	margin: 0em 0.5em; /* Ausrichtung wichtig, damit der Break strich nicht so weit entfernt ist*/
	letter-spacing:0.15em;
	text-align:center;
}

/* Überschrift Kat. 2 Zentriert*/
h2{
	font-size:1.8em;
	line-height:1.5em;
	font-family: Montserrat, Calibri, Helvetica, Verdana; 
	font-weight:500;
	margin:1.5em 0.9em 1em 0.9em;
	/*padding:0em 1em;*/
	letter-spacing:0.15em;
	text-align:center;
}

span.fontGallery{
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: Montserrat, Calibri, Helvetica, Verdana;
	font-weight: 703;
	margin: 1.5em 0.9em 1em 0.9em;
	padding: 0em 1em;
	letter-spacing: 0.15em;
	text-align: center;
}


/* Überschrift Kat. 2 Linksbündig und weniger letterspacing */
h3{
	font-size:1.8em;
	line-height:1.5em;
	font-family: Montserrat, Calibri, Helvetica, Verdana; 
	font-weight:500;
	margin:1.5em 0.9em 1em 0.9em;
	/*padding:0em 1em;*/
	letter-spacing:0.07em;
	text-align:left;
	
}	

/* Header Überschrift*/
h4{
	font-size:1.5em;
	line-height:1.5em;
	font-family: Montserrat, Calibri, Helvetica, Verdana; 	/*alte Version mit Bradley in styles13 */
	font-weight:200;
	letter-spacing:0.2em;
}


h5{	
	font-family: Montserrat, Calibri, Helvetica, Verdana; 
	font-size:1.3em;
	font-weight:bold;
	line-height:1.5em;
}


h6{
	font-size:1.2em;
	line-height:1.2em;
	font-family: Montserrat, Calibri, Helvetica, Verdana; 
	font-weight:bold;
	letter-spacing:0.21em;
}

/* das hier ist orginial aus aniSYS.css und muss bei änderungen immer mit angepasst werden. Wir brauchen es hier drin wegen dem tinyMCE, der greift hier auf zurück */

p {
	font-family:Montserrat,Calibri, Helvetica, Verdana;
	font-size:0.9em;
	line-height:1.5em;
	font-weight:100; 		/*Schrift ist dünner */
	margin: 0.3em 0.3em; /* für die Abstände zum Seitenrand und zwischen den Absätzen*/ 
	text-align:justify;
}
ul {
	margin: 1.0em 0em;
	list-style-position:outside;  /* text auch Mehrzeilig beginnt immer eingerückt und vorne dadurch bündig. 
	Funktioniert hier nicht, weil ich keine Listenpunkte habe. die FontIcons sind ja keine!! man kann mit list-style-image die Listenpunkte ersetzen*/
}

ol li {
	list-style:decimal; 
	font-family:Montserrat, Calibri, Helvetica;
	font-size:0.9em;
	line-height:1.5em;
	margin:0.4em 0.3em;
}
ol li ol li {
	list-style:lower-alpha;
	font-family:Montserrat,Calibri, Helvetica;
	font-size:0.9em;
	line-height:1.5em;
	margin: 0.4em 0.3em;/* alte Version 0.4em 2.3em 0.4em  3.3em ;*/
}

/*geändert für Nav => weiß nicht wo sich das auswirkt auf die NAV!! */
ul li {
	list-style:none; 
	font-family:Montserrat,Calibri, Helvetica;
	font-size:0.9em;
	line-height:1.5em;
	margin:0.4em 0.1em;/* Alte Version, mir ist die Änderung nicht im Menü aufgefallen, sonst Rückgängig machen! Aänderung für editImage nötig für die Anleitung 0.4em 2.3em;*/
}

a {text-decoration: none; font-weight:500; font-family: Montserrat,Calibri, Helvetica;} 



/* Hintergrundbilder der einzelnen Seiten   Favorit: nelkeGelb20_XXL */

body.LOG, body.LOGO, body.home, body.news, body.team.team, body.dashboard, body.help, body.newDog, body.pets.hundeUeberblkPolaroid, body.pets.dogOverview{
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
}

/* Seiten mit speziellen Hintergr�nden */
body.help{background-image:	url(../img/wGruen_XXL.jpg);}
body.LOG{background-image:url(../img/wGruen_XXL.jpg);}
body.LOGO{background-image:url(../img/felsentor_L.jpg);}
body.dashboard{background-image:url(../img/wGruen_XXL.jpg);} 



/*

body.home{background-image:url(./img/BlumenXXL/nelkeGelb20_XXL.jpg);}
body.news {background-image:/*url(./img/wGruen_XXL.jpg);}url(./img/BlumenXXL/magerite20_XXL.jpg);}* url(./img/BlumenXXL/nelkeGelb20_XXL.jpg);}*/
/*body.team.team{background-image:/*url(./img/BlumenXXL/calendula20_XXL.jpg);}	url(./img/BlumenXXL/calendula20_XXL.jpg);}*/
/*body.dashboard{background-image:url(./img/wGruen_XXL.jpg);} /*url(./img/BlumenXXL/calendula20_XXL.jpg);}  url(./img/wGruen_XXL.jpg);}/*
/*body.help{background-image:	url(./img/wGruen_XXL.jpg);}
body.newDog{	background-image:url(./img/BlumenXXL/johkraut20_XXL.jpg);}
body.pets.hundeUeberblkPolaroid{background-image:url(./img/BlumenXXL/calendula20_XXL.jpg); /*url(./img/BlumenXXL/kuerbis2_XXL.jpg);}/*
/*body.pets.dogOverview{background-image:url(./img/BlumenXXL/blumeGelbWeiss20_XXL.jpg);}
body.pets{background-image:url(./img/BlumenXXL/blumeBlauWeiss2_XXL.jpg);}
body.LOG{background-image:url(./img/wGruen_XXL.jpg);}
body.LOGO{background-image:url(./img/labiWelpe_XXL.jpg);}



/*zum Einr�cken der Sidebar*/
/* margin-bottom ist nur n�tigm wenn die Content- boxen zu klein sind, dadurch wird der Footer an den unteren Bildschirmrand geschoben */
#wrapper{padding-right:2em; margin-bottom:6.5em;}

/* 	============================
		Unterbrechungs-Striche
	============================ */
/*
/* sichtbar auf gro�en Screens*/
.break-L {margin-bottom:1.2em; display:block;}

/* sichtbar bis Screen grau*/
.break-M{margin-bottom:1.2em; display:none;}

/* sichtbar bis Screen pink*/
.break-S{margin-bottom:1.2em; display:none;}



/* 	============================
		Hinweise 
	============================ */
/* für die Zusatzüberschrift wie bspw. Fremdvermittlung in animalwebprofile*/
span.h2{
	font-size: 0.8em;
	line-height: 0.6em;
	font-family: Montserrat, Helvetica, Verdana;
	letter-spacing: 0.03em;
	text-align: center;
	color:black;
font-weight:bold;
}

/*
span{
	font-family:Calibri;
	color:red;
	text-align:right;
}
*/

/*
.pophinweis{font-size:0.95em; color:white; float:right;}
.hinweis{font-size:1.1em; color:rgba(33,45,80, 0.95); }*/

/*section.mehr {
	font-size:1.1em;
	font-family:Helvetica;
	font-weight:100;
	margin: 0em;
	padding-right:3em;
	text-align:right;
}*/
/* aniSYS schriftzug / Logo Kopie aus font_anisys.css */
span.anisys{
	font-weight:800;font-size: 3.2em;
	/*font-size:1.1em;*/
	/*letter-spacing:0.1em;*/
	font-family:'Swanky and Moo Moo',Gluten,cursive;			
}

/* Hinweis zum �ffnen der Popups Infofenster */
.info{
	text-align:center;
	margin: 0em auto 3em;
	width:3%;
	padding-top: 1em;
	padding-bottom:1em;
	max-width:980px;
	box-shadow: 2em 2em 2em -1em;
	background: rgba(255, 255, 255, 0.40);
	position:fixed;
	top:16.25em;
	right:14em;
	cursor:pointer;
}

/* 	????????????????
	Idee: wei?oder dunkel aber fast transparent, so dass es sich auf alle 
	Hintergr�nde anpasst, dann ist es universell
	????????????? */
.buttonTop{	
	text-align:center;
	margin: 0em auto 3em;
	width:5%;
	border-radius:5px;
	/*box-shadow: 2em 2em 2em -1em;*/
	background: rgba(255, 255, 255, 0.68);
	position:fixed;
	bottom:0em;
	right:1em;
	cursor:pointer;
}

/*#sponsoring{ 
	font-size:1.763em;
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:rgba(44, 56, 140, 0.84); 
	margin:0em;
	padding-left:1em;
	text-align: left;
}*/

/* 	====================================
	Textausrichtung und andere Grundeinstellungen
	==================================== */	
	
.taL{ text-align:left;}
.taC{ text-align:center;}
.taR{ text-align:right;}
.taLast{ text-align-last:right;} /* text-align-last kontrollieret, wie die letzte Zeile bzw. Zeilen nach einem erzwungenen Zeilenumbruch ausgerichtet werden sollen.*/
.vaB{ vertical-align:bottom;}  /*funktioniert nicht*/
.outside {list-style-position:outside;} /* Mehrzeilige Listenpunkte stehen einger�ckt alle Zeilen beginnen einger�ckt und an der gleichen Linie untereinander */

/*mittig positionierte Boxen damit der Text weiterhin linksb�ndig ist aber doch mittig auf dem Bildschirm*/
.boxC{
	margin-right:auto; 
	margin-left:auto;
	width:60%;
} 

.dplBL{display:block;}
.w100{width:100%;}
.w60 { width: 60%;} /* für die Breakstriche */
.w48{width:48%;}

.dplNone{display:none;}
.pointer{cursor: pointer;} 
/*clear setzen nachdem man mit floats gearbeitet hat, sonst endet der float nicht 
also wenn ich bsp innerhalb eines divs mit float arbeite setze ich nach dem ende div ein p mit class float */
.clear {clear: both;} 


/* If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
	Then we can add overflow: auto; to the containing element to fix this problem:*/
.clearfix {overflow: auto;}

/* The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars).
	The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages: */ 
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* 	====================================
	Formulare -- eignes Stylesheet 
	==================================== */	
/*div.form{ 
	position:relative;  /*realative, damit ich die errormessage ausrichten kann*/
/*	text-align:left;  /*left ist wichtig f�r die Anordnung von Label und Input*/
/*	padding:1em 1em 1em 3em;
}*/

	



/* 	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
							Besucher Ansicht
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/	

/* 	====================================
	On Top Bar - Menubutton f�r mobile Anwendung
	==================================== */	

#menubar {
	display:none; 
	position:relative;	
}

#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}

#menubar ul li {
	display:inline; 
}

#menubar ul li a.menubutton {
	display:none; 
	position:absolute;
	top:2em;
	left:4em;
}

	
/* 	====================================
	Header	
	==================================== */	

#header {
	display:block;
	text-align:center;
	height:12em;	
}
/* auskommentiert, da an anderer Stelle f�r die Formulare Klasse table benutzt wird. Falls der Header 
	aktiviert wird, dann auslagern in eigenes css und Klassennamen anpassen!
div.table{
	display:table;
	/*margin-left:auto;	margin-right:auto;	margin-bottom:0.5em; width: calc(100% - 10px);*/
	/*width:100vw;
}

.col{
	display:table-cell;
	
}*/

#headerLogo {
	/*display:none;*/
	width:25vw;
	/*background-image: url(./img/img1.jpg);*/
	background-position: center;
	background-repeat: no-repeat;
	height: 12em;  /*  = H�he Header. L�sst sich nur in Kombi mit headerBanner ver�ndern!*/
	margin: 20px 20px 20px 0;
	text-align: center;
	vertical-align: bottom;
	background-size: cover;
	position:relative;
}

#headerLogo h1 {
	font-size:3.3em;
	letter-spacing:0.1em;
	font-family:segoe script;			
	font-weight:bold;
	position:absolute;
	top:0.3em;
	left:0.4em;
}

#headerLogo h2 {
	font-size:1.4em;
	font-family:segoe script;
	position:absolute;
	top:2.4em;
	left:1.8em;
}

div#headerBanner {
	/*display:none;*/
	background-image: url(./img/hundISand_S.jpg); /* url(./img_Gr_S/img_Gr_S/wyniaInTonneS.jpg);*/
	height: 12em;
	width: 75vw;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/* 	====================================
	Navigation

	ausgelagert in header_styles.css
	
	Anmerkung: Hier osvaldas.info/drop-down-navigation-responsive-and-touch-friendly  findet sich ein jQuery Codeschnipsel 
	um ein touchfriendly Dropdown zu machen. Ich hab gerade keine Probleme damit, daher nicht eingebaut!
	==================================== */

	
/* 	====================================
		Informations Fenster �ber die aniSYS Website  
	==================================== */	

#information{margin: 3em;}
/*#information h1, {margin-bottom: 1.5em;}	*/

/* 	====================================
		Popup Fenster 
	==================================== */	
.popwindow{
	width:42em;
	height:auto;
	/*border:2px solid white;*/
	border-radius: 2px 73px 2px 2px;
	box-shadow: 2em 2em 2em -1em #6B6767;
	/*box-shadow:		/*0px 0px 32px 0px  #111; */
	padding:2.2em 2em;
	background: rgb(0, 3, 9);    /* #1f1e3c;   hell grau #cccccc;*/
	position:absolute;
	top:16em;
	left:50%; /* f�ngt in der Mitte des Bildschirms an*/
	margin-left: -21em; /*das 800px bild beginnt nun 400px nach links verschoben von der
									Mitte aus und ist somit perfekt zentriert*/
	display:none;
	z-index:3002;
}
.popwindow p{ 
	font-size:1.2em;
	margin:0em 0.8em 0.6em 0; 
	padding:0;
	color:white;
}
.popwindow ul{margin:0.9em 0em 0.9em 0em;}
.popwindow li {margin:0em 0.5em 0.4em 0.23em; color:white; font-size: 1.1em; line-height:0em;}

#whitesurface{
			/*left:0px;
			top:0px;
			width:100%;
			height:100%;
			position:fixed;
			background-image:url(./img/wGruen_XXL.jpg);
			/*background:rgba(1, 3, 20, 0.9); /*rgba(4, 7, 33, 0.91); /*#030724; /*#010839; dunkelblau k�nigsblau	/*#000;  schwarz /*#000003; /* blau #3d3868;*/
			/*opacity:0.95; /* Deckkraft 70%*/
			/*filter:alpha(opacity=60); /*f�r �ltere Browser*/
			/*display:none;
			/*z-index:3001;*/
}

/* 	====================================
	 Container �berschrift - Veraltet!
	==================================== */	
	
/* 	====================================
	 Main Einstellungen 
	==================================== */	
/* Log Seiten*/
/* alte Version	
#mainLog{
	width:80vw;
	max-width:1200px;
	margin:12em auto;
	padding:2em 1em 2em 1em;
	display:block;	
	
}*/
/*mit großem Logo 45%	*/
#mainLog {
  
	width: 72vw;
	padding: 3em 5em 2em 5em;
	max-width: 1200px;
	margin: 8em auto 0em auto;
	display: block;
	background: rgba(32, 27, 27, 0.54);
/* wäre mein Vorschlag mindestens fürs Handy. damit man das Logo etc besser Lesen kann. Aber funktioniert alles nicht - Später! 
	background-color: #00000094;*/
	box-shadow: -1em 2em 2em -2em;

}

/*mit großem Logo 65%	
#mainLog {
    width: 72vw;
  padding: 3em 5em 3em 5em;
  max-width: 1200px;
  margin: 6em auto 0em auto;
  display: block;
  background: rgba(32, 27, 27, 0.54);
  box-shadow: -1em 2em 2em -2em;
 }
 */ 
 /* alte Variante
#mainLog {
	width: 72vw;
	padding: 9em 5em 9em 5em;
	
	max-width: 1200px;
	margin: 8em auto;
	
	display: block; 
	background: rgba(32, 27, 27, 0.54);	
	box-shadow:-1em 2em 2em -2em;
	
}*/
/* Für die Präsentation Inputfelder weg nehmen
mainLog {
    width: 80vw;
    max-width: 1200px;
    margin: 1em auto;
    padding: 19em 1em 18em 1em;
    display: block;
*/

/*
Geht schon fast, aber mit dem Footer stimmt was nicht, der sitzt jetzt oben, daher ist auch die Seite blau!
#mainLog{
	width: 56em; 
	max-width:1200px;
	height:15em;
	margin:12em auto;
	padding:2em 1em 2em 1em;
	display:block;	
	position:absolute;
	left:50%; /* f�ngt in der Mitte des Bildschirms an*/
/*	margin-left: -28em; /*das 800px bild beginnt nun 400px nach links verschoben von der*/
/*	top:50%;
	margin-top:-7em;
}
*/

 /* Einspaltiger Seitenaufbau*/	
/* Main Variante - fast komplett transparent, daher mit Schatten auf allen Seiten*/
	#mainTrans006, #main{
	width:94vw;
	/*max-width:1200px;*/
	margin: 8em auto 6.5em;
	padding:2em 0em; /* die Seiten Innenabst�nde habe ich durch die Schriften geregelt, weil sonst das Hingucker-Bild nicht volle Seitenbreite bekommen kann.*/
}	

#mainHelp{
	width:96vw;
	max-width:1200px;
	display:block;
	margin: 7em auto 4em;
	padding:1em 0em 2em 0em;
	/*background: rgba(255, 255, 255, 0.65);	*/	
}
#mainDash{
	display:block;
	width:96vw;
	margin: 7em auto 3em;
	padding:4em 0em 2em 0em;
}	
	
/* 	====================================
	Toolbar in form_styles verlegt
	==================================== */

/* 	====================================
	Login - Logout
	
	!!!!! Statt #mainLog verwende ich nun die #mainHelp, weil so ein Design f�r alle Seiten verwendet werden kann
	das einen Maincontent hat, der transparent ist
	==================================== */

.login h1{font-size:2.8em;}
.logout h1{font-size:2.8em;}
 
 /* Flex-Container - Inhaltsbereich von Login und Logout*/
#logContent{
	max-width: 95%;
	margin-left: auto;
	margin-right:auto;
	padding:1em;
	display: flex;
	flex-direction: row;  /*default wert*/
	justify-content: center; /*flex-Items sind mittig ausgerichtet*/
	flex-wrap:nowrap;
	/* Für die Präsentation: 
	display: none;*/
}

#logContent.resetPassword input, #logContent.resetPassword button{
	 width:40%;
	
}

/*Flex-Items*/
#logContent input, #logContent button {
	float:none; /* sonst �berschreibt das formular_vorlage.css die Einstellungen*/
	width:28%;
	margin: 0.4em 0.4em 1em;
	padding: 0.5em;
	font-size:1.4em;
}

#logContent label{ 
	display:block; /* �berschreibt formular_vorlage.css */
	width:27%;
} 

#logContent input:hover{background-color: rgba(77, 72, 70, 0.36);}

#logContent button:hover {background-color:rgba(18, 240, 11, 0.61);}/* antharzit: rgba(24, 21, 21, 0.61);*/
/* die inputfelder lassen sich leider nicht ��ber die Klasse steuern nur der button
 folgendes geht leider nicht:
 .login button:hover {background-color:rgba(24, 21, 21, 0.61);}
.login input:hover {background-color:rgba(24, 21, 21, 0.61);}
*/

/* Link zum Login in die n?chste Zeile setzen, Standardwert bei Flexbox ist: ROW*/
#logContent.flexCol{flex-direction: column;}
.back-to-login{
	font-size:1.4em;
	font-family:Helvetica;
	font-weight:100;
	margin: 0.6em 0em;
	padding-right:3em;
	text-align:right;	
}

/* Logout Content in etwas gr��erem Fenster */
.logout{min-height:17em;} 
#logout a {font-family:Segoe print;}

/* 	====================================
	Main - Einspaltige Seitenstruktur
	==================================== */


#main section.mainIb{
	width:100%; 
	margin-top:4em;
}

/* 	====================================
	Main - Zweispaltige Seitenstruktur
	==================================== */

#main-2-col{
	margin: 3em auto 6.5em;
	width:94%;
	max-width:1200px;
	/* border: 5px solid rgba(33,45,80, 0.95);    /* 179, 3, 139 richt magenta;   44, 56, 140, 0.84 blau */
}


/* 	====================================
	Startseite
	==================================== */

/*
	Variante 1: das Bild wird als Hintergrund eingef�gt. Sieht sch�ner aus, weil es beim Scrollen stehen bleibt 
	sehr netter Effekt, aber es verkleinert sich nicht entsprechden der 
	Bildschirmgr��e und macht daher �rger auf dem Smartphone, au�erdem funktioniert fixed einstellung nicht auf dem Smartphone und Tablet
	wenn ich das fixed ersetze durch scroll, dann habe ich keine Probleme mehr mit dem Bild auf dem Tablet. 
*/	

#hingucker{
	height: 15em;
	width: 100%;
	margin:2em auto;
	/*; url(./img/uliHecke_XXL.jpg)/*waldL: url(./img/waldL.jpg);*/
	background-position: center center;  /* 1. Angabe ist Horizontal zweite f�r vertikale Ausrichtung r*/
	background-attachment: fixed;
	background-size:cover;
	/*background-size: 50% 30%;	/*896px 120px;  /*50% 30%: Bild wird horizontal auf 50% und vertikal auf 30% gestaucht . Bild in der Gr��e anzupassen*/
	background-repeat: no-repeat;
}

/*
	Veriante 2: Das Bild wird im HTML Code eingebunden, dann passt sich die Gr��e sch�n 
	entsprechend der Bildschirmgr��e an aber der Effekt "fixed" f�llt weg.

	#hingucker{
	max-width: 100%;
	}
	#hingucker img {width:100%;}
*/

/* 	====================================
	News - und Posts
	==================================== */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	geh�rt zu Datei newsTest.php
	In newsTest habe ich den Aufbau wie in der Hunde�berblick Gallerie mit Polaroid gemacht
	dadurch wird die Sidebar nicht �ber den Content verschoben auf kleineren Bildschirmen
	M�sste dann noch angepasst werden mit Hintergrundfarbe etc.*/

	/* Variante 1*/
#post{padding:0.5em;}
#post{height:22em; overflow-y:auto;}

/*Titelbild vom Post*/
#post img {margin:0.7em; float:left; width:30%;}

/* Variante 2*/

#post1{padding:0.5em;}
/*Titelbild vom Post*/
#post1 img {margin-right:0.7em;}
/* Datumsanzeige bei neuem Post*/
.date{font-family: inherit; font-size:0.45em; letter-spacing:0.2em; float:left;}

.date1{font-family: inherit; font-size:0.6em; letter-spacing:0.2em; float:right;}	

.postmore {font-family:segoe print, Papyrus; font-size:0.95em; font-weight:bold;}
#newsPosts h1{
	font-size:1.3em;
	text-align:left;
}

/*zum Einr�cken der Sidebar*/
/* margin-bottom ist nur n�tig, wenn die Content- boxen zu klein sind, dadurch wird der Footer an den unteren Bildschirmrand geschoben */


#galleryOverviewNews{ 
margin:1.2em;
width:75vw;
}
#galleryOverviewNews br{clear:both;}


/* Vermutlich eine Alternative zum Aufbau mit Flexkontainern
.newsContent{float: left;  /* 	die divs werden links angeordnen, aber dadurch, dass der nachfolgende Bereich das
								div links umflie�t werden die entsprechenden Container nebeneinander angeordnet, */
	/*background-color: green; 	/*rgba(114, 83, 53, 0.28); /*0.43*/
	/*box-shadow: 1em 2em 3em -2em;
	margin-bottom: 25px;
	margin:0.5em;
	max-width: 74%;
}
.newsAside	{
	max-width: 13.2%;
	float: left; 
	background-color: blue; /*rgba(114, 83, 53, 0.28); /*0.43*/
	/*box-shadow: 1em 2em 3em -2em;
	margin-bottom: 25px;
	margin-left:3em;}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/	

aside {
	display:block;  /* Most browsers set display:block for the <aside> element  as default value*/
	/*float: right;
	max-width: 13.2%;
	height:auto;
	margin-left:0em;
	margin-right:6em;
	/*border: 5px solid rgba(33,45,80, 0.95);    /* 179, 3, 139 richt magenta;   44, 56, 140, 0.84 blau */
	
	/*
	*/
}  


/*	=================================================================
		Tiergallerie mit sidebar fürs Menü das muss umziehen in aniSYS.css
	================================================================== */
/* 	====================================
	Main - Zweispaltige Seitenstruktur
	==================================== */

/*#main-2-col{*/
#animalGallery_main{
	margin: 3em auto 6.5em;
	width:100%;
	max-width:100%;
	/* border: 5px solid rgba(33,45,80, 0.95);    /* 179, 3, 139 richt magenta;   44, 56, 140, 0.84 blau */
}


/* zwei Spaltiges Layout*/
/* Spalte in der sich der Haupt Textbereich befindet. GGf nochmals in versch. Sections aufgeteilt*/
/*#col-mainContent{*/
#animalGallery_mainContent{
	float: left;  
	width: 86%;
	/*min-height:40vw;*/
	margin-right:1.2em;
	margin-bottom:0.5em; /* Anpassung an aside*/
	padding: 0em 0em; /* Seiteninnenabst�nde �ber die Schriften geregelt, damit ein Bild die volle Seitenbreite einnehmen kann.*/
	/*box-shadow: 2em 2em 2em -1em;*/
}

/* Seiten Spalte, in der sich versch. sections befinden*/
/*#col-aside{float: left; width:10%;}*/
#animalGallery_aside{float: left; width:10%;}
/* den Container brauchen wir um den Button mittig auszurichten, aufgrund von display Block / none Einstellungen ist er sonst links am Rand*/
#galleryFilterbuttons_container{/* margin-left:auto; margin-right:auto;*/}
/* Filter Button in Galerie bei Screen > 1080 px ausblenden EInstellungen entsprechen den formbtn_gallery */
#galleryFilterbuttons {
	display:none;
	background-color: #ff9b00; /* eher gelb: #b3a922; mehr orange: #b77308; */
	color: white;
	margin-left:auto;
	margin-right:auto;
	padding: 14px 0px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.2em;
	width: 8.3em; 
} 


/*===================== ende Tiergallery mit Sidebar neue Version============================================*/



/*	===================================================
		Allgemein betreffend Aufteilung der Seite
	==================================================*/

/* zwei Spaltiges Layout*/
/* Spalte in der sich der Haupt Textbereich befindet. GGf nochmals in versch. Sections aufgeteilt*/
#col-mainContent{
	float: left;  
	width: 76%;
	/*min-height:40vw;*/
	margin-right:1.2em;
	margin-bottom:0.5em; /* Anpassung an aside*/
	padding: 2em 0em; /* Seiteninnenabst�nde �ber die Schriften geregelt, damit ein Bild die volle Seitenbreite einnehmen kann.*/
	box-shadow: 2em 2em 2em -1em;
}

#col-mainContent p{margin:0.5em 1.7em;}

#col-mainContent p::first-letter {
	/*font-family:inherit;
	color:inherit;*/
	
}
/* Seiten Spalte, in der sich versch. sections befinden*/
#col-aside{float: left; width:21%;}

.aside-article{
	background: rgba(255, 255, 255, 0.80);
	margin-bottom:0.5em;
	box-shadow: 2em 2em 2em -1em;
	text-align: left;
}

.aside-article h2{
	font-size:1.1em;
	margin:0.4em;
}

.aside-article p{
	margin:0.3em 0.5em;
}

.aside-article p::first-letter {
	color: maroon;
	font-size:1.1em;
	font-family:Segoe print, Papyrus, Comic sans, Helvetica, Calibri;
	font-weight:bold;
}

.aside-article ul {
	margin:0em;
	padding:0em;
}

.aside-article li {
	list-style:none;	
	font-family:Calibri, Helvetica;
	font-size:1.1em;
	line-height:1.5em;
	margin:0.5em;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* 	====================================
	Tiere - Hunde �berblick 
	==================================== */	

/* 
	�berschrift und Sortierfunktion
*/	

/* Auskommentiert, da zurzeit nicht im EInsatz, muss aber noch entwickelt werden 
.containerUeber h3 {line-height:1.5em;}
	
#sort{
	width:96%;
	max-width:980px;
	margin:1.25em auto 0em auto;
	text-align:center;
	
}
#sort ul {margin:1.6em 0.5em;}
#sort ul li {display:inline; margin:0em;}
#sort label{float:none; width:3em;}
#sort input{width:0em;}
	*/

.responsive {
    padding: 0 6px;
    float: left;  /* die divs werden links angeordnen, aber dadurch, dass der nachfolgende Bereich das
					div links umflie�t werden die entsprechenden Container nebeneinander angeordnet, */
    width: 24.99999%; /* Gr��e der Container*/
}

/* =====================================================
	mehrpsaltige Bildergalerie mit Grid 
	- BESTE L�SUNG!
	===================================================*/
	
.row{margin-left:auto;
	margin-right:auto;
	/*background-color:blue;*/
	/*text-align:center;*/
}
	
 /* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 23%;
    padding: 0.36em;
}

/* entspricht exakt .petRegCard , brauchte nur einen neuen Namen um beide Galerien laufen zu lassen*/
.petRegCard-grid{
    width: 98%;
	box-shadow: -1em 2em 4em -2em; /* hier braucht man einen rahmen um das Kästchen  -1em 2em 2em -2em  1em 2em 3em -2em;*/
	margin-bottom: 25px;
	margin:0.2em 1.5em 1.5em 1.5em;
	padding-bottom: 0.8em; 
	/*border: 1px solid #a8a5a5*/
}

.petRegCard-grid img{max-width:100%;}

.column img {
    width: 100%;
}

/* Clear floats after the columns  !! Doppelung mit Klasse clearfix?? !!*/
.row:after {
    content: "";
    display: table;
    clear: both;
}


/* 	====================================
	 Hundeprofil animalwebprofile
	==================================== */	

/* Variante für kleine Screens: Bild groß in einer Row. Informationen zu Charakter unten drunter*/
#animalWebprofilePresentingContainer1{ display:none;}

/* Animal Webauftritt : Variante für große  Screens: Bild und Informationen zu Charakter in einer Zeile  ausblenden*/
#animalWebprofilePresentingContainer2{ display:block;}


/* Falsch hier */
#hingucker{
	height: 15em;
	width: 100%;
	margin:2em auto;
	background-image:url(../img/wgrau_XL.jpg); /*; url(./img/uliHecke_XXL.jpg)/*waldL: url(./img/waldL.jpg);*/
	background-position: center center;  /* 1. Angabe ist Horizontal zweite f�r vertikale Ausrichtung r*/
	background-attachment: fixed;
	background-size:cover;
	/*background-size: 50% 30%;	/*896px 120px;  /*50% 30%: Bild wird horizontal auf 50% und vertikal auf 30% gestaucht . Bild in der Gr��e anzupassen*/
	background-repeat: no-repeat;
}

	
/* 1. Gro�es Bild einer Tierprofilseite - alte Version */
#profileTopImg img{	
	height: auto;
	width: 50%;
	margin:2em auto;
	box-shadow: 1em 1em 2em 0em;
	border-radius:8px;
}
#profileTopImg{text-align:center;}

/* Box in der sich das Bild und die wichtigsten Stammdaten befinden */
#animalwebprofileImgContainer{
	/* margin:1em 7em; */
	
	
 /*overflow:hidden;*/  
}


.webprofileLeftImg img {
  height: auto;
  max-height: 30em;
  width: auto;
  max-width: 32em;
  margin: 0.3em 2em;
 /* bekomme keinen weichen Schatten hin daher weg  box-shadow:4px 3px 11px 2px; */
  border-radius: 8px;
  float: left;
}

/* Box in der sich weitere Infos in Form von Freiem Text und ggf Tabellarischen Infos aus der DB befinden */
#animalwebprofileTextContainer{margin:1em;}

/*galleryProfile*/
 
/* Container in dem sich Bildergalerie auf animalwebprofile befindet */
#animalwebprofileGalleryContainer{
	display:flex; 
	justify-content:space-around; 
	flex-wrap:wrap;
	margin:3em; /* dient der Zentrierung der petRegCard, bei gr��erer Margin werden die Bilder automatisch in der Gr��e angepasst*/ 
}

/* Container in dem sich das Thumbnail der Bildergalerie befindet */
.thumbnailProfile {
	box-shadow: 1em -1em 3em -2em;
	margin:0.5em;	
}

/* Bild der Bildergalerie */
div.thumbnailProfile img{
	width:auto; /* nur so funktionerts auf dem IFone*/
	max-height: 7em; /* die H�he bestimmt die Gr��e des Bildes, da die Seitenverh�ltnisse eingehalten werden */
	border-radius: 3.5px;
}	

/*====================  Anfang Lightbox / Bilder im angeklickten Zustand  Quelle https://www.w3schools.com/howto/howto_js_lightbox.asp  ====================================*/

#animalwebprofileGalleryContainer.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
/*
#animalwebprofileGalleryContainer.column {
  float: left;
  width: 25%;
}*/

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 1em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content Stellt die Gr��e des Bildes ein  */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 60%; 
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none; 
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
 /* background-color: green;*/
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "previous button" to the left */
.prev {
  left: -50px;
  border-radius: 3px 0 0 3px;
}

/* Position the "next button" to the right */
.next {
  right: -50px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  /*background-color: rgba(0, 0, 0, 0.8);*/
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/*
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}*/

.demo {
  opacity: 0.6;
  width:5%;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Container der alle Vorschaubilder beinhaltet */
.innergallery {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 2em 2em 6em 2em;
}
/* Container der das Bild beinhaltet */
.innerThumbnail{
	box-shadow: 1em -1em 3em -2em;
	margin:0.5em;	
	width:7%;
}

.innerThumbnail img{
	width:auto; /* nur so funktionerts auf dem IFone*/
	max-height: 7em; /* die H�he bestimmt die Gr��e des Bildes, da die Seitenverh�ltnisse eingehalten werden */
	border-radius: 3.5px;

}
	
.mySlides img {
  margin-bottom: -4px; /* sonst ensteht am unteren Rand des Bildes ein wei�er Streifen */
}

/*====================  Ende Lightbox / Bilder im angeklickten Zustand   ====================================*/


/* 	====================================
		HELFEN
	
	Version 1: mit float, letzte version dazu ist in styles27 bzw 26 zu finden!
		gefloatete Version :  runde Buttons m�glich weil feste H�he und Breite. Aber dazu m�ssen �ber die MediaQueries viele Anpassungen gemacht werden
		sp�ter entwickeln!
	Version 2: Flexbox. 
		Browsereinschr�nkungen, muss dem Besucher mitgeteilt werden.
		Problem sind die Runden Buttons, da das automatische Anpassen nur in der Breite stattfindet und damit die 
		Dinger oval werden. Daher einfachste L�usung: Eckige Form. Sp�ter runde entwickeln aber das macht viel Arbeit weil dann 
		brauche ich die Float Version mit vielen MediaQueries.
	==================================== */	

#/* mainHelp ausgleagert in Main - Einstellungen */
}

#mainHelp h1{color:white;}
 
/* Flex-Container*/
#helpOverview {
	max-width: 95%; /* f�r sehr gro�e Buttons 81%;*/
	margin-left: auto;
	margin-right:auto;
	padding:1em;
	display: flex;
	flex-direction: row;  /*default wert*/
	justify-content: center; /*flex-Items sind mittig ausgerichtet*/
	flex-wrap:nowrap;  /* Zeilenumbruch erlauben*/
}

/* Flex-Item. Buttons zu den Helfen Seiten*/
.helpDashIB{
	width:20%;
	/*flex:1;*/
	margin: 0.4em 0.4em 1em;
	padding: 0em 0em 0.8em 0em;
	box-shadow: 4px 3px 11px 2px rgba(14, 13, 12, 0.9);
	text-align:center;
}


.helpDashIB h2{
	font-size:0.99em;
	margin: 1.5em 0.9em 0em 0.9em;
}

.helpDashIB i{margin-top: 0.2em;}


/*Bilder als Hintergrund f�r die Buttons auf der Helfenseite*/
.img1{background-image:url(./img/wgrau_XL.jpg);}
.img2{background-image:url(./img/blumeGelb_XS.jpg);}
.img3{background-image:url(./img/wit_S.jpg);}
.img4{background-image:url(./img/pfoteXXL.jpg);}

/* 	====================================
	Ghost - Buttons
	==================================== */	
.ghost1 h1 {
	color:white;
	font-size:3em;
	font-weight:bold;
	}
	
	
/* 	====================================
	Footer  - Relativ zu Body
	==================================== 
*/	
	
/* 	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	width:100% statt display:block; scheint ein Problem zu produzieren,
	was dazu f�rht, dass ein crollbalken re-li ensteht und der Footer 
	nicht mehr Seitenbreite einnimmt. 
	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!	
*/
	
footer {
	/*margin-top: 20em;  funktioniert. Damit der Footer am unteren bildschirmrand beleibt.*/
	color:white;
	display:block;
	background: rgba(33,45,80, 0.85); /* grau transparent rgba(38, 43, 57, 0.64); */
	text-align:center;
	/* Damit Footer am boden klebt Quelle:https://blog.kulturbanause.de/2017/05/responsive-sticky-footer/ */
	 display: table-row;
	/*height: 0.9em;*/

}


footer ul {
	display:block;
	margin:0px auto;
	float:none;
	padding:0em;
}

footer ul li {
	display:inline;	
	font-size:0.9em;
	/*line-height:2.8em;*/
	padding:0em 0.625em 0em 0.625em;
	color:white;
	font-family: Monterrat, Calibri, Helvetica;
}

span.anisysFooter {
  font-weight: 800;
  font-size: 2.2em;
  letter-spacing: 0.1em;
  font-family: 'Swanky and Moo Moo',Gluten,cursive;
  font-weight: bold;
  color: #1eed0d;
}

span.anisysFooter:hover {
  font-weight: 800;
  font-size: 3.2em;
  letter-spacing: 0.1em;
  font-family: 'Swanky and Moo Moo',Gluten,cursive;
  font-weight: bold;
  color: #b9fa06;
}
span.GreenhouseIT {
  color: lime;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-family: Monterrat, "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
  letter-spacing: 0.05em;
}
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
							Interne Ansicht  == Verwaltungsbereich
	*******************************************************************************************	

/* 	====================================
	Dashboard
	==================================== */
/* #mainDash ausglagert in Main Einstellungen */
	

/* 	========================================
		Dasboard 
		Version mit Flexiblen Boxen:
		Die Flex-Items sind durch flex-grow unterschiedlich gro? So erreiche ich, dass die Boxen in einer Reihe die
		gesamte verf�gbare Breite einnehmen. 
	============================================*/

/* Flex-Container */
#dashIBOverview{
	width:98%;
	margin-left: auto;
	margin-right:auto;	
	display: flex;
	flex-direction: row;  /*default wert*/
	justify-content: center; /*flex-Items sind mittig ausgerichtet*/
	flex-wrap:wrap;  /* Zeilenumbruch erlauben*/
}

/* Flex-Items*/
/* standard Infobox*/
.dashIB{
	height:10em;
	margin: 0.4em 0.4em 1em;
	padding: 0em 0em 0.8em 0em;
	box-shadow: 4px 3px 11px 2px; 
	overflow-y:auto;
}

.grow-1{flex-grow:1;} /* flex-grow verteilt den zur Verf�gung stehenden Raum zw den Flex-Items auf. 
						bei Vergr��ern des Browserfensters w�chst dasjenige st�rker, welches einen gr��eren Wert hat*/
.grow-2{flex-grow:2;}
.grow-3{flex-grow:3; background-color: red;}

#mainDash img{
	height:8em;
	width: auto;
	margin:1em;
}

/* �berschrift*/
.dashIB h2{
	display: block;
	margin: 0em;
	padding-top:0.3em;
	padding-bottom:0.3em;
	font-size:1.2em;
	font-weight:bold;
	letter-spacing:0em;
}

.dashIB p{
	font-family: verdana;
	font-size:0.7em;
	margin: 0em;
}

.dashIB ul{margin:0.4em 0em 0.3em 0em;} /* font-family: Helvetica; font-size:0.9em; font-weight:bold;*/

.dashIB ul li  {
	font-family: verdana; 
	/*font-size:1.1em; */
	margin:0.3em;
	padding:0.1em;
}
	/*{list-style-type: disc;}*/
.dashIB ul li a {
	color:white;
}

.dashIB ul li a:hover {color:#08c2ff;	/*#ece91c;*/}

.dashIB ul li a.active {border-bottom: 0.188em solid #08c2ff;}


/* 	====================================
	Tiny MCE Indextiny
	==================================== */
#maincontent{margin:0; padding:0;}
	
.editable{text-align:center;}
	
	
div.tiny {
	margin:0.5em 3em 5em 3em;
	padding:3em;
	/*margin: 3em auto 1em;*/
	width:80%;
	max-width:980px;
	/*padding:1.5em 1em 1.5em 1em;*/	
	box-shadow: 2em 2em 2em -1em;
	background: rgb(186, 197, 234);     /*  noch helleres blau (212, 218, 237)*/
}
textarea{
	/*width:80%;
	max-width:980px;
	margin:0em 3em 0em 3em;
	padding:0em;
	/*background: rgb(186, 197, 234);   */ 
	/*border:none;*/
}

/* 	====================================
	Neuen Hund anlegen 
	==================================== */	
.button li{
	margin: 0.3em;
	background-color: lime;
	
}	

/* =====================================================
		Anfang:Das ist der komplette Ihnalt voon form_styles
		=============================================================*/

/* #empty ist ein Platzhalter. Ohne dass ich den Formularfeldern eine ID zuweise kann ich die Buttons 
für die Posts nicht individuell stylen. Idee wäre alle standard Formularfelder in einen Div Formular 
zu stecken und hier dann alles umzuschreiben */
/* 	===========================================
	Formularfelder allgemeine Einstellungen 
	============================================ */  
/*Pagination */

/* Eingabe Box, z.B. Neues Medikament anlegen*/
.inputbox {margin: 0em 3em 1.5em 3em;}
.searchbox {display:block; text-align:right; margin:0.1em;}

form {
	font-size:1.1em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:white;
	width: 90%;
	text-align:center;
	margin-left:0em;
	padding:0;
}

/*Formular in dem die Speciesbuttons in der animalWebgallery stecken*/
form#animalgallery_form {width: 100%;}

/* Fehlermeldung Login */
span.error{
	color:red;
	font-size: 1.5em;
	margin-left: 0.31em;
}
label {
	font-size:0.9em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
}

.formular {
	position:relative;  /*realative, damit ich die errormessage ausrichten kann*/
	text-align:left;  /*left ist wichtig für die Anordnung von Label und Input*/
	padding:2em;
	margin: 1em auto;
	width:80%;
	max-width:980px;
}
#animalSettingsEdit.formular, #animalSettingsEdit0.formular{padding:1em 2em 1em 2em;}

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel],input[type=url], input[type=number], 
input[type=file], select, textarea{
    width: 100%;
    padding: 5px;
    border: 2px solid #26e50b; /*#ccc;*/
    border-radius: 4px;
    box-sizing: border-box;
	resize: vertical;
	background-color:transparent; /*rgba(77, 72, 70, 0.36);*/
	color: white;
}
	
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover { border: 3px solid #26e50b;}

input[type=range], input[type=color], input[type=radio], input[type=checkbox]{
    box-sizing: border-box;
}

textarea{ height:10em;}

iframe {max-width: 368px;/*420px;*/ max-height: 271px/*345px; */ border-radius: 4px;}

label {
    padding: 5px;
	margin-right:0.7em;
    display: inline-block;
}

/* alte Version, Design ist gut aber macht Ärger in Formularen,. daher hier 
	auskommentiert, muss irgendwie je nach Bedarf einzeln formatiert werden 
input[type=submit], #form button {
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px; 
    cursor: pointer; 
*/
   /* float: right;
	width: 9%;

	
background-color: rgba(33, 45, 80, 0);

color: #05138a;

margin-top: 1em;

padding: 3px 20px;

border: 3px solid #3a3a74;

border-radius: 4px;

cursor: pointer;

float: right;
}
*/

/* 	==========================================
		Spezielle Formular Einstellungen
	==========================================*/
	
#breed, #sex { width:72%;}	/* inputfeld verkleinern*/
#frequency, #dosage {width:32%;}

form.tinyEditor{margin:0.5em;}
/* 	==========================================
		Allgemeine Tabellen Einstellungen
	==========================================*/

/* alte Angaben, weiß nicht ob man sie wirklich braucht
.table{ display:table; }
.tr{ display:table-row;}
.td{ display:table-cell}	 */


.overflow_x {overflow-x: auto;}

.table {
	
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	/*border: 1px solid white;  /* Boder an dieser Stelle macht nur dem rahmen außen um die Tabelle, aber nicht zwischen den Zellen */
	/* Angaben von form*/
	font-size:1em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
}

.height100{max-height:15em;}

.table-hover tr:hover, .table-hover tr.tablehead {background-color: rgba(33,45,80,0.15);}
.table-hover tr.tablehead {background-color: rgba(33,45,80,0.34);}
.table-bordered td, th, tr {border: 1px solid white;}
.table-bordered_transp td, th, tr {border: 1px solid rgba(33,45,80,0);} /* aus der Not geboren, weil ich den Rahmen nicht wegbekommen habe!*/
tr {page-break-inside: avoid;}



/*	=============================================
		Buttons
	============================================*/

.btn100{
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	/*padding: 12px 20px;*/
	padding: 4px 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;	
}

.btn50{
	width:49%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 4px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.btn_small{
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 7px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;	
}

/* verwendet in gallery für die Auswahl Jung, Alt etc */
.btn_small_gallery{
    background-color:rgba(243, 221, 177, 0.82);
    color: black;
	font-size:0.8em;
	font-family: Montserrat, Calibri, Segoe print, Papyrus;
	font-weight: 500;
	letter-spacing: 0.21em;
    margin-top:1em;
	padding: 14px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width:100%;	 /* 100% von aside Kästchen*/
	min-width:7em;
	box-shadow: 0em 0em 1em 0em;	
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}
.btn_small_gallery_active{
    background-color:#ff9b00;
    color: black;
	font-size:0.8em;
	font-family: Montserrat, Calibri, Segoe print, Papyrus;
	font-weight: 500;
	letter-spacing: 0.21em;
    margin-top:1em;
	padding: 14px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width:100%;	
	min-width:7em;
	box-shadow: 0em 0em 1em 0em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 	
}

.btn_small_gallery:hover{
	background-color:rgba(173, 172, 170, 0.48);
}


.btn { 
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Auswahlbuttons für die Tierart */
.formbtn_gallery { 
    background-color:#4a4444;
    color: white;
    margin:1em;
	padding: 6px 6px; /*5px 11px;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.8em; /* angpasst an Icons */
	width:11em;
}
/* wenn eine Tierarteingegrenz ist, dann den Button anders färben*/
.formbtn_gallery_active { 
    background-color:#ff9b00;
    color: white;
    margin:1em;
	padding: 6px 6px; /*5px 11px;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.8em; /* angpasst an Icons */
	width:11em;
}

input[type=submit]:hover, #form button:hover, .btn100:hover{
	background-color:rgb(53, 83, 99); /* blau rgb(27, 94, 144);*/
}
.formbtn_gallery a:hover, .formbtn_gallery_active a:hover{color:white}
button.formbtn_gallery:hover{ background-color: #877d7d;}



/* =======================================================
	Formular animalSettingsEdit Tabellen Optikn 4 Spalten
	======================================================*/

#animalSettingsEdit input[type=text]{width:65%;}
/*#animalSettingsEdit0 input[type=text]{width:100%;}*/


#animalSettingsEdit input[type=submit],
#animalSettingsEdit0 input[type=submit] {
	/*width:100%;*/
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin:0em 8px;
	padding: 5.7px 5px;
    border: none;
    border-radius: 2px; 
    cursor: pointer; 
}
#animalSettingsEdit input[type=submit]:hover, 
#animalSettingsEdit0 input[type=submit]:hover{background-color:rgb(27, 94, 144);}

/*#animalSettingsEdit0 label{font-weight:bold;}*/

#animalSettingsEdit fieldset,
#animalSettingsEdit0 fieldset{margin-top:7px;}

#animalSettingsEdit0 summary{font-family:calibri;}
#animalSettingsEdit0 summary.fa-pencil-square-o{color: rgba(33,45,80,0.85);}

/* Tabellen Optik */
/*.row, .col_left, .col_right {border: 1px solid blue;}*/


/* Einstellungen besser für die Formulare, aber zerschießt die animal galerie! Könnte auch mit responsive wieder besser werden!*/ 
.row{padding:0.21em 0em; margin:0em 0.7em;}  

/* alte Einstellungen
.row{padding:0.41em 0em; margin:0.7em;}*/
.row1{
	width:100%; 
	padding:0.41em 0em; 
	margin:1em auto 1em;
	
}
.col_20{
	float: left;
	width: 20%;	
}

.col_21{
	float: left;
	width: 21%;	
}

.col_30_l{
	float: left;
	width: 30%;	
	padding-left:0.3em;
}

.col_30{
	float: left;
	width: 30%;	
	border-left:1px solid white;
	margin-left:1em;
	padding-left:0.3em;
}
.col_34{
	float: left;
	width: 34%;	
	border-left:1px solid white;
	margin-left:1em;
	padding-left:0.3em;
}

.col_22{
	float: left;
	width: 28%;	
}

.col_40{
	float: left;
	width: 39%;	
	display:inline;	
}
.col_25{
	float: left;
	width: 29%;	
	display:inline;
	border-left:1px solid white;
	overflow-y: auto;
	height:5em;
}
.col_12{
	/*float: left;*/
	text-align:center;
	/*width: 12%;*/	
}

.col_btn_r{
	float: right;
	width: 7%;	
	padding-right:1em;
	margin-top: 11px;  /* da das Formular zweireihig ist, muss der Button etwas nach unten geschoben werden um auf gleicher Höhe zu stehen*/
vertical-align:bottom;
	}
.col_50_left{
	float: left;
	width: 48%;	
	margin-right:1em;
}

.col_50{
	float: left;
	width: 48%;	
	
}
/* 	=====================================================================
		2 Spaltige Tabellen Optik
		Stammdaten eines Hundes anlegen / animal create und animal edit
	=====================================================================*/
.col{float: left;  margin-top: 6px;}

.col_left {
    float: left;
    width: 34%;
    margin-top: 6px;
}

.col_left_third {
    float: left;
    width: 30%;
    margin-top: 6px;
}

.col_right {
    float: left;
    width: 66%;
    margin-top: 6px;
}
/*
.col_20 {
	float: left;
	width: 30%;
	margin-top: 6px;
	border:3px solid red;
	display:inline;
}*/
.col_mid {
	float: left;
	width: 28%; /*width: 34%;*/
	margin-top: 6px;
	margin-left:9px;
	margin-right:9px;
}

/* Clear floats after the columns */
.row:after,.row1:after {
    content: "";
    display: table;
    clear: both;
}

/* 	====================================
		Toolbar
	===================================== */
	
/* Variante 1 - Buttons in einer Leiste mit Hintergund*/
#toolbar button{clear:all;}
	button:hover{}
#toolbar {
	display:block; 
	width:90%;
	margin-left:auto; 
	margin-right:auto; 
	text-align:right; 
	padding:0.3em; 
	box-shadow:1em 1em 1em -1em;
}
/* Variante 2 - Buttonsammlung*/
#toolbar11{text-align:right; }
.btn_group .button {
    /*background:yellow;*/
	padding: 0px 9px;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
	height:1.5em;
	font-size:1.2em;
}

.btn_group .button:not(:last-child) { border-right: none;} /* Prevent double borders */

/*Zum Testen */
#toolbar0{display:block; width:90%; margin-left:auto; margin-right:auto; text-align:right; padding:0.3em;}

#toolbar1{ width:90%;}

#toolbar1 button {     
	margin:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}


/* 	====================================
		Tierdatenblatt anlegen
	===================================== */
	
#basic_animal_data{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);}
#basic_vet_data{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);}

.databox_blue{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);}
.databox_red{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);}
.databox_green{margin-top:0.7em; border:1px solid green;background-color:rgba(37, 174, 68, 0.2);}
.databox_teal{ margin-top:0.7em; border:1px solid teal; background-color:rgba(15, 131, 135, 0.2);} /* helleres Petrol */

/* Einstellungen für unsere Tools */
.databox_teal1{ margin-top:0.7em; border:1px solid #8bdbd3;; background-color:rgba(0, 98, 127, 0.51);} /* dunkleres Petrol */


		
/* ===================================== 
	Ende Das ist der komplette Ihnalt voon form_styles
	==========================================*/
	
/* 	====================================
	Mobile Style zur Zeit ausgelagert in : 
	was die nav betrifft: in responsive_drop_menu_styles
	der Rest: mediaQ_content.css
	================= =================== */	
/*=============================================================================================	
		ANFANG -	Diese Angaben sind alle neu und aktuell 16.12.23
	=============================================================================================*/	
	

/* Pagination */
.paginationlink{font-size:1.2em; font-weight:bold;}
.paginationlink nav{ background-color:transparent;}
.paginationlink nav ul li a{ color:rgba(33,45,80,0.95);} /*aniSYS-blau*/
.paginationlink nav ul li a:hover{ background-color:transparent;}
.paginationlink nav ul li a:active{ background-color:transparent;}
.paginationlink a {
	color:#4ba9c8;
}

/* Achtung nav betrifft auch die pagination!! */
nav{ 
	display:block; 
	width:100%;
	height:2.5em;
	background-color: rgba(33,45,80,0.85); /*dunkler blau und nicht transparent: rgb(8, 19, 53);*/  /* Variante Grün: dunkelgrün: #00695c;*/
	position:relative; /* um den Logostring positionieren zu können*/
	/*box-shadow: white 0em 0em 3em 1em;*/
	Z-index:100;
}

/* durch diese Einstellung kann das dropdown Menü ausgerichtet werden*/
nav li {
position:relative;
}

nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align:right;
	z-index:100;
	display:block;  /*wird benötigt damit im Responsive Design das Menü ausgeklappt bleibt*/
	/*text-align:center;*/
}

nav ul li{
	display: inline-block;
	margin: 0;	
	padding: 0;
	font-size: 1.125em;
	line-height:1.5em;
	/*font-family:Helvetica;  ist etwas kräftiger und klarer*/
	letter-spacing:0.15em;
	font-weight:100;
}

nav ul li a{
	color: white;/* Variante Grün: Schrift weiß */
	text-decoration: none;
	padding:0.7em 0.4em ;
	/*display: block;*/
	/*padding:0.563em 0.938em 0.375em 0.983em;*/
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}

nav ul li a:hover{
	color:#4ba9c8;
		/*color:rgb(17, 151, 224); /*#08c2ff;	#ece91c;*/ 
	/* klaree hellblau : color:rgb(17, 151, 224); /* Variante Grün: mittelgrün: ul li:hover background-color:#00897b;*/
}

/*	Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein!	*/
.dropdown1Level{ display:none;}

nav ul li a.active {
	border-bottom: 0.188em solid #08c2ff;
}
nav ul li:hover ul{
	/*display: block;*/  
}

nav ul ul{
	display: none;
	position: absolute;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: rgba(33,45,80,0.85); /* Variante Grün:background-color: #00897b;*/
	text-align:left;
}

nav ul ul li{
	display: block;  /* bewirkt dass die li untereinander stehen*/
	font-size:1.0em;
}

nav ul ul li a:hover{
	/*background-color: rgba(8,17,45,0.35);    /* Variante Grün: etwas dunkler als der dropdown hintergrund: background-color: #26a69a; #26a69a; */
}

nav ul li i{
	color: white;
	/*float: right;*/
	padding-left: 1em;
}

/*========================================================================

===========================================================================*/	

#popup_bg {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: white;
/*  background-color: rgb(0,0,0);
  background-color: #042640f7;*/
  background-size: cover;
}
/*
.popup_container {
  display: none;
  background-color: white;
  position: fixed;
  top: 10em;
  left: 50%;
  margin-left: -21em;
  width: 42em;
  max-width: 98vw;
  height: auto;
  z-index: 101;
  text-align: center;
  overflow: auto;
}*/
.popup_container {
  display: none;
  background-color: #4a4444;
  position: fixed;
  z-index: 100;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 101;
  text-align: center;
  overflow: auto;
  padding:3em;
  
}



/* ================================================================================
	Anfang Neue Änderungen, die bleiben und definitiv benötigt werden
 ================================================================================*/
 /* seit ich Menü in Animalwebprofile includiert habe sind die Buttons zu niedrig, daher hier spezielle Anweisungen */
.formbtn_grey.buttonAnimalwebprofile, .formbtn_green.buttonAnimalwebprofile,.formbtn.buttonAnimalwebprofile{padding: 10px 8px; font-size:1.0em;}

/* für breite Tabellen */
.overflowS{
	/* alte Version: der Scrollbalken ist immer zu sehen auch wenn es nicht zu scrollen gibt 
	overflow-x:scroll;
	*/
	overflow-x:auto;
	/* im Popup auf Handy machts weißen streifen, daher mal ohne testen margin-bottom:1em; /* ursprügnlich 3em eingefügt, damit mehrere Tabellen untereinander genug Abstand bekommen*/
}
/* funkltioniert leider nicht, eigentlich sollte der Abstand zur Pagination kleiner werden */ #animalindextable .overflowS{margin-bottom:0.5em;}

.overflowYS{overflow-y:auto;} /*scroll: scrollbalken wird immer angezeigt, auto: scrollbalken wird nur angezeigt, wenn Bedarf besteht! */
/* overflow-x: auto EInstellung soll eigentlich dafür sorgen, dass die Tabelle wenn sie zu breit ist scrollbar ist. Testen ob man das das auch in das Fieldset als Klasse einfügen kann!*/

 
.formbtn { 
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-left:0;
	padding: 2px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.9em; /* angpasst an Icons */
}

 .formbtn_grey{
    background-color: grey;
    color: white;
 /*   margin-left:5px;*/
	padding: 4px 8px;
    border: none;
    border-radius: 4px;
	cursor: default;
	font-size:1.0em; /*1.2 angpasst an Icons */
}

.formbtn_green { 
    background-color: rgba(43, 117, 55, 0.85);
    color: white;
    margin-left:0px;
	padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:1.0em; /*1.2 angpasst an Icons */
}

 
 /* main ist dann genauso große wie content, damit siehts für den animalwebprofile besser aus*/
#main_web{
	width: 94vw;
	max-width: 1200px;
	margin: 8em auto 6.5em;
	background-color:white;
}

/* content_standard sind die normalen blauen Contenteinstellungen die innerhalb des Tools verwendet werden */
.content{
  position: relative;

  text-align: left;

  padding: 1em;

  margin: 1em auto;

  max-width: 94%;

  max-width: 1200px;

  box-shadow: 4px 3px 11px 2px;

  color: rgba(14, 13, 12, 0.9);

 /* background-color: rgba(19, 77, 120, 0.4); /* mehr ins grau => vllt kann man da draus deceased machen*/

/*  background-color: rgba(125, 166, 198, 0.63);*/

}
.content_standard{  background-color: rgba(125, 166, 198, 0.63);}
.content_web{  background-color:white;}

.orange {  color: #ff7800; }
.content_innerNavbar { 
	max-width: 100%;
	background-color: transparent;
	Z-index: 80; 
}


.infobuttonblue {
  color: rgb(18, 115, 200);
}	


/*	=========================================================================
				animaltoolbar_dropdown 
	===========================================================================*/

 
.animal_navbar {
	/*
	!!!!Zur Verteilung der Icons auf der animal_navbar, sodass alles Mittig aussieht, habe ich die seitlichen Abst�nde der
	Icons gefixt. Wenn ein Icon hinzu kommt muss entweder die animal_navbar verbreitert werden oder die Abst�nde zwischen den Icons verkleinert werden!!!
	*/
	font-family: Montserrat, Calibri, Helvetica, Verdana;
	overflow: hidden;
	/* background-color: #333;*/
	width:53em;  /* 53 em passt genau auf die 10 Icons. Die Breite bleibt jetzt immer gleich, dadurch sind die Icons immer in der Mitte ausgerichtet. Wenn aber das Fenster < 53 Em ist, dann müssen wir auf 100% umstellen, damit die Icons in die 2. Reihe gehen und nicht über den Rand raus gehen. das hier entscheidet darüber wieviel Platz gesamt für die Icons vorhanden ist. */
	margin-right:auto;
	margin-left:auto;
	
}

.animal_navbar a {
	float: left;
	font-size: 26px;
	/* color: white;*/
	text-align: center;
	padding: 14px 29px;
	text-decoration: none; 
	/*um die Icons mittig auszurichten Breite der Navbar gesamt durch die Anzahl der Icons in % ausgeben. Also bei 100% Breite 5 Icons: 20% Pro Icon*/
	/* 
		width:6%; f�hrt dazu, dass die dropdown a beim Hovern nur 6% gef�rbt sind!
		Entweder muss jetzt jeder dropdown a und der drop-content in dem er sich befindet auf eine feste Breite eingestellt werden, un dauch 
		der a:hover - erwarte ich Probleme mit Responsive
		oder ich habe jetzt die Icons, also anker mit seitlichem Padding auseinander gezogen. 	
	*/
	color: rgba(33,45,80, 0.95);
	background-color: inherit;
	font-family: inherit;
}

.animal_dropdown_container {
	float: left;
	overflow: hidden;
	z-index:80; /* Muss höher sein als Content oder ggf auf Handy auch Content in dem der Tiersteckbrief liegt */
}

.animal_dropdown_container .dropbtn {
	/*width:6%;*/
	font-size: 26px;  
	border: none;
	outline: none;
	color: rgba(33,45,80, 0.95);
	background-color: inherit;
	font-family: inherit; /* Important for vertical align on mobile phones */
	padding: 14px 29px;
	margin: 0; /* Important for vertical align on mobile phones */
	
}
.infobuttonblue:hover{color:white;}

.animal_navbar a:hover, .animal_dropdown_container:hover .dropbtn {
	color:white; background-color: rgba(19, 77, 120, 0.4);
}


.dropdown_content {
	display: none;
	position: absolute;
	background-color:white;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 80; /*1;*/
	/*width: 269px;*/	
}

.dropdown_content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	font-size: 17px;
	/* damit in der Navigation die Icons gleichm��ig verteilt werden k�nnen �ber width 6% muss hier und in dropdown_content a:hover eine feste Breite 
		festgelegt werden. Das ist aber noch nicht responsive! */
	/*width: 237px;*/
}

.dropdown_content a:hover {	background-color: rgba(19, 77, 120, 0.4);
/* width: 237px;*/}

.animal_dropdown_container:hover .dropdown_content {	display: block; }
/*=============================================================================================	
		ENDE -	Diese Angaben sind alle neu und aktuell 16.12.23
	=============================================================================================*/	
	
	/*=============================================================================================	
		Medias 1:1 aus aniSYS.css übernommen
		in diesem Zuge die MediaQueries.css aus dem Layout entfernt
	=============================================================================================*/	
	
	
	
/* 	====================================
	Mobile Style - Mediaquerys
	==================================== */	
/**/
@media screen and (max-width:1330px) {
	/* Depatureliste einioge Spalten ausblenden */
	.internationaldepatureindex_DateOfLastRabiesVacc, .internationaldepatureindex_Recipient, .internationaldepatureindex_Transportcompany{display:none;}
	
	.webprofileLeftImg img{
	  max-width: 27em;
	  margin: 0.3em 0em;
	}
	
	/* betrifft alle kleinen Buttons in den Listen auch in Depature */
	.formbtn, .redformbtn, .btn_delete{font-size: 1em;}
	
	/* da müssen noch weitere Buttons dazu*/
	 .btn20, .greenformbtn {	width: 18em; }
}

/* Bis 970px ist das Formular Masterdata gerade noch erträglich
	Bis 1080px geht das IconBar AnimalMenü nebeneinander, wenn jetzt die Sidebar wegfällt. dann ist wieder Platz
*/
@media screen and (max-width:1080px) {
/*3 Spalten in der Gallery*/
	.column {
	  width: 30%;
	  padding: 0.26em; /*schafft ein bißchen Platz für 3spaltig*/
	}   
	body {
	/*	font-size:90%;*/
	}
	/* ?? Verwendung?
	#main aside p {		margin:0em 1.5em;	} */
	
	/* betrifft die Buttons auf den Bildern in Media*/
	.redformbtn_media, .formbtn_media, .image_toolbar .formbtn_green, .image_toolbar .formbtncoverimage { 
		padding: 11px 6px;
		font-size: 1.5em;
		margin: 0.2em 0em;
	}	
	/* Seitenleiste in Tiergallerie mit den Filterbuttons ausblenden*/
	#animalGallery_aside {  display:none;}
	#galleryFilterbuttons {  display:block;}
	/* Contentbereich für Bilder auf 100% verbreitern*/
	#animalGallery_mainContent { width: 100%; }
 
}
	/* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/
 #animalInfo_tablet { display:block;}
 #animalInfo_mobile{  display:none;}
	/* Zum Testen: Menüpinkte vom Personinnernav ausblenden*/
	/*Gesamzes PersonNavbar ausblenden 
	.content_personInnerNav{display:none;}*/
	/* Einelne Menüpunkte*/
	
	
	/* Zum Testen: Menüpinkte vom animalInnernav ausblenden*/
	/*Gesamzes AnimalNavbar ausblenden */
	/*.content_innerNavbar{display:none;}*/
	
	/* Einelne Menüpunkte*/
/*	.Generaltreatment {display:none;}
 	.Overviewtreatments {display:none;}
	.animalinfo {display:none;}
	.Masterdata {display:none;}
	.Passportdata {display:none;}
	.Animaldescription {display:none;}
	.Entryexamination {display:none;}
	.finalexamination {display:none;}
	.Medicaltests {display:none;}
	.addTreatmentdocs {display:none;}
	.Deathcertificate {display:none;}
	.addvaccine {display:none;}
	.addantiparasite {display:none;}
	.manageanimalimages {display:none;}
	.manageanimalvideos {display:none;}
	.animalwebprofile {display:none;}
	.Adoptionwaitinglist {display:none;}
	.Addspecialfood {display:none;}
	*/
/* Die klasse verwenden wir scheinbar nicht mehr */	
 .animalprofile_sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }

  .animalprofile_sidenav a {float: left;}
  
    /* auf dem Handy kein Tiersteckbrief, daher der Abstand zur linken Seite rausnehmen über auto! */
  #main2Col{
	margin:10em auto 1em; /*10em Abstand oben erlaubt 3Zeiliges Menü*/  
	width:100vw;
	max-width:100%;
	/*display:block;
	max-width:83vw;
	margin:7em 1em 1em 14em;
	padding: 1em 0.1em;
	*/
	}
	
	/*Statt des Steckbiefs in aside jetzt ein Contentbereich mit dem Steckbrief einfügen*/
	.animalInfoContent{ display:block;}
	
	/*Steckbiefs in aside ausblenden, stattdessen jetzt ein Contentbereich mit dem Steckbrief einfügen*/
	#animalpages_col_aside{display:none;}
	
	
}

@media (max-width:1020px){
	body {
		/*background-image:url(./img/kuerbis2_XXL.jpg);*/
	}
	
	/* Seiten mit speziellen Hintergründen
	body.help{background-image:url(./img/wGruen_XXL.jpg);}
	body.LOG{background-image:url(./img/wGruen_XXL.jpg);}
	body.LOGO{background-image:url(./img/wGruen_XXL.jpg);} */
	/*body.dashboard{background-image:url(./img/wGruen_XXL.jpg);}*/
	
	
	/* Login, Logout*/
	#mainLog, .logout {width: 87vw;}
	
	/* Schrift vom Logout*/
	.logout h1{color:white; font-size:1.8em;}
	
/*  Hundeüberblick Galerie mit Grid */
	.column {  width: 30%; }
	
	/*news */
	.col-mainContent{width:75%;}
	
	/*Schrift für Namen der Tiere Hundeüberblick*/
	span.polaroid{font-size: 1.1em;}
	
	div.petRegCardDescr p{font-size: 1.0em;}
	
	#profileTopImg img {
    width: 57%;
	}
	
	/* 	Informations Fenster über die aniSYS Website  */	
	section#information{ border:3px solid maroon; margin: 3em; background-color: rgba(255, 255, 255, 0.44);}
	#information h1{ color:maroon; border-bottom: 3px solid maroon; margin-bottom: 1.5em;}	
	#information p{ margin: 1.5em;}	


}
	
/* ==================================================================================*/
	
	
/*ipad Hochformat*/
@media screen and (max-width:896px) {

body{/*background-color:pink;*/ font-size:90%; }
#Boxnotes{font-size:90%; } 
	
	/*body.dashboard{background-image:url(./img/kuerbis2_XXL.jpg);}*/
	.internationaldepatureindex_DateOfLastRabiesVacc, .internationaldepatureindex_Recipient, .internationaldepatureindex_Transportcompany{display:none;}
	/*.popup_container, .popup_container.depaturePopup{top:1em;}*/
	
	/* Flex-Container für Login und Logout*/
	#logContent {
		width: 95%; /* für sehr große Buttons 81%;*/
		margin-left: auto;
		margin-right:auto;
		padding:1em;
		display: flex;
		flex-direction: column;  /*default wert*/
		flex-wrap:wrap;
	}
	
	#logContent  h1{font-size:1.8em;}
	#logContent input, #logContent button {width:27%;}
	
	/* Schrift vom Logout*/
	.logout h1{color:white; font-size:1.7em;}
	
	.back-to-login{font-size:1.2em;}

	
	
	/* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/
	.helpDashIB {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:30%;
		margin: 0.4em 0.3em 1em;
	}
	
/*	body.help{font-size:63%;}
	body.help h1{font-size:3em;}
	#helpOverview{width:85%;}*/
	
	#hingucker{
		/*border:7px solid green;*/
		height: 19em;
		width: 100%;
		margin:2em auto;
		background-image:url(./img/wgrau_XL.jpg); /*; url(./img/uliHecke_XXL.jpg)/*waldL: url(./img/waldL.jpg);*/
		background-position: center center;  /* 1. Angabe ist Horizontal zweite für vertikale Ausrichtung r*/
		background-attachment: scroll;
		background-size:cover;
		/*background-size: 10% 10%;	/*896px 120px;  /*50% 30%: Bild wird horizontal auf 50% und vertikal auf 30% gestaucht . Bild in der Größe anzupassen*/
		background-repeat: no-repeat;
	}
	
	.fa-4x {font-size: 2em;}
	.fa-5x {font-size: 2em;}
	
	/* 2-Spaltiges Layout */
	
	/*.col-MainContent p{margin:0.5em 1em;}	*/
	.aside-article li, .aside-article p {margin:0.5em 1.7em;}	
	
	/*  Hundeüberblick Galerie mit Grid  auf 3 Spalten reduziert*/
	/*.column {
        width: 22%;
    }
	
		/*news */
	.col-mainContent{width:100%;}
	.col-side{width:100%;}
	
	/* Animal Webauftritt : Variante für kleine Screens: Bild groß in einer Row. Informationen zu Charakter unten drunter*/
	#animalWebprofilePresentingContainer1{ display:block;}
	
	/* Animal Webauftritt : Variante für große  Screens: Bild und Informationen zu Charakter in einer Zeile  ausblenden*/
	#animalWebprofilePresentingContainer2{ display:none;}
	
	popup h1 { line-height: 1em;}
	
}

		
/*ipad Hochformat*/
@media screen and (max-width:896px) {

body{/*background-color:pink;*/ font-size:90%; }
#Boxnotes{font-size:90%; } 

/* Animal Webauftritt : Variante für kleine Screens: Bild groß in einer Row. Informationen zu Charakter unten drunter*/
	#animalWebprofilePresentingContainer1{ display:block;}
	
	/* Animal Webauftritt : Variante für große  Screens: Bild und Informationen zu Charakter in einer Zeile  ausblenden*/
	#animalWebprofilePresentingContainer2{ display:none;}
}	


/* ab hier geht das animal Icon Menü nicht mehr in eine Zeile -	AB HIER Menü zu ausklappen */
@media screen and (max-width:850px) {
	/*body {
		font-size:80%; background-color:red;
	}
#Boxnotes{font-size:80%; } */
	
	.internationaldepatureindex_Transporter{display:none;}
	
	h1 {font-size:2em;}
	/*Icons von animalNavbar zusammenziehen */
	.animal_navbar a{padding: 14px 17px;}
	
	#main { margin: 4em auto 1em;}
	
/*	#main aside p {		margin:0em 1.5em;	}*/
	
	
	
/*	=============================================================================
			 NAVIGATION
	============================================================================ */

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* kleiner als 600px stellen wir um von Menü auf ausklappbares Menü*/
/* Alle weiteren ANgaben damit das Dropdown mit dem kl. Menü funktioniert steht in NewResponsiveNav.blade */
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  /*Menüpunkte aus dem Hauptmenü sperren fürs Handy*/
	.topnav.responsive a.manageaccomodations {display:none;}
	.topnav.responsive a.manageaccomodationcategories {display:none;}
	.topnav.responsive a.showorganizationdata {display:none;}
	.topnav.responsive a.UserAdministration {display:none;}

	/*Menüpunkte aus dem Hauptmenü sperren fürs Handy*/
	/*.person_navbar span.Editperson {display:none;}*/
}

/* mein Iphone quer!!! */
@media screen and (max-width:754px) {
	/*body {font-size:80%; background-color:lime;} 
#Boxnotes{font-size:80%; } 	*/
	
	.internationaldepatureindex_Destination{display:none;}
	.animaldocumentationsShow_ListedInFinalexamination{display:none;}
	
	/* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/
	 #animalInfo_tablet { display:none;}
	 #animalInfo_mobile{  display:block;}		
	
	#Boxnotes{font-size:65%;} 	
	

	
	/* Alle kleinen Buttons z.B. in den Listen */
	.formbtn, .redformbtn, .btn_delete, .formbtn_grey, .formbtn_green{font-size: 1.5em;}	 /* diese gr. besser noich 2em ist erforderlich für die quadratischen Buttons auf dem Handy*/
}

@media screen and (max-width:720px) {  
		#main article h1{
			font-size:1.7em;			
		}
}

/*===================lime=========================================================================*/	
 
@media screen and (max-width:720px) {
	/*body{font-size:80%; }
	#Boxnotes{font-size:80%;} 	*/
	
	p{margin:0.5em 1.8em;}
	
	ul {margin:2.2em; padding:0em;}
	
	li {margin:0.5em;}
	
	/* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/
	.helpDashIB {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:25%;
		margin: 0.4em 0.3em 1em;
	}
}


/* iPHone SE quer ist 667 px das wird dann hier mit abgedeckt*/
@media screen and (max-width: 700px) {
	body{/*	background-color:teal;*/ 
		font-size:90%; 
		overflow-x:hidden!important; /* Viele sagen auch das die Website dann sozusagen „Schwimmt“. Dieses Problem tritt auf, wenn Text oder ein Bild aus dem Content ragt. */
	}
	
	#Boxnotes{font-size:90%;} 	
	
	/*Unterbringung eintragen in Stamdatten und in Popup von Depatureliste beim removen */
	.col_select2box {
		float: left;
		width: 30%; /*8em; Das sind die orgiginal Angaben */
		max-width:30%;
		margin-top: 0px;
	}
	
	
	/* Steht alles auch in 400px drin*/
	
	h1 {font-size:1.6em; margin:0em 0.1em;}/*{font-size:1.2em; margin:0em 0.1em;}*/
	h2{font-size:1em; hyphens:auto; letter-spacing:0;letter-spacing:0;}
	h6{letter-spacing: 0em;}
	/* damit das Handbuchicon noch neben der Überschrift ist*/
	.col {
		float: left;
		margin: 0px;
	}
/*	.w5	/* für animalwebprofile Buttons editieren und veröffentlichen brauchen wir mehr 11% platz*/ /*	width: 11%; /*4%; }*/	

	/* Icon bar */
	.animal_navbar {
		/*
		!!!!Zur Verteilung der Icons auf der animal_navbar, sodass alles Mittig aussieht, habe ich die seitlichen Abst�nde der
		Icons gefixt. Wenn ein Icon hinzu kommt muss entweder die animal_navbar verbreitert werden oder die Abst�nde zwischen den Icons verkleinert werden!!!
		*/
		width:100%;  /* 53 em passt genau auf die 10 Icons. Die Breite bleibt jetzt immer gleich, dadurch sind die Icons immer in der Mitte ausgerichtet. Wenn aber das Fenster < 53 Em ist, dann müssen wir auf 100% umstellen, damit die Icons in die 2. Reihe gehen und nicht über den Rand raus gehen. das hier entscheidet darüber wieviel Platz gesamt für die Icons vorhanden ist. */
	}

	.animal_navbar a {
		padding: 14px 14px;
	}
	/* Filter-Buttons in animal/index */
		.animlaindex_navbar a {padding:  14px 0;}
	
	/*Dashboardboxen auf 100% Breite stellen*/
	.dashIB {
		min-width: 96%; /* Habe es nicht auf 100% gesetzt, weil man sonst auf der Seite nicht mehr anständig scrollen kann*/
	}
	
	
	
	/* Login */
	#mainLog, .logout {
	width: 73vw;
	margin: 4em auto 1em auto;
	}

	#logContent input{
	width: 40%;
	}

	#logContent button {width: 89%; /*Damit ist der Button so breit wie die zwei Inputfelder oben drüber */}
	
	/* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/
	 #animalInfo_tablet { display:none;}
	 #animalInfo_mobile{  display:block;}		
 
}

/* iPHone SE quer ist 667 px das wird dann hier mit abgedeckt*/
@media only screen and (max-width: 700px){
	/*2 Spalten in der Gallery*/
	.column {
	  width: 45%;
	}   
	/* hat irgendwas mit den Bilder in der Gallery zu tun*/
   .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
	
	.popup_container {padding: 2em; }
}


/* alte Version @media screen and (max-width: 600px) { */
@media screen and (max-width: 676px) {

  
  body {font-size:90%; 		/*background-color:yellow;*/ }
	
	#Boxnotes{font-size:90%;} 	
	/* kleiner als 600px stellen wir um von Menü auf ausklappbares Menü, dann muss der Content hochrutschen
	!! wenn wir das Ausklpaabare Menü schon auf Querformat Handy verschieben, dann muss das hier in eine andere M
	*/ 
	#main2Col { margin: 4em auto 1em; }
	
	/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	
	/*!! das muss ausgeweitet werden auf die Spalten klassen von den Formularen */
	/* Ergänzen :  Type Buttoen, Selcet 2 etc ... Select2 : .select2box*/
	.col_left, .col_right, .col_L, input[type=text], input[type=email], input[type=password],
	input[type=date], input[type=tel], input[type=url], input[type=number], 
	input[type=file], textarea, input[type=submit] {
        width: 100%;
        margin: 2px;
    }
	
	select{ width: 100%; /* padding: 7px;*/ }
	
	/* Ausnahmen: z.B. Frage mit Checkbox, soll in einer Zeile bleiben */
	.col_left.question_withoption_left, .col_right.question_withoption_right { width: 48%; margin: 2px;}
}


/*================gray============================================================================*/	

@media screen and (max-width:655px) {
	
/*	.break-L {display:none;} /* sichtbar auf großen Screens*/
/*	.break-M {display:block;} /* sichtbar bis Screen grau*/
/*	.break-S {display:none;} /* sichtbar bis Screen pink*/
	
	/*body{font-size:65%;}
	#Boxnotes{font-size:65%;} */
	
	.col-mainContent, .col-side{ width: 100%;}
	
	/*p, li {font-size: 1.3em;}*/
	
/*	denke das ist hier nicht mehr richtig. überschreibt oben drüber !!! #logContent input  {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		/*width:26%;
		font-size:0.9em;
	}
	*/
	
	
	#hingucker {
		/* background-image:none; /*url(./img/hundISand_S.jpg);*/
		height:14em;
		overflow:hidden; /* das Bild wird von unten her abgeschnitten*/
	}
	
	/* animalwebprofile editButton und veröffentlichen Button */
	#toolbar_animalwebprofile {  width: 90%;}

	/*#hingucker img {display:block; width:100%;}*/
	
	.helpDashIB i {font-size:3em;}
	.helpDashIB h2 {font-size:0.7em;}
	
	/* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/
	.helpDashIB {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:19%;
		margin: 0.4em 0.3em 1em;
	}
		
	/*  Hundeüberblick Galerie mit Grid  auf 3 Spalten reduziert*/
	/*.column {width: 42%;}*/
	
	/*Schrift für Namen der Tiere Hundeüberblick*/
	span.polaroid{font-size: 1.2em;}
	
	div.petRegCardDescr p{font-size: 1.0em;}

	
	/* Tierprofil*/
	#profileTopImg h1{font-size: 1.5em;}

	/* Hundeprofil Bildergalerie*/
	div.thumbnailProfile img{width:auto; height:auto;}	
	
	/*Infofenster über die Website*/
	section#information{ border:3px solid maroon; margin: 1.5em;}
	
	/*nach oben scrollen button*/
	.buttonTop{	
		width:6%;
		position:fixed;
		bottom:0em;
		right:1.5em;
	}
}



@media screen and (max-width:655px) {
	/*body {font-size:90%; background-color:maroon;} 
	#Boxnotes{font-size:90%;} */
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .col_left, .col_right, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
/*=================================green===========================================================*/	

@media screen and (max-width:550px) {
	body {	font-size:90%;}
	#Boxnotes{font-size:90%;} 	
	
	#hingucker {height:14em;}
}

/*=================================pink==================================================*/

@media screen and (max-width:506px) {
		/*body{font-size:65%;}
		#Boxnotes{font-size:65%;} */
	
/*	.break-L {display:none;} /* sichtbar auf großen Screens*/
/*	.break-M {display:block;} /* sichtbar bis Screen grau*/
/*	.break-S {display:block;} /* sichtbar bis Screen pink*/
	
	
	/* Flex-Container für Helfen und Login und Logout*/
	#helpOverview, #logContent {
		max-width: 95%; /* für sehr große Buttons 81%;*/
		margin-left: auto;
		margin-right:auto;
		padding:1em;
		display: flex;
		flex-direction: column;  /*default wert*/
		flex-wrap:wrap;
	}

	/* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/
	.helpDashIB {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:60%;
		margin: 0.4em auto 1em;
	}
	
	#logContent input , #logContent button {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:95%;
		margin: 0.4em auto 1em;
	}
	.helpDashIB i {font-size:3em;}


	#main article h1{
		font-size:1.3em;			
	}
	
	#main {
	  display: block;
	  width: 100vw;
	  max-width: 100vw;
	  margin: 3em auto 1em;
	  padding: 1.5em 0.1em;
	}
	.content {
		padding: 0.3em;
		max-width: 	96%;
	}
	
	/* !! POPUP Fenster */
	/* !! muss fertig gestellt werden, auch für alle anderen Bildschirmgrößen!
		warum steht das hier überhaupT?? Das ist doch die Grundeinstellung oder?*/
		.popup_container{
		/*	display: none;
			background-color:white;
			position: fixed;
				top:5em;
				left:21em;
				width:28em;
			height:auto;
	z-index: 98; /* MUSS niedriger sein als NAvigation und das Dropdwn von Navi und popup_container_findingaddress*/
				/*			max-width: 100%; /*Klappt so nicht!  In den Mediaquerys müssen wir ein kleiner wenn nicht begrenzt wird, dann auf mobil über den Bildschirm hinaus*/

			/* rausgenommen	margin-left: -14em; */
			
			
		}
		/* Bereich in dem sich das Formular o.Ä. im Popup befindet */
		/* !! Wenn es für alle Fälle passt taC aus Bladeseiten raus und hier einstellen! */
		.popup_content {height:auto; padding:1em;} 

		/*spezieller Fall: Textarea*/
	/*	.popup_container textarea {height:15em;}*/

	/*zwei Spaltiges Design hier auf 100% breite setzen*/
	.w49, .w48 {
		width: 97%;
	}
	
	/* Animal Webprofile */
	.animal_PresentingImage img {margin: 0;}
	  
	/*Bilder Galerie im Tierwebauftritt */
	div.thumbnailProfile img {   max-height: 14em; }
	
	/* Video Links im Webauftritt in der Größe anpassen */
	iframe {
		  max-width: 333px;
		  max-height: 265px;
	}
	
}

@media screen and (max-width: 506px) {
  .animal_PresentingImage img {
    margin: 0;
  }
  .popup_container {padding: 1em; }
}


@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

/*==========================lime==================================================================*/	


@media (max-width: 480px){
	body{/*background-color:lime;*/ font-size:90%;} /*hier wirds wieder größer warum?? vorger 65%*/
	#Boxnotes{font-size:90%;} 
	/* Login */
	#mainLog h1 { font-size:1.8em;}
	
	#main { }
 /* das ist Iphone 12/13  hochformat*/
} 

@media screen and (max-width: 430px) {
	body{font-size:90%;}
	/* Integrierter Tiersteckbrief, hier wird die schmalere Variante angezeigt. fürs Handy*/
	 #animalInfo_tablet { display:none;}
	 #animalInfo_mobile{  display:block;}
} 


 /* das ist etwas größer als Iphone SE hochformat*/
@media screen and (max-width: 400px) {
	/*1 Spalten in der Gallery*/
.column {
  width: 90%;
}
	
	body{font-size:90%;  /*  mit 100% gehts nicht mit dem Popup von Depature! */
	/*background-color:gray;*/}
	#Boxnotes{font-size:90%;} 
	
	.formbtn_gallery, .formbtn_gallery_active {
		margin: 0.1em;
		font-size: 0.8em;
		width: 6em;
	}
/* nur zur Info hier drin, steht in der ersten MediaQ anweisung :	.formbtn, .redformbtn, .btn_delete{font-size: 2em;} */
	/* da müssen noch weitere Buttons dazu*/
	 .btn20, .greenformbtn {	width: 10em; }
	/*body{	background-color: maroon;}*/
	
	/* Seiten mit speziellen Hintergründen */
/*	body.help {background-image:url(./img/nase-hoch-schmal.PNG);}
	body.help{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.LOG{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.LOGO{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.dashboard{background-image:url(./img/kuerbis2-HS.PNG);} 
	*/
	
	
	
  .animalprofile_sidenav a {
    text-align: center;
    float: none;
  }
  
  /* Logout */
  #mainLog {
  padding:0;
  padding-top: 3em;
  }
  
 #logContent button { width: 60%; padding: 0em;}
  #logContent input {padding: 0.21em;}
  
   /* verschoben auf Media 700px 
  h1{font-size:1.2em; margin:0em 0.1em;}
  h2{font-size:1em; hyphens:auto; letter-spacing:0;letter-spacing:0;}
  
  /* damit das Handbuchicon noch neben der Überschrift ist
  .col {
  float: left;2162
  
  margin: 0px;
}
.w5 {
  width: 4%;
}
*/

/*  POPUP Fenster  Ab ifphone Hochformat muss es schmaler werden, Querformat ist noch ok*/
/*	.popup_container{
		position: fixed;
			top:5em;
			left:21.2em;
		max-width: 98vw; 
		max-height: 100vh;
	}
	*/
	/* gibts hier nicht... rausnehmen 
	.popup_container.depaturePopup{top:1em;}*/
	
	/* Bereich in dem sich das Formular o.Ä. im Popup befindet */
	/* !! Wenn es für alle Fälle passt taC aus Bladeseiten raus und hier einstellen! */
	.popup_content {height:auto;} 

	/*spezieller Fall: Textarea*/
	.popup_container textarea {/*height:7em;*/}
}


@media screen and (min-width:355px) {
	#main article section .breakB {
			display:none;		
	}	
}

@media screen and (max-width:355px) { /* hier kann man den Content nicht zur Seite verschieben!!!*/
	3 Spalten
.column {
  float: left;
  width: 31%;
  padding: 0.6em;
}	
		
		
		#logo img{
			width:27%;
			box-shadow: 0em 0em 0.7em 1em white;
			margin-bottom:0em;
		}
		#main{
			width: 100vw;
			max-width: 100vw;
		/*funktioniert so nicht, versuche die Max-w von Z 1697 zu überschreiben! 	max-width: 1000%;*/
			padding:2em 0em;
		}
		
		#main article h1{
			border-right: 0em;
			margin: -1em 0em;  
		}
		
		#main article h3{
			line-height:0em;
			margin:0em;
		}
		
		#main article {
		width:auto; 
		display: block;
		padding:1em;
		margin-left:auto;
		margin-right:auto;
		}
		
		/*#main aside {
		width:auto;
		display: block;
		padding:1em;
		margin-left:auto;
		margin-right:auto;
		}*/
		
		.content {
		position: relative;
		text-align: left;
		padding: 0.3em;
		margin: 0;
		max-width: 	100%;
		max-width: 100%;
		}
		
		#loesungen{
			width: 90%;
		}
		
		
	
	
	/*=================================aqua===========================================================*/	

	
	/*.break-L {display:none;} /* sichtbar auf großen Screens*/
	/*.break-M {display:block;} /* sichtbar bis Screen grau*/
	/*.break-S {display:none;} /* sichtbar bis Screen pink*/
	
	body {
		max-width:100vw;
	/*	background-color:aqua;*/
		font-size:90%;
	}
	#Boxnotes{font-size:90%;} 

	h1{font-size: 1.6em;}
	h2{font-size: 1.2em;}
	label, p, li {font-size: 1.1em;}
	
	p{margin:0.5em 1em;}
	
	ul {margin:1.9em; padding:0em; list-style-position:outside;  /* text auch Mehrzeilig beginnt immer eingerückt und vorne dadurch bündig */}
	
	li {margin:0.5em;}
	
	/* Login, Logout*/
	#mainLog, .logout {width: 80vw;}
	#mainLog h1 { font-size:1.6em;}
	
	/* Flex-Items */
	#logContent input, #logContent button  {
		/*flex:1;  bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/
		width:90%;
		font-size:1.2em;
	}
	
	#hingucker {height:12em;}

	/* 2-Spaltiges Layout */
	
	.col-MainContent p{margin:0.5em 1em;}	
	.aside-article p, .aside-article li {margin:0.5em 1em;}	
	
	/*Schrift für Namen der Tiere Hundeüberblick*/
	span.polaroid{font-size: 1.1em;}
	
	div.petRegCardDescr p{font-size: 1em;}
	
	/* Tierprofil*/
	#profileTopImg h1{font-size: 1.5em;}
	#profileTopImg img {
    width: 78%;
	}
	
	/* Sidebar Infoboxen - mehr erfahren Link*/
	span.more{font-size:0.9em;}
	
	/*Infofenster über die Website*/
	section#information{ border:3px solid maroon; margin: 1.0em;}
	
		.buttonTop{	
		width:10%;
		position:fixed;
		bottom:0em;
		right:0.5em;
	}
}

@media screen and (max-width:320px) {
	body {	font-size:90%;}
	#Boxnotes{font-size:90%;} 
	/* Seiten mit speziellen Hintergründen */
	/*body.help {background-image:url(./img/nase-hoch-schmal.PNG);}
	body.help{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.LOG{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.LOGO{background-image:url(./img/nase-hoch-schmal.PNG);}
	body.dashboard{background-image:url(./img/kuerbis2-HS.PNG);} */

	#main{border:0.3px solid white;}
	
	/* Startseite*/
	#hingucker {	height:10em;}
	
	/* Hundeprofil Bildergalerie*/
	div.thumbnailProfile img{	width:auto;	height:auto;}	
	
	footer ul li {padding:0em 0em 0em 0em;}

}

	/*	==============================================================
		iPhone 5 / SE
	======================================================*/

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

		/*text-align:center; weiß nicht welchen Sinn das hat,*/
	/* was ist mit den anderen Main formen??*/
	#main {
		display: block;
		width: 100vw;
		max-width: 100vw;
		margin: 3em auto 1em;
		padding: 0.5em 0.1em;
	}
	
	h6{letter-spacing: 0;}
	
	.content {
		position: relative;
		text-align: left;
		padding: 0.3em;
		margin: 0;
		max-width: 	100%;
	}
	
	/* das ist veraltet oder??*/
/* Navigation */
	nav, nav ul li ul {display: none;}
	nav ul li ul {position:static;}  /* static ist default einstellung, die abslolute einstellung verhindert, dass bei Toggeln das Menü nach unten geschoben wird*/
	
	nav ul li:hover ul {
	/*font: inherit; /*die Schrift wird beim hovern erst sichtbar*/
	z-index: 0;
	height:0; 
	/*opacity:1;  /* Alternative zu font: 0/0.  beim hovern wirds sichtbar*/
	/*color:#88ACED;  /* beim überfahren mit der Maus gelb*/
	/*neu*/
	display:none;
	}

/*#menubar ist die section in der der Resopnsive Button fürs Menü drin ist*/
	#menubar {
		display:block; 
		position:relative;	
		left: 10em;
	}
	/* dropdown smartphone */
	.dropdown2Level{display:none;}
	
	/*	Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein!	*/
	.dropdown1Level{ display:block;}
		
	.dropdownS{display:block;}
		.dropdownL{display:none;}
		
		
		.dplNone{display:none;}
/*.toggle	, .dplNone{
	display:block;
	background-color: #254441;
	  padding: 0 20px;
	  color: #FFF;
	  font-size: 20px;
	  line-height: 60px;
	  text-decoration: none;
 	  border: none;
}*/

		#logo img{
			width:27%;
			box-shadow: 0em 0em 0.7em 1em white;
			margin-bottom:0em;
		}
		
		#menubar ul li a.menubutton {
			top:1.5em;
			left:-2em;
		}
		
		section.containerUeber{
			margin-top: 3.25em;
		}
		
		section.containerUeber h1{
			font-size:2.2em;
		}
		
		section.breakC h3{	
			font-size:1em;
			line-height: 3.5em;
		}
		
		#main{
			width: 100vw;   
			margin-top:2em;
			padding:0em; /*Z. 1813 2em 0em*/
		} 
		
		#main article{
			text-align:center;
			margin:0em;
			padding:2em;
		}
		
		/*#main aside {		
		text-align:center;
		padding:0.75em 2em 2em;
		}
		*/
		#break h3{
			font-size:0.8em;
			text-align:left;
		}
		/* formular heisst jetzt content*/
		.formular{
			width:100%;
			padding:1em 0em; /* damit die Databoxen die komplette Breite einnehmen muss li/re auf 0 gesetzt werden, aber dann müssen die Inhalte Abstand bekommen*/
		}
		
		/* Boxen Abstände auf null setzen */
		.databox_blue, .databox_red, .databox_green, .databox_teal, .databox_yellow{
			margin:0; 
			padding:0.3em;
			width:100%;
			height:6em;
		}
		
		#toolbar11{margin-bottom:0.7em;}		
}		

/*  Ab hier allse aus mediaQ_content.css*/

/* 	====================================
	Mobile Style - CONTENT & Header (der muss noch rausgenommen werden!)
	==================================== */	
/* 
	ich habe das außerhab der mediaQ gesetzt, weil sonst bei apple ein merkwürdiger Streifen/ Kasten irgendwo mitten 
	im Bild ensteht. desweiteren brauche ich die Farbe nur, weil man ja den Content verschieben kann, warum auch immer! */
	/*body { */
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d421+27,a4a16c+82 */
/*background: rgb(209,212,33); /* Old browsers */
/*background: -moz-linear-gradient(top, rgba(209,212,33,1) 27%, rgba(164,161,108,1) 82%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(209,212,33,1) 27%,rgba(164,161,108,1) 82%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(209,212,33,1) 27%,rgba(164,161,108,1) 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d421', endColorstr='#a4a16c',GradientType=0 ); /* IE6-9 */
		/*background-color:rgb(209, 212, 33); /*blau vom Menübalken: rgba(33,45,80,0.99);*/
		/*rgb(164, 161, 108);*/
/*
	}*/
	
/*	.break-L {display:block;} /* sichtbar auf großen Screens*/
/*	.break-M {display:none;} /* sichtbar bis Screen grau*/
/*	.break-S {display:none;} /* sichtbar bis Screen pink*/