body {
  font-family: "Open Sans:300", sans-serif;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  overflow: hidden;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
body.active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
.fullscreen-navigation {
  pointer-events: all;
  cursor: pointer;
  position: absolute;
  right: 2.5%;
  top: -30%;
}
.zoom-navigation {
  pointer-events: all;
  cursor: pointer;
  position: absolute;
  right: 2.5%;
  bottom: 138%;
}
.zoom-navigation img {
  margin-top: 10px;
  height: auto;
  position: relative;
}

img.help-zoom {
  position: absolute;
  width: 11%;
  right: 1.2%;
  top: -75%;
  opacity: 0.8;
}
.help-image-navigation {
  background-color: #fff;
  position: absolute;
  height: calc(64% + 15px);
  width: 70%;
  left: 5.5%;
  bottom: -8px;
  opacity: 0.8;
  z-index: 1;
}

.help-position {
  background-color: #fff;
  position: absolute;
  height: 54.5%;
  width: 21.5%;
  right: 2%;
  bottom: 16.5%;
  opacity: 0.8;
  z-index: 9999;
}
.help-overlay-image {
  display: none;
}
.help-overlay-image p {
  text-align: center;
  color: #b21a1a;
  font-size: 1.05vw;
  margin-top: 4.5%;
}
.help-overlay-image p.a{
margin-top: 11%;
}
.help-overlay-image.active {
  display: block;
}
.help-background.active {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: rgba(0,0,0,0.6)
}

.help-navigation {
  pointer-events: all;
  cursor: pointer;
  position: absolute;
  right: 2.5%;
  top: 3%;
}
.help-navigation img {
  width: 100%;
  height: auto;
  position: relative;
}

.overlay-logo-360 {
  pointer-events: none;
  position: absolute;
  bottom: 35%;
  margin-bottom: 6px;
}

.overlay-logo {
  pointer-events: none;
  display: block;
  position: absolute;
  width: 15%;
  height: auto;
  top: 0;
}
.overlay-logo img {
  margin: 3% 0 0 6%;
  width: 100%;
}
.overlay-title {
  color: #fff;
  position: absolute;
  right: 2.4%;
  bottom: 81%;
  font-weight: 300;
  font-size: 1.3vw;
}
.brand {
  color: #b21a1a;
  position: absolute;
  right: 31%;
  bottom: 54%;
  font-weight: 700;
  font-size: 1.1vw;
  display:none;
}
.overlay-title-2 {
  color: #57585a;
  position: absolute;
  right: 26%;
  bottom: 17%;
  font-weight: 400;
  font-size: 2.1vw;
  width: 10%;
  line-height: 1.1;
  display:none;
}
.overlay-container {
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: 0;
  transition: bottom 0.4s ease-in-out;
  width: 100vw;

}
.overlay-background {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
}
.preview-container {
  left: 0;
  height: 100%;
  width: 100%;
  bottom: 4.8%;
  position: absolute;
}
.layout {
  position: relative;
  width: 100%;
  height: auto;
}
.layout-vector {
  position: absolute;
}
.layout-container {
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  bottom: 17%;
  width: 20.4%;
  right: 1.4%;
  margin-right: 1%;
}
#layout-container {
  width: 100%;
  height: 100%;
}
#preview-container {
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  bottom: -8px;
  left: 5.5%;
  width: 70%;
  overflow: hidden;
  height: calc(60% + 15px);
}
.preview {
  width: 15.1%;
  bottom: 0;
  margin: .5% 0.75% 0 .75%;
  transition: left 0.4s linear;
    position: relative;
    float: left;
}
.preview-image {
  width:100%;
}
.image-title{
  font-size: 10pt;
  text-align: center;
  margin-top: 5px;
}
.preview-image.active  {
  width: calc(100% - 15px);
  border-width: 5px;
  border-color: #b21a1a;
  border-style: solid;
}
.preview-image.active+.image-title {
  color: #b21a1a;
}

.preview-navigation {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.left-button {
  pointer-events: all;
  position: absolute;
  left: 3%;
  width: 2.5%;
  bottom: 32%;
  z-index: 999999;
}
.right-button {
  pointer-events: all;
  position: absolute;
  right: 22.5%;
  width: 2.5%;
  bottom: 32%;
  z-index: 999999;
}
#button-left {
  left: 0;
  position: absolute;
  bottom: 0;
  height: auto;
  width: 33%
}
#button-right {
  right: 0;
  position: absolute;
  bottom: 0;
  height: auto;
  width: 33%
}
.dot-ring {
  position: absolute;
  display: none;
  opacity: 0.9;
}
.layout-vector:hover .dot-ring {
  display: block;
}
.dot {
  z-index: 999;
  position: absolute;
}
.layout-vector.selected-vector .dot-ring {
  display: block;
}


#preview-container.small-navigation .preview:first-child {margin-left: 8.5%;}


/*Yucon*/

.yucon .help-overlay-image p {color: #f39200;}
.yucon .preview-image.active {border-color: #f39200;}
.yucon .preview-image.active+.image-title {color: #f39200;}



@media (max-width: 750px) {

#preview-container {width:100%;
  height: 60%;
  bottom: 7px;}
.layout-container {display: none;}
.overlay-logo {width: 35%;top: 10px;left: 10px;max-width:180px;}
.overlay-logo-360 {display: none;}
.fullscreen-navigation {top:inherit;bottom:130px;}
.overlay-background {display: none;}
.help-image-navigation {
    background-color: transparent;
    position: fixed;
    height: auto;
    width: 50%;
    left: 50%;
    bottom: inherit;
    opacity: 1;
    z-index: 1;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 30px;
}
.help-overlay-image p {font-size:16px;}
.zoom-navigation {bottom:20px;}
.overlay-title {width:fit-content;color: #fff;position: absolute;left: 0px;bottom: 0px;font-weight: 300;font-size: 16px;background: #b21a1a;padding: 10px 20px;}
.yucon .overlay-title {background: #f39200;}
.preview-navigation {display: none !important;}
}