html, body {
  background-color:#FFCCAA;
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  overflow-x:hidden;
  font-family:sans-serif;
}

* {
/*   outline:1px solid #000000; */
  font-size:11pt;
}

a, a:visited, a:active {
  color:#AA0033;
  text-decoration:underline;
}

a:hover {
  color:#FF8000;
}

.clear {
  clear:both;
}

div.galleryItem {
  padding:2vmin;
  cursor:pointer;
  background-color:#DDDDDD;
  border-radius:1vmin;
  margin-bottom:2vmin;
}

div.galleryItem:hover {
  background-color:#FF8000;
}

span.galleryItemDate {
  float:right;
  color:#777777;
  font-size:9pt;
}

div.galleryItemDescription {
  padding-top:0.5vmin;
  font-size:9pt;
  color:#555555;
}

div.galleryItemPreview {
  margin-top:1vmin;
  overflow:hidden;
}

div.galleryItemThumbnail {
  position:relative;
  float:left;
  width:9%;
  padding-bottom:9%;
  margin-right:1%;
  opacity:0.7;
}

div.galleryItem:hover div.galleryItemThumbnail {
  opacity:1;
}


#galleryViewer {
  position:fixed;
  z-index:10000000;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin:0;
  padding:0;
  background-color:rgba(0,0,0,0.8);
  display:none;
}

#galleryClose {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:10;
  opacity:0.5;
  background-image:url('./../img/close.svg');
  background-position:right top;
  background-repeat:no-repeat;
  background-size:10vmin 10vmin;
  cursor:pointer;
}

#galleryPicture {
  position:absolute;
  left:0;
  right:0;
  top:7vmin;
  bottom:13vmin;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  z-index:20;
}

#galleryNext,
#galleryPrev {
  position:absolute;
  width:50%;
  height:100%;
  z-index:20;
  opacity:0.5;
  cursor:pointer;
  background-repeat:no-repeat;
  background-size:8vmin 8vmin;
}

#galleryNext {
  right:0;
  background-image:url('./../img/next.svg');
  background-position:right center;
}

#galleryPrev {
  left:0;
  background-image:url('./../img/prev.svg');
  background-position:left center;
}

#galleryNext:hover,
#galleryPrev:hover,
#galleryClose:hover {
  opacity:1;
}

#galleryViewer.onePicture #galleryNext,
#galleryViewer.onePicture #galleryPrev {
  display:none;
}

#galleryViewer.lastPicture #galleryNext,
#galleryViewer.firstPicture #galleryPrev {
  opacity:0.1;
  cursor:default;
}
#galleryViewer.lastPicture #galleryNext:hover,
#galleryViewer.firstPicture #galleryPrev:hover {
  opacity:0.1;
}

#galleryText {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:11vmin;
  padding-top:2vmin;
  font-size:3vmin;
  overflow:hidden;
  z-index:1;
  text-align:center;
  color:#FFFFFF;
}

#galleryDate {
  position:absolute;
  left:11vmin;
  right:11vmin;
  top:0;
  height:3vmin;
  padding:2vmin;
  font-size:2vmin;
  overflow:hidden;
  z-index:1;
  text-align:center;
  color:#FFFFFF;
}

a.galleryThumbnail {
  position:relative;
  display:block;
  float:left;
  width:15%;
  height:0;
  padding-bottom:15%;
  background-color:#FFFFFF;
  border-radius:1vw;
  margin-left:2.5%;
  margin-right:2.5%;
  margin-bottom:5%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  cursor:pointer;
}

div.breadcrumbs {
  color:#666666;
  margin-bottom:3vmin;
  font-size:8pt;
  margin-left:2.5%;
}

span.breadcrumb {
  color:#000000;
  font-weight:bold;
  font-size:11pt;
}

span.breadcrumb a {
  font-weight:normal;
  color:inherit;
  text-decoration:none;
}

span.breadcrumb a:hover {
  text-decoration:underline;
}

#galleryDescription {
  color:#666666;
  margin-bottom:3vmin;
  font-size:10pt;
  margin-left:2.5%;
}

div.footnote {
  position:relative;
  font-size:8pt;
  color:#666666;
  text-align:left;
  padding-left:2%;
  padding-top:1%;
  margin-top:3%;
}

div.footnote::before {
  position:absolute;
  content:'';
  left:0;
  top:-1px;
  width:5%;
  height:0;
  border-top:1px solid #444444;
}

a.invisible {
  text-decoration:inherit;
  color:inherit;
  cursor:pointer;
  font-size:inherit;
}

a.invisible.calendar {
  padding:0.5em;
  border-radius:1em;
}

a.invisible.calendar:hover {
  background-color:#FF8000;
  color:#000000;
}

ul.menu {
  padding:0;
  margin:0;
  list-style-type:none;
/*   padding-left:5vmin; */
}

li.menu {
  padding:1vmin 3vmin;
  border-radius:10vmin;
  cursor:pointer;
  color:#000000;
}

#menu,
ul.menu,
li.menu,
a.menu {
  font-size:12pt;
}

li.menu.active {
  background-color:#EEEEEE;
}

li.menu:hover {
  background-color:#FF8000;
}

a.menu {
  text-decoration:none;
}

#menuButton {
  display:none;
}

select.menu {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

li.menu.moreButton {
  display:none;
}

div.previewThumb {
  position:relative;
  float:left;
  width:20%;
  padding-bottom:20%;
  margin-right:5%;
  margin-bottom:5%;
  border-radius:0.5vmin;
  cursor:pointer;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}


#kalenderTitel,
#bilderTitel {
  color:#666666;
  margin-bottom:2vmin;
}

div.kalenderTag {
  position:relative;
  float:left;
  width:13%;
  padding-bottom:13%;
  margin-right:2px;
  margin-bottom:2px;
  font-size:3vw;
  border-radius:0.5vmin;
  cursor:pointer;
  background-color:#DDDDDD;
  color:#666666;
}

div.kalenderTag.prev,
div.kalenderTag.next {
  background-color:#F5F5F5;
  color:#777777;
}

div.kalenderTag.active {
  background-color:#FF8080;
  color:#880000;
}

div.kalenderTag.prev.active,
div.kalenderTag.next.active {
  background-color:#FFCCCC;
  color:#AA7777;
}

div.kalenderTag.today::before {
  position:absolute;
  content:'';
  left:-1px;
  top:-1px;
  right:-1px;
  bottom:-1px;
  border:1px solid #000000;
  border-radius:0.5vmin;
}

div.kalenderTag:hover,
div.kalenderTag.prev:hover,
div.kalenderTag.next:hover {
  background-color:#FF8000;
  color:#FFFFFF;
}

div.kalenderTagContent {
  position:absolute;
  left:0;
  width:100%;
  font-size:30%;
  margin-top:25%;
  text-align:center;
}

#noten {
  background-image:url('../img/noten.png');
  background-size:auto 60%;
  background-position:center 80%;
  background-repeat:no-repeat;
  height:15vmin;
  background-color:#FFFFFF;
  margin:0;
  padding:0;
  padding-top:1.5vmin;
  color:#FF8080;
  text-align:center;
  font-size:2vmin;
  border-radius:0vmin 0vmin 3vmin 3vmin;
}

#header {
  margin:0;
  padding:0;
}

#wrapper {
  position:relative;
  padding:0;
  height:100%;
  margin:auto;
  margin-top:3vmin;
  max-width:2000px;
}

#menu {
  position:relative;
  padding-top:2vmin;
  padding-left:2%;
  padding-right:2%;
  padding-bottom:2vmin;
  background-color:#FFFFFF;
  border-radius:0vmin 3vmin 3vmin 0vmin;
  width:16%;
  float:left;
  min-height:50%;
}

#menu::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  right:100%;
  width:10000000px;
  background-color:#FFFFFF;
}

#kalender {
  position:relative;
  padding-top:2vmin;
  padding-left:2%;
  padding-right:2%;
  padding-bottom:0vmin;
  background-color:#FFFFFF;
  border-radius:3vmin 0vmin 0vmin 3vmin;
  width:16%;
  float:left;
}

#kalenderSquare {
  position:relative;
  width:100%;
  padding-bottom:100%;
}

#kalenderContent {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

#bilder {
  position:relative;
  padding-top:2vmin;
  padding-left:2%;
  padding-right:2%;
  padding-bottom:2vmin;
  background-color:#FFFFFF;
  border-radius:3vmin 0vmin 0vmin 3vmin;
  width:16%; /*16*/
  float:left;
  margin-top:3vmin;
}

#kalender::after,
#bilder::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:100%;
  width:10000000px;
  background-color:#FFFFFF;
}

#main {
  position:relative;
  width:50%;
  top:0;
  bottom:0;
  padding:0;
  float:left;
  height:100%;
  font-size:11pt;
}

#mainContent {
  background-color:#FFFFFF;
  margin:0;
  min-height:100%;
  padding-top:2vmin;
  padding-left:2%;
  padding-right:2%;
  padding-bottom:2vmin;
  border-radius:3vmin 3vmin 0vmin 0vmin;
  margin-left:3vmin;
  margin-right:3vmin;
  font-size:11pt;
}


#kontakt {
  position:fixed;
  right:0;
  bottom:0;
  width:5%;
  padding-bottom:4%;
  background-color:#FFFFFF;
  border-radius:3vmin 0vmin 0vmin 0vmin;
}

a.kontakt {
  display:block;
  position:absolute;
  text-decoration:none;
  background-image:url('./../img/mail.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center bottom;
  left:20%;
  right:10%;
  top:20%;
  bottom:10%;
}

#mainContent div.kalenderTagContent {
  font-size:2.5vw;
}

div.calendarMainContainer {
  clear:both;
  margin-left:5%;
  height:40vw;
}

h1.center {
  text-align:center;
  display:block;
  padding-top:0.35vw;
}

.center {
  text-align:center;
}

.big {
  font-size:13pt;
}

.margin {
  margin-top:2em;
}

.paddingLeft {
  padding-left:1em;
}

a.calendarNext,
a.calendarPrev {
  display:block;
  position:relative;
  text-decoration:none;
  color:#000000;
  font-size:20pt;
  padding:0.5vw 1vw;
  margin-bottom:0.5vw;
  border-radius:1vmin;
}

a.calendarNext:hover,
a.calendarPrev:hover {
  background-color:#FF8000;
  color:#FFFFFF;
}

a.calendarNext {
  float:right;
}

a.calendarPrev {
  float:left;
}

.normal {
  font-size:11pt !important;
}

.small {
  font-size:9pt !important;
}

a.calendarDate,
div.calendarDate {
  display:block;
  border-radius:1vmin;
  padding:1vmin;
  background-color:#F5F5F5;
  margin-top:1vmin;
  margin-bottom:1vmin;
}

a.calendarDate,
a.calendarDate * {
  text-decoration:none;
  cursor:pointer;
}

a.calendarDate:hover {
  background-color:#FF8000;
}

a.calendarDate:hover .decent {
  color:#ffffff;
}

div.calendarDateTime {
  font-weight:bold;
  margin:1vmin;
}

a.calendarDate div.calendarDateTime .decent {
  color:#444444;
}

div.calendarDateTitle {
  margin-left:1vmin;
  margin-bottom:1vmin;
  color:#000000;
}

div.calendarDateDescription {
  font-size:10pt;
  background-color:#FFFFFF;
  padding:1vmin;
  padding-bottom:1vmin;
  border-radius:2vmin 2vmin 0 0;
}

div.calendarDateDetails {
  background-color:#FFFFFF;
  border-radius:0 0 2vmin 2vmin;
  padding:1vmin;
  padding-top:0;
  font-size:9pt;
}

div.calendarDateDetails * {
  font-size:9pt !important;
}

.decent {
  color:#888888;
  font-weight:normal;
}

div.message {
  padding:2vmin;
  border-radius:1vmin;
  font-size:10pt;
  font-weight:bold;
  border:1px solid #000000;
  margin-bottom:1vmin;
}

div.message.error {
  background-color:#FF5500;
  color:#FFFFFF;
}

div.message.success {
  background-color:#CCFFCC;
  color:#555555;
}

input.textfeld {
  width:100%;
}

textarea.textfeld {
  width:100%;
  height:20vmin;
  resize:none;
}

input.submit {
  background-color:#AA0033;
  color:#FFFFFF;
  width:40%;
  border-radius:1vmin;
  border:none;
  padding:1vmin;
  font-size:12pt;
  cursor:pointer;
}

div.borderBottom {
  padding-bottom:2vmin;
  margin-bottom:2vmin;
}

div.spalte2 {
  position:relative;
  width:45%;
  margin-left:2.5%;
  margin-right:2.5%;
  float:left;
}

span.notiz {
  color:#666666;
}