html,body{
width: 100%;
height: 100%;
padding:0px;
margin:0px;
font-family: 'Poppins', sans-serif !important;
overflow: hidden;
}
#panorama {
width: 100%;
height: 100%;
}
.quick-menu-container{
display: flex;
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 100vh;
flex-direction: column;
padding: 20px 0;
align-content: center;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.5s;
z-index: 99;
}
#menuBox{
left: -265px;
}
.quick-menu-container a{
color: white;
text-decoration: none;
text-transform: uppercase;
padding: 15px 30px;
font-size: 13px;
border-bottom: 1px solid #ddd;
transition: 0.8s;
}
.quick-menu-container a:hover{
background-color: #000;
}
.quick-menu-container span{
position: absolute;
right: -15px;
top: 50%;
}
.quick-menu-container span i{
font-size: 28px;
background-color: #ddd;
border-radius: 50px;
padding: 1px 3px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.quick-menu-container #closeArrow{
display: none;
right: -15px;
}
.fb-icon, .tw-icon, .zm-icon, .wa-icon, .ing-icon, .li-icon{
background-size: 52px 52px;
display: block;
width: 52px;
height: 52px;
}
.fb-icon{
background-image: url('assets/panorama/fb.png');
}
.tw-icon{
background-image: url('assets/panorama/tw.png');
}
.zm-icon{
background-image: url('assets/panorama/zm.png');
}
.wa-icon{
background-image: url('assets/panorama/wa.png');
}
.ing-icon{
background-image: url('assets/panorama/ing.png');
}
.li-icon{
background-image: url('assets/panorama/in.png');
}
.object-opened{
background-image: url('assets/panorama/engineering-once.gif');
background-size: 250px 250px;
display: block;
width: 250px;
height: 250px;
}
.play-button{
background-image: url('/public/assets/lobby/img/play-button.png');
background-size: 32px 23px;
display: block;
width: 32px;
height: 23px;
}
.button-icon-test{
background-image: url('assets/panorama/btn-test.png');
background-size: 200px 50px;
display: block;
width: 200px;
height: 50px;
cursor: pointer;
}
.popup-icon{
background-image: url('https://cdn.pixabay.com/photo/2016/06/15/15/02/info-1459077_1280.png');
background-size: 20px 20px;
display: block;
width: 20px;
height: 20px;
cursor: pointer;
}
.popup-icon::after{
display: block;
position: absolute;
content: "";
width: 20px;
height: 20px;
top: -1px;
left: -1px;
border: 1px solid #007eff;
animation: popy1 1s alternate infinite ease-in;
border-radius: 25px;
opacity: 0.8;
}
.popup-icon::before{
display: block;
position: absolute;
content: "";
width: 21px;
height: 21px;
top: -1px;
left: -1px;
border: 1px solid #007eff;
animation: popy2 1s alternate infinite ease-in;
border-radius: 25px;
opacity: 0.8;
}
@keyframes popy2 {
from {transform: scale(.8);}
to {transform: scale(2.5);}
}
@keyframes popy1 {
from {transform: scale(.8);}
to {transform: scale(1.5);}
}
.custom-hotspot{
width: 20px;
height: 20px;
background: rgb(255,0,0);
border-radius: 25px;
cursor: pointer;
}
.custom-hotspot::after{
display: block;
position: absolute;
content: "";
width: 20px;
height: 20px;
top: -2px;
left: -2px;
border: 2px solid red;
animation: crescendo 1s alternate infinite ease-in;
border-radius: 25px;
opacity: 0.8;
}
.custom-hotspot::before{
display: block;
position: absolute;
content: "";
width: 22px;
height: 22px;
top: -2px;
left: -2px;
border: 2px solid red;
animation: crescendo2 1s alternate infinite ease-in;
border-radius: 25px;
opacity: 0.8;
}
@keyframes crescendo2 {
from {transform: scale(.8);}
to {transform: scale(2.5);}
}
@keyframes crescendo {
from {transform: scale(.8);}
to {transform: scale(1.5);}
}
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;
z-index:9999;
}
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%;
}
.pnlm-load-box{
display: none !important;
}
video{
position: absolute;
z-index: 999;
bottom: 10px;
right: 10px;
}
#selfNavigate, #makeSelection{
display: none;
}
.makeSelection {
max-width: 350px;
position: absolute;
z-index: 99;
background-color: #f0f8fff5;
padding: 20px;
border-radius: 10px;
text-align: center;
bottom: 200px;
right: 230px;
box-shadow: rgb(255 255 255 / 10%) 0px 1px 1px 0px inset, rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;
animation-name: makeselect;
animation-duration: 2s;
}
@keyframes makeselect{
from {bottom:-200px;}
to {bottom:200px;}
}
.makeSelection h3 {
margin: 0px 0 20px;
}
.welcomeModal {
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
}
#startModal{
display: block;
}
.soud a{
position: absolute;
cursor: pointer;
right: 5px;
top: 5px;
z-index: 9999;
background-color: white;
padding: 3px 3px 0;
border-radius: 3px;
}
.soud a img{
margin: 0 !important;
}
#disableMute{
display: none;
}
.pnlm-hotspot-base.custom-hotspot.custom-tooltip.pnlm-pointer {
z-index: 99 !important;
}
.poster-content {
margin: auto;
max-width: 350px;
width:80%;
position: relative;
animation-name: modal-post;
animation-duration: 1s;
top:70px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari 3-8 */
transform: scale(1);
z-index: 9;
}
@keyframes modal-post {
from {transform: scale(0.5);}
to {transform: scale(1);}
}
.modal-content {
background-color: #eee;
margin: auto;
padding: 20px;
border: 1px solid #888;
max-width: 720px;
width:80%;
border-radius: 10px;
text-align: center;
position: relative;
animation-name: modal-ani;
animation-duration: 2s;
top:70px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
@keyframes modal-ani {
from {top:-200px;}
to {top:70px;}
}
button {
padding: 14px 36px;
outline: none;
border: none;
border-radius: 50px;
background: #ff00cc;
background: -webkit-linear-gradient(to bottom, #333399, #ff00cc);
background: linear-gradient(to bottom, #333399, #ff00cc);
color: white;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: 0.8s ease;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
button:hover{
background: -webkit-linear-gradient(to right, #333399, #ff00cc);
background: linear-gradient(to right, #333399, #ff00cc);
}
button:focus {
background: #333399;
}
.close {
font-family: arial;
font-weight: 300;
font-size: 56px;
padding: 0;
margin: 0;
width: auto;
position: absolute;
top: 8px;
right: 8px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
color: #4a4a4a;
line-height: 0.5;
cursor: pointer;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
form {
text-align: left;
padding: 20px;
}
.row2col{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:10px;
}