@import url('https://projekte.lorenzrings.de/virtual-tour/start_scene/360beckum/360beckum.css');

.sidebarNavigation .content-container {
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 10px 0;
    text-shadow: 0 1px 1px #000;
    padding: 0 20px 0px 20px;
    text-align: left
}

.hotspot {
    background: #ffffff;
    border: 2px solid #ff0000;
    box-shadow: 0px 0px 4px 1px #333;
    
    height: 49px;
    width: 49px;
}

.hotspot:after {
    box-shadow: 0 0 0 2px #fff;
}

.hotspot .inner {
    background: #ff0000;
    width: 39px;
    height: 39px;
    font-size: 26px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hotspot :hover.inner {
    background: #ffffff;
}

.hotspot .inner:before {
    background: #ffffff;
}

.hotspot:hover, .hotspot:focus, .hotspot:active {
    background-color: #ff0000;
    border-color: #ffffff;
}

.hotspot .inner div.fa {
    color: #ffffff;
    line-height: 39px;
}

.hotspot:hover .inner div.fa,
.hotspot:focus .inner div.fa,
.hotspot:active .inner div.fa {
    color: #ff0000;
}
/*
.gallery-container { display:none!important; }
.gallery .sidebarNavigation { bottom:auto!important; }
 */
/*
 * That's all, stop editing!
 */
.hotspot { display: block; border-radius: 100%; cursor: pointer; margin: 5px; transition: all 0.5s; }
.hotspot:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; box-sizing: content-box; top: -6px; left: -6px; padding: 5px; -moz-transition: -moz-transform .2s, opacity .2s; -moz-transform: scale(.6); -webkit-transition: -webkit-transform .2s, opacity .2s; transition: transform .2s, opacity .2s; -webkit-transform: scale(.6); -ms-transform: scale(.6); transform: scale(.6); opacity: 0 }
.hotspot:hover:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms; animation: sonarEffect 1.3s ease-out 75ms; }
.hotspot.infinite:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms infinite; animation: sonarEffect 1.3s ease-out 75ms infinite; }
@-webkit-keyframes sonarEffect { 0% { opacity: .3; } 10% { opacity: .5; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 15px 3px #fff, 0 0 0 5px rgba(255, 255, 255, .5); } 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 15px 3px #fff, 0 0 0 5px rgba(255, 255, 255, .5); -webkit-transform: scale(.7); opacity: 0; } }
@keyframes sonarEffect { 0% { opacity: .3 } 40% { opacity: .5; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 15px 3px #fff, 0 0 0 5px rgba(255, 255, 255, .5) } 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 15px 3px #fff, 0 0 0 5px rgba(255, 255, 255, .5); -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } }
.hotspot .inner { display: block; border-radius: 100%; position: relative; top: 3px; left: 3px; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.hotspot .inner:before { border-radius: 100%; content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hotspot:hover .inner:before, .hotspot:focus .inner:before, .hotspot:active .inner:before { -webkit-transform: scale(1); transform: scale(1); }