/* pano2vr */
html {
	height:100%;
}
body {
	height:100%;
	margin: 0px;
	overflow:hidden;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
	background-color: rgba(0,0,0,0.5);
	width: 0.75em;
}
::-webkit-scrollbar-thumb {
	background-color:  rgba(255,255,255,0.5);
}
/* gallery */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    grid-gap: 4px;
}
.gallery-item {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%238E8E8E"></stop><stop offset=".3" stop-color="%238E8E8E" stop-opacity=".9"></stop><stop offset=".6" stop-color="%238E8E8E" stop-opacity=".6"></stop><stop offset=".8" stop-color="%238E8E8E" stop-opacity=".3"></stop><stop offset="1" stop-color="%238E8E8E" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%238E8E8E" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');	
	background-repeat: no-repeat;
	background-position: center center;
    aspect-ratio: 1;
	overflow: hidden;
}
.gallery-item img {
  object-fit: cover;
  max-width: 100%;
  height: 100%;
  border-radius: 5px;
}
@media (min-width: 450px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 8px;
    }
    
}