Popup

<div class="popups-cont">
  <div class="popups-cont__overlay"></div>
  <div class="popup">
    <div class="popup__pieces"></div>
    <div class="popup__content">
      <div class="popup__close"></div>
      <h3 class="popup__heading">Заголовок</h3>
      <p class="popup__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum ad iusto, magnam atque ut dolorem ullam! Rem enim ipsum obcaecati officiis quasi asperiores ut! Ipsa quam necessitatibus animi odio aperiam.
      Beatae vero inventore quidem iusto iste quibusdam eaque animi a sapiente amet fugit commodi nostrum ut, nesciunt aut sunt dolore perferendis dolorum, neque tempore voluptatum molestias? Iste vero iure nostrum?
   </p>
    </div>
  </div>
</div>
<button type="button" class="popup-btn">Открыть</button>
//Автор: Nikolay Talanov. @suez

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

body {
  background-color: bisque;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}

.popups-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -10;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  perspective: 1000px;
  pointer-events: none;
  transition: z-index 0s 0.8s;
}
.popups-cont.s--popup-active {
  z-index: 1000;
  pointer-events: auto;
  transition: z-index 0s 0s;
}
.popups-cont__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s;
}
.popups-cont.s--popup-active .popups-cont__overlay {
  opacity: 1;
  transition: opacity 0.35s 0.35s;
}

.popup {
  z-index: 2;
  position: relative;
  width: 500px;
  height: 500px;
  transform-style: preserve-3d;
}
.popup .popup__piece:nth-child(1) {
  height: 14.6666666667%;
  width: 21.6666666667%;
}
.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-26vw, 6vh, -550px) rotateX(148deg) rotateY(172deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);
          clip-path: polygon(0 0, 0 100%, 58% 100%);
}
.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {
  transform: translate3d(38vw, -46vh, -245px) rotateX(361deg) rotateY(277deg);
  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);
          clip-path: polygon(0 0, 58% 100%, 100% 0);
}
.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {
  transform: translate3d(40vw, 33vh, 634px) rotateX(229deg) rotateY(303deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);
          clip-path: polygon(100% 0, 100% 100%, 58% 100%);
}
.popup.s--closed .popup__piece:nth-child(1) {
  transform: translate3d(0, 146vh, 0);
}
.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {
  transform: translate3d(16vw, 0, 0) rotateX(234deg) rotateY(164deg);
}
.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {
  transform: translate3d(27vw, 0, 0) rotateX(156deg) rotateY(196deg);
}
.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-77vw, 0, 0) rotateX(369deg) rotateY(312deg);
}
.popup .popup__piece:nth-child(2) {
  height: 14.6666666667%;
  width: 12.6666666667%;
}
.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-20vw, -8vh, -300px) rotateX(472deg) rotateY(235deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);
          clip-path: polygon(0 0, 0 100%, 32% 100%);
}
.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-13vw, 53vh, -550px) rotateX(361deg) rotateY(128deg);
  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);
          clip-path: polygon(0 0, 32% 100%, 100% 0);
}
.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {
  transform: translate3d(46vw, 6vh, 664px) rotateX(417deg) rotateY(222deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);
          clip-path: polygon(100% 0, 100% 100%, 32% 100%);
}
.popup.s--closed .popup__piece:nth-child(2) {
  transform: translate3d(0, 113vh, 0);
}
.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {
  transform: translate3d(26vw, 0, 0) rotateX(121deg) rotateY(244deg);
}
.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-16vw, 0, 0) rotateX(167deg) rotateY(369deg);
}
.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {
  transform: translate3d(5vw, 0, 0) rotateX(293deg) rotateY(358deg);
}
.popup .popup__piece:nth-child(3) {
  height: 14.6666666667%;
  width: 15.6666666667%;
}
.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {
  transform: translate3d(3vw, -15vh, -682px) rotateX(379deg) rotateY(202deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);
          clip-path: polygon(0 0, 0 100%, 48% 100%);
}
.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {
  transform: translate3d(16vw, 49vh, 404px) rotateX(127deg) rotateY(380deg);
  -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);
          clip-path: polygon(0 0, 48% 100%, 100% 0);
}
.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {
  transform: translate3d(53vw, 15vh, -380px) rotateX(303deg) rotateY(270deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);
          clip-path: polygon(100% 0, 100% 100%, 48% 100%);
}
.popup.s--closed .popup__piece:nth-child(3) {
  transform: translate3d(0, 130vh, 0);
}
.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-41vw, 0, 0) rotateX(205deg) rotateY(254deg);
}
.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {
  transform: translate3d(61vw, 0, 0) rotateX(212deg) rotateY(300deg);
}
.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-37vw, 0, 0) rotateX(436deg) rotateY(315deg);
}
.popup .popup__piece:nth-child(4) {
  height: 14.6666666667%;
  width: 16.6666666667%;
}
.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-47vw, -41vh, 762px) rotateX(381deg) rotateY(222deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 41% 100%);
          clip-path: polygon(0 0, 0 100%, 41% 100%);
}
.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {
  transform: translate3d(45vw, 19vh, -454px) rotateX(249deg) rotateY(191deg);
  -webkit-clip-path: polygon(0 0, 41% 100%, 100% 0);
          clip-path: polygon(0 0, 41% 100%, 100% 0);
}
.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {
  transform: translate3d(5vw, -55vh, 65px) rotateX(214deg) rotateY(223deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 41% 100%);
          clip-path: polygon(100% 0, 100% 100%, 41% 100%);
}
.popup.s--closed .popup__piece:nth-child(4) {
  transform: translate3d(0, 134vh, 0);
}
.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-29vw, 0, 0) rotateX(332deg) rotateY(382deg);
}
.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-26vw, 0, 0) rotateX(371deg) rotateY(390deg);
}
.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-41vw, 0, 0) rotateX(472deg) rotateY(306deg);
}
.popup .popup__piece:nth-child(5) {
  height: 14.6666666667%;
  width: 15.6666666667%;
}
.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {
  transform: translate3d(35vw, -6vh, 91px) rotateX(342deg) rotateY(413deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);
          clip-path: polygon(0 0, 0 100%, 58% 100%);
}
.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-58vw, -52vh, -570px) rotateX(453deg) rotateY(331deg);
  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);
          clip-path: polygon(0 0, 58% 100%, 100% 0);
}
.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {
  transform: translate3d(47vw, 18vh, 841px) rotateX(325deg) rotateY(315deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);
          clip-path: polygon(100% 0, 100% 100%, 58% 100%);
}
.popup.s--closed .popup__piece:nth-child(5) {
  transform: translate3d(0, 118vh, 0);
}
.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {
  transform: translate3d(37vw, 0, 0) rotateX(430deg) rotateY(380deg);
}
.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-25vw, 0, 0) rotateX(323deg) rotateY(468deg);
}
.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {
  transform: translate3d(61vw, 0, 0) rotateX(275deg) rotateY(295deg);
}
.popup .popup__piece:nth-child(6) {
  height: 14.6666666667%;
  width: 17.6666666667%;
}
.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-32vw, 15vh, -744px) rotateX(374deg) rotateY(155deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 51% 100%);
          clip-path: polygon(0 0, 0 100%, 51% 100%);
}
.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {
  transform: translate3d(23vw, 34vh, -373px) rotateX(313deg) rotateY(327deg);
  -webkit-clip-path: polygon(0 0, 51% 100%, 100% 0);
          clip-path: polygon(0 0, 51% 100%, 100% 0);
}
.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {
  transform: translate3d(12vw, 5vh, 837px) rotateX(437deg) rotateY(212deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 51% 100%);
          clip-path: polygon(100% 0, 100% 100%, 51% 100%);
}
.popup.s--closed .popup__piece:nth-child(6) {
  transform: translate3d(0, 146vh, 0);
}
.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {
  transform: translate3d(76vw, 0, 0) rotateX(452deg) rotateY(352deg);
}
.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-28vw, 0, 0) rotateX(237deg) rotateY(171deg);
}
.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {
  transform: translate3d(50vw, 0, 0) rotateX(279deg) rotateY(122deg);
}
.popup .popup__piece:nth-child(7) {
  height: 12.6666666667%;
  width: 21.6666666667%;
}
.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {
  transform: translate3d(6vw, 47vh, 712px) rotateX(300deg) rotateY(361deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);
          clip-path: polygon(0 0, 0 100%, 59% 100%);
}
.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {
  transform: translate3d(10vw, -46vh, -843px) rotateX(465deg) rotateY(314deg);
  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);
          clip-path: polygon(0 0, 59% 100%, 100% 0);
}
.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-12vw, -36vh, 244px) rotateX(351deg) rotateY(189deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);
          clip-path: polygon(100% 0, 100% 100%, 59% 100%);
}
.popup.s--closed .popup__piece:nth-child(7) {
  transform: translate3d(0, 146vh, 0);
}
.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {
  transform: translate3d(49vw, 0, 0) rotateX(408deg) rotateY(245deg);
}
.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {
  transform: translate3d(6vw, 0, 0) rotateX(350deg) rotateY(415deg);
}
.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-28vw, 0, 0) rotateX(373deg) rotateY(318deg);
}
.popup .popup__piece:nth-child(8) {
  height: 12.6666666667%;
  width: 17.6666666667%;
}
.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {
  transform: translate3d(14vw, 29vh, -746px) rotateX(406deg) rotateY(388deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 39% 100%);
          clip-path: polygon(0 0, 0 100%, 39% 100%);
}
.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-53vw, 40vh, 502px) rotateX(439deg) rotateY(438deg);
  -webkit-clip-path: polygon(0 0, 39% 100%, 100% 0);
          clip-path: polygon(0 0, 39% 100%, 100% 0);
}
.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {
  transform: translate3d(18vw, -49vh, 694px) rotateX(123deg) rotateY(149deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 39% 100%);
          clip-path: polygon(100% 0, 100% 100%, 39% 100%);
}
.popup.s--closed .popup__piece:nth-child(8) {
  transform: translate3d(0, 147vh, 0);
}
.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-41vw, 0, 0) rotateX(326deg) rotateY(229deg);
}
.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-20vw, 0, 0) rotateX(194deg) rotateY(471deg);
}
.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-5vw, 0, 0) rotateX(145deg) rotateY(415deg);
}
.popup .popup__piece:nth-child(9) {
  height: 12.6666666667%;
  width: 21.6666666667%;
}
.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {
  transform: translate3d(22vw, 42vh, 666px) rotateX(402deg) rotateY(233deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 52% 100%);
          clip-path: polygon(0 0, 0 100%, 52% 100%);
}
.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {
  transform: translate3d(57vw, -37vh, 877px) rotateX(455deg) rotateY(130deg);
  -webkit-clip-path: polygon(0 0, 52% 100%, 100% 0);
          clip-path: polygon(0 0, 52% 100%, 100% 0);
}
.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {
  transform: translate3d(53vw, 52vh, -556px) rotateX(400deg) rotateY(193deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 52% 100%);
          clip-path: polygon(100% 0, 100% 100%, 52% 100%);
}
.popup.s--closed .popup__piece:nth-child(9) {
  transform: translate3d(0, 142vh, 0);
}
.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-27vw, 0, 0) rotateX(212deg) rotateY(350deg);
}
.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-58vw, 0, 0) rotateX(344deg) rotateY(444deg);
}
.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-6vw, 0, 0) rotateX(369deg) rotateY(143deg);
}
.popup .popup__piece:nth-child(10) {
  height: 12.6666666667%;
  width: 18.6666666667%;
}
.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-7vw, -6vh, 739px) rotateX(138deg) rotateY(286deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 55% 100%);
          clip-path: polygon(0 0, 0 100%, 55% 100%);
}
.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-52vw, 6vh, -805px) rotateX(463deg) rotateY(304deg);
  -webkit-clip-path: polygon(0 0, 55% 100%, 100% 0);
          clip-path: polygon(0 0, 55% 100%, 100% 0);
}
.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {
  transform: translate3d(26vw, -51vh, 573px) rotateX(249deg) rotateY(247deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 55% 100%);
          clip-path: polygon(100% 0, 100% 100%, 55% 100%);
}
.popup.s--closed .popup__piece:nth-child(10) {
  transform: translate3d(0, 134vh, 0);
}
.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-10vw, 0, 0) rotateX(328deg) rotateY(244deg);
}
.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {
  transform: translate3d(56vw, 0, 0) rotateX(333deg) rotateY(371deg);
}
.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-41vw, 0, 0) rotateX(142deg) rotateY(421deg);
}
.popup .popup__piece:nth-child(11) {
  height: 12.6666666667%;
  width: 2.6666666667%;
}
.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {
  transform: translate3d(34vw, 47vh, -713px) rotateX(314deg) rotateY(189deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 64% 100%);
          clip-path: polygon(0 0, 0 100%, 64% 100%);
}
.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-39vw, -22vh, 129px) rotateX(149deg) rotateY(413deg);
  -webkit-clip-path: polygon(0 0, 64% 100%, 100% 0);
          clip-path: polygon(0 0, 64% 100%, 100% 0);
}
.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-9vw, 5vh, 449px) rotateX(397deg) rotateY(366deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 64% 100%);
          clip-path: polygon(100% 0, 100% 100%, 64% 100%);
}
.popup.s--closed .popup__piece:nth-child(11) {
  transform: translate3d(0, 103vh, 0);
}
.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-46vw, 0, 0) rotateX(396deg) rotateY(366deg);
}
.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {
  transform: translate3d(48vw, 0, 0) rotateX(392deg) rotateY(356deg);
}
.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-10vw, 0, 0) rotateX(315deg) rotateY(201deg);
}
.popup .popup__piece:nth-child(12) {
  height: 12.6666666667%;
  width: 17.6666666667%;
}
.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-23vw, 43vh, -791px) rotateX(479deg) rotateY(397deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 39% 100%);
          clip-path: polygon(0 0, 0 100%, 39% 100%);
}
.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {
  transform: translate3d(29vw, -31vh, -455px) rotateX(356deg) rotateY(286deg);
  -webkit-clip-path: polygon(0 0, 39% 100%, 100% 0);
          clip-path: polygon(0 0, 39% 100%, 100% 0);
}
.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-50vw, -51vh, -711px) rotateX(199deg) rotateY(260deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 39% 100%);
          clip-path: polygon(100% 0, 100% 100%, 39% 100%);
}
.popup.s--closed .popup__piece:nth-child(12) {
  transform: translate3d(0, 109vh, 0);
}
.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {
  transform: translate3d(79vw, 0, 0) rotateX(389deg) rotateY(195deg);
}
.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {
  transform: translate3d(59vw, 0, 0) rotateX(449deg) rotateY(265deg);
}
.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {
  transform: translate3d(16vw, 0, 0) rotateX(184deg) rotateY(466deg);
}
.popup .popup__piece:nth-child(13) {
  height: 20.6666666667%;
  width: 15.6666666667%;
}
.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-29vw, 38vh, -558px) rotateX(163deg) rotateY(271deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);
          clip-path: polygon(0 0, 0 100%, 59% 100%);
}
.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {
  transform: translate3d(18vw, 42vh, -678px) rotateX(224deg) rotateY(350deg);
  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);
          clip-path: polygon(0 0, 59% 100%, 100% 0);
}
.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {
  transform: translate3d(52vw, -12vh, -140px) rotateX(144deg) rotateY(215deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);
          clip-path: polygon(100% 0, 100% 100%, 59% 100%);
}
.popup.s--closed .popup__piece:nth-child(13) {
  transform: translate3d(0, 132vh, 0);
}
.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-66vw, 0, 0) rotateX(214deg) rotateY(222deg);
}
.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {
  transform: translate3d(72vw, 0, 0) rotateX(469deg) rotateY(247deg);
}
.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-49vw, 0, 0) rotateX(459deg) rotateY(202deg);
}
.popup .popup__piece:nth-child(14) {
  height: 20.6666666667%;
  width: 21.6666666667%;
}
.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {
  transform: translate3d(0vw, -38vh, -729px) rotateX(298deg) rotateY(310deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);
          clip-path: polygon(0 0, 0 100%, 32% 100%);
}
.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {
  transform: translate3d(3vw, -31vh, -415px) rotateX(167deg) rotateY(285deg);
  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);
          clip-path: polygon(0 0, 32% 100%, 100% 0);
}
.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {
  transform: translate3d(54vw, -23vh, 354px) rotateX(263deg) rotateY(290deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);
          clip-path: polygon(100% 0, 100% 100%, 32% 100%);
}
.popup.s--closed .popup__piece:nth-child(14) {
  transform: translate3d(0, 104vh, 0);
}
.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-63vw, 0, 0) rotateX(449deg) rotateY(431deg);
}
.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {
  transform: translate3d(61vw, 0, 0) rotateX(452deg) rotateY(324deg);
}
.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {
  transform: translate3d(61vw, 0, 0) rotateX(295deg) rotateY(461deg);
}
.popup .popup__piece:nth-child(15) {
  height: 20.6666666667%;
  width: 19.6666666667%;
}
.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {
  transform: translate3d(11vw, -56vh, 609px) rotateX(466deg) rotateY(246deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 66% 100%);
          clip-path: polygon(0 0, 0 100%, 66% 100%);
}
.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {
  transform: translate3d(51vw, -32vh, -634px) rotateX(201deg) rotateY(444deg);
  -webkit-clip-path: polygon(0 0, 66% 100%, 100% 0);
          clip-path: polygon(0 0, 66% 100%, 100% 0);
}
.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {
  transform: translate3d(32vw, 44vh, -664px) rotateX(350deg) rotateY(462deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 66% 100%);
          clip-path: polygon(100% 0, 100% 100%, 66% 100%);
}
.popup.s--closed .popup__piece:nth-child(15) {
  transform: translate3d(0, 131vh, 0);
}
.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-3vw, 0, 0) rotateX(234deg) rotateY(465deg);
}
.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-68vw, 0, 0) rotateX(216deg) rotateY(426deg);
}
.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {
  transform: translate3d(64vw, 0, 0) rotateX(205deg) rotateY(305deg);
}
.popup .popup__piece:nth-child(16) {
  height: 20.6666666667%;
  width: 21.6666666667%;
}
.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-55vw, 13vh, 88px) rotateX(221deg) rotateY(376deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 51% 100%);
          clip-path: polygon(0 0, 0 100%, 51% 100%);
}
.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-52vw, -23vh, -393px) rotateX(263deg) rotateY(132deg);
  -webkit-clip-path: polygon(0 0, 51% 100%, 100% 0);
          clip-path: polygon(0 0, 51% 100%, 100% 0);
}
.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-16vw, -3vh, 624px) rotateX(158deg) rotateY(390deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 51% 100%);
          clip-path: polygon(100% 0, 100% 100%, 51% 100%);
}
.popup.s--closed .popup__piece:nth-child(16) {
  transform: translate3d(0, 134vh, 0);
}
.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-30vw, 0, 0) rotateX(342deg) rotateY(381deg);
}
.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-53vw, 0, 0) rotateX(338deg) rotateY(181deg);
}
.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {
  transform: translate3d(5vw, 0, 0) rotateX(191deg) rotateY(143deg);
}
.popup .popup__piece:nth-child(17) {
  height: 20.6666666667%;
  width: 2.6666666667%;
}
.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-37vw, -33vh, -238px) rotateX(298deg) rotateY(432deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 60% 100%);
          clip-path: polygon(0 0, 0 100%, 60% 100%);
}
.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {
  transform: translate3d(57vw, 43vh, -31px) rotateX(342deg) rotateY(404deg);
  -webkit-clip-path: polygon(0 0, 60% 100%, 100% 0);
          clip-path: polygon(0 0, 60% 100%, 100% 0);
}
.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-12vw, 45vh, -491px) rotateX(238deg) rotateY(398deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(100% 0, 100% 100%, 60% 100%);
}
.popup.s--closed .popup__piece:nth-child(17) {
  transform: translate3d(0, 140vh, 0);
}
.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-14vw, 0, 0) rotateX(461deg) rotateY(310deg);
}
.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {
  transform: translate3d(64vw, 0, 0) rotateX(371deg) rotateY(404deg);
}
.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {
  transform: translate3d(34vw, 0, 0) rotateX(372deg) rotateY(278deg);
}
.popup .popup__piece:nth-child(18) {
  height: 20.6666666667%;
  width: 18.6666666667%;
}
.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {
  transform: translate3d(46vw, 2vh, -504px) rotateX(287deg) rotateY(361deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 40% 100%);
          clip-path: polygon(0 0, 0 100%, 40% 100%);
}
.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {
  transform: translate3d(31vw, 8vh, 15px) rotateX(145deg) rotateY(459deg);
  -webkit-clip-path: polygon(0 0, 40% 100%, 100% 0);
          clip-path: polygon(0 0, 40% 100%, 100% 0);
}
.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {
  transform: translate3d(11vw, 27vh, 688px) rotateX(251deg) rotateY(277deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 40% 100%);
          clip-path: polygon(100% 0, 100% 100%, 40% 100%);
}
.popup.s--closed .popup__piece:nth-child(18) {
  transform: translate3d(0, 135vh, 0);
}
.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {
  transform: translate3d(47vw, 0, 0) rotateX(315deg) rotateY(423deg);
}
.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {
  transform: translate3d(38vw, 0, 0) rotateX(182deg) rotateY(183deg);
}
.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-49vw, 0, 0) rotateX(275deg) rotateY(184deg);
}
.popup .popup__piece:nth-child(19) {
  height: 18.6666666667%;
  width: 12.6666666667%;
}
.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-37vw, -46vh, 376px) rotateX(375deg) rotateY(412deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);
          clip-path: polygon(0 0, 0 100%, 53% 100%);
}
.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {
  transform: translate3d(34vw, -20vh, -37px) rotateX(472deg) rotateY(472deg);
  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);
          clip-path: polygon(0 0, 53% 100%, 100% 0);
}
.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-28vw, -45vh, 288px) rotateX(422deg) rotateY(261deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);
          clip-path: polygon(100% 0, 100% 100%, 53% 100%);
}
.popup.s--closed .popup__piece:nth-child(19) {
  transform: translate3d(0, 106vh, 0);
}
.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {
  transform: translate3d(76vw, 0, 0) rotateX(140deg) rotateY(309deg);
}
.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {
  transform: translate3d(22vw, 0, 0) rotateX(302deg) rotateY(217deg);
}
.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {
  transform: translate3d(47vw, 0, 0) rotateX(348deg) rotateY(219deg);
}
.popup .popup__piece:nth-child(20) {
  height: 18.6666666667%;
  width: 17.6666666667%;
}
.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-17vw, -20vh, 670px) rotateX(304deg) rotateY(138deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);
          clip-path: polygon(0 0, 0 100%, 32% 100%);
}
.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-12vw, -18vh, -284px) rotateX(416deg) rotateY(176deg);
  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);
          clip-path: polygon(0 0, 32% 100%, 100% 0);
}
.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-33vw, 29vh, 799px) rotateX(140deg) rotateY(405deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);
          clip-path: polygon(100% 0, 100% 100%, 32% 100%);
}
.popup.s--closed .popup__piece:nth-child(20) {
  transform: translate3d(0, 149vh, 0);
}
.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-58vw, 0, 0) rotateX(362deg) rotateY(384deg);
}
.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {
  transform: translate3d(55vw, 0, 0) rotateX(328deg) rotateY(465deg);
}
.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-70vw, 0, 0) rotateX(225deg) rotateY(244deg);
}
.popup .popup__piece:nth-child(21) {
  height: 18.6666666667%;
  width: 14.6666666667%;
}
.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {
  transform: translate3d(25vw, 57vh, -103px) rotateX(461deg) rotateY(459deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);
          clip-path: polygon(0 0, 0 100%, 58% 100%);
}
.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {
  transform: translate3d(51vw, 11vh, -835px) rotateX(407deg) rotateY(232deg);
  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);
          clip-path: polygon(0 0, 58% 100%, 100% 0);
}
.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {
  transform: translate3d(55vw, 5vh, -773px) rotateX(175deg) rotateY(425deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);
          clip-path: polygon(100% 0, 100% 100%, 58% 100%);
}
.popup.s--closed .popup__piece:nth-child(21) {
  transform: translate3d(0, 108vh, 0);
}
.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-74vw, 0, 0) rotateX(459deg) rotateY(313deg);
}
.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {
  transform: translate3d(76vw, 0, 0) rotateX(181deg) rotateY(444deg);
}
.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {
  transform: translate3d(49vw, 0, 0) rotateX(267deg) rotateY(448deg);
}
.popup .popup__piece:nth-child(22) {
  height: 18.6666666667%;
  width: 15.6666666667%;
}
.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-10vw, 20vh, -519px) rotateX(453deg) rotateY(375deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);
          clip-path: polygon(0 0, 0 100%, 53% 100%);
}
.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-15vw, 19vh, -213px) rotateX(240deg) rotateY(164deg);
  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);
          clip-path: polygon(0 0, 53% 100%, 100% 0);
}
.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-21vw, -7vh, 599px) rotateX(242deg) rotateY(327deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);
          clip-path: polygon(100% 0, 100% 100%, 53% 100%);
}
.popup.s--closed .popup__piece:nth-child(22) {
  transform: translate3d(0, 128vh, 0);
}
.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {
  transform: translate3d(19vw, 0, 0) rotateX(466deg) rotateY(334deg);
}
.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {
  transform: translate3d(7vw, 0, 0) rotateX(329deg) rotateY(168deg);
}
.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-18vw, 0, 0) rotateX(317deg) rotateY(441deg);
}
.popup .popup__piece:nth-child(23) {
  height: 18.6666666667%;
  width: 20.6666666667%;
}
.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {
  transform: translate3d(47vw, -30vh, -665px) rotateX(395deg) rotateY(135deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);
          clip-path: polygon(0 0, 0 100%, 48% 100%);
}
.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {
  transform: translate3d(3vw, -12vh, 587px) rotateX(151deg) rotateY(143deg);
  -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);
          clip-path: polygon(0 0, 48% 100%, 100% 0);
}
.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {
  transform: translate3d(5vw, 56vh, -128px) rotateX(256deg) rotateY(166deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);
          clip-path: polygon(100% 0, 100% 100%, 48% 100%);
}
.popup.s--closed .popup__piece:nth-child(23) {
  transform: translate3d(0, 146vh, 0);
}
.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-2vw, 0, 0) rotateX(148deg) rotateY(406deg);
}
.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {
  transform: translate3d(65vw, 0, 0) rotateX(315deg) rotateY(129deg);
}
.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {
  transform: translate3d(50vw, 0, 0) rotateX(276deg) rotateY(175deg);
}
.popup .popup__piece:nth-child(24) {
  height: 18.6666666667%;
  width: 18.6666666667%;
}
.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-6vw, 8vh, -73px) rotateX(469deg) rotateY(299deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 67% 100%);
          clip-path: polygon(0 0, 0 100%, 67% 100%);
}
.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-43vw, -6vh, 766px) rotateX(123deg) rotateY(403deg);
  -webkit-clip-path: polygon(0 0, 67% 100%, 100% 0);
          clip-path: polygon(0 0, 67% 100%, 100% 0);
}
.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {
  transform: translate3d(31vw, -54vh, -635px) rotateX(134deg) rotateY(246deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 67% 100%);
          clip-path: polygon(100% 0, 100% 100%, 67% 100%);
}
.popup.s--closed .popup__piece:nth-child(24) {
  transform: translate3d(0, 114vh, 0);
}
.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {
  transform: translate3d(41vw, 0, 0) rotateX(202deg) rotateY(319deg);
}
.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-24vw, 0, 0) rotateX(468deg) rotateY(385deg);
}
.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-63vw, 0, 0) rotateX(323deg) rotateY(122deg);
}
.popup .popup__piece:nth-child(25) {
  height: 13.6666666667%;
  width: 16.6666666667%;
}
.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-11vw, -12vh, -580px) rotateX(395deg) rotateY(375deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 69% 100%);
          clip-path: polygon(0 0, 0 100%, 69% 100%);
}
.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {
  transform: translate3d(32vw, 0vh, 65px) rotateX(266deg) rotateY(325deg);
  -webkit-clip-path: polygon(0 0, 69% 100%, 100% 0);
          clip-path: polygon(0 0, 69% 100%, 100% 0);
}
.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-23vw, -6vh, 710px) rotateX(384deg) rotateY(214deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 69% 100%);
          clip-path: polygon(100% 0, 100% 100%, 69% 100%);
}
.popup.s--closed .popup__piece:nth-child(25) {
  transform: translate3d(0, 117vh, 0);
}
.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-32vw, 0, 0) rotateX(463deg) rotateY(340deg);
}
.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {
  transform: translate3d(39vw, 0, 0) rotateX(298deg) rotateY(214deg);
}
.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-74vw, 0, 0) rotateX(479deg) rotateY(148deg);
}
.popup .popup__piece:nth-child(26) {
  height: 13.6666666667%;
  width: 20.6666666667%;
}
.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-9vw, -56vh, 228px) rotateX(192deg) rotateY(221deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);
          clip-path: polygon(0 0, 0 100%, 59% 100%);
}
.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-57vw, 58vh, 134px) rotateX(393deg) rotateY(440deg);
  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);
          clip-path: polygon(0 0, 59% 100%, 100% 0);
}
.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {
  transform: translate3d(33vw, 2vh, 155px) rotateX(161deg) rotateY(355deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);
          clip-path: polygon(100% 0, 100% 100%, 59% 100%);
}
.popup.s--closed .popup__piece:nth-child(26) {
  transform: translate3d(0, 116vh, 0);
}
.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {
  transform: translate3d(58vw, 0, 0) rotateX(213deg) rotateY(210deg);
}
.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-34vw, 0, 0) rotateX(387deg) rotateY(172deg);
}
.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-75vw, 0, 0) rotateX(132deg) rotateY(331deg);
}
.popup .popup__piece:nth-child(27) {
  height: 13.6666666667%;
  width: 20.6666666667%;
}
.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-36vw, 46vh, -522px) rotateX(414deg) rotateY(175deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 40% 100%);
          clip-path: polygon(0 0, 0 100%, 40% 100%);
}
.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-12vw, -59vh, 497px) rotateX(142deg) rotateY(473deg);
  -webkit-clip-path: polygon(0 0, 40% 100%, 100% 0);
          clip-path: polygon(0 0, 40% 100%, 100% 0);
}
.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {
  transform: translate3d(55vw, 26vh, 122px) rotateX(142deg) rotateY(214deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 40% 100%);
          clip-path: polygon(100% 0, 100% 100%, 40% 100%);
}
.popup.s--closed .popup__piece:nth-child(27) {
  transform: translate3d(0, 134vh, 0);
}
.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {
  transform: translate3d(72vw, 0, 0) rotateX(390deg) rotateY(459deg);
}
.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-8vw, 0, 0) rotateX(173deg) rotateY(392deg);
}
.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-40vw, 0, 0) rotateX(324deg) rotateY(129deg);
}
.popup .popup__piece:nth-child(28) {
  height: 13.6666666667%;
  width: 12.6666666667%;
}
.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {
  transform: translate3d(24vw, 37vh, 721px) rotateX(456deg) rotateY(223deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 46% 100%);
          clip-path: polygon(0 0, 0 100%, 46% 100%);
}
.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {
  transform: translate3d(57vw, -23vh, -361px) rotateX(465deg) rotateY(423deg);
  -webkit-clip-path: polygon(0 0, 46% 100%, 100% 0);
          clip-path: polygon(0 0, 46% 100%, 100% 0);
}
.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-54vw, 36vh, -324px) rotateX(249deg) rotateY(429deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 46% 100%);
          clip-path: polygon(100% 0, 100% 100%, 46% 100%);
}
.popup.s--closed .popup__piece:nth-child(28) {
  transform: translate3d(0, 119vh, 0);
}
.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {
  transform: translate3d(63vw, 0, 0) rotateX(470deg) rotateY(410deg);
}
.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {
  transform: translate3d(65vw, 0, 0) rotateX(183deg) rotateY(421deg);
}
.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {
  transform: translate3d(23vw, 0, 0) rotateX(160deg) rotateY(476deg);
}
.popup .popup__piece:nth-child(29) {
  height: 13.6666666667%;
  width: 13.6666666667%;
}
.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-56vw, 57vh, -366px) rotateX(471deg) rotateY(124deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 60% 100%);
          clip-path: polygon(0 0, 0 100%, 60% 100%);
}
.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {
  transform: translate3d(20vw, 19vh, 759px) rotateX(440deg) rotateY(355deg);
  -webkit-clip-path: polygon(0 0, 60% 100%, 100% 0);
          clip-path: polygon(0 0, 60% 100%, 100% 0);
}
.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-33vw, -46vh, -593px) rotateX(183deg) rotateY(415deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 60% 100%);
          clip-path: polygon(100% 0, 100% 100%, 60% 100%);
}
.popup.s--closed .popup__piece:nth-child(29) {
  transform: translate3d(0, 104vh, 0);
}
.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {
  transform: translate3d(24vw, 0, 0) rotateX(420deg) rotateY(174deg);
}
.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-50vw, 0, 0) rotateX(448deg) rotateY(332deg);
}
.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {
  transform: translate3d(42vw, 0, 0) rotateX(132deg) rotateY(152deg);
}
.popup .popup__piece:nth-child(30) {
  height: 13.6666666667%;
  width: 15.6666666667%;
}
.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {
  transform: translate3d(58vw, -5vh, 552px) rotateX(379deg) rotateY(221deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%);
          clip-path: polygon(0 0, 0 100%, 50% 100%);
}
.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {
  transform: translate3d(59vw, 5vh, -142px) rotateX(471deg) rotateY(190deg);
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
          clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {
  transform: translate3d(42vw, 24vh, 392px) rotateX(199deg) rotateY(182deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%);
          clip-path: polygon(100% 0, 100% 100%, 50% 100%);
}
.popup.s--closed .popup__piece:nth-child(30) {
  transform: translate3d(0, 143vh, 0);
}
.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-57vw, 0, 0) rotateX(467deg) rotateY(164deg);
}
.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-32vw, 0, 0) rotateX(416deg) rotateY(183deg);
}
.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-63vw, 0, 0) rotateX(331deg) rotateY(305deg);
}
.popup .popup__piece:nth-child(31) {
  height: 19.6666666667%;
  width: 18.6666666667%;
}
.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-44vw, -29vh, -848px) rotateX(395deg) rotateY(368deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 54% 100%);
          clip-path: polygon(0 0, 0 100%, 54% 100%);
}
.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {
  transform: translate3d(12vw, -37vh, -471px) rotateX(431deg) rotateY(189deg);
  -webkit-clip-path: polygon(0 0, 54% 100%, 100% 0);
          clip-path: polygon(0 0, 54% 100%, 100% 0);
}
.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {
  transform: translate3d(33vw, -34vh, 107px) rotateX(455deg) rotateY(460deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 54% 100%);
          clip-path: polygon(100% 0, 100% 100%, 54% 100%);
}
.popup.s--closed .popup__piece:nth-child(31) {
  transform: translate3d(0, 118vh, 0);
}
.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-32vw, 0, 0) rotateX(422deg) rotateY(331deg);
}
.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {
  transform: translate3d(63vw, 0, 0) rotateX(366deg) rotateY(230deg);
}
.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-29vw, 0, 0) rotateX(266deg) rotateY(314deg);
}
.popup .popup__piece:nth-child(32) {
  height: 19.6666666667%;
  width: 13.6666666667%;
}
.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-38vw, -29vh, 736px) rotateX(310deg) rotateY(288deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);
          clip-path: polygon(0 0, 0 100%, 53% 100%);
}
.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-21vw, 6vh, -657px) rotateX(382deg) rotateY(179deg);
  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);
          clip-path: polygon(0 0, 53% 100%, 100% 0);
}
.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-57vw, -27vh, -155px) rotateX(143deg) rotateY(408deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);
          clip-path: polygon(100% 0, 100% 100%, 53% 100%);
}
.popup.s--closed .popup__piece:nth-child(32) {
  transform: translate3d(0, 117vh, 0);
}
.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-76vw, 0, 0) rotateX(306deg) rotateY(294deg);
}
.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-33vw, 0, 0) rotateX(328deg) rotateY(444deg);
}
.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-73vw, 0, 0) rotateX(363deg) rotateY(452deg);
}
.popup .popup__piece:nth-child(33) {
  height: 19.6666666667%;
  width: 14.6666666667%;
}
.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-37vw, -59vh, -652px) rotateX(332deg) rotateY(468deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 64% 100%);
          clip-path: polygon(0 0, 0 100%, 64% 100%);
}
.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-15vw, 18vh, -872px) rotateX(454deg) rotateY(129deg);
  -webkit-clip-path: polygon(0 0, 64% 100%, 100% 0);
          clip-path: polygon(0 0, 64% 100%, 100% 0);
}
.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-47vw, -10vh, -407px) rotateX(179deg) rotateY(169deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 64% 100%);
          clip-path: polygon(100% 0, 100% 100%, 64% 100%);
}
.popup.s--closed .popup__piece:nth-child(33) {
  transform: translate3d(0, 139vh, 0);
}
.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-44vw, 0, 0) rotateX(426deg) rotateY(314deg);
}
.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {
  transform: translate3d(73vw, 0, 0) rotateX(218deg) rotateY(150deg);
}
.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {
  transform: translate3d(59vw, 0, 0) rotateX(469deg) rotateY(256deg);
}
.popup .popup__piece:nth-child(34) {
  height: 19.6666666667%;
  width: 20.6666666667%;
}
.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-34vw, -19vh, 92px) rotateX(409deg) rotateY(158deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);
          clip-path: polygon(0 0, 0 100%, 53% 100%);
}
.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-36vw, -31vh, 605px) rotateX(298deg) rotateY(358deg);
  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);
          clip-path: polygon(0 0, 53% 100%, 100% 0);
}
.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {
  transform: translate3d(13vw, -4vh, -381px) rotateX(193deg) rotateY(318deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);
          clip-path: polygon(100% 0, 100% 100%, 53% 100%);
}
.popup.s--closed .popup__piece:nth-child(34) {
  transform: translate3d(0, 113vh, 0);
}
.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {
  transform: translate3d(32vw, 0, 0) rotateX(225deg) rotateY(322deg);
}
.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-45vw, 0, 0) rotateX(340deg) rotateY(387deg);
}
.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-61vw, 0, 0) rotateX(182deg) rotateY(291deg);
}
.popup .popup__piece:nth-child(35) {
  height: 19.6666666667%;
  width: 19.6666666667%;
}
.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-46vw, 40vh, 172px) rotateX(242deg) rotateY(224deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);
          clip-path: polygon(0 0, 0 100%, 58% 100%);
}
.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {
  transform: translate3d(14vw, -46vh, -120px) rotateX(248deg) rotateY(173deg);
  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);
          clip-path: polygon(0 0, 58% 100%, 100% 0);
}
.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-16vw, 44vh, 822px) rotateX(401deg) rotateY(174deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);
          clip-path: polygon(100% 0, 100% 100%, 58% 100%);
}
.popup.s--closed .popup__piece:nth-child(35) {
  transform: translate3d(0, 114vh, 0);
}
.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {
  transform: translate3d(13vw, 0, 0) rotateX(219deg) rotateY(169deg);
}
.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {
  transform: translate3d(5vw, 0, 0) rotateX(142deg) rotateY(379deg);
}
.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-73vw, 0, 0) rotateX(330deg) rotateY(266deg);
}
.popup .popup__piece:nth-child(36) {
  height: 19.6666666667%;
  width: 12.6666666667%;
}
.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {
  transform: translate3d(43vw, 50vh, -862px) rotateX(430deg) rotateY(392deg);
  -webkit-clip-path: polygon(0 0, 0 100%, 37% 100%);
          clip-path: polygon(0 0, 0 100%, 37% 100%);
}
.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {
  transform: translate3d(-3vw, -48vh, -93px) rotateX(364deg) rotateY(362deg);
  -webkit-clip-path: polygon(0 0, 37% 100%, 100% 0);
          clip-path: polygon(0 0, 37% 100%, 100% 0);
}
.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {
  transform: translate3d(10vw, 35vh, 471px) rotateX(363deg) rotateY(400deg);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 37% 100%);
          clip-path: polygon(100% 0, 100% 100%, 37% 100%);
}
.popup.s--closed .popup__piece:nth-child(36) {
  transform: translate3d(0, 150vh, 0);
}
.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {
  transform: translate3d(-10vw, 0, 0) rotateX(197deg) rotateY(258deg);
}
.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {
  transform: translate3d(71vw, 0, 0) rotateX(480deg) rotateY(174deg);
}
.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {
  transform: translate3d(-63vw, 0, 0) rotateX(227deg) rotateY(385deg);
}
.popup__pieces {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.popup__piece {
  float: left;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0s 0s;
}
.popup.s--closed .popup__piece {
  transition: transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04);
}
.popup__piece:after {
  content: "";
  display: table;
  clear: both;
}
.popup__piece-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.28s 0.55s ease-in, transform 0.7s 0.1s ease-out;
}
.popup.s--active .popup__piece-inner {
  transition: opacity 0.35s, transform 0.7s ease-in-out;
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) !important;
  opacity: 1;
}
.popup__content {
  position: relative;
  min-height: 500px;
  padding: 30px;
  background: #000;
  color: #fff;
  transition: opacity 0.2s;
  opacity: 0;
}
.popup.s--active .popup__content {
  transition-delay: 0.6s;
  opacity: 1;
}
.popup__close {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.popup__close:before, .popup__close:after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 100%;
  height: 2px;
  background: #fff;
}
.popup__close:before {
  transform: rotate(45deg);
}
.popup__close:after {
  transform: rotate(-45deg);
}
.popup__heading {
  margin-bottom: 20px;
  font-size: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.popup__text {
  font-size: 18px;
  line-height: 1.5;
}

.popup-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 50px;
  margin-left: -100px;
  margin-top: -25px;
  background: transparent;
  outline: none;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #000;
  border: 2px solid #000;
  transition: all 0.3s;
  cursor: pointer;
}
.popup-btn:hover {
  background-color: #000;
  color: #fff;
  letter-spacing: 2px;
}

var numOfPieces = 6 * 6;

var frag = document.createDocumentFragment();

function insertInnerPieces($el, innerPieces) {
  for (var i = 0; i < innerPieces; i++) {
    var $inner = document.createElement('div');
    $inner.classList.add('popup__piece-inner');
    $el.appendChild($inner);
  }
};

for (var i = 1; i <= numOfPieces; i++) {
  var $piece = document.createElement('div');
  $piece.classList.add('popup__piece');
  
  insertInnerPieces($piece, 3);
  frag.appendChild($piece);
}

document.querySelector('.popup__pieces').appendChild(frag);

var $popupsCont = document.querySelector('.popups-cont');
var $popup = document.querySelector('.popup');
var popupAT = 900;

document.querySelector('.popup-btn').addEventListener('click', function() {
  $popupsCont.classList.add('s--popup-active');
  $popup.classList.add('s--active');
});

function closeHandler() {
  $popupsCont.classList.remove('s--popup-active');
  $popup.classList.remove('s--active');
  $popup.classList.add('s--closed');
  
  setTimeout(function() {
    $popup.classList.remove('s--closed');
  }, popupAT);
}

document.querySelector('.popup__close').addEventListener('click', closeHandler);

document.querySelector('.popups-cont__overlay').addEventListener('click', closeHandler);