/* ========== ALLGEMEIN ========== */

* {
  padding:0;
  margin:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	font-family: 'Lato';
	background: none;
	height: 100%;
	overflow-x: hidden;
}

div.background-image {
	width: 100%;
	height: 100%;
	position: fixed;
	background: url("img/background.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: scroll;
    background-position: center center; 
	z-index: -1000;
}

p {
	margin-bottom: 0.5em;
}

a, p {
  font-size: 12pt;
  line-height: 15pt;
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: #645E8C;	
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

b {
	font-weight: bold;
}

i {
	font-style: italic;
	font-weight: 600;
}
  
h1 {
  font-size: 20pt;
}
  
h2 {
  font-size: 20pt;
  color: #241E64;
  font-weight: bold;
  padding-bottom: 1em;
}

h3 {
  font-size: 15pt;
  color: #595B5B;
  font-weight: bold;
  padding-bottom:0.5em;
}

h3:link, h3:hover, h3:active, h3:visited; {
  color: #595B5B;
}

h4 {
  font-size: 12pt;
  color: #7C8081;
  font-weight: light;
  padding-bottom:0.5em;
}

.trennung {
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: none;
	font-size: 1em;
	width: 100%;
}

ul {
    list-style-type: disc;
}



/* ========== BANNER ========== */
  
.banner {
  padding: 2em 0em;
  width: 100vw;
}
  
.header {
  padding: 2em;
  margin: 3em 0em 3em 0em;
  background: rgba(23,30,100,0.8);
  width: 19em;
  color: #ffffff;
  text-align: center;
  float: left;
}
  
header {
  padding: 1em;
  border-top: 10px double #ffffff;
  border-bottom: 10px double #ffffff;
  opacity: 1.0;
}
  
.schlagzeile {
  padding: 2em;
  margin: 3em 0em 1em 3em;
  background: rgba(23,30,100,0.8);
  width: 30em;
  color: #ffffff;
  text-align: left;
  float: left;
}

.aktuelles_bildwrapper {
	width: 40%;
	float: left;
}

.aktuelles_vorschauwrapper {
	float: left;
	width: 50%;
	margin-left: 10%;
	padding: 0 1em 1.5em 0;
}

@media screen and (max-width: 800px) {
	.banner_wrapper {
		width: 80%;
		max-width: 400px;
	}
	
	.header {
		width: 100%;
		margin: 3em 0 em 0em;
	}
	
	.schlagzeile {
		width: 100%;
		margin: 2em 0em 3em;
	}
	
	.aktuelles_bildwrapper {
		width: 100%;
		margin-bottom: 1em;
	}
	
	.aktuelles_vorschauwrapper {
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 1200px) {
	.header {
		margin-top: 3em !important;
	}
}



/* ========== INHALT ========== */
.content {
	padding: 2em 15% !important;
}

.content_whitebg {
  background: #f6f6f6;
  padding: 2em;
  overflow: hidden;
  float: left;
  width: 100vw;
}

.content_mediumbluebg {
  background: #110C48;
  padding: 2em;
  overflow: hidden;
  float: left;
  width: 100vw;
}

.content_darkbluebg {
  background: #08042C;
  padding: 2em;
  overflow: hidden;
  float: left;
  width: 100vw;
}

.content_reallydarkbluebg {
  background: #030117;
  padding: 2em;
  overflow: hidden;
  float: left;
  width: 100vw;
}

.content_greybg {
	background: #111111;
	padding: 1em;
  float: left;
  width: 100vw;
}

@media screen and (max-width: 800px) {
	.content {
		text-align: left !important;
		padding: 2em 2.5% !important;
		width: 100%;
	}
	
  .content_whitebg {
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .content_mediumbluebg {
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .content_darkbluebg {
    padding-left: 0px;
    padding-right: 0px;
  }
}



/* ========== ARTIKEL-VORSCHAU AUF STARTSEITE ========== */
  
.news {
  width: 70%;
}

.artikel_vorschau {
  float: left;
  padding-bottom: 1.5em;
  width: 100%;
}

.artikel_vorschau3 {
  float: left;
  padding-bottom: 1.5em;
  text-align: justify;
  width: 100%;
}

.artikel_smallpic {
  width: 95%;
  height: auto;
  text-align: center;
}

.artikel_smallpic_wrapper {
  width: 50%;
  padding: 0em;
  float: left;
  text-align: center;
}

.artikel_preview {
  width: 95%;
  text-align: left;
  float:right;
  padding-top: 1em;
}

.artikel_preview_text {
  width: 50%;
  padding: 0em;
  float: right;
  text-align: left;
}

@media screen and (max-width: 800px) {
  .news {
    width: 95%;
  }
  
  .artikel_vorschau {
    width: 100%;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #7C8081;
  }
  
  .artikel_vorschau3 {
    width: 100%;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
  }
  
  .artikel_smallpic {
    width: 95%;
  }
  
  .artikel_smallpic_wrapper {
    width: 100%;
    float: left;
  }
  
  .artikel_preview {
    width: 100%;
    float: left;
  }

  .artikel_preview_text {
    width: 95%;
    float: left;
	padding-left: 2.5%;
  }
}



/* ========== ELTERNBRIEF ========== */

.elternbrief {
  width: 70%;
  color: #ffffff;
}

.elternbrief_pdf_icon {
  width: 50%;
  max-width: 80px;
}

.elternbrief a:link, a:active, a:visited {
  color: #ffffff;
}

/* ========== KONTAKT ========== */

.contact {
  width: 85	%;
  color: #ffffff;
}

.contact_icon {
  width: 90%;
}

.contact_icon_container {
  float: left;
  text-align: left;
  width: 20%;
  height: 100%;
}

.contact_info_container {
  float: left;
  text-align: left;
  width: 70%;
  padding-left: 0.5em;
}
.contact_icon_förderverein {
	width: 70%;
	margin-top: 2em;
}
.contact_icon_2020 {
	width: 220%;
	margin-left: 90px;
	
}
.contact_table {
  border: 1px solid #000000;
}

.contact_table tr td{
  border: 1px solid #000000;
}

.contact_address {
  float: left;
  width: 25%;
  padding-right: 0.5em;
  height: 100%;
  margin-top: 0.5em;
}
.contact_förderverein {
  float: left;
  width: 25%;
  padding-right: 0.5em;
  height: 100%;
  margin-bottom: 2em;
 
}
.contact_hoelderlin2020 {
  float: left;
  width: 20%;
  padding-right: 0.5em;
  height: 100%;
  padding-bottom: 20px;
 
}
.contact_phone {
  float: left;
  width: 25%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  height: 100%;
	margin-top: 0.5em;
}

.contact_email {
  width: 25%;
  float: left;
  padding-left: 0.5em;
  border-right: 1px solid #ffffff;
  height: 100%;	
}
.contact_information {
  width: 25%;
  float: left;
  padding-left: 0.5em;
  border-right: 1px solid #ffffff;
  height: 100%;	
}

@media screen and (max-width: 800px) {
  .contact_address {
    width: 95%;
    float: left;
    padding-right: 0em;
    margin-bottom: 1.5em;
    border: none;
  }
  
  .contact_phone {
    width: 95%;
    float: left;
    padding-left: 0em;
    padding-right: 0em;
    margin-bottom: 1.5em;
    border: none;
  }
  
  .contact_email {
    width: 95%;
    float: left;
    padding-left: 0em;
	border: none;
  }
.contact_förderverein {
  float: left;
  width: 95%;
  padding-right: 0.5em;
  height: 100%;
}
.contact_hoelderlin2020 {
  float: left;
  width: 90%;
  height: 100%;
  padding-bottom: 20px;
  padding-left: 5px;
  border: none;
}
}
  
  
  
/* ========== KALENDER ========== */

div.terminkalender {
  width: 50%;
  padding: 0em;  
}

@media screen and (max-width: 1100px) {
  div.terminkalender {
    width: 70%;
  }
}

@media screen and (max-width: 800px) {
  div.terminkalender {
    width: 100%;
  }
}

table.kalender {
  border-collapse: separate;
  float: left;
  width: 45%;
}

@media screen and (max-width: 800px) {
  table.kalender {
    width: 100%;
  }
  
  .terminkalender_luecke {
    display: none;
  }
}

.kalender td, .kalender th{
  height: 2em;
  width: 2em;
  vertical-align: middle;
  text-align: center;
  border-spacing: 2px;
}

.kalender th {
  font-weight: 900;
}

.kalender td {
  border: 2px solid #F6F6F6;
}

.kalender thead {
  background-color: #5E589A
}

.kalender td.standard {
  border: 2px solid #F6F6F6;
}

.kalender td.aktuellertag {
  border: 2px solid black !important; 
  font-weight: 900;
}

.kalender td.termin {
  background-image: url("../img/circle.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.kalender td.ganztaegig {
  background: #AAA7C8;
  border-left: none;
  border-right: none;
}

.kalender td.ganztaegig_termin {
  background: #AAA7C8 url("../img/circle.png") no-repeat center;
  background-size: contain;
  border-left: none;
  border-right: none;
}

.kalender td.anderermonat {
  color: #595B5B;
}

.kalender td.anderermonatganztaegig {
  color: #595B5B;
  background-color: #c6c6c6;
  border-left: none;
  border-right: none;
}

.kalender td.anderermonattermin {
  color: #595B5B;
  background-image: url("../img/circle_anderermonat.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.kalender td.anderermonatganztaegig_termin {
  color: #595B5B;
  background: #c6c6c6 url("../img/circle_anderermonat.png") no-repeat center;
  background-size: contain;
  border-left: none;
  border-right: none;
}

.kalender button.termindescription {
  background: transparent;
  border:none;
  font-size: 100%;
}

.kalender button.termindescription:hover {
  text-decoration: underline;
  cursor:pointer;
}

.kalender button.monatswechsel {
  color: #595B5B;
  background: transparent;
  border:none;
  font-size: 100%;
}

.kalender button.monatswechsel:hover {
  text-decoration: none;
  cursor:pointer;
}

.description {
  float: right;
  width: 45%;
  text-align: left;
  padding-top: 1.5em;
}

@media screen and (max-width: 800px) {
  .description {
    float: left;
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
  }
  
  .kalender button a:active {
  color: #000000;
  }
}



/* ========== TERMINKALENDER ========== */
.lehrerkalender_password_overlay {
	position:absolute;
	width: 100%;
	background-color: rgba(0,0,0,0.45);
	z-index: 10;
}

.lehrerkalender_password_popup {
	width: 30%;
	padding: 1.5em;
	background-color: #f6f6f6;
	top: 15em;
	left: 35%;
	position: absolute;
	z-index: 11;
}

.lehrerkalender_password_close {
	position: absolute !important;
	z-index: 20 !important;
	padding: 0em !important;
	top: 0.5em !important;
	right: 0.5em !important;
	cursor: pointer;
}

.terminkalender_wrapper {
	width: 100%;
	padding: 0em 12.5% 2em;
	text-align: left;
	float:left;
}

.access_lehrerkalender {
	float: right;
	padding-right: 12.5%;
}

.termin_wrapper {
	border-bottom: 1px solid #7C8081;
	float: left;
	width: 100%; 
	padding: 0.5em 0em;
}

.terminkalender_datum {
	width: 20%;
	float: left;
}

.terminkalender_titel {
	width: 35%;
	float: left;
}

.terminkalender_ort {
	width: 20%;
	float: left;
}

.terminkalender_beschreibung {
	width: 25%;
	float: left;
}

@media screen and (max-width: 800px) {
	.lehrerkalender_password_popup {
		width: 95%;
		left: 2.5%;
	}
	
	.access_lehrerkalender {
		width: 100%;
		text-align: center;
		padding:0em;
	}
	
	.terminkalender_wrapper {
		width: 97.5%;
		padding: 1em;
	}
	
	.termin_wrapper {
		border: none;
	}
	
	.terminkalender_datum, .terminkalender_titel, .terminkalender_ort {
		width: 100%;
		padding-bottom: 0.75em;
	}
	
	.terminkalender_beschreibung {
		width: 100%;
		padding-bottom: 1em;
		border-bottom: 1px solid #7C8081;
		float: left;
	}
}



/* ========== SPEISEPLAN ========== */

.speiseplan_wrapper {
	width: 70%;
	text-align: justify;
}

.speiseplan_diesewoche {
	width: 45%;
	float: left;
	padding: 1em;
	margin-top: 1em;
	text-align: justify;
}

.speiseplan_naechstewoche {
	width: 45%;
	float: right;
	padding: 1em;
	margin-top: 1em;
	text-align: justify;
}

@media screen and (max-width: 800px) {
	.speiseplan_wrapper {
		width: 97.5%;
		margin: 1em 1.25%;
	}
	
	.speiseplan_diesewoche {
		width: 97.5%;
		float: left;
		margin: 1em 1.25%;
	}
	
	.speiseplan_naechstewoche {
		width: 97.5%;
		float: left;
		margin: 0em 1.25% 1em;
	}
}



/* ========== PRESSESPIEGEL ========== */

.pressespiegel_wrapper {
	width: 80%;
	margin: 0 20%;
	padding: 0em 0em 2em;
	text-align: left;
	float:left;
}

.pressespiegel_smallpic {
	width: 20%;
	float: left;
}

.pressespiegel_titel {
	width: 80%;
	float: right;
	padding-left: 1em;
	padding-right: 2em;
	text-align: justify;
}

@media screen and (max-width: 800px) {
	.pressespiegel_wrapper {
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 1100px) {
	.pressespiegel_smallpic {
		width: 30%		
	}
	
	.pressespiegel_titel {
		padding-right: 0;
		width: 70%;
	}
}



/* ========== SCHULGESCHEHEN ========== */

.schulgeschehen_wrapper {
	width: 100%;
	padding: 0em 12.5% 2em;
	text-align: left;
	float:left;
}

.schulgeschehen_smallpic {
	width: 20%;
	float: left;
	text-align: center;
}

.schulgeschehen_datum {
	width: 20%;
	float: left;
	padding-left: 2em;
}

.schulgeschehen_vorschau {
	width: 60%;
	float: right;
	padding-left: 1em;
	padding-right: 2em;
	text-align: justify;
}

.schulgeschehen_archiv {
	border: 2px solid #585A5A;
	position: absolute;
	top: 3em;
	right: 2em;
	padding: 0.5em;
	text-align: center;
	width: 13%;
}

.archiv_trigger {
	display: none;
}

@media screen and (max-width: 1100px) {
	.schulgeschehen_wrapper {
		padding: 1em 0.5em;
		border-bottom: 1px solid #7C8081;
		margin: 0em 1.25%;
		width: 97.5%;
		float:left;
	}
	
	.schulgeschehen_smallpic {
		width: 30%		
	}
	
	.schulgeschehen_datum {
		padding-left: 0em;
		padding-top: em;
		float:none;
		width: 30%;
	}
	
	.schulgeschehen_vorschau {
		padding-right: 0;
		width: 70%;
	}
	
	.schulgeschehen_archiv {
		display: none;
		position: relative;
		top: 0;
		right: 0;
		width: 70%;
		margin-bottom: 1em;
	}

	.archiv_trigger {
		display: initial;
	}
}



/* ========== INFORMATIONEN ========== */

.infos {
  width: 70%;
  color: #ffffff;
}

.infos p {
  margin-bottom: 1em;
}

a.info {
  color: #ffffff;
  font-size: 12pt;
  text-decoration: underline;
}

a.info:link {
	color: #ffffff;
}

.info_icon {
  height: 10%;
  min-height: 65px;
  max-height: 80px;
  width: auto;
  margin-bottom: 1em;
}

.info a:hover{
  color: #ffffff;
  text-decoration: underline;
  -webkit-text-decoration-color: #ffffff;
  text-decoration-color: #ffffff;
}

@media screen and (max-width: 800px) {
	.infos {
		width: 95%;
	}
}



/* ========== ARTIKEL ========== */
.artikel {
	width: 70%;
}

.artikel_header {
	overflow: hidden;
	width: 100%;
}

.artikel_text {
	text-align: left;
	padding-top: 1em;
	text-align: justify;
}

.artikel_credits {
	width: 100%;
	float: left;
	text-align: left;
	margin-top: 2.5em;
	margin-bottom: 1em;
}

.artikel_foto {
	max-width: 400px;
	max-height: 400px;
	margin-bottom: 1em;
}

.blurred_background {
	margin-top: 3em;
}

@media screen and (max-width: 1100px) {
	.artikel  {
		width: 95%;
	}
	
	.artikel_foto {
		max-width: initial;
		max-height: initial;
		width: 100%;
	}
	
	.blurred_background {
		margin-top: 0em;
	}
}



/* ========== FÄCHER ========== */

.fachschaft {
	width: 80%;
	max-width: 1200px;
	padding: 1em;
}

.lehrer {
	width: calc(((1 / 3) * 100%) - 1em);
	padding: 1em;
	margin: 0.5em;
	float: left;
	border-bottom: 1px solid #595B5B;
	position: relative;
	max-width: clac(500px + 3em);
}

.lehrer_kontakt {
	z-index: 10;
	position: absolute;
	right: 1em;
	bottom: 8.5em;
	height: 2em;
	width: 2em;
}

.fach_aktuelles {
	width: 80%;
	padding: 1em;
	float: left;
	margin: 3em 10% 1em;
}

@media screen and (max-width: 1100px) {
	.fachschaft {
		width: 97.5%;
	}
	
	.lehrer {
		width: 100%;
		margin: 0.5em 0em;
	}
	
	.fach_aktuelles {
		width: 100%;
		margin: 3em 0 1em;
	}
}



/* ========== KOLLEGIUM ========== */

.kollegium_foto {
	max-width: 80%;
	margin-bottom: 4em;
}

.kollegium_tabelle {
	width: 80%;
	margin: 0 10% 5em;
	float: left;
}

.kollegium_titelzeile {
	background-color: #5E589A;
	color: #f6f6f6;
	float: left;
	width: 100%;
	padding: 0.5em;
}

.kollegium_eintrag1 {
	width: 100%;
	background-color: #f6f6f6;
	float: left;
	padding: 0.5em;
}

.kollegium_eintrag2 {
	width: 100%;
	background-color: #AAA7C8;
	float: left;
	padding: 0.5em;
}

.kollegium_anrede {
	width: 5%;
	text-align: right;
	float: left;
}

.kollegium_name {
	width: 20%;
	float: left;
	text-align: left;
	padding-left: 1em;
}

.kollegium_faecher {
	width: 30%;
	float: left;
}

.kollegium_email {
	width: 45%;
	float: left;
}

@media screen and (max-width: 1100px) {
	.kollegium_foto {
		max-width: 97.5%;
	}
	
	.kollegium_tabelle {
		width: 97.5%;
		margin: 0 1.25% 4em;
	}
	
	.kollegium_titelzeile {
		display: none;
	}
	
	.kollegium_eintrag1, .kollegium_eintrag2 {
		padding: 1em 0.5em;
	}
	
	.kollegium_anrede {
		width: 10%;
	}
	
	.kollegium_name {
		width: 60%;
	}
	
	.kollegium_faecher {
		width: 30%;
		text-align: right;
		padding-right: 1em;
	}
	
	.kollegium_email {
		width: 100%;
		padding-top: 0.5em;
		padding-left: calc(10% + 1em);
		text-align: left;
	}
}

/* ========== AGs ========== */

.ags_wrapper {
	width: 80%;
	float: left;
	margin: 0 10%;
}

.ags_eintrag1 {
	width: 100%;
	background-color: #f6f6f6;
	float: left;
	padding: 0.5em;
}

.ags_eintrag1 div a:link {
	color: black;
	text-decoration: underline;
}

.ags_eintrag2 {
	width: 100%;
	background-color: #AAA7C8;
	float: left;
	padding: 0.5em;
}

.ags_titelzeile {
	width: 100%;
	background-color: #5E589A;
	float: left;
	padding: 0.5em;
}

.ags_eintrag2 a:link {
	color: black;
	text-decoration: underline;
}

.ags_name {
	width: 25%;
	text-align: left;
	float: left;
}

.ags_lehrer {
	width: 25%;
	text-align: left;
	float: left;
}

.ags_zeit {
	width: 25%;
	text-align: left;
	float: left;
}

.ags_raum {
	width: 25%;
	text-align: left;
	float: left;
}

@media screen and (max-width: 1100px) {
	.ags_wrapper {
		width: 95%;
		margin: 0 2.5%;
	}
	
	.ags_titelzeile {
		display: none;
	}
	
	.ags_name, .ags_lehrer, .ags_zeit, .ags_raum {
		width: 100%;
	}
}

/* ========== Kooperationspartner ========== */

.kooperationspartner_wrapper {
	width: 80%;
	float: left;
	margin: 0 10%;
}

.kooperationspartner_eintrag1 {
	width: 100%;
	background-color: #f6f6f6;
	float: left;
	padding: 0.5em;
}

.kooperationspartner_eintrag1 div a:link {
	color: black;
	text-decoration: underline;
}

.kooperationspartner_eintrag2 {
	width: 100%;
	background-color: #AAA7C8;
	float: left;
	padding: 0.5em;
}

.kooperationspartner_titelzeile {
	width: 100%;
	background-color: #5E589A;
	float: left;
	padding: 0.5em;
}

.kooperationspartner_eintrag2 a:link {
	color: black;
	text-decoration: underline;
}

.kooperationspartner_name {
	width: 25%;
	text-align: left;
	float: left;
}

.kooperationspartner_lehrer {
	width: 25%;
	text-align: left;
	float: left;
}

.kooperationspartner_zeit {
	width: 25%;
	text-align: left;
	float: left;
}

.kooperationspartner_raum {
	width: 25%;
	text-align: left;
	float: left;
}

@media screen and (max-width: 1100px) {
	.kooperationspartner_wrapper {
		width: 95%;
		margin: 0 2.5%;
	}
	
	.kooperationspartner_titelzeile {
		display: none;
	}
	
	.kooperationspartner_name, .kooperationspartner_lehrer {
		width: 100%;
	}
}


/* ========== PROJEKTTAGE ========== */

.projekttage_einleitung {
	width: 75%;
	text-align: justify;
}



/* ========== KUNSTKALENDER ========== */

.kunstkalender_cover {
	width: 60%;
	margin-bottom: 1em;
}

.kunstkalender_monat {
	width: calc((60% - 2em) / 3);
	margin: 0.5em 0.5em;
}

@media screen and (max-width: 800px) {
	.kunstkalender_cover {
		width: 100%;
		margin-bottom: 0.5em:
	}
	
	.kunstkalender_monat {
		width: 100%;
		margin: 0.5em 0;
	}
}



/* ========== RUNDGANG ========== */

.rundgang_wrapper {
	width: 14vw;
	height: 14vw;
	margin: 2vw;
	float: left;
	overflow: hidden;
	text-align: center;
	position: relative;
}

.rundgang_bild {
	height: 100%;
	position: absolute;
	-ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
}

@media screen and (max-width: 800px) {
	.rundgang_wrapper {
		width: 35vw;
		height: 35vw;
		margin: 5vw;
	}
}



/* ========== ADMINISTARTIONSBEREICH ========== */

.admin_icon_top {
	float: left;
	margin-left: 4em;
	margin-top: 2em;
	position: absolute;
}

.admin_category {
	width: 20%;
	text-align: center;
	margin: 1em;
	display: inline-block;
}

.admin_category a:link, a:visited, .color_category p{
	color: #000000;
	margin-top: 5em;
}

.admin_icon {
	margin-bottom: 1em;
	max-width: 128px;
}

@media screen and (max-width: 800px) {
  .admin_category {
    width: 100%;
	margin: 0em;
	margin-bottom: 2em;
  }
}

.input_small {
	width: 100%;
	height: 2.5em;
	font-family: 'Lato';
	padding: 0.5em;
	background-color: #f6f6f6;
	border: 2px solid #595b5b;
	font-size: 1em;
}

.input_big {
	width: 97.5%;
	font-size: 1em;
	padding: 0.3em;
	font-family: 'Lato';
	border: 2px solid #595b5b;
	background-color: #f6f6f6;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	resize: none;
}

.termin_hinzufuegen_wrapper {
	width: 60%;
}

.termin_hinzufuegen_wrapper1 {
	width: 10%;
	float:left;
	text-align: left;
	height: 2.5em;
	line-height: 2.5em;
}

.termin_hinzufuegen_wrapper2 {
	width: 50%;
	float:left;
	text-align: left;
}

.termin_hinzufuegen_wrapper3 {
	width: 40%;
	float:left;
	text-align: right;
	height: 2.5em
}

.termin_submit {
	width: 100%;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

.checkbox_termin {
	text-align: right;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

@media screen and (max-width: 800px) {
	.termin_submit {
		width: 97.5%;
	}
	
	.termin_hinzufuegen_wrapper {
		width: 97.5%;
	}
	
	.termin_hinzufuegen_wrapper2 {
		width: 90%;
		text-align: center;
	}
	
	.termin_hinzufuegen_wrapper3 {
		width: 100%;
		text-align: right;
		padding-right: 2.5em;
	}
	
	.checkbox_termin {
		text-align: center;
		margin: 1em 0em;
	}
}

.admin_select {
	width: 32%;
	font-family: 'Lato';
	padding: 0.3em;
	height: 2.5em;
	background-color: #f6f6f6;
	background-image: url(../img/drop-down-arrow.png);
	background-position: right;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-ms-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-khtml-background-size: contain;
	background-size: contain;
	border: 2px solid #595b5b;
}

.admin_large_select {
	width: 60%;
	font-family: 'Lato';
	padding: 0.3em;
	height: 2.5em;
	background-color: #f6f6f6;
	background-image: url(../img/drop-down-arrow.png);
	background-position: right;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-ms-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-khtml-background-size: contain;
	background-size: contain;
	border: 2px solid #595b5b;	
}

.admin_button {
	width: 100%;
	height: 2.5em;
	padding: 0.3em;
	background-color: #f6f6f6;
	border: 2px solid #595b5b;
	font-size: 1em;	
	cursor: pointer;
}

.artikel_submit {
	width: 97.5%;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

.artikel_small_submit {
	width: 60%;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

.input_wrapper {
	width: 19%;
	float: left;
	margin-right:1%;
}

.input_lastwrapper {
	width: 20%;
	float: left;
}

.formatierung_wrapper1, .formatierung_wrapper2 {
	width: 19%;
	float: left;
	margin-right:1%;
}

.formatierung_lastwrapper {
	width: 20%;
	float: left;
}

.img_code {
	border: 2px solid #595b5b;
	background-color: #f6f6f6;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	resize: none;	
	padding: 0.3em;
	font-family: 'Lato';
	width: 25%;
	min-width: 340px;
	height: 2.5em;
	text-align: center;
}

.img_preview {
	width: 400px;
	height: auto;
}

tr.editarticle {
	border-top: 1px solid #111111;
	border-bottom: 1px solid #111111;
}

td.editarticle {
	padding: 0.5em;
	font-size: 14px;
	vertical-align: middle;
}

.editarticle_icon {
	width: 30px;
	height: 30px;
	cursor: pointer;
	margin-left: 3em;
}

.picupload_form {
	width: 95%;
	text-align: center;
}

@media screen and (max-width: 800px) {
  .admin_icon_top{
	display: none;
  }
  
  .input_small {
    width: 97.435%;
	margin-bottom: 0.5em;
  }
  
  .input_big {
    width: 95%;
  }
  
  .input_wrapper, .input_lastwrapper {
	  width: 100%;
	  margin: 0;
  }
  
  .formatierung_wrapper1, .formatierung_wrapper2, .formatierung_lastwrapper {
	  width: 49%;
	  margin-bottom: 0.5em;
  }
  
  .formatierung_wrapper1 {
	  float: left;
  }
  
  .formatierung_wrapper2 {
	  float: right;
  }
  
  .formatierung_lastwrapper {
	  float: initial;
  }
  
  .admin_select {
    width: 32%;
	margin-bottom: 0.5em;
  }
  
  .admin_large_select {
    width: 95%;
	margin-bottom: 0.5em;
  }
  
  .artikel_small_submit {
	  width: 95%;
  }
}

.speiseplan_hinzufuegen {
	width: 100%;
	text-align: center;
	margin-top: 0.5em;
	padding: .25em 0em 0.75em;
	float: left;
}

.speiseplan_hinzufuegen_datum {
	width: 25%;
	float: left;
	height: 5.3em;
	padding: 1.4em 0em;
}

.speiseplan_hinzufuegen_essen {
	width: 50%;
	float: left;
}

.speiseplan_hinzufuegen_anmerkung {
	width: 25%;
	float: left;
}

.speiseplan_submit {
	width: 100%;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

.speiseplan_hinzufuegen_overlay {
	position:absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.45);
	z-index: 10;
}

.speiseplan_hinzufuegen_overlay div {
	width: 30%;
	height: 15%;
	padding: 1.5em;
	background-color: #f6f6f6;
	top: 25%;
	left: 35%;
	position: absolute;
}

@media screen and (max-width: 800px) {
	.speiseplan_hinzufuegen {
		width: 100%;
		border: none;
		padding-bottom: 0em;
		margin-top: 0em;
	}
	
	.speiseplan_hinzufuegen_datum {
		width: 100%;
		padding: 0em 0.5em;
		margin: 0em;
		height: 3em;
		text-align: center;
	}
	
	.speiseplan_hinzufuegen_essen {
		width: 100%;
		padding: 0em;
		margin: 0em;
	}
	
	.speiseplan_hinzufuegen_anmerkung {
		width: 100%;
		padding: 0em 0em 1em;
		margin: 0.5em 0em;
	}
	
	.speiseplan_submit {
		width: 95%;
	}
}

.lehrer_hinzufuegen {
	width: 70%;
}

.lehrer_hinzufuegen_name_wrapper {
	width: 100%;
}

.lehrer_submit {
	width: 70%;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

.lehrer_picdelete {
	width: 17.5%;
	float: left;
	margin: 1em;
	position: relative;
}

.lehrer_picdelete_overlay {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
	display: none;
	cursor: pointer;
}

.lehrer_picdelete:hover > div {
	display: inherit;
}

.lehrer_picdelete_name {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	color: white;
	padding: 0.5em;
}

.lehrer_picdelete_cross {
	width: 50%;
	height: 50%;
	margin: 25%;
}

.upload_kollegium_bild {
	width: 25% !important;
}

@media screen and (max-width: 800px) {
	.lehrer_hinzufuegen {
		width: 97.5%;
	}
	
	.lehrer_hinzufuegen_name_wrapper {
		width: 97.435%;
	}
	
	.lehrer_submit {
		width: 97.5%;
	}
	
	.lehrer_picdelete {
		width: 45%;
		float: left;
		margin: 2.5%;
	}
	
	.lehrer_picdelete_name {
		font-size: 0.8em;
	}
	
	.upload_kollegium_bild {
		width: 75% !important;
	}
}

.ag_hinzufuegen {
	width: 70%;
}

.ag_submit {
	width: calc(70% - 1em); !important;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.ag_hinzufuegen {
		width: 97.5%
	}
	
	.ag_submit {
		width: 95% !important;
	}
}

.koop_hinzufuegen {
	width: 70%;
}

.koop_submit {
	width: calc(70% - 1em); !important;
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.koop_hinzufuegen {
		width: 97.5%
	}
	
	.koop_submit {
		width: 95% !important;
	}
}

.projekttageseite_erstellen {
	width: 70%;
}

.projekttageseite_submit {
	width: calc(100% - 1em);
	padding: 0.3em;
	font-size: 1.5em;
	font-family: 'Lato';
	color: #f6f6f6;
	border: 2px solid #595b5b;
	background-color: #595b5b;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.projekttageseite_erstellen {
		width: 97.5%;
		padding: 0;
		margin: 0;
	}
}




/* ========== RASTER UND FORMEN ========== */
  
.circle {
  border-radius: 50%;
}
  
.hausmeisterpadding {
	margin-top:0px;
}
.half {
	float:left;
  width: 50%;
  padding: 0em;
}
  
.third {
	float:left;
  width: 33.333%;
  padding: 0em;
}
  
.twothirds {
  width: 66.666%;
  padding: 0em;
}

@media screen and (max-width: 800px) {
  .half {
    width: 100%;
  }
  
  .third {
    width: 100%;
  }
  
  .twothirds {
    width: 100%;
  }
}
  
  
  
/* ========== DESKTOP MENU ========== */ 

@media screen and (max-width: 1200px) {
    nav.desktop {
      display: none;
    }
      
    .mobile_menu_icon {
    display: initial !important;
    }
    
    div.header {
      margin: 0 0 3em;
    }
}

nav.desktop {
  box-sizing: border-box;
  float: left;
  width: 100%;
  background: #241E64;
  font-size: 16px;
  top: 0;
  left: 0;
  position: fixed;
  height: 3.9em;
  z-index:1000
}

nav.desktop ul {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

nav.desktop > ul > div > li {
	height: 3.6em;
}

nav.desktop > ul > div > li.submenu > a > p{
	line-height: 3.6em;
	margin: 0;
	padding-right: 2em;
	display: inline-block;
	background-image: url(../img/downpointingtriangle.png);
	background-position: right;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-ms-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-khtml-background-size: contain;
	background-size: contain;
}
 
nav.desktop a {
  display: block;
  text-decoration: none;
}

nav.desktop ul li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0 2px;
}

nav.desktop ul li:hover > a {
	border-top: 4px solid #645e8c;
}
 
nav.desktop ul li > a {
  line-height: 3.6em;
  color: #fff;
  padding: 0em 1em;
  border-top: 4px solid #241E64;
}

nav.desktop ul ul {
  position: relative;
  visibility: collapse;
  height: 0;
  background: #f5f5f5;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  left: 0;
  color: black !important;
  display: inline-block;
  min-width: 100%;
  pointer-events: none;
  z-index: 5;
}
 
nav.desktop ul ul li {
  float: none;
  text-align: left;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  max-width: 200px;
  background: #f5f5f5;
}

nav.desktop ul ul li:hover {
	background: #ececec;
}
 
nav.desktop ul ul li a {
	line-height: inherit;
  padding: 0.5em 1em;
  margin: 0;
  color: #000000;
  border: none !important;
  position: relative;
}

nav.desktop ul ul ul {
	position: absolute;
	visibility: collapse;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
	height: auto;
}

nav.desktop ul > div > li.submenu:hover > ul {
  visibility: visible;
  height: unset;
  left: 0;
  pointer-events: initial;
}

nav.desktop ul ul > li.submenu:hover > ul {
  visibility: visible;
  left: 100%;
  top: 0;
  pointer-events: initial;
}

nav.desktop ul ul li.submenu > a:after {
  position: absolute;
  content: '';
  margin-left: auto;
  right: 10px;
  top: 35%;
  border-left: 5px solid black;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

nav.desktop ul ul li:last-child {
  border-bottom: none;
}

.dmenu_wrapper {
	float: left;
	text-align: center;
	height: 100%;
}

nav.desktop ul li.logo {
  font-size: 16pt;
  padding: 0em 0.5em;
  height: 100%;
  width: 10%;
  width: auto;
  position: absolute;
  top: 0em;
  left: 0em;
  margin: 0;
  border: none;
}

nav.desktop ul li.logo:hover {
   background: #241E64;
}

.nav_logo {
  height: 100%;
}
  
  
 
 /* ========== MOBILE MENU ========== */ 
 
 .mobile a {
  font-family: 'Lato';
  line-height: 2;
}
 
 .mobile a:link {
  color: black;
  text-decoration: none;
}
  
.mobile a:visited {
  color: black;
  text-decoration: none;
}
  
.mobile a:hover {
  color: #241E64;
  text-decoration: underline;
}
  
.mobile_menu_icon {
  height: 100%;
  max-height: 50px;
  width: auto;
  padding: 0.5em;
  float: right;
  display: none;
  margin: 0.2em 0.3em 1em 1em;
} 

div.mobile {
  background: #f5f5f5;
  color: black;
  font-size: 12pt;
  padding: 1 em 1em 1.5em;
  width: 100%;
  list-style-type: none !important;
}

.mobile ul {
	list-style-type: none !important;	
}
  
nav.mobile {
  display: none;
  background: #f5f5f5;
  border-bottom: 3px solid #241E64;
  text-align: left;
} 

div.mobile nav ul {
	display: block;
}
 
div.mobile nav ul li {
  background: #eeeeee;
  padding: 1em;
  font-weight: bold;
  border-top: 1px solid #241E64;
  border-bottom: 1px solid #241E64;
  vertical-align: center;
}

div.mobile nav ul li a {
	color: black;
	margin: 0px;
	padding: 0px;
}

div.mobile nav ul li a:hover {
	color: black;
}

div.mobile nav ul ul {
  padding: 0em 0em 0.3em 1em !important;
  background: #eeeeee;
  display: none;
  width: 100%;  
}

div.mobile nav ul ul ul {
  padding: 0em 0em 0.3em 1em !important;
  background: #eeeeee;
  display: none;
  width: 100%;  
}
  
div.mobile nav ul ul li {
  background: #eeeeee;
  padding: 0em 0em 0em 1em !important;
  font-weight: normal !important;
  border: none !important;
  line-height: 2;
}



/* ========== FOOTER ========== */

.footer {
  background: #111111;
  padding: 1em 2em;
  overflow: hidden;
  color: #ffffff;
  float: left;
  width: 100%;
}

.footer_left {
  width: 30%;
  float: left;
  text-align: left;
}

.footer_center {
	width: 40%;
	text-align: center;
	float:left;
}

.footer_right {
  width: 30%;
  float: right;
  text-align: right;
}

@media screen and (max-width: 1100px) {
  .footer_left {
    width: 100%;
    text-align: center;
  }
  
  .footer_center {
	  width: 100%;
	  margin-top: 1em;
  }
  
  .footer_right {
    width: 100%;
    float: left;
    text-align: center;
  }
}

.footer a {
  color: #ffffff;
}

.footer a:hover {
  color: #ffffff;
}





/* ========== YouTube-Videos ========== */

.responsive-video {
	position: relative;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
	display: flex;
	justify-content: center;
}





/* ========== Karte TaTü ========== */

.karte_wrapper {
	width: 100%;
	position: relative;
	padding: 2em 12.5%;
}

.karte-overlay {
	display: none;
}

.karte {
	width: 100%;
	height: auto;
	position: relative;
	padding: calc(2em + 15px) 0;
}

.karte img {
	width: 100%;
	height: auto;
	min-width: 900px;
	top: 0;
	left: 0;
}

.pins-wrapper {
	height: calc(100% - 4em - 30px);
	margin: calc(2em + 15px) 0;
	width: 100%;
	min-width: 900px;
	position: absolute;
	top: 0;
}

.karte-pin {
	position: absolute;
	transform: translate(-50%,-50%);
	background-color: #ffffff;
	padding: 0.5em;
	border-radius: 50%;
	text-align: center;
	width: 2em;
	height: 2em;
	font-size: 15pt;
	font-weight: bold;
	z-index: 10;
}

.karte-pin:before {
	content: attr(data-text);
	min-width: 150px;
	position: absolute;
	transform: translate(-50%,-100%);
	top: -15px;
	left: 50%;
	margin-bottom:15px;
	padding:10px;
	border-radius:10px;
	color: #000;
	background: #fff;
	text-align:center;  
	visibility: hidden;
	opacity:0;
	transition: opacity 0.3s;  
	box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
	z-index: 25;
}

.karte-pin:after {
	content: "";
	position:absolute;
	top:5px;
	left: 50%;
	transform:translate(-50%,-100%);
	border:10px solid #000;
	border-color: #ffffff transparent transparent transparent;  
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
	box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);  
	z-index: 25;
}

.karte-pin:hover:before, .karte-pin:hover:after {
	visibility: visible;
	opacity:1;
}

.karte-pin:hover {
	animation: pulse-animation 2s 1;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@media screen and (max-width: 1000px) {
	.content_whitebg {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.karte_wrapper {
		padding: 2em 4em;
	}

	.karte {
		overflow-x: scroll;
		scrollbar-width: 10px;
	}
	
	.karte img {
		height: unset;
		max-height: calc(75vh - 20px);
		width: auto;
	}
}





/* ========== Kooperationspartner ========== */

.koop_flex {
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	height: 5em;
}
.paddingflexbox {
	padding-right: 100px;
}
.koop_flex > a {
	max-width: 20%; 
}

.koop_bild1, .koop_bild2, .koop_bild3, .koop_bild4, .koop_bild5 {
	height: 100%;
}

.koop_bild6 {
	height: 100%
}
.koop_bild1 {
	margin-right: 60px;
}
.koop_bild3 {
	margin-right: 15px;
}
.koop_bild4 {
	margin-right: 45px;
	margin-left:15px;
}
.koop_bild5 {
	margin-left: 20px;
}


/* .koop_bild1 { */
  /* float: left; */
  /* width: 14%; */
  /* padding-right: 0.7em; */
  /* height: 16%; */
  /* margin-top: 0.5em; */
/* } */

/* .koop_bild3 { */
  /* float: left; */
  /* width: 15%; */
  /* padding-right: 0.7em; */
  /* height: 16%; */
  /* margin-top: 0.5em; */
/* } */

/* .koop_bild4 { */
  /* float: left; */
  /* width: 25%; */
  /* padding-right: 0.7em; */
  /* height: 16%; */
  /* margin-top: 0.5em; */
/* } */
  
/* .koop_bild2 { */
  /* float: left; */
  /* width: 23%; */
  /* padding-right: 0.7em; */
  /* height: 16%; */
  /* margin-top: 0.5em; */
/* } */

/* .koop_bild5 { */
  /* float: left; */
  /* width: 20%; */
  /* padding-right: 0.7em; */
  /* height: 16%; */
  /* margin-top: 0.5em; */
/* } */

@media screen and (max-width: 800px) {
.elternbrief {
font-size: 10pt;
}

.break {
  flex-basis: 100%;
  height: 0;
}	

.koop_flex {
	width: 100%;
	float: left;
	display: flex;
	justify-content: space-between;
	height: 13em;
	flex-wrap: wrap;
}

.koop_flex > a {
	max-width: 20%; 
}

.koop_bild1, .koop_bild2, .koop_bild3, .koop_bild4, .koop_bild5, .koop_bild6 {
	height: 90%; max-width: 100%; margin-right: 0px; margin-left: 0px;
}



.koop_bild1 {
  float: left;
  min-width: 8px;
  padding-right: 0.05%;
  border: none;
  
}
.koop_bild2 {
  float: left;
  min-width: 20px;
  width: 100px;
  padding-right: 0.05%;
  border: none;
}
 .koop_bild3 {
  float: left;
  min-width: 8px;
  padding-right: 0.05%;
  border: none;
}.koop_bild4 {
  float: left;
 min-width: 8px;
  padding-right: 0.05%;
  border: none;	
}.koop_bild5 {
  float: left;
  min-width: 8px;
  padding-right: 0.05%;
  border: none;
  }.koop_bild6 {
  float: right;
  min-width: 8px;
  padding-right: 0.05%;
  border: none;
}
}

.container{
        display:block;
        margin:2em auto;
        width:810px;
        height:390px;
        border:1px solid black;
        position:relative;
        padding:5px 0 5px 5px;
        background:#eee;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow:3px 3px 4px #888;
        -webkit-box-shadow:3px 3px 4px #888;
        box-shadow:3px 3px 4px #888;
}

.gallery img{
        border:none;
}

.gallery ul, .gallery ul ul{
        list-style:none;
        margin:0;
        padding:0;
        width:200px;
}

.gallery ul ul{
        margin-left:-900px;
        height:0;
        overflow:hidden;
}

.gallery ul li{
        width:200px;
        float:left;
        background:#eee url(../images/slbar2.gif) no-repeat;
}

.gallery ul li a.prevtab{
        display:block;
        text-decoration:none;
        text-align:left;
        font:normal 14px Verdana,Arial,Sans-Serif;
        color:black;
        height:31px;
        line-height:31px;        /* line-height -> IE needs this for vert_Table_adjust */
        background:#eee url(../images/slbar1.gif) no-repeat;
}

.gallery table{
        margin:0 0 1px 0;
        padding:0;
        display:none;
        background:#ccc;
}

.gallery ul li a.prevtab:hover,
.gallery ul li:hover a.prevtab{
        background:transparent;
}

.gallery ul :hover ul{
        width:192px;        /* special IE calc ??? */
        height:230px;
        overflow:visible;
        margin:0;
        background:transparent;
}

.gallery ul :hover table{
        display:block;
        margin-top:-2px;
        padding:0;
        border:1px solid #000;
        border-width:0px 1px 1px 1px;
        -moz-border-radius:0 0 6px 6px ;
        -webkit-border-radius:0 0 6px 6px;
        border-radius:0 0 6px 6px;

}

.gallery ul :hover ul li{
        float:left;
        display:inline;
        width:60px;
        margin:3px 0px 3px 3px;
        background:#ccc;
        -moz-box-shadow:1px 1px 2px #444;
        -webkit-box-shadow:1px 1px 2px #444;
        box-shadow:1px 1px 2px #444;
}

.gallery span{
        display:none;
        width:600px;
        height:390px;
        background:#444;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
}

.gallery span img{
        display:block;
        margin:5px auto;
        height:380px;
}

.gallery ul ul li a:hover span{
        display:block;
        position:absolute;
        left:210px;
        top:5px;
        z-index:90;
}

.gallery img.prev{
        display:block;
        height:35px;
        border:2px solid #bbb;
        margin:0 auto;
}

.gallery ul ul a:hover img.prev{
        border:2px solid #fff;
}

.default{
        display:block;
        position:absolute;
        left:210px;
        top:5px;
        width:600px;
        height:390px;
        background:#444;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        font:normal 0.9em Arial,Sans-Serif;
        text-align:center;
        color:white;
}

.default p{padding-top:120px;line-height:32px;}
.kunstgaleriemargin
	margin: 1em
.test11{
	fontsize: 100px;
}