html{
  padding: 0;
  margin: 0;
}

 body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
background:gray;
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;

}

*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.content{max-width:1100px;margin:auto;position:relative;}

.wrapper360{
  width: 100%;position:relative;
padding-bottom: 100%;
}

.container360{
  position: absolute;
  width: 100%;
background:white;
  height: 100%;
    cursor: ew-resize;
}

.image360 {
  position: absolute;
  left: 0%;
  top: 0%;
width:100%;height:100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
 opacity: 0;
  z-index: 0;
}


.image360.visible {
  opacity: 1;
 z-index:1
}

.image360 svg{
width: 100%;
height: 100%;
opacity:0;
-webkit-transition: .5s opacity ease-in-out;
-moz-transition: .5s opacity ease-in-out;
-o-transition: .5s opacity ease-in-out;
-ms-transition: .5s opacity ease-in-out;
transition: .5s opacity ease-in-out;
}

.image360.visible svg{
opacity:1;
}

.item360 {
	stroke-width: 4px;
	cursor: pointer;
	fill-opacity: 0.5;
	stroke-opacity: 0.5;
	stroke-linejoin: round;
	stroke-alignment: inner;
	opacity:1;
	stroke:#ffffff;
	transition: stroke 0.3s, stroke-width 0.3s, fill 0.3s, opacity 0.5s, fill-opacity 0.5s, stroke-opacity 0.5s;
}
 

.item360.available{
  fill: #51b300;
}

.item360.sold{
  fill: #ff1616;
  cursor: default;
}

.item360.reserved{
  fill: #ffcc00;
  cursor: default;
}

.item360.hover,
.item360:hover{
	fill-opacity:0.8;
	stroke-opacity: 1;
}



/*=======================
	arrows
=======================*/

.next360,
.prev360 {
  width: 86px;
  height: 60px;
  -webkit-transition: -webkit-transform .8s ease-in-out;
  -ms-transition: -ms-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
  cursor: pointer;
  display: block;background-size: 100% auto;
background-position:center center;
background-repeat:no-repeat;
border: none;
background-color: transparent;
line-height: 100em;
overflow: hidden;

  position: absolute;
  top: 50%;
  z-index: 100;
  margin-top: -43px;
}

.next360{
background-image: url(./images/arrow-right-black.svg);
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);

right:20px;
}
.prev360 { 
 background-image: url(./images/arrow-left-black.svg);
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
left:20px;
}

.next360:hover{
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}

.prev360:hover { 
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}



/*=======================
	tooltip360
=======================*/

.tooltip360{
  position: absolute;
  top: 50px;
  right: 50px;
  color: white;
  display: none;
  z-index: 10;
  background: #484646;
  right: auto;
  font-size: 15px;
  line-height: 20px;
  padding: 5px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
}

.tooltip360-inner ul {
list-style:none;padding:0px;margin:0px;
}

.tooltip360-inner ul li{
display:none;
}


.objekt360-title{
font-weight:700;
}


/*=======================
	zoomButtons
=======================*/

.zoomer360{
  position: absolute;
  top: 0;
  z-index: 10;
}

.zoomer360 button{
  padding: 5px 10px;
  background: black;
  color: white;
  border: none;
cursor:pointer;
font-size:20px;
}


/*=======================
	single
=======================*/

.images0 .container360{
cursor: unset;
}

.images0 .controller360{display:none;}