PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / trunk
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF vtrunk
2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.9 2.2.8 trunk 1.10 1.3.3 1.3.4 1.3.5 1.3.5.1 1.3.5.2 1.3.6 1.3.6.1 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.5 All 103 releases
imagify / assets / css / pricing-modal.css

pricing-modal.css in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF trunk, at assets/css/pricing-modal.css

1,515 lines 32.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Flexbox re-groups */
2 .imagify-modal-cols,
3 .imagify-border-styled,
4 .imagify-offer-header,
5 .imagify-payment-modal .imagify-modal-content,
6 .imagify-flex-table,
7 .imagify-tabs {
8 display: -webkit-box;
9 display: -webkit-flex;
10 display: -ms-flexbox;
11 display: flex;
12 -webkit-box-orient: horizontal;
13 -webkit-box-direction: normal;
14 -webkit-flex-direction: row;
15 -ms-flex-direction: row;
16 flex-direction: row;
17 }
18 .imagify-modal-cols,
19 .imagify-border-styled {
20 -webkit-box-pack: center;
21 -webkit-justify-content: center;
22 -ms-flex-pack: center;
23 justify-content: center;
24 -webkit-box-align: center;
25 -webkit-align-items: center;
26 -ms-flex-align: center;
27 align-items: center;
28 }
29
30 .imagify-payment-modal {
31 text-align: center;
32 color: #7A8996;
33 }
34 .imagify-payment-modal * {
35 box-sizing: border-box;
36 }
37 .imagify-modal-loader {
38 position: absolute;
39 top: 0; left: 0; right: 0; bottom: 0;
40 background: #fff url('../images/loader-balls.svg') center no-repeat;
41 z-index: 10;
42 }
43 .imagify-payment-modal .imagify-modal-content {
44 width: 1065px;
45 max-width: 100%;
46 min-width: 925px;
47 padding: 0;
48 }
49 @media (prefers-reduced-motion: no-preference) {
50 .imagify-payment-modal .imagify-modal-content {
51 -webkit-transition: width .3s ease, min-width .3s ease, max-width .3s ease, height .3s ease, min-height .3s ease;
52 transition: width .3s ease, min-width .3s ease, max-width .3s ease, height .3s ease, min-height .3s ease;
53 }
54 }
55 .imagify-modal-content.imagify-iframe-viewing {
56 width: 980px;
57 height: 672px;
58 overflow: hidden;
59 }
60 .imagify-iframe-viewing #imagify-payment-process-view {
61 width: 980px;
62 height: 668px;
63 }
64 .imagify-payment-modal .imagify-modal-main {
65 width: 100%;
66 background-color: #f5f7f9;
67 padding: 30px 50px;
68 }
69 .imagify-iframe-viewing .imagify-modal-main {
70 width: auto;
71 }
72 .imagify-payment-modal .imagify-modal-content.imagify-success-viewing {
73 min-width: auto;
74 width: 450px;
75 min-height: 300px;
76 }
77 .imagify-success-viewing .imagify-modal-main {
78 width: 100%;
79 }
80 .imagify-payment-modal .imagify-modal-sidebar {
81 width: 30%;
82 padding: 15px 20px;
83 background: #1F2332;
84 color: #FFF;
85 }
86 .imagify-modal-content.imagify-iframe-viewing .imagify-modal-sidebar,
87 .imagify-modal-content.imagify-success-viewing .imagify-modal-sidebar {
88 display: none;
89 }
90 .imagify-modal-section {
91 padding: 0 25px;
92 }
93 .imagify-modal-section.section-gray {
94 margin: 0 0 1em;
95 padding: 10px 25px 15px;
96 background: #F6F7FB;
97 }
98 .imagify-tabs-contents .section-gray {
99 padding: 8px 25px 10px;
100 }
101 .imagify-modal-section .imagify-modal-title:first-child {
102 margin-top: 1em;
103 margin-bottom: 1.5em;
104 }
105 .imagify-modal-section.section-gray .imagify-modal-title {
106 margin-top: .5em;
107 margin-bottom: .5em;
108 }
109 .imagify-modal-title {
110 font-size: 2.2em;
111 font-weight: 600;
112 margin: 30px 0 10px;
113 }
114 .imagify-modal-title .imagify-inner-sub-title {
115 display: block;
116 font-size: .56em;
117 }
118 .imagify-analyzing .imagify-numbers-calc,
119 .imagify-numbers-notcalc,
120 .imagify-modal-section.imagify-analyzing .imagify-modal-cols,
121 .imagify-modal-section .imagify-loader {
122 display: none;
123 }
124 .imagify-analyzing .imagify-numbers-notcalc,
125 .imagify-modal-section.imagify-analyzing .imagify-loader {
126 display: block;
127 }
128 .imagify-modal-section .imagify-loader {
129 margin: 2em auto;
130 }
131
132 .imagify-border-styled {
133 width: 200px;
134 margin: 0 auto;
135 color: #8BC34A;
136 font-weight: bold;
137 font-size: 0.925em;
138 }
139 .imagify-border-styled:before,
140 .imagify-border-styled:after {
141 content: "";
142 height: 1px;
143 background: rgba(0,0,0,.1);
144 -webkit-flex-basis: 40px;
145 -ms-flex-preferred-size: 40px;
146 flex-basis: 40px;
147 }
148 .imagify-border-styled:before {
149 margin-right: 5px;
150 }
151 .imagify-border-styled:after {
152 margin-left: 5px;
153 }
154 .imagify-big-number {
155 font-size: 3.7em;
156 font-weight: bold;
157 margin: -3px 0;
158 color: #4A4A4A;
159 line-height: 1;
160 }
161 .imagify-payment-modal strong {
162 font-weight: bold;
163 color: #4A4A4A;
164 }
165
166 .imagify-popin-message {
167 padding: 5px 15px;
168 text-align: left;
169 }
170 .imagify-popin-message.imagify-error p {
171 color: #FFF;
172 }
173
174 .imagify-small-options {
175 width: 300px;
176 margin: 5em auto 5em;
177 background: #338EA6;
178 border-radius: 4px;
179 }
180
181 .imagify-small-options input[type="radio"]:not(:checked) + label,
182 .imagify-small-options input[type="radio"]:checked + label {
183 padding: 8px 10px;
184 font-size: 13px;
185 color: #FFF;
186 box-shadow: none;
187 border-left: 0;
188 }
189
190 .imagify-small-options input[type="radio"]:not(:checked) + label {
191 background: #338EA6;
192 color: rgba(255, 255, 255, .4);
193 }
194 .imagify-small-options input[type="radio"]:checked + label {
195 background: #40B1D0;
196 }
197
198 .imagify-cols:after {
199 content: "";
200 display: table;
201 clear: both;
202 }
203
204 .js .imagify-iframe-viewing .close-btn {
205 display: none;
206 }
207
208 .imagify-modal .imagify-cols {
209 padding: 0 20px;
210 }
211 .imagify-payment-modal .imagify-iconed {
212 margin: 1.5em 5em 1.5em 0;
213 }
214
215
216 .imagify-iconed {
217 position: relative;
218 text-align: left;
219 padding-left: 42px;
220 margin-right: 15px;
221 font-weight: 500;
222 }
223 .imagify-iconed .dashicons,
224 .imagify-iconed .icon {
225 position: absolute;
226 font-size: 2em;
227 left: 0; top: 2px;
228 color: #40B1D0;
229 }
230 .imagify-payment-modal .close-btn {
231 top: 10px;
232 right: 10px;
233 width: 24px;
234 height: 24px;
235 padding: 2px 0 0 4.5px; /* Safari iOS bug fix */
236 color: #FFF;
237 background: #40B1D0;
238 border-radius: 50%;
239 -webkit-transition: all .275s;
240 transition: all .275s;
241 }
242 .imagify-payment-modal .close-btn i {
243 margin-left: -3.5px;
244 margin-top: -0.5px;
245 }
246 .imagify-payment-modal .close-btn:hover {
247 background: #F6F7FB;
248 }
249
250 /* OFFERS */
251 .imagify-offer-line {
252 margin-top: 1.5em;
253 }
254 .imagify-offer-line + .imagify-offer-line {
255 margin-top: 0.75em;
256 }
257 .imagify-offer-header {
258 -webkit-box-pack: justify;
259 -webkit-justify-content: space-between;
260 -ms-flex-pack: justify;
261 justify-content: space-between;
262 -webkit-box-align: center;
263 -webkit-align-items: center;
264 -ms-flex-align: center;
265 align-items: center;
266 padding: 0 0 0 15px;
267 border-radius: 4px 4px 0 0;
268 -webkit-transition: all .275s;
269 transition: all .275s;
270 }
271 .imagify-offer-header.imagify-offer-header.imagify-offer-header .imagify-inline-options label:last-child {
272 border-radius: 0 4px 0 0;
273 }
274 .imagify-offer-header .imagify-inline-options {
275 width: auto;
276 }
277 .imagify-offer-title {
278 font-weight: bold;
279 margin: 0;
280 }
281 .imagify-offer-header,
282 .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label {
283 background: #E5EBEF;
284 }
285 .imagify-offer-onetime .imagify-offer-header {
286 padding-top:8px;
287 padding-bottom: 8px;
288 }
289 .imagify-offer-onetimes > div {
290 padding-top: 15px;
291 padding-bottom: 15px;
292 }
293 .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label,
294 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
295 position: relative;
296 padding: 7px 30px;
297 font-size: 1em;
298 letter-spacing: 0.05em;
299 color: inherit;
300 box-shadow: 0 0 0;
301 border-radius: 0;
302 }
303 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
304 background: #F6F7FB;
305 }
306
307 .imagify-2-free {
308 position: absolute;
309 bottom: 100%; left: 0; right: 0;
310 padding: 2px 10px;
311 margin-bottom: 8px;
312 font-size: 0.8em;
313 letter-spacing: 0;
314 text-transform: none;
315 text-align: center;
316 color: #FFF;
317 background: #10121A;
318 border-radius: 2px;
319 }
320 .imagify-2-free:after {
321 content: "";
322 position: absolute;
323 left: 50%; bottom: -3px;
324 margin-left: -3px;
325 border-top: 3px solid #10121A;
326 border-left: 3px solid transparent;
327 border-right: 3px solid transparent;
328 }
329 /* right position */
330 .imagify-2-free.imagify-b-right {
331 bottom: auto;
332 left: 100%; right: -100%;
333 margin-bottom: 0;
334 margin-left: 8px;
335 }
336 .imagify-2-free.imagify-b-right:after {
337 left: -3px; bottom: auto; top: 50%;
338 margin-top: -3px; margin-left: 0;
339 border-right: 3px solid #10121A;
340 border-top: 3px solid transparent;
341 border-bottom: 3px solid transparent;
342 border-left: 0;
343 }
344
345 /* bottom position */
346 .imagify-2-free.imagify-b-bottom {
347 bottom: -100%;
348 left: 0; right: 0;
349 margin-top: 8px;
350 }
351
352 .imagify-2-free.imagify-b-bottom:after {
353 top: -3px; bottom: auto;
354 border-bottom: 3px solid #10121A;
355 border-left: 3px solid transparent;
356 border-right: 3px solid transparent;
357 border-top: 0;
358 }
359
360 .imagify-offer-content {
361 text-align: left;
362 background: #F6F7FB;
363 border-radius: 0 0 4px 4px;
364 -webkit-transition: all .275s;
365 transition: all .275s;
366 }
367 .imagify-offer-onetime .imagify-offer-content {
368 padding: 10px 0;
369 }
370
371 /* Checkboxes adjustment */
372 div.imagify-col-checkbox {
373 position: relative;
374 width: 25.5%;
375 padding-top: 10px;
376 padding-bottom: 7px;
377 }
378 .imagify-col-checkbox label {
379 display: block;
380 }
381 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked),
382 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked {
383 position: absolute;
384 top: 50%; left: 6px;
385 margin: -8px 0 0 0;
386 }
387 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
388 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked + label:before {
389 margin: 0;
390 top: -2px;
391 left: 6px;
392 -webkit-transition: all .275s;
393 transition: all .275s;
394 }
395 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
396 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked + label:after {
397 top: 1px;
398 left: 13px;
399 }
400 .imagify-col-checkbox label {
401 padding-left: 55px!important;
402 }
403
404 /* Offer col */
405 .imagify-offer-size {
406 font-size: 30px;
407 color: #5F758E;
408 font-weight: bold;
409 -webkit-transition: all .275s;
410 transition: all .275s;
411 text-transform: uppercase;
412 }
413 .imagify-offer-by {
414 font-size: 10px;
415 -webkit-transition: all .275s;
416 transition: all .275s;
417 }
418 .imagify-approx {
419 display: none;
420 font-size: 11px;
421 line-height: 1.2;
422 -webkit-transition: all .275s;
423 transition: all .275s;
424 }
425
426 div.imagify-col-price {
427 width: 35%;
428 }
429 .imagify-flex-table .imagify-price-block {
430 padding-left: 0;
431 padding-right: 0;
432 }
433 .imagify-offer-monthly .imagify-flex-table .imagify-price-block,
434 .imagify-offer-monthlies .imagify-price-block {
435 padding-top: 0;
436 max-width: 39%;
437 }
438 .imagify-flex-table .imagify-price-complement {
439 padding-right: 0;
440 font-size: 10px;
441 font-weight: bold;
442 font-size: 0.9em;
443 line-height: 1.7;
444 }
445 .imagify-price-block,
446 .imagify-price-discount {
447 white-space: nowrap;
448 }
449 .imagify-price-block span,
450 .imagify-price-discount span {
451 display: inline-block;
452 vertical-align: middle;
453 }
454 .imagify-price-discount.imagify-price-discount {
455 position: relative;
456 flex-grow: 0;
457 padding-top: 15px;
458 font-weight: bold;
459 width: 70px;
460 }
461 .imagify-price-discount:before {
462 content: "";
463 position: absolute;
464 top: 25px;
465 width: 62%;
466 height: 2px;
467 background: #2E3243;
468 transform: rotate(-15deg);
469 }
470 .imagify-offer-onetimes .imagify-price-discount:before {
471 width: 100%;
472 }
473 .imagify-price-discount-dollar {
474 color: #2E3243;
475 }
476 .imagify-price-discount-number {
477 color: #8BA6B4;
478 }
479 .imagify-offer-selected .imagify-price-discount-number {
480 color: #FFF;
481 }
482 span.imagify-dollars {
483 color: #1F2332;
484 font-size: 18px;
485 font-weight: bold;
486 vertical-align: -2px;
487 }
488 .imagify-offer-onetime .imagify-col-price {
489 padding-top: 0;
490 }
491 .imagify-offer-onetime .imagify-dollars {
492 vertical-align: -1px;
493 }
494 .imagify-price-big,
495 .imagify-price-mini {
496 color: #40B1D0;
497 font-weight: bold;
498 }
499 .imagify-price-big {
500 font-size: 36px;
501 }
502 span.imagify-price-mini {
503 font-size: 18px;
504 vertical-align: 2px;
505 }
506 span.imagify-price-by {
507 font-size: 0.9em;
508 color: #5F758E;
509 text-indent: -27px;
510 display: block;
511 text-align: center;
512 margin-top: 9px;
513 text-transform: uppercase;
514 font-weight: bold;
515 }
516 .imagify-plans-selection-view span.imagify-price-by {
517 text-indent: -66px;
518 }
519
520 .imagify-col-other-actions {
521 width: 18.5%;
522 text-align: right;
523 }
524 .imagify-col-other-actions a {
525 font-size: 11px;
526 }
527
528 /* Offer selected */
529 .imagify-offer-selected,
530 .imagify-offer-selected .imagify-offer-title,
531 .imagify-offer-selected .imagify-offer-size,
532 .imagify-offer-selected .imagify-price-big,
533 .imagify-offer-selected .imagify-price-mini,
534 .imagify-offer-selected .imagify-price-complement,
535 .imagify-offer-selected .imagify-col-other-actions a {
536 color: #FFF;
537 }
538 .imagify-offer-selected .imagify-offer-header,
539 .imagify-offer-selected .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label {
540 background: #338EA6;
541 }
542 .imagify-offer-selected .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label {
543 background: #40B1D0;
544 }
545 .imagify-offer-selected .imagify-offer-content {
546 background: #40B1D0;
547 }
548 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
549 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:checked + label:before {
550 border-color: #FFF;
551 background: #40B1D0;
552 }
553 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
554 .imagify-offer-selected .imagify-checkbox.imagify-checkbox:checked + label:after {
555 color: #FFF;
556 }
557 .imagify-offer-selected .imagify-offer-by {
558 color: #2E3243;
559 }
560
561 .imagify-enough-title {
562 display: none;
563 }
564 .imagify-enough-free .imagify-not-enough-title {
565 display: none;
566 }
567 .imagify-enough-free .imagify-enough-title {
568 display: block;
569 }
570
571 .imagify-submit-line {
572 display: -webkit-box;
573 display: -ms-flexbox;
574 display: flex;
575 -webkit-box-pack: justify;
576 -ms-flex-pack: justify;
577 justify-content: space-between;
578 -webkit-box-align: center;
579 -ms-flex-align: center;
580 align-items: center;
581 margin: 2em 0;
582 text-align: left;
583 }
584 .imagify-coupon-section {
585 display: -webkit-box;
586 display: -ms-flexbox;
587 display: flex;
588 -webkit-box-align: center;
589 -ms-flex-align: center;
590 align-items: center;
591 }
592 .imagify-coupon-section p {
593 margin: 0;
594 line-height: 1.3;
595 }
596 .imagify-coupon-text {
597 width: 200px;
598 max-width: 100%;
599 padding-right: 15px;
600 }
601 .imagify-coupon-loader {
602 display: none;
603 }
604 .imagify-coupon-text.checking {
605 text-align: right;
606 }
607 .imagify-coupon-text.checking .imagify-coupon-loader {
608 display: inline;
609 }
610 .imagify-coupon-text.checking label {
611 display: none;
612 }
613 .imagify-coupon-input {
614 position: relative;
615 }
616 .imagify-coupon-input input {
617 position: relative;
618 z-index: 1;
619 }
620 [id="imagify-coupon-validate"].button-secondary {
621 position: absolute;
622 top: 1px;
623 right: 3px;
624 bottom: 2px;
625 box-shadow: none;
626 padding: 4px 10px;
627 z-index: 0;
628 transition: transform .275s;
629 }
630 .imagify-canbe-validate [id="imagify-coupon-validate"] {
631 transform: translateX(45px);
632 }
633
634 /* Promotion/Discount section */
635 .imagify-modal-section + .imagify-modal-promotion {
636 margin-top: -1em;
637 }
638 .imagify-modal-promotion {
639 position: relative;
640 overflow: hidden;
641 display: none;
642 align-items: center;
643 padding: 15px 25px;
644 background: #604D90;
645 text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
646 }
647 .imagify-modal-promotion.active {
648 display: -webkit-box;
649 display: -ms-flexbox;
650 display: flex;
651 }
652 [id="imagify-pricing-tab-onetime"] .imagify-modal-promotion {
653 margin-bottom: 4em;
654 }
655 .imagify-modal-promotion:before {
656 content: "\f488";
657 position: absolute;
658 top: 28px;
659 left: 8%;
660 font-family: "dashicons";
661 font-size: 90px;
662 color: #8476A9;
663 text-shadow: none;
664 }
665 .imagify-modal-promotion p {
666 position: relative;
667 margin: .2em 0;
668 color: #FFF;
669 }
670 .imagify-promo-title {
671 -ms-flex-preferred-size: 100%;
672 flex-basis: 100%;
673 text-transform: uppercase;
674 font-size: 20px;
675 font-weight: bold;
676 letter-spacing: 0.125em;
677 }
678 .imagify-until-date {
679 -ms-flex-preferred-size: 200px;
680 flex-basis: 200px;
681 text-align: right;
682 }
683 .imagify-until-date strong {
684 color: #FFF;
685 }
686
687
688 .imagify-submit-line button {
689 font-size: 16px;
690 }
691 input.imagify-coupon-code {
692 padding: 10px;
693 border: 2px solid #7A8996;
694 font-size: 0.875em;
695 font-weight: bold;
696 border-radius: 3px;
697 }
698 .validated.imagify-coupon-section .imagify-coupon-text,
699 .validated.imagify-coupon-section strong {
700 color: #8BC34A;
701 }
702 .validated.imagify-coupon-section .imagify-coupon-code {
703 color: #8BC34A;
704 border-color: #8BC34A;
705 }
706 .invalid.imagify-coupon-section .imagify-coupon-text,
707 .invalid.imagify-coupon-section strong {
708 color: #d0021b;
709 }
710 .invalid.imagify-coupon-section .imagify-coupon-code {
711 color: #d0021b;
712 border-color: #d0021b;
713 }
714 .imagify-footer-lines {
715 width: 500px;
716 max-width: 100%;
717 margin: 2em auto 2.5em;
718 font-size: 0.9em;
719 line-height: 1.5;
720 font-weight:600
721 }
722
723 /* Year selected */
724 .imagify-year-selected .imagify-switch-my .imagify-yearly {
725 display: block;
726 }
727 .imagify-year-selected .imagify-switch-my .imagify-monthly {
728 display: none;
729 }
730 /* Month selected */
731 .imagify-month-selected .imagify-switch-my .imagify-yearly {
732 display: none;
733 }
734 .imagify-month-selected .imagify-switch-my .imagify-monthly {
735 display: block;
736 }
737
738 /* Flexbox table */
739 .imagify-flex-table {
740 -webkit-box-align: center;
741 -webkit-align-items: center;
742 -ms-flex-align: center;
743 align-items: center;
744 }
745 .imagify-flex-table > * {
746 -webkit-box-flex: 1;
747 -webkit-flex-grow: 1;
748 -ms-flex-positive: 1;
749 flex-grow: 1;
750 padding: 7px 15px;
751 }
752
753 /* Pricing table */
754 div.imagify-col-details {
755 width: 22%;
756 padding-left: 25px;
757 }
758 .imagify-col-details p {
759 margin: 0;
760 }
761 .imagify-pricing-table {
762 margin: 0 20px;
763 }
764 .imagify-pricing-table .imagify-offer-line {
765 padding: .6em 0;
766 background-color: white;
767 margin-bottom: 30px;
768 text-align: left;
769 border-radius: 3px;
770 position: relative;
771 }
772 .imagify-pricing-table .imagify-offer-line:first-child {
773 margin-top: .75em;
774 }
775 .imagify-pricing-table .imagify-offer-line.imagify-offer-selected:first-child {
776 margin-top: 1.75em;
777 }
778 .imagify-pricing-table .imagify-offer-line + .imagify-offer-line {
779 margin-top: -2px;
780 }
781 .imagify-pricing-table .imagify-col-other-actions {
782 width: 20.5%;
783 }
784 .imagify-pricing-table .imagify-approx {
785 margin-left: 0;
786 line-height: 0.5;
787 margin-bottom: 1em;
788 }
789 .imagify-pricing-table .imagify-offer-selected {
790 -webkit-transform: scale(1.03);
791 transform: scale(1.03);
792 background: #40B1D0;
793 border-width: 0;
794 }
795 .imagify-pricing-table .imagify-offer-selected .imagify-approx {
796 color: #FFF;
797 }
798 .imagify-pricing-table .imagify-button-secondary {
799 padding: 3px 20px;
800 box-shadow: none;
801 text-transform: uppercase;
802 font-size: 12px;
803 letter-spacing: 0.025em;
804 }
805 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary {
806 border: 2px solid #FFF;
807 background: #40B1D0;
808 box-shadow: none;
809 text-shadow: none!important;
810 }
811 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary:hover,
812 .imagify-offer-selected.imagify-offer-selected .imagify-button-secondary:focus {
813 background: #FFF;
814 color: #40B1D0;
815 }
816
817 .imagify-col .imagify-special-needs {
818 margin-left: 25px;
819 }
820 .imagify-special-needs strong {
821 font-size: 25px;
822 font-weight: bold;
823 color: #40B1D0;
824 }
825 .imagify-special-needs span {
826 display: block;
827 font-size: 12px;
828 margin-top: -.5em;
829 }
830 div.imagify-col-price {
831 position: relative;
832 }
833
834 /* we recommend line */
835 .imagify-recommend {
836 display: none;
837 position: absolute;
838 left: -20px; bottom: 100%;
839 padding: 0;
840 margin-bottom: 8px;
841 color: #1F2332;
842 font-weight: bold;
843 font-style: italic;
844 }
845 .imagify-offer-selected .imagify-recommend {
846 display: block;
847 }
848 [class*="imagify-onetime-"] .imagify-recommend {
849 left: 65px;
850 margin-bottom: 20px;
851 }
852 .imagify-recommend:before {
853 content: "";
854 position: absolute;
855 top: 7px; left: -35px;
856 width: 29px; height: 30px;
857 background: url("../images/icon-arrow-choice.png") scroll 0 no-repeat;
858 background-size: contain;
859 }
860 @media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
861 .imagify-recommend:before {
862 background-image: url("../images/icon-arrow-choice.svg");
863 }
864 }
865
866 /* One Time Adjustments */
867 .imagify-offer-line[class*="imagify-onetime-"] {
868 padding: 0;
869 margin: .3em 0 0;
870 }
871 .imagify-offer-line.imagify-offer-line[class*="imagify-onetime-"]:first-child {
872 margin-top: 2em;
873 }
874 .imagify-offer-line[class*="imagify-onetime-"] + .imagify-offer-line {
875 margin-top: .5em;
876 }
877 .imagify-offer-selected.imagify-offer-line[class*="imagify-onetime-"] {
878 -webkit-transform: scale(1);
879 transform: scale(1);
880 border-width: 2px;
881 }
882
883 /* cols */
884 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details {
885 position: relative;
886 overflow: hidden;
887 width: 21%;
888 background: #1F2332;
889 color: #FFF;
890 }
891 .imagify-offer-selected.imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details {
892 background: #338EA6;
893 }
894 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-details:before {
895 content: "";
896 position: absolute;
897 bottom: 0; right: 25px;
898 width: 75px; height: 54px;
899 background: url("../images/icon-pack.png");
900 }
901 .imagify-offer-line[class*="imagify-onetime-"] .imagify-col-other-actions {
902 width: 30%;
903 }
904
905 .imagify-offer-line[class*="imagify-onetime-"] .imagify-offer-size,
906 .imagify-offer-line[class*="imagify-onetime-"] .imagify-approx {
907 color: #FFF;
908 }
909 .imagify-offer-line[class*="imagify-onetime-"] .imagify-offer-size {
910 font-size: 24px;
911 }
912 .imagify-offer-line[class*="imagify-onetime-"] .imagify-approx {
913 font-size: 12px;
914 }
915 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-block {
916 padding-left: 10px;
917 }
918 .imagify-offer-line[class*="imagify-onetime-"] .imagify-dollars {
919 vertical-align: middle;
920 }
921 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-big {
922 vertical-align: -5px;
923 }
924 .imagify-offer-line[class*="imagify-onetime-"] .imagify-price-mini {
925 vertical-align: 7px;
926 }
927
928 /* Simple Tabs */
929 .imagify-tabs {
930 margin-bottom: 0;
931 list-style: none;
932 background: #E5EBEF;
933 }
934 .imagify-modal-content .imagify-tabs {
935 margin: 1em 0 0;
936 }
937 .imagify-tab {
938 -webkit-box-flex: 1;
939 -webkit-flex-grow: 1;
940 -ms-flex-positive: 1;
941 flex-grow: 1;
942 width: 50%;
943 margin: 0;
944 font-size: 23px;
945 }
946 .imagify-tab a {
947 display: block;
948 padding: 15px 10px;
949 color: inherit;
950 text-decoration: none;
951 }
952 .imagify-tab a:focus {
953 box-shadow: none;
954 outline: none;
955 color: #40B1D8;
956 }
957 .imagify-tab.imagify-current a {
958 background: #F6F7FB;
959 }
960 .imagify-tab-content.imagify-current {
961 display: block;
962 }
963 .imagify-tab-content {
964 display: none;
965 }
966 .imagify-tab-content .imagify-modal-section:first-child {
967 margin-top: 0;
968 }
969
970 /* Modal sidebar */
971 .imagify-modal-sidebar-content,
972 .imagify-payment-modal .imagify-modal-sidebar {
973 display: -webkit-box;
974 display: -webkit-flex;
975 display: -ms-flexbox;
976 display: flex;
977 -webkit-box-orient: vertical;
978 -webkit-box-direction: normal;
979 -webkit-flex-direction: column;
980 -ms-flex-direction: column;
981 flex-direction: column;
982 }
983 .imagify-modal-sidebar-content {
984 -webkit-box-flex: 1;
985 -webkit-flex-grow: 1;
986 -ms-flex-positive: 1;
987 flex-grow: 1;
988 }
989 p.imagify-modal-sidebar-title.imagify-modal-sidebar-title {
990 margin-top: 5px;
991 padding-right: 40px;
992 font-size: 18px;
993 color: #FFF;
994 }
995 .imagify-modal-testimony {
996 margin-top: 1em;
997 }
998 .imagify-modal-testimony + .imagify-modal-testimony {
999 margin-top: 2em;
1000 }
1001 @media (max-height:620px) {
1002 .imagify-modal-testimony + .imagify-modal-testimony {
1003 display: none;
1004 }
1005 }
1006 .imagify-modal-testimony-person {
1007 display: table;
1008 width: 100%;
1009 }
1010 .imagify-modal-testimony-person > * {
1011 display: table-cell;
1012 vertical-align: middle;
1013 }
1014 .imagify-modal-avatar {
1015 width: 114px;
1016 line-height: 0;
1017 }
1018 .imagify-modal-avatar img {
1019 border: 2px solid #FFF;
1020 border-radius: 50%;
1021 width: 96px; height: 96px;
1022 }
1023 .imagify-modal-identity a {
1024 text-decoration: none;
1025 font-weight: bold;
1026 }
1027 .imagify-modal-identity a:first-child {
1028 font-size: 13px;
1029 }
1030 .imagify-modal-identity a:first-child + a {
1031 display: block;
1032 font-size: 10px;
1033 color: #7A8996;
1034 }
1035 .imagify-modal-testimony-content.imagify-modal-testimony-content p {
1036 font-size: 13px;
1037 font-style: italic;
1038 line-height: 1.7;
1039 color: #7A8996;
1040 }
1041 .imagify-modal-sidebar-trust {
1042 margin-top: auto;
1043 padding-top: 1.5em;
1044 }
1045 .imagify-modal-sidebar-trust p {
1046 margin: 0;
1047 font-weight: bold;
1048 font-size: 12px;
1049 line-height: 1.7;
1050 }
1051 .imagify-modal-sidebar-trust p img {
1052 margin-right: 3px;
1053 vertical-align: -2px;
1054 }
1055 .imagify-modal-sidebar-trust p + p {
1056 font-size: 11px;
1057 }
1058
1059 /* Cart */
1060 .imagify-cart {
1061 text-align: left;
1062 }
1063 .imagify-cart .imagify-cart-list {
1064 border-top: 1px solid rgba(122, 137, 150, .2);
1065 border-bottom: 1px solid rgba(122, 137, 150, .2);
1066 }
1067 .imagify-cart .imagify-cart-label {
1068 margin-bottom: 0.5em;
1069 font-size: 10px;
1070 color: #2E3243;
1071 }
1072 .imagify-cart-list p {
1073 margin: 0;
1074 font-weight: bold;
1075 }
1076 .imagify-cart-item {
1077 margin: .4em 0;
1078 }
1079 .imagify-cart .imagify-cart-suggestion {
1080 margin-top: -.3em;
1081 }
1082 .imagify-cart-suggestion a,
1083 .imagify-cl-description p {
1084 font-size: 10px;
1085 }
1086 .imagify-remove-from-cart {
1087 border: 0;
1088 padding: 0;
1089 width: 14px;
1090 height: 14px;
1091 line-height: 13px;
1092 border-radius: 50%;
1093 background: #40B1D0;
1094 cursor: pointer;
1095 transition: background .3s;
1096 }
1097 .imagify-remove-from-cart i:before {
1098 position: relative;
1099 top: -6px; left: -3px;
1100 font-size: 13px;
1101 color: #FFF;
1102 }
1103 .imagify-remove-from-cart:hover,
1104 .imagify-remove-from-cart:focus {
1105 background: #D0021B;
1106 }
1107
1108 /* col sizes */
1109 .imagify-cart .imagify-cl-remove {
1110 -webkit-box-flex: 0;
1111 -webkit-flex-grow: 0;
1112 -ms-flex-positive: 0;
1113 flex-grow: 0;
1114 width: 45px;
1115 }
1116 .imagify-cart .imagify-cl-name {
1117 -webkit-box-flex: 0;
1118 -webkit-flex-grow: 0;
1119 -ms-flex-positive: 0;
1120 flex-grow: 0;
1121 width: 200px;
1122 }
1123 .imagify-cart .imagify-cl-description {
1124 -webkit-align-self: flex-start;
1125 -ms-flex-item-align: start;
1126 align-self: flex-start;
1127 padding-top: 10px;
1128 }
1129 .imagify-cart .imagify-cl-price {
1130 text-align: right;
1131 }
1132
1133 #imagify-payment-iframe {
1134 width: 980px;
1135 height: 672px;
1136 background: #f6f7fb url(../images/loader-balls.svg) 50% 50% no-repeat;
1137 }
1138
1139 .imagify-success-view {
1140 display: -webkit-box;
1141 display: -webkit-flex;
1142 display: -ms-flexbox;
1143 display: flex;
1144 -webkit-box-align: center;
1145 -webkit-align-items: center;
1146 -ms-flex-align: center;
1147 align-items: center;
1148 -webkit-box-orient: vertical;
1149 -webkit-box-direction: normal;
1150 -webkit-flex-direction: column;
1151 -ms-flex-direction: column;
1152 flex-direction: column;
1153 -webkit-box-pack: center;
1154 -webkit-justify-content: center;
1155 -ms-flex-pack: center;
1156 justify-content: center;
1157 height: 100%;
1158 }
1159 .imagify-success-view p {
1160 font-weight: bold;
1161 font-size: 16px;
1162 }
1163
1164 /* Imagify cart item removing */
1165 .imagify-cart-emptied-item {
1166 margin: .3em auto;
1167 padding: 6px 20px;
1168 background: #E6EBEF;
1169 border-radius: 20px;
1170 }
1171 .imagify-cart-emptied-item.imagify-cart-emptied-item p {
1172 font-weight: bold;
1173 }
1174 .imagify-cart-emptied-item a {
1175 color: #40b1d0;
1176 float: right;
1177 font-weight: bold;
1178 }
1179 .imagify-col-details p.imagify-label-plans{
1180 margin-left: 10px;
1181 font-size: 1.5em;
1182 text-transform: uppercase;
1183 color: #3FB1CF;
1184 }
1185 div.imagify-col-label {
1186 width:15%;
1187 }
1188 .imagify-pricing-table .imagify-col-other-actions.imagify-choose-plan-col {
1189 width: 14.5%;
1190 }
1191 @media (max-width: 782px) {
1192 .imagify-payment-modal .imagify-modal-content{
1193 width: 90%;
1194 min-width: auto;
1195 -webkit-flex-direction: column;
1196 -ms-flex-direction: column;
1197 flex-direction: column;
1198 -webkit-box-direction: normal;
1199 -webkit-box-orient: vertical;
1200 -moz-box-direction: normal;
1201 -moz-box-orient: vertical;
1202 align-items: center;
1203 }
1204 .imagify-payment-modal .imagify-modal-main{
1205 width: 100%;
1206 }
1207 .imagify-payment-modal .imagify-modal-sidebar{
1208 width: 100%;
1209
1210 }
1211 .imagify-modal-section.section-gray{
1212 padding: 10px 10px 15px;
1213 }
1214 .imagify-modal-section{
1215 padding: 0 10px;
1216 }
1217 .imagify-submit-line{
1218 -webkit-flex-direction: column;
1219 -ms-flex-direction: column;
1220 flex-direction: column;
1221 -webkit-box-direction: normal;
1222 -webkit-box-orient: vertical;
1223 -moz-box-direction: normal;
1224 -moz-box-orient: vertical;
1225 align-items: center;
1226 }
1227 .imagify-coupon-section{
1228 -webkit-flex-direction: column;
1229 -ms-flex-direction: column;
1230 flex-direction: column;
1231 -webkit-box-direction: normal;
1232 -webkit-box-orient: vertical;
1233 -moz-box-direction: normal;
1234 -moz-box-orient: vertical;
1235 align-items: center;
1236 margin-bottom: 20px;
1237 }
1238 .imagify-coupon-section .imagify-coupon-text{
1239 text-align: center;
1240 width: 100%;
1241 padding: 0;
1242 margin-bottom: 20px;
1243 }
1244
1245 .imagify-modal-cols{
1246 -webkit-flex-direction: column;
1247 -ms-flex-direction: column;
1248 flex-direction: column;
1249 -webkit-box-direction: normal;
1250 -webkit-box-orient: vertical;
1251 -moz-box-direction: normal;
1252 -moz-box-orient: vertical;
1253 align-items: center;
1254 }
1255 .imagify-col{
1256 padding: 0;
1257 float: none;
1258 width: 100%;
1259 }
1260 .imagify-payment-modal .imagify-iconed{
1261 margin: 1.5em auto;
1262 max-width: 260px;
1263 }
1264 .imagify-offer-header{
1265 padding: 0;
1266 }
1267 .imagify-offer-header .imagify-inline-options input[type="radio"]:not(:checked) + label,
1268 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label{
1269 padding: 7px 15px;
1270 }
1271 .imagify-offer-header .imagify-inline-options input[type="radio"]:checked + label{
1272 padding: 7px 15px;
1273 }
1274 .imagify-offer-header .imagify-offer-title.imagify-switch-my .imagify-monthly,
1275 .imagify-offer-header .imagify-offer-title.imagify-switch-my .imagify-yearly{
1276 padding: 10px 5px;
1277 font-size: 12px;
1278 }
1279 .imagify-offer-size{
1280 font-size: 18px;
1281 }
1282 .imagify-col-other-actions{
1283 padding: 10px;
1284 text-align: center;
1285 }
1286 .imagify-2-free{
1287 padding: 2px 5px;
1288 }
1289 .imagify-2-free.imagify-b-right {
1290 position: absolute;
1291 bottom: 100%;
1292 left: 0;
1293 right: 0;
1294 padding: 2px 5px;
1295 margin-bottom: 0px;
1296 margin-left: 0px;
1297 font-size: 0.8em;
1298 letter-spacing: 0;
1299 text-transform: none;
1300 text-align: center;
1301 color: #FFF;
1302 background: #10121A;
1303 border-radius: 2px;
1304 }
1305 .imagify-2-free.imagify-b-right:after{
1306 content: "";
1307 position: absolute;
1308 left: 50%;
1309 top: unset;
1310 bottom: -6px;
1311 margin-left: -3px;
1312 border-top: 3px solid #10121A;
1313 border-left: 3px solid transparent;
1314 border-right: 3px solid transparent;
1315 }
1316 div.imagify-col-price{
1317 -webkit-flex-direction: column;
1318 -ms-flex-direction: column;
1319 flex-direction: column;
1320 -webkit-box-direction: normal;
1321 -webkit-box-orient: vertical;
1322 -moz-box-direction: normal;
1323 -moz-box-orient: vertical;
1324 align-items: center;
1325 }
1326 .imagify-flex-table .imagify-price-complement{
1327 padding: 5px 0 0 0;
1328 margin: 0;
1329 text-align: center;
1330 }
1331 div.imagify-col-details{
1332 padding: 10px 0px 10px 10px;
1333 }
1334 .imagify-pricing-table .imagify-col-other-actions{
1335 padding: 0 10px 0 0;
1336 }
1337 .imagify-pricing-table .imagify-button-secondary{
1338 font-size: 12px;
1339 white-space: normal;
1340 line-height: 14px;
1341 padding: 10px;
1342 }
1343 .imagify-price-big{
1344 font-size: 24px;
1345 }
1346 span.imagify-price-mini{
1347 font-size: 12px;
1348 }
1349 .imagify-col-checkbox label{
1350 padding-left: 30px !important;
1351 }
1352 .medium.imagify-checkbox:not(:checked) + label:before,
1353 .medium.imagify-checkbox:checked + label:before{
1354 width: 15px;
1355 height: 15px;
1356 }
1357 div.imagify-col-checkbox{
1358 padding: 0;
1359 }
1360 .imagify-offer-monthly .imagify-flex-table .imagify-price-block,
1361 .imagify-offer-monthlies .imagify-price-block{
1362 padding: 0;
1363 }
1364 .imagify-pricing-table{
1365 margin: 0 .5em;
1366 }
1367 .imagify-payment-modal .close-btn{
1368 top: 5px;
1369 right: 5px;
1370 }
1371 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
1372 .imagify-col-checkbox .imagify-checkbox.imagify-checkbox:checked + label:after{
1373 top: -1px;
1374 left: 10px;
1375 }
1376 }
1377
1378 /** Ribbon **/
1379 .imagify-ribbon {
1380 position: absolute;
1381 left: -5px; top: -5px;
1382 z-index: 1;
1383 overflow: hidden;
1384 width: 75px; height: 75px;
1385 text-align: right;
1386 }
1387 .imagify-ribbon span {
1388 font-size: 0.9em;
1389 font-weight: bold;
1390 color: #FFF;
1391 text-align: center;
1392 line-height: 22px;
1393 transform: rotate(-45deg);
1394 -webkit-transform: rotate(-45deg);
1395 width: 100px;
1396 display: block;
1397 background: #79A70A;
1398 background: linear-gradient(#3FB1CF 0%, #3FB1CF 100%);
1399 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
1400 position: absolute;
1401 top: 19px; left: -21px;
1402 }
1403 .imagify-ribbon span::before {
1404 content: "";
1405 position: absolute; left: 0px; top: 100%;
1406 z-index: -1;
1407 border-left: 3px solid #3FB1CF;
1408 border-right: 3px solid transparent;
1409 border-bottom: 3px solid transparent;
1410 border-top: 3px solid #3FB1CF;
1411 }
1412 .imagify-ribbon span::after {
1413 content: "";
1414 position: absolute; right: 0px; top: 100%;
1415 z-index: -1;
1416 border-left: 3px solid transparent;
1417 border-right: 3px solid #3FB1CF;
1418 border-bottom: 3px solid transparent;
1419 border-top: 3px solid #3FB1CF;
1420 }
1421 /** End Ribbon **/
1422
1423 /** Toggle Switch **/
1424 .imagify-toggle-container {
1425 display: flex;
1426 align-items: center;
1427 justify-content: center;
1428 gap: 10px;
1429 position: relative;
1430 width: 70%;
1431 margin: 80px auto 40px;
1432 }
1433 .imagify-toggle-container .toggle-label {
1434 font-size: 16px;
1435 font-weight: 500;
1436 }
1437 .toggle-container .toggle-label:nth-of-type(2) {
1438 color: #c8ced5;
1439 }
1440 .imagify-switch {
1441 position: relative;
1442 display: inline-block;
1443 width: 48px;
1444 height: 24px;
1445 }
1446 .imagify-switch input {
1447 opacity: 0;
1448 width: 0;
1449 height: 0;
1450 }
1451 .imagify-slider {
1452 position: absolute;
1453 top: 0;
1454 left: 0;
1455 right: 0;
1456 bottom: 0;
1457 background-color: #97c45e;
1458 border-radius: 30px;
1459 cursor: pointer;
1460 transition: 0.4s;
1461 }
1462 .imagify-slider:before {
1463 position: absolute;
1464 content: "";
1465 height: 18px;
1466 width: 18px;
1467 left: 4px;
1468 bottom: 3px;
1469 background-color: white;
1470 border-radius: 50%;
1471 transition: 0.4s;
1472 }
1473 input:checked + .imagify-slider {
1474 background-color: #97c45e;
1475 }
1476 input:checked + .imagify-slider:before {
1477 transform: translateX(22px);
1478 }
1479 .imagify-badge-container {
1480 align-items: center;
1481 gap: 5px;
1482 position:absolute;
1483 right: 80px;
1484 top: -25px;
1485 }
1486 .imagify-badge {
1487 font-size: 12px;
1488 padding: 4px 10px;
1489 border: 1px solid #b8bfc5;
1490 border-radius: 3px;
1491 color: #b8bfc5;
1492 font-weight: 700;
1493 transition: background-color 0.4s, color 0.4s;
1494 }
1495 .imagify-badge.imagify-badge-checked {
1496 background-color: #E2F0D1;
1497 color: #8bc34a;
1498 border: 1px solid #8bc34a
1499 }
1500 .imagify-arrow-container {
1501 position: absolute;
1502 right: 180px;
1503 top: 0px;
1504 }
1505 .imagify-toggle-container img:nth-of-type(1) {
1506 display: none;
1507 }
1508 input:checked ~ .imagify-badge-container .imagify-badge {
1509 background-color: #97c45e;
1510 color: white;
1511 border-color: #97c45e;
1512 opacity: 1;
1513 }
1514 /** End Toggle Switch **/
1515