@font-face { font-family: 'universlight'; src: url('../universlight.otf') format('opentype');}
@font-face { font-family: 'bebas'; src: url('../bebas.otf') format('opentype');}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    font-family: universlight;
}

#panorama {
    width: 100vw;
    height: 100vh;
}

.pnlm-hotspot, .flag {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    width: 135px;
    height: 135px;
    overflow: visible;
}
.flag.blue::before{
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: borderblue 2s infinite;
    background: none;
    border: solid 0px rgba(0,156,209,0);
    transition: all .5s;
}
.flag.green::before{
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: bordergreen 2s infinite;
    background: none;
    border: solid 0px rgba(0,156,209,0);
    transition: all .5s;
}

.flag.red::before {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: borderred 2s infinite;
    background: none;
    border: solid 0px rgba(0,156,209,0);
    transition: all .5s;
}

.pnlm-hotspot-base.pnlm-hotspot::before {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: borderblue 2s infinite;
    background: none;
    border: solid 0px rgba(0,156,209,0);
    transition: all .5s;
}

@keyframes borderblue {
    0% { border: solid 0px rgba(0,156,209,0);}
    10% { border: solid 7px rgba(0,156,209,1);}
    80% { border: solid 45px rgba(0,156,209,0);}
    100% { border: solid 50px rgba(0,156,209,0);}
}
@keyframes borderred {
    0% { border: solid 0px rgba(209, 0, 0,0);}
    10% { border: solid 7px rgba(209, 0, 0,1);}
    80% { border: solid 45px rgba(209, 0, 0,0);}
    100% { border: solid 50px rgba(209, 0, 0,0);}
}@keyframes bordergreen {
     0% { border: solid 0px rgba(0, 209, 0,0);}
     10% { border: solid 7px rgba(0, 209, 0,1);}
     80% { border: solid 45px rgba(0, 209, 0,0);}
     100% { border: solid 50px rgba(0, 209, 0,0);}
 }
.pnlm-hotspot:hover {
    background: none;
}
.pnlm-hotspot-base.pnlm-hotspot:hover::before {
    animation: none;
    background: rgba(0,156,209,.7);
    width: 100px;
    height: 100px;
}
.flag:hover::before {
    animation: none;
    width: 100px;
    height: 100px;
}
.flag.blue:hover::before {background: rgba(0,156,209,1);}
.flag.red:hover::before {background: rgba(209, 0, 0,1);}
.flag.green:hover::before {background: rgba(0, 209, 0,1);}

header.ptb.banner {
    position: absolute;
    top: 0px;
    background: rgba(255,255,255,0.9);
    padding: 2vh 5vh 2vh 2vh ;
    transition: all .5s;
}
header.ptb.banner img.logo {
    margin-bottom: 3vh;
    height: 7vh;
}
header.min.ptb.banner { padding: 10px 30px 10px 10px;}
header.ptb.banner.min img.logo { height: 7vh; margin-bottom: 20px;}
header.min h1 { font-size: 25px;}
header h1 {font-size: 3vh; margin-bottom: 1vh;}
header .start {
    position: fixed;
    top: 30vh;
    left: 0;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    cursor: pointer;
}
header .start:hover {
    width: 70px;
}
header div.start img {
    display: none;
    position: absolute;
    left: 110px;
    top: 0;
    width: 400px;
}
header div.start:hover img {
    display: block;
}
aside, nav {
    position: fixed;
    top:38vh;
    width: 400px;
    background: rgba(255,255,255,0.9);
    overflow: visible;
    padding: 20px;
    transition: all .5s;
}
aside button, nav button {
    position: absolute;
    top: 50px;
    width: 50px;
    height: 50px;
    border:none;
    background: rgba(255,255,255,0.9);
    transition: all .2s;
    cursor: pointer;
}
nav button {
    right: -50px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
nav button:hover {
    right: -70px;
    width: 70px;
}
nav {
    padding: 20px;
    position: absolute;
    width: 450px;
    left: -450px;
    background: rgba(255,255,255,.9);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
nav li {
    cursor: pointer;
    position: relative;
}
nav li, nav h5 {
    transition: padding .2s;
}
nav li:hover h5 {
    padding-left: 5px;
    border-left: solid 5px black;
}
nav>ul>li>ul>li:hover {
    padding-left: 5px;
    border-left: solid 5px black;
}
nav.active { left: 0px;}
nav>ul>li {
    margin: 20px 20px 20px 0px;
    font-size: 20px;
    background: white;
    padding: 10px;
    position: relative;
    overflow: visible;
}
nav>ul>li:before {
    content: "";
    width: 100px;
    height: 20px;
    background: url("../images/shadow.png");
    position: absolute;
    bottom: -20px;
    left: 0;
}
nav li>ul {
    padding-left: 30px;
    font-size: 15px;
}
aside {
    right: -400px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
aside button {
    left: -50px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.flyout-button {font-size: 17px}
aside button:hover {
    left: -70px;
    width: 70px;
}
aside.active {
    right: 0px;
}
aside p, aside h3 {
    margin-bottom: 10px;
}
aside p div.color {
    position: relative;
    left:-20px;
    
}
.exponat{
    width: 150px;
    height: 150px;
}
div.info {
    overflow: visible;
}
p.hoverinfo {
    position: absolute;
    left: 40px;
    right: 40px;
    background: rgba(255,255,255,0.9);
    padding: 20px;
    width: 200px;
}
article {
    position: absolute;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    overflow: visible;
}
section {
    position: absolute;
    height: 100vh;
    padding: 20px;
    background: rgb(35,142,176);
    background: linear-gradient(101deg, rgb(225, 244, 253) 0%, rgba(255, 255, 255, 0.9) 100%);
    overflow-y: auto;
    right: 0vw;
    transition: all .5s;
}
section.active.fullwidth { right:100vw}
section.active.halfwidth { right:100vw}
section.halfwidth { width: 50vw;}
section.fullwidth { width: 100vw;}
section.fullwidth img {max-width: 90vw;}
section h3 {
    font-size: 50px;
    /*background: rgba(255,255,255,.9);*/
    /*width: 70%;*/
    /*position: relative;*/
    /*padding: 10px;*/
    /*box-shadow: 5px 5px 20px rgba(0,0,0,0.3);*/
    /*border-bottom-right-radius: 20px;*/
}
section h4 {font-size: 25px}
section p { margin-bottom: 10px;}
section h3, section h4 { margin-bottom: 30px;}
section div.produkte { display: flex;}
section div.produkte ul {  width: 50%;}
section div.produkte ul li {list-style-type: none}
section div.produkte .faltblaetter img {height: 400px;}
section div.produkte .dina4bro img {height: 550px;}
section.fullwidth video {
    width: 80vw;
    height: auto;
    max-height: 80vh;
}
section div.CloseX {
    position: absolute;
    top: 20px;
    right: 0px;
    font-size: 60px;
    cursor: pointer;
    background: white;
    padding: 0 30px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section form * {
    display: block;
    width: 300px;
}
section form input, section form textarea, section form button {
    margin-bottom: 20px;
    padding: 10px;
    position: relative;
    overflow: visible;
}
section form div {
    position: relative;
    margin-bottom: 20px;
    overflow: visible;
}
section form div:before, section form button:before {
    content: "";
    width: 100px;
    height: 20px;
    background: url("../images/shadow.png");
    position: absolute;
    bottom: -20px;
    left: 0;
}

section form button {
    background: rgb(35,142,176);
    background: linear-gradient(101deg, rgba(35,142,176,.9) 0%, rgba(142,216,240,.9) 100%);
    font-size: 20px;
    border: none;
}
ul.Konferenzen li{
    font-size: 30px;
    margin-bottom: 40px;
    cursor: pointer;
}
ul.Konferenzen li, ul.Konferenzen img{ width: 20vw;}
ul.Konferenzen li:hover img {
    border: solid 2px white;
}
.active span.text, span.close { display: none;}
span.text, .active span.close { display: block;}
.active span.close {font-size: 30px; transition: all .2s;}
.active span.close:hover {font-size: 40px;}