PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / 2.2.9
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF v2.2.9
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 2.2.9, at assets/css/pricing-modal.css

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