html {
  scroll-behavior: smooth;
}
body {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: large;
}

ul {
  list-style: disc inside;
  font-weight: 300;
  padding: 0;
}

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

#mainwrapper header {
  background-color: rgba(210, 76, 122, 1);
  overflow: auto;
  font-style: normal;
  font-weight: 400;
}
#mainwrapper header #logo {
  width: 0px;
  float: left;
  color: rgba(255, 255, 255, 1);
  font-style: normal;
  font-weight: 700;
  height: 0%;
  clear: left;
  left: 1%;
  position: fixed;
  overflow-x: visible;
}
#content #mainContent h1,
#content #mainContent h2 {
  color: rgba(180, 0, 86, 1);
  font-style: normal;
  font-weight: 400;
  right: auto;
  font-size: xx-large;
  border-top-style: solid;
  border-top-color: rgb(127, 126, 125);
  border-bottom: medium solid rgb(127, 126, 125);
  clear: left;
  border-right-color: rgb(127, 126, 125);
}
#content #mainContent h3 {
  font-style: normal;
  font-weight: 400;
  color: rgba(86, 86, 86, 1);
  font-size: x-large;
}
#content #mainContent #bannerImage {
  width: 45%;
  font-style: normal;
  font-weight: 400;
  color: rgba(2, 2, 2, 1);
  float: left;
  clear: both;
}
.banner {
  width: 102%;
  font-style: normal;
  font-weight: 400;
  color: rgba(2, 2, 2, 1);
  float: left;
  clear: left;
  padding-left: 0px;
  padding-top: 0px;
}
#content #mainContent p {
  color: rgba(0, 0, 0, 1);
  font-style: normal;
  font-weight: 300;
  text-align: left;
  font-size: large;
}
#content #mainContent #zitat {
  color: rgba(138, 180, 57, 1);
  font-style: normal;
  font-weight: 300;
  text-align: left;
  background-color: rgba(240, 240, 240, 1);
  font-size: small;
}
#content #mainContent #zitatName {
  color: rgba(206, 79, 122, 1);
  font-style: normal;
  font-weight: 300;
  text-align: left;
  background-color: rgba(240, 240, 240, 1);
  font-size: large;
}
footer section {
  width: 96%;
  float: left;
  padding-left: 0%;
  padding-right: 2%;
  text-align: justify;
  font-style: normal;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
  margin-left: 2px;
}
footer section h3 {
  text-align: left;
  font-style: normal;
  font-weight: 400;
}
#mainContent {
  padding-left: 2%;
  width: 71%;
  float: left;
  padding-right: 2%;
  padding-top: 0px;
}
#mainwrapper #content #sidebar {
  position: -webkit-sticky;
  position: fixed;
  width: 120px;
  padding-left: 2%;
  padding-right: 2%;
  background-color: rgba(232, 133, 163, 1);
  right: 5%;
  top: 9px;
}
#mainwrapper {
  width: 90%;
  overflow: auto;
  margin-left: 8%;
  background-color: rgba(240, 240, 240, 1);
}
nav ul li {
  list-style-type: none;
  padding-top: 8px;
  padding-bottom: 8px;
}
nav ul {
  padding-left: 0%;
}
nav ul li a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
  text-shadow: 0px 0px #fff;
}
#footerbar {
  height: 18px;
  clear: both;
  background-color: rgba(210, 76, 122, 1);
  width: 100%;
}
footer {
  width: 71%;
  padding-left: 2%;
  padding-right: 2%;
}
.notOnDesktop {
  display: none;
}
#mainContent #bannerImage img {
  width: 91%;
  position: relative;
}
#mainContent #bannerImage.image {
  display: block;
  width: 80%;
  height: auto;
}
#mainContent #banner.image {
  display: block;
  width: 98%;
  height: auto;
  clear: left;
  margin-bottom: 12px;
}
#mainContent #bannerImage.text {
  color: #000;
  top: 10%;
  left: 10%;
  transform: translate(-10%, -10%);
  width: 100%;
  font-style: normal;
  font-weight: 300;
}
#mainContent #bannerImage.hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
}
#mainContent #bannerImage:hover.hover {
  opacity: 1;
}
#mainwrapper header nav a {
  color: rgba(146, 146, 146, 1);
  text-decoration: none;
}
@media screen and (max-width: 1000px) {
  .notOnDesktop {
    display: block;
    text-align: right;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 96%;
  }
  #content .notOnDesktop input {
    height: 28px;
  }
  #mainContent {
    padding-top: 0px;
    float: none;
    width: 90%;
  }
  #mainwrapper header #logo {
    overflow-x: hidden;
  }
  #mainwrapper #content #sidebar {
    position: -webkit-sticky;
    position: sticky;
    float: none;
    width: 92%;
    padding-top: 13px;
    overflow: auto;
    margin-top: 0;
    margin-left: 2%;
    padding-bottom: 13px;
  }
  #content #sidebar nav {
    float: left;
    padding-left: 4%;
  }
  #sidebar nav ul {
    margin-top: 0px;
  }
  footer {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
  }
  #content footer article {
    width: 46%;
  }
  #mainwrapper header {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  #mainwrapper header #logo {
    width: 98%;
    margin-left: 2px;
    overflow-x: hidden;
  }
  #content #mainContent #bannerImage {
    width: 100%;
  }
  #content #sidebar #adimage {
    width: 100%;
  }
  #content #sidebar nav {
    width: 96%;
    padding-top: 7px;
  }
  #sidebar nav ul li {
    display: inline-block;
    width: 32%;
    text-align: center;
  }
  #content .notOnDesktop {
    width: 90%;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
  }
  #content .notOnDesktop input {
    width: 80%;
    text-align: center;
  }
  #content #mainContent h3 {
    font-size: x-large;
  }
  #content footer article {
    width: 96%;
  }
}
#PointofView {
  background-color: rgba(242, 158, 183, 1);
  padding-left: 4%;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-right: 4%;
  float: left;
  clear: left;
  margin-bottom: 1%;
}
#impressum {
  font-size: small;
}
#CallToAction {
  color: rgba(250, 250, 250, 1);
  font-style: normal;
  font-weight: 400;
  text-align: center;
  background-color: rgba(210, 76, 122, 1);
  font-size: x-large;
  padding-left: 2%;
  width: auto;
  padding-right: 2%;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.email {
  color: rgba(180, 0, 86, 1);
  text-decoration: underline;
  text-decoration-style: solid;
}
.email:hover {
  color: rgba(180, 0, 86, 1);
  text-decoration: none;
}

.changeColor {
  -webkit-animation: changeFillColor 30s infinite linear;
  animation: changeFillColor 30s infinite linear;
}

@-webkit-keyframes changeFillColor {
  0%,
  100% {
    fill: #7f7e7d;
  }
  25% {
    fill: #619523;
  }
  50% {
    fill: #b40055;
  }
  75% {
    fill: #0080ac;
  }
}

@keyframes changeFillColor {
  0%,
  100% {
    fill: #7f7e7d;
  }
  25% {
    fill: #619523;
  }
  50% {
    fill: #b40055;
  }
  75% {
    fill: #0080ac;
  }
}