css布局实现城市高楼大厦俯视三维模型效果代码

代码语言:html

所属分类:三维

代码描述:css布局实现城市高楼大厦俯视三维模型效果代码

代码标签: 城市 高楼大厦 俯视 三维 模型 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: #e1e6f0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  perspective: 1000px;
}

.panels {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateY(40px);
}

.camera {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.camera.-x {
  transform: rotateX(-20deg) scale3d(0.8, 0.8, 0.8);
}
.camera.-y {
  transform: rotateY(-45deg);
  -webkit-animation: rotateY 30s linear infinite;
          animation: rotateY 30s linear infinite;
}

@-webkit-keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.ground {
  position: absolute;
  top: calc(50% - 350px);
  left: calc(50% - 350px);
  width: 700px;
  height: 700px;
  background: #cdd2c8;
  border-radius: 100%;
  transform: rotateX(90deg) translateZ(-40px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  border: 16px solid #fff;
  box-sizing: border-box;
}
.ground .roads {
  filter: drop-shadow(0 0 1px #888);
}
.ground .road {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.ground .road:nth-child(1) {
  width: 497px;
  height: 963px;
  border: 33px solid #eee;
  transform: translate(-50%, -50%) translate(52px, 210px);
  border-radius: 95px;
}
.ground .road:nth-child(2) {
  width: 692px;
  height: 417px;
  border: 31px solid #eee;
  transform: translate(-50%, -50%) translate(-193px, -243px);
  border-radius: 87px;
}
.ground .road:nth-child(3) {
  width: 956px;
  height: 307px;
  border: 50px solid #eee;
  transform: translate(-50%, -50%) translate(463px, 9px);
  border-radius: 31px;
}
.ground .road:nth-child(4) {
  width: 228px;
  height: 134px;
  border: 58px solid #eee;
  transform: translate(-50%, -50%) translate(225px, 150px);
  border-radius: 95px;
}
.ground .road:nth-child(5) {
  width: 437px;
  height: 837px;
  border: 58px solid #eee;
  transform: translate(-50%, -50%) translate(-306px, -317px);
  border-radius: 87px;
}
.ground .road:nth-child(6) {
  width: 649px;
  height: 1034px;
  border: 60px solid #eee;
  transform: translate(-50%, -50%) translate(-380px, 488px);
  border-radius: 97px;
}
.ground .road:nth-child(7) {
  width: 926px;
  height: 465px;
  border: 57px solid #eee;
  transform: translate(-50%, -50%) translate(139px, 88px);
  border-radius: 30px;
}
.ground .road:nth-child(8) {
  width: 820px;
  height: 561px;
  border: 57px solid #eee;
  transform: translate(-50%, -50%) translate(279px, 314px);
  border-radius: 30px;
}
.ground .road:nth-child(9) {
  width: 945px;
  height: 751px;
  border: 32px solid #eee;
  transform: translate(-50%, -50%) translate(163px, -381px);
  border-radius: 25px;
}
.ground .road:nth-child(10) {
  width: 867px;
  height: 238px;
  border: 37px solid #eee;
  transform: translate(-50%, -50%) translate(32px, -330px);
  border-radius: 40px;
}

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}
.panel:nth-child(1) {
  transform: translateX(47px) translateZ(46px) translateY(-103px);
}
.panel:nth-child(1) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(1) .face.-front {
  width: 99px;
  height: 206px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(46.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(1) .face.-left {
  width: 93px;
  height: 206px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(49.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(1) .face.-top {
  width: 99px;
  height: 93px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(103px);
  background: #96918c;
}
.panel:nth-child(1) .face.-bottom {
  width: 99px;
  height: 93px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(103px);
  background: #6e6964;
}
.panel:nth-child(1) .face.-right {
  width: 93px;
  height: 206px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(49.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(1) .face.-back {
  width: 99px;
  height: 206px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(46.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(2) {
  transform: translateX(117px) translateZ(129px) translateY(-85.5px);
}
.panel:nth-child(2) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(2) .face.-front {
  width: 98px;
  height: 171px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(42px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(2) .face.-left {
  width: 84px;
  height: 171px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(49px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(2) .face.-top {
  width: 98px;
  height: 84px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(85.5px);
  background: #96918c;
}
.panel:nth-child(2) .face.-bottom {
  width: 98px;
  height: 84px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(85.5px);
  background: #6e6964;
}
.panel:nth-child(2) .face.-right {
  width: 84px;
  height: 171px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(49px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(2) .face.-back {
  width: 98px;
  height: 171px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(42px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(3) {
  transform: translateX(146px) translateZ(-61px) translateY(-65px);
}
.panel:nth-child(3) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(3) .face.-front {
  width: 40px;
  height: 130px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(38.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(3) .face.-left {
  width: 77px;
  height: 130px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(20px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(3) .face.-top {
  width: 40px;
  height: 77px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(65px);
  background: #96918c;
}
.panel:nth-child(3) .face.-bottom {
  width: 40px;
  height: 77px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(65px);
  background: #6e6964;
}
.panel:nth-child(3) .face.-right {
  width: 77px;
  height: 130px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(20px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(3) .face.-back {
  width: 40px;
  height: 130px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(38.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(4) {
  transform: translateX(-24px) translateZ(-40px) translateY(-95.5px);
}
.panel:nth-child(4) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(4) .face.-front {
  width: 91px;
  height: 191px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(4) .face.-left {
  width: 70px;
  height: 191px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(45.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(4) .face.-top {
  width: 91px;
  height: 70px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(95.5px);
  background: #96918c;
}
.panel:nth-child(4) .face.-bottom {
  width: 91px;
  height: 70px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(95.5px);
  background: #6e6964;
}
.panel:nth-child(4) .face.-right {
  width: 70px;
  height: 191px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(45.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(4) .face.-back {
  width: 91px;
  height: 191px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(5) {
  transform: translateX(-42px) translateZ(27px) translateY(-10.5px);
}
.panel:nth-child(5) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(5) .face.-front {
  width: 42px;
  height: 21px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(27px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(5) .face.-left {
  width: 54px;
  height: 21px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(5) .face.-top {
  width: 42px;
  height: 54px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(10.5px);
  background: #96918c;
}
.panel:nth-child(5) .face.-bottom {
  width: 42px;
  height: 54px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(10.5px);
  background: #6e6964;
}
.panel:nth-child(5) .face.-right {
  width: 54px;
  height: 21px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(5) .face.-back {
  width: 42px;
  height: 21px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(27px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(6) {
  transform: translateX(48px) translateZ(-39px) translateY(-60.5px);
}
.panel:nth-child(6) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(6) .face.-front {
  width: 101px;
  height: 121px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(13px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(6) .face.-left {
  width: 26px;
  height: 121px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(50.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(6) .face.-top {
  width: 101px;
  height: 26px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(60.5px);
  background: #96918c;
}
.panel:nth-child(6) .face.-bottom {
  width: 101px;
  height: 26px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(60.5px);
  background: #6e6964;
}
.panel:nth-child(6) .face.-right {
  width: 26px;
  height: 121px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(50.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(6) .face.-back {
  width: 101px;
  height: 121px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(13px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(7) {
  transform: translateX(-199px) translateZ(-161px) translateY(-107px);
}
.panel:nth-child(7) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(7) .face.-front {
  width: 104px;
  height: 214px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(22px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(7) .face.-left {
  width: 44px;
  height: 214px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(52px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(7) .face.-top {
  width: 104px;
  height: 44px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(107px);
  background: #96918c;
}
.panel:nth-child(7) .face.-bottom {
  width: 104px;
  height: 44px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(107px);
  background: #6e6964;
}
.panel:nth-child(7) .face.-right {
  width: 44px;
  height: 214px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(52px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(7) .face.-back {
  width: 104px;
  height: 214px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(22px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(8) {
  transform: translateX(117px) translateZ(-196px) translateY(-14.5px);
}
.panel:nth-child(8) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(8) .face.-front {
  width: 110px;
  height: 29px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(37.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(8) .face.-left {
  width: 75px;
  height: 29px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(55px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(8) .face.-top {
  width: 110px;
  height: 75px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(14.5px);
  background: #96918c;
}
.panel:nth-child(8) .face.-bottom {
  width: 110px;
  height: 75px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(14.5px);
  background: #6e6964;
}
.panel:nth-child(8) .face.-right {
  width: 75px;
  height: 29px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(55px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(8) .face.-back {
  width: 110px;
  height: 29px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(37.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(9) {
  transform: translateX(-160px) translateZ(76px) translateY(-14px);
}
.panel:nth-child(9) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(9) .face.-front {
  width: 70px;
  height: 28px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(34px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(9) .face.-left {
  width: 68px;
  height: 28px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(9) .face.-top {
  width: 70px;
  height: 68px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(14px);
  background: #96918c;
}
.panel:nth-child(9) .face.-bottom {
  width: 70px;
  height: 68px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(14px);
  background: #6e6964;
}
.panel:nth-child(9) .face.-right {
  width: 68px;
  height: 28px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(9) .face.-back {
  width: 70px;
  height: 28px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(34px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(10) {
  transform: translateX(121px) translateZ(188px) translateY(-48px);
}
.panel:nth-child(10) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(10) .face.-front {
  width: 81px;
  height: 96px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(10) .face.-left {
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(40.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(10) .face.-top {
  width: 81px;
  height: 96px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(48px);
  background: #96918c;
}
.panel:nth-child(10) .face.-bottom {
  width: 81px;
  height: 96px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(48px);
  background: #6e6964;
}
.panel:nth-child(10) .face.-right {
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(40.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(10) .face.-back {
  width: 81px;
  height: 96px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(11) {
  transform: translateX(-19px) translateZ(181px) translateY(-105px);
}
.panel:nth-child(11) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(11) .face.-front {
  width: 67px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(43px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(11) .face.-left {
  width: 86px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(11) .face.-top {
  width: 67px;
  height: 86px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px);
  background: #96918c;
}
.panel:nth-child(11) .face.-bottom {
  width: 67px;
  height: 86px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px);
  background: #6e6964;
}
.panel:nth-child(11) .face.-right {
  width: 86px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(11) .face.-back {
  width: 67px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(43px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(12) {
  transform: translateX(-173px) translateZ(200px) translateY(-110px);
}
.panel:nth-child(12) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(12) .face.-front {
  width: 62px;
  height: 220px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(54px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(12) .face.-left {
  width: 108px;
  height: 220px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(31px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(12) .face.-top {
  width: 62px;
  height: 108px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(110px);
  background: #96918c;
}
.panel:nth-child(12) .face.-bottom {
  width: 62px;
  height: 108px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(110px);
  background: #6e6964;
}
.panel:nth-child(12) .face.-right {
  width: 108px;
  height: 220px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(31px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(12) .face.-back {
  width: 62px;
  height: 220px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(54px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(13) {
  transform: translateX(200px) translateZ(-1px) translateY(-81px);
}
.panel:nth-child(13) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(13) .face.-front {
  width: 47px;
  height: 162px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(13) .face.-left {
  width: 70px;
  height: 162px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(23.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(13) .face.-top {
  width: 47px;
  height: 70px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(81px);
  background: #96918c;
}
.panel:nth-child(13) .face.-bottom {
  width: 47px;
  height: 70px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(81px);
  background: #6e6964;
}
.panel:nth-child(13) .face.-right {
  width: 70px;
  height: 162px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(23.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(13) .face.-back {
  width: 47px;
  height: 162px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(35px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(14) {
  transform: translateX(-45px) translateZ(198px) translateY(-33px);
}
.panel:nth-child(14) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(14) .face.-front {
  width: 96px;
  height: 66px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(20.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(14) .face.-left {
  width: 41px;
  height: 66px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(14) .face.-top {
  width: 96px;
  height: 41px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(33px);
  background: #96918c;
}
.panel:nth-child(14) .face.-bottom {
  width: 96px;
  height: 41px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(33px);
  background: #6e6964;
}
.panel:nth-child(14) .face.-right {
  width: 41px;
  height: 66px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(14) .face.-back {
  width: 96px;
  height: 66px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(20.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(15) {
  transform: translateX(160px) translateZ(-54px) translateY(-87.5px);
}
.panel:nth-child(15) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(15) .face.-front {
  width: 55px;
  height: 175px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(15) .face.-left {
  width: 95px;
  height: 175px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(27.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(15) .face.-top {
  width: 55px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(87.5px);
  background: #96918c;
}
.panel:nth-child(15) .face.-bottom {
  width: 55px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(87.5px);
  background: #6e6964;
}
.panel:nth-child(15) .face.-right {
  width: 95px;
  height: 175px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(27.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(15) .face.-back {
  width: 55px;
  height: 175px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(16) {
  transform: translateX(-15px) translateZ(175px) translateY(-82px);
}
.panel:nth-child(16) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(16) .face.-front {
  width: 106px;
  height: 164px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(52.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(16) .face.-left {
  width: 105px;
  height: 164px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(53px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(16) .face.-top {
  width: 106px;
  height: 105px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(82px);
  background: #96918c;
}
.panel:nth-child(16) .face.-bottom {
  width: 106px;
  height: 105px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(82px);
  background: #6e6964;
}
.panel:nth-child(16) .face.-right {
  width: 105px;
  height: 164px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(53px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(16) .face.-back {
  width: 106px;
  height: 164px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(52.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(17) {
  transform: translateX(-46px) translateZ(-126px) translateY(-73px);
}
.panel:nth-child(17) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(17) .face.-front {
  width: 84px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(23.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(17) .face.-left {
  width: 47px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(42px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(17) .face.-top {
  width: 84px;
  height: 47px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(73px);
  background: #96918c;
}
.panel:nth-child(17) .face.-bottom {
  width: 84px;
  height: 47px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(73px);
  background: #6e6964;
}
.panel:nth-child(17) .face.-right {
  width: 47px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(42px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(17) .face.-back {
  width: 84px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(23.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(18) {
  transform: translateX(-128px) translateZ(131px) translateY(-37px);
}
.panel:nth-child(18) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(18) .face.-front {
  width: 50px;
  height: 74px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(11.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(18) .face.-left {
  width: 23px;
  height: 74px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(25px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(18) .face.-top {
  width: 50px;
  height: 23px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(37px);
  background: #96918c;
}
.panel:nth-child(18) .face.-bottom {
  width: 50px;
  height: 23px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(37px);
  background: #6e6964;
}
.panel:nth-child(18) .face.-right {
  width: 23px;
  height: 74px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(25px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(18) .face.-back {
  width: 50px;
  height: 74px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(11.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(19) {
  transform: translateX(107px) translateZ(35px) translateY(-105px);
}
.panel:nth-child(19) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(19) .face.-front {
  width: 59px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(19) .face.-left {
  width: 27px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(29.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(19) .face.-top {
  width: 59px;
  height: 27px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px);
  background: #96918c;
}
.panel:nth-child(19) .face.-bottom {
  width: 59px;
  height: 27px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px);
  background: #6e6964;
}
.panel:nth-child(19) .face.-right {
  width: 27px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(19) .face.-back {
  width: 59px;
  height: 210px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(20) {
  transform: translateX(66px) translateZ(-26px) translateY(-47px);
}
.panel:nth-child(20) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(20) .face.-front {
  width: 32px;
  height: 94px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(20) .face.-left {
  width: 95px;
  height: 94px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(16px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(20) .face.-top {
  width: 32px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(47px);
  background: #96918c;
}
.panel:nth-child(20) .face.-bottom {
  width: 32px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(47px);
  background: #6e6964;
}
.panel:nth-child(20) .face.-right {
  width: 95px;
  height: 94px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(16px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(20) .face.-back {
  width: 32px;
  height: 94px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(21) {
  transform: translateX(32px) translateZ(-10px) translateY(-104px);
}
.panel:nth-child(21) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(21) .face.-front {
  width: 115px;
  height: 208px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(36.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(21) .face.-left {
  width: 73px;
  height: 208px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(21) .face.-top {
  width: 115px;
  height: 73px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(104px);
  background: #96918c;
}
.panel:nth-child(21) .face.-bottom {
  width: 115px;
  height: 73px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(104px);
  background: #6e6964;
}
.panel:nth-child(21) .face.-right {
  width: 73px;
  height: 208px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(21) .face.-back {
  width: 115px;
  height: 208px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(36.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(22) {
  transform: translateX(20px) translateZ(124px) translateY(-23.5px);
}
.panel:nth-child(22) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(22) .face.-front {
  width: 119px;
  height: 47px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(38.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(22) .face.-left {
  width: 77px;
  height: 47px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(59.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(22) .face.-top {
  width: 119px;
  height: 77px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(23.5px);
  background: #96918c;
}
.panel:nth-child(22) .face.-bottom {
  width: 119px;
  height: 77px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(23.5px);
  background: #6e6964;
}
.panel:nth-child(22) .face.-right {
  width: 77px;
  height: 47px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(59.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(22) .face.-back {
  width: 119px;
  height: 47px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(38.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(23) {
  transform: translateX(-106px) translateZ(-90px) translateY(-88.5px);
}
.panel:nth-child(23) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(23) .face.-front {
  width: 38px;
  height: 177px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(55px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(23) .face.-left {
  width: 110px;
  height: 177px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(19px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(23) .face.-top {
  width: 38px;
  height: 110px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(88.5px);
  background: #96918c;
}
.panel:nth-child(23) .face.-bottom {
  width: 38px;
  height: 110px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(88.5px);
  background: #6e6964;
}
.panel:nth-child(23) .face.-right {
  width: 110px;
  height: 177px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(19px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(23) .face.-back {
  width: 38px;
  height: 177px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(55px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(24) {
  transform: translateX(87px) translateZ(-198px) translateY(-52px);
}
.panel:nth-child(24) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(24) .face.-front {
  width: 86px;
  height: 104px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(25px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(24) .face.-left {
  width: 50px;
  height: 104px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(43px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(24) .face.-top {
  width: 86px;
  height: 50px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(52px);
  background: #96918c;
}
.panel:nth-child(24) .face.-bottom {
  width: 86px;
  height: 50px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(52px);
  background: #6e6964;
}
.panel:nth-child(24) .face.-right {
  width: 50px;
  height: 104px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(43px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(24) .face.-back {
  width: 86px;
  height: 104px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(25px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(25) {
  transform: translateX(-91px) translateZ(39px) translateY(-29.5px);
}
.panel:nth-child(25) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(25) .face.-front {
  width: 26px;
  height: 59px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(22.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(25) .face.-left {
  width: 45px;
  height: 59px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(13px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(25) .face.-top {
  width: 26px;
  height: 45px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(29.5px);
  background: #96918c;
}
.panel:nth-child(25) .face.-bottom {
  width: 26px;
  height: 45px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(29.5px);
  background: #6e6964;
}
.panel:nth-child(25) .face.-right {
  width: 45px;
  height: 59px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(13px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(25) .face.-back {
  width: 26px;
  height: 59px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(22.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(26) {
  transform: translateX(-72px) translateZ(48px) translateY(-91px);
}
.panel:nth-child(26) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(26) .face.-front {
  width: 46px;
  height: 182px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(28px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(26) .face.-left {
  width: 56px;
  height: 182px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(23px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(26) .face.-top {
  width: 46px;
  height: 56px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(91px);
  background: #96918c;
}
.panel:nth-child(26) .face.-bottom {
  width: 46px;
  height: 56px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(91px);
  background: #6e6964;
}
.panel:nth-child(26) .face.-right {
  width: 56px;
  height: 182px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(23px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(26) .face.-back {
  width: 46px;
  height: 182px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(28px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(27) {
  transform: translateX(157px) translateZ(109px) translateY(-50.5px);
}
.panel:nth-child(27) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(27) .face.-front {
  width: 34px;
  height: 101px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(28.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(27) .face.-left {
  width: 57px;
  height: 101px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(17px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(27) .face.-top {
  width: 34px;
  height: 57px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(50.5px);
  background: #96918c;
}
.panel:nth-child(27) .face.-bottom {
  width: 34px;
  height: 57px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(50.5px);
  background: #6e6964;
}
.panel:nth-child(27) .face.-right {
  width: 57px;
  height: 101px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(17px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(27) .face.-back {
  width: 34px;
  height: 101px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(28.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(28) {
  transform: translateX(-177px) translateZ(-125px) translateY(-109.5px);
}
.panel:nth-child(28) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(28) .face.-front {
  width: 72px;
  height: 219px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(21.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(28) .face.-left {
  width: 43px;
  height: 219px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(36px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(28) .face.-top {
  width: 72px;
  height: 43px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(109.5px);
  background: #96918c;
}
.panel:nth-child(28) .face.-bottom {
  width: 72px;
  height: 43px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(109.5px);
  background: #6e6964;
}
.panel:nth-child(28) .face.-right {
  width: 43px;
  height: 219px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(36px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(28) .face.-back {
  width: 72px;
  height: 219px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(21.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(29) {
  transform: translateX(67px) translateZ(-194px) translateY(-53.5px);
}
.panel:nth-child(29) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(29) .face.-front {
  width: 37px;
  height: 107px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(29) .face.-left {
  width: 115px;
  height: 107px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(18.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(29) .face.-top {
  width: 37px;
  height: 115px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(53.5px);
  background: #96918c;
}
.panel:nth-child(29) .face.-bottom {
  width: 37px;
  height: 115px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(53.5px);
  background: #6e6964;
}
.panel:nth-child(29) .face.-right {
  width: 115px;
  height: 107px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(18.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(29) .face.-back {
  width: 37px;
  height: 107px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(30) {
  transform: translateX(48px) translateZ(-124px) translateY(-27.5px);
}
.panel:nth-child(30) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(30) .face.-front {
  width: 93px;
  height: 55px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(22.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(30) .face.-left {
  width: 45px;
  height: 55px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(46.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(30) .face.-top {
  width: 93px;
  height: 45px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(27.5px);
  background: #96918c;
}
.panel:nth-child(30) .face.-bottom {
  width: 93px;
  height: 45px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(27.5px);
  background: #6e6964;
}
.panel:nth-child(30) .face.-right {
  width: 45px;
  height: 55px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(46.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(30) .face.-back {
  width: 93px;
  height: 55px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(22.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(31) {
  transform: translateX(-19px) translateZ(103px) translateY(-66.5px);
}
.panel:nth-child(31) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(31) .face.-front {
  width: 42px;
  height: 133px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(15.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(31) .face.-left {
  width: 31px;
  height: 133px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(31) .face.-top {
  width: 42px;
  height: 31px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(66.5px);
  background: #96918c;
}
.panel:nth-child(31) .face.-bottom {
  width: 42px;
  height: 31px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(66.5px);
  background: #6e6964;
}
.panel:nth-child(31) .face.-right {
  width: 31px;
  height: 133px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(31) .face.-back {
  width: 42px;
  height: 133px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(15.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(32) {
  transform: translateX(157px) translateZ(-51px) translateY(-72px);
}
.panel:nth-child(32) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(32) .face.-front {
  width: 115px;
  height: 144px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(53.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(32) .face.-left {
  width: 107px;
  height: 144px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(32) .face.-top {
  width: 115px;
  height: 107px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(72px);
  background: #96918c;
}
.panel:nth-child(32) .face.-bottom {
  width: 115px;
  height: 107px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(72px);
  background: #6e6964;
}
.panel:nth-child(32) .face.-right {
  width: 107px;
  height: 144px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(32) .face.-back {
  width: 115px;
  height: 144px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(53.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(33) {
  transform: translateX(3px) translateZ(-154px) translateY(-69px);
}
.panel:nth-child(33) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(33) .face.-front {
  width: 28px;
  height: 138px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(14.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(33) .face.-left {
  width: 29px;
  height: 138px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(14px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(33) .face.-top {
  width: 28px;
  height: 29px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(69px);
  background: #96918c;
}
.panel:nth-child(33) .face.-bottom {
  width: 28px;
  height: 29px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(69px);
  background: #6e6964;
}
.panel:nth-child(33) .face.-right {
  width: 29px;
  height: 138px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(14px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(33) .face.-back {
  width: 28px;
  height: 138px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(14.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(34) {
  transform: translateX(161px) translateZ(104px) translateY(-45.5px);
}
.panel:nth-child(34) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(34) .face.-front {
  width: 61px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(56.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(34) .face.-left {
  width: 113px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(30.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(34) .face.-top {
  width: 61px;
  height: 113px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(45.5px);
  background: #96918c;
}
.panel:nth-child(34) .face.-bottom {
  width: 61px;
  height: 113px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(45.5px);
  background: #6e6964;
}
.panel:nth-child(34) .face.-right {
  width: 113px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(30.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(34) .face.-back {
  width: 61px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(56.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(35) {
  transform: translateX(25px) translateZ(158px) translateY(-26px);
}
.panel:nth-child(35) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(35) .face.-front {
  width: 31px;
  height: 52px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(34.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(35) .face.-left {
  width: 69px;
  height: 52px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(15.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(35) .face.-top {
  width: 31px;
  height: 69px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(26px);
  background: #96918c;
}
.panel:nth-child(35) .face.-bottom {
  width: 31px;
  height: 69px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(26px);
  background: #6e6964;
}
.panel:nth-child(35) .face.-right {
  width: 69px;
  height: 52px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(15.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(35) .face.-back {
  width: 31px;
  height: 52px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(34.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(36) {
  transform: translateX(-170px) translateZ(-173px) translateY(-73px);
}
.panel:nth-child(36) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(36) .face.-front {
  width: 27px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(36) .face.-left {
  width: 95px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(36) .face.-top {
  width: 27px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(73px);
  background: #96918c;
}
.panel:nth-child(36) .face.-bottom {
  width: 27px;
  height: 95px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(73px);
  background: #6e6964;
}
.panel:nth-child(36) .face.-right {
  width: 95px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(36) .face.-back {
  width: 27px;
  height: 146px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(47.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(37) {
  transform: translateX(3px) translateZ(-109px) translateY(-51px);
}
.panel:nth-child(37) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(37) .face.-front {
  width: 63px;
  height: 102px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(30px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(37) .face.-left {
  width: 60px;
  height: 102px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(31.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(37) .face.-top {
  width: 63px;
  height: 60px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(51px);
  background: #96918c;
}
.panel:nth-child(37) .face.-bottom {
  width: 63px;
  height: 60px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(51px);
  background: #6e6964;
}
.panel:nth-child(37) .face.-right {
  width: 60px;
  height: 102px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(31.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(37) .face.-back {
  width: 63px;
  height: 102px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(30px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(38) {
  transform: translateX(-180px) translateZ(170px) translateY(-102px);
}
.panel:nth-child(38) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(38) .face.-front {
  width: 59px;
  height: 204px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(38) .face.-left {
  width: 42px;
  height: 204px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(29.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(38) .face.-top {
  width: 59px;
  height: 42px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(102px);
  background: #96918c;
}
.panel:nth-child(38) .face.-bottom {
  width: 59px;
  height: 42px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(102px);
  background: #6e6964;
}
.panel:nth-child(38) .face.-right {
  width: 42px;
  height: 204px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(38) .face.-back {
  width: 59px;
  height: 204px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(39) {
  transform: translateX(-63px) translateZ(-70px) translateY(-77.5px);
}
.panel:nth-child(39) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(39) .face.-front {
  width: 67px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(39) .face.-left {
  width: 27px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(39) .face.-top {
  width: 67px;
  height: 27px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(77.5px);
  background: #96918c;
}
.panel:nth-child(39) .face.-bottom {
  width: 67px;
  height: 27px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(77.5px);
  background: #6e6964;
}
.panel:nth-child(39) .face.-right {
  width: 27px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(39) .face.-back {
  width: 67px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(13.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(40) {
  transform: translateX(169px) translateZ(-115px) translateY(-45.5px);
}
.panel:nth-child(40) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(40) .face.-front {
  width: 114px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(39px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(40) .face.-left {
  width: 78px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(57px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(40) .face.-top {
  width: 114px;
  height: 78px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(45.5px);
  background: #96918c;
}
.panel:nth-child(40) .face.-bottom {
  width: 114px;
  height: 78px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(45.5px);
  background: #6e6964;
}
.panel:nth-child(40) .face.-right {
  width: 78px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(40) .face.-back {
  width: 114px;
  height: 91px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(39px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(41) {
  transform: translateX(-54px) translateZ(-105px) translateY(-28.5px);
}
.panel:nth-child(41) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(41) .face.-front {
  width: 76px;
  height: 57px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(19.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(41) .face.-left {
  width: 39px;
  height: 57px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(38px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(41) .face.-top {
  width: 76px;
  height: 39px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(28.5px);
  background: #96918c;
}
.panel:nth-child(41) .face.-bottom {
  width: 76px;
  height: 39px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(28.5px);
  background: #6e6964;
}
.panel:nth-child(41) .face.-right {
  width: 39px;
  height: 57px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(38px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(41) .face.-back {
  width: 76px;
  height: 57px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(19.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(42) {
  transform: translateX(177px) translateZ(123px) translateY(-33.5px);
}
.panel:nth-child(42) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(42) .face.-front {
  width: 58px;
  height: 67px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(55.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(42) .face.-left {
  width: 111px;
  height: 67px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(29px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(42) .face.-top {
  width: 58px;
  height: 111px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(33.5px);
  background: #96918c;
}
.panel:nth-child(42) .face.-bottom {
  width: 58px;
  height: 111px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(33.5px);
  background: #6e6964;
}
.panel:nth-child(42) .face.-right {
  width: 111px;
  height: 67px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(42) .face.-back {
  width: 58px;
  height: 67px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(55.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(43) {
  transform: translateX(200px) translateZ(52px) translateY(-63px);
}
.panel:nth-child(43) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(43) .face.-front {
  width: 42px;
  height: 126px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(59px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(43) .face.-left {
  width: 118px;
  height: 126px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(43) .face.-top {
  width: 42px;
  height: 118px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(63px);
  background: #96918c;
}
.panel:nth-child(43) .face.-bottom {
  width: 42px;
  height: 118px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(63px);
  background: #6e6964;
}
.panel:nth-child(43) .face.-right {
  width: 118px;
  height: 126px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(21px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(43) .face.-back {
  width: 42px;
  height: 126px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(59px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(44) {
  transform: translateX(50px) translateZ(-183px) translateY(-19.5px);
}
.panel:nth-child(44) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(44) .face.-front {
  width: 118px;
  height: 39px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(36px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(44) .face.-left {
  width: 72px;
  height: 39px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(59px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(44) .face.-top {
  width: 118px;
  height: 72px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(19.5px);
  background: #96918c;
}
.panel:nth-child(44) .face.-bottom {
  width: 118px;
  height: 72px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(19.5px);
  background: #6e6964;
}
.panel:nth-child(44) .face.-right {
  width: 72px;
  height: 39px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(59px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(44) .face.-back {
  width: 118px;
  height: 39px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(36px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(45) {
  transform: translateX(-76px) translateZ(-111px) translateY(-41.5px);
}
.panel:nth-child(45) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(45) .face.-front {
  width: 67px;
  height: 83px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(45) .face.-left {
  width: 96px;
  height: 83px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(45) .face.-top {
  width: 67px;
  height: 96px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(41.5px);
  background: #96918c;
}
.panel:nth-child(45) .face.-bottom {
  width: 67px;
  height: 96px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(41.5px);
  background: #6e6964;
}
.panel:nth-child(45) .face.-right {
  width: 96px;
  height: 83px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(33.5px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(45) .face.-back {
  width: 67px;
  height: 83px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(48px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(46) {
  transform: translateX(-37px) translateZ(-194px) translateY(-77.5px);
}
.panel:nth-child(46) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(46) .face.-front {
  width: 116px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(11px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(46) .face.-left {
  width: 22px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(58px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(46) .face.-top {
  width: 116px;
  height: 22px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(77.5px);
  background: #96918c;
}
.panel:nth-child(46) .face.-bottom {
  width: 116px;
  height: 22px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(77.5px);
  background: #6e6964;
}
.panel:nth-child(46) .face.-right {
  width: 22px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(58px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(46) .face.-back {
  width: 116px;
  height: 155px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(11px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(47) {
  transform: translateX(165px) translateZ(-35px) translateY(-43px);
}
.panel:nth-child(47) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(47) .face.-front {
  width: 90px;
  height: 86px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(11.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(47) .face.-left {
  width: 23px;
  height: 86px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(45px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(47) .face.-top {
  width: 90px;
  height: 23px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(43px);
  background: #96918c;
}
.panel:nth-child(47) .face.-bottom {
  width: 90px;
  height: 23px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(43px);
  background: #6e6964;
}
.panel:nth-child(47) .face.-right {
  width: 23px;
  height: 86px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(45px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(47) .face.-back {
  width: 90px;
  height: 86px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(11.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(48) {
  transform: translateX(-107px) translateZ(-182px) translateY(-82.5px);
}
.panel:nth-child(48) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(48) .face.-front {
  width: 102px;
  height: 165px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(49px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(48) .face.-left {
  width: 98px;
  height: 165px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(51px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(48) .face.-top {
  width: 102px;
  height: 98px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(82.5px);
  background: #96918c;
}
.panel:nth-child(48) .face.-bottom {
  width: 102px;
  height: 98px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(82.5px);
  background: #6e6964;
}
.panel:nth-child(48) .face.-right {
  width: 98px;
  height: 165px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(51px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(48) .face.-back {
  width: 102px;
  height: 165px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(49px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(49) {
  transform: translateX(-176px) translateZ(-39px) translateY(-100.5px);
}
.panel:nth-child(49) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(49) .face.-front {
  width: 120px;
  height: 201px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(60px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(49) .face.-left {
  width: 120px;
  height: 201px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(60px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(49) .face.-top {
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(100.5px);
  background: #96918c;
}
.panel:nth-child(49) .face.-bottom {
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(100.5px);
  background: #6e6964;
}
.panel:nth-child(49) .face.-right {
  width: 120px;
  height: 201px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(60px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(49) .face.-back {
  width: 120px;
  height: 201px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(60px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(50) {
  transform: translateX(4px) translateZ(-158px) translateY(-22px);
}
.panel:nth-child(50) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(50) .face.-front {
  width: 62px;
  height: 44px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(38px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(50) .face.-left {
  width: 76px;
  height: 44px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(31px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(50) .face.-top {
  width: 62px;
  height: 76px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(22px);
  background: #96918c;
}
.panel:nth-child(50) .face.-bottom {
  width: 62px;
  height: 76px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(22px);
  background: #6e6964;
}
.panel:nth-child(50) .face.-right {
  width: 76px;
  height: 44px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(31px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(50) .face.-back {
  width: 62px;
  height: 44px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(38px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(51) {
  transform: translateX(-197px) translateZ(-182px) translateY(-15px);
}
.panel:nth-child(51) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(51) .face.-front {
  width: 88px;
  height: 30px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(36.5px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(51) .face.-left {
  width: 73px;
  height: 30px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(44px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(51) .face.-top {
  width: 88px;
  height: 73px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(15px);
  background: #96918c;
}
.panel:nth-child(51) .face.-bottom {
  width: 88px;
  height: 73px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(15px);
  background: #6e6964;
}
.panel:nth-child(51) .face.-right {
  width: 73px;
  height: 30px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(44px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(51) .face.-back {
  width: 88px;
  height: 30px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(36.5px);
  background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(52) {
  transform: translateX(-107px) translateZ(-197px) translateY(-61.5px);
}
.panel:nth-child(52) .face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.panel:nth-child(52) .face.-front {
  width: 36px;
  height: 123px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(46px);
  background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(52) .face.-left {
  width: 92px;
  height: 123px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(18px);
  background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(52) .face.-top {
  width: 36px;
  height: 92px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(61.5px);
  background: #96918.........完整代码请登录后点击上方下载按钮下载查看

网友评论0