@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;
}

.flag.orange::before {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: borderorange 2s infinite;
    background: none;
    border: solid 0px rgba(255,170,0,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);}
 }
@keyframes borderorange {
    0% { border: solid 0px rgba(255, 170, 0,0);}
    10% { border: solid 7px rgba(255, 170, 0,1);}
    80% { border: solid 45px rgba(255, 170, 0,0);}
    100% { border: solid 50px rgba(255, 170, 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);}
.flag.orange:hover::before {background: rgba(255, 170, 0,1);}


/*Infopoints hover info*/
div.info {
    overflow: visible;
}

p.hoverinfo {
    position: absolute;
    left: 40px;
    right: 40px;
    background: rgba(255,255,255,0.9);
    padding: 20px;
    width: 200px;
}

/* Video einbelndung*/
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: 0;
    transition: all .5s;
}
section.active.halfwidth { right:100vw}
section.halfwidth { width: 50vw;}

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;
}
ul.videolist a {
    text-decoration: none;
    color: black;
}
ul.videolist li{
    margin-bottom: 20px;
    padding: 10px;
}
ul.videolist li:hover {
    background: #0088C2;
    color: white;
}
ul.videolist span.time,ul.videolist span.name,ul.videolist span.talktitle {
    display: block;
    font-size: 1.5em;
    text-decoration: none;
}
h3.daychange {
    padding: 20px;
    background: #0088C2;
    color: white;
    font-size: 2em;
}
li.coffeebreak {
    padding: 20px;
    background: #677075;
    color: white;
    font-size: 2em;
}
li.session {
    padding: 20px;
    background: #c0c27b;
    color: black;
    font-size: 2em;
}