.yofla360{
  border: 1px solid transparent !important;
  position: relative;
   min-width: 300px;
  min-height: 300px;
  max-width: 100%;
  width: {playerWidth};
  height: {playerHeight};
  background: #fff;
}

.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: none;
  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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDU5Q0U3OTgwNTIxMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDU5Q0U3QTgwNTIxMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY0NTlDRTc3ODA1MjExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY0NTlDRTc4ODA1MjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+F5gblgAAAFtJREFUeNpi1NfXZ6AMsADxhQsXyNZvYGDAxEAxGDWCkBFiYIDMpYIr8JhCgkdwmUJaWGA1he4x8urVK4qMwKqfBCNw6YfmVIIa8OgfzWbUNoIFUv5RYgRAgAEA/pYTkXmNDMkAAAAASUVORK5CIIA=');
}

.yofla360__button:hover .button__icon--play {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDU5Q0U3RDgwNTIxMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDU5Q0U3RTgwNTIxMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY0NTlDRTdCODA1MjExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY0NTlDRTdDODA1MjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+4xsJrgAAAF1JREFUeNpi1NfXZ6AMsADxhQsXydZvYKDPxEAxGDWCkBFiYqJAhMylgivwmEKCR3CZQlpYYDWF7jHy6tVriozAqp8EI3Dph+ZUghrw6B/NZtQ2ggVS/lFiBECAAQDzbxOP1i/+5wAAAABJRU5ErkJggg==');
}

.button__icon--left {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENUU1N0M4QTgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENUU1N0M4QjgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY0NTlDRTdGODA1MjExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY0NTlDRTgwODA1MjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kIqd/AAAAGdJREFUeNpiNDAwYKAMsADx+fPnydZvaGjIxEAxGClGiIuLU2QEMfrxGUGkfmi6wK8fmf3y5UuiXEG8/bSMEayuJTksgKbAvUPQRJweId4t+MKCSFMIBCcxpoxmdtR0ASz/KDECIMAAoAMZVxJI4ywAAAAASUVORK5CIIA=');
}

.yofla360__button:hover .button__icon--left {
   background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENUU1N0M4RTgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENUU1N0M4RjgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1RTU3QzhDODA1QTExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ1RTU3QzhEODA1QTExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+H7dVFwAAAGNJREFUeNpiNDAwYKAQAI34/5+BbATUzsRAMRgpRoiLi1FkBDH68RlBpH4gYCGoH5n98uUrolxBvP20jBGsriU5LICmwL1D0EScHiHeLfjCgkhTCAQnMaaMZnYEYKS8+AUIMAAlLT9Fn1o5BQAAAABJRU5ErkJggg==');
}

.button__icon--right {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUJDODM3MzgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUJDODM3NDgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1RTU3Qzk0ODA1QTExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxQkM4MzcyODA1QjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vc1WFwAAAKhJREFUeNq0VIEJwCAMs7Ib9A39/wjv0CdctoKU4VRWFxBGbUPSrlIIwdyotRKR/JaRAQ6clJL5ihijNWpYqNVSrLidUGwwMs1wzm1Q4b3XUqDlAy3HQHz7u3hqCJZSVlXwmLiyTR3BriP7pvwxbEm62gvOllsDdI30eyFTIZ7puvVLExnX43ZOAS9v9Xw7p8g5/7sjlxHlsl9GNiy7/smh9vx+7sUpwACMlFhF/Kmz2wAAAABJRU5ErkJggg==');
}

.yofla360__button:hover .button__icon--right {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENUU1N0M5MjgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENUU1N0M5MzgwNUExMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1RTU3QzkwODA1QTExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ1RTU3QzkxODA1QTExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1suxJgAAAGVJREFUeNpiNDAwYKAMsADx+fMXyNZvaGjAxEAxGEFGiIuLUcEV+E0h1iN4TGEhXgNQ8OXLV5QGJ1aj6R6pWD3CQlAp3PFY9ZPgClz6iTUCj36ijMCvf2TlVKLKTmD5R4kRAAEGANigGVYOcq7GAAAAAElFTkSuQmCC');
}

.button__icon--fullscreen {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUJDODM3NzgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUJDODM3ODgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxQkM4Mzc1ODA1QjExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxQkM4Mzc2ODA1QjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+v5j+8AAAAHdJREFUeNrsU0EOwCAIE8L/v8zMlhgiFMncwcNIvADWFmpr20H9qOr7+0S8z0Isni14aqhBPCrS9eQnoB4cykuU+ySH74etIznR5KKKbEZHLPWHiCDG2umOcPi2B7JIrIkauOK/3Ltc/2aoJIjq8rMfZvAP4hJgAFknMD6G7cFVAAAAAElFTkSuQmCC');
}

.yofla360__button:hover .button__icon--fullscreen {
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUJDODM3QjgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUJDODM3QzgwNUIxMUU4QTQ0MUYxREQ3RkYyODkxMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxQkM4Mzc5ODA1QjExRThBNDQxRjFERDdGRjI4OTEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxQkM4MzdBODA1QjExRThBNDQxRjFERDdGRjI4OTEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6Z1v9AAAAHVJREFUeNrsU9EKACEIM/H/f7kTDkLSmeA99HCDIMzWzEnUxtA1Z+P+IO6rEMtn4aWhBPGsqK43vhEpOCwvqdyDw/fD1BXcZHKxiuyPrmjqTxFRrLbrBvnC5kAViTVRAlf8l3uX62OGjgRJPQ77ZQb/AI8AAwDOqSA4sQY4RQAAAABJRU5ErkJggg==');
}


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

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

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

  opacity: 0.8;
  border: 0;
  
  font-size: 20px;
  font-weight: bold;
}

.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: #fff;
  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;*/
  height: 30px;
  width: 60px;
  background: no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAeCAYAAABwmH1PAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAUcaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0NSA3OS4xNjM0OTksIDIwMTgvMDgvMTMtMTY6NDA6MjIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMTAtMjRUMTA6MjQ6MzYrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTEwLTI0VDEwOjI2OjI1KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTEwLTI0VDEwOjI2OjI1KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0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');  
  
  /* const e=PIXIM.Texture.fromImage(""); in  yofla360.js*/
  background-size: auto;
  position: absolute;
  top: calc(100% - 98%);
  right: calc(100% - 99%);
  display: block;
  cursor: pointer;
}

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