html{
  padding: 0;
  margin: 0;
}

 body.twin {
  padding: 0;
  margin: 0;
  position: relative;
background:white;
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: #080708;
}

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

.content-twin{

display:flex;min-width:100%;
justify-content:center;
align-items:center;
}

.content-twin2{min-height:100vh;  overflow: hidden;
}

.center-twin{max-width:1200px;margin:auto;position:relative;  width: 100%;}

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


.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: 100% auto;
  background-repeat: no-repeat;
 opacity: 0;
  z-index: 0;
}

.image360.visible {
  opacity: 1;
 z-index: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);
}



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

.images0 .container360{
cursor: unset;
}

.images0 .controller360{display:none;}


/*=======================
	infoboxes
=======================*/

.infobox{
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
padding:20px;
background:rgba(255,255,255,0.8);

  position: absolute;
  left: 0px;
  top: 20px;
  z-index: 100;
  max-width: 400px;
display:none;
}

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

.infobox{
  max-width: 90%;left:5%;
}

}


.infobox.active{display:block;}


.close-info{ 
 width: 36px;
  height: 36px;
  background: url(./images/close.svg) no-repeat center center white;
  background-size: 15px auto;
  line-height: 100em;
  overflow: hidden;
  display: block;
  position: absolute;
  top: -10px;
  right: -10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
cursor:pointer;
}

.content-twin h2{
color:#cf2c20;
font-size:20px;line-height:30px;
margin:0px 0px 10px;
}

.infoboxes img{
border: 0;
  max-width: 100%;
  height: auto;
  width: auto;
}

.content-twin strong{font-weight:700;}
.content-twin p{margin:0px 0px 10px;}


/*=======================
	poslední
=======================*/

.iner-360{
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
opacity:0;
}

.image360-0[data-index^="1"] .iner-360-1{opacity:1;}
.image360-0[data-index^="2"] .iner-360-2{opacity:1;}
.image360-0[data-index^="3"] .iner-360-3{opacity:1;}
.image360-0[data-index^="4"] .iner-360-4{opacity:1;}
.image360-0[data-index^="5"] .iner-360-5{opacity:1;}
.image360-0[data-index^="6"] .iner-360-6{opacity:1;}
.image360-0[data-index^="7"] .iner-360-7{opacity:1;}

/*
.image360-23[data-index^="1"]{background-image: url('./images/jpg/stageV0024.jpg') !important;}
.image360-23[data-index^="2"]{background-image: url('./images/jpg/stageV0025.jpg') !important;}
.image360-23[data-index^="3"]{background-image: url('./images/jpg/stageV0026.jpg') !important;}
.image360-23[data-index^="4"]{background-image: url('./images/jpg/stageV0027.jpg') !important;}
.image360-23[data-index^="5"]{background-image: url('./images/jpg/stageV0028.jpg') !important;}
.image360-23[data-index^="6"]{background-image: url('./images/jpg/stageV0029.jpg') !important;}
.image360-23[data-index^="7"]{background-image: url('./images/jpg/stageV0030.jpg') !important;}

*/

/*=======================
	dvirka
=======================*/

#dvirka1{
  width: 22.3854166666%;
  background-repeat: no-repeat;
  background-image: url(./images/dvirka1.png);
  background-size: auto 100%;
  background-position: 0px 0px;
  position: absolute;
  top: 41.83333333%;
  left: 63.6978916666%;}


#dvirka1 .dvirka-inner{
  padding-bottom: 79.06458797327394%;

}

#dvirka2 .dvirka-inner{
  padding-bottom: 75.16129032258%;
}


#dvirka2{
width:16.14583333333%;
  top: 49.25%;
  left: 64.0625%;
background-image:url(./images/dvirka2.png);
background-repeat:no-repeat;
background-size:auto 100%;
background-position: 0px 0px;
  position: absolute;

}



 


/*=======================
	body
=======================*/


a.point{
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #cf2c20;
  color: white;
  text-decoration: none;
  width: 34px;
  height: 34px;
  font-size: 19px;
  line-height: 34px;
  text-align: center;
  display: block;
  font-weight: 700;

  position: absolute;
  top: 0px;
  left: 0px;
}


a.point:hover{background:black;}


/** 1 **/
a.point1{left:50%;top:25%;}

/** 2 **/
a.point2{left:32%;top:53%;}

.image360-1 a.point2{left:30%;top:52%;}
.image360-2 a.point2{left:30%;top:51%;}
.image360-3 a.point2{left:31%;top:50%;}
.image360-4 a.point2{left:34%;top:47%;}
.image360-5 a.point2{left:39%;top:49%;}
.image360-19 a.point2{left:61%;top:55%;}
.image360-20 a.point2{left:54%;top:56%;}
.image360-21 a.point2{left:47%;top:56%;}
.image360-22 a.point2{left:41%;top:55%;}
.image360-23 a.point2{left:36%;top:55%;}

/** 4 **/
a.point4{left:83%;top:51%;}
.image360-3 a.point4{left:79%;top:54%;}
.image360-4 a.point4{left:73%;top:56%;}
.image360-5 a.point4{left: 64%;  top: 57%;}
.image360-6 a.point4{left: 53.5%;  top: 58%;}
.image360-7 a.point4{left: 42.5%;  top: 57.5%;}
.image360-8 a.point4{left: 33%;  top: 56%;}
.image360-9 a.point4{left: 26.5%;  top: 55%;}
.image360-10 a.point4{left: 22.5%;  top: 53%;}


/** 3 **/




a.point3{left:82%;top:56%;}

.image360-15 a.point3{left: 78%;  top: 59%;}
.image360-16 a.point3{left: 72%;  top: 62%;}
.image360-17 a.point3{left: 63%;  top: 62.5%;}
.image360-18 a.point3{left: 52%;  top: 64%;}
.image360-19 a.point3{left: 42%;  top: 63%;}
.image360-20 a.point3{left: 33%;  top: 62%;}
.image360-21 a.point3{left: 26%;  top: 59%;}
.image360-22 a.point3{left: 22%;  top: 58%;}




/** 5 **/
a.point5{left:65%;top:40%;}

.image360-8 a.point5{left: 69%;  top: 40%;}
.image360-9 a.point5{left: 71%;  top: 40%;}
.image360-10 a.point5{left: 72%;  top: 41%;}
.image360-11 a.point5{left: 71%;  top: 42%;}
.image360-12 a.point5{left: 70%;  top: 43%;}
.image360-13 a.point5{left: 66%;  top: 44%;}
.image360-14 a.point5{left: 61%;  top: 44%;}
.image360-15 a.point5{left: 55%;  top: 45%;}
.image360-16 a.point5{left: 49%;  top: 44%}
.image360-17 a.point5{left: 43%;  top: 45%;}


@media all and (max-width: 720px) {



.content-twin {
  margin: 0px 0px;
}

.next360, .prev360{
  width: 46px;
  height: 32px;  margin-top: -16px;
}

.infobox{
    position: relative;
    margin: auto;
    left: 0%;
  top: 0px;
}


.center-twin2{margin:0px -20px;}

}