/* ************************************************ */
/* Generic Design Css: user.css */

html {
	overflow: auto;
}

.header {
    background: rgb(0,36,0);
/*	background: linear-gradient(90deg, rgba(190,36,100,1) 0%, rgba(190,100,0,1) 35%, rgba(90,90,170,1) 100%); */
}

.top-a {
  background-color: #484800;
  background-color: metal-gold;
}

.main-top {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  background-color: #484800;
  background-color: #392500;
/*  background: rgb(212,175,55); */
}  

/*
.main-bottom {
  background-color: #484800;
}
*/
.sidebar-left {
/*  background-color: #484800; */
  background-color: rgb(0,100,36);
}

.sidebar-right {
/*  background-color: #484800; */
  background-color: rgb(0,100,36);
}

.center {
  display: inline;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*
.breadcrumbs {
  background-color: #484800;
}
.bottom-a {
  background-color: #484800;
}
.bottom-b {
  background-color: #484800;
}
*/
/* 
.container-header {
   position: relative;
   z-index: 10;
   margin-bottom: 20px; */
/* background-color: #484800;
   background-image: linear-gradient(135deg, #585800 50%, #484800 100%); 
   background-color: #ADD8E6;
   background-image: linear-gradient(135deg, #add8e6 0%, #add8e6 100%); */
/*   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}
 
.container-header .mod-menu {
   width: 100%; */
/*   justify-content: normal; 
   color: #ded5d5;
   background-color: #41211B;
   padding: 5;
}
*/
.metismenu {
   background: rgb(0,100,36);
}

.metismenu.mod-menu .mm-collapse {
/*   width: 100%;  */
   background-color: #f0c824;
}
/*
.metismenu.mod-menu .mm-collapse .metismenu-item > a {
    color: #000000;
}
*/
.mm-collapse > li {
    width: 100%;
    color: #9900FF;
    background-color: lightblue;
 /* font-family: cursive;
    font-stretch: 50%; */
    font-weight: bold; 
}

/* submenu bg */
/*
.metismenu.mod-menu .metismenu-item > a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    background-color: #ddd;
    box-shadow: 0 0 0.9em rgba(0, 0, 0, 0.7);
} 

.btn-primary:hover {
  background: rgba(100,212,255,1);
} 
*/
body.site {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
/*  background: transparent; 
    background: rgb(0,36,0); 
	background: linear-gradient(90deg, rgba(190,36,100,1) 0%, rgba(190,100,0,1) 35%, rgba(90,90,170,1) 100%);  
	background: linear-gradient(90deg, rgba(190,90,170,1) 40%, rgba(190,36 10,1) 35%, rgba(190,100,0,1) 80%); */
    background: linear-gradient(.25turn, #333, #333 10%, #eee 75%, #333 75%);
/*	background-image: url("../images/06010001.JPG"); 
	background-image: url("../images/theme_left.jpg"); 
    background-image: url("../images/20230322_093121.jpg"); */
    background-image: url("../images/PA310106.JPG");
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

body.itemid-101 .site-grid {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;  
    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  
/*    background: transparent;   
    background: rgb(0,36,0); 
    background-image: url("../images/logo.jpg");  
    background-image: url("../images/PA310106.JPG");     
     background-image: url("../images/PA310106.JPG"); 
     background-image: url("../images/theme_left.jpg");   */
}
/* 
body.itemid-101 .site-grid .container-component {
    max-width: 1000px;
    max-height: 80%;
    margin-right: auto;
    margin-left: auto;
    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);   
}
*/ 
body.itemid-101 .site-grid .container-sidebar-left {
   max-width: 1600px;
   margin-right: auto;
   margin-left: auto;
/*   background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  
   background-image: url("../images/Mainz 1.JPG");  
   background-image: url("../images/theme_left.jpg");  */
/*   background-repeat: repeat;
   background-clip: border-box;	padding: 40px; 	border: 25px solid red; 	
   border-style: dashed; */
}

body.itemid-101 .site-grid .container-sidebar-right {
   max-width: 1600px;
   margin-right: auto;
   margin-left: auto;
/*   background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);   
   background-image: url("../images/Mainz 1.JPG");  
   background-image: url("../images/theme_left.jpg");  */
/*   background-repeat: repeat;
   background-clip: border-box;	padding: 40px; 	border: 25px solid red; 	
   border-style: dashed; */
}

body.itemid-102 .site-grid .container-component {
   text-align: center;
     background:
	  linear-gradient(
		limegreen,
		transparent
	),
	linear-gradient(
		120deg,
		skyblue,
		transparent
	),
	linear-gradient(
		-90deg,
		coral,
		transparent
	);	
    background-blend-mode: screen;
}
/* 
body.itemid-102 .site-grid {
   background-image: 
     radial-gradient(circle at 28% 44%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 1%,transparent 1%, transparent 73%,transparent 73%, transparent 100%),
     radial-gradient(circle at 81% 65%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 18%,transparent 18%, transparent 77%,transparent 77%, transparent 100%),
     radial- gradient(circle at 51% 45%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 11%,transparent 11%, transparent 12%,transparent 12%, transparent 100%),
     radial-gradient(circle at 10% 56%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 82%,transparent 82%, transparent 90%,transparent 90%, transparent 100%),
     radial-gradient(circle at 42% 35%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 22%,transparent 22%, transparent 77%,transparent 77%, transparent 100%),
     radial-gradient(circle at 26% 86%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 17%,transparent 17%, transparent 52%,transparent 52%, transparent 100%),
     radial-gradient(circle at 52% 88%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 49%,transparent 49%, transparent 70%,transparent 70%, transparent 100%),
     radial-gradient(circle at 62% 41%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 14%,transparent 14%, transparent 45%,transparent 45%, transparent 100%),
     radial-gradient(circle at 54% 59%, hsla(77,0%,3%,0.05) 0%, hsla(77,0%,3%,0.05) 42%,transparent 42%, transparent 86%,transparent 86%, transparent 100%),
     linear-gradient(135deg, hsl(196,0%,96%),hsl(196,0%,96%));
}
*/ 

body.itemid-103 .site-grid {
   text-align: center;
   background: rgb(182,185,181);
}

body.itemid-103 .site-grid .container-component {
   text-align: center;
   background: rgb(32,40,30);
}

body.itemid-104 .site-grid .container-component {
/*    max-width: 1000px;
    max-height: 80%;
    margin-right: auto;
    margin-left: auto; */
    text-align: center;
/*     background-image: radial-gradient ( 
      hsl(200,10%,50%) 29%, 
      hsl(200,10%,60%) 30%,
      hsl(200,10%,90%) 50%,
      hsl(200,10%,60%) 70%,
      hsl(200,10%,90%) 73%
   );  
/*   background-image: radial-gradient (
      shape at top left, 
      color1 0, 
      color2 x%, 
      color3 100%
   );  
   background-image: 
      radial-gradient (
      circle farthest-side  at 200px 50px, 
      hsl(200,10%,50%) 29%, 
      hsl(200,10%,60%) 30%,
      hsl(200,10%,90%) 50%,
      hsl(200,10%,60%) 70%,
      hsl(200,10%,90%) 73% ); */ 
   background: conic-gradient(silver, white, silver, white, silver, white, silver, white, silver, white, silver);  
/*  background-color:#001;
   background-image: radial-gradient(white 15%, transparent 16%),
                     radial-gradient(white 15%, transparent 16%);
   background-size: 60px 60px;
   background-position: 0 0, 30px 30px;  */
/*   background-image: radial-gradient(circle at center center, rgb(233, 255, 32),rgb(176, 209, 39),rgb(118, 163, 47),rgb(61, 116, 54),rgb(3, 70, 61));
   border-image: conic-gradient(#F72746, #DBD5CA, #74486A, #B02DE3, #0B662B, #4A3B72, #F72746); 
   border-image-slice: 1; border-width: 10px; border-style: solid;  */
/*  background: repeating-linear-gradient(190deg, rgba(191,25,149, 0.5) 40px, rgba(30,138,48, 0.5) 80px, rgba(31,112,42, 0.5) 120px, 
               rgba(144,221,14, 0.5) 160px, rgba(152,96,234, 0.5) 200px, rgba(233,231,28, 0.5) 240px, rgba(246,147,9, 0.5) 280px, rgba(191,25,149, 0.5) 300px), 
               repeating-linear-gradient(-190deg, rgba(30,138,48, 0.5) 30px, rgba(31,112,42, 0.5) 60px, rgba(144,221,14, 0.5) 90px, rgba(152,96,234, 0.5) 120px, 
               rgba(233,231,28, 0.5) 150px, rgba(246,147,9, 0.5) 180px, rgba(191,25,149, 0.5) 210px, rgba(30,138,48, 0.5) 230px), 
               repeating-linear-gradient(23deg, rgb(191,25,149) 50px, rgb(30,138,48) 100px, rgb(31,112,42) 150px, rgb(144,221,14) 200px, rgb(152,96,234) 250px, 
               rgb(233,231,28) 300px, rgb(246,147,9) 350px, rgb(191,25,149) 370px);  */
} 
  
body.itemid-105 .site-grid .container-component {
    max-width: 1000px;
    max-height: 80%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  
}
body.itemid-105 .site-grid {
 /*   background-image:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%,
               rgba(221, 221, 221, 0.49) 10%),
               repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%); */
    background-color:#556;
    background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
                      linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
                      linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
                      linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
                      linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
                      linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

body.itemid-106 .site-grid .container-component {
    max-width: 1600px;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
 /* background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  */
    background:
	  linear-gradient(
		limegreen,
		transparent
	),
	linear-gradient(
		90deg,
		skyblue,
		transparent
	),
	linear-gradient(
		-90deg,
		coral,
		transparent
	);
	
    background-blend-mode: screen;
}

/* Zufallsbild .itemid-115    { */
.random-image {
   max-width: 30%;
   margin-right: auto;
   margin-left: auto;  
   text-align: center;
   justify-content: center;
   background: rgb(237,222,173);
/*   border: 29px solid #ff0000; */
   border: 10px solid transparent;
   border-image-source: url("images/rahmen.webp");
   border-image-width: 43px;
   border-image-outset: 3px;
   border-image-slice: 32;
   border-image-repeat: stretch;
   box-shadow: 0 15px 15px 1px rgba(0, 0, 0, 0.3), 15px 0 15px 1px rgba(0, 0, 0, 0.3);
   border-radius: 0px;
}

.itemid-123 .site-grid  {
   margin-right: auto;
   margin-left: auto;  
   text-align: center;
   background: rgb(212,175,55);
}

.itemid-123 .site-grid .container-component  {
   max-width: 80%;
   margin-right: auto;
   margin-left: auto;  
   text-align: center;
   justify-content: center;
   background: rgb(237,222,173);
}

body.itemid-124 .site-grid .container-component {
   text-align: center;
}

body.itemid-125   {
/*   background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);   */
/*     background-image: url("../images/Kiedrich.JPG"); 
     background-image: url("../images/Mainz 1.JPG"); */
/*  background-image:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%,
               rgba(221, 221, 221, 0.49) 10%),
               repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%); */
    margin-right: auto;
    margin-left: auto;  
    text-align: center;
    justify-content: center;
    background-image: url("../images/Cats.jpg");   
}
  
body.itemid-125 .site-grid .container-component {
   text-align: center;
   background: rgb(216, 226, 227);
}

body.itemid-153 .site-grid {
   text-align: center;
   background: rgb(212,175,55);
}

body.itemid-153 .site-grid .container-component {
   text-align: center;
   background: rgb(237,222,173);
}
/*
body.itemid-166 .site-grid {
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
    background: transparent; 
    background: rgb(0,36,0); */
/*  background-image: url("../images/Kiedrich.JPG"); */
/*  background-image: url("../images/06010001.JPG"); */
/*    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%); */
/*    background: linear-gradient(90deg, rgba(190,36,100,1) 0%, rgba(190,100,0,1) 35%, rgba(90,90,170,1) 100%); */
/*    box-shadow: 101px -56px 83px 1px rgba(187,224,230,0.72) inset; 
                -webkit-box-shadow: 101px -56px 83px 1px rgba(187,224,230,0.72) inset;
                -moz-box-shadow: 101px -56px 83px 1px rgba(187,224,230,0.72) inset;
}
*/
body.itemid-166 {
   margin-right: auto;
   margin-left: auto;  
   text-align: center;
   justify-content: center;
/* background: rgb(113, 95, 99); */ 
/*   background-image: url("../images/IMG_1506.JPG");  */
   background-image: url("../images/IMG_3626.JPG");  
}

body.itemid-166 .site-grid .container-component {
   text-align: center;
   background: rgb(113, 195, 199);
}

body.itemid-167 .site-grid {
    color: white;
    background: transparent; 
    background: rgb(0,36,0); 
    background-image: url("../images/IMG_3358.JPG");  
}
/*
body.itemid-167 .site-grid {
  background-attachment: fixed;
  opacity: 0.7;
  background-image: url("../images/theme_left.jpg");
  background-size: 100vw;
}
*/
/*
body.itemid-102 .article-details Span>a, body.itemid-102 .article-details Span>a:focus, body.itemid-102 .article-details Span>a:active {
    color: #000000;
}
body.itemid-102 .article-details Span>a:hover{
    color: blue;
}
*/

body.itemid-196 .site-grid {
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;  
/*    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  */
    background-image:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%,
               rgba(221, 221, 221, 0.49) 10%),
               repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%); 
}

body.itemid-200 .site-grid {
/*  max-width: 1600px;
    margin-right: auto;
    margin-left: auto; */
    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  
/*    background: transparent;   
    background: rgb(0,36,0);     */
/*    background-image: url("../images/06070042a.jpg");  */
    background-image: url("../images/theme_left.jpg");   
}

body.itemid-200 .site-grid .container-component {
/*     background-image: -webkit-radial-gradient(250px 0,ellipse farthest-corner, white 30%,teal 70%);
     background-image: -moz-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
     background-image: -ms-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
     background-image: -o-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
     background-image: radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%); */
     color: white;
     background: transparent; 
     background: rgb(0,36,0); 
}

body.itemid-201 .site-grid {
/*  max-width: 1600px;
    margin-right: auto;
    margin-left: auto; */
    background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  
/*    background: transparent;   
    background: rgb(0,36,0);     */
/*    background-image: url("../images/06070042a.jpg");  */
      
}

body.itemid-xxx .site-grid .container-component {  
     background: repeating-linear-gradient(
		10deg,
		#009393,
		#009393 50%,
		#00585f 50%,
		#00585f
	 );
	 background-size: 100% 2em;
}

body.itemid-199 .site-grid .container-component {  
 /*1 background-image: radial-gradient(circle at center center, rgb(233, 255, 32),rgb(176, 209, 39),rgb(118, 163, 47),rgb(61, 116, 54),rgb(3, 70, 61)); */
 /*2 background-color: #7ed6df;
     background-image: linear-gradient(315deg, #7ed6df 0%, #000000 74%); */
 /*3 background-image: linear-gradient(to right, #574959, #8FD4B2);  */
 /*4 background: radial-gradient(ellipse closest-corner at 50% 50%, #2CB030 13%, #43359E); */
 /*5 background: repeating-linear-gradient(190deg, rgba(188,188,168, 0.5) 40px, rgba(45,166,47, 0.5) 80px, rgba(10,65,90, 0.5) 120px, 
     rgba(119,121,95, 0.5) 160px, rgba(50,14,71, 0.5) 200px, rgba(74,245,75, 0.5) 240px, rgba(177,27,31, 0.5) 280px, rgba(188,188,168, 0.5) 300px), 
     repeating-linear-gradient(-190deg, rgba(45,166,47, 0.5) 30px, rgba(10,65,90, 0.5) 60px, rgba(119,121,95, 0.5) 90px, rgba(50,14,71, 0.5) 120px, 
     rgba(74,245,75, 0.5) 150px, rgba(177,27,31, 0.5) 180px, rgba(188,188,168, 0.5) 210px, rgba(45,166,47, 0.5) 230px), 
     repeating-linear-gradient(23deg, rgb(188,188,168) 50px, rgb(45,166,47) 100px, rgb(10,65,90) 150px, rgb(119,121,95) 200px, rgb(50,14,71) 250px, 
     rgb(74,245,75) 300px, rgb(177,27,31) 350px, rgb(188,188,168) 370px); */
     border-radius: 63px;
     background: linear-gradient(315deg, #cacaca, #f0f0f0);
     box-shadow:  -27px -27px 52px #747474,
                   27px 27px 52px #ffffff;
  background: repeating-conic-gradient(#52A60F 0deg, #FFFFFF 45deg, #52A60F 90deg);
}
 
body.itemid-288 .site-grid .container-component {
    max-width: 1600px;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
 /* background-image: linear-gradient(135deg, #add8e6 50%, #add8e6 50%);  */
    background:
	  linear-gradient(
		limegreen,
		transparent
	),
	linear-gradient(
		90deg,
		skyblue,
		transparent
	),
	linear-gradient(
		-90deg,
		coral,
		transparent
	);
	
    background-blend-mode: screen;
}

.metal-gold {
  color: rgba(0, 0, 0, 0.72);
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 0 #ffffff;
  box-shadow:  2px 2px 0.5em rgba(122, 98, 0, 0.55),
}

/*
.card {
  background:transparent;
  border:none;
}
.card {
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}
.main-top.card {
   background: #e1e9f5;
   object-fit: fill;
}
*/

.footer {
   background: rgb(33,36,10);
   margin-left: auto;
   margin-right: auto;
   background: linear-gradient(90deg, rgba(190,36,100,1) 0%, rgba(190,100,0,1) 35%, rgba(90,90,170,1) 100%);   
}

.footer .grid-child {padding: 0.5em}  

.footer div.mod-footer {
}


@media (min-width: 1024px) {
    footer div.mod-footer {
        display: inline-flex;
    }
}
/*
footer div.mod-footer {
    display: block;  
}
 
footer div.mod-footer div {
    margin: 2rem;
}
*/

/* TEST */
/*
@media only screen and (min-width: 992px) {
  body.wrapper-fluid .site-grid {        
  grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ."
    ". top-b top-b top-b top-b ." ". side-l side-r comp comp ." ". bot-a bot-a bot-a bot-a ." 
    ". bot-b bot-b bot-b bot-b .";
  }
    body.wrapper-fluid .site-grid {
    grid-template-columns: [full-start] minmax(0,auto) [main-start] repeat(2, 12.5em) repeat(2, 1fr) [main-end] minmax(0,auto) [full-end];
  }
}
*/
/*
@media (min-width: 1024px) {
    footer div.mod-footer {
        display: inline-flex;
    }
}

.item-image {
  border: 29px solid #ff0000;
}


.v-line {
 border-right: thick solid #000;
 height:100%;
 right: 100%;
 position: absolute;
 color: rgb(0, 0, 0);
}

.counter {
	height: 30px; 
	margin-top: 1px;
	margin-left
}	
*/

div.centerplayer {
margin-right: auto;
margin-left: auto;
}

figure {
  border-top: none;
  padding-top: 0;
}

figcaption {
  width: 500px;
  margin:0 auto;
  padding: 0.10em;
  border: thin silver solid;
  border-bottom:thin silver solid;
  background-color: rgb(231, 255, 255);
  color: red;
  font-style: sans-serif;
  font-size : 22px;
  text-align: center;
}

figcaption1 {
  width: 400px;
  margin:0 auto;
  padding: 0.10em;
  border: thin silver solid;
  border-bottom: thin silver solid;
  background-color: rgb(255, 255, 255);
  color: red;
  font-style: sans-serif;
  font-size : 22px;
  text-align: center;
}

@charset "utf-8";
/* CSS Document */
.slidecontainer {
    width: 650px;
	height: 50px;
	display:flex;
	justify-content: space-around;
	align-items: center;
	background-color:#514F6B;
}

.custom-select {
font-family: Arial;
background-color: #999;
} 

.slider {
    -webkit-appearance: none;
    height: 10px;
    background: #A7A5A5;
    outline: none;
}

.slider:hover {
background: #6E6E6E;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
	border: 2px #000 solid;
    background: #3D3D3D;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
	border: 2px #000 solid;
    background: #3D3D3D;
    cursor: pointer;
}
.pos{width: 200px;}
.vol{width: 100px;}

option:nth-child(odd) {
    background-color: cyan;
	font-size:20px;
    font-weight:500;
}

option:nth-child(even) {
    background-color: lightgreen;
	font-size:20px;
    font-weight:500;
}

option:checked {
    background-color: orange;
} 
*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted black;
  color: #FFFFFF;
  background: #333333;
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 280px;
  top: 250px;
  left: 75%;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-family: Courier;
  background-color: orange;  
/*  background-color: transparent; */

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img {
width:90px
}

#bild_a .tooltiptext {
  visibility: hidden;
  width: 280px;
  top: 250px;
  left: 75%;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-family: Courier;
  background-color: orange;  
/*  background-color: transparent; */

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

/*
.btn-primary {
  background: rgba(119,9,121,1);
}

.btn-primary:hover {
  background: rgba(0,212,255,1);
}

/* ==================================== */
/* TRENNSTRICHE */
hr {
width: 100%;
height: 20px;
background-color: yellow;
margin-right: auto;
margin-left: auto;
margin-top: 1px;
margin-bottom: 1px;
border-width: 4px;
border-color: red;
}

hr.x {
width: 100%;
height: 20px;
background-color: white;
margin-right: auto;
margin-left: auto;
margin-top: 1px;
margin-bottom: 1px;
border-width: 2px;
border-color: yellow;
}

/* Red border */
hr.new1 {
  border-top: 1px solid red;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Dotted red border */
hr.new3 {
  border-top: 1px dotted red;
}

/* Thick red border */
hr.new4 {
  border: 1px solid red;
}

/* Large rounded green border */
hr.new5 {
  border: 10px solid green;
  border-radius: 5px;
}

hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 

hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

#galerie,
li {
	margin: 0.1em;
	padding: 0.1em;
}

li {
	display: inline-block;
	list-style-type: none;
	width: 45%;
}

img {
	padding: 0;
	margin: 0;
	width: 100%;
	/* Bild passt sich an verfügbaren Raum im li ann */
}

a {
	padding: 0.1em;
}

a:focus,
a:hover {
	background: #09c;
}
/* Large screens */

@media all and (min-width: 35em) {
	li {
		width: 10em;
	}
	.details {
		position: absolute;
		right: 10%;
		top: 10%;
		background-color: #F1F3F4;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		padding: 1em 1em .2em;
		width: 25em;
		max-height: 20em;
		overflow: auto;
		display: none;
	}
	.details img {
		width: 90%;
	}
	.details:target {
		display: block;
	}
	.close {
		width: 0;
		height: 0;
		border: 0;
		text-shadow: none;
		color: transparent;
	}
	.close::after {
		position: absolute;
		top: 1em;
		right: 1em;
		content: "X";
		color: white;
		background: #c32e04;
		font: bold 1em/150% Georgia, Times, serif;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		display: block;
		text-align: center;
		width: 1.5em;
		height: 1.5em;
		padding: 0.2em 0 0 0em;
	}
}

.gallery {
	--size: 10em;
	/* control the size */
	
	--gap: 1em;
	/* control the gap */
	
	--zoom: 2;
	/* control the scale factor */
	
	display: grid;
	gap: var(--gap);
	width: calc(3*var(--size) + 2*var(--gap));
	aspect-ratio: 1;
	grid-template-columns: repeat(3, auto);
}

.gallery figure {
	margin: 0;
	padding: 0;
	position: relative;
}

.gallery figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
	opacity: 0;
	color: white;
	background: rgba(0, 0, 0, 0.3);
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
	opacity: 1;
}

.gallery > figure img {
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: grayscale(80%);
	transition: .35s linear;
}

.gallery figure:hover img,
.gallery figure:focus img {
	filter: grayscale(0);
	width: calc(var(--size)*var(--zoom));
	height: calc(var(--size)*var(--zoom));
}
/*
body {
    color: white;
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-content: center;
} */
/* Polaroid-Bildergalerie */
@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
#galerie1 {
/*	box-sizing: border-box;
	background-color: silver;
	background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px,                           transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
	background-size: 58px 58px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	padding: 4em 6em; */
  
   background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
               radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0,
               radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B;
   background-size: 110px 200px;
   background-repeat: repeat-x;
}
/* weitere Muster mit linear-gradient unter: http://lea.verou.me/css3patterns/   */

#galerie1 figure {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	height: 15em;
	margin: 0 0 1em 2em;
	overflow: hidden;
	padding: 0;
	width: 15em;
	transition: all 0.25s ease-in;
}

#galerie1 figure img {
	width: 15em;
	height: 15em;
}

#galerie1 figure:hover,
#galerie1 figure:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	width: 15em;
	z-index: 2;
	transform: scale(2);
}

#galerie1 figcaption {
	color: #333;
	font: cursive 10px/150%;
	font-family: "Reenie Beanie", cursive;
	position: relative;
	text-align: center;
	width: 15em;
}

#galerie1 figure:nth-child(3n-2):hover,
#galerie1 figure:nth-child(3n-2):focus {
	transform: scale(2) rotate(-2.5deg);
}

#galerie1 figure:nth-child(5n):hover,
#galerie1 figure:nth-child(5n):focus {
	transform: scale(2) rotate(2.5deg);
}

#galerie1:after {
	clear: both;
	content: " ";
	display: block;
}

@media only screen and (max-width: 75em) {
/*	body {
		width: 100%;
		margin: 2% 0;
		padding: 5%;
	} */
	#galerie1 {
		width: 850px;
		margin: 100px auto;
	}
}

@media only screen and (max-width: 50em) {
	#galerie1 {
		width: 100%;
		margin: 100px auto;
	}
}

/* LightGallery   */
.lg-custom-thumbnails {
    &.lg-outer {
        width: auto;
        // Set space for the container to occupy thumbnails
        right: 225px;

        // Add some spacing on the left to match with the right hand side spacing
        left: 10px;

        .lg-thumb-outer {
            // Set the position of the thumbnails
            left: auto;
            top: 0;
            width: 225px;
            bottom: 0;
            position: fixed;
            right: 0;

            // Reset max height
            max-height: none;

            // Customize the layout (Optional)
            background-color: #999;
            padding-left: 5px;
            padding-right: 5px;
            margin: 0 -10px;
            overflow-y: auto;

            // Update transition values
            // By default thumbnails animates from bottom to top
            // Change that from right to left.
            // Also, add a tiny opacity transition to look better
            transform: translate3d(30%, 0, 0);
            opacity: 0;
            will-change: transform opacity;
            transition: transform 0.15s cubic-bezier(0, 0, 0.25, 1) 0s, cubic-bezier(
                        0,
                        0,
                        0.25,
                        1
                    ) 0.15s;
        }

        &.lg-thumb-open {
            .lg-thumb-outer {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        // Add hove effect (Optional)
        .lg-thumb-item {
            filter: grayscale(100%);
            will-change: filter;
            transition: filter 0.12s ease-in, border-color 0.12s ease;
            &:hover,
            &.active {
                filter: grayscale(0);
                border-color: #545454;
            }
        }

        .lg-thumb {
            padding: 5px 0;
        }
    }
}

/** Funnygirl & Igor **/

.gallery2 a > img {
	width: 250px;
	display: block;
}

.gallery2 a {
	text-decoration: none;
 	display: inline-block; 
	border: 2px silver groove;
    background-color: silver;
    padding: 10px;
	border-width: 1em; 
	border-spacing: 5px 1rem;
}

.gallery2 a:focus {
	outline: 2px solid black;
}

#gallery2-fullview {
    display: none;
	position: fixed;  
	top: 0;
	left: 0;
 	width: 100vw;
	height: 100vh; 
	padding: 5vh 5vw 8vh 5vw;
	background-color: #0008;
	box-sizing: border-box;
}

#gallery2-fullview.visible {
	display: block;
}

#gallery2-fullview figure {
	border: thin solid #aaa;
	margin: 20;
    margin-top: 100px;
	box-sizing: border-box;
	width: 90%;
	height: 90%;  
    background: #ccc;  
/*  background: #be4e20; */
}

#gallery2-fullview img {
	display: block;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#gallery2-fullview figcaption {
	font-style: italic;
	text-align: center;
	background-color: white;
}

#gallery2-fullview button {
	position: absolute;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	background: transparent no-repeat center;
	color: transparent;
	--fill: none;
	--stroke: white;
}

#gallery2-fullview button[value=close] {
 	top: 10;
 	right: 10rem; 
	--fill: firebrick;
}

#gallery2-fullview button[value=close]:hover,
#gallery2-fullview button[value=close]:focus {
	--fill: red;
}

#gallery2-fullview button[value=shuffle] {
	top: 10;
	right: 4rem;
	--fill: firebrick;
}

#gallery2-fullview button[value=shuffle]:hover,
#gallery2-fullview button[value=shuffle]:focus {
	--fill: red;
}

#gallery2-fullview button[value=play] {
	top: 10;
	right: 7rem;
	--fill: firebrick;
}

#gallery2-fullview button[value=prev],
#gallery2-fullview button[value=next] {
	top: 2rem;
	width: 4rem;
	height: calc(100% - 2rem);
}

#gallery2-fullview button[value=prev] {
	left: 5vw;
}

#gallery2-fullview button[value=prev]:hover,
#gallery2-fullview button[value=prev]:focus {
	--stroke: gold;
}

#gallery2-fullview button[value=next] {
	right: calc(5vw + 13.5rem);
}

#gallery2-fullview button[value=next]:hover,
#gallery2-fullview button[value=next]:focus {
	--stroke: skyblue;
}

/** Herz **/

.css-herz {
  display: inline-block;
  width: 122px;
  height: 122px;
/*  border: 1px solid silver; */

  position: relative;
  left: 40px;

  margin-top: 50px;
  margin-left: 50px;

  color: white;
  font-size: 2em;
}

.css-herz:before, 
.css-herz:after {
  content: "";  /* ohne Inhalt */
  background-color: red;
  width: 80px;
  height: 120px;
  position: absolute;
    
  text-align: center;

  border-radius: 40px 40px 0 0;
  
  transform-origin: 0 100%; 
  transform: rotate(-45deg);  
}
    
.css-herz:before {
  left: 80px;
}    

.css-herz:after {
  content: "";  /* ohne Inhalt */
  background-color: hsla(0, 50%, 80%, .6); 
  transform: rotate(45deg);    
  transform-origin: 100% 100%;
    
  border-radius: 60px 40px 0 0;    
}

div#nav {
    display: block !important;
}

.mod_navigation li.trail ul.level_2, .mod_navigation li.active ul.level_2, .mod_navigation li:hover ul.level_2 {display:block;}