::-webkit-scrollbar {

  width: 7px;

}

::-webkit-scrollbar-track {

  background: transparent; 

}

.transformed {

    -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);

    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);

}

::-webkit-scrollbar-thumb{

  background: #888; 

}

::-webkit-scrollbar-thumb:hover {

  background: #555; 

}

::-webkit-scrollbar:horizontal{

  width: 0px !important;

  height: 0px !important;

}

::-webkit-scrollbar-track:horizontal{

  background: transparent;

}

::-webkit-scrollbar-thumb:horizontal{

  background: transparent;

  border: none;

}







@font-face {

    font-family: 'AllerLight';

    src: 

         url('./fonts/Aller_Lt.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'frutiger';

    src: 

         url('./fonts/frutiger_45_light.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Aller';

    src: 

         url('./fonts/Aller_Rg.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Ivardisplay';

    src: 

         url('./fonts/IvarDisplay-Regular.otf') format('opentype');

    font-weight: normal;

    font-style: normal;

}

@-ms-viewport { width:device-width; }

@media only screen and (min-device-width:800px) { html { overflow:hidden; } }

	

	

html {

	height:100%;

}



body {

	height:100%;

	overflow:hidden;

	margin:0; padding:0;

	font-family: Aller;

	font-size:16px;

	color:#FFFFFF;

	background-color:#000000;

	position: relative;

}

#pano{

	width:100%;

	height:100%;

	position: absolute;

}

#interface{

	width:100%;

	height:100%;

	position: absolute;

	z-index: 99;

	pointer-events: none;

	display: flex;

	align-items: center;

}

.side-buttons{

	position: fixed;

	right: 0 !important;

	pointer-events: all;

}



.rbtn{

	padding: 10px;

	background: rgba(255, 255, 255, 0.6);

}

.rbtn:hover{

	background: rgba(255, 255, 255, 1);

}

.rtop{

	border-radius: 15px 0 0 15px;

}

.rdown{

	border-radius: 0 0 0 15px;

	cursor: pointer;

}

.rbtn img{

	width: 30px;

	height: 30px;

}

a:hover{

	color:#ffffff; 

}

* {

  box-sizing: border-box;

  scrollbar-color: transparent transparent; /* thumb and track color */

  scrollbar-width: 0px;

  -ms-overflow-style: none;

}

ol, li {

  list-style: none;

  margin: 0;

  padding: 0;

}





.hotspot{

	padding:20px;

	box-sizing: border-box;

	overflow-y:hidden !important;

}

.hotspot a{

	color: #cacaca;text-decoration:none;

}

.hotspot img{

	text-align:center

}

h1.top{

	margin: 0;

	font-family: Ivardisplay !important;

	font-size: 40px;

	font-weight: 200 !important;

	letter-spacing: 2px;

}

h2.designer{

	margin: 0;

	font-family: frutiger !important;

	font-size: 1rem;

	font-weight: 500 !important;

}

div.text, p.text , .helptext{

	color: #fff;

	margin: 0;

	font-family: frutiger !important;

	font-size: 16px;

	font-weight: normal !important;

	line-height: 24px;

	letter-spacing: 1.1px;

}



.cpanobox{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	width: 300px;

}

.cpanobox:hover {

	transform: scale(1.5);

}

.cpanobox img{

	width: 300px;

	height: 300px;

}

.clabel {

	padding: 7px 25px !important;

	width:fit-content;

	font-weight: normal;

	font-size: 14px;

	color: #fff;

	text-align: center;

	background: rgba(0, 0, 0, 0.6);

	border-radius: 15px;

}



.materialboxs{

	display: flex;

	flex-direction: row;

	max-width: 360px;

	height: 165px;

	background: rgba(0, 0, 0, 0.1);

	border-radius: 7px;

}

.materialbox{

	display: flex;

	flex-direction: column;

	width: 120px;

	height: 140px;

	font-weight: normal;

	font-size: 13px;

	color: #fff;

	text-align: center;

	gap: 5px;

}

.materialbox img{

	width: 120px;

	height: 120px;

}







.scenetitle {

	color: #FFFFFF;

	font-family: frutiger ;

	font-size: 12px ;

}

.scenenumber{

	color: #317f93;

	font-family: frutiger ;

	font-size: 12px ;

}

.versiontext{

	color:#FFFFFF;

	font-family:frutiger;

	font-size:10px;

	letter-spacing: 1.1px;

	font-weight:bold;

}

.versionnumber{

	color:#FFFFFF;

	font-family:frutiger;

	font-size:8px;

	letter-spacing: 1.1px;

	font-weight:bold;

}











.sidemenutitle{

	color:#ffffff;

	font-family:Aller;

	font-weight:bold;

	margin: 17px 0 0 30px;

	text-align:left !important;

	font-size:1.1em;

	letter-spacing: 1.1px;

}

.sidephonebox{

	line-height:18px;

	color:#9a9a9a;

	font-family:Aller;

	font-weight:bold;

	padding: 0 10px;

	text-align:left !important;

	font-size:1.2em;

	letter-spacing: 1.1px;

}

.sidemenuphone{

	color: #317f93;

	text-decoration: none;

}

.sidemenuphone:hover{

	color: #788888 !important;

}

.sidemenuemail{

	line-height:18px;

	text-decoration: none;

	color: #747474;

	font-family:Aller;

	font-weight:bold;

	padding: 0 10px;

	text-align:left !important;

	font-size:1.2em;

	letter-spacing: 1.1px;

}

.sidemenuemail:hover{

	color: #788888 !important;

}

.sidemenucontact{

	color:#747474;

	font-family:Aller;

	font-weight:bold;

	font-size:1.3em;

	margin:16px 0 0 67px;

	text-align:left !important;

	letter-spacing: 1.1px;

}

.sidelisttitle{

	color:#747474;

	font-family:Aller;

	margin-left:60px;

	font-size:1.3em;

	margin-top:7px;

	text-align:left !important;

}

.sidesiteinfo{

	color:#747474;

	font-family:Aller;

	font-weight:bold;

	font-size:1.2em;

	letter-spacing: 1.1px;

}

.sidemenuitem{

	color:#747474;

	font-family:Aller;

	font-weight:bold;

	font-size:1.3em;

	margin:11px 0 0 67px;

	text-align:left !important;

	letter-spacing: 1.1px;

}













.slider{

	box-sizing: border-box;

	display:grid;

	grid-template-columns: 48% 48%;

	grid-template-areas:

	'ititle islider'

	'igrid islider'

	'ilogo islider';

	scrollbar-color: transparent transparent; /* thumb and track color */

	scrollbar-width: 0px;

}

.carousel {

  margin-top:25px;

  position: relative;

  filter: drop-shadow(0 0 10px #0003);

  perspective: 100px;

  width:550px !important;

  height:550px !important;

}

.carousel img{

	width:550px !important;

	height:550px !important;

}

.material_box{

	display:flex;

	flex-direction:row;

	justify-content:start;

	margin-top:10px;

}

.material{

	padding-right:10px;

}

.material img{

	height:100px !important;

	width:100px !important;

}

.ititle{

	margin-top:20px;

	width:90%;

	margin-right:15px;

	grid-area: ititle;

}

.ilogo { 

	width:95% !important;

	grid-area: ilogo;

	margin-top:-7px;

}

.ilogo a{ 

	margin-left:40%;

}

.islider {

	grid-area: islider;

}

.igrid{

	width:97%;

}

.igrid img{

	width:100% !important;

	height:auto;

}

.closebutton{

	width:30px;

	height:30px;

	top:5px;

	right:5px;

	cursor:pointer;

	position:absolute;

}









.video_box{

	display:flex;

	justify-content:center;

	align-items: center;

	pointer-events: all !important;

	padding-top: 25px;

}

.video_item{

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-items: center;

}

.video_thumb{

	margin: 5px 25px;

	width:150px;

	height:150px;

	cursor:pointer;

	border: 2px solid #cacaca;

	border-radius: 5px;

	pointer-events: all !important;

}

.video_thumb:hover{

	border: 2.5px solid #000000;

}









.promotion{

	box-sizing: border-box;

	padding:15px 20px 20px 20px;

}

a{

	text-decoration: none !important;

}

.promstyle{

	display:flex;

	flex-direction:row;

	align-items:center !important;

}

.promstyle h2{

	margin-left: 20px;

	font-family: Ivardisplay !important;

	font-size: 25px;

	font-weight: 150 !important;

	letter-spacing: 2px;

	text-align : left !important;

	color: #7d7d7d;

}

.promotion .text{

	color:#7d7d7d !important;

}

.promstyle img{

	width:50px;

	height:50px;

}

.welcome{

	padding:5px 20px 20px 20px;

	box-sizing: border-box;

	color:#ffffff;

}

h1.wel_header{

	font-family: Ivardisplay !important;

	font-size: 35px;

	font-weight: 200 !important;

	letter-spacing: 2px;

	text-align : left !important;

}

.wel_text{

	display:flex;

	flex-direction:row;

	margin-bottom:20px;

	align-items:center;

}

.infostyle{

	display:flex;

	flex-direction:row;

	margin-bottom:20px;

	align-items:center;

}

.infostyle img{

	width:50px;

	height:50px;

	margin-right:20px !important;

}

.hilfe{

	padding:20px;

	box-sizing: border-box;

}



@media only screen and (max-width: 600px) {

	h1.wel_header{

		font-size: 18px;

		font-weight: 130 !important;

	}

	.wel_text .text{

		font-size: 16px !important;

		line-height: 19px !important;

	}

}



@media only screen and (max-width: 1600px) {

	.carousel img{

		width:420px !important;

		height:420px !important;

	}

	.carousel {

		width:420px !important;

		height:420px !important;	

	}

	p.text {

		line-height: 18px;

		font-size:0.8em !important;

	}

	.material img{

		height:70px !important;

		width:70px !important;

	}

	h1.top{

		font-size: 1.7em;

		font-weight: 150;

		letter-spacing: 1.5px;

	}

	h2.designer{

		font-size: 1em;

	}

	.ilogo{

		margin-top:5px;

	}

}



@media only screen and (max-width: 1100px) {

	.slider {

		grid-template-columns: 100%;

		grid-template-areas:

		'ititle'

		'islider'

		'ilogo';

		justify-items:center !important;

	}

	.ititle{

		width:100%;

		margin-right:0px;

	}

	.carousel img{

		width:330px !important;

		height:330px !important;

	}

	.carousel {

		width:330px !important;

		height:330px !important;	

	}

}

@media only screen and (max-width: 900px) {

	.slider{

		grid-template-columns: 98%;

		grid-template-areas:

		'ititle'

		'islider'

		'igrid'

		'ilogo';

		grid-row-gap:20px;

	}

	.igrid{

		margin-top:10px;

		grid-column: 1 / span 2;

		width:350px;

	}

	.ilogo p{

		text-align:center;

	}

	.ilogo { 

		margin-top:5px;

	}

	.closebutton{

		right:5px;

	}

}





.carousel__viewport {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  display: flex;

  overflow-x: scroll;

  counter-reset: item;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

}



.carousel__slide {

  position: relative;

  flex: 0 0 100%;

  width: 100%;

  background-color: #ffffff;

  counter-increment: item;

}



.carousel__slide:before {

  content: counter(item);

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate3d(-50%,-40%,70px);

  color: #fff;

  font-size: 2em;

}



.carousel__snapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  scroll-snap-align: center;

  overflow-y: hidden;

}



@media (prefers-reduced-motion: reduce) {

  .carousel__snapper {

    animation-name: none;

  }

}



.carousel:hover .carousel__snapper,

.carousel:focus-within .carousel__snapper {

  animation-name: none;

}



.carousel__navigation {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  text-align: center;

}



.carousel__navigation-list,

.carousel__navigation-item {

  display: inline-block;

}



.carousel__navigation-button {

  display: inline-block;

  width: 1.5rem;

  height: 1.5rem;

  background-color: #333;

  background-clip: content-box;

  border: 0.25rem solid transparent;

  border-radius: 50%;

  font-size: 0;

  transition: transform 0.1s;

}



.carousel::before,

.carousel::after,

.carousel__prev,

.carousel__next {

  position: absolute;

  top: 0;

  margin-top: 50%;

  width: 4rem;

  height: 4rem;

  transform: translateY(-50%);

  border-radius: 50%;

  font-size: 0;

  outline: 0;

}



.carousel::before,

.carousel__prev {

  left: 1rem;

}



.carousel::after,

.carousel__next {

  right: 1rem;

}



.carousel::before,

.carousel::after {

  content: '';

  z-index: 1;

  color: #747474 !important;

  height:25px;

  width:25px;

  pointer-events: none;

}



.carousel::before {

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%237474'/%3E%3C/svg%3E");

}



.carousel::after {

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%237474'/%3E%3C/svg%3E");

}