.gallery-section {
  --widthtwo: 2rem;
  --widthone: 2rem;
  --bkgColor: #20282D88;
  --Mainbkg: linear-gradient(
    90deg,
    #20282D,
    #FFBF00,
    #547a93,
    #20282D,
    #FFBF00,
    #547a93,
    #20282D,
    #FFBF00
  );
  --Mainbkg1: linear-gradient(
    90deg,
    #20282D,
    #4b5054,
    #20282D,
    #4b5054,
    #20282D
  );
  /* --bkg: url("https://cdn.pixabay.com/photo/2016/01/20/04/11/wood-1150854_960_720.png");
  --borderbkg2: url("https://cdn.pixabay.com/photo/2016/01/20/04/11/wood-1150854_960_720.png")
    var(--split1) round;
  --borderbkg1: url("https://cdn.pixabay.com/photo/2016/01/20/04/11/wood-1150854_960_720.png")
    var(--split1) round;
  --borderbkg3: url("https://cdn.pixabay.com/photo/2016/01/20/04/11/wood-1150854_960_720.png")
    var(--split2) round; */
  --bkgimg1: var(--bkg) 50 round;
  --trans: 0.1em solid transparent;
  --lightText: #ffffffce;
  --split1: 5%;
  --split2: 45%;
  --bWidth: 25px;
  --ibWidth: 25px;
  --shadow: inset 1px 1px 2rem 1rem rgba(0, 0, 0, 1);
  --textshadow: 2px 2px 4px rgba(0, 0, 0, 1);
 
  position: relative;
  min-height: 80vh;
}

.gallery-section * {
  margin: 0 auto;
  box-sizing: border-box;
}
.gallery-section .left {
  background-color: transparent;
  top: 0;
}

.gallery-section .right {
  background-color: transparent;
  bottom: 0;
}

.gallery-section fieldset {
  background-color: #cccccc88;
  width: 90%;
  z-index: 10;
  padding: 5px;
  border-radius: 1rem;
}

.gallery-section legend {
  margin: 0 auto;
  font-size: 1em;
  cursor: pointer;
}

.gallery-section .title {
  z-index: 999;
}

.gallery-section input[name="view"] {
  display: none;
}

.gallery-section .switch {
  display: flex;
  justify-content: space-evenly;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  height: 0em;
  background-color: #cccccc99;
  font-size: 1.5em;
  overflow: hidden;
}

.gallery-section .button {
  position: relative;
  display: block;
  width: 100%;
  background-color: #20282D55;
}

.gallery-section label {
  text-shadow: 1px 1px 30px #00000022;
}

.gallery-section ul {
  margin: 1px auto;
  display: block;
  list-style-type: none;
  position: relative;
  top: -6em;
  width: 100%;
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.gallery-section li {
  font-size: 0.5em;
  display: none;
  color: white;
}

.gallery-section [name="view"]:hover + label {
  padding: 7px;
  text-shadow: 2px 2px 1px #09090999;
}

.gallery-section [name="view"]:hover:active + label {
  padding: 7px;
  text-shadow: 2px 2px 1px #FFBF0099;
  color: #ffffffcc;
}

.gallery-section [name="view"]:checked + label {
  width: 100%;
}

.gallery-section [name="view"]:checked + label + ul {
  max-height: 1000px;
  background-color: #20282D55;
  top: 0;
  z-index: 1;
}

.gallery-section [name="view"]:checked + label + ul li {
  display: block;
}

.gallery-section [name="view"]:focus + label {
  color: #FFBF0099;
}

.gallery-section .open {
  height: 100%;
  background-color: #20282D;
}

.gallery-section .closed {
  height: 0;
  overflow: hidden;
}

.gallery-section legend {
  color: #FFBF00;
  text-shadow: var(--textshadow);
}

.gallery-section .wrapper {
  top:0%;
  border-radius: 0.5rem;
 
  position: relative;
  width:100%;
  height: 75vh;
   background-color: #fff;
  background-size: 600%;
   background-position: 0px 0px;
  background-repeat: repeat-x;
  overflow: hidden;
 
}

.gallery-section .contain {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* border: var(--widthone) solid #20282D55; */
  /* border-image: var(--borderbkg1);
  border-image-slice: var(--split1);
  border-image-repeat: no-repeat;
  border-image-width: var(--bWidth);
  border-radius: 2rem;
  box-shadow: inset 0 0 30px 25px rgba(0, 0, 0, 0.4); */
  background: #fff;
}

.gallery-section #tridiv {
  perspective: 500px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  transform-origin: 50% 50%;
  font-size: 700.5%;
  transform: rotateY(-0deg) translateX(0%);
}

.gallery-section .right::before {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  color: #FFBF00;
  text-shadow: 1px 1px 30px rgb(197, 197, 197);
  background-color: #20282D;
  z-index: 999;
  content: "Almost gallery. Hover Above or below image to release Tap on phone";
}

@keyframes back {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.gallery-section .face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.gallery-section .scene,
.gallery-section .shape,
.gallery-section .face,
.gallery-section .face-wrapper,
.gallery-section .cr {
  position: absolute;
  transform-style: preserve-3d;
}

.gallery-section .scene {
  display: flex;
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
  margin: -40em 0 0 -40em;
  animation: spin 28s linear infinite;
}

.gallery-section .shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
  transition: 1s;
}

@keyframes spin1 {
  from {
    transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(-180deg)
      rotateZ(0deg);
  }
  to {
    transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(180deg)
      rotateZ(0deg);
  }
}

@keyframes spin {
  from {
    transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(-180deg)
      rotateZ(0deg);
  }
  to {
    transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(180deg)
      rotateZ(0deg);
  }
}

.gallery-section .scene:hover {
  animation-play-state: paused;
}

.gallery-section .shape:hover:active {
  font-size: 50%;
  animation: spin 5s linear infinite;
  transform: translate(0, 0);
}

.gallery-section .back {
  background-image: var(--bkg);
}

.gallery-section .face,
.gallery-section .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: visible;
}

.gallery-section .face {
  background-size: 100% 100% !important;
  background-position: center;
}

.gallery-section .face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%;
}

.gallery-section .photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.8);
}

.gallery-section .side {
  left: 50%;
}

.gallery-section .cr,
.gallery-section .cr .side {
  height: 100%;
}

.gallery-section [class*="cuboid"] .face {
  border: var(--trans);
  border-image: var(--borderbkg3);
  border-image-slice: var(--split2);
  border-image-width: var(widthtwo);
  background-color: rgba(0, 0, 0, 1);
}

.gallery-section [class*="cuboid"] .ft,
.gallery-section [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}

.gallery-section [class*="cuboid"] .bk {
  left: 100%;
}

.gallery-section [class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}

.gallery-section [class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}

.gallery-section [class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}

.gallery-section [class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}

.gallery-section [class*="cuboid"] .lt {
  left: 100%;
}

.gallery-section [class*="cuboid"] .bm {
  top: 100%;
}

/* .cub-1 styles */
.gallery-section .cub-1 {
  transform: translate3D(-6.794117647058823em, 0em, -0.11764705882352941em)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-1 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-1 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-1 .rt,
.gallery-section .cub-1 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-1 .tp,
.gallery-section .cub-1 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-1 .face {
  background-color: #ffffff;
}

/* .cub-2 styles */
.gallery-section .cub-2 {
  transform: translate3D(4.882352941176471em, 0em, -4.9338235294117645em)
    rotateX(0deg) rotateY(-45deg) rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-2 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-2 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-2 .rt,
.gallery-section .cub-2 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-2 .tp,
.gallery-section .cub-2 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-2 .face {
  background-color: #ffffff;
}

/* .cub-3 styles */
.gallery-section .cub-3 {
  transform: translate3D(-4.779411764705882em, 0em, 4.720588235294118em)
    rotateX(0deg) rotateY(45deg) rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-3 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-3 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-3 .rt,
.gallery-section .cub-3 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-3 .tp,
.gallery-section .cub-3 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-3 .face {
  background-color: #ffffff;
}

/* .cub-4 styles */
.gallery-section .cub-4 {
  transform: translate3D(-4.772058823529411em, 0em, -4.911764705882352em)
    rotateX(0deg) rotateY(-45deg) rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-4 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-4 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-4 .rt,
.gallery-section .cub-4 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-4 .tp,
.gallery-section .cub-4 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-4 .face {
  background-color: #ffffff;
}

/* .cub-5 styles */
.gallery-section .cub-5 {
  transform: translate3D(4.89em, 0em, 4.71em) rotateX(0deg) rotateY(45deg)
    rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-5 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-5 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-5 .rt,
.gallery-section .cub-5 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-5 .tp,
.gallery-section .cub-5 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-5 .face {
  background-color: #ffffff;
}

/* .cub-6 styles */
.gallery-section .cub-6 {
  transform: translate3D(0.07352941176470587em, 0em, -6.7em) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-6 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-6 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-6 .rt,
.gallery-section .cub-6 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-6 .tp,
.gallery-section .cub-6 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-6 .face {
  background-color: #ffffff;
}

/* .cub-7 styles */
.gallery-section .cub-7 {
  transform: translate3D(0.06em, 0em, 6.7em) rotateX(0deg) rotateY(0deg)
    rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-7 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-7 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-7 .rt,
.gallery-section .cub-7 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-7 .tp,
.gallery-section .cub-7 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-7 .face {
  background-color: #ffffff;
}

/* .cub-8 styles */
.gallery-section .cub-8 {
  transform: translate3D(6.875em, -0em, -0.125em) rotateX(0deg) rotateY(0deg)
    rotateZ(0deg);
  opacity: 1;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.gallery-section .cub-8 .ft {
  transform: translateZ(2em);
}

.gallery-section .cub-8 .bk {
  transform: translateZ(-2em) rotateY(180deg);
}

.gallery-section .cub-8 .rt,
.gallery-section .cub-8 .lt {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-8 .tp,
.gallery-section .cub-8 .bm {
  width: 4em;
  height: 4em;
}

.gallery-section .cub-8 .face {
  background-color: #ffffff;
}