.switch{
margin:0 0 80px 40px;
padding:0 0 10px 0;
}
.switch li{
margin:0 10px 0 0;
padding:10px;
float:left;
font-size:75%;
border:solid 1px #444;
border-radius:3px;
}
li.on{
background:#777;
}

.gallery {
clear:left;
margin:40px;
width:200px;
height:200px;
//overflow:hidden;
}
.gallerystage{
  perspective: 500px;
}
.gallerycube{
transform-style: preserve-3d;
width:200px;
height:200px;
position:absolute;
top:0;
}
.gallery div{
position: absolute;
top: 0;
left: 0;
width:200px;
height:200px;
display:flex;
flex-wrap: wrap;
}
#gallery1 {
  transform: translateZ(100px);
  opacity:0.8;
}
#gallery2 {
  left: auto;
  right: -100px;
  transform: rotateY(-270deg);
  opacity:0.8;
}
#gallery3 {
  top: auto;
  bottom: -100px;
  transform: rotateX(-90deg);
  opacity:0.8;
}

.gallery figure{
margin:0;
padding:0;
width:100px;
height:100px;
}
.gallery img {
width:100px;
height:100px;
object-fit: cover;
mask-size: cover;
}

.gallerycube.g2tog1rotate{
  animation: g2tog1rotateAnime forwards 3s ease-out 1;
}
@keyframes g2tog1rotateAnime {
  0% {
    transform: rotateX(0deg) rotateY(-90deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
.gallerycube.g3tog1rotate{
  animation: g3tog1rotateAnime forwards 3s ease-out 1;
}
@keyframes g3tog1rotateAnime {
  0% {
    transform: rotateX(90deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

.gallerycube.g1tog2rotate{
  animation: g1tog2rotateAnime forwards 3s ease-out 1;
} 
@keyframes g1tog2rotateAnime {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(-90deg);
  }
}
.gallerycube.g3tog2rotate{
  animation: g3tog2rotateAnime forwards 3s ease-out 1;
}
@keyframes g3tog2rotateAnime {
  0% {
    transform: rotateX(90deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(-90deg);
  }
}

.gallerycube.g1tog3rotate{
  animation: g1tog3rotateAnime forwards 3s ease-out 1;
} 
@keyframes g1tog3rotateAnime {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(0deg);
  }
}
.gallerycube.g2tog3rotate{
  animation: g2tog3rotateAnime forwards 3s ease-out 1;
} 
@keyframes g2tog3rotateAnime {
  0% {
    transform: rotateX(0deg) rotateY(-90deg);
  }
  100% {
    transform: rotateX(90deg) rotateY(0deg);
  }
}

.gallerycube.g4rotate{
  animation: g4rotateAnime 3s linear 1;
}
@keyframes g4rotateAnime {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

.gallery figcaption{
display:inline;
position:relative;
top:-25px;
left:5px;
padding:3px;
background:#fff;
font-size:50%;
border-radius:5px;
}