*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



.demo {
	overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  /*background-image: linear-gradient(180deg, green, darkgreen);*/
  /*background-color: #9B9B9B;
  background-image: url('../brbnvk_bg.png');*/
}
.demo__gallery {
	  display: grid;
  width: 100vw;
  aspect-ratio: 1 / 1 ;
  /*padding-bottom: 100%;*/
  /*height: 100%;*/
  /*padding: 0px;*/
  /*background: #eee;*/
  perspective: 700px;
  border-radius: 0px;
    grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  /*background-image: url('../back_card.gif');
  background-position: center; 
  background-size: contain; 
  background-repeat: no-repeat;*/
}
.demo__placeholder {
  width: 25%;
  height: 25%;
  margin: 0px;
  float: left;
  background-color: lightslategrey;
}
.demo__part {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  margin: 0px;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: all 0.9s ease-in-out;
}
.demo__part:hover .demo__part-front {
  box-shadow: 0px 0px 10px black;
  transform: scale(0.96);

  	
}
.demo__part:hover .demo__part-front:after {
  opacity: 0;

}
.demo__part-front, .demo__part-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 0px;
  cursor: pointer;
}
.demo__part-front {
  background-color: lightslategrey;
  background-size: cover;
  background-position: center;
  transform: rotateX(0deg);
  transition: all 0.2s ease;
}
.demo__part-front:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  content: "";
  opacity: 0.2;
  transition: all 0.2s ease;
}
.demo__part-back {
  transform: rotateY(180deg) rotateX(0deg);
}
.demo__part-back-inner {
    width: 100vw;
  aspect-ratio: 1 / 1 ;
  /*width: 100%;
  height: 100%;*/
  /*background-image: url('../back_card.gif');*/
  background-size: cover;
  background-position: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.demo__body {
  margin-bottom: 7px;
  font-size: 9vmin; 
  color: #f3302f;
  text-align: center;
  /*text-shadow: 1px 1px 10px #8FFF80;*/
  text-shadow: 1px 1px 14px #FFFFFF;
  /*font-family: Recoleta;*/
  font-family: MyCyrBody;
  
  
}
.demo__body a {
  color: red;
}
.demo__body a:hover {
  color: #E39999;
}

.demo__part-1-1 .demo__part-back-inner {
  transform: translate(0px, 0px);
}

.demo__part-1-2 .demo__part-back-inner {
  transform: translate(-25%, 0px);
}

.demo__part-1-3 .demo__part-back-inner {
  transform: translate(-50%, 0px);
}

.demo__part-1-4 .demo__part-back-inner {
  transform: translate(-75%, 0px);
}

.demo__part-2-1 .demo__part-back-inner {
  transform: translate(0px, -25%);
}

.demo__part-2-2 .demo__part-back-inner {
  transform: translate(-25%, -25%);
}

.demo__part-2-3 .demo__part-back-inner {
  transform: translate(-50%, -25%);
}

.demo__part-2-4 .demo__part-back-inner {
  transform: translate(-75%, -25%);
}

.demo__part-3-1 .demo__part-back-inner {
  transform: translate(0px, -50%);
}

.demo__part-3-2 .demo__part-back-inner {
  transform: translate(-25%, -50%);
}

.demo__part-3-3 .demo__part-back-inner {
  transform: translate(-50%, -50%);
}

.demo__part-3-4 .demo__part-back-inner {
  transform: translate(-75%, -50%);
}

.demo__part-4-1 .demo__part-back-inner {
  transform: translate(0px, -75%);
}

.demo__part-4-2 .demo__part-back-inner {
  transform: translate(-25%, -75%);
}

.demo__part-4-3 .demo__part-back-inner {
  transform: translate(-50%, -75%);
}

.demo__part-4-4 .demo__part-back-inner {
  transform: translate(-75%, -75%);
}

.show-front {
  transform: none;
}