.d2{width:100%;}

.floating{top:10px; right:10px; position:fixed; cursor: pointer; 
  width: 15vh;  text-align: right;}
.pk{Font-size: 3vh; text-align: right; }

.v0{background-image: url('../texture/p_natural.jpg');}
.v1{background-image: url('../texture/t10.jpg');}
.v2{background-image: url('../texture/t13.jpg');}
.v3{background-image: url('../texture/t15.jpg');}
.v4{background-image: url('../texture/t21.jpg');}
.v5{background-image: url('../texture/t22.jpg');}
.v6{background-image: url('../texture/t28.jpg');}


.r1{background-image: url('../texture/r1.jpg');}
.r2{background-image: url('../texture/r2.jpg');}
.r3{background-image: url('../texture/r3.jpg');}
.border{ 
background-color: rgb(237, 237, 237);border:4px solid rgb(255, 0, 0);
}
.border2{border:4px solid rgb(255, 0, 0);}
.hide{display: none;}
.flex{display: flex;
	flex-direction: row;
		justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;}

canvas{margin: 0 auto;}

.link{margin-bottom: 10px;}

   
    .back{bottom:10px; margin:0 10px; position:fixed; cursor: pointer;}

    #pano{min-height: 100vh; width:100%;}
    #main{height: 100vh; width:100%;} 
    .conf{position: fixed; bottom:0px; width: 100%;}


    .flex-container {
      display: flex;
      flex-flow: row wrap;
      justify-content:right;
      padding: 0;
      margin: 0;
    }
    
    .flex-item {
      width: 80px;
      min-height: 40px;

      color: rgb(0, 0, 0);
      font-weight: bold;
      font-size: 3em;
      display: inline-block;
      align-self: flex-start;
    }
    .flex-item-2 {
        
        min-height: 30px;
        padding-top: 8px;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        display: inline-block;
        margin:0 auto;
      }
        .flex-item-3 {
         
        min-height: 30px;
        padding-top: 8px;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        display: flex;
        margin:0 auto;
        flex-flow: row wrap;
        justify-content: center;

        
      }
    .s { 
        font-size:1.5rem;  
        cursor: pointer;  
        line-height: 100%;  
        padding-bottom: 2px;
        }

        .r{width:10vh; height:10vh;  border:1px solid gray; display: block; cursor: pointer; background-size:cover;}


    .v{width: 90%; height:4.3vh; background-size:cover;   margin:0 auto;  margin-bottom:5px; border:1px solid gray; cursor: pointer;}

.line2{display:inline-block; margin: 0 ; text-align: center;}
.link {width: 70%;}




.custom-hotspot {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid rgb(215, 12, 12);
}


#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

#loader-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 20px;
  background-color: #ddd;
}

#loader-progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
}