/*
Copyright 2021 immersight GmbH.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* 
    Created on : 11.01.2021, 14:30:47
    Author     : Waldemar
*/
.divider-right {
    width: 5px;
    height: 100%;
    position: absolute;
    right: -1px;
    top: 0px;
    background-color: white;
}

.divider-left {
    width: 5px;
    height: 100%;
    position: absolute;
    left: -1px;
    top: 0px;
    background-color: white;
}

.koje-modal {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 100;
    border: none;
    height: 100%;
}

.content-wrap {
    height: 100%;
    width: 100%;
}

.content-body {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.layer{
    position: absolute;
    width: 100%;
    overflow: hidden;
    background-color: black;
}

.layer .content-wrap{
    position: absolute;
}

.layer .content-body {
    position: absolute;
    text-align: center;
}

/* THREE LAYERE KOJE */
.three-layer .bottom {
    z-index: 101;
    height: 100%;
    width: calc(33% + 1000px);
    right: 0;
    transform: skew(-34.5deg);
    margin-right: -1000px;
    will-change: width;
}

.three-layer .bottom .content-wrap {
    transform: skew(34.5deg);
    margin-left: -1000px;
}

.three-layer .bottom .content-body{
    /*right: 0%;*/
}

.three-layer .middle {
    width: 100%;
    z-index: 100;
    height: 100%;
    border: none;
}

.three-layer .middle .content-wrap {
}

.three-layer .middle .content-body {
}

.three-layer .top {
    z-index: 103;
    height: 100%;
}

.three-layer .top .content-body{
    left: 0%;
}

.three-layer .top {
    transform: skew(-34.5deg);
    margin-left: -1000px;
    width: calc(33% + 1000px);
}

.three-layer .top .content-wrap{
    transform: skew(34.5deg);
    margin-left: 1000px;
}

.three-layer .top.shrink {
    width: calc(23% + 1000px);
}

.three-layer .top.expand {
    width: calc(43% + 1000px);
}

.three-layer .top.open {
    width: calc(93% + 1000px) !important;
}

.three-layer .top.close {
    width: calc(-5% + 1000px) !important;
}

.three-layer .middle.expand {
}

.three-layer .middle.shrink {
}

.three-layer .bottom.expand {
    width: calc(43% + 1000px);
}

.three-layer .bottom.shrink {
    width: calc(23% + 1000px);
}

.three-layer .bottom.open {
    width: calc(93% + 1000px) !important;
}

.three-layer .bottom.close {
    width: calc(-5% + 1000px) !important;
}

.three-layer .bottom .koje-modal-slide img {
    right: 0%;
    object-position: right center !important;
}

.three-layer .top .koje-modal-slide img {
    left: 0%;
    object-position: left center !important;
}

.three-layer .middle .koje-modal-slide img {

}


/* TWO LAYER KOJE */
.two-layer .bottom {
    z-index: 101;
    height: 100%;
    width: 100%;
    right: 0%;
}

.two-layer .bottom .content-wrap {
}

.three-layer .bottom .content-body{
}

.two-layer .top {
    z-index: 103;
    height: 100%;
}

.two-layer .top .content-body {
    left: 0%;
}

.two-layer .top {
    transform: skew(-34.5deg);
    margin-left: -1000px;
    width: calc(50% + 1000px);
}

.two-layer .top .content-wrap{
    transform: skew(34.5deg);
    margin-left: 1000px;
}

.two-layer .top.shrink {
    width: calc(43% + 1000px);
}

.two-layer .top.expand {
    width: calc(63% + 1000px);
}

.two-layer .top.open {
    width: calc(100% + 1000px) !important;
}

.two-layer .top.close {
    width: calc(0% + 1000px) !important;
}

.two-layer .bottom.expand {

}

.two-layer .bottom.shrink {

}

.two-layer .bottom .koje-modal-slide img {
    right: 0%;
    object-position: right center!important;
}

.two-layer .top .koje-modal-slide img {
    left: 0%;
    object-position: left center !important;
}


/* ONE LAYER KOJE */
.one-layer .middle {
    width: 100%;
    z-index: 100;
    height: 100%;
    border: none;
}

.one-layer .middle .content-wrap {
}

.one-layer .middle .content-body {
}


.one-layer .middle.expand {
}

.one-layer .middle.shrink {
}

.one-layer .middle .koje-modal-slide img {
/*    left: 50%;
    transform: translateX(-50%);*/
}


.top, .bottom, .middle {
    transition: width 0.4s ease-out;
}

.modal-btn i {
    line-height: 70px;
    font-size: 3.2rem;
    text-shadow: 2px 2px 4px black;
}

#rightBtn {
    z-index: 105;
    position: fixed;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 2%;
}

#rightBtn:hover {
    transform: translateY(-50%) scale(1.1, 1.1);
}

#leftBtn {
    z-index: 105;
    position: fixed;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 2%;
}

#leftBtn:hover {
    transform: translateY(-50%) scale(1.1, 1.1);
}

#panoramaBtn{
    z-index: 105;
    position: fixed;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    margin-bottom: 2%;
}

#panoramaBtn:hover {
    transform: translateX(-50%) scale(1.1, 1.1);
}

.modal-btn.back-button {
    z-index: 113;
}

#backBtn {
    z-index: 105;
}

#backBtn:hover, .modal-btn.back-button:hover {
    transform: scale(1.1, 1.1);
}

#backBtn, .modal-btn.back-button {
    position: fixed;
    left: 0%;
    bottom: 0%;
    margin-left: 2%;
    margin-bottom: 2%;
}

#fullscreenBtn {
    z-index: 105;
}

#fullscreenBtn, .modal-btn.fullscreen-btn {
    position: fixed;
    right: 0%;
    bottom: 0%;
    margin-right: 2%;
    margin-bottom: 2%;
}

#fullscreenBtn:hover, .modal-btn.fullscreen-btn:hover {
    transform: scale(1.1, 1.1);
}

.modal-btn.share-button {
    z-index: 105;
    position: fixed;
    left: 25%;
    bottom: 0%;
    transform: translateX(-25%);
    margin-bottom: 2%;
}

.modal-btn.share-button:hover {
    transform: translateX(-25%) scale(1.1, 1.1);
}

.modal-btn.contact-button {
    z-index: 113;
    position: fixed;
    left: 75%;
    bottom: 0%;
    transform: translateX(-25%);
    margin-bottom: 2%;
}

.modal-btn.contact-button:hover {
    transform: translateX(-25%) scale(1.1, 1.1);
}

.modal-btn.contact-button-pano {
    z-index: 113;
    position: fixed;
    right: 0;
    bottom: 0%;
    transform: translateX(-25%);
    margin-bottom: 2%;
    margin-right: 2%;
}

.modal-btn.contact-button-pano:hover {
    transform: translateX(-25%) scale(1.1, 1.1);
}

.koje-modal .koje-modal-slide img {
    position: absolute !important;
    width: 100vw;
    height: 100vh;
    z-index: 1; 
    display: none;
}

.koje-modal .koje-modal-slide img.active {
    z-index: 3;
    display: block !important;
}

.koje-modal .koje-modal-slide img.hide {
    display: none;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.logoImage {
    position: fixed;
    top: 0;
    right: 0;
    width: 10%;
    height: 33.33%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden; /* Ensures the image does not overflow its container */
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
    z-index: 555;
    margin: 2%;
}

.logoImage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.testCanvas {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    display: block;
    background-color: antiquewhite;
    right: 0;
    left: 0;
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
    right: 0;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.testWrapper {
    z-index: 112;
}

/*
.testCanvas {
    z-index: 1;
}
*/

.koje-modal .koje-modal-slide img.aspectCrop {
    object-fit: cover;
    object-position: center;
    width: 100vw;
}

.koje-modal .koje-modal-slide img.aspectFit {
    object-fit: contain;
    object-position: center;
    height: 100vh;
}

#fullscreenBtn {
    z-index: 555 !important;
}

.display-more {
    position: relative;
    cursor: pointer;
    pointer-events: all;
    text-shadow: 0px 2px 3px black, 2px 1px 3px black;
    font-weight: bold;
    white-space: nowrap !important;
    line-height: 1.5 !important;
}

.display-more:hover {
    color: var(--primary-color);
}

.modal-btn.device-control {
    z-index: 105;
    position: fixed;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 2%;
}

.modal-btn.device-control:hover {
    transform: translateY(-50%) scale(1.1, 1.1) !important;
}