.head-item {
    text-align: center;
  a {
    text-decoration: none; 
    font-size: 2.5em;
    line-height: 1.5em; 
    text-shadow: 2px 2px 8px #433a3a;
   }
  a:hover {
    text-decoration: underline; 
  }

}



  .line {
 border-color: black;
 border-color: var(--h-bg-color);
 margin: 20px auto;
 border-style: solid;
 border-width: medium;
 border-radius: 5px;
 width: 70%;
}

  hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
  background-color:#ff0000;
  border-color:#ff0000;
  }
:root {
  --blue: #0000ff;
  --white: #ffffff;
  --red: #ff0000;
  --yellow: #d7d700;

  --font-color: #101010;
  --p-bg-color: #eff6ff;
  --h-bg-color: #1e40af;
  --st-az-color: #fbe1a6;
  --st-color: #aff7b1;
  --citation-color: #d1d1ff;
}
/* faustina-regular - latin */
@font-face {
  font-family: 'Faustina';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/faustina-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/faustina-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/faustina-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/faustina-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/faustina-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/faustina-v16-latin-regular.svg#Faustina') format('svg'); /* Legacy iOS */
}

/* faustina-700 - latin */
@font-face {
  font-family: 'Faustina';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/faustina-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/faustina-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/faustina-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/faustina-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/faustina-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/faustina-v16-latin-700.svg#Faustina') format('svg'); /* Legacy iOS */
}

/* faustina-italic - latin */
@font-face {
  font-family: 'Faustina';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/faustina-v16-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/faustina-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/faustina-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/faustina-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/faustina-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/faustina-v16-latin-italic.svg#Faustina') format('svg'); /* Legacy iOS */
}

/* faustina-700italic - latin */
@font-face {
  font-family: 'Faustina';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/faustina-v16-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/faustina-v16-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/faustina-v16-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/faustina-v16-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/faustina-v16-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/faustina-v16-latin-700italic.svg#Faustina') format('svg'); /* Legacy iOS */
}

.p-header {
  margin-left: 0;
  margin-right: 0;
 background-color: var(--p-bg-color);
}
   .header-line-1{
    margin-top: 0em;
    padding-top: 0em;
    padding-bottom: 0.1em;
    font-size: 1em;
    text-align: center;
   color: var(--p-bg-color);
   background-color: var(--h-bg-color);
  }
.p-footer {   
margin-left: 0;   
margin-right: 0;   
background-color: var(--p-bg-color);
}
  .footer-line-1{
   position: fixed;        /* Fix position relative to viewport */
    bottom: 0;              /* Stick to bottom */
    left: 0;                /* Align to left edge */
    width: 100%;            /* Span full width */

    padding-bottom: 0.2em;
    font-size: 1em;
    text-align: center;
    line-height: 1.5em;
   color: var(--p-bg-color);
   background-color: var(--h-bg-color);

  /* Unvisited links */
  a:link {
    color: var(--p-bg-color);
  }
  /* Visited links */
  a:visited {
    color: var(--p-bg-color);
  }
  /* Links on hover */
  a:hover {
  color: var(--p-bg-color);
  }
  /* Active links (when clicked) */
  a:active {
    color: var(--p-bg-color);
  }
 

   }
 
  .l-element{
  padding-bottom: 2em;
  }

.p-body {
    margin-left: 15%;
    margin-right: 15%;
   font-family: "Faustina";
   font-style: normal;
   font-weight: 300;
   line-height: 1.3em;
   font-size: 1em;
   color: var(--font-color);
   background-color: var(--p-bg-color);
    }
p {
    text-align: justify;
    line-height: 1.3em;
   }
 .line-100{
  font-size: 6em;
  line-height: 1em;
  text-align: center;
  } 
.menu-item {
    font-size: 1.4em;
    line-height: 1.6em; 
   text-shadow: 2px 2px 8px #433a3a;

  a {
    text-decoration: none; 
  }
  a:hover {
  text-decoration: underline; 
  }
}
  h1 {
    text-shadow: 2px 2px 8px #433a3a;
    margin-top: 1em;
    text-align: center;
    font-size: 2em;
    line-height: 1.3em;
   }
  h2 {
    text-shadow: 2px 2px 8px #433a3a;
    margin-top: 1em;
    text-align: center;
    font-size: 1.75em;
    line-height: 1.3em;
    }
  h3 {
    text-shadow: 2px 2px 8px #433a3a;
    margin-top: 1em;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.3em;
     }
  h4 {
    text-shadow: 2px 2px 8px #433a3a;
    margin-top: 1em;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.3em;
     }
.pr-left {
    width: 40%;
    text-align: left;
    font-size: 0.9em;
  }
  .pr-center {
    width: 20%;
    text-align: center;
    font-size: 1em;
  }
  .pr-right {
    width: 40%;
    text-align: right;
    font-size: 0.9em;
  }
.ws-picture{
    display: block;
    margin-left: auto;
    margin-right: auto;
   width: 100%;
   opacity: 1;
   height: auto;
  }
  @media screen and (min-width: 120em) and (orientation: landscape) {
    .ws-picture{
      width: 35em;
    }
  }
  @media screen and (min-width: 60em) and (orientation: landscape) {
    .ws-picture{
      width: 35em;
    }
  }
  .s-picture{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: #d03030;
   opacity: 1;
}
.s-picture-a{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
   margin-bottom: 1em;
   border: 1.5em solid transparent;
   opacity: 1;
}
.s-picture-a:hover {
  box-shadow: 0.5em 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.5);
  width: 100%;
}
.s-picture-b{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    opacity: 1;
}
.s-picture-b:hover {
  box-shadow: 0.5em 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.5);
  width: 100%;
}
.s-picture-c{
    display: block;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2.5em;
    box-shadow: 0.5em 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.5);
   opacity: 1;
}
.s-picture-end{
    display: block;
    margin-top: 3em;
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
}
  .s-picture-text{
    font-size: 1em;
    line-height: 1em;
    text-align: center;
  }
  .s-reference{
    font-size: 1em;
    text-align: left;
    line-height: 0.2em;
 }
  .statement{
    font-size: 1em;
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    background-image: linear-gradient(0deg, var(--st-color) , var(--p-bg-color));
 }
  .statement-sub{
    text-align: right;
 }
  .statement-az{
    font-size: 1em;
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    background-image: linear-gradient(0deg, var(--st-az-color), var(--p-bg-color));
  }
  .statement-az-sub{
    text-align: right;
  }
  .citation{
    font-size: 1em;
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
   background-image: linear-gradient(0deg, var(--citation-color) , var(--p-bg-color));
  }
  .citation-sub{
    text-align: right;
  }
.item-red::marker{
	color: var(--red);
}
.item-yellow::marker{
	color: var(--yellow);
}
.item-blue::marker{
	color: var(--blue)
}
.button {
  font: bold 2em Faustina;
  text-decoration: none;
  background-color: #b0c6fa;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
 margin-bottom: 2em;
}
button {
background: none!important;
  border: none;
  margin-top: 2em;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
button-main {
background: none!important;
  border: none;
  margin-top: 2em;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
  /* Text style as h1*/
   .ts-h1 {
   display: block;
   text-align: center; 
    text-shadow: 2px 2px 8px #433a3a; 
    padding-top: 1em; 
    padding-bottom: 1em; 
   font-size: 2em; 
   font-style: bold;
   font-weight: 300;
    line-height: 1.3em; 
    width: 100%;
      }

.first-letter {
  font-size: 35px;
  line-height: 70px;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-yellow {
color: yellow;
}
.color-red {
color: red;
}

.pi-cd {
color: "red";
}
 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 
div + div {
    clear: both;
}
p {
    line-height: 1.3em;
   }
.menu-title {
    font-size: 2em;
    margin: 0.4em 0;
}
div.seperator {
    width: 7.5em;
    background-color: ##eeeeee; 
    height: 0.17em;
    margin-left: -1.8em;
}
.menu-list > div {
    border-bottom: 0.07em solid #ededed;
    padding: 1.5em 0em;
} 
.menu-list > div:last-child {
    border: unset;
}
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
summary {
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 2px 2px 8px #433a3a;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;
    transition: all 0.3s ease;
}
summary:hover {
     color: var(--h-bg-color);
}
details[open] summary ~ * {
    animation: sweep 1s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; margin-left: -10px}
    100%  {opacity: 1; margin-left: 55px}
}
details[open] summary {
    /* color: #e31b1b; */
}
details[open] p {
    border-left: 2px solid #e31b1b;
    margin-left: 55px;
    padding-left: 25px;
    opacity: 100;
    transition: all 3s ease;
}
details[open] summary:after {
    content: ">";
    font-size: 1em;
    margin: -33px 0.35em 0 0;
    font-weight: 200;
}
.menu-body {
    width: 80%;
padding-left: 25%;
   /*  margin: 4em auto; */
   /*   border-radius: 0.2em; */
    /* padding: 5em; */
  /*  padding: 1em; */

}
.menu-list {
    width: 55em;
    margin: 1em auto;
    padding: 2em 0;
}
.menu-item {
    font-size: 1.4em;
    line-height: 1.6em; 
    font-color: #0;
/*   font-weight: bold;  */
  text-shadow: 2px 2px 8px #433a3a;
}
summary::-webkit-details-marker {
    display: none;
}
summary:after {
    background: transparent;
    border-radius: 0.3em;
    content: "#";
    float: left;
    font-size: 1em;
    font-weight: bold;
    margin: -0.3em 0.65em 0 0;
    padding: 0;
    text-align: center;
    width: 25px;
    text-shadow: 2px 2px 8px #433a3a;
}
.bl{
  float:left;
  font-size:4.5rem;
  color:var(--h-bg-color);
  text-shadow: 2px 2px 8px #433a3a;
  line-height:3rem;
  text-transform:uppercase;
  box-sizing:border-box;
  margin-right:4px;
  vertical-align:text-top;
}