PluginProbe
Depicter — Popup & Slider Builder / 1.2.0
Depicter — Popup & Slider Builder v1.2.0
4.8.1 trunk 1.0.0 1.1.0 1.1.2 1.1.4 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.3.0 1.3.1 1.3.2 1.3.3 1.3.5 1.3.8 1.5.0 1.5.1 1.5.2 1.5.5 1.6.0 1.6.1 1.6.2 1.7.0 All 76 releases
depicter / resources / styles / player / depicter.css

depicter.css in Depicter — Popup & Slider Builder 1.2.0, at resources/styles/player/depicter.css

1,275 lines 33.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @namespace svg 'http://www.w3.org/2000/svg';
2 /*! From https://github.com/andy-piccalilli/modern-css-reset */
3 /* line 55, sass/_revert-styles.scss */
4 .depicter-revert {
5 text-rendering: optimizeSpeed;
6 line-height: 1.5;
7 direction: ltr;
8 /* Remove default margin */
9 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
10 /* A elements that don't have a class get default styles */
11 /* Make images easier to work with */
12 /* Inherit fonts for inputs and buttons */
13 }
14 /* line 56, sass/_revert-styles.scss */
15 .depicter-revert,
16 .depicter-revert h1,
17 .depicter-revert h2,
18 .depicter-revert h3,
19 .depicter-revert h4,
20 .depicter-revert h5,
21 .depicter-revert h6,
22 .depicter-revert p,
23 .depicter-revert figure,
24 .depicter-revert blockquote,
25 .depicter-revert dl,
26 .depicter-revert dd,
27 .depicter-revert ul[role='list'],
28 .depicter-revert ol[role='list'],
29 .depicter-revert img,
30 .depicter-revert picture,
31 .depicter-revert input,
32 .depicter-revert button,
33 .depicter-revert textarea,
34 .depicter-revert table,
35 .depicter-revert td,
36 .depicter-revert tr,
37 .depicter-revert th,
38 .depicter-revert tbody,
39 .depicter-revert thead,
40 .depicter-revert nav,
41 .depicter-revert aside,
42 .depicter-revert strong,
43 .depicter-revert select {
44 all: revert;
45 }
46 /* line 9, sass/_revert-styles.scss */
47 .depicter-revert *,
48 .depicter-revert *::before,
49 .depicter-revert *::after {
50 box-sizing: border-box;
51 }
52 /* line 16, sass/_revert-styles.scss */
53 .depicter-revert h1,
54 .depicter-revert h2,
55 .depicter-revert h3,
56 .depicter-revert h4,
57 .depicter-revert p,
58 .depicter-revert figure,
59 .depicter-revert blockquote,
60 .depicter-revert dl,
61 .depicter-revert dd {
62 margin: 0;
63 font-weight: normal;
64 }
65 /* line 30, sass/_revert-styles.scss */
66 .depicter-revert ul[role='list'],
67 .depicter-revert ol[role='list'] {
68 list-style: none;
69 }
70 /* line 36, sass/_revert-styles.scss */
71 .depicter-revert a:not([class]) {
72 text-decoration-skip-ink: auto;
73 }
74 /* line 41, sass/_revert-styles.scss */
75 .depicter-revert img,
76 .depicter-revert picture {
77 display: block;
78 }
79 /* line 47, sass/_revert-styles.scss */
80 .depicter-revert input,
81 .depicter-revert button,
82 .depicter-revert textarea,
83 .depicter-revert select {
84 font: inherit;
85 }
86
87 /* line 1, sass/partials/base/_depicter.scss */
88 .depicter {
89 position: relative;
90 overflow: hidden;
91 }
92
93 /* ------------------------------------------------------------------------------ */
94 /* line 3, sass/partials/base/_layout.scss */
95 .depicter-content-composer {
96 position: relative;
97 }
98 /* line 6, sass/partials/base/_layout.scss */
99 .depicter-content-composer:focus {
100 outline: none;
101 }
102
103 /* line 11, sass/partials/base/_layout.scss */
104 .depicter-primary-container {
105 display: flex;
106 flex-flow: column wrap;
107 clear: both;
108 overflow: hidden;
109 height: 100%;
110 }
111
112 /* line 19, sass/partials/base/_layout.scss */
113 .depicter-overflow-fix {
114 overflow-x: hidden;
115 }
116
117 /* line 23, sass/partials/base/_layout.scss */
118 .depicter-view-container {
119 flex: 1 1 auto;
120 order: 2;
121 }
122
123 /* line 28, sass/partials/base/_layout.scss */
124 .depicter-layout-fullscreen,
125 .depicter-layout-fullwidth {
126 width: 100vw;
127 max-width: none !important;
128 }
129
130 /* line 34, sass/partials/base/_layout.scss */
131 .depicter-layout-fullscreen {
132 height: 100vh;
133 max-height: none !important;
134 }
135
136 /* line 39, sass/partials/base/_layout.scss */
137 .depicter-layout-auto {
138 width: 100%;
139 height: 100%;
140 }
141
142 /* ------------------------------------------------------------------------------ */
143 /* line 46, sass/partials/base/_layout.scss */
144 .depicter-mid-row {
145 display: flex;
146 flex-flow: row wrap;
147 flex: 1;
148 order: 2;
149 }
150 /* line 52, sass/partials/base/_layout.scss */
151 .depicter-narrow-layout .depicter-mid-row {
152 flex-flow: column wrap;
153 }
154
155 /* line 57, sass/partials/base/_layout.scss */
156 .depicter-inner-container {
157 display: flex;
158 flex-flow: column wrap;
159 order: 2;
160 flex: 1;
161 }
162
163 /* line 64, sass/partials/base/_layout.scss */
164 .depicter-left-container,
165 .depicter-top-container {
166 order: 1;
167 }
168
169 /* line 69, sass/partials/base/_layout.scss */
170 .depicter-right-container,
171 .depicter-bottom-container {
172 order: 3;
173 }
174
175 /* line 75, sass/partials/base/_layout.scss */
176 .depicter-rtl .depicter-right-container {
177 order: 1;
178 }
179 /* line 79, sass/partials/base/_layout.scss */
180 .depicter-rtl .depicter-left-container {
181 order: 3;
182 }
183
184 /* ------------------------------------------------------------------------------ */
185 /* line 3, sass/partials/views/_view.scss */
186 .depicter-view-container {
187 position: relative;
188 }
189
190 /* line 7, sass/partials/views/_view.scss */
191 .depicter-view {
192 position: relative;
193 height: 100%;
194 overflow: hidden;
195 -webkit-user-select: none;
196 -moz-user-select: none;
197 -depicter-user-select: none;
198 user-select: none;
199 touch-action: manipulation;
200 }
201
202 /* line 19, sass/partials/views/_view.scss */
203 .depicter-sections {
204 will-change: transform;
205 }
206
207 /* line 24, sass/partials/views/_view.scss */
208 .depicter-auto-height .depicter-view {
209 transition: height 300ms;
210 }
211
212 /* ------------------------------------------------------------------------------ */
213 /* line 32, sass/partials/views/_view.scss */
214 .depicter-stack-view .depicter-sections {
215 transform-style: preserve-3d;
216 }
217
218 /* line 37, sass/partials/views/_view.scss */
219 .depicter-transform-view {
220 perspective: 2000px;
221 }
222 /* line 39, sass/partials/views/_view.scss */
223 .depicter-transform-view .depicter-sections {
224 transform-style: preserve-3d;
225 }
226
227 /* line 45, sass/partials/views/_view.scss */
228 .depicter-mask-view .depicter-section-mask {
229 overflow: hidden;
230 position: absolute;
231 pointer-events: none;
232 }
233 /* line 49, sass/partials/views/_view.scss */
234 .depicter-mask-view .depicter-section-mask .depicter-section {
235 position: relative;
236 }
237
238 /* line 55, sass/partials/views/_view.scss */
239 .depicter-cube-view {
240 perspective: 2000px;
241 }
242 /* line 57, sass/partials/views/_view.scss */
243 .depicter-cube-view .depicter-sections {
244 perspective: 2000px;
245 transform-style: preserve-3d;
246 perspective-origin: center;
247 height: 100%;
248 }
249 /* line 64, sass/partials/views/_view.scss */
250 .depicter-cube-view .depicter-section {
251 backface-visibility: hidden;
252 }
253
254 /* line 1, sass/partials/section/_section.scss */
255 .depicter-section {
256 position: absolute;
257 overflow: hidden;
258 }
259
260 /* line 6, sass/partials/section/_section.scss */
261 .depicter-bg-container {
262 height: 100%;
263 pointer-events: none;
264 -webkit-user-select: none;
265 -moz-user-select: none;
266 user-select: none;
267 }
268
269 /* line 25, sass/partials/section/_section.scss */
270 .depicter-section .depicter-bg-container > img {
271 width: 100%;
272 height: 100%;
273 opacity: 0;
274 transition: opacity 300ms;
275 }
276 /* line 32, sass/partials/section/_section.scss */
277 .depicter-section.depicter-ready .depicter-bg-container > img {
278 opacity: 1;
279 }
280 /* line 37, sass/partials/section/_section.scss */
281 .depicter-section.depicter-section-hidden, .depicter-section.depicter-section-hidden * {
282 visibility: hidden !important;
283 }
284
285 /* line 44, sass/partials/section/_section.scss */
286 .depicter-section > a.depicter-section-link:not(.depicter-layer):not(.depicter-not-section-link):first-child {
287 position: absolute;
288 top: 0;
289 left: 0;
290 display: block;
291 width: 100%;
292 height: 100%;
293 z-index: 2;
294 overflow: hidden;
295 text-indent: -100em;
296 }
297 /* line 57, sass/partials/section/_section.scss */
298 .depicter-section > a.depicter-section-link:not(.depicter-layer):not(.depicter-not-section-link):first-child.depicter-over-all {
299 z-index: 1000;
300 }
301
302 /* ------------------------------------------------------------------------------ */
303 /* line 3, sass/partials/layers/_layer.scss */
304 .depicter-layers-container {
305 position: absolute;
306 top: 0;
307 width: 100%;
308 height: 100%;
309 display: flex;
310 align-items: center;
311 flex-direction: row;
312 pointer-events: none;
313 }
314
315 /* line 15, sass/partials/layers/_layer.scss */
316 .depicter-fade-layers .depicter-layer-frame:not(.depicter-interactive-anim):not(.depicter-static) {
317 transition: opacity 300ms, visibility 300ms;
318 visibility: hidden;
319 opacity: 0;
320 }
321 /* line 20, sass/partials/layers/_layer.scss */
322 .depicter-fade-layers .depicter-active .depicter-layer-frame:not(.depicter-interactive-anim):not(.depicter-static) {
323 opacity: 1;
324 visibility: visible;
325 }
326
327 /* line 26, sass/partials/layers/_layer.scss */
328 .depicter-layers-wrapper {
329 position: relative;
330 padding: 0 0;
331 box-sizing: content-box;
332 margin: 0 auto;
333 height: 100%;
334 width: 100%;
335 }
336
337 /* line 35, sass/partials/layers/_layer.scss */
338 .depicter-layers-fold {
339 position: relative;
340 height: 100%;
341 pointer-events: none;
342 }
343 /* line 41, sass/partials/layers/_layer.scss */
344 .depicter-layers-fold > * {
345 pointer-events: all;
346 }
347
348 /* line 47, sass/partials/layers/_layer.scss */
349 .depicter-content-first .depicter-layers-container {
350 position: relative;
351 }
352 /* line 51, sass/partials/layers/_layer.scss */
353 .depicter-content-first .depicter-layers-container,
354 .depicter-content-first .depicter-layers-wrapper,
355 .depicter-content-first .depicter-layers-fold {
356 height: auto;
357 }
358 /* line 57, sass/partials/layers/_layer.scss */
359 .depicter-content-first .depicter-bg-container {
360 position: absolute;
361 height: 100%;
362 top: 0;
363 }
364
365 /* line 64, sass/partials/layers/_layer.scss */
366 .depicter-layer-frame {
367 visibility: visible;
368 }
369 /* line 65, sass/partials/layers/_layer.scss */
370 .depicter-layer-frame.depicter-pos-absolute {
371 position: absolute;
372 }
373 /* line 72, sass/partials/layers/_layer.scss */
374 .depicter-layer-frame .depicter-mask-frame {
375 overflow: hidden;
376 }
377 /* line 76, sass/partials/layers/_layer.scss */
378 .depicter-layer-frame > a {
379 text-decoration: none;
380 color: inherit;
381 }
382
383 /* line 82, sass/partials/layers/_layer.scss */
384 .depicter-relative-width *:not(.depicter-relative-width .depicter-layer *),
385 .depicter-relative-width .depicter-relative-width *:not(.depicter-relative-width .depicter-relative-width .depicter-layer *) {
386 width: 100%;
387 }
388
389 /* line 88, sass/partials/layers/_layer.scss */
390 .depicter-relative-height *:not(.depicter-relative-height .depicter-layer *),
391 .depicter-relative-height .depicter-relative-height *:not(.depicter-relative-height .depicter-relative-height .depicter-layer *) {
392 height: 100%;
393 }
394
395 /* line 94, sass/partials/layers/_layer.scss */
396 .depicter-layer.depicter-has-action {
397 cursor: pointer;
398 }
399
400 /* line 100, sass/partials/layers/_layer.scss */
401 .depicter-layer.depicter-layer-hidden, .depicter-layer.depicter-is-hidden,
402 .depicter-layer-frame.depicter-layer-hidden,
403 .depicter-layer-frame.depicter-is-hidden {
404 visibility: hidden !important;
405 }
406 /* line 103, sass/partials/layers/_layer.scss */
407 .depicter-layer.depicter-layer-hidden *, .depicter-layer.depicter-is-hidden *,
408 .depicter-layer-frame.depicter-layer-hidden *,
409 .depicter-layer-frame.depicter-is-hidden * {
410 visibility: hidden !important;
411 }
412
413 /* line 109, sass/partials/layers/_layer.scss */
414 .depicter-no-wrap {
415 white-space: nowrap;
416 }
417
418 /* line 113, sass/partials/layers/_layer.scss */
419 .depicter-fixed-layers {
420 pointer-events: none;
421 }
422 /* line 116, sass/partials/layers/_layer.scss */
423 .depicter-fixed-layers .depicter-layer {
424 pointer-events: auto;
425 }
426
427 /* line 123, sass/partials/layers/_layer.scss */
428 .depicter-float-width * {
429 width: 100%;
430 }
431 /* line 126, sass/partials/layers/_layer.scss */
432 .depicter-float-width .depicter-layer > * {
433 width: auto;
434 }
435
436 /* line 132, sass/partials/layers/_layer.scss */
437 .depicter-float-height * {
438 height: 100%;
439 }
440 /* line 135, sass/partials/layers/_layer.scss */
441 .depicter-float-height .depicter-layer > * {
442 height: auto;
443 }
444
445 /* line 2, sass/partials/layers/_image.scss */
446 .depicter-image-layer .depicter-layer {
447 width: 100%;
448 height: 100%;
449 }
450 /* line 7, sass/partials/layers/_image.scss */
451 .depicter-image-layer .depicter-layer:not(.depicter-is-hidden) img {
452 opacity: 0;
453 visibility: hidden;
454 transition: opacity 150ms ease-out;
455 }
456 /* line 12, sass/partials/layers/_image.scss */
457 .depicter-image-layer .depicter-layer:not(.depicter-is-hidden) img.depicter-loaded {
458 opacity: 1;
459 visibility: visible;
460 }
461 /* line 21, sass/partials/layers/_image.scss */
462 .depicter-image-layer picture {
463 overflow: hidden;
464 }
465 /* line 25, sass/partials/layers/_image.scss */
466 .depicter-image-layer img {
467 position: relative;
468 min-width: 100%;
469 }
470
471 /* line 2, sass/partials/layers/_shape-layer.scss */
472 .depicter-shape-layer svg {
473 width: 100%;
474 height: 100%;
475 }
476
477 /* line 2, sass/partials/layers/_video-layer.scss */
478 .depicter-video-layer iframe {
479 border: none;
480 }
481 /* line 6, sass/partials/layers/_video-layer.scss */
482 .depicter-video-layer iframe,
483 .depicter-video-layer img {
484 width: 100%;
485 height: 100%;
486 }
487 /* line 12, sass/partials/layers/_video-layer.scss */
488 .depicter-video-layer img {
489 position: absolute;
490 top: 0;
491 z-index: 2;
492 object-fit: cover;
493 transition: opacity 400ms, visibility 400ms;
494 }
495 /* line 20, sass/partials/layers/_video-layer.scss */
496 .depicter-video-layer .depicter-layer {
497 overflow: hidden;
498 }
499 /* line 24, sass/partials/layers/_video-layer.scss */
500 .depicter-video-layer .depicter-video-player {
501 z-index: 1;
502 }
503 /* line 28, sass/partials/layers/_video-layer.scss */
504 .depicter-video-layer .depicter-video-btn {
505 transition: opacity 400ms, visibility 400ms;
506 }
507 /* line 33, sass/partials/layers/_video-layer.scss */
508 .depicter-video-layer video {
509 display: block;
510 width: 100%;
511 height: 100%;
512 }
513 /* line 40, sass/partials/layers/_video-layer.scss */
514 .depicter-video-layer .depicter-playing img,
515 .depicter-video-layer .depicter-playing .depicter-video-btn {
516 opacity: 0;
517 visibility: hidden;
518 }
519
520 /* line 1, sass/partials/layers/_hotspot-layer.scss */
521 .depicter-hotspot-layer {
522 cursor: pointer;
523 }
524 /* line 4, sass/partials/layers/_hotspot-layer.scss */
525 .depicter-hotspot-layer .depicter-hotspot-point {
526 position: relative;
527 transform: translateX(-50%) translateY(-50%);
528 }
529 /* line 9, sass/partials/layers/_hotspot-layer.scss */
530 .depicter-hotspot-layer .depicter-point-center {
531 width: 20px;
532 height: 20px;
533 background: #dedede;
534 border-radius: 50%;
535 }
536
537 /* line 17, sass/partials/layers/_hotspot-layer.scss */
538 .depicter-hotspot-tooltip {
539 position: absolute;
540 top: 0;
541 left: 0;
542 z-index: 200;
543 pointer-events: none;
544 visibility: hidden;
545 opacity: 0;
546 transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1), visibility 900ms cubic-bezier(0.19, 1, 0.22, 1);
547 }
548 /* line 36, sass/partials/layers/_hotspot-layer.scss */
549 .depicter-hotspot-tooltip .depicter-tooltip-cont {
550 position: relative;
551 padding: 10px;
552 background: rgba(240, 240, 240, 0.88);
553 text-shadow: 0 1px 0px white;
554 pointer-events: auto;
555 }
556 /* line 44, sass/partials/layers/_hotspot-layer.scss */
557 .depicter-hotspot-tooltip::after {
558 content: '';
559 position: absolute;
560 top: 15px;
561 left: -12px;
562 display: block;
563 transform-origin: center -15px;
564 width: 0;
565 height: 0;
566 border-bottom: 10px solid rgba(240, 240, 240, 0.88);
567 border-left: 12px solid transparent;
568 border-right: 12px solid transparent;
569 }
570 /* line 54, sass/partials/layers/_hotspot-layer.scss */
571 .depicter-hotspot-tooltip.depicter-align-right {
572 transform: translateX(50px);
573 }
574 /* line 57, sass/partials/layers/_hotspot-layer.scss */
575 .depicter-hotspot-tooltip.depicter-align-right::after {
576 transform: rotate(-90deg);
577 }
578 /* line 61, sass/partials/layers/_hotspot-layer.scss */
579 .depicter-hotspot-tooltip.depicter-align-right .depicter-tooltip-cont {
580 transform: translateY(-50%) translateX(25px);
581 }
582 /* line 66, sass/partials/layers/_hotspot-layer.scss */
583 .depicter-hotspot-tooltip.depicter-align-left {
584 transform: translateX(-50px);
585 }
586 /* line 69, sass/partials/layers/_hotspot-layer.scss */
587 .depicter-hotspot-tooltip.depicter-align-left::after {
588 transform: rotate(90deg);
589 }
590 /* line 73, sass/partials/layers/_hotspot-layer.scss */
591 .depicter-hotspot-tooltip.depicter-align-left .depicter-tooltip-cont {
592 transform: translateY(-50%) translateX(-100%) translateX(-25px);
593 }
594 /* line 78, sass/partials/layers/_hotspot-layer.scss */
595 .depicter-hotspot-tooltip.depicter-align-bottom {
596 transform: translateY(50px);
597 }
598 /* line 81, sass/partials/layers/_hotspot-layer.scss */
599 .depicter-hotspot-tooltip.depicter-align-bottom .depicter-tooltip-cont {
600 transform: translateX(-50%) translateY(25px);
601 }
602 /* line 86, sass/partials/layers/_hotspot-layer.scss */
603 .depicter-hotspot-tooltip.depicter-align-top {
604 transform: translateY(-50px);
605 }
606 /* line 89, sass/partials/layers/_hotspot-layer.scss */
607 .depicter-hotspot-tooltip.depicter-align-top::after {
608 transform: rotate(180deg);
609 }
610 /* line 93, sass/partials/layers/_hotspot-layer.scss */
611 .depicter-hotspot-tooltip.depicter-align-top .depicter-tooltip-cont {
612 transform: translateX(-50%) translateY(-100%) translateY(-25px);
613 }
614 /* line 98, sass/partials/layers/_hotspot-layer.scss */
615 .depicter-hotspot-tooltip.depicter-tooltip-active {
616 transform: none;
617 opacity: 1;
618 visibility: visible;
619 }
620 /* line 104, sass/partials/layers/_hotspot-layer.scss */
621 .depicter-hotspot-tooltip.depicter-no-transition {
622 transition: none !important;
623 }
624
625 /* line 1, sass/partials/layers/_arrow-layer.scss */
626 .depicter-arrow-layer {
627 cursor: pointer;
628 }
629 /* line 4, sass/partials/layers/_arrow-layer.scss */
630 .depicter-arrow-layer .depicter-layer {
631 display: flex;
632 align-items: center;
633 justify-content: center;
634 }
635
636 /* line 2, sass/partials/layers/_bullets-layer.scss */
637 .depicter-bullet-layer .depicter-layer {
638 display: inline-flex;
639 align-items: center;
640 justify-content: center;
641 }
642 /* line 8, sass/partials/layers/_bullets-layer.scss */
643 .depicter-bullet-layer .depicter-bullet-item {
644 display: inline-block;
645 cursor: pointer;
646 }
647 /* line 12, sass/partials/layers/_bullets-layer.scss */
648 .depicter-bullet-layer .depicter-bullet-item:last-of-type {
649 margin-right: 0;
650 }
651
652 /* line 2, sass/partials/layers/_lineTimer-layer.scss */
653 .depicter-lineTimer-layer .depicter-layer {
654 overflow: hidden;
655 }
656 /* line 6, sass/partials/layers/_lineTimer-layer.scss */
657 .depicter-lineTimer-layer .depicter-timer-bar {
658 height: 100%;
659 transition: width 200ms;
660 }
661
662 /* line 1, sass/partials/layers/_scroll-layer.scss */
663 .depicter-scroll-layer {
664 cursor: pointer;
665 }
666 /* line 4, sass/partials/layers/_scroll-layer.scss */
667 .depicter-scroll-layer .depicter-layer {
668 display: flex;
669 align-items: center;
670 justify-content: center;
671 }
672
673 /* line 1, sass/partials/layers/_playAndPause-layer.scss */
674 .depicter-playAndPause-layer {
675 cursor: pointer;
676 }
677 /* line 4, sass/partials/layers/_playAndPause-layer.scss */
678 .depicter-playAndPause-layer .depicter-layer {
679 display: flex;
680 align-items: center;
681 justify-content: center;
682 }
683 /* line 10, sass/partials/layers/_playAndPause-layer.scss */
684 .depicter-playAndPause-layer svg {
685 display: none;
686 }
687 /* line 14, sass/partials/layers/_playAndPause-layer.scss */
688 .depicter-playAndPause-layer .depicter-active {
689 display: inline-block;
690 }
691
692 /* ------------------------------------------------------------------------------ */
693 /* line 3, sass/partials/layers/_button-layer.scss */
694 .depicter-button-layer {
695 cursor: pointer;
696 }
697 /* line 6, sass/partials/layers/_button-layer.scss */
698 .depicter-button-layer .depicter-layer {
699 display: flex;
700 align-items: center;
701 justify-content: center;
702 flex-wrap: wrap;
703 }
704
705 /* line 1, sass/partials/layers/_flex.scss */
706 .depicter-flex-layer .depicter-layer {
707 display: flex;
708 flex-wrap: wrap;
709 position: relative;
710 }
711
712 /* ------------------------------------------------------------------------------ */
713 /* line 3, sass/partials/layers/_overlay-layers.scss */
714 .depicter-overlay-layers {
715 position: absolute;
716 top: 0;
717 width: 100%;
718 height: 100%;
719 pointer-events: none;
720 }
721
722 /* line 1, sass/partials/layers/_layer-animation.scss */
723 .depicter-animation-wrap {
724 visibility: visible;
725 }
726
727 /* ------------------------------------------------------------------------------ */
728 /* line 5, sass/partials/ui/_elements.scss */
729 .depicter-video-layer .depicter-video-btn, .depicter-section .depicter-section-video-btn {
730 position: absolute;
731 top: 50%;
732 left: 50%;
733 margin-left: -23px;
734 margin-top: -23px;
735 width: 46px;
736 height: 46px;
737 background: #dedede;
738 border-radius: 50%;
739 text-align: center;
740 cursor: pointer;
741 z-index: 2;
742 }
743 /* line 20, sass/partials/ui/_elements.scss */
744 .depicter-video-layer .depicter-video-btn::after, .depicter-section .depicter-section-video-btn::after {
745 content: '\25BA';
746 position: relative;
747 top: 1px;
748 left: 2px;
749 color: #666;
750 line-height: 46px;
751 }
752
753 /* line 30, sass/partials/ui/_elements.scss */
754 .depicter-section .depicter-section-video-close-btn {
755 position: absolute;
756 width: 36px;
757 height: 36px;
758 background: #666;
759 color: #dedede;
760 border-radius: 50%;
761 text-align: center;
762 cursor: pointer;
763 }
764 /* line 41, sass/partials/ui/_elements.scss */
765 .depicter-section .depicter-section-video-close-btn::after {
766 content: '\2715';
767 position: relative;
768 top: 1px;
769 line-height: 36px;
770 }
771
772 /* line 4, sass/partials/addons/_section-video.scss */
773 .depicter-section .depicter-section-video {
774 position: absolute;
775 top: 0;
776 left: 0;
777 width: 100%;
778 height: 100%;
779 z-index: 100;
780 background: #000;
781 transition: opacity 400ms, visibility 400ms;
782 visibility: hidden;
783 opacity: 0;
784 }
785 /* line 15, sass/partials/addons/_section-video.scss */
786 .depicter-section .depicter-section-video-btn {
787 z-index: 101;
788 transition: opacity 400ms, visibility 400ms;
789 }
790 /* line 21, sass/partials/addons/_section-video.scss */
791 .depicter-section .depicter-section-video-close-btn {
792 top: 2em;
793 right: 2em;
794 z-index: 102;
795 transition: opacity 400ms, visibility 400ms;
796 visibility: hidden;
797 opacity: 0;
798 }
799 /* line 30, sass/partials/addons/_section-video.scss */
800 .depicter-section.depicter-video-open .depicter-section-video,
801 .depicter-section.depicter-video-open .depicter-section-video-close-btn {
802 visibility: visible;
803 opacity: 1;
804 }
805 /* line 36, sass/partials/addons/_section-video.scss */
806 .depicter-section.depicter-video-open .depicter-section-video-btn {
807 opacity: 0;
808 visibility: hidden;
809 }
810
811 /* line 1, sass/partials/addons/_loading.scss */
812 .depicter-loading-container {
813 position: absolute;
814 left: 50%;
815 top: 50%;
816 transform: translateX(-50%) translateY(-50%);
817 z-index: 10;
818 }
819
820 /* line 12, sass/partials/addons/_loading.scss */
821 .depicter-content-composer > *,
822 .depicter > *,
823 .depicter-section > * {
824 transition: opacity 300ms, visibility 300ms;
825 opacity: 0;
826 visibility: hidden;
827 }
828 /* line 18, sass/partials/addons/_loading.scss */
829 .depicter-content-composer > .depicter-loading-container,
830 .depicter-content-composer > .depicter-section-loading,
831 .depicter > .depicter-loading-container,
832 .depicter > .depicter-section-loading,
833 .depicter-section > .depicter-loading-container,
834 .depicter-section > .depicter-section-loading {
835 opacity: 1;
836 visibility: visible;
837 }
838
839 /* line 25, sass/partials/addons/_loading.scss */
840 .depicter-content-composer,
841 .depicter {
842 pointer-events: none;
843 }
844 /* line 29, sass/partials/addons/_loading.scss */
845 .depicter-content-composer.depicter-ready,
846 .depicter.depicter-ready {
847 pointer-events: all;
848 }
849
850 /* line 35, sass/partials/addons/_loading.scss */
851 .depicter-ready > * {
852 opacity: 1;
853 visibility: visible;
854 }
855 /* line 40, sass/partials/addons/_loading.scss */
856 .depicter-ready > .depicter-loading-container,
857 .depicter-ready > .depicter-section-loading {
858 opacity: 0;
859 visibility: hidden;
860 }
861
862 /* line 48, sass/partials/addons/_loading.scss */
863 .depicter-preload-all:not(.depicter-ready) > .depicter-primary-container * {
864 pointer-events: none !important;
865 }
866
867 /* line 1, sass/partials/addons/_section-background-video.scss */
868 .depicter-bg-video-container {
869 position: absolute;
870 top: 0;
871 width: 100%;
872 height: 100%;
873 overflow: hidden;
874 z-index: 1;
875 }
876 /* line 9, sass/partials/addons/_section-background-video.scss */
877 .depicter-bg-video-container > video {
878 width: 100%;
879 height: 100%;
880 }
881
882 /* line 2, sass/partials/addons/_section-link.scss */
883 .depicter-section > a:not(.depicter-layer):not(.depicter-not-section-link):first-child {
884 position: absolute;
885 top: 0;
886 left: 0;
887 display: block;
888 width: 100%;
889 height: 100%;
890 z-index: 2;
891 overflow: hidden;
892 text-indent: -100em;
893 }
894 /* line 13, sass/partials/addons/_section-link.scss */
895 .depicter-section > a:not(.depicter-layer):not(.depicter-not-section-link):first-child.depicter-over-all {
896 z-index: 1000;
897 }
898
899 @media screen and (min-width: 1025px) {
900 /* line 11, sass/partials/addons/_hide-on.scss */
901 .depicter-revert .depicter-hide-on-desktop, .depicter-revert.depicter-hide-on-desktop {
902 position: fixed;
903 opacity: 0;
904 visibility: hidden;
905 pointer-events: none;
906 top: -100%;
907 left: -100%;
908 }
909 }
910 @media screen and (max-width: 1024px) and (min-width: 769px) {
911 /* line 18, sass/partials/addons/_hide-on.scss */
912 .depicter-revert .depicter-hide-on-tablet, .depicter-revert.depicter-hide-on-tablet {
913 position: fixed;
914 opacity: 0;
915 visibility: hidden;
916 pointer-events: none;
917 top: -100%;
918 left: -100%;
919 }
920 }
921 @media screen and (max-width: 767px) {
922 /* line 25, sass/partials/addons/_hide-on.scss */
923 .depicter-revert .depicter-hide-on-mobile, .depicter-revert.depicter-hide-on-mobile {
924 position: fixed;
925 opacity: 0;
926 visibility: hidden;
927 pointer-events: none;
928 top: -100%;
929 left: -100%;
930 }
931 }
932
933 /* line 1, sass/partials/addons/_grab-cursor.scss */
934 .depicter-cursor-grab {
935 cursor: -webkit-grab;
936 cursor: grab;
937 }
938
939 /* line 6, sass/partials/addons/_grab-cursor.scss */
940 .depicter-cursor-grabbing {
941 cursor: -webkit-grabbing;
942 cursor: grabbing;
943 }
944
945 /* line 2, sass/partials/addons/_auto-height.scss */
946 .depicter-auto-height .depicter-primary-container {
947 height: auto;
948 }
949
950 /* line 1, sass/partials/addons/_actions.scss */
951 .depicter-has-mouse-action {
952 cursor: pointer !important;
953 pointer-events: all !important;
954 }
955
956 /**
957 This styles hide animative layers of not activated sections
958 */
959 /* line 6, sass/partials/addons/_hide-side-sections-layers.scss */
960 .depicter-section:not(.depicter-active) .depicter-has-animation-in {
961 display: none;
962 }
963
964 /* line 12, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
965 .depicter-dot-flashing {
966 display: inline-flex;
967 align-items: center;
968 justify-content: center;
969 }
970 /* line 17, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
971 .depicter-dot-flashing span {
972 display: inline-block;
973 width: 12px;
974 height: 12px;
975 margin-right: 9px;
976 border-radius: 50%;
977 }
978 /* line 24, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
979 .depicter-dot-flashing span:last-of-type {
980 margin-right: 0;
981 }
982 /* line 30, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
983 .depicter-dot-flashing.depicter-loading-dark span {
984 background-color: #050a0e;
985 }
986 /* line 36, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
987 .depicter-dot-flashing.depicter-loading-light span {
988 background-color: #fff;
989 }
990 /* line 41, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
991 .depicter-dot-flashing span {
992 will-change: opacity;
993 animation: middleDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0);
994 }
995 /* line 45, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
996 .depicter-dot-flashing span:first-of-type {
997 animation: firstDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0);
998 }
999 /* line 49, ../../../shared/loadings/src/loadings/dotFlashing/styles.scss */
1000 .depicter-dot-flashing span:last-of-type {
1001 animation: lastDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0);
1002 }
1003 @keyframes firstDotFlashing {
1004 0% {
1005 opacity: 1;
1006 }
1007 33.3% {
1008 opacity: 0.2;
1009 }
1010 66.6%,
1011 100% {
1012 opacity: 1;
1013 }
1014 }
1015 @keyframes middleDotFlashing {
1016 0%,
1017 5% {
1018 opacity: 1;
1019 }
1020 38.8% {
1021 opacity: 0.2;
1022 }
1023 72.2%,
1024 100% {
1025 opacity: 1;
1026 }
1027 }
1028 @keyframes lastDotFlashing {
1029 0%,
1030 23.3% {
1031 opacity: 1;
1032 }
1033 56.6% {
1034 opacity: 0.2;
1035 }
1036 90%,
1037 100% {
1038 opacity: 1;
1039 }
1040 }
1041 /* line 13, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1042 .depicter-dot-straight-swing {
1043 display: inline-flex;
1044 align-items: center;
1045 justify-content: center;
1046 }
1047 /* line 18, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1048 .depicter-dot-straight-swing span {
1049 display: inline-block;
1050 width: 12px;
1051 height: 12px;
1052 margin-right: 0;
1053 border-radius: 50%;
1054 }
1055 /* line 25, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1056 .depicter-dot-straight-swing span:last-of-type {
1057 margin-right: 0;
1058 }
1059 /* line 31, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1060 .depicter-dot-straight-swing.depicter-loading-dark span {
1061 background-color: #050a0e;
1062 }
1063 /* line 37, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1064 .depicter-dot-straight-swing.depicter-loading-light span {
1065 background-color: #fff;
1066 }
1067 /* line 42, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1068 .depicter-dot-straight-swing span {
1069 will-change: transform;
1070 }
1071 /* line 45, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1072 .depicter-dot-straight-swing span:first-of-type {
1073 animation: firstDotStraightSwing 1400ms infinite;
1074 }
1075 /* line 49, ../../../shared/loadings/src/loadings/dotStraightSwing/styles.scss */
1076 .depicter-dot-straight-swing span:last-of-type {
1077 animation: lastDotStraightSwing 1400ms infinite;
1078 }
1079 @keyframes firstDotStraightSwing {
1080 0% {
1081 transform: translateX(-9px);
1082 animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
1083 }
1084 33.3% {
1085 transform: translateX(0);
1086 animation-timing-function: linear;
1087 }
1088 62% {
1089 transform: translateX(0);
1090 animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
1091 }
1092 100% {
1093 transform: translateX(-9px);
1094 }
1095 }
1096 @keyframes lastDotStraightSwing {
1097 0% {
1098 transform: translateX(0);
1099 animation-timing-function: linear;
1100 }
1101 33% {
1102 transform: translateX(0);
1103 animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
1104 }
1105 52% {
1106 transform: translateX(9px);
1107 animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
1108 }
1109 70%,
1110 100% {
1111 transform: translateX(0);
1112 animation-timing-function: linear;
1113 }
1114 }
1115 /* line 13, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1116 .depicter-dot-swing {
1117 display: inline-flex;
1118 align-items: center;
1119 justify-content: center;
1120 }
1121 /* line 18, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1122 .depicter-dot-swing span {
1123 display: inline-block;
1124 width: 12px;
1125 height: 12px;
1126 margin-right: 0;
1127 border-radius: 50%;
1128 }
1129 /* line 25, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1130 .depicter-dot-swing span:last-of-type {
1131 margin-right: 0;
1132 }
1133 /* line 31, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1134 .depicter-dot-swing.depicter-loading-dark span {
1135 background-color: #050a0e;
1136 }
1137 /* line 37, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1138 .depicter-dot-swing.depicter-loading-light span {
1139 background-color: #fff;
1140 }
1141 /* line 42, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1142 .depicter-dot-swing span {
1143 transform-origin: center -10px;
1144 will-change: transform;
1145 }
1146 /* line 46, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1147 .depicter-dot-swing span:first-of-type {
1148 animation: firstDotSwing 2000ms infinite;
1149 }
1150 /* line 50, ../../../shared/loadings/src/loadings/dotSwing/styles.scss */
1151 .depicter-dot-swing span:last-of-type {
1152 animation: lastDotSwing 2000ms infinite;
1153 }
1154 @keyframes firstDotSwing {
1155 0% {
1156 transform: rotate(45deg);
1157 animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
1158 }
1159 23.3% {
1160 transform: rotate(0);
1161 animation-timing-function: linear;
1162 }
1163 74.1% {
1164 transform: rotate(0);
1165 animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
1166 }
1167 100% {
1168 transform: rotate(45deg);
1169 }
1170 }
1171 @keyframes lastDotSwing {
1172 0% {
1173 transform: rotate(0);
1174 animation-timing-function: linear;
1175 }
1176 23.3% {
1177 transform: rotate(0);
1178 animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
1179 }
1180 49.1% {
1181 transform: rotate(-45deg);
1182 animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
1183 }
1184 74.1%,
1185 100% {
1186 transform: rotate(0);
1187 animation-timing-function: linear;
1188 }
1189 }
1190 /* line 15, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1191 .depicter-dot-replacing {
1192 display: inline-flex;
1193 align-items: center;
1194 justify-content: center;
1195 }
1196 /* line 20, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1197 .depicter-dot-replacing span {
1198 display: inline-block;
1199 width: 12px;
1200 height: 12px;
1201 margin-right: 9px;
1202 border-radius: 50%;
1203 }
1204 /* line 27, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1205 .depicter-dot-replacing span:last-of-type {
1206 margin-right: 0;
1207 }
1208 /* line 33, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1209 .depicter-dot-replacing.depicter-loading-dark span {
1210 background-color: #050a0e;
1211 }
1212 /* line 39, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1213 .depicter-dot-replacing.depicter-loading-light span {
1214 background-color: #fff;
1215 }
1216 /* line 44, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1217 .depicter-dot-replacing span {
1218 animation: middleDotReplacing 1500ms infinite cubic-bezier(0.25, 1, 0.5, 1);
1219 will-change: transform;
1220 }
1221 /* line 48, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1222 .depicter-dot-replacing span:first-of-type {
1223 animation: firstDotReplacing 1500ms infinite cubic-bezier(0.76, 0, 0.24, 1);
1224 }
1225 /* line 52, ../../../shared/loadings/src/loadings/dotReplacing/styles.scss */
1226 .depicter-dot-replacing span:last-of-type {
1227 animation: lastDotReplacing 1500ms infinite cubic-bezier(0.25, 1, 0.5, 1);
1228 }
1229 @keyframes firstDotReplacing {
1230 from {
1231 transform: translateX(0);
1232 }
1233 to {
1234 transform: translateX(40px);
1235 }
1236 }
1237 @keyframes middleDotReplacing {
1238 0%,
1239 38.8% {
1240 transform: translateX(0);
1241 }
1242 66%,
1243 100% {
1244 transform: translateX(-20px);
1245 }
1246 }
1247 @keyframes lastDotReplacing {
1248 0%,
1249 66% {
1250 transform: translateX(0);
1251 }
1252 91.5%,
1253 100% {
1254 transform: translateX(-20px);
1255 }
1256 }
1257 /* line 1, ../../../shared/loadings/src/styles/common.scss */
1258 .depicter-single-svg-loading {
1259 max-width: 40px;
1260 max-height: 40px;
1261 width: 100%;
1262 }
1263 /* line 6, ../../../shared/loadings/src/styles/common.scss */
1264 .depicter-single-svg-loading.depicter-small {
1265 max-width: 20px;
1266 max-height: 20px;
1267 }
1268
1269 /* line 7, sass/partials/loadings/_loading.scss */
1270 .depicter-loading-symbol {
1271 display: inline-flex;
1272 align-items: center;
1273 justify-content: center;
1274 }
1275