* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#toggleDeviceOrientation {
  width: 25px;
    height: 25px;
    position: absolute;
    bottom: 25px;
    left: 106px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.1);
  z-index:9999;
}
#toggleDeviceOrientation button {
  width: 34px;
  margin: 8px;
}

#toggleDeviceOrientation .disable {
  display: none;
}

#toggleDeviceOrientation.enabled .disable {
  display: block;
}

#toggleDeviceOrientation.enabled .enable {
  display: none;
}


.vr-button {
 width: 40px;
    height: 40px;
    position: absolute;
    bottom: 17px;
    left: 40px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.1);
  z-index:9999;
}

#enter-vr {
    cursor: pointer;
    font-size: .9em;
    border-radius: 5px;
	z-index: 9999;
}

#enter-vr:hover {
    background-color: #51BBE7;
    border: 2px solid #51BBE7;
}

#no-vr {
    cursor: default;
}


.interaction {
  position: absolute;
  padding: 30px;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: url(../img/mouse-hover.png) 38 27, auto !important;
  border: none;
  z-index: 4000;
  overflow: visible;
}
.interaction.px-el {
  width: auto !important;
  height: auto !important;
}
.interaction:hover span {
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.interaction:hover p {
  -webkit-transform: translateX(15px);
  -moz-transform: translateX(15px);
  -ms-transform: translateX(15px);
  -o-transform: translateX(15px);
  transform: translateX(15px);
}
.interaction span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 1px solid #00f6ff;
  background-color: #00f6ff;
  -webkit-transition: -webkit-transform 0.4s
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation: ripple 0.7s linear infinite;
  animation: ripple 0.7s linear infinite;
}
.interaction p {
  padding: 3px 0 3px 30px;
  position: absolute;
  top: 27px;
  left: 80px;
  background: transparent url(http://www.firstparallel.com/assets/img/more.svg)
    left top no-repeat;
  background-size: 20px 20px;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 14px;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  -webkit-transition: -webkit-transform 0.2s
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: -moz-transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#second-interaction {
  top: 57%;
  left: 82%;
}