/*	id: templates/kw/style-min-1360px.css
	title: Homepage Kindergarten Weidenthal
	start: Sonntag, 08. Maerz 2020
	developer: Juergen Grueneisl
*/

html {
	margin: 0 auto;
	height: 100%;
}

body {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-image: url('../../../images/hintergrund_weidenthal.jpg');
	background-attachment: fixed;
	/* background-color: #64773f; */
}

header {
	position: fixed;
	top: 0px;
	z-index: 5;
	width: 100%;
	height: 100px;
	background-color: white;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* border-bottom: 1px dashed black; */
}

main {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 3;
	padding-bottom: 30px;
}

#inhalt_mitte {
	position: absolute;
	top: 200px;
	left: 25%;
	right: 25%;
	padding: 25px;
	padding-top: 15px;
	height: auto;
	width: auto;
	z-index: 3;
	background-color: white;
	border: 5px solid lightgrey;
}

footer {
	position: fixed;
	z-index: 5;
	margin: 0px;
	bottom: 0px;
	height: 30px;
	width: 100%;
	text-align: center;
	background-color: lightgrey;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.zitat {
	font-family: verdana, arial, helvetica, san-serif;
	font-size: 16px;
	color: white;
	background-color: grey;
	border: 1px dashed #000;
	padding: 5px;
	margin-left: 30px;
}

/* NAVIGATION */

nav {
	position: fixed;
	top: 100px;
	z-index: 10;
	width: 100%;
	height: 100px;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	border-bottom: 5px solid lightgrey;
}

nav > ul {
	list-style-type: none;
	margin: auto;
	padding-left: 0px;
	display: flex;
	flex-direction: column;
	background-color: white;
	position: relative;
}

nav li {
	margin: auto;
	padding: 0;
	width: auto;
	white-space: nowrap;
	text-align: left;
}

nav li.menuitem {
	margin: auto;
	padding: 0;
	width: auto;
	white-space: nowrap;
	text-align: center;
	display: inline-block;
}

@media (min-width: 45em) {
	nav > ul {
		flex-direction: row;
		height: 3em;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}
}

nav a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 2px;
	border: none;
	color: red;
	background-color: white;
	text-shadow: #00000057 1px 1px 1px;
}

nav li[aria-current] a {
	background-color: grey;
	color: grey;
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	background-color: #f1f1f1;
}
/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: auto;
	z-index: 1000;
	width: auto;
	padding: 0;
	margin: 0;
	position: absolute;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


/* LINKS */
a:link, a:visited, a:active {
	text-decoration: none;
	color: #800000;
}

a:hover {
	color: #CC9966;
}

/* TEXT */

span {
	font-size: 1em;
	font-family: Mali, verdana, arial, helvetica, sans-serif;
	color: black;
}

span.bold {
	font-size: 1em;
	font-weight: bold;
	font-family: Mali, verdana, arial, helvetica, sans-serif;
	color: black;
}

span.header {
	font-size: 2.5em;
	font-weight: bold;
	font-family: Mali, verdana, arial, helvetica, sans-serif;
	letter-spacing: 3px;
	color: black;
}

span.infobox {
	font-family: Mali, Comic Sans, verdana, arial, helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: bold;
	color: black;
	display: inline;
	float: left;
}

span.footer {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.625em;
	color: black;
	letter-spacing: 2px;
}

span.news_head {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: black;
	letter-spacing: 2px;
}

span.news {
	font-size: 0.875em;
	font-family: verdana, arial, helvetica, sans-serif;
	color: white;
	opacity: 1;
}

span.h1 {
	font-family: Mali, Times New Roman, serif;
	font-weight: bold;
	font-size: 2em;
	color: #800000;
	letter-spacing: 5px;
	text-shadow: #00000057 2px 2px 2px;
}

span.h2 {
	font-family: Mali, Times New Roman, serif;
	font-weight: bold;
	font-size: 1.5em;
	color: #800000;
	letter-spacing: 2px;
	text-shadow: #00000057 1px 1px 1px;
}

span.h3 {
	font-family: Mali, Times New Roman, serif;
	font-weight: bold;
	font-size: 1em;
	color: #800000;
	letter-spacing: 2px;
	text-shadow: #00000057 1px 1px 1px;
}

span.leitgedanke {
	font-size: 2em;
	font-family: Reenie Beanie, Times New Roman, serif;
	color: #000;
}

span.leitgedanke2 {
	font-size: 2.5em;
	font-weight: bold;
	font-family: Reenie Beanie, Times New Roman, serif;
	color: #000;
}

span.headline {
	font-size: 2em;
	font-family: Mali, Times New Roman, serif;
	color: #800000;
}

/* DEBUG */

#debug {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	color: black;
}

#debug_ok {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: green;
}

#debug_failed {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: red;
}

/* IMAGES */

img.personalfoto {
	height: auto;
	width: 100%;
}

img.startbild {
	height: auto;
	width: 100%;
	border: 2px solid #000;
}

img.content {
	height: 360px;
	width: 480px;
	border: 1px dashed #000;
}

img.logo {
	height: 150px;
	width: 150px;
}

img.logo-guteneck {
	height: 150px;
	width: 137px;
}

img.icon {
	height: 16px;
	width: 16px;
}

img.leftFloat {
	float: left;
	padding-right: 10px;
}

/* SIDE-DIVS */

#logo-guteneck {
	position: fixed;
	width: 157px;
	height: 170px;
	top: 20px;
	left: 20px;
	z-index: 11;
	background-color: white;
	/* border: 1px dashed #000;
	border-radius: 0px 10px 10px 10px;
	box-shadow: 5px 5px 5px white inset, 5px 5px 5px grey; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#title {
	position: fixed;
	width: auto;
	height: auto;
	top: 20px;
	left: 20%;
	right: 20%;
	z-index: 11;
	background-color: white;
	/* border: 1px dashed #000;
	border-radius: 0px 10px 10px 10px;
	box-shadow: 5px 5px 5px white inset, 5px 5px 5px grey; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#logo {
	position: fixed;
	width: 170px;
	height: 170px;
	top: 20px;
	right: 20px;
	z-index: 11;
	background-color: white;
	/* border: 1px dashed #000;
	border-radius: 0px 10px 10px 10px;
	box-shadow: 5px 5px 5px white inset, 5px 5px 5px grey; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#kontakt {
	margin: 20px;
	width: 170px;
	height: 100px;
	padding: 25px 15px;
	background: #fefabc linear-gradient(150deg, #efec88 0%, #fefabc 100%);
	border: 1px solid #cccccc;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	transform:rotate(2deg);
	position: fixed;
	top: 220px;
	left: 20px;
	z-index: 6;
}

#kontakt::after {
	content:"";
	position: absolute;
	bottom: 0;
	right: -4px;
	width: 100%;
	height: 140px;
	background-image: linear-gradient(173deg, rgba(0,0,0,0) 92%,
	rgba(0,0,0,0.4) 100%);
	transform: rotate(6deg);
	z-index: -1;
	filter: blur(1px);
}



#downloads {
	position: fixed;
	width: 170px;
	height: 50px;
	top: 280px;
	left: 20px;
	z-index: 6;
	background-color: white;
	/* border: 1px solid #000; */
	border-radius: 0px 10px 10px 10px;
	box-shadow: 5px 5px 5px white inset, 5px 5px 5px grey;
	/* display: flex */
	display: none;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#leitgedanke {
	position: relative;
	width: auto;
	height: auto;
	margin: auto;
	z-index: 6;
	text-align: center;
}

/* TABELLEN */

td.links {
	width: 200px;
}

td.rechts {
	width: 200px;
}

/* LISTEN */
	
li.about {
	color: #FFCC00;
}

dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1em 2em;
  margin-bottom: 3em;
}

dl > * {
  margin: 0;
  padding: 0;
}

/* GALERIE */

div.galerie {
  border: 1px solid #ccc;
}

div.galerie:hover {
  border: 1px solid #777;
}

div.galerie img {
  width: 100%;
  height: auto;
}

div.beschreibung {
  padding: 15px;
  margin-bottom: 10px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

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

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* NEWS */

table.news {
	width: 80%;
	float: left;
}

td.news_title {
	width: 70%;
	background-color: #FFCC00;
	border: 1px #000;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

td.news_date {
	width: 30%;
	background-color: #FFCC00;
	border: 1px #000;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: right;
}

td.news_text {
	/* border-bottom: 2px dashed #000; */
	padding-bottom: 5px;
	background-color: grey;
	background-color: rgba(136,136,136, 0.75);
}

/* W3SCHOOLS */

.center {
	display: inline-block;
	width: auto;
}

.w3-red {
	color:#fff!important;
	background-color:#f44336!important;
}

/* GOOGLE FONTS */

/* mali-regular - latin */
@font-face {
  font-family: 'Mali';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mali-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mali-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mali-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mali-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mali-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mali-v7-latin-regular.svg#Mali') format('svg'); /* Legacy iOS */
}

/* reenie-beanie-regular - latin */
@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/reenie-beanie-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/reenie-beanie-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/reenie-beanie-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/reenie-beanie-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/reenie-beanie-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/reenie-beanie-v14-latin-regular.svg#ReenieBeanie') format('svg'); /* Legacy iOS */
}

/* material-icons */
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   /* src: url(iconfont/MaterialIcons-Regular.eot); */ /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
}