.yofla360{
  position: relative;
  border: 1px solid silver;
  min-width: 300px;
  min-height: 300px;
  max-width: 100%;
  background: white;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

.yofla360.yofla360--noborder{
  border: 0px;
}

.yofla360:fullscreen {
  width: 100%;
  height: 100%;
}

.yofla360:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

.yofla360:-moz-full-screen {
  width: 100vw;
  height: 100vh;
}

.yofla360:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
}

.yofla360:fullscreen {
  width: 100vw;
  height: 100vh;
}

.yofla360--controls-below .yofla360__images,
.yofla360__images{
  position: absolute;
  z-index: 0;
  background: none;
  width: 100%;
  height: calc(100% - 40px); /* height of controls */
  display: block;
  overflow: hidden;
}

.yofla360--controls-over .yofla360__images{
  height: 100%;
}

.yofla360__controls{
  position: absolute;
  z-index: 1;
  bottom: 3px;
  height: 27px;
  width: 100%;
  background: none;
  display: none;
}

.yofla360__button {
  width: 22px;
  height: 22px;
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: absolute;
  outline: none;
}

.yofla360__button .button__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.yofla360__button .button__text {
  display: none;
}

.yofla360__button.yofla360__button--hidden {
  display: none;
}

.yofla360__button.yofla360__button--play {
  left: 5px;
}

.yofla360__button.yofla360__button--left {
  left: 32px;
}

.yofla360__button.yofla360__button--right {
  left: 59px;
}

.yofla360__button.yofla360__button--fullscreen {
  right: 5px;
}


.button__icon--play {
  background: no-repeat url(assets/button-play.png);
}

.yofla360__button:hover .button__icon--play {
  background: no-repeat url(assets/button-play-over.png);
}

.button__icon--left {
  background: no-repeat url(assets/button-left.png);
}

.yofla360__button:hover .button__icon--left {
  background: no-repeat url(assets/button-left-over.png);
}

.button__icon--right {
  background: no-repeat url(assets/button-right.png);
}

.yofla360__button:hover .button__icon--right {
  background: no-repeat url(assets/button-right-over.png);
}

.button__icon--fullscreen {
  background: no-repeat url(assets/button-fullscreen.png);
}

.yofla360__button:hover .button__icon--fullscreen {
  background: no-repeat url(assets/button-fullscreen-over.png);
}


.yofla360__preloader {
  position: absolute;
  top: calc(50% - 20px);

  height: 30px;
  width: calc(100% - 20px);

  margin-left: 10px;
  background: gray;
  display: none;

  opacity: 0.8;
  border: 1px solid gray;
}

.yofla360__preloader .yofla360__preloader-bar{
  position: absolute;
  z-index: 0;
  background: #eee;
  height: 100%;
  width: 0%;
}

.yofla360__preloader .yofla360__preloader-text {
  position: absolute;
  z-index: 1;
  color: #222;
  font-size: 20px;
  font-family: sans-serif;
  line-height: 32px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.yofla360__start-button {
  height: 100px;
  width: 100px;
  background: no-repeat url(data:image/svg+xml;utf8,<svg viewBox="0 0 60 60" width="60" height="60" style="enable-background:new 0 0 60 60;" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1, 0, 0, 1, 0, 0)"> <ellipse transform="matrix(-0.765486, 0.643452, -0.643452, -0.765486, 59.141571, 30.53245)" cx="22.359" cy="19.667" rx="25.467" ry="25.467" style="fill-opacity: 1; fill: rgb(122, 122, 122);"/> <path d="M 43.329 29.2 L 23.585 15.739 C 23.309 15.552 22.954 15.531 22.66 15.687 C 22.366 15.842 22.182 43.403 22.182 43.403 C 22.182 43.736 22.366 44.041 22.66 44.197 C 22.791 44.267 22.936 44.301 23.08 44.301 C 23.256 44.301 23.433 44.248 23.585 44.145 L 43.329 30.683 C 43.574 30.516 43.721 30.239 43.721 29.942 C 43.721 29.645 43.574 29.367 43.329 29.2 Z" style="vector-effect: non-scaling-stroke; stroke-width: 2; fill: rgb(255, 255, 255); stroke: rgb(254, 255, 250);"/> <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" d="M 9.273 15.438"/> </g> </svg> ');
  background-size: 100%;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  display: none;
  cursor: pointer;
}

.yofla360__start-button:hover {
  filter: brightness(1.2);
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(assets/button-left-over.png) url(assets/button-play-over.png) url(assets/button-right-over.png) url(assets/button-fullscreen-over.png);
}