{"id":306,"date":"2023-03-07T21:13:54","date_gmt":"2023-03-07T18:13:54","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=306"},"modified":"2023-03-28T18:17:08","modified_gmt":"2023-03-28T15:17:08","slug":"popup","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/306\/","title":{"rendered":"Popup"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"936\" style=\"aspect-ratio: 1805 \/ 936;\" width=\"1805\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-07_19-09-32.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div class=&quot;popups-cont&quot;&gt;\n  &lt;div class=&quot;popups-cont__overlay&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;popup&quot;&gt;\n    &lt;div class=&quot;popup__pieces&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;popup__content&quot;&gt;\n      &lt;div class=&quot;popup__close&quot;&gt;&lt;\/div&gt;\n      &lt;h3 class=&quot;popup__heading&quot;&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a&lt;\/h3&gt;\n      &lt;p class=&quot;popup__text&quot;&gt;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.\n      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?\n   &lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;button type=&quot;button&quot; class=&quot;popup-btn&quot;&gt;\u041e\u0442\u043a\u0440\u044b\u0442\u044c&lt;\/button&gt;\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  background-color: bisque;\n  overflow: hidden;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.popups-cont {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: -10;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  perspective: 1000px;\n  pointer-events: none;\n  transition: z-index 0s 0.8s;\n}\n.popups-cont.s--popup-active {\n  z-index: 1000;\n  pointer-events: auto;\n  transition: z-index 0s 0s;\n}\n.popups-cont__overlay {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: opacity 0.35s;\n}\n.popups-cont.s--popup-active .popups-cont__overlay {\n  opacity: 1;\n  transition: opacity 0.35s 0.35s;\n}\n\n.popup {\n  z-index: 2;\n  position: relative;\n  width: 500px;\n  height: 500px;\n  transform-style: preserve-3d;\n}\n.popup .popup__piece:nth-child(1) {\n  height: 14.6666666667%;\n  width: 21.6666666667%;\n}\n.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-26vw, 6vh, -550px) rotateX(148deg) rotateY(172deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);\n          clip-path: polygon(0 0, 0 100%, 58% 100%);\n}\n.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(38vw, -46vh, -245px) rotateX(361deg) rotateY(277deg);\n  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);\n          clip-path: polygon(0 0, 58% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(40vw, 33vh, 634px) rotateX(229deg) rotateY(303deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(1) {\n  transform: translate3d(0, 146vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(16vw, 0, 0) rotateX(234deg) rotateY(164deg);\n}\n.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(27vw, 0, 0) rotateX(156deg) rotateY(196deg);\n}\n.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-77vw, 0, 0) rotateX(369deg) rotateY(312deg);\n}\n.popup .popup__piece:nth-child(2) {\n  height: 14.6666666667%;\n  width: 12.6666666667%;\n}\n.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-20vw, -8vh, -300px) rotateX(472deg) rotateY(235deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);\n          clip-path: polygon(0 0, 0 100%, 32% 100%);\n}\n.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-13vw, 53vh, -550px) rotateX(361deg) rotateY(128deg);\n  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);\n          clip-path: polygon(0 0, 32% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(46vw, 6vh, 664px) rotateX(417deg) rotateY(222deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(2) {\n  transform: translate3d(0, 113vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(26vw, 0, 0) rotateX(121deg) rotateY(244deg);\n}\n.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-16vw, 0, 0) rotateX(167deg) rotateY(369deg);\n}\n.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(5vw, 0, 0) rotateX(293deg) rotateY(358deg);\n}\n.popup .popup__piece:nth-child(3) {\n  height: 14.6666666667%;\n  width: 15.6666666667%;\n}\n.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(3vw, -15vh, -682px) rotateX(379deg) rotateY(202deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);\n          clip-path: polygon(0 0, 0 100%, 48% 100%);\n}\n.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(16vw, 49vh, 404px) rotateX(127deg) rotateY(380deg);\n  -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);\n          clip-path: polygon(0 0, 48% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(53vw, 15vh, -380px) rotateX(303deg) rotateY(270deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 48% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(3) {\n  transform: translate3d(0, 130vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-41vw, 0, 0) rotateX(205deg) rotateY(254deg);\n}\n.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(61vw, 0, 0) rotateX(212deg) rotateY(300deg);\n}\n.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-37vw, 0, 0) rotateX(436deg) rotateY(315deg);\n}\n.popup .popup__piece:nth-child(4) {\n  height: 14.6666666667%;\n  width: 16.6666666667%;\n}\n.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-47vw, -41vh, 762px) rotateX(381deg) rotateY(222deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 41% 100%);\n          clip-path: polygon(0 0, 0 100%, 41% 100%);\n}\n.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(45vw, 19vh, -454px) rotateX(249deg) rotateY(191deg);\n  -webkit-clip-path: polygon(0 0, 41% 100%, 100% 0);\n          clip-path: polygon(0 0, 41% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(5vw, -55vh, 65px) rotateX(214deg) rotateY(223deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 41% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 41% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(4) {\n  transform: translate3d(0, 134vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-29vw, 0, 0) rotateX(332deg) rotateY(382deg);\n}\n.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-26vw, 0, 0) rotateX(371deg) rotateY(390deg);\n}\n.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-41vw, 0, 0) rotateX(472deg) rotateY(306deg);\n}\n.popup .popup__piece:nth-child(5) {\n  height: 14.6666666667%;\n  width: 15.6666666667%;\n}\n.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(35vw, -6vh, 91px) rotateX(342deg) rotateY(413deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);\n          clip-path: polygon(0 0, 0 100%, 58% 100%);\n}\n.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-58vw, -52vh, -570px) rotateX(453deg) rotateY(331deg);\n  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);\n          clip-path: polygon(0 0, 58% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(47vw, 18vh, 841px) rotateX(325deg) rotateY(315deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(5) {\n  transform: translate3d(0, 118vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(37vw, 0, 0) rotateX(430deg) rotateY(380deg);\n}\n.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-25vw, 0, 0) rotateX(323deg) rotateY(468deg);\n}\n.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(61vw, 0, 0) rotateX(275deg) rotateY(295deg);\n}\n.popup .popup__piece:nth-child(6) {\n  height: 14.6666666667%;\n  width: 17.6666666667%;\n}\n.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-32vw, 15vh, -744px) rotateX(374deg) rotateY(155deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 51% 100%);\n          clip-path: polygon(0 0, 0 100%, 51% 100%);\n}\n.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(23vw, 34vh, -373px) rotateX(313deg) rotateY(327deg);\n  -webkit-clip-path: polygon(0 0, 51% 100%, 100% 0);\n          clip-path: polygon(0 0, 51% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(12vw, 5vh, 837px) rotateX(437deg) rotateY(212deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 51% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 51% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(6) {\n  transform: translate3d(0, 146vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(76vw, 0, 0) rotateX(452deg) rotateY(352deg);\n}\n.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-28vw, 0, 0) rotateX(237deg) rotateY(171deg);\n}\n.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(50vw, 0, 0) rotateX(279deg) rotateY(122deg);\n}\n.popup .popup__piece:nth-child(7) {\n  height: 12.6666666667%;\n  width: 21.6666666667%;\n}\n.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(6vw, 47vh, 712px) rotateX(300deg) rotateY(361deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);\n          clip-path: polygon(0 0, 0 100%, 59% 100%);\n}\n.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(10vw, -46vh, -843px) rotateX(465deg) rotateY(314deg);\n  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);\n          clip-path: polygon(0 0, 59% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-12vw, -36vh, 244px) rotateX(351deg) rotateY(189deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(7) {\n  transform: translate3d(0, 146vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(49vw, 0, 0) rotateX(408deg) rotateY(245deg);\n}\n.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(6vw, 0, 0) rotateX(350deg) rotateY(415deg);\n}\n.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-28vw, 0, 0) rotateX(373deg) rotateY(318deg);\n}\n.popup .popup__piece:nth-child(8) {\n  height: 12.6666666667%;\n  width: 17.6666666667%;\n}\n.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(14vw, 29vh, -746px) rotateX(406deg) rotateY(388deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 39% 100%);\n          clip-path: polygon(0 0, 0 100%, 39% 100%);\n}\n.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-53vw, 40vh, 502px) rotateX(439deg) rotateY(438deg);\n  -webkit-clip-path: polygon(0 0, 39% 100%, 100% 0);\n          clip-path: polygon(0 0, 39% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(18vw, -49vh, 694px) rotateX(123deg) rotateY(149deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 39% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 39% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(8) {\n  transform: translate3d(0, 147vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-41vw, 0, 0) rotateX(326deg) rotateY(229deg);\n}\n.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-20vw, 0, 0) rotateX(194deg) rotateY(471deg);\n}\n.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-5vw, 0, 0) rotateX(145deg) rotateY(415deg);\n}\n.popup .popup__piece:nth-child(9) {\n  height: 12.6666666667%;\n  width: 21.6666666667%;\n}\n.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(22vw, 42vh, 666px) rotateX(402deg) rotateY(233deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 52% 100%);\n          clip-path: polygon(0 0, 0 100%, 52% 100%);\n}\n.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(57vw, -37vh, 877px) rotateX(455deg) rotateY(130deg);\n  -webkit-clip-path: polygon(0 0, 52% 100%, 100% 0);\n          clip-path: polygon(0 0, 52% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(53vw, 52vh, -556px) rotateX(400deg) rotateY(193deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 52% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 52% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(9) {\n  transform: translate3d(0, 142vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-27vw, 0, 0) rotateX(212deg) rotateY(350deg);\n}\n.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-58vw, 0, 0) rotateX(344deg) rotateY(444deg);\n}\n.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-6vw, 0, 0) rotateX(369deg) rotateY(143deg);\n}\n.popup .popup__piece:nth-child(10) {\n  height: 12.6666666667%;\n  width: 18.6666666667%;\n}\n.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-7vw, -6vh, 739px) rotateX(138deg) rotateY(286deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 55% 100%);\n          clip-path: polygon(0 0, 0 100%, 55% 100%);\n}\n.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-52vw, 6vh, -805px) rotateX(463deg) rotateY(304deg);\n  -webkit-clip-path: polygon(0 0, 55% 100%, 100% 0);\n          clip-path: polygon(0 0, 55% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(26vw, -51vh, 573px) rotateX(249deg) rotateY(247deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 55% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 55% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(10) {\n  transform: translate3d(0, 134vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-10vw, 0, 0) rotateX(328deg) rotateY(244deg);\n}\n.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(56vw, 0, 0) rotateX(333deg) rotateY(371deg);\n}\n.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-41vw, 0, 0) rotateX(142deg) rotateY(421deg);\n}\n.popup .popup__piece:nth-child(11) {\n  height: 12.6666666667%;\n  width: 2.6666666667%;\n}\n.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(34vw, 47vh, -713px) rotateX(314deg) rotateY(189deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 64% 100%);\n          clip-path: polygon(0 0, 0 100%, 64% 100%);\n}\n.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-39vw, -22vh, 129px) rotateX(149deg) rotateY(413deg);\n  -webkit-clip-path: polygon(0 0, 64% 100%, 100% 0);\n          clip-path: polygon(0 0, 64% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-9vw, 5vh, 449px) rotateX(397deg) rotateY(366deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 64% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 64% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(11) {\n  transform: translate3d(0, 103vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-46vw, 0, 0) rotateX(396deg) rotateY(366deg);\n}\n.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(48vw, 0, 0) rotateX(392deg) rotateY(356deg);\n}\n.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-10vw, 0, 0) rotateX(315deg) rotateY(201deg);\n}\n.popup .popup__piece:nth-child(12) {\n  height: 12.6666666667%;\n  width: 17.6666666667%;\n}\n.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-23vw, 43vh, -791px) rotateX(479deg) rotateY(397deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 39% 100%);\n          clip-path: polygon(0 0, 0 100%, 39% 100%);\n}\n.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(29vw, -31vh, -455px) rotateX(356deg) rotateY(286deg);\n  -webkit-clip-path: polygon(0 0, 39% 100%, 100% 0);\n          clip-path: polygon(0 0, 39% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-50vw, -51vh, -711px) rotateX(199deg) rotateY(260deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 39% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 39% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(12) {\n  transform: translate3d(0, 109vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(79vw, 0, 0) rotateX(389deg) rotateY(195deg);\n}\n.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(59vw, 0, 0) rotateX(449deg) rotateY(265deg);\n}\n.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(16vw, 0, 0) rotateX(184deg) rotateY(466deg);\n}\n.popup .popup__piece:nth-child(13) {\n  height: 20.6666666667%;\n  width: 15.6666666667%;\n}\n.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-29vw, 38vh, -558px) rotateX(163deg) rotateY(271deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);\n          clip-path: polygon(0 0, 0 100%, 59% 100%);\n}\n.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(18vw, 42vh, -678px) rotateX(224deg) rotateY(350deg);\n  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);\n          clip-path: polygon(0 0, 59% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(52vw, -12vh, -140px) rotateX(144deg) rotateY(215deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(13) {\n  transform: translate3d(0, 132vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-66vw, 0, 0) rotateX(214deg) rotateY(222deg);\n}\n.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(72vw, 0, 0) rotateX(469deg) rotateY(247deg);\n}\n.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-49vw, 0, 0) rotateX(459deg) rotateY(202deg);\n}\n.popup .popup__piece:nth-child(14) {\n  height: 20.6666666667%;\n  width: 21.6666666667%;\n}\n.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(0vw, -38vh, -729px) rotateX(298deg) rotateY(310deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);\n          clip-path: polygon(0 0, 0 100%, 32% 100%);\n}\n.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(3vw, -31vh, -415px) rotateX(167deg) rotateY(285deg);\n  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);\n          clip-path: polygon(0 0, 32% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(54vw, -23vh, 354px) rotateX(263deg) rotateY(290deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(14) {\n  transform: translate3d(0, 104vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-63vw, 0, 0) rotateX(449deg) rotateY(431deg);\n}\n.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(61vw, 0, 0) rotateX(452deg) rotateY(324deg);\n}\n.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(61vw, 0, 0) rotateX(295deg) rotateY(461deg);\n}\n.popup .popup__piece:nth-child(15) {\n  height: 20.6666666667%;\n  width: 19.6666666667%;\n}\n.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(11vw, -56vh, 609px) rotateX(466deg) rotateY(246deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 66% 100%);\n          clip-path: polygon(0 0, 0 100%, 66% 100%);\n}\n.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(51vw, -32vh, -634px) rotateX(201deg) rotateY(444deg);\n  -webkit-clip-path: polygon(0 0, 66% 100%, 100% 0);\n          clip-path: polygon(0 0, 66% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(32vw, 44vh, -664px) rotateX(350deg) rotateY(462deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 66% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 66% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(15) {\n  transform: translate3d(0, 131vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-3vw, 0, 0) rotateX(234deg) rotateY(465deg);\n}\n.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-68vw, 0, 0) rotateX(216deg) rotateY(426deg);\n}\n.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(64vw, 0, 0) rotateX(205deg) rotateY(305deg);\n}\n.popup .popup__piece:nth-child(16) {\n  height: 20.6666666667%;\n  width: 21.6666666667%;\n}\n.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-55vw, 13vh, 88px) rotateX(221deg) rotateY(376deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 51% 100%);\n          clip-path: polygon(0 0, 0 100%, 51% 100%);\n}\n.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-52vw, -23vh, -393px) rotateX(263deg) rotateY(132deg);\n  -webkit-clip-path: polygon(0 0, 51% 100%, 100% 0);\n          clip-path: polygon(0 0, 51% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-16vw, -3vh, 624px) rotateX(158deg) rotateY(390deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 51% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 51% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(16) {\n  transform: translate3d(0, 134vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-30vw, 0, 0) rotateX(342deg) rotateY(381deg);\n}\n.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-53vw, 0, 0) rotateX(338deg) rotateY(181deg);\n}\n.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(5vw, 0, 0) rotateX(191deg) rotateY(143deg);\n}\n.popup .popup__piece:nth-child(17) {\n  height: 20.6666666667%;\n  width: 2.6666666667%;\n}\n.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-37vw, -33vh, -238px) rotateX(298deg) rotateY(432deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 60% 100%);\n          clip-path: polygon(0 0, 0 100%, 60% 100%);\n}\n.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(57vw, 43vh, -31px) rotateX(342deg) rotateY(404deg);\n  -webkit-clip-path: polygon(0 0, 60% 100%, 100% 0);\n          clip-path: polygon(0 0, 60% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-12vw, 45vh, -491px) rotateX(238deg) rotateY(398deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 60% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 60% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(17) {\n  transform: translate3d(0, 140vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-14vw, 0, 0) rotateX(461deg) rotateY(310deg);\n}\n.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(64vw, 0, 0) rotateX(371deg) rotateY(404deg);\n}\n.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(34vw, 0, 0) rotateX(372deg) rotateY(278deg);\n}\n.popup .popup__piece:nth-child(18) {\n  height: 20.6666666667%;\n  width: 18.6666666667%;\n}\n.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(46vw, 2vh, -504px) rotateX(287deg) rotateY(361deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 40% 100%);\n          clip-path: polygon(0 0, 0 100%, 40% 100%);\n}\n.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(31vw, 8vh, 15px) rotateX(145deg) rotateY(459deg);\n  -webkit-clip-path: polygon(0 0, 40% 100%, 100% 0);\n          clip-path: polygon(0 0, 40% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(11vw, 27vh, 688px) rotateX(251deg) rotateY(277deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 40% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 40% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(18) {\n  transform: translate3d(0, 135vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(47vw, 0, 0) rotateX(315deg) rotateY(423deg);\n}\n.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(38vw, 0, 0) rotateX(182deg) rotateY(183deg);\n}\n.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-49vw, 0, 0) rotateX(275deg) rotateY(184deg);\n}\n.popup .popup__piece:nth-child(19) {\n  height: 18.6666666667%;\n  width: 12.6666666667%;\n}\n.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-37vw, -46vh, 376px) rotateX(375deg) rotateY(412deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);\n          clip-path: polygon(0 0, 0 100%, 53% 100%);\n}\n.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(34vw, -20vh, -37px) rotateX(472deg) rotateY(472deg);\n  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);\n          clip-path: polygon(0 0, 53% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-28vw, -45vh, 288px) rotateX(422deg) rotateY(261deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(19) {\n  transform: translate3d(0, 106vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(76vw, 0, 0) rotateX(140deg) rotateY(309deg);\n}\n.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(22vw, 0, 0) rotateX(302deg) rotateY(217deg);\n}\n.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(47vw, 0, 0) rotateX(348deg) rotateY(219deg);\n}\n.popup .popup__piece:nth-child(20) {\n  height: 18.6666666667%;\n  width: 17.6666666667%;\n}\n.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-17vw, -20vh, 670px) rotateX(304deg) rotateY(138deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);\n          clip-path: polygon(0 0, 0 100%, 32% 100%);\n}\n.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-12vw, -18vh, -284px) rotateX(416deg) rotateY(176deg);\n  -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);\n          clip-path: polygon(0 0, 32% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-33vw, 29vh, 799px) rotateX(140deg) rotateY(405deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 32% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(20) {\n  transform: translate3d(0, 149vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-58vw, 0, 0) rotateX(362deg) rotateY(384deg);\n}\n.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(55vw, 0, 0) rotateX(328deg) rotateY(465deg);\n}\n.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-70vw, 0, 0) rotateX(225deg) rotateY(244deg);\n}\n.popup .popup__piece:nth-child(21) {\n  height: 18.6666666667%;\n  width: 14.6666666667%;\n}\n.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(25vw, 57vh, -103px) rotateX(461deg) rotateY(459deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);\n          clip-path: polygon(0 0, 0 100%, 58% 100%);\n}\n.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(51vw, 11vh, -835px) rotateX(407deg) rotateY(232deg);\n  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);\n          clip-path: polygon(0 0, 58% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(55vw, 5vh, -773px) rotateX(175deg) rotateY(425deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(21) {\n  transform: translate3d(0, 108vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-74vw, 0, 0) rotateX(459deg) rotateY(313deg);\n}\n.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(76vw, 0, 0) rotateX(181deg) rotateY(444deg);\n}\n.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(49vw, 0, 0) rotateX(267deg) rotateY(448deg);\n}\n.popup .popup__piece:nth-child(22) {\n  height: 18.6666666667%;\n  width: 15.6666666667%;\n}\n.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-10vw, 20vh, -519px) rotateX(453deg) rotateY(375deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);\n          clip-path: polygon(0 0, 0 100%, 53% 100%);\n}\n.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-15vw, 19vh, -213px) rotateX(240deg) rotateY(164deg);\n  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);\n          clip-path: polygon(0 0, 53% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-21vw, -7vh, 599px) rotateX(242deg) rotateY(327deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(22) {\n  transform: translate3d(0, 128vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(19vw, 0, 0) rotateX(466deg) rotateY(334deg);\n}\n.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(7vw, 0, 0) rotateX(329deg) rotateY(168deg);\n}\n.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-18vw, 0, 0) rotateX(317deg) rotateY(441deg);\n}\n.popup .popup__piece:nth-child(23) {\n  height: 18.6666666667%;\n  width: 20.6666666667%;\n}\n.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(47vw, -30vh, -665px) rotateX(395deg) rotateY(135deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);\n          clip-path: polygon(0 0, 0 100%, 48% 100%);\n}\n.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(3vw, -12vh, 587px) rotateX(151deg) rotateY(143deg);\n  -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);\n          clip-path: polygon(0 0, 48% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(5vw, 56vh, -128px) rotateX(256deg) rotateY(166deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 48% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(23) {\n  transform: translate3d(0, 146vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-2vw, 0, 0) rotateX(148deg) rotateY(406deg);\n}\n.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(65vw, 0, 0) rotateX(315deg) rotateY(129deg);\n}\n.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(50vw, 0, 0) rotateX(276deg) rotateY(175deg);\n}\n.popup .popup__piece:nth-child(24) {\n  height: 18.6666666667%;\n  width: 18.6666666667%;\n}\n.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-6vw, 8vh, -73px) rotateX(469deg) rotateY(299deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 67% 100%);\n          clip-path: polygon(0 0, 0 100%, 67% 100%);\n}\n.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-43vw, -6vh, 766px) rotateX(123deg) rotateY(403deg);\n  -webkit-clip-path: polygon(0 0, 67% 100%, 100% 0);\n          clip-path: polygon(0 0, 67% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(31vw, -54vh, -635px) rotateX(134deg) rotateY(246deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 67% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 67% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(24) {\n  transform: translate3d(0, 114vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(41vw, 0, 0) rotateX(202deg) rotateY(319deg);\n}\n.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-24vw, 0, 0) rotateX(468deg) rotateY(385deg);\n}\n.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-63vw, 0, 0) rotateX(323deg) rotateY(122deg);\n}\n.popup .popup__piece:nth-child(25) {\n  height: 13.6666666667%;\n  width: 16.6666666667%;\n}\n.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-11vw, -12vh, -580px) rotateX(395deg) rotateY(375deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 69% 100%);\n          clip-path: polygon(0 0, 0 100%, 69% 100%);\n}\n.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(32vw, 0vh, 65px) rotateX(266deg) rotateY(325deg);\n  -webkit-clip-path: polygon(0 0, 69% 100%, 100% 0);\n          clip-path: polygon(0 0, 69% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-23vw, -6vh, 710px) rotateX(384deg) rotateY(214deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 69% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 69% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(25) {\n  transform: translate3d(0, 117vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-32vw, 0, 0) rotateX(463deg) rotateY(340deg);\n}\n.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(39vw, 0, 0) rotateX(298deg) rotateY(214deg);\n}\n.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-74vw, 0, 0) rotateX(479deg) rotateY(148deg);\n}\n.popup .popup__piece:nth-child(26) {\n  height: 13.6666666667%;\n  width: 20.6666666667%;\n}\n.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-9vw, -56vh, 228px) rotateX(192deg) rotateY(221deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 59% 100%);\n          clip-path: polygon(0 0, 0 100%, 59% 100%);\n}\n.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-57vw, 58vh, 134px) rotateX(393deg) rotateY(440deg);\n  -webkit-clip-path: polygon(0 0, 59% 100%, 100% 0);\n          clip-path: polygon(0 0, 59% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(33vw, 2vh, 155px) rotateX(161deg) rotateY(355deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 59% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(26) {\n  transform: translate3d(0, 116vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(58vw, 0, 0) rotateX(213deg) rotateY(210deg);\n}\n.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-34vw, 0, 0) rotateX(387deg) rotateY(172deg);\n}\n.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-75vw, 0, 0) rotateX(132deg) rotateY(331deg);\n}\n.popup .popup__piece:nth-child(27) {\n  height: 13.6666666667%;\n  width: 20.6666666667%;\n}\n.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-36vw, 46vh, -522px) rotateX(414deg) rotateY(175deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 40% 100%);\n          clip-path: polygon(0 0, 0 100%, 40% 100%);\n}\n.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-12vw, -59vh, 497px) rotateX(142deg) rotateY(473deg);\n  -webkit-clip-path: polygon(0 0, 40% 100%, 100% 0);\n          clip-path: polygon(0 0, 40% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(55vw, 26vh, 122px) rotateX(142deg) rotateY(214deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 40% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 40% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(27) {\n  transform: translate3d(0, 134vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(72vw, 0, 0) rotateX(390deg) rotateY(459deg);\n}\n.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-8vw, 0, 0) rotateX(173deg) rotateY(392deg);\n}\n.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-40vw, 0, 0) rotateX(324deg) rotateY(129deg);\n}\n.popup .popup__piece:nth-child(28) {\n  height: 13.6666666667%;\n  width: 12.6666666667%;\n}\n.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(24vw, 37vh, 721px) rotateX(456deg) rotateY(223deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 46% 100%);\n          clip-path: polygon(0 0, 0 100%, 46% 100%);\n}\n.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(57vw, -23vh, -361px) rotateX(465deg) rotateY(423deg);\n  -webkit-clip-path: polygon(0 0, 46% 100%, 100% 0);\n          clip-path: polygon(0 0, 46% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-54vw, 36vh, -324px) rotateX(249deg) rotateY(429deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 46% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 46% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(28) {\n  transform: translate3d(0, 119vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(63vw, 0, 0) rotateX(470deg) rotateY(410deg);\n}\n.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(65vw, 0, 0) rotateX(183deg) rotateY(421deg);\n}\n.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(23vw, 0, 0) rotateX(160deg) rotateY(476deg);\n}\n.popup .popup__piece:nth-child(29) {\n  height: 13.6666666667%;\n  width: 13.6666666667%;\n}\n.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-56vw, 57vh, -366px) rotateX(471deg) rotateY(124deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 60% 100%);\n          clip-path: polygon(0 0, 0 100%, 60% 100%);\n}\n.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(20vw, 19vh, 759px) rotateX(440deg) rotateY(355deg);\n  -webkit-clip-path: polygon(0 0, 60% 100%, 100% 0);\n          clip-path: polygon(0 0, 60% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-33vw, -46vh, -593px) rotateX(183deg) rotateY(415deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 60% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 60% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(29) {\n  transform: translate3d(0, 104vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(24vw, 0, 0) rotateX(420deg) rotateY(174deg);\n}\n.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-50vw, 0, 0) rotateX(448deg) rotateY(332deg);\n}\n.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(42vw, 0, 0) rotateX(132deg) rotateY(152deg);\n}\n.popup .popup__piece:nth-child(30) {\n  height: 13.6666666667%;\n  width: 15.6666666667%;\n}\n.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(58vw, -5vh, 552px) rotateX(379deg) rotateY(221deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%);\n          clip-path: polygon(0 0, 0 100%, 50% 100%);\n}\n.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(59vw, 5vh, -142px) rotateX(471deg) rotateY(190deg);\n  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);\n          clip-path: polygon(0 0, 50% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(42vw, 24vh, 392px) rotateX(199deg) rotateY(182deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 50% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(30) {\n  transform: translate3d(0, 143vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-57vw, 0, 0) rotateX(467deg) rotateY(164deg);\n}\n.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-32vw, 0, 0) rotateX(416deg) rotateY(183deg);\n}\n.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-63vw, 0, 0) rotateX(331deg) rotateY(305deg);\n}\n.popup .popup__piece:nth-child(31) {\n  height: 19.6666666667%;\n  width: 18.6666666667%;\n}\n.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-44vw, -29vh, -848px) rotateX(395deg) rotateY(368deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 54% 100%);\n          clip-path: polygon(0 0, 0 100%, 54% 100%);\n}\n.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(12vw, -37vh, -471px) rotateX(431deg) rotateY(189deg);\n  -webkit-clip-path: polygon(0 0, 54% 100%, 100% 0);\n          clip-path: polygon(0 0, 54% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(33vw, -34vh, 107px) rotateX(455deg) rotateY(460deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 54% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 54% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(31) {\n  transform: translate3d(0, 118vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-32vw, 0, 0) rotateX(422deg) rotateY(331deg);\n}\n.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(63vw, 0, 0) rotateX(366deg) rotateY(230deg);\n}\n.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-29vw, 0, 0) rotateX(266deg) rotateY(314deg);\n}\n.popup .popup__piece:nth-child(32) {\n  height: 19.6666666667%;\n  width: 13.6666666667%;\n}\n.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-38vw, -29vh, 736px) rotateX(310deg) rotateY(288deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);\n          clip-path: polygon(0 0, 0 100%, 53% 100%);\n}\n.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-21vw, 6vh, -657px) rotateX(382deg) rotateY(179deg);\n  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);\n          clip-path: polygon(0 0, 53% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-57vw, -27vh, -155px) rotateX(143deg) rotateY(408deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(32) {\n  transform: translate3d(0, 117vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-76vw, 0, 0) rotateX(306deg) rotateY(294deg);\n}\n.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-33vw, 0, 0) rotateX(328deg) rotateY(444deg);\n}\n.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-73vw, 0, 0) rotateX(363deg) rotateY(452deg);\n}\n.popup .popup__piece:nth-child(33) {\n  height: 19.6666666667%;\n  width: 14.6666666667%;\n}\n.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-37vw, -59vh, -652px) rotateX(332deg) rotateY(468deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 64% 100%);\n          clip-path: polygon(0 0, 0 100%, 64% 100%);\n}\n.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-15vw, 18vh, -872px) rotateX(454deg) rotateY(129deg);\n  -webkit-clip-path: polygon(0 0, 64% 100%, 100% 0);\n          clip-path: polygon(0 0, 64% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-47vw, -10vh, -407px) rotateX(179deg) rotateY(169deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 64% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 64% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(33) {\n  transform: translate3d(0, 139vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-44vw, 0, 0) rotateX(426deg) rotateY(314deg);\n}\n.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(73vw, 0, 0) rotateX(218deg) rotateY(150deg);\n}\n.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(59vw, 0, 0) rotateX(469deg) rotateY(256deg);\n}\n.popup .popup__piece:nth-child(34) {\n  height: 19.6666666667%;\n  width: 20.6666666667%;\n}\n.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-34vw, -19vh, 92px) rotateX(409deg) rotateY(158deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);\n          clip-path: polygon(0 0, 0 100%, 53% 100%);\n}\n.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-36vw, -31vh, 605px) rotateX(298deg) rotateY(358deg);\n  -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);\n          clip-path: polygon(0 0, 53% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(13vw, -4vh, -381px) rotateX(193deg) rotateY(318deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 53% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(34) {\n  transform: translate3d(0, 113vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(32vw, 0, 0) rotateX(225deg) rotateY(322deg);\n}\n.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-45vw, 0, 0) rotateX(340deg) rotateY(387deg);\n}\n.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-61vw, 0, 0) rotateX(182deg) rotateY(291deg);\n}\n.popup .popup__piece:nth-child(35) {\n  height: 19.6666666667%;\n  width: 19.6666666667%;\n}\n.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-46vw, 40vh, 172px) rotateX(242deg) rotateY(224deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);\n          clip-path: polygon(0 0, 0 100%, 58% 100%);\n}\n.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(14vw, -46vh, -120px) rotateX(248deg) rotateY(173deg);\n  -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);\n          clip-path: polygon(0 0, 58% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-16vw, 44vh, 822px) rotateX(401deg) rotateY(174deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 58% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(35) {\n  transform: translate3d(0, 114vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(13vw, 0, 0) rotateX(219deg) rotateY(169deg);\n}\n.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(5vw, 0, 0) rotateX(142deg) rotateY(379deg);\n}\n.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-73vw, 0, 0) rotateX(330deg) rotateY(266deg);\n}\n.popup .popup__piece:nth-child(36) {\n  height: 19.6666666667%;\n  width: 12.6666666667%;\n}\n.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(43vw, 50vh, -862px) rotateX(430deg) rotateY(392deg);\n  -webkit-clip-path: polygon(0 0, 0 100%, 37% 100%);\n          clip-path: polygon(0 0, 0 100%, 37% 100%);\n}\n.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(-3vw, -48vh, -93px) rotateX(364deg) rotateY(362deg);\n  -webkit-clip-path: polygon(0 0, 37% 100%, 100% 0);\n          clip-path: polygon(0 0, 37% 100%, 100% 0);\n}\n.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(10vw, 35vh, 471px) rotateX(363deg) rotateY(400deg);\n  -webkit-clip-path: polygon(100% 0, 100% 100%, 37% 100%);\n          clip-path: polygon(100% 0, 100% 100%, 37% 100%);\n}\n.popup.s--closed .popup__piece:nth-child(36) {\n  transform: translate3d(0, 150vh, 0);\n}\n.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {\n  transform: translate3d(-10vw, 0, 0) rotateX(197deg) rotateY(258deg);\n}\n.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {\n  transform: translate3d(71vw, 0, 0) rotateX(480deg) rotateY(174deg);\n}\n.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {\n  transform: translate3d(-63vw, 0, 0) rotateX(227deg) rotateY(385deg);\n}\n.popup__pieces {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.popup__piece {\n  float: left;\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0s 0s;\n}\n.popup.s--closed .popup__piece {\n  transition: transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04);\n}\n.popup__piece:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n.popup__piece-inner {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.8);\n  opacity: 0;\n  transition: opacity 0.28s 0.55s ease-in, transform 0.7s 0.1s ease-out;\n}\n.popup.s--active .popup__piece-inner {\n  transition: opacity 0.35s, transform 0.7s ease-in-out;\n  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) !important;\n  opacity: 1;\n}\n.popup__content {\n  position: relative;\n  min-height: 500px;\n  padding: 30px;\n  background: #000;\n  color: #fff;\n  transition: opacity 0.2s;\n  opacity: 0;\n}\n.popup.s--active .popup__content {\n  transition-delay: 0.6s;\n  opacity: 1;\n}\n.popup__close {\n  position: absolute;\n  right: 30px;\n  top: 30px;\n  width: 30px;\n  height: 30px;\n  cursor: pointer;\n}\n.popup__close:before, .popup__close:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 14px;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n}\n.popup__close:before {\n  transform: rotate(45deg);\n}\n.popup__close:after {\n  transform: rotate(-45deg);\n}\n.popup__heading {\n  margin-bottom: 20px;\n  font-size: 30px;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n}\n.popup__text {\n  font-size: 18px;\n  line-height: 1.5;\n}\n\n.popup-btn {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 200px;\n  height: 50px;\n  margin-left: -100px;\n  margin-top: -25px;\n  background: transparent;\n  outline: none;\n  font-size: 20px;\n  text-transform: uppercase;\n  font-weight: bold;\n  color: #000;\n  border: 2px solid #000;\n  transition: all 0.3s;\n  cursor: pointer;\n}\n.popup-btn:hover {\n  background-color: #000;\n  color: #fff;\n  letter-spacing: 2px;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">var numOfPieces = 6 * 6;\n\nvar frag = document.createDocumentFragment();\n\nfunction insertInnerPieces($el, innerPieces) {\n  for (var i = 0; i &lt; innerPieces; i++) {\n    var $inner = document.createElement('div');\n    $inner.classList.add('popup__piece-inner');\n    $el.appendChild($inner);\n  }\n};\n\nfor (var i = 1; i &lt;= numOfPieces; i++) {\n  var $piece = document.createElement('div');\n  $piece.classList.add('popup__piece');\n  \n  insertInnerPieces($piece, 3);\n  frag.appendChild($piece);\n}\n\ndocument.querySelector('.popup__pieces').appendChild(frag);\n\nvar $popupsCont = document.querySelector('.popups-cont');\nvar $popup = document.querySelector('.popup');\nvar popupAT = 900;\n\ndocument.querySelector('.popup-btn').addEventListener('click', function() {\n  $popupsCont.classList.add('s--popup-active');\n  $popup.classList.add('s--active');\n});\n\nfunction closeHandler() {\n  $popupsCont.classList.remove('s--popup-active');\n  $popup.classList.remove('s--active');\n  $popup.classList.add('s--closed');\n  \n  setTimeout(function() {\n    $popup.classList.remove('s--closed');\n  }, popupAT);\n}\n\ndocument.querySelector('.popup__close').addEventListener('click', closeHandler);\n\ndocument.querySelector('.popups-cont__overlay').addEventListener('click', closeHandler);<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[26],"class_list":["post-306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-popup"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=306"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/306\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/308"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}