.breadcrumb-item:hover .dropdown-menu {
    display: block;
}

#geaendert.show {
    display: block;
}
#geaendert.show::before {
    display: block;
    content: "";
}

#geaendert {
    display: none;
    float: right;
    font-size: small;
    color: #666;
}

#geaendert::before {
    display: none;
    content: "Geändert: ";
}
#hinweise {
    display: block;
    padding: 2rem 5% 2rem 5%;
    background: linear-gradient(to bottom, #eee, #fff)
}

.selected>a {
    background-color: #ccc;
}

span.dots {
    color: #ccc;
}

span.match {
    background-color: yellow;
}

.navbar .nav-item .dropdown-menu { display: none; }
.navbar .nav-item:hover .dropdown-menu { display: block; }
.navbar .nav-item .dropdown-menu { margin-top:0; }

a.nolink {
    text-decoration: none;
    color: black;
}

a.nolink:hover {
    text-decoration: none;
    color: black;
}


.navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    }

.dropdown-item {
    padding: .1rem 1rem;
}

.wbox, .box {
    border: 1px dotted;
    font-size: 1rem;
    padding: 1rem;
    width: 12rem;
}

.box {
    display: inline-block;
    vertical-align: top;
    background: linear-gradient(
        to bottom,
        #ddd,
        #fff)
    
}

.wbox {
    width: 100%;
    border: 0;
}

.ibox {
    display: inline-block;
    vertical-align: bottom;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem;
    width: 15rem;
    min-height: 9rem;
    text-align: left;
}

.boxheader {
    font-weight: bold;
    font-size: 1.15rem;
    padding-bottom: 0.2rem;
}

/* input, button {
    border: 1px solid;
    height: 2rem;
    font-size: 1rem;
}

button {
    height: 2rem;
    width: 2rem;  
    font-weight: bold;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    cursor: pointer;
}
*/

.circle, .circle1, .circle2 {
    height: 4rem;
    width: 4rem;  
    font-weight: bold;
    font-size: 2.6rem;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    cursor: pointer;
}

.circle1 {
    background-image: url('./what_01.png');
    background-repeat: no-repeat;
    background-position: center; 
}

.circle2 {
    background-image: url('./what_02.png');
    background-repeat: no-repeat;
    background-position: center; 
}

.index-block {
    width: 200px;
    height: 200px;
    margin: 3px;
    padding: 5px;
    float: left;
    border: 1px solid #ddd;
    background-color: #eee;
    text-align: bottom;
}

.index-block h2 {
    font-size: small;
    font-weight: bold;
}

.index-menu {
    display: none;
}

a.icon-pdf {
    background-image: url(/static/filetype-pdf.svg);
    opacity: 1;
    cursor: pointer;
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 1.5rem; /* Adjust according to image size to push text across. */
  
}

a.icon-pdf.no-icon {
    background-image: none; /*url(/static/1px.gif);*/
    padding-left: 0px;
}

.KulturServerGraz {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(/static/ksg-home.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    vertical-align: baseline;
    margin-top: 2px;
}

#menufull {
    /*float: left; 
    font-size: 2.2rem; 
    font-weight: 400;
    color: black;
    padding-top: 0.5rem;
    cursor: pointer;
    display: none;*/


    float: left;
    width: 20px;
    height: 20px;
    /*background-image: url(/static/settings.png);*/
    background-image: url(/static/list.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;

}
#menuclose {
    float: right;
    width: 2rem;
    height: 2rem;
    background-image: url(/static/x-circle-fill.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    margin-top: 0.5rem;   
    margin-right: 0.5rem;
}

#menusuche {
    font-weight: 400;
    color: white;
    cursor: pointer;  
}
#menusuche a {
    color: white !important;
}

#nav {
    display: none;
    padding: 12px;
    font-size: 13pt;
}

#nav.show {
    display: block;
    position: absolute;
    padding: 3rem;
    top: 0px;
    right: 0px;
    width: 50%;
    min-height: 2000px;
    background-color: #ddd;
    animation-duration: 1s;
    animation-name: navslidein;
    border-left: 1px solid black;
}
  
  @keyframes navslidein {
    from {
      margin-right: -50%;
      width: 50%;
    }
  
    to {
      margin-right: 0%;
      width: 50%;
    }
  }

#nav::backdrop {
    background-color: salmon;
  }

a {
    cursor: pointer;
}

@media screen and ( max-width: 995px ) {
    #xband2 #graz-logo  {display: none !important;} 
    #band3 {padding-top: 1.3rem !important;}
    #bc ul.navbar-nav li {display: none !important;}
    .dropdown-menu {display: none !important;} 
    .nav-item.dropdown {height: 35px !important; width: 400px !important;}
    .col {border: none !important;}
    .container {padding: 0px !important;}
    .xcontainer .row {padding-top: 0px !important;}
    #nav.show {width: 100% !important;}
    .ffooter {display: inline-block !important; border-top: 1px dotted #666 !important;}
    .fffooter {display: none !important;}
    #geaendert {display: none !important;}
    .main-plus {display: none !important;}
    .h1-filler {min-height: 210px !important;}
}

@media screen and ( max-width: 800px ) {
    body {font-size: 12pt !important; margin: 0 5% 0 3% !important;}
    #band2 {height: 48px !important;}
    #band2 img#graz-logo  {height: 30px !important; margin-top: 3px !important;} 
    #band2 #ksg-logo  {font-size: 1.3rem !important;} 
    #band2 #ksg-logo span {font-size: 1.3rem !important;} 
    #band3 {padding-top: 1.3rem !important;}
    .h1-main {font-size: 3rem !important;}
    .h1-filler {min-height: 190px !important;}
    .navbar { margin-left: 0rem !important; margin-right: 0rem !important;}
    #bc ul.navbar-nav li {display: none !important;}
    .dropdown-menu {display: none !important;} 
    .nav-item.dropdown {height: 35px !important; width: 400px !important;}
    .col {border: none !important;}
    .container {padding: 0px !important;}
    .xcontainer .row {padding-top: 0px !important;}
    #nav.show {width: 100% !important;}
    .ffooter {display: inline-block !important; border-top: 1px dotted #666 !important;}
    .fffooter {display: none !important;}
    #geaendert {display: none !important;}

    .screen { display: block !important; float: none !important; }
    .kultura2z .description { padding-left: 0rem !important; } 
    
    .menu-item { margin-left: 10% !important; }
    .main-plus {display: none !important;}

    .container-fluid {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    #kulturserver .menu-container {
        margin-top: 35% !important;
    }
    
}

@media print {
    /* All your print styles go here */
    .ffooter {
        display: none !important;
      }
    #nav,
    #scrollToTopBtn,
    #bc {
      display: none !important;
    }
    .h1-main {font-size: 3rem !important;}
    .h1-filler {min-height: 190px !important;}
}

.col {
    width: 300px;
    margin: 30px;
    background-image: var(--main-bg-image);
    background-attachment: fixed;
    background-position: top center;
  }


.kulturamt .nav-item h3 {
    background-color: transparent !important;
    color: #666;
    padding: 0.5rem;
}

.nav-item h3 {
    background-color: #ddd;
    color: #666;
    padding: 0.5rem;
}

.hidden {
    display: none;
}

h2.section {
    cursor: pointer;
}

xh2.section::before {
    content: "» ";
    color: #aaa;
}

h2.section:hover {
    background-color: #eee;
}

div.section {
    padding-top: 0.5rem !important;
    padding-bottom: 1.8rem !important;
}

h2 a {
    color: #212529 !important;
    cursor: pointer;
}

section h2:hover {
    background-color: #eee;
    color: #212529 !important;
    cursor: pointer;
}

section h2 a:after {
    content: " » ";
    cursor: pointer;
}

h3 {
    font-size: 15pt;
    font-weight: 400;
}

#toc {
    width: 24px;
    height: 24px;
    background-image: url(/static/bullet-list.png);
    opacity: 1;
    margin-left: -40px;
    margin-top: 1rem;
    position: fixed;
    cursor: pointer;
    outline: 1px solid #aaa;
    outline-offset: 3px;
}

#toc.noborder {
    outline: none;
}

#ssuche {
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(/static/search.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    margin-left: 0.5rem;   
    margin-right: 0.5rem;
}

#ssettings {
    width: 20px;
    height: 20px;
    background-image: url(/static/fullscreen-exit.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    margin-top: 1rem;
    margin-right: 2rem;
    display: inline-block;
    margin-left: 1.5rem;
}

#ssettings.exit {
    background-image: url(/static/arrows-fullscreen.svg);
    }

#ssettings.full {
    background-image: url(/static/fullscreen.svg);
    display: none;
    }
    
#stoc {
    background-image: url(/static/bullet-list.png);
    display: none;
}

#sacc {
    background-image: url(/static/acc-close.png);
}

#sall {
    background-image: url(/static/acc-open.png);
}

#bookmark {
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(/static/bookmark.svg);
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    margin-left: 0.5rem;   
}

#bookmark.full {
    background-image: url(/static/bookmark-fill.svg);
    background-size: cover;
}

.toc {
    border: 1px solid #aaa;
    background-color: white;
    width: 500px;
    height: 400px;
    opacity: 1;
    padding: 0.6rem; 
    margin: 0; 
    cursor: pointer;
    overflow: scroll;
}

.toc ul {
    padding: 0.5rem;
    margin: 0;
    list-style-type: none;
}
.toc li:hover {
    background-color: #ddd;
}

.toc li a {
    color: black;
    text-decoration: none;
}

#tocclose {
    float: right;
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
}
.h2 {

    padding-top: 2rem;
    font-size: 1.8rem;
}

#ffooter {
    margin-top: 2.6rem;
    margin-bottom: 2rem;
    border-bottom: 1px dotted #666;
}

.ffooter {
    color: #888;
    border-top: 1px dotted #666;
}

.ffooter a {
    color: #888;
}

.abstand {
    border: 1px solid #fff;
    border-left: 10px solid #ccc;
    margin: 6px;
    padding-left: 6px;
    padding-right: 30px;
    margin-bottom: 2rem;
}

.newstext.abstand {
    border: 1px solid #fff;
    border-left: 1rem solid #fff;
    margin: 1rem;
    _padding-left: 1rem;
    padding-right: 3rem;
}

#start-main {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: cover;
}
#xstart-main {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ddd;
    background-size: cover;
}

#kulturserver .menu-container {
    margin-top: 15%;
    width: 100%;
    height: 100%;

}

.menu-item {
    margin-bottom: 1rem;
    margin-left: 25%;
    padding: 0.5rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    cursor: pointer;
}

.menu-item a {
    display: block;
    width: 100%;
    color: white;
}

.menu-item:hover {
    background-color: transparent !important;
    color: white;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}



.slide {
    text-align : left;
    _transform  : translateX(-100vw);
    _animation  : 0.5s slideIn forwards;
    margin: 1.5rem;
}  
.s1 {
    _animation-delay : .25s;
} 
.s2 {
    _animation-delay : 0.5s;
} 
.s3 {
    _animation-delay : 0.75s;
} 
.s4 {
    _animation-delay : 1s;
} 
.s5 {
    _animation-delay : 1.25s;
} 
.s6 {
    _animation-delay : 1.5s;
} 
@keyframes _slideIn {
    0%   { transform : translateX(-100vw); }
    100% { transform : translateX(0);      }
}
 
_a.pdf {
    background-image: url('/img-header/icon_pdf_s.gif');
    background-repeat: no-repeat;
    padding-left: 25px;
}

#accordionExample {
    padding-left: 0.5rem;
}

h2.accordion-header {
    padding-top: 0rem;
}

.col1 {
    display: inline-block;
    vertical-align: top;
    border: none;
    width: 48%;
    min-height: 9rem;
    min-width: 450px;
    text-align: left;
    padding-top: 2rem;
    margin-right: 2rem;
}
.col2 {
    display: inline-block;
    vertical-align: top;
    border: none;
    width: 300px;
    min-height: 9rem;
    text-align: left;
    margin-right: 2rem;
    padding-top: 2rem;
}
.col3 {
    display: inline-block;
    vertical-align: top;
    border: none;
    width: 250px;
    min-height: 9rem;
    text-align: left;
    padding-top: 2rem;
}

summary::-webkit-details-marker {
    display: none
  }

summary {
    outline: none !important;
}

details h2 {
    margin-top: -1rem;
}

details[open] {
    background-color: #eee;
    margin-left: -1rem;
    padding: 1rem;
}

section div.closed {
    display: none;
}

section div.open {
    display: block !important;
}

.image-container {
    display: inline-block;
    text-align: right;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    float: right;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 2rem;
    padding: 1rem;
    color: white;
    cursor: pointer;
}

.fig-l {
    float: left;
    padding: 1rem;
    border: 1px solid red;
}

.fig-r {
    float: right;
    padding: 1rem;;
    border: 1px solid blue;
}

.fig-h200 {
    height: 200px;
}
.fig-h300 {
    height: 300px;
}
.fig-h400 {
    height: 400px;
}
.fig-h450 {
    height: 450px;
}
.fig-h500 {
    height: 500px;
}
.fig-h550 {
    height: 550px;
}
.fig-h600 {
    height: 600px;
}
.fig-h650 {
    height: 650px;
}
.fig-w140 {
    width: 140px;
}
.fig-w200 {
    width: 200px;
}
.fig-w300 {
    width: 300px;
}
.fig-w400 {
    width: 400px;
}
.fig-w500 {
    width: 500px;
}
.fig-w600 {
    width: 600px;
}

.mark, mark {
    padding: 0 !important; 
    background-color: yellow !important;
    }

.figlist {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  
}

.figlist figure {
    flex: 0 0 auto;
    margin: 6px;
}

#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    opacity: 0;
    transition: all .5s ease;
    width: 60px;
    height: 60px;
    background-color: transparent;
    background-image: url(/static/arrow-up-circle.svg);
    background-size: cover;
  }
  
  .showBtn {
    opacity: 1 !important;
    padding: 1rem;
    cursor: pointer;
  }

  .sdisplay {
    display: inline-block;
    outline: 3px solid transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-color: white;
  }

  .sdisplay.selected {
    outline: 3px solid black;
  }
 
  iframe {
    padding-top: 1rem;
  }

  pm {
    font-size: 1.2rem;
    font-weight: 600;
    color: darkblue;
    cursor: pointer;
    font-weight: 600;
  }

  pm::before {
    content: "  +  ";
  }

  pm.show::before {
    content: "  -  ";
  }

  #sitemap ul {
    display: none;
    list-style: none;
  }

  #sitemap ul.show {
    display: block;
  }

  divpm {
    display: none;
    list-style: none;
  }

  divpm.show {
    display: block;
    padding: 1rem;
  }

  divpm ul {
    /* user-agent styles */
    display: block;
    list-style-type: none;
    padding-inline-start: 20px;
  }

  #bmlreset {
    cursor: pointer;
    padding-top: 0.5rem;
  }

  .archiv h2 {
    font-size: 15pt;
    font-weight: 400;
  }
 
  .news section div.section {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }


  figure {
    display: flex;
    flex-flow: column;
    padding: 3px;
    max-height: 400px;
    margin: auto;
  }
  
  ximg {
    max-width: 220px;
    max-height: 150px;
  }
  
  figcaption {
    background-color: transparent;
    background-size: cover;
    color: #fff !important;
    font: smaller sans-serif;
    padding: 3px;
    padding-left: 10px;
    text-align: left;
    margin-top: -4rem;
  }

  figcaption.virtvis {
    background-color: transparent;
    background-size: cover;
    color: black !important;
    font: smaller sans-serif;
    padding: 3px;
    text-align: left;
    margin-top: 0rem;
  }

  figure + p {
    margin-top: 3rem;
  }
  
  figure.section {
    cursor: pointer;
  }

  figure.section div {
    margin-bottom: 1rem;
    width: 350px;
    height: 250px;
    background-size: cover;
  }
  

  section.preview h2 {
    font-size: 1.3rem;
    max-width: 350px;
    padding-top: .6rem;
    padding-bottom: .6rem;
    background-color: transparent !important;
    border-top: 1px solid;
    margin-top: 1rem;
  }

  #news section h2.section {
    border-top: 1px solid;
    margin-top: 1.2rem;
    padding-top: 0.1rem;
  }

  section.preview figure figcaption {
    padding: 0px;
    padding-left: 10px;
    text-align: left;
    margin-top: -2.5rem;
    font: smaller sans-serif;
    font-weight: 600;
} 

  section.preview {
    display: inline-block;
    min-height: 400px;
    vertical-align: top;
  }

  section.preview.open {
    display: block;
  }

  section.preview.open h2{
    display: block;
    font-size: 32px;
    font-weight: 500;
    max-width: 100%;
  }

  section.preview.open figure.section {
    display: none;
  }
  section.preview.open h2{
    display: block;
  }
  section.preview.open div.closed{
    display: block;
  }

  section.preview.closed {
    display: none;
  }

  .nlshow {
    display: block;
  }


  div.kultura2z div.name {
    font-size: 1.5rem;
    font-weight: 600;
    padding-top: 1rem;
  }
  
  .screen {
    display: table-column;
    width: 120px;
    height: 90px;
    float: left;
    margin: 1.5rem 1rem 1rem 0;
    border: 1px dotted #ccc;
    padding: 6px;
    background-repeat: no-repeat;
    background-position: 6px;
  }

  .kultura2z .description {
    padding-left: 9rem;
  } 

  .kultura2z blockquote {
    font-size: smaller;
  }
  
  .virtvis .figimg {
    min-width: 140px;
    height: 140px;
    background-size: cover;
    cursor: pointer;
    border-radius: 5%;
    margin: 3px;
    display: inline-block;
  }

  ul.virtvisliste {
    column-width: 20rem;
    column-gap: 2rem;
    margin-left: -1rem;

  }

  .fake-changed {
    display: none;
    color: #666;
    font-size: small;
    float: right;
  } 

.section .fake-changed {
    display: none;
}

div.archiv section h2.section {
    font-weight: 600;
}

.portfolio {
    display: block !important;
    position: absolute;
    padding: 3rem;
    top: 0px;
    left: 0px;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}

.portfolio figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    min-width: 800px;
}

.portfolio figure div {
    text-align: left;
}
.portfolio figure img {
    border: 1px solid black;

}

.portfolio button {
    all: initial;
    width: 7rem;
    font-weight: 600;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding-block-start: 2px;
    padding-block-end: 3px;
    padding-inline-start: 6px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: buttonface;
    border-right-color: buttonface;
    border-bottom-color: buttonface;
    border-left-color: buttonface;
    background-color: buttonface;
    box-sizing: border-box;
}

.portfolio button:disabled {
    color: graytext;
    border-top-color: buttonface;
    border-right-color: buttonface;
    border-bottom-color: buttonface;
    border-left-color: buttonface;
    background-color: buttonface;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 90%
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .figdiv {
    width: 400px;
  }