@keyframes dropContent {
  0% {
    transform: translateY(10%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes slideThumbnail {
  0% {
    left: -100px;
  }

  100%{
    left: 0px;
  }
}

.background {
  background-color: rgba(240, 240, 240, 1);
  /*background-image: url(../images/background.jpg);*/
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  overflow: auto;
  position: absolute;
}

p {
  font-family: arial;
  font-size: 14px;
  color: rgb(50, 50, 50);
}

a {
  font-family: arial;
  font-size: 14px;
  color: rgb(50, 50, 50);
}

h1 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h2 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h3 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h4 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h5 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h6 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

h7 {
  color: rgb(50, 50, 50);
  font-family: arial;
}

.header {
  position: inherit;
  padding-top: 50px;
  padding-bottom: 50px;
}

.logo {
  margin-left: 25px;
  height: 70px;
}

.clr {
  clear: both;
}

.menu {
  margin: 0px;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
  margin-top: 25px;
}

.menu li {
  float: left;
  list-style-type: none;
  display: block;
}

.menu li.active-page {
  border-bottom: solid 3px #EC1B24;
}

.menu a {
  text-decoration: none;
  color: black;
  display: block;
  padding: 15px 35px 15px 35px;
  text-transform: uppercase;
}

.menu li:hover {
  background-color: #EC1B24;
  border-bottom: solid 3px #EC1B24;
}

.menu a:hover {
  color: white;
}

.main-container {
  width: 1000px;
  position: relative;
  margin: auto;
}

.page-header {
  color: rgb(50, 50, 50);
  border-bottom: solid 1px #7F7F7F;
  font-family: calibri;
}

.page-container {
  padding: 50px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
  border-bottom: solid 7px #4B5054;
  margin-bottom: 100px;
  animation-name: dropContent;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
}

.parent {
  display: flex;
}

.vertical-menu {
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 1000px;
  background-color: rgb(240, 240, 240);
}

.vertical-menu li {
  list-style-type: none;
  border-bottom: solid 1px rgb(200, 200, 200);
}

.vertical-menu p {
  margin: 0px;
  padding: 0px;
  padding: 15px 35px 15px 35px;
}

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

.vertical-menu p:hover {
  color: white;
  cursor: pointer;
}

.side-content {
  flex: 1;
  background-color: rgb(250, 250, 250);
  padding: 25px;
}

.content {
  text-align: justify; /* Blocksatz */
}

.thumbnail {
  object-fit: cover;
  width: 100%; /* Ist nötig um die orginale Größe beizubehalten */
  height: 250px;
}

.objects {
  width: 100%;
  height: 1000px;
  animation-name: dropContent;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
}

.footer {
  color: rgb(100, 100, 100);
  padding-top: 200px;
}