#buffer_wrapper{
    position:relative;
    /*background:#333;*/
    /*height:100%;*/
}

iframe {
  position:absolute; 
  right:0; 
  bottom:0; 
  left:0; 
  top:0; 
  overflow-y: scroll; 
  -webkit-overflow-scrolling: touch;
}

.profile-main-loader{
    left: 50% !important;
    margin-left:-100px;
    position: fixed !important;
    top: 50% !important;
    margin-top: -100px;
    width: 45px;
    z-index: 9000 !important;
}

.profile-main-loader .loader {
  position: relative;
  margin: 0px auto;
  width: 200px;
  height:200px;
}
.profile-main-loader .loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-loader {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

/*.loader-path:hover, .circular-loader:hover{
  -webkit-animation-play-state: paused;
    animation-play-state: paused;
    visibility: hidden;
}*/

.loader-path {
    stroke-dasharray: 68,7;
    stroke-dashoffset: -6;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
  }

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,75;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 53,75;
    stroke-dashoffset: -21;
  }
  100% {
    stroke-dasharray: 53,75;
    stroke-dashoffset: -74;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,75;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 53,75;
    stroke-dashoffset: -21;
  }
  100% {
    stroke-dasharray: 53,75;
    stroke-dashoffset: -74;
  }
}

@media(min-width: 815px){
  .loader-path {
    stroke-dasharray: 115,11;
    stroke-dashoffset: -10;
    stroke-width:2;
  }

  @-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,126;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,126;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,126;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
    0% {
      stroke-dasharray: 1,126;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89,126;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 89,126;
      stroke-dashoffset: -124;
    }
  }
}

@font-face {
  font-family: avenirnext-bold;
  src: url(../skin/fonts/AvenirNext-Bold-01.ttf) format("truetype");
}

@font-face {
  font-family: avenirnext-medium;
  src: url(../skin/fonts/AvenirNext-Medium-06.ttf) format("truetype");
}

@font-face {
  font-family: avenirnext-regular;
  src: url(../skin/fonts/AvenirNext-Regular-08.ttf) format("truetype");
}

 /*@-webkit-keyframes color {
  0% {
    stroke: #629bd0;
  }
  40% {
    stroke: #629bd0;
  }
  66% {
    stroke: #629bd0;
  }
  80%, 90% {
    stroke: #629bd0;
  }
  0% {stroke: #dddddd;}
  50% {stroke: #629bd0;}
  100% {stroke: #dddddd;}
}*/
/*@keyframes color {
  0% {
    stroke: #629bd0;
  }
  40% {
    stroke: #629bd0;
  }
  66% {
    stroke: #629bd0;
  }
  80%, 90% {
    stroke: #629bd0;
  }
  0% {stroke: #dddddd;}
  50% {stroke: #629bd0;}
  100% {stroke: #dddddd;}
}*/

#pano {
  width: 100%;
  height: 100%;
}

@media only screen and (max-height: 625px) and (min-width: 820px) {
  #pano {
    width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 575px) and (min-width: 820px) {
  #pano {
    width: 70%;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 525px) and (min-width: 820px){
  #pano {
    width: 60%;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 475px) and (min-width: 820px){
  #pano {
    width: 50%;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 425px) and (min-width: 820px) {
  #pano {
    width: 40%;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 375px) and (min-width: 820px) {
  #pano {
    width: 30%;
    margin: 0 auto;
  }
}