:root {
  --navbar-color-background: #303030;                       /* as links use all navbar space, this is also bg color for unselected, unhovered links */
   /* use footer-color-background instead */
  --navbar-color-background: #B5BCE6;                       /* as links use all navbar space, this is also bg color for unselected, unhovered links */
  --navbar-color-background: lightgrey;                       /* as links use all navbar space, this is also bg color for unselected, unhovered links */
  --navbar-color-link: #f2f2f2;                             /* link (text) color */
  --navbar-color-link-background-active: #04AA6D;           /* bg color for ACTIVE link */
  --navbar-color-link-hover-background-not-active: #101010; /* bg color for hover over INACTIVE links only */
  --navbar-color-link-hover-background-not-active: #7030A0; /* bg color for hover over INACTIVE links only */
  --navbar-color-link-hover-background-not-active: lightgrey; /* bg color for hover over INACTIVE links only */
   /* use footer-color-background instead */

  --footer-color: #7F7F7F;                                  /* footer text color */
  --footer-color-background: #F0F0F0;                       /* footer text bg color (lightgrey)*/
  --footer-color-link: #7F7F7F;                             /* footer link color */

  --menubutton-color-background: #F0F0F0;                   /* used on topmemnu buttons */
}

/* moved into header
@font-face {
   font-family: 'PixelifySans-Regular';
   src: url('font/PixelifySans-Regular.ttf');
}

@font-face {
   font-family: '1942_report1942_report';
   src: url('font/1942-webfont.woff2') format('woff2'),
        url('font/1942-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}
html {
   font-family: '1942_report1942_report', arial, sans-serif;
}
*/

h1 {
   /* arial will be used until 'poppinsbold' loads, then it will be swapped */
   font-family: 'poppinsbold', arial, sans-serif;
   font-weight: 900;
   /*
   100
   200
   300
   400 -> normal
   500
   600
   700 -> bold
   800
   900
   */
   font-style: normal;
   /*
   normal
   italic
   color: #7030A0;
   */
}

h2 {
   /* arial will be used until 'poppinsbold' loads, then it will be swapped */
   font-family: 'poppinsbold', arial, sans-serif;
   font-weight: normal;
   /*
   100
   200
   300
   400 -> normal
   500
   600
   700 -> bold
   800
   900
   */
   font-style: normal;
   /*
   normal
   italic
   */
   /*color: #B5BCE6;
   color: #7030A0;
   */
}

p {
  line-height: 2.1;
}

.topmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/ /* hides dropdown items */
  background-color: var(--navbar-color-background);
  position: fixed;
  top: 0;
transition: top 0.3s;
  width: 100%;
  /*max-width: 240px;*/ /* vert menu*/
}

.topmenu li {
  float: left;
  /*width: 100%;*/ /* vert menu*/
  padding: 0 5px;    /* top/bottom left/right*/
}

.topmenu li a {
  display: block;
  color: var(--navbar-color-link);
  text-align: center;
  padding: 10px 5px;    /* top/bottom left/right*/
  text-decoration: none;
  width: 100%; /* comment for vert menu*/
}

.topmenu li a:hover:not(.active) {
  background-color: var(--navbar-color-link-hover-background-not-active);
}

.active {
  background-color: var(--navbar-color-link-background-active);
  pointer-events: none;     /* also prevents active element from changing color on hoover */
  cursor: none;
}

.navbar {
  overflow: hidden;
  background-color: var(--navbar-color-background);
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: var(--navbar-color-link);
  text-align: center;
  padding: 10px 5px;
  text-decoration: none;
  /*font-size: 17px;*/
}

.navbar a:hover {
  background: var(--navbar-color-link-hover-background);
  /*color: black;*/
}

.navbar a:hover:not(.active) {
  background: var(--navbar-color-link-hover-background-not-active);
}

.logo {
  vertical-align: left;
  width: 200px;
}

.avatar {
  vertical-align: middle;
  width: 200px;
  height: 200px;
  border-radius: 5%;
  /*height: 50px;
  border-radius: 50%;*/
}

.image {
  vertical-align: middle;
  width: 330px;
  height: 270px;
  border-radius: 5%;
  /*float: left;
  padding: 0 0 0 25px;*/
}

.main {
   margin:-10px -40px 0px -10px;
  /* no use for this, may be to define font for whole page at one spot? */
}

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

/* Change styles for span and register button on extra small screens - not required when using this navbar
@media screen and (max-width: 1470px) {
   .main {
     padding: 20px;
     margin-top: 40px;
   }
}

@media screen and (max-width: 830px) {
   .main {
     padding: 20px;
     margin-top: 80px;
   }
}

@media screen and (max-width: 570px) {
   .main {
     padding: 20px;
     margin-top: 120px;
   }
}

@media screen and (max-width: 470px) {
   .main {
     padding: 20px;
     margin-top: 160px;
   }
}

@media screen and (max-width: 370px) {
   .main {
     padding: 20px;
     margin-top: 200px;
   }
}
 */

/*
@media screen and (max-width: 370px) {
   .navbar a {
     float: left;
     display: block;
     color: var(--navbar-color-link);
     text-align: center;
     padding: 10px 5px;
     text-decoration: none;
     *//*font-size: 17px;*//*
     border: 1px solid #bbb;
   }
}
*/

footer {
  /*text-align: center;*/
  /* 33px fits footer height of 90px as defined in index.php */
  padding: 35px 0px 33px 100px;
  /* background-color: var(--footer-color-background); */
  color: var(--footer-color);
}
footer a {
  padding: 14px 16px;
  text-decoration: underline;
  color: var(--footer-color);
}

.imgcontainer {
  margin: 20px 5px 20px 5px;     /* top right bottom left*/
}


.button_home {
  width: 90px;
  height: 42px;
  background-color: var(--menubutton-color-background);
  border: 2px solid black;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

/* not used
.button_home:hover {
  background-color: var(--navbar-color-link-hover-background-not-active);
}
*/

.button_contact {
  width: 270px;
  height: 41px;
  background-color: var(--menubutton-color-background);
  border: 2px solid black;
  color: black;
   display: flex;
   align-items: center;
   justify-content: center;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

/* not used
.button_contact:hover {
  background-color: var(--navbar-color-link-hover-background-not-active);
}
*/

/* container holding dropdown menu - background-color has no effect here */
.dropdown_menu {
  position: relative;
  display: inline-block;
}

/* dropdown menu button */
.dropdown_menu_button {
  width: 270px;
  height: 45px;
  background-color: var(--menubutton-color-background);
  border: 2px solid black;
  /*padding: 8px 10px 8px 10px;*/
  color: black;

  /* align text hor & vert */
  display: flex;
  align-items: center;
   justify-content: center;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

/* content definition - background-color has no effect here */
.dropdown_menu_content {
  width: 270px;
  /*height: 225px;*/
  height: 270px;
  /*height: 315px;*/
  display: none;
  position: absolute;
  border: 1px dotted black;
  background-color: #F0F0F0;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  z-index: 1;
}

/* menu button -> expanded menu (individual menue items/links) -> menu item NOT hoover */
.dropdown_menu_content a {
  width: 266px;
  height: 45px;
  background-color: var(--menubutton-color-background);
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* menu button -> expanded menu (individual menue items/links) -> menu item hoover */
.dropdown_menu_content a:hover {
  width: 266px;
  height: 41px;
  background-color: var(--menubutton-color-background);
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* menu button -> expanded menu (whole menue block) */
.dropdown_menu:hover .dropdown_menu_content {
  display: block;
}

/* menu button hoover */
.dropdown_menu:hover .dropdown_menu_button {
  background-color: var(--menubutton-color-background);
}

/* test test */

/* slideshow https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto */
/* already defined for topnav
*
{
   box-sizing: border-box;
}
*/
.SlideShow
{
   display: none;
}
img
{
   vertical-align: middle;
}
.slideshow-container
{
   /*width: 10%;*/
   position: relative;
   /*margin: auto;*/

   margin: 20px 5px 20px 5px;     /* top right bottom left*/
   width: 279px;                 /* actual size of image */
   height: 279px;
}
.fade
{
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
}

.tooltip.datenschutz {
  position: relative;
  display: inline-block;
  background:grey;            /* drawer closed color */
}

.tooltip.drawer {
  position: relative;
  display: inline-block;
  background:grey;            /* drawer closed color */
}

.tooltip.news {
  position: relative;
  display: block;
  border: 2px solid black;
  border-radius: 10px;
  margin: 10px 1.5% 10px 1.5%;
}

.tooltip.datenschutz .tooltiptext {
  position: relative;
  visibility: hidden;
  width: 1000px;
  /*height: 65%;*/
  height: auto;
  background-color: black;
  color: #7030A0;
  color: black;
  text-align: left;
  border: 2px solid black !important;
  border-radius: 10px;
  padding: 30px 50px 30px 50px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0.4;
  transition: 0.3s;
}

.tooltip.drawer .tooltiptext {
  position: relative;
  visibility: hidden;
  width: 90%;
  /*height: 65%;*/
  height: auto;
  background-color: black;
  color: #7030A0;
  color: black;
  text-align: center;
  border: 2px solid black !important;
  border-radius: 10px;
  padding: 0px 0px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 5%;
  left: 5%;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0.4;
  transition: 0.3s;
}

.tooltip.news .tooltiptext {
  position: relative;
  visibility: hidden;
  width: 60%;
  height: 50%;
  /* background-color: lightgrey; */
  color: #7030A0;
  color: black;
  text-align: center;
  border: 2px solid black !important;
  border-radius: 10px;
  padding: 0px 0px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 15%;
  left: 20%;

  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: 1s;
}

.tooltip.datenschutz:hover .tooltiptext {
  visibility: visible;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 1;
  background: #E6E6E6;        /* final color */
}

.tooltip.drawer:hover {
   background:black;          /* drawer open color */
}

.tooltip.drawer:hover .tooltiptext {
  visibility: visible;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  bottom: 90%;
  opacity: 1;
  background: white;          /* final color */
}

.tooltip.news:hover .tooltiptext {
  visibility: visible;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 1;
  background: #E6E6E6;        /* final color */
}

.tooltip .tooltiptext.drawer a {
  display: block;
  background-color: var(--navbar-color-background);
  color: black;
  text-align: center;
  padding: 7px 0px;    /* top/bottom left/right*/
  text-decoration: none;
  width: 80%;
  margin: 0 10% 10% 10%;     /* top right bottom left*/
  border-radius: 5px;
  font-size: 70%;
}

.tooltip .tooltiptext.news a {
  /* display: inline-block; */  /* prevent linebreak after link */
  /* text-decoration: underline; */
  display: block;
  background-color: var(--navbar-color-background);
  color: black;
  text-align: center;
  padding: 10px 0px;    /* top/bottom left/right*/
  text-decoration: none;
  width: 60%;
  border-radius: 10px;
  margin: 0 20% 10% 20%;     /* top right bottom left*/
  font-size: 70%;
}

th {
   text-align: center;
   border: 2px solid black;
}

td {
   text-align: center;
   border: 1px solid black;
}






#arrowAnim {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 25px;
  height: 25px;
  border: 8px solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
}


.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite;
          animation: slide 4s linear infinite;
  animation-direction: reverse;
}

.delay1 {
  -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.delay3 {
  -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(100px); }
   20% { opacity:1; transform: translateX(40px); }
   80% { opacity:1; transform: translateX(-40px); }
  100% { opacity:0; transform: translateX(-100px); }
}
@keyframes slide {
    0% { opacity:0; transform: translateX(100px); }
   20% { opacity:1; transform: translateX(40px); }
   80% { opacity:1; transform: translateX(-40px); }
  100% { opacity:0; transform: translateX(-100px); }
}