.video-360-thumb img {
  height: auto;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-360-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.video-360-container.loading {
  background-color: #fff;
  opacity: 50%;
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23333%22%3E %20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E %20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%281%201%29%22%20stroke-width%3D%222%22%3E %20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20stroke-opacity%3D%22.5%22%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%2F%3E %20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M36%2018c0-9.94-8.06-18-18-18%22%3E %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CanimateTransform %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20attributeName%3D%22transform%22 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3D%22rotate%22 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20from%3D%220%2018%2018%22 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20to%3D%22360%2018%2018%22 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dur%3D%221s%22 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20repeatCount%3D%22indefinite%22%2F%3E %20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fpath%3E %20%20%20%20%20%20%20%20%3C%2Fg%3E %20%20%20%20%3C%2Fg%3E %3C%2Fsvg%3E");
}

.video-360-container video {
  min-height: 100%;
  min-width: auto;
  max-width: 100%;
  max-height: 100%;
}

.video-label {
    position: absolute;
    left: 0;
    background-color: #ffffffcf;
    padding: 5px;
    border-radius: 0;
    font-weight: bold;
    bottom: 0;
    right: 0;
    text-align: center;
}

    /**position: absolute;
    left: calc(25% - 5px);
    top: 70%;
    background-color: #fff;
    padding: 5px;
    border-radius: 20px;
    font-weight: bold;**/

.close-button {
  color: #333;
  background-color: #fff;
  border-radius: 100%;
  padding: 5px;
  height: 30px;
  width: 30px;
  position: absolute;
  margin: 20px 40px;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.close-button::before {
  content: "X";
}

.video-360-button {
    position: absolute;
    bottom: 15%;
    right: 50%;
    transform: translate(50%, 0);
    background-color: #fff;
    border-radius: 0;
    z-index: 9;
    padding: 10px;
    font-size: 1.2em;
    border: 1px solid grey;
}

.swiper-pagination {
  z-index: 8;
}

.video-360-container img {
    position: absolute;
    width: 80px;
    background-color: #fff;
    padding: 8px 10px 8px 6px;
    border-radius: 50px;
}