body{
background-color: transparent;
overflow:hidden;
}


@-webkit-keyframes blink {
  0% {
      opacity: 1;
  }
  49% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}
@-moz-keyframes blink {
  0% {
      opacity: 1;
  }
  49% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
      opacity: 1;
  }
  49% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}

.btn-group {


  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  height:50px;
  margin-bottom:0px;

}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
   
    max-width:100px;
    padding:15px;
    min-height:30px;
    background:#fff;
    visibility: hidden;
    border: 1px solid black;
    color: #000;
    text-align: center;
    border-radius: 6px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    word-wrap:break-word;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


.center{
position: relative;
left: 50%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
  }

.renders{
position: relative;
left: 50%;
bottom:50%;
 top:-0%;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
z-index: 0;


  }
  .masks{

    height:100%;
    position: relative;
    left: 50%;
    bottom:50%;
     top:-0%;

    
    
    position: absolute;
    visibility: visible;
    display: block;
    z-index: 1;
    opacity:2; /* Opacidad 60% */
    }
    .hide {


 
      opacity:0; /* Opacidad 60% */
      
      
  }
  


    .labels{
      pointer-events: none;
      height:100%;
      position: relative;
      left: 50%;
      bottom:50%;
       top:-0%;
      position: absolute;
      visibility: visible;
      display: block;
      z-index: 1;
    
      }
  



.threesixty-frame  {
height:100%;
visibility: visible;
 z-index: 0;
 position: absolute;
}

.highlights{
  pointer-events: none;
  height:100%;
position: relative;
left: 50%;
bottom:50%;
 top:-0%;

visibility: visible;
position: absolute;
z-index: 2;
display: none;
}


.btn-group {
z-index: 110;
margin-top: 44%;
width: 100%;
justify-content: center;

}



@media only screen and (min-width: 2100px) {





.btn-group {
  z-index: 4;
margin-top: 35%;
width: 100%;
justify-content: center;

}



}






.threesixty{
width:auto;
display:block;
margin: 0 auto; 
text-align: left; 
}


.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}




/*LOADER*/


/* Center the loader */
#loader {
     
    position: absolute;
    margin-top: 100px auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  z-index: 1;

}


.sk-fading-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

.controller{
    display:flex;
    justify-content: space-between ;
}


.control{
    width:25px;
    height:25px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left:5px;
    margin-right:5px;
    cursor:pointer;
    -webkit-transition: background-image 0.7s; /* Safari */
    transition: background-image 0.7s;
}



.icon-play{
background-image: url(../img/buttons/button-play-hover.png)
}



.icon-pause{
background-image: url(../img/buttons/button-pause-hover.png)
}



#control-left{
 background-image: url(../img/buttons/button-left.png)
}

 #control-pause{
display: none;
}





 #control-left:hover{
 background-image: url(../img/buttons/button-left-hover.png)
}

#control-right{
 background-image: url(../img/buttons/button-right.png)
}

#control-right:hover{
background-image: url(../img/buttons/button-right-hover.png)
}
#control-zoom-out{
background-image: url(../img/buttons/button-zoom_out.png)
}
#control-zoom-out:hover{
background-image: url(../img/buttons/button-zoom_out-hover.png)
}

#control-zoom-in{
background-image: url(../img/buttons/button-zoom_in.png)
}
#control-zoom-in:hover{
background-image: url(../img/buttons/button-zoom_in-hover.png)
}