html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

#dropimagebox{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    background: red;
}

.floorplanContainer{
    position: fixed;
    visibility: hidden;
    bottom: 20px;
    left: 20px;
    height: auto;
    width: 50px;
    display: inline-block;
}

.floorplanContainer > #floorplan, .floorplanContainer > .hotspot{
    opacity: .2;
}

.floorplanContainer:hover > #floorplan, .floorplanContainer:hover > .hotspot{
    opacity: 1;
}

#floorplan{
    width: 100%;
    transition: 200ms opacity;
}

.hotspot{
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(94, 204, 255);
    width: 20px;
    height: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 2px 5px rgba(0,153,255,0.65);
    animation-name: pulse;
    animation-duration: 1s;
    transform: translate(-50%, -50%);
    animation-iteration-count: infinite;
    cursor: pointer;
    transition: 200ms opacity;
}

#meeting-room-spot{
    top: 231px;
    left: 240px;
}

#hadi-desk-spot{
    top: 25px;
    left: 80px;
}

.selectedHotSpot{
    background: rgb(255, 157, 10);
    box-shadow: 0px 0px 2px 5px rgba(185, 99, 0, 0.65);
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%), scale(1);
    }
    50% {
        transform: translate(-50%, -50%), scale(1.1);
    }
    100% { 
        transform: translate(-50%, -50%), scale(1);
    }
}


/* ----------------------------------------------
 * Generated by Animista on 2020-3-6 12:55:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 .flip-in-diag-1-bl{-webkit-animation:flip-in-diag-1-bl 1s cubic-bezier(.25,.46,.45,.94) both;animation:flip-in-diag-1-bl 1s cubic-bezier(.25,.46,.45,.94) both}
 @-webkit-keyframes flip-in-diag-1-bl{0%{-webkit-transform:rotate3d(1,1,0,80deg);transform:rotate3d(1,1,0,80deg);opacity:0}100%{-webkit-transform:rotate3d(1,1,0,0deg);transform:rotate3d(1,1,0,0deg);opacity:1}}@keyframes flip-in-diag-1-bl{0%{-webkit-transform:rotate3d(1,1,0,80deg);transform:rotate3d(1,1,0,80deg);opacity:0}100%{-webkit-transform:rotate3d(1,1,0,0deg);transform:rotate3d(1,1,0,0deg);opacity:1}}