@CHARSET "ISO-8859-1";

/************************************************************
*
	CATEGORY PANEL
*
************************************************************/

/*
html { overflow-y: scroll; }
*/

/* opening modals causing page to jump to the top
html {
    overflow-y: auto;
}
*/

/* hide scrollbar in browsers but still scrollable */
.horizontal-slider-layouts::-webkit-scrollbar {
  display: none;
} 

.horizontal-slider-layouts {
	margin: 0px; 
}

.category-list {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.category-listitem {
  display: inline-block;
  flex-shrink: 0; 
  text-shadow: 2px 2px 4px black;
  height: 100%;
} 

/****		KOJE-COMPACT-VIEW BUTTON STYLE		****/
.button-compact {
	color: #009fe3;
	color: var(--primary-color);
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    display: flex;
    justify-content: center;
	width: 5%;
	font-size: 4vmin !important;
    outline:none;
}

.button-compact:hover {
	transform: scale(1.3); 
}

/****	KOJE-COMPACT-VIEW: ANIMATION of HORIZONTAL SCROLLING via 3d transformation 	****/
.scrolling {
 	-webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: transform 1s ease;
    transition: transform 1s ease;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s; 
    -webkit-animation-name: scroll;
}

/****	KOJE-COMPACT-VIEW: INTERNET EXPLORER CANNOT TRANFORM - USUAL SCROLLING HORIZONTALLY 	****/
.scrolling-IE {
	overflow-x: scroll !important;
}

/* Referenzbeispiel: https://css-tricks.com/animate-to-an-inline-style/
 *
 * CSS-animation combined with javascript by setting inline-styles
 */
@-webkit-keyframes scroll {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
}

.category-btn-padding {
	padding-right: 0.3rem;
}

/*
.category-btn {
	width: auto !important;
	padding: 0 2rem !important;
	margin-bottom: 5px !important;
}
*/


/********************		MOBILE SLIDER VIEW DEPRECATED		**************************/

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev:not(.navigator .prev), .next:not(.navigator .next) {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -15px;
  padding: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.65);
}

/* Position the "next button" to the right */
.next:not(.navigator .next) {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/****		MODAL PANEL WRAPPER 	****/
.testWrapper {
    /*border-radius: 17px;*/
    top: 0% !important;
    overflow: hidden;
    /*margin: 20px;*/
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    max-height: none;
}

.testCanvasModal {
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 90%;
	/* Full width */
	max-height: 80%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	z-index: 1005;
	margin: auto;
}

.drop-down-koje {
	left: 50%;
}


/************************************************************
*
	INFOBOX-DESCRIPTION BLOCK
*
************************************************************/

/* left-value is computed */
.koje-description {
  	width: 40%;
  	height: auto;
	position: absolute;
	max-height: 60%;
	background: none;
	box-shadow:none;
	margin:0;
	padding:0;
	/*display: flex !important;
	flex-direction: column-reverse;*/
    overflow-y: auto; /* allow scrolling for long descriptions */
	/*pointer-events: none;*/ /* prevents slecting text */
    z-index:2;
}

.grid-koje-description {
	width: 90%;
  	height: 40%;
	position: absolute;
	max-height: 60%;
	background: none;
	box-shadow:none;
	margin:0;
	padding:0;
	left: 2%;
	bottom: 5%;
	display: flex !important;
	flex-direction: column-reverse;
	pointer-events: none;
}

.disablePointEvent {
	pointer-events: none;
}

.textshadow {
	text-shadow: 0px 2px 3px black, 2px 1px 3px black;
}

/****		GRID-INFOBOX		****/
.gridKojeTitle {
	font-size: 1.3em;  
	margin: 0 0 0 5px;
    padding: 0 0 1.5% 0;
	order: 3;
}

.gridKojeSubtitle {
	font-size: 0.9em;
	margin: 0 0 0 5px; 
    padding: 0 0 0.5% 0; 
	order: 2;
}

.gridKojeDescription {
	font-size: 0.75em; 
	margin: 0 0 0 5px;  
	order: 1;
}

.logoImage {
	position: absolute;
	top: 0%;
	right: 0%;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
    z-index: 555;
}

@media screen and (min-width: 992px) {
	.kojeTitle {
	  	font-size: 4vmin;  
	   	margin: 0 0 15px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 3.25vmin;
	   	margin: 0 0 7.5px 5px; 
	  	order: 2;
	} 
	.kojeDescription {
	   	font-size: 2.75vmin; 
	   	margin-left: 5px;  
	  	order: 1;
	}
	
	.logoSize {
		width: 10%;
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 2%;
  	}
  	
  	.uniformMarginPreview {
  		margin: 2%;
  	}
    
    .borderWrapperMeasurementIcon {
        margin-left: 2%;
    }
    
    .borderWrapperDeviceControlIcon {
        margin-right: 2%;
    }
    
    .left-arrow {
        margin-left: 2%;
    }
    
    .right-arrow {
        margin-right: 2%;
    }
}

@media screen and (max-width: 991px) {      
    .nav-logo {
        max-width: calc(100vw - 180px);
        max-height: 40px;
        height: auto;
        vertical-align: middle;
    }
    
    nav .brand-logo {
        left: 45%;
    }
    
	.kojeTitle {
	  	font-size: 5.25vmin; 
	   	margin: 0 0 10px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 3.85vmin; 
	   	margin: 0 0 5px 5px; 
	  	order: 2;
	}
	.kojeDescription {
	   	font-size: 3.15vmin;
	   	margin-left: 5px; 
	  	order: 1;
	}
	
	.gridKojeTitle {
		font-size: 1.3em;  
		margin: 0 0 1.5% 5px; 
		order: 3;
	}
	
	.gridKojeSubtitle {
		font-size: 0.9em;
		margin: 0 0 0.5% 5px; 
		order: 2;
	}

	.gridKojeDescription {
		font-size: 0.75em; 
		margin: 0 0 0 5px;  
		order: 1;
	}
	
	.koje-description-mobile {
	 	width: 70% !important;
	}
	
	.logoSize {
		width: 20%;
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 3%;
  	}
  	.uniformMarginPreview {
  		margin: 3%;
  	}
    
    .borderWrapperMeasurementIcon {
        margin-left: 3%;
    }
    
    .borderWrapperDeviceControlIcon {
        margin-right: 3%;
    }
    
    .left-arrow {
        margin-left: 3%;
    }
    
    .right-arrow {
        margin-right: 3%;
    }
  	
}

@media screen and (max-width: 600px) {
	.kojeTitle {
	  	font-size: 6.25vmin; 
	   	margin: 0 0 10px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 4.5vmin; 
	   	margin: 0 0 5px 5px; 
	  	order: 2;
	}
	.kojeDescription {
	   	font-size: 4vmin;
	   	margin-left: 5px; 
	  	order: 1;
	}
	
	.koje-description-mobile {
	  	width: 70% !important;
	  	margin-bottom: 3% !important;
	}
	  
	.logoSize {
		width: 30%;
		
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 4%;
  	}
  	.uniformMarginPreview {
  		margin: 4%;
  	}
    
    .borderWrapperMeasurementIcon {
        margin-left: 4%;
    }
    
    .borderWrapperDeviceControlIcon {
        margin-right: 4%;
    }
        
    .left-arrow {
        margin-left: 4%;
    }
    
    .right-arrow {
        margin-right: 4%;
    }
}



@media screen and (min-width: 992px) and (orientation: landscape){
	.kojeTitle {
	  	font-size: 4vmin;  
	   	margin: 0 0 15px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 3.25vmin;
	   	margin: 0 0 7.5px 5px; 
	  	order: 2;
	} 
	.kojeDescription {
	   	font-size: 2.75vmin; 
	   	margin-left: 5px; 
	  	order: 1;
	}
	
	.logoSize {
		width: 10%;
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 2%;
  	}
  	
  	.uniformMarginPreview {
  		margin: 2%;
  	}
    
    .borderWrapperMeasurementIcon {
        margin-left: 2%;
    }
    
    .borderWrapperDeviceControlIcon {
        margin-right: 2%;
    }
    
    .left-arrow {
        margin-left: 2%;
    }
    
    .right-arrow {
        margin-right: 2%;
    }
}

@media screen and (max-width: 991px) and (orientation: landscape) {
	.kojeTitle {
	  	font-size: 5.25vmin; 
	   	margin: 0 0 10px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 3.85vmin; 
	   	margin: 0 0 5px 5px; 
	  	order: 2;
	}
	.kojeDescription {
	   	font-size: 3.15vmin;
	   	margin-left: 5px; 
	  	order: 1;
	}
	
	.gridKojeTitle {
		font-size: 1.3em;  
		margin: 0 0 1.5% 5px; 
		order: 3;
	}
	
	.gridKojeSubtitle {
		font-size: 0.9em;
		margin: 0 0 0.5% 5px; 
		order: 2;
	}

	.gridKojeDescription {
		font-size: 0.75em; 
		margin: 0 0 0 5px;  
		order: 1;
	}
	
	.koje-description-mobile {
	 	width: 70% !important;
	}
	
	.logoSize {
		width: 20%;
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 3%;
  	}
  	.uniformMarginPreview {
  		margin: 3%;
  	}
    .borderWrapperMeasurementIcon {
        margin-left: 3%;
    }
    .borderWrapperDeviceControlIcon {
        margin-right: 3%;
    }
    
    .left-arrow {
        margin-left: 3%;
    }
    
    .right-arrow {
        margin-right: 3%;
    }
}

@media screen and (max-width: 600px) and (orientation: landscape) {
	.kojeTitle {
	  	font-size: 6.25vmin; 
	   	margin: 0 0 10px 5px; 
		order: 3;
	}
	.kojeSubtitle {
	  	font-size: 4.5vmin; 
	   	margin: 0 0 5px 5px; 
	  	order: 2;
	}
	.kojeDescription {
	   	font-size: 4vmin;
	   	margin-left: 5px; 
	  	order: 1;
	}
	
	.koje-description-mobile {
	  	width: 70% !important;
	  	margin-bottom: 3% !important;
	}
	  
	.logoSize {
		width: 30%;
		
  	}
  	
  	.uniformMarginBottomPreview {
  		margin-bottom: 4%;
  	}
  	.uniformMarginPreview {
  		margin: 4%;
  	}
    .borderWrapperMeasurementIcon {
        margin-left: 4%;
    }
    .borderWrapperDeviceControlIcon {
        margin-right: 4%;
    }
    
    .left-arrow {
        margin-left: 4%;
    }
    
    .right-arrow {
        margin-right: 4%;
    }
}


@media only screen and (max-width: 600px) and (orientation: landscape) {
	.koje-description-mobile {
	  	width: 70% !important;
	  	margin-bottom: 3% !important;
	}

}


.kojeTitle:empty {
	display: none;
}
.kojeSubtitle:empty {
  	display: none;
}
.kojeDescription:empty {
	display: none;
}

/* 	The pixels are computed by the minimum + 
	a percentage of the difference (maximum - minimum | in pixel)
	font-size: calc(12px + 4 * ((100vw - 50px) / 1450));
 */
@media screen and (min-width: 50px) {
	.kojeNameSize {
	    font-size: calc(10px + 5 * ((100vw - 50px) / 1450));
	}
	
	/* InfoBoxPanel.html */
	.koje-description {
		/* left-value depends on min and max of arrowsize */
		left: calc(50px + 75 * ((100vw - 50px) / 1450)) !important;
		bottom: calc(50px + 75 * ((100vw - 50px) / 1450)) !important;
	}
	  
	/* KojeModalPanel.html */
	.kojePreviewBtnSize {
	  	/* font-size: 3.5vw; */
	  	font-size: calc(20px + 15 * ((100vw - 50px) / 1450));
	}
	.kojePreviewArrowSize {
	  	/* font-size: 5.5vw; */
	  	font-size: calc(55px + 35 * ((100vw - 50px) / 1450));
	}
	
	.pointsSize {
	  	font-size: calc(30px + 15 * ((100vw - 50px) / 1450));
	}
	  
}

/* Maximum values */
@media screen and (min-width: 1500) {
	.kojeNameSize {
	    font-size: 15px;
	}  
	   
	/* KojeModalPanel.html */
	.kojePreviewBtnSize {
	  	font-size: 35px;
	}
	.kojePreviewArrowSize {
	  	font-size: 90px;
	}  
	
	.extend-points {
		font-size: 35px;
	}
} 

/* disable scrollbars for most browsers */
.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}


/************************************************************
*
	KOJE PANEL
*
************************************************************/

.card-black {
	background-color: #000;
}


/* KojePanel.html - KojePanel.java */
.biggerDiv {
	-webkit-transition: -webkit-transform 0.4s;
	animation: scaleout 0.4s forwards;
	padding-bottom: 56.25%;		/* 16:9 aspect ratio */
}

/* 	
	hover-Example for add class to div:
	With hover - <div class="biggerDiv"> ... </div>	
	Without hover - <div class="biggerDiv nohover"> ... </div>	
 */
.biggerDiv:not(.nohover):hover {
    animation: scalein 0.4s forwards;
}

@-webkit-keyframes scalein {
    0% {
        transform: scale(0.985) translateZ(0);
        -webkit-transform: scale(0.985) translateZ(0);
    }
    100% {
        transform: scale(1.0) translateZ(0);
        -webkit-transform: scale(1.0) translateZ(0);
    }
}

@-webkit-keyframes scaleout {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(0.985);
        -webkit-transform: scale(0.985);
    }
}


@keyframe scalein {
    0% {
        transform: scale(0.985) translateZ(0);
        -webkit-transform: scale(0.985) translateZ(0);
    }
    100% {
        transform: scale(1.0) translateZ(0);
        -webkit-transform: scale(1.0) translateZ(0);
    }
}

@keyframe scaleout {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(0.985);
        -webkit-transform: scale(0.985);
    }
}



.image {
	vertical-align: middle;
 	height: 100%;
 	width: 100%;

	object-fit: cover;
	object-position: center;
	cursor: pointer;
	/*will-change: opacity;*/
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.left-arrow {
	cursor: pointer;
	text-shadow: 2px 2px 4px black;
	position: fixed;
	top: 50%;
	left: 0%;
	transition: scale 0.75s ease-out;
        z-index: 1;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	-moz-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	transform: translateY(-50%);
	transform-origin: 50% 0%;
}

.left-arrow:hover {
	transform: scale(1.1, 1.1) translateY(-50%);
	-webkit-transform: scale(1.1, 1.1) translateY(-50%);
	-moz-transform: scale(1.1, 1.1) translateY(-50%);
	-o-transform: scale(1.1, 1.1) translateY(-50%);
	/* text-shadow: 2px 6px 13px black; */
}

.right-arrow {
	cursor: pointer;
	text-shadow: 2px 2px 4px black;
	position: fixed;
	right: 0%;
	top: 50%;
	transition: scale 0.75s ease-out;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	-moz-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	transform: translateY(-50%);
	transform-origin: 50% 0%;
}

.right-arrow:hover {
	transform: scale(1.1, 1.1) translateY(-50%);
	-webkit-transform: scale(1.1, 1.1) translateY(-50%);
	-moz-transform: scale(1.1, 1.1) translateY(-50%);
	-o-transform: scale(1.1, 1.1) translateY(-50%);
	/* text-shadow: 2px 6px 13px black; */
}

.zoom-button {
	margin: 5px;
	cursor: pointer;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-shadow: 2px 4px 5px black;
}

.back-button {
	margin: 5px;
	cursor: pointer;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-shadow: 2px 2px 4px black;
}

.pano-icon {
	text-shadow: 2px 2px 4px black;
	margin: 5px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* box-shadow: 5px 5px 20px black; */
}

.extend-points {
	position: relative; 
	cursor: pointer;
    pointer-events: all;
	text-shadow: 0px 2px 3px black, 2px 1px 3px black;
	transition: scale 0.75s ease-out;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	-moz-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
}

.extend-points:hover {
	transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	/* text-shadow: 2px 6px 13px black; */
}

.start-panorama-button{
	text-shadow: 2px 4px 5px black;
	margin: 5px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.screenshot-button {
	margin: 5px;
	cursor: pointer;
	text-shadow: 2px 2px 4px black;
	transition: scale 0.75s ease-out;
	/*-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;*/
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
	-moz-transition: scale 0.5s ease-out, text-shadow 0.5s ease-out;
}

.screenshot-button:hover {
	/*transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);*/
	/* text-shadow: 2px 6px 13px black; */
}
/************************************************************
*
	TEST CANVAS BLOCK
*
************************************************************/

.testCanvasPanel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.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;
	/* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
    /*z-index: 1;*/
}

/* TODO BUGGODIBUG*/

.testCanvas:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.modal-overlay {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
	-ms-user-select: none;
	user-select: none;
}

.kojeLoaderModal {
	position: absolute;
	/* display: none; */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.8;
}

.kojeLoaderModalSpinner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.no-margin {
	margin: 0;
}

.no-shadow {
	background-color: transparent !important;
	box-shadow: 0 0 0 0 !important;
}

.websr-branding{
    color: #000000;
    position: absolute;
    width: 100%;
    text-align: center;    
}

/************************************************************
*
	WEBSHOWROOM ENDE
*
************************************************************/

.canvas-fullscreen {
	z-index: 2147483647;
}

.canvasContainer {
	width: 100%;
	height: 100%;
}

.borderWrapperBackIcon {
	cursor: pointer;
	position: absolute;
	left: 0%;
	bottom: 0%;
	border-radius: 100%;
	border: 3px solid #fff;
	padding: 5px;
	transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
	box-shadow: 2px 4px 10px black;
    z-index: 2 !important;
}

.borderWrapperBackIcon:hover {
	transform: scale(1.1, 1.1);
	box-shadow: 2px 8px 15px black;
}

.borderWrapperZoomIcon {
	cursor: pointer;
	position: absolute;
	right: 0%;
	bottom: 0%;
	border-radius: 100%;
	border: 3px solid #fff;
	padding: 5px;
	transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
	box-shadow: 2px 4px 10px black;
    z-index: 1;
}

.borderWrapperZoomIcon:hover {
	transform: scale(1.1, 1.1);
	box-shadow: 2px 8px 15px black;
}

.borderWrapperPanoIcon {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    border: 3px solid #fff;
    padding: 5px;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
	transform-origin: 0% 50%;
    z-index: 1;
    margin-bottom: 2%;
}

.borderWrapperPanoIcon:hover {
	transform: scale(1.1, 1.1) translateX(-50%);
	box-shadow: 2px 8px 15px black;
}

.borderWrapperScreenshotIcon {
    cursor: pointer;
    bottom: 0;
    border-radius: 100%;
    border: 3px solid #fff;
    padding: 5px !important;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
    position: relative;
    z-index: 1;
    margin-left: 5px;
    margin-right: 5px;
}

.borderWrapperScreenshotIcon:hover {
	transform: scale(1.1, 1.1);
	box-shadow: 2px 8px 15px black;
}

.borderWrapperStartPanoramaIcon {
	right: 10% !important;
	cursor: pointer;
	border-radius: 100%;
	border: 3px solid #fff;
	padding: 5px !important;
	transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
	box-shadow: 2px 4px 10px black;
	position: relative;
    z-index: 1;
}

/* created by panoramaviewer */
.borderWrapperMeasurementIcon {
    cursor: pointer;
    position: absolute;
	top: 50%;
	left: 0%;
    border-radius: 100%;
    border: 3px solid #fff;
    padding: 5px;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
    transform: translateY(-50%);
	transform-origin: 50% 0%;
    z-index: 1000;
}

.borderWrapperMeasurementIcon:hover {
    transform: scale(1.1, 1.1) translateY(-50%);
	-webkit-transform: scale(1.1, 1.1) translateY(-50%);
	-moz-transform: scale(1.1, 1.1) translateY(-50%);
	-o-transform: scale(1.1, 1.1) translateY(-50%);
	box-shadow: 2px 8px 15px black;
}

.borderWrapperDeviceControlIcon {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    border-radius: 100%;
    padding: 5px;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
	transform-origin: 0% 50%;
    z-index: 1;
}

.borderWrapperDeviceControlIcon:hover {
    transform: scale(1.1, 1.1) translateY(-50%);
	-webkit-transform: scale(1.1, 1.1) translateY(-50%);
	-moz-transform: scale(1.1, 1.1) translateY(-50%);
	-o-transform: scale(1.1, 1.1) translateY(-50%);
	box-shadow: 2px 8px 15px black;
}

.pano-button-row{
	left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    position: absolute;    
    margin-left: 0px !important;
    margin-right: 0px !important;
    z-index: 1;
}

.pano-button-row .center-container {
    display: table;
    margin: 0 auto;
}

.borderWrapperStartPanoramaIcon:hover {
	transform: scale(1.1, 1.1);
	box-shadow: 2px 8px 15px black;
}

.startPanoramaActive {
	border: 3px solid #009fe3;
}

.startPanoramaActive i {
	color: #009fe3;
}

.fabMenu {
	position: static !important;
	padding: 0 !important;
}


/*___________________________________________________________
   
	KOJE MODAL
____________________________________________________________*/

.styled-button {
	cursor: pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing: border-box;
	border-radius: 50%;
	height: 65px;
	width: 65px;
}

@media only screen and (max-width: 600px) {
	.styled-button {
		height: 50px;
		width: 50px;
	}
}

.buttonstyle-bordered .styled-button,
.buttonstyle-bordered .borderWrapperDeviceControlIcon {
	border: 3px solid #fff;
	box-shadow: 2px 4px 10px black;
	transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
}

.buttonstyle-bordered .styled-button .material-icons {
	text-shadow: 2px 2px 4px black;
}

.buttonstyle-bordered .styled-button-arrow {
	border: none;
	box-shadow: none;
}

.buttonstyle-filled .styled-button,
.buttonstyle-filled .borderWrapperDeviceControlIcon  {
	border: none;
	box-shadow: 2px 4px 10px black;
	text-shadow: 2px 2px 4px black;
	background-color: #009fe3;
	background-color: var(--primary-color);
	transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
}

.buttonstyle-filled .styled-button:hover {
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
}

@media screen and (min-width: 50px) {
	.styled-button i.material-icons {
		font-size: calc(20px + 15 * ((100vw - 50px) / 1450));
	}

	.buttonstyle-bordered .styled-button.styled-button-arrow i.material-icons {
		font-size: calc(55px + 35 * ((100vw - 50px) / 1450));
	}
}

@media screen and (min-width: 1500) {
	.styled-button i.material-icons {
	  	font-size: 35px;
	}

	.buttonstyle-bordered .styled-button.styled-button-arrow i.material-icons {
	  	font-size: 90px;
	}  
} 

.bordered-structure-button {
    cursor: pointer;
    border-radius: 100%;
    border: 3px solid #fff;
    padding: 5px;
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
    transform-origin: 0% 50%;
}


.filled-structure-button {
    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
    box-shadow: 2px 4px 10px black;
    text-shadow: 2px 2px 4px black;
    transform-origin: 0% 50%;
}

.pano-icon-button {
    position: absolute;
    bottom: 0;
    left: 50%;    
    z-index: 1;
    text-shadow: 2px 2px 4px black;
    transform: translateX(-50%);
}

.pano-icon-button:hover {
    transform: translateX(-50%) scale(1.1, 1.1);
}

.back-icon-button {    
    position: fixed;
    left: 0%;
    bottom: 0%;
    z-index: 2;
}

.back-icon-button:hover {
    transform: scale(1.1, 1.1);
}

.fullscreen-icon-button {    
    position: fixed;
    right: 0%;
    bottom: 0%;
    z-index: 1;
}

.fullscreen-icon-button:hover {
    transform: scale(1.1, 1.1);
}


/************************************************************
*
	PANORAMA CANVAS BLOCK
*
************************************************************/

.canvas-screenshot {
	position: fixed;
	top: 50% !important;
	right: 5% !important;
	left: auto !important;
	z-index: 2002;
	transform: translate(-20%, -50%);
	-ms-transform: translate(-20%, -50%);
	-webkit-transform: translate(-20%, -50%);
}

.canvas-control-back {
	position: absolute;
	z-index: 2002;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(20%, 10%);
	transform: translate(20%, 10%);
}

.canvas-control-fullscreen {
	position: absolute;
	top: 0%;
	right: 0%;
	z-index: 2002;
	-webkit-transform: translate(-20%, 10%);
	transform: translate(-20%, 10%);
}

.canvas-control-left {
	position: absolute;
	top: 50%;
	left: 0%;
	z-index: 2002;
	-webkit-transform: translate(20%, -50%);
	transform: translate(20%, -50%);
}

.canvasPanel-control-left {
	position: fixed;
	top: 50%;
	left: 0%;
	z-index: 801;
	-webkit-transform: translate(20%, -50%);
	transform: translate(20%, -50%);
	-ms-transform: translate(20%, -50%);
}

.canvas-control-right {
	position: absolute;
	top: 50%;
	right: 0%;
	z-index: 2002;
	-webkit-transform: translate(-20%, -50%);
	transform: translate(-20%, -50%);
}

.canvasPanel-control-right {
	position: fixed;
	top: 50%;
	right: 0%;
	z-index: 801;
	-webkit-transform: translate(-20%, -50%);
	transform: translate(-20%, -50%);
	-ms-transform: translate(-20%, -50%);
}

.canvas-control-in {
	position: fixed;
	top: 14%;
	right: 53%;
	z-index: 2002;
	-webkit-transform: translate(-20%, -50%);
	transform: translate(20%, -50%);
	-ms-transform: translate(20%, -50%);
}

.canvas-control-out {
	position: fixed;
	top: 14%;
	right: 50%;
	z-index: 2002;
	-webkit-transform: translate(-20%, -50%);
	transform: translate(20%, -50%);
	-ms-transform: translate(20%, -50%);
}

.container-margin {
	margin-left: 40px;
	margin-right: 40px;
}

#canvas {
	width: 90%;
	height: 80%;
	margin: auto;
	position: fixed;
	display: none;
	right: 0;
	left: 0;
	top: 2%;
	bottom: 2%;
	z-index: 2001;
	border-radius: 10px;
	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

#canvasPanel {
	width: 100%;
	height: 100%;
	margin: auto;
	position: fixed;
	display: block;
	right: 0;
	left: 0;
	z-index: 800;
	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	right: 0;
}

#canvas:-webkit-full-screen {
	height: 100%;
	width: 100%;
	border-radius: 0;
}

#canvas:-moz-full-screen {
	height: 100%;
	width: 100%;
	border-radius: 0;
}

#canvas:-ms-fullscreen {
	height: 100%;
	width: 100%;
	border-radius: 0;
}

#canvas:fullscreen {
	height: 100%;
	width: 100%;
	border-radius: 0;
}

.canvas-background-hidden {
	position: fixed;
	top: -100px;
	left: 0;
	bottom: 0;
	right: 0;
	background: #000;
	will-change: opacity;
	display: none;
	z-index: 999;
}

.canvas-background {
	z-index: 2000;
	display: block;
	opacity: 0.7;
}

.panoramaImage {
	max-width: 100%;
	height: auto;
	display: block;
}

.loader {
	position: absolute;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	margin: 0;
}

.panel-loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.panel-loader-background {
	display: none;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 2003;
	height: 100%;
	position: fixed;
	width: 100%;
}

.loader-background {
	display: none;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 2003;
	height: 100%;
	position: fixed;
	width: 100%;
}

.arrow-loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.fixed {
	position: fixed !important;
}

/**** 	USE THE GENERAL CLASS IN ADDONS		****/
.immersight-backgroundcolor {
	background-color: #009fe3 !important;
}
/***********************************************/

/*
.mobile-row {
	margin-left: 2.25em;
	margin-right: 2.25em;
}
*/

.margin-left-15px {
	margin-left: 15px;
}

.mobile-image {
	display: block;
	width: 100%;
}

.mobile-h4 {
	margin-bottom: 2px;
}

.mobile-wrapper {
	margin-right: 2.25em;
	margin-left: 2.25em;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

.mobile-modal {
	overflow-y: hidden;
	padding: 0;
	max-height: 80%;
	width: 90%;
	border-radius: 10px;
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1201px) {
	.mobile-floating {
		width: 55.5px;
		height: 55.5px;
	}
	.mobile-floating i {
		line-height: 55.5px;
	}

}

@media only screen and (max-width: 1200px) {
	/* Slider scrolling on mobile devices */
	.mobile-scrolling {
		overflow-x: scroll !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
	}
	
	.mobile-floating {
		width: 55.5px;
		height: 55.5px;
	}
	.mobile-floating i {
		line-height: 55.5px;
	}
	
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {	
	.mobile-floating {
		width: 55.5px;
		height: 55.5px;
	}
	.mobile-floating i {
		line-height: 55.5px;
	}
	.height-fix-compact {
		height: 200px;
	}
}

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
	.mobile-wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.mobile-row {
		margin-left: auto;
		margin-right: auto;
	}
	#canvas {
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		right: 0%;
		top: 0%;
		z-index: 2001;
		border-radius: 0;
		margin: 0;
		box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	}
	.canvas-control-back {
		position: fixed;
		z-index: 2002;
		top: 1%;
		left: 0%;
		-webkit-transform: translate(20%, 10%);
	}
	.canvas-control-fullscreen {
		position: fixed;
		top: 1%;
		right: 0%;
		z-index: 2002;
		transform: translate(-20%, 10%);
		-ms-transform: translate(-20%, 10%);
		-webkit-transform: translate(-20%, 10%);
	}
	.canvas-control-left {
		position: fixed;
		top: 50%;
		left: 0%;
		z-index: 2002;
		-webkit-transform: translate(20%, -50%);
	}
	.canvas-control-right {
		position: fixed;
		top: 50%;
		right: 0%;
		z-index: 2002;
		-webkit-transform: translate(-20%, -50%);
	}
	.mobile-floating {
		width: 45.5px;
		height: 45.5px;
	}
	.mobile-floating i {
		line-height: 45.5px;
	}
	.mobile-modal {
		width: 100%;
		height: 100%;
		max-height: 100%;
		top: 0% !important;
	}
	.mobile-image {
		top: 50%;
		left: 50%;
		position: fixed;
		-webkit-transform: translate(-50%, -50%);
	}
	.mobile-h4 {
		font-size: 1.1em;
	}
	.mobile-h6 {
		font-size: 0.8em;
	}
	.canvas-control-left {
		position: fixed;
		top: 50%;
		left: 5%;
		z-index: 2002;
		-webkit-transform: translate(20%, -50%);
	}
	.canvas-control-right {
		position: fixed;
		top: 50%;
		right: 5%;
		z-index: 2002;
		-webkit-transform: translate(-20%, -50%);
	}
	.mobile-description {
		display: none;
	}
	.mobile-back {
		line-height: 1.4;
		color: white;
		margin-left: 20px;
		vertical-align: middle;
	}
}

.lean-overlay {
	opacity: 0.8 !important;
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
	.borderWrapperPanoIcon {
	    cursor: pointer;
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    transform: translateX(-50%);
	    border-radius: 100%;
	    border: 3px solid #fff;
	    padding: 5px;
	    transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
	    box-shadow: 2px 4px 10px black;
	}
	.borderWrapperBackIcon {
		cursor: pointer;
		position: fixed;
		left: 0%;
		bottom: 0%;
		border-radius: 100%;
		border: 3px solid #fff;
		padding: 5px;
		transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
		box-shadow: 2px 4px 10px black;
	}
	.borderWrapperZoomIcon {
		cursor: pointer;
		position: fixed;
		right: 0%;
		bottom: 0%;
		border-radius: 100%;
		border: 3px solid #fff;
		padding: 5px;
		transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
		box-shadow: 2px 4px 10px black;
	}

	.borderWrapperStartPanoramaIcon {
		cursor: pointer;
		/*position: absolute;*/
		bottom: 0;
	    /*left: 50%;*/
	    /*transform: translateX(-50%);*/
		border-radius: 100%;
		padding: 5px;
		transition: scale 0.75s ease-out, box-shadow 0.5s ease-out;
		box-shadow: 2px 4px 10px black;
	}

	.mobile-wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.mobile-row {
		margin-left: auto;
		margin-right: auto;
	}
	.mobile-floating {
		width: 35.5px;
		height: 35.5px;
	}
	.mobile-floating i {
		line-height: 35.5px;
	}
	.mobile-modal {
		width: 100%;
		height: 100%;
		max-height: 100%;
		top: 0% !important;
	}
	.mobile-description {
		display: none;
	}
	.mobile-image {
		top: 50%;
		left: 50%;
		position: fixed;
		-webkit-transform: translate(-50%, -50%);
	}
	.mobile-h4 {
		font-size: 1em;
	}
	.mobile-h6 {
		font-size: 0.7em;
	}
	.mobile-back {
		line-height: 1.4;
		color: white;
		margin-left: 15px;
		vertical-align: middle;
	}
	#canvas {
		width: 100%;
		height: 100%;
		position: fixed;
		display: none;
		right: 0%;
		top: 0%;
		z-index: 2001;
		border-radius: 0;
		margin: 0;
		box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	}
	.canvas-control-back {
		position: fixed;
		z-index: 2002;
		top: 1%;
		left: 1%;
		transform: translate(20%, 10%);
		-ms-transform: translate(20%, 10%);
		-webkit-transform: translate(20%, 10%);
	}
	.canvas-control-fullscreen {
		position: fixed;
		top: 1%;
		right: 1%;
		z-index: 2002;
		transform: translate(-20%, 10%);
		-ms-transform: translate(-20%, 10%);
		-webkit-transform: translate(-20%, 10%);
	}
	.canvas-control-left {
		position: fixed;
		top: 50%;
		left: 1%;
		z-index: 2002;
		transform: translate(20%, -50%);
		-ms-transform: translate(20%, -50%);
		-webkit-transform: translate(20%, -50%);
	}
	.canvas-control-right {
		position: fixed;
		top: 50%;
		right: 1%;
		z-index: 2002;
		transform: translate(-20%, -50%);
		-ms-transform: translate(-20%, -50%);
		-webkit-transform: translate(-20%, -50%);
	}
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Edge */
	user-select: none; /* Chrome and Opera */
}


/*Logo in Managment, ShowroomLogoPanel*/
.fillLogoTable{
	position: relative;
	width: 100%;
	height: 150px;
    display: block;
}

.fillLogoDiv{
	position: relative;
	width: 100%;
	height: 250px;
    display: block;
}

.fillTitlePictureDiv{
	position: relative;
	width: 100%;
	height: 400px;
    display: block;
}

.fillPictureRelativ{
	width: 100%;
	height: 100%;
	position: relative;
}

/*PreviewSlide level crap...*/
.fill{
	position: absolute;
	width: 100%;
	height: 100%;
}

.aspectCrop{
	object-fit: cover;
	object-position: center;
}

.aspectFit{
	object-fit: contain;
	object-position: center;
}

.noOverflow {
	overflow: hidden;
}



.tabs.tabs-transparent.kojeGroup .tab:hover{
		background-color:rgba(84, 110, 122, 0.2) !important;
}

.tabs.tabs-transparent.kojeGroup .tab.active{
		background-color:rgba(84, 110, 122, 0.4) !important;
}

input::placeholder{
  opacity: 1.0;
  color: grey;
  font-style: italic;
  font-size: 0.8em;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.tabs.tabs-transparent.kojeGroup .indicator{
	opacity:0.0;
}

input:focus:placeholder {
    opacity: 0.0;
}


input::-webkit-input-placeholder {
	opacity: 1.0;
 	color: grey;
  	font-style: italic;
 	font-size: 0.8em;
}

input:focus::-webkit-input-placeholder {
    opacity: 0.0;
}

/* Firefox < 19 */
input:-moz-placeholder {
	opacity: 1.0;
 	color: grey;
  	font-style: italic;
 	font-size: 0.8em;
}
input:focus:-moz-placeholder {
    opacity: 0.0;
}

/* Firefox > 19 */
input::-moz-placeholder {
	opacity: 1.0;
 	color: grey;
  	font-style: italic;
 	font-size: 0.8em;
}
input:focus::-moz-placeholder {
    opacity: 0.0;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
	opacity: 1.0;
 	color: grey;
  	font-style: italic;
 	font-size: 0.8em;
}
input:focus:-ms-input-placeholder {
    opacity: 0.0;
}

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

/************************************************************
*
	MULTIKOJE-VIEW ENDE
*
************************************************************/


/************************************************************
*
	PANORAMA-LAYOUT
*
************************************************************/

.grid-koje-description {
	width: 90%;
  	height: 40%;
	position: absolute;
	max-height: 60%;
	background: none;
	box-shadow:none;
	margin:0;
	padding:0;
	left: 2%;
	bottom: 3%;
	display: flex !important;
	flex-direction: column-reverse;
	pointer-events: none;
}

/************************************************************
*
	FADE ANIMATION
*
************************************************************/

.fader {
	background-color: black;
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;

	height: 0%;

	-webkit-animation: fadeOutToGone 0.3s ease-in-out;
    -moz-animation: fadeOutToGone 0.3s ease-in-out;
    -o-animation: fadeOutToGone 0.3s ease-in-out;
    animation: fadeOutToGone 0.3s ease-in-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

.hidden {
	display: none !important;
    /*
	-webkit-animation: fadeOutToNone 0.3s ease-in-out;
    -moz-animation: fadeOutToNone 0.3s ease-in-out;
    -o-animation: fadeOutToNone 0.3s ease-in-out;
    animation: fadeOutToNone 0.3s ease-in-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    */
}

/*.visible {
	-webkit-animation: fadeInFromNone 0.3s ease-in-out;
    -moz-animation: fadeInFromNone 0.3s ease-in-out;
    -o-animation: fadeInFromNone 0.3s ease-in-out;
    animation: fadeInFromNone 0.3s ease-in-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}*/

.show {
    visibility: visible;
}

.hide {
    visibility: hidden;
    /* override materialize display: none */
    display: block !important;
}

/****		FADE IN		****/
@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

/****		FADE OUT		****/
@-webkit-keyframes fadeOutToNone {
    0% {
        display: block;
        opacity: 1;
    }

    99% {
        display: block;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@-moz-keyframes fadeOutToNone {
    0% {
        display: block;
        opacity: 1;
    }

    99% {
        display: block;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@-o-keyframes fadeOutToNone {
    0% {
        display: block;
        opacity: 1;
    }

    99% {
        display: block;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@keyframes fadeOutToNone {
    0% {
        display: block;
        opacity: 1;
    }

    99% {
        display: block;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}


.grid-koje-card {
    padding: 0 .5rem !important;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}


.fadeOutContainer {
    position: absolute;
    bottom: 0;
    height: 30vh;
	background: linear-gradient(rgba(38, 50, 56, 0), rgb(38, 50, 56));
	margin-top: -30vh;
    width: 100%;
    pointer-events: none;
}

.moreButton {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20%;
    pointer-events: all;
}

.main {
	position: relative;
}

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

.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;
}