body, html {
    margin: 0;
    padding: 0;
}

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

/* controls */
#controls {
	position: absolute;
	height: 5vh;
	width: 20vw;

	margin-left: auto; 
  	margin-right: auto; 

	left: 0;
  	right: 0;

    bottom: 20px;
    padding-bottom: 3px;

    z-index: 2;
    text-align: center;

    background-color: rgba(0,0,0,0.7);
    border-radius: 10px;
}

.ctrl {
    padding: 8px 5px;
    width: 30px;
    font-size: 13pt;
    text-align: center;

    color: #fff;

    display: inline-block;
    cursor: pointer;
}

.ctrl:hover {
	color: #808080;
}

.placeholder-ctrl {
    padding: 8px 5px;
    width: 30px;
    text-align: center;

    display: inline-block;
}

#controls-icon {
	position: absolute;
	height: 5vh;
	width: 5vw;

  	right: 10px;

    bottom: 20px;
    padding-bottom: 3px;

    z-index: 2;
    text-align: center;

    background-color: rgba(0,0,0,0.3);
    border-radius: 8px;

    display: none;
}

#controls-icon:hover {
    background-color: rgba(0,0,0,0.7);
}

/* hot spots */
.custom-hotspot {
    height: 20px;
    width: 20px;
    /*background: #f00;*/

    background-image: url("../img/info-pointer.png");
    background-repeat: no-repeat;
    background-size: cover;
}

div.custom-tooltip span {
    visibility: hidden;
    position: absolute;
    border-radius: 3px;
    background-color: #fff;
    color: #000;
    text-align: center;
    max-width: 200px;
    padding: 5px 10px;
    margin-left: -220px;
    cursor: default;
}

div.custom-tooltip:hover span{
    visibility: visible;
}

div.custom-tooltip:hover span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    bottom: -20px;
    left: -10px;
    margin: 0 50%;
}