https://www.opinionworld.co.nz/

1<!DOCTYPE html>
2
3<html data-ng-app="app-home" lang="en">
4
5  <head>
6  
7  <meta charset="utf-8">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge">
9  <meta name="viewport" content="width=device-width, initial-scale=1">
10  <meta name=”robots” content=”index,follow” />
11  <link rel="alternate" hreflang="en-nz" href="/" /><link rel="canonical" href="/" />
12
13  <title> Paid Surveys Online | Earn points by taking surveys | OpinionWorld</title>
14  <meta name="description" content="OpinionWorld is a market research panel where members collect points for their opinions in free online surveys. Sign up now." />
15  <meta name="keywords" content="" />
16  <link rel="shortcut icon" href="https://darwin-assets.dynata.com/ow-favicon.ico" type="image/x-ico; charset=binary" />
17  <meta name="google-site-verification" content="ePVR83APNPkii8yQ9QaYOCWjQ_fCKTQUCDt-bLFs5Is" />
18
19  <link rel="stylesheet" href="https://opinionworld.co.nz/blueprint/dist/stylesheets/style.css" />
20    <link rel="stylesheet" href="https://opinionworld.co.nz/blueprint/dist/stylesheets/layouts/default/default.css" />
21    
22
23  
24
25  
26  <link rel="stylesheet" href="https://darwin-assets.dynata.com/upp-ui/hydra.css" />
27  
28
29  
30
31  
32  

32<script type="module" src="https://darwin-assets.dynata.com/upp-ui/hydra.js" defer></script>

32
33  
34
35  
36  

36<script src="/blueprint/dist/common/icons.js"></script>

36
37  
38
39  
40  <link href="https://darwin-assets.dynata.com/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
41  <link href="https://darwin-assets.dynata.com/font-awesome/css/regular.min.css" rel="stylesheet" />
42  <link href="https://darwin-assets.dynata.com/font-awesome/css/solid.min.css" rel="stylesheet" />
43
44  
45  <link href="https://darwin-assets.dynata.com/font-awesome/css/v4-font-face.min.css" rel="stylesheet" />
46
47  
48
49  <!-- Google Tag Manager -->

50<script>

50(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
51new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
52j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
53'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
54})(window,document,'script','dataLayer','

54GTM-KSWHJ4X

54');

54</script>

54
55<!-- End Google Tag Manager -->
56
57<!-- Google Tag Manager -->

58<script>

58(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
59new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
60j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
61'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
62})(window,document,'script','dataLayer','

62GTM-T4C75QR

62');

62</script>

62
63<!-- End Google Tag Manager -->
64</head>
65
66  <body class="" style="background-image: url(%!s(&lt;nil&gt;))">
67    <div>
68  <style >:root {
69
70    /***** COLORS *****/
71
72    /* Black & White */
73    --black: #000000;
74    --white: #FFFFFF;
75
76
77    /***** TEXT INFO *****/
78
79    /* Font family */
80
81    --ff-primary: ;
82
83    /* Font Weight */
84
85    --fw-thin: 100;
86    --fw-regular: 300;
87    --fw-medium: 500;
88    --fw-semibold: 600;
89    --fw-bold: 700;
90    --fw-xbold: 800;
91
92    /* Font Sizes */
93
94    --fs-800: 3.875rem;
95    --fs-700: 3rem;
96    --fs-600: 2.5rem;
97    --fs-550: 2.25rem;
98    --fs-500: 2rem;
99    --fs-400: 1.5rem;
100    --fs-300: 1.25rem;
101    --fs-200: 1.125rem;
102    --fs-100: 1rem;
103    --fs-75: 0.875rem;
104    --fs-50: 0.75rem;
105    --fs-25: 0.625rem;
106
107    /* Line Heights */
108
109    --lh-800: 4.375rem;
110    --lh-700: 3.5rem;
111    --lh-600: 3rem;
112    --lh-500: 2.5rem;
113    --lh-400: 2rem;
114    --lh-300: 1.75rem;
115    --lh-200: 1.625rem;
116    --lh-100: 1.5rem;
117    --lh-75: 1.375rem;
118    --lh-50: 1.25rem;
119    --lh-25: 1.125rem;
120
121    /* Mobile Font Declarations */
122
123    --fs-xl-h1: var(--fs-700);
124    --fs-h1: var(--fs-600);
125    --fs-h2: var(--fs-400);
126    --fs-h2a: var(--fs-400);
127    --fs-h3: var(--fs-400);
128    --fs-h4: var(--fs-300);
129    --fs-h5: var(--fs-200);
130    --fs-h6: var(--fs-100);
131    --fs-p: var(--fs-75);
132    --fs-s: var(--fs-50);
133    --fs-xs: var(--fs-25);
134    --fs-button: var(--fs-100);
135    --fs-body: var(--fs-100);
136
137    --lh-xl-h1: var(--lh-700);
138    --lh-h1: var(--lh-600);
139    --lh-h2: var(--lh-500);
140    --lh-h3: var(--lh-400);
141    --lh-h4: var(--lh-300);
142    --lh-h5: var(--lh-200);
143    --lh-h6: var(--lh-100);
144    --lh-p: var(--lh-75);
145    --lh-s: var(--lh-50);
146    --lh-xs: var(--lh-25);
147    --lh-button: var(--lh-100);
148    --lh-body: var(--lh-100);
149
150}
151
152@media (min-width: 51.875em) {
153
154    /* Desktop Font Declarations */
155
156    :root {
157
158        --fs-xl-h1: var(--fs-800);
159        --fs-h1: var(--fs-700);
160        --fs-h2a: var(--fs-550);
161        --fs-h2: var(--fs-600);
162        --fs-h3: var(--fs-500);
163        --fs-h4: var(--fs-400);
164        --fs-h5: var(--fs-300);
165        --fs-h6: var(--fs-200);
166        --fs-p: var(--fs-100);
167        --fs-s: var(--fs-50);
168        --fs-xs: var(--fs-25);
169        --fs-button: var(--fs-100);
170        --fs-body: var(--fs-100);
171
172        --lh-xl-h1: var(--lh-800);
173        --lh-h1: var(--lh-700);
174        --lh-h2: var(--lh-600);
175        --lh-h3: var(--lh-500);
176        --lh-h4: var(--lh-400);
177        --lh-h5: var(--lh-300);
178        --lh-h6: var(--lh-200);
179        --lh-p: var(--lh-100);
180        --lh-s: var(--lh-50);
181        --lh-xs: var(--lh-25);
182        --lh-button: var(--lh-100);
183        --lh-body: var(--lh-100);
184
185    }
186
187
188}
189
190/***** UTILITY CLASSES *****/
191
192/* Color Classes */
193
194.white {
195    color: var(--white)
196}
197
198.black {
199    color: var(--black);
200}
201
202/*TEAL*/
203
204.teal-100 {
205    color: var(--teal-100);
206}
207
208.teal-200 {
209    color: var(--teal-200);
210}
211
212.teal-300 {
213    color: var(--teal-300);
214}
215
216.teal-400 {
217    color: var(--teal-400);
218}
219
220.teal-500 {
221    color: var(--teal-500);
222}
223
224/*ORANGE*/
225
226.orange-100 {
227    color: var(--orange-100);
228}
229
230.orange-200 {
231    color: var(--orange-200);
232}
233
234.orange-300 {
235    color: var(--orange-300);
236}
237
238.orange-400 {
239    color: var(--orange-400);
240}
241
242.orange-500 {
243    color: var(--orange-500);
244}
245
246/*PURPLE*/
247
248.purple-100 {
249    color: var(--purple-100);
250}
251
252.purple-200 {
253    color: var(--purple-200);
254}
255
256.purple-300 {
257    color: var(--purple-300);
258}
259
260.purple-400 {
261    color: var(--purple-400);
262}
263
264.purple-500 {
265    color: var(--purple-500);
266}
267
268/*GREY*/
269
270.grey-100 {
271    color: var(--grey-100);
272}
273
274.grey-200 {
275    color: var(--grey-200);
276}
277
278.grey-300 {
279    color: var(--grey-300);
280}
281
282.grey-400 {
283    color: var(--grey-400);
284}
285
286.grey-500 {
287    color: var(--grey-500);
288}
289
290
291
292
293/* Font Weight Classes */
294
295.fw-thin {
296    font-weight: var(--fw-thin);
297}
298
299.fw-regular {
300    font-weight: var(--fw-regular);
301}
302
303.fw-medium {
304    font-weight: var(--fw-medium);
305}
306
307.fw-semibold {
308    font-weight: var(--fw-semibold);
309}
310
311.fw-bold {
312    font-weight: var(--fw-bold);
313}
314
315.fw-xbold {
316    font-weight: var(--fw-xbold);
317}
318
319/* Text align */
320
321.la {
322    text-align: left;
323}
324
325.ra {
326    text-align: right;
327}
328
329.ca {
330    text-align: center;
331}
332
333/* Container Styling */
334
335.rb-container {
336    /*max-width: 1160px;*/
337    width: min(1160px, 90%);
338    margin-inline: auto;
339}
340
341/* Grid Styling */
342
343.center {
344    text-align: center;
345}
346
347.rb-grid {
348    display: grid;
349    grid-template-columns: 1fr;
350}
351
352
353/* Text Classes */
354
355.xl-h1 {
356    font-size: var(--fs-xl-h1);
357    line-height: var(--lh-xl-h1);
358    margin-bottom: 30px;
359
360}
361
362.h1 {
363    font-size: var(--fs-h1);
364    line-height: var(--lh-h1);
365    margin-bottom: 30px;
366}
367
368.h2a {
369    font-size: var(--fs-h2a);
370    line-height: var(--lh-h2);
371}
372
373.h2 {
374    font-size: var(--fs-h2);
375    line-height: var(--lh-h2);
376}
377
378.h3 {
379    font-size: var(--fs-h3);
380    line-height: var(--lh-h3);
381    margin-bottom: 20px;
382
383}
384
385.h4 {
386    font-size: var(--fs-h4);
387    line-height: var(--lh-h4);
388    margin-bottom: 20px;
389
390}
391
392.h5 {
393    font-size: var(--fs-h5);
394    line-height: var(--lh-h5);
395
396}
397
398.h6 {
399    font-size: var(--fs-h6);
400    line-height: var(--lh-h6);
401
402}
403
404.pg {
405    font-size: var(--fs-p);
406    line-height: var(--lh-p);
407
408}
409
410.small {
411    font-size: var(--fs-s);
412    line-height: var(--lh-s);
413
414}
415
416.xsmall {
417    font-size: var(--fs-xs);
418    line-height: var(--lh-xs);
419
420}
421
422
423
424
425
426/***********************************************************************************************************************************************************************/
427
428* {font-family: omnes-pro, sans-serif;
429font-style: normal;

430font-weight: 700;
431}
432
433p, ul li {
434font-family: omnes-pro, sans-serif;
435font-style: normal;
436font-weight: 400;
437color:#626262;
438}
439
440.hero p {
441/*color:#fff;*/
442}
443
444.white, .hero-desc-content {
445color:#fff;
446}
447
448
449/* a {
450color:#f5740f;
451} */
452
453a {
454     color: #c95100;
455}
456
457html {
458  scroll-behavior: smooth;
459}
460     /* Primary Colors */
461    /* panel.base.primaryColor: 00827D */
462    /* panel.base.primaryColorFade: 000000 */
463    /* panel.base.secondaryColor: 00827D */
464    /* panel.base.secondaryColorFade: 000000 */
465    /* panel.base.tertiaryColor: E9E9E9 */
466    /* panel.base.tertiaryColorFade: 00827D */
467    /* panel.footer.background: 6E7077 */
468    /* panel.footer.text: FFFFFF */
469    /* panel.other.notificationBubble: 00827D */
470    /* panel.other.fmasCircle: 00827D */
471    /* panel.siteNotification.background: 000000 */
472    /* panel.siteNotification.text: FFFFFF */
473    /* panel.siteNotification.link: 00827D */
474
475header {
476        box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.16)!important;
477    }
478
479    header .container {
480    margin-bottom: 0px;
481}
482.header img {
483    max-height: 50px;
484}
485
486@media only screen and (max-width: 830px) {
487    .header img {
488        max-height: 35px;
489    }
490}
491    
492    .header .link:hover:after {
493        background: #549ed6;
494    }
495    
496    .header .link.active:after {
497        background: #549ed6;
498    }
499    
500    .contentAndLinks-links-link-active {
501        background: #549ed6;
502    }
503    
504    .colorPrimary {
505        color: #549ed6;
506    }
507    
508    .contentAndLinks-links-link-active:hover {
509        background: #549ed6;
510    }
511    
512    .scrollToTop {
513        background: #549ed6;
514    }
515    
516    .header-bars {
517        color: #549ed6;
518    }
519    
520    .mobileHeader-content-link.active,
521    .mobileHeader-content-link.active:hover {
522        background: #549ed6;
523    }
524    
525    .form-type1 .field-valid {
526        color: #549ed6;
527    }
528    
529    .mobileHeader-close {
530        background: #549ed6;
531    }
532    
533    .mobileHeader-profileProgress {
534        background: #549ed6;
535    }
536    
537    .promoTabs .promoArea {
538        background: #549ed6;
539    }
540    
541    .contentAndLinks-links p.rewardBox {
542        background: #549ed6;
543    }
544    
545    .contentAndLinks-links-link-subject {
546        color: #549ed6;
547    }
548    
549    .rewards-mobile-submenu {
550        background: #000000;
551    }
552    
553    .header-accountInfo-account-name {
554        color: #549ed6;
555    }
556    
557    .header-accountInfo-account:hover {
558        border-bottom: 5px solid #549ed6;
559    }
560    
561    .header-accountInfo.open .header-accountInfo-account-menu {
562        border-top: 5px solid #549ed6;
563    }
564    
565    .header-accountInfo-cart.open>a {
566        border-bottom: 5px solid #549ed6;
567    }
568    
569    .header .header-accountInfo-account-menu a:hover {
570        background: #549ed6;
571    }
572    
573    .header .header-accountInfo-account-menu a.active,
574    .header .header-accountInfo-account-menu a.active:hover {
575        color: #549ed6;
576    }
577    
578    .header .header-accountInfo-account-menu a.active [image],
579    .header .header-accountInfo-account-menu a.active:hover [image] {
580        fill: #549ed6;
581    }
582    
583    body.account .header-accountInfo-account,
584    body.account:hover .header-accountInfo-account {
585        border-bottom: 5px solid #549ed6;
586    }
587    
588    .header-accountInfo-cart>a:hover {
589        border-bottom: 5px solid #549ed6;
590    }
591    
592    .widget-profiler-profilers-list a.active,
593    .widget-profiler-profilers-list a.active:hover {
594        background: #549ed6;
595    }
596    
597    .widget-profiler-profilers-list .icon .badge {
598        background-color: #549ed6;
599    }
600    
601    .profiler-profilers-list a.active,
602    .profiler-profilers-list a.active:hover {
603        background: #549ed6;
604    }
605    
606    .profiler-profilers-list .icon .badge {
607        background-color: #549ed6;
608    }
609    
610    .rewards-complete-status-icon.fa-check {
611        color: #549ed6;
612    }
613    
614    .rzslider .rz-bar.rz-selection {
615        background: #549ed6;
616    }
617    
618    .rzslider .rz-pointer {
619        background-color: #549ed6;
620    }
621    
622    .widget-surveys-interview {
623        border: 2px solid #549ed6;
624    }
625    
626.siteNotification.default, .siteNotification.success {
627  color: #FFFFFF;
628  background: #000000;
629  border-bottom: 1px solid #000000;
630}
631.siteNotification a { color: #f5740f; }
632.siteNotification.default .label, .siteNotification.default .fa, .siteNotification.success .label, .siteNotification.success .fa { color: #FFFFFF; }
633    
634   .footer { background: #616161; padding: 35px 0; margin-top: -112px;}
635
636   @media screen and (max-width: 830px) {
637      .footer { margin-top: -75px;}
638   }
639    
640    .footer .footer-links-row a:nth-last-child(1) {display:none;}
641
642    .footer-links-link, .footer-copyright { color: #FFFFFF; }
643    
644    .footer .container, .footer .hero-desc { color: #FFFFFF; }
645    
646   .footer-links-link--social { color: #FFFFFF; }
647    
648   .notification-bubble { border: 1px solid #f5740f; background: #f5740f; }
649    
650.cg-busy-default-sign{ background-color: #549ed6; }    
651    
652.rewardDisplay-reward.selected .rewardDisplay-addToCart, .rewardDisplay-reward:hover.selected .rewardDisplay-addToCart {
653  background: #549ed6;
654  border: 1px solid #549ed6; 
655}
656    
657    .widget-progress-container .radial-progress .radial-progress-cover {
658        stroke: #E9E9E9;
659    }
660    
661    .widget-progress-container .radial-progress .radial-progress-background {
662        stroke: #e41e26;
663    }
664    
665    .widget-profiler-progress-container .radial-progress .radial-progress-cover {
666        stroke: #E9E9E9;
667    }
668    
669    .widget-profiler-progress-container .radial-progress .radial-progress-background {
670        stroke: #e41e26;
671    }
672    
673    .radial-progress-cover {
674        stroke: #E9E9E9;
675    }
676    
677    .radial-progress-background {
678        stroke: #e41e26;
679    }
680    
681    .progress-bar {
682        background: #f5740f;
683    }
684    
685    .scrollToTop:hover {
686        background: #000000;
687    }
688    
689    .reg-steps .steps>li.active .step-label>b {
690        background-color: #549ed6;
691    }
692
693.widget-offers-list-item--survey a {
694    border-left: 4px solid #f5740f;
695}
696    
697    /*.container {padding: 0px!important;}*/
698    
699    /* end primary colors */
700    /* buttons.primary */
701    /* buttons.primary.background: 00827D */ 
702    /* buttons.primary.border: 711711 */
703    /* buttons.primary.text: FFFFFF */
704    /* buttons.primary.hoverText: FFFFFF */

705    /* buttons.primary.hoverBackground: 711711 */
706    
707    .buttonPrimary {
708         background: #549ed6;
709         border: 2px solid #549ed6;
710         color: #13252f;
711         border-radius: 10px 0 10px 0;
712        text-decoration:none!important;
713        font-weight: 700;
714    }
715
716    .btn-about {
717  background: #f5740f;
718  border: 1px solid #f5740f;
719  color: #FFFFFF;
720}
721
722.btn-about:hover {
723  background:  #00000000;
724  border: 1px solid #f5740f;
725  color: #f5740f;
726}
727    
728  
729.hp-unique-right {
730        background-color: #a2d2f4!important;
731        border-color: #a2d2f4!important;
732    }
733
734    @media only screen and (min-width: 415px) {
735        
736        .hp-unique-left {
737        border-radius: 10px 0 0 0!important;
738        margin-right: 0px!important;
739        display: inline!important;
740        width: 210px!important;
741    }
742.hp-unique-right {
743        border-radius: 0 0 10px 0!important;
744        margin-left: 0px!important;
745        display:inline!important;
746        background-color: #a2d2f4!important;
747        border-color: #a2d2f4!important;
748        width: 210px!important;
749    }
750
751    }
752
753
754    .buttonPrimary:hover {
755         background: transparent;
756         border: 2px solid #549ed6;
757         color: #549ed6;
758        
759    }
760
761    .buttonPrimaryvaria {
762         background: #549ed6;
763         border: 1px solid #549ed6;
764         color: #000;
765         border-radius: 10px 0 10px 0;
766        text-decoration:none!important
767    }
768    
769    .buttonPrimaryvaria:hover {
770         background: transparent;
771         border: 1px solid #549ed6;
772          color: #549ed6;
773        
774    }
775    
776    
777    /* buttons.secondary */
778    /* buttons.secondary.background: 00827D */
779    /* buttons.secondary.border: 711711 */
780    /* buttons.secondary.text: FFFFFF */
781    /* buttons.secondary.hoverText: FFFFFF */
782    /* buttons.secondary.hoverBackground: 711711 */
783    
784    .buttonSecondary {
785         background: #549ed6;
786         border: 1px solid #549ed6;
787         color: #fff;
788         border-radius: 10px 0 10px 0;
789        
790    }
791    
792    .buttonSecondary:hover {
793         background: #FFFFFF;
794         border: 1px solid #549ed6;
795         color: #549ed6;
796        
797    }
798    
799    
800    /* buttons.tertiary */
801    /* buttons.tertiary.background: FFFFFF */
802    /* buttons.tertiary.border: 00827D */
803    /* buttons.tertiary.text: 00827D */
804    /* buttons.tertiary.hoverText: 00827D */
805    /* buttons.tertiary.hoverBackground: E7E7E7 */
806    
807    .buttonTertiary {
808         background: transparent;
809         border: 2px solid #125799;
810         color: #125799;
811         border-radius: 10px 0 10px 0;
812    }
813    
814    .buttonTertiary:hover {
815         background: #549ed6;
816         border: 2px solid #549ed6;
817         color: #13252f;
818        
819    }
820    
821     .yellowBox {
822         background: #549ed6;
823        
824    }
825    
826     .yellowBox a,
827    .yellowBox span {
828         color: #ffffff;
829        
830    }
831    
832    
833    /*td a img {height: 39px!important;}*/
834    
835    /** BOTTOM PROMO **/
836    
837    .promoFooter-promo {
838         border-radius: 60px 60px 0;
839         box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
840         text-align: left;
841         background: #FFFFFF;
842         width: 25%;
843    }
844    
845    .promoFooter-content {
846         color: #000000;
847        
848    }
849    
850    .promoFooter-content .button {
851         box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
852        
853    }
854    
855    .promoFooter .button {
856         color: #ffffff;
857         border: 1px solid #D6D7D6;
858         border-radius: 10px 0 10px 0;
859        
860    }
861    
862    .promo h2 {
863    color: #549ed6;
864    }
865
866    .promoFooter {padding: 40px 0px 90px; background: #ffffff;  margin: 0;}
867    
868    @media screen and (max-width: 600px) {
869         .promoFooter-promo {width: 80%;}
870    }
871
872@media only screen and (max-width: 830px)
873.promoFooter-promo {
874width: 90%;
875margin-bottom: 16px;
876height: auto;
877margin-top: 20px;
878}
879    
880    /** LOGO LOGIN FORM **/
881    
882    .loginForm .image-logo img,
883    .registrationForm .image-logo img {
884         width: auto;
885         max-height: 68px;
886        
887    }
888    
889.loginForm {
890     margin-top: 40px!important;
891}
892
893    .green {
894        color: #549ed6!important;
895    }
896    
897/************profile test***********/
898
899.profile-h4 {
900    margin: 25px 0 5px 7px;
901    color: #549ed6;
902}
903
904.widget-profiler-profilers-list a.active {
905 background: #f5740f!important;
906color: #323232!important;
907}
908
909.widget-profiler-profilers-list .Household, .widget-profiler-profilers-list .selenium-id-profiler-Business, .widget-profiler-profilers-list .selenium-id-profiler-Get {
910background-color: #549ed6;
911border-bottom: 1px solid #fff;
912color:#ffffff!important;
913}
914
915
916.widget-profiler-profilers-list .Household:hover,  .widget-profiler-profilers-list .selenium-id-profiler-Business:hover, .widget-profiler-profilers-list .selenium-id-profiler-Get:hover {
917background-color: #e36400 !important;
918border-bottom: 1px solid #fff;
919color: #323232!important;
920}
921
922.widget-profiler-profilers-list .Household .icon .badge,  .widget-profiler-profilers-list .selenium-id-profiler-Business .icon .badge, .widget-profiler-profilers-list .selenium-id-profiler-Get .icon .badge {
923background:#fff!important;
924color:#323232!important;
925}
926
927.widget-profiler-profilers-list .nextSteps{
928border-top: 5px solid #a6a1a1;
929padding-top: 20px;
930width: 96%;
931}
932
933.widget-profiler-profilers-list .Roles{
934background-color: transparent!important;
935color: #323232!important;
936}
937
938.widget-profiler-profilers-list .Roles:hover{
939background-color: #EFEFEF!important;
940color: #323232!important;
941}
942
943.widget-profiler-profilers-list .Roles .icon .badge {
944background:#549ed6!important;
945color:#ffffff!important;
946}
947
948/* OW CSS */
949    
950/** HEADER **/
951
952.header .fa.fa-star-o {
953display:none;
954}
955.header icon, .header, .header-accountInfo-account-name, .header-accountInfo-account-link {
956color:#549ed6;
957fill: #549ed6;
958}
959
960.header {
961	fill:#000000;
962}
963
964.header-accountInfo-account-link, header-accountInfo-cart-menu-title {
965color:#000000;
966fill: #000000;
967}
968
969
970.sticky.header icon, .sticky.header, .sticky .header-accountInfo-account-name, .

970sticky .header-accountInfo-account-link {
971     /* color:#549ed6;
972     fill: #549ed6; */ 
973     color: #000; 
974     fill: #000;
975}
976    
977.header-logo .hideOnMobile {
978    width: auto;
979    max-height:50px;
980    }
981    
982.header {
983    border-bottom: none;
984    background:#ffffffd6;
985    }
986    
987.header-col:nth-child(2) {
988    margin:1px;
989    }      
990
991.site-content {
992    padding-top:0!important;
993overflow:hidden;
994    }
995
996a.header-col-block.link [icon] {
997    display: none;
998}    
999    
1000a.button.buttonPrimary.header-mobile-join {
1001    border-radius: 0!important;
1002}
1003
1004.header-col-block, .header .link [icon], .header .components_languageSelector {
1005    /*color:#fff;
1006    fill: #fff;
1007    color:#549ed6;
1008    fill: #549ed6;*/
1009    color:#000;
1010    fill: #000;
1011}    
1012
1013.header-bars {
1014color:#fff;
1015}
1016.sticky .header-bars {
1017color:#549ed6;
1018}
1019   
1020header.header.sticky {
1021    background: #fff;
1022} 
1023
1024.header.header.sticky .header-col-block, .header.header.sticky .link [icon], header.sticky .components_languageSelector  {
1025    color:#000;
1026    fill: #000!important;
1027}
1028
1029
1030header.header.sticky .buttonTertiary {
1031    background: transparent;
1032    border: 1px solid #549ed6;
1033    color: #549ed6;
1034    border-radius: 10px 0 10px 0;
1035    }
1036    
1037header.header.sticky .buttonTertiary:hover {
1038    background: #549ed6;
1039    border: 1px solid #549ed6;
1040    color: #fff;  
1041    }
1042
1043header.header.sticky .buttonPrimary:hover {
1044    background: transparent;
1045    border: 1px solid #549ed6;
1046    color: #549ed6;
1047        
1048    }
1049    
1050@media only screen and (min-width:831px) {
1051    .header-col .button {
1052        width:100px;
1053        padding:8px 0;
1054        font-weight: 700;
1055        font-size:14px;
1056    }
1057.container, .promo-container, .container-promo-footer, .promo-container3 {
1058    max-width: 1160px;
1059}
1060.hero .hero-desc {
1061    width: 800px;
1062    }
1063
1064    /*.hero .container {
1065	width:auto!important;
1066}*/
1067}
1068
1069/*.hero .container {
1070	width:auto!important;
1071}*/    
1072
1073
1074
1075/**** HERO BANNER ***/    
1076.hero {
1077    height: 100vh;
1078    background-attachment:scroll;
1079		background-repeat: no-repeat;
1080		background-position: top;
1081		min-height: 340px;
1082		padding: 30px 0;
1083		position: relative;
1084		text-align: center;
1085		z-index: 0;
1086		background-size: cover;
1087    }
1088
1089  .hero-desc {
1090      vertical-align:middle;
1091  }
1092    
1093.hero-desc h1 {
1094    font-size: 60px;
1095    font-weight: 700;
1096    line-height: 50px;
1097}
1098.hero-desc h2 {
1099    font-size: 25px;
1100    font-weight: 700;
1101    line-height: 40px;
1102}
1103
1104.hero-desc-content a {
1105    color: #13252f!important;
1106    text-decoration: underline;
1107}
1108
1109.hero-desc-content a:hover {
1110    color: #549ed6!important;
1111}
1112
1113 .hero-desc h4 {
1114    text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
1115   font-weight: 300;
1116  }
1117
1118  .hero-desc p {
1119    font-size: 20px;
1120    font-weight: 400;
1121      }
1122
1123.next {
1124    color: #fff!important;
1125    font-size: 4rem;
1126    padding-top: 3rem;
1127    }
1128
1129.next:hover #Path_10 {
1130  animation-name: bounceAlpha;
1131    animation-duration:1.4s;
1132    animation-delay:0.1s;
1133    animation-iteration-count:infinite;
1134    animation-timing-function:linear;
1135}
1136
1137@keyframes bounceAlpha {
1138  0% {opacity: 1; transform: translateX(0px) scale(1);}
1139  25%{opacity: 0; transform:translateX(20px) scale(1);}
1140  26%{opacity: 0; transform:translateX(-20px) scale(0.9);}
1141  55% {opacity: 1; transform: translateX(0px) scale(1);}
1142}
1143
1144
1145/*hero svg animation */
1146
1147 .svg-icon {
1148  width:90px;
1149}
1150
1151.hero-svg {
1152	width:100px;
1153}
1154
1155.hero-svg .st0, .hero-svg .st2, .hero-svg .st4  {
1156r:0;
1157  animation-name:Opacity;
1158  animation-duration: 1s;
1159  animation-delay: 1s;
1160  animation-iteration-count: 1;
1161  animation-timing-function: ease-in-out;
1162  animation-fill-mode:forwards;
1163}
1164
1165
1166
1167@keyframes Opacity {
1168  0% {
1169    r:0;
1170  }
1171  90% {
1172    r:46.5
1173  }
1174  
1175  100% {
1176    r:43.5
1177  }
1178}
1179.hero-svg .st1, .hero-svg .st5{
1180  fill:none;
1181}
1182
1183.hero-svg .st1, .hero-svg .st5 {
1184 
1185  stroke-dasharray: 500;
1186  stroke-dashoffset:499;
1187  animation-name:fill;
1188  animation-delay: 2s;
1189   animation-duration: 5s;
1190  animation-iteration-count: 1;
1191  animation-timing-function: ease-in-out;
1192  animation-fill-mode:forwards;
1193}
1194
1195@keyframes fill {
1196  0% {
1197    stroke-dashoffset:499;
1198    fill:none;
1199  }
1200  
1201  99% {
1202    stroke-dashoffset: 1;
1203    fill:none;
1204    stroke-width:.5;
1205  }
1206  
1207  100% {
1208    stroke-dashoffset: 0;
1209    stroke-width:0;
1210    fill:#1A171B;
1211  }
1212}
1213
1214  .promo-content h2 {
1215    color:#231F20;
1216    font-weight: 600;
1217  }
1218
1219    .promo-container1 {
1220    padding: 0px 16px;
1221     }
1222
1223/* homepage unit */
1224
1225.hp-unit {
1226	padding-top: 100px;
1227	padding-bottom: 160px
1228}
1229
1230/* promo blocks*/
1231
1232.promo-blue{
1233background: linear-gradient(90deg, rgba(7,98,167,1) 0%, rgba(84,158,214,1) 100%);
1234height:280px;
1235}
1236
1237.promo-blue h2 {
1238color:#fff;
1239font-size:60px;

1240font-weight:700
1241}
1242
1243.promo-blue h4 {
1244color:#fff;
1245font-size:40px;
1246font-weight:700
1247}
1248    
1249.promo-blue .promo-content {
1250    width: 100%;
1251    text-align: center;
1252    margin: 0 auto;
1253    position: relative;
1254    transform: translateY(-50%);
1255    top: 50%;
1256}
1257
1258.promo-blue .promo-container {
1259height: 100%;
1260}
1261
1262/****** Footer Promo About Page ******/
1263.promo-bg-people{
1264    background-repeat: no-repeat;
1265    background-position: top;
1266    background-size: cover;
1267    background-attachment: fixed;
1268    background: linear-gradient(90deg, rgba(7,98,167,1) 0%, rgba(84,158,214,1) 100%);
1269}
1270
1271.promo-col-center{
1272    text-align: center;
1273    width: 100%;
1274    color: #ffffff;
1275    padding-top: 40px;
1276}
1277
1278.promo-footer-center{
1279    text-align: center;
1280    width: 100%;
1281    color: #000000;
1282    padding: 30px 0px;
1283}
1284
1285.promo-col-center h2 {color:#ffffff!important; font-weight:bold;}
1286
1287.promo-col-white {background: #ffffff; border-radius: 10px; margin-top: 30px;}
1288
1289
1290/****** TrustPilot ******/
1291 .promo iframe {
1292    margin: auto;
1293    top: 0%;
1294    padding: 30px 0px;
1295  }
1296 
1297   @media screen and (max-width: 577px) {
1298   .promo  iframe{
1299       height:300px;
1300       width: 100%!important;
1301     }
1302   }
1303.promo .trustpilot-widget {
1304    background-color: #;
1305    max-width: 1024px;
1306    margin: 0 auto;
1307  }
1308 /*.promo .trustpilot-widget::before{
1309    content:"Meet Our Members";
1310    color: #;
1311    font-size: 30px;
1312    display: block;
1313    padding-top: 20px;
1314    text-align: center;
1315    padding-right: 15px;
1316    padding-left: 15px;
1317  }*/
1318
1319 @media screen and (max-width: 599px) {
1320.hero-trust .top25 { display: none!important;}
1321}
1322
1323/************* Common CSS *******************/
1324	@media screen and (min-width: 830px) {
1325		/*.site-content .container {
1326			max-width: 100%;
1327			padding-left: 0px;
1328			padding-right: 0px;
1329  		}*/
1330		.promo-container1 {
1331			position: relative;
1332			height: 460px;
1333			max-width: 1024px;
1334			margin: auto;
1335			padding: 0px 16px;
1336		}
1337		.site-content {
1338			padding-top:80px;
1339			padding-bottom:90px;
1340			/*background-color: #fff;*/
1341		}
1342		.promo-container {
1343			height: 550px;
1344		}
1345	}
1346
1347	@media screen and (max-width: 830px) {
1348		.site-content {
1349			padding-top:40px;
1350			padding-bottom: 40px;
1351			/*background-color: #fff;*/
1352			overflow: hidden;
1353		}
1354	}
1355  
1356	@media only screen and (max-width: 600px){
1357		/*.site-content .container {padding: 0px!important;}*/
1358		.promo-container1 {padding: 16px 16px 0px 16px;}
1359		.hero {padding-top:0px;	padding-bottom:0px;}
1360    }
1361	
1362	.sup {
1363		vertical-align: baseline;
1364		position: relative;
1365		top: -1em;
1366		font-size: 45%;
1367		line-height: 0;
1368	}
1369
1370
1371	.container-promo-footer {
1372    	max-width: 1024px;
1373    	margin: auto;
1374    	padding:0 16px
1375	}
1376
1377	.container-promo-footer:after, .container-promo-footer:before {
1378    	content: "\0020";
1379    	display: block;
1380    	height: 0;
1381    	overflow:hidden
1382	}
1383
1384	.container-promo-footer:after {
1385    	clear:both
1386	}
1387		
1388	@media only screen and (min-width:831px) {
1389		.container-promo-footer {
1390    		max-width: 1160px;
1391		}
1392	}  
1393
1394	.promoFooter .container-promo-footer {
1395		display: -webkit-box;
1396		display: -moz-box;
1397		display: box;
1398		display: -webkit-flex;
1399		display: -moz-flex;
1400		display: -ms-flexbox;
1401		display: flex;
1402		-webkit-box-pack: justify;
1403		-moz-box-pack: justify;
1404		box-pack: justify;
1405		-webkit-justify-content: space-between;
1406		-moz-justify-content: space-between;
1407		-ms-justify-content: space-between;
1408		-o-justify-content: space-between;
1409		justify-content: space-between;
1410		-ms-flex-pack: justify;
1411	}
1412
1413	.promoFooter h3 {
1414	font-weight: 700;
1415	}
1416
1417	@media only screen and (max-width: 830px){
1418		.promoFooter .container-promo-footer {display: block;}
1419	}
1420
1421.btn-style { width: 210px; margin: 10px; font-weight: 700;}
1422.top80{margin-top: 80px;}
1423.registrationForm-content {margin-top: 50px; margin-bottom: 80px;}
1424
1425.mobileHeader-close {padding-top: 20px; height: 40px;}
1426
1427.contentAndLinks {
1428position: relative;
1429margin-bottom: 50px;
1430box-sizing: border-box;
1431padding-top: 100px;
1432}
1433
1434/************ HOMEPAGE ************/
1435.promo-col-aligned{text-align: center;}
1436.promo-col-aligned h3 {
1437    color: #000000;
1438    font-size: 40px;
1439    font-weight: 700;
1440    line-height: 40px;
1441}
1442
1443.hero-trust {
1444    height: 65vh;
1445    /*background-attachment:fixed;*/
1446		background-repeat: no-repeat;
1447		background-position: top;
1448		background-color: #6e6e6e;
1449		min-height: 340px;
1450		padding: 30px 0;
1451		color: #fff;
1452		position: relative;
1453		text-align: center;
1454		z-index: 0;
1455		background-size: cover;
1456background-image: url(https://darwin-assets.dynata.com/ow-homepage-hero-2.png);
1457    }
1458
1459.hero-trust .trustpilot-widget .wrapper-top .header, .hero-trust .trustpilot-widget .wrapper-top .date, .hero-trust .trustpilot-widget .wrapper-top .name {color:#ffffff!important}
1460
1461.hero-trust h3 {
1462    font-size: 60px;
1463    font-weight: 700;
1464    line-height: 90px;
1465    margin-bottom: 65px;
1466}
1467
1468.hero-trust .promo-col2 {
1469    height: auto!important;
1470}
1471
1472
1473@media only screen and (max-width: 830px) {
1474     .hero-trust {padding-bottom: 150px;}
1475     .hero-trust .promo-container {text-align: center!important;}
1476     .hero-trust .top25 {padding-top: 0!important;}
1477}
1478
1479@media only screen and (min-width: 831px) {
1480	.left-trust {
1481	text-align: left;
1482	}
1483}
1484
1485.top25 {padding-top: 12%;}
1486
1487.rw-logo { max-height: 80px; padding: 20px;}
1488
1489.promo-gray {background: #ffffff!important;}
1490
1491.promo-blue h3 {
1492    color: #fff;
1493    font-size: 50px;
1494    font-weight: 700;
1495    line-height: 50px;
1496    text-align: center;
1497}
1498
1499.hp-gradient{
1500	height: 280px;
1501}
1502
1503.hp-lady img{
1504	position: absolute;
1505    top: -172px;
1506    left: 100px;
1507}
1508
1509.onethird {width: 33%; display: inline-block}
1510
1511/*.fliphzl {transform: scaleX(-1);}*/
1512
1513.bannerleft{float: left; max-width: 350px; margin-left: -100px;}
1514
1515.bannerright{float: right; max-width: 350px; margin-right: -100px;}
1516
1517.middletop{vertical-align: top;padding-top: 5%;}
1518
1519.logobrands {padding:30px 0;}
1520
1521	.c-no {
1522	/*height:150px;*/
1523	background-color: #fff;
1524    border-radius: 0 150px 0 0;
1525    }
1526	.counter-Txt {text-align:center; font-size:20px;}

1527	.counter-Txt span{display:block; font-size:50px; color: #e61d26;}
1528	@media(min-width:320px) and (max-width:767px){ 
1529		.c-no{height:100%;}
1530		.counter-Txt{margin-top:35px;}
1531		.margin-bot-35{margin-bottom:35px;}
1532	}
1533	.container-fluid {
1534		margin-right: auto;
1535		margin-left: auto;
1536		padding-left: 15px;
1537		padding-right: 15px;
1538	}
1539	
1540	@media (min-width: 1200px){
1541		.container2 {width: 1170px;}
1542	}
1543	@media (min-width: 992px){
1544		.container2 {width: 970px;}
1545	}
1546	@media (min-width: 768px){
1547		.container2 {width: 750px;}
1548	}
1549	.container2 {
1550		padding-right: 15px;
1551		padding-left: 15px;
1552		margin-right: auto;
1553		margin-left: auto;
1554        padding-top: 100px;
1555        padding-bottom: 100px;
1556	}
1557	
1558	.col-sm-4 {
1559		position: relative;
1560		min-height: 1px;
1561		padding-right: 10px;
1562		padding-left: 10px;
1563	}
1564	
1565	@media (min-width: 768px){
1566		.col-sm-4 {width: 30%; display: inline-block;}
1567	}
1568	
1569	@media (max-width: 767px){
1570		.col-sm-4 {width: 100%; padding-right: 0; padding-left: 0}
1571	}
1572	
1573	#promocounter {
1574	    /*padding:30px 0;*/
1575	    background: linear-gradient(90deg, rgba(7,98,167,1) 0%, rgba(84,158,214,1) 100%);
1576
1577	 }
1578
1579.promo-col-white-home {background: #ffffff; border-radius: 10px; margin-top: 30px; max-width: 80%; text-align: center; margin: 0 auto; -webkit-box-shadow: 0px 2px 10px 0px rgba(110,108,110,1); -moz-box-shadow: 0px 2px 10px 0px rgba(110,108,110,1); box-shadow: 0px 2px 10px 0px rgba(110,108,110,1);}
1580
1581	@media only screen and (max-width: 600px){
1582		.hero .hero-desc h1 {font-size: 40px;line-height: 40px;}
1583	}
1584
1585	@media only screen and (max-width: 600px){
1586		.promo h2 {font-size: 30px;}
1587	}
1588
1589	@media only screen and (max-width: 600px){
1590		h2 {font-size: 30px;}
1591	}
1592
1593	@media only screen and (max-width: 830px){
1594		.promo .promo-content h2 {font-size: 40px;}
1595	}
1596
1597	@media only screen and (max-width: 769px){
1598		.logobrands {padding: 20px 0;}
1599		.rw-logo {max-height: 40px;padding: 10px;}
1600		.onethird img {display:none}
1601		.onethird {width: 100%;}
1602	}
1603
1604.top20{margin-top: 20px;}
1605.bottom50{margin-bottom: 50px;}
1606
1607
1608/************ INTERNAL PAGES ************/
1609.surveysView .hero {max-height: 340px;}
1610
1611.badge-dashboard .tier, .badge-dashboard .badge-container {
1612    width: 20%;
1613}
1614
1615/*** CSS BLOCK ***/
1616/*** 404 ***/
1617.title404 {
1618    font-size: 70px;
1619    color: #e61d26;
1620    margin-bottom: 16px;
1621}
1622
1623.hero-desc .mainContent a {
1624    color: #e61d26 !important;
1625}
1626
1627/*** Slide Show***/
1628.slide-container {
1629    position: relative !important;
1630}
1631
1632#slideshow {
1633    margin: 80px auto;
1634    position: relative;
1635    width: 100%;
1636    max-width: 400px;
1637    height: auto;
1638    min-height: 340px;
1639}
1640
1641#slideshow img {}
1642
1643#slideshow > div {
1644    position: absolute;
1645    top: 10px;
1646    left: 10px;
1647    right: 10px;
1648    bottom: 10px;
1649}
1650
1651/*** Video ***/
1652.hero-desc {
1653    z-index: 2;
1654}
1655
1656.promo-blue {
1657    position: relative;
1658    z-index: 2;
1659}
1660
1661/* Style the video: 100% width and height to cover the entire window */
1662#myVideo {
1663    position: absolute;
1664    top: 50%;
1665    left: 50%;
1666    -webkit-transform: translate3d(-50%, -50%, 0);
1667    transform: translate3d(-50%, -50%, 0);
1668    min-width: 100%;
1669    min-height: 100%;
1670    width: auto;
1671    height: auto;
1672    z-index: 0;
1673}
1674
1675@media only screen and (max-width:830px) {
1676    #myVideo {
1677        display: none;
1678    }
1679}
1680
1681.hero {
1682    padding-top: 0px !important;
1683}
1684
1685/*** About ***/
1686.btn-about:hover {
1687    background: #00000000 !important;
1688    border: 1px solid #f5740f !important;
1689    color: #f5740f !important;
1690}
1691
1692@keyframes fadeUp {
1693  0% {
1694     transform: translate3d(0, 1000px, 0);
1695  }
1696  
1697  100% {
1698    transform: translate3d(0, 0, 0);
1699  }
1700}
1701
1702.animate.in-view.l2r {
1703  margin-left:-1000px;
1704   animation-name:l2r;
1705  animation-duration: 1s;
1706  animation-delay: 1s;
1707  animation-iteration-count: 1;
1708  animation-timing-function: ease-in-out;
1709  animation-fill-mode:forwards;
1710}
1711
1712.animate.in-view.r2l {
1713  transform: translate3d(-550px, 0, 0);
1714   animation-name:r2l;
1715  animation-duration: 1s;
1716  animation-delay: 1s;
1717  animation-iteration-count: 1;
1718  animation-timing-function: ease-in-out;
1719  animation-fill-mode:forwards;
1720}
1721
1722.animate.in-view.upDown {
1723  margin-top:56px;
1724   animation-name:upDown;
1725  animation-duration: 1s;
1726  animation-delay: 1s;
1727  animation-iteration-count: 1;
1728  animation-timing-function: ease-in-out;
1729  animation-fill-mode:forwards;
1730}
1731

1732.animate.in-view.fadeUp {
1733  transform: translate3d(0, 1000px, 0);
1734   animation-name:fadeUp;
1735  animation-duration: 2s;
1736  animation-delay: 1s;
1737  animation-iteration-count: 1;
1738  animation-timing-function: ease-in-out;
1739  animation-fill-mode:forwards;
1740}
1741
1742.animate.in-view.opacity {
1743  opacity:0;
1744   animation-name:Opacity;
1745  animation-duration: 2s;
1746  animation-delay: 2s;
1747  animation-iteration-count: 1;
1748  animation-timing-function: ease-in-out;
1749  animation-fill-mode:forwards;
1750}
1751
1752@keyframes l2r {
1753  0% {
1754    margin-left:-1000px;
1755  }
1756  
1757  100% {
1758    margin-left:0px;
1759  }
1760}
1761
1762@keyframes r2l {
1763  0% {
1764    transform:translate3d(498px, 0,0)
1765  } 
1766  
1767  100% {
1768    transform:translate3d(0, 0,0)
1769  }
1770}
1771
1772@keyframes Opacity {
1773  0% {
1774    opacity:0;
1775  }
1776  
1777  100% {
1778    opacity:1;
1779  }
1780}
1781
1782@keyframes bcrRoll {
1783  0% {
1784    transform:scaleX(0);
1785  }
1786  
1787  100% {
1788   transform:scaleX(1);
1789  }
1790}
1791
1792
1793.animate.in-view.bcrRoll:after {
1794  /*background:transparent;*/
1795   animation-name:bcrRoll;
1796  animation-duration: 1s;
1797  animation-delay: 500ms;
1798  animation-iteration-count: 1;
1799  animation-timing-function: ease-in-out;
1800  animation-fill-mode:forwards;
1801}
1802
1803.animate.in-view.bcrRoll:after {
1804  /*background:transparent;*/
1805   animation-name:bcrRoll;
1806  animation-duration: 1s;
1807  animation-delay: 500ms;
1808  animation-iteration-count: 1;
1809  animation-timing-function: ease-in-out;
1810  animation-fill-mode:forwards;
1811}
1812
1813.animate.in-view.titleUp {
1814  background:transparent;
1815  animation-name:titleUp;
1816  animation-duration: 1s;
1817  animation-delay: 2s;
1818  animation-iteration-count: 1;
1819  animation-timing-function: ease-in-out;
1820  animation-fill-mode:forwards;
1821}
1822
1823@keyframes titleUp {
18240% {
1825    transform: translate3d(0, 130%, 0);
1826}
1827100% {
1828    transform: translate3d(0, 0, 0);
1829}
1830}
1831
1832/*** Logo animation ***/
1833.zoom {
1834    transition: transform 1s;
1835}
1836
1837.zoom:hover {
1838    -ms-transform: scale(1.1);
1839    /* IE 9 */
1840    -webkit-transform: scale(1.1);
1841    /* Safari 3-8 */
1842    transform: scale(1.1);
1843}
1844
1845/*** SVG Animation ***/
1846.hero-svg {
1847    width: 100px;
1848}
1849
1850@keyframes loadingAnimation {
1851    0% {
1852        opacity: 0;
1853        r: 0;
1854    }
1855
1856    33% {
1857        opacity: 0.5;
1858        r: 22;
1859    }
1860
1861    100% {
1862        opacity: 1;
1863        r: 44;
1864    }
1865}
1866
1867@keyframes loadingAnimation2 {
1868    0% {
1869        opacity: 0;
1870        r: 10;
1871    }
1872
1873    50% {
1874        opacity: 1;
1875        r: 10;
1876    }
1877
1878    100% {
1879        opacity: 0.95;
1880        r: 10;
1881    }
1882}
1883
1884.t_primary.triggered {
1885    animation: loadingAnimation 2s;
1886    animation-timing-function: ease-in-out;
1887}
1888
1889.t_secondary.triggered {
1890    animation: loadingAnimation2 4s;
1891    animation-timing-function: ease-in-out;
1892}
1893
1894/*** POLL ***/
1895.pds-links-back .pds-return-poll {
1896    color: #E41E26 !important;
1897}
1898
1899.pds-vote-button-load {
1900    border: 1px solid #549ed6 !important;
1901}
1902
1903.miniPoll .pds-votebutton-outer a.pds-vote-button {
1904    color: #000 !important;
1905    background: #549ed6 !important;
1906}
1907
1908.miniPoll .pds-votebutton-outer a.pds-view-results {
1909    color: #E41E26 !important;
1910}
1911
1912/*** Auth OW Cleanup Styling ***/
1913.contentAndLinks-links-link-active {
1914    color: #000;
1915}
1916
1917.dashboardView .hero .hero-desc {
1918    margin-top: 0px;
1919}
1920
1921.hero p {
1922    color: #fff!important;
1923}
1924
1925.dashboardView .hero h1 {
1926    font-size: 36px;
1927font-weight: 700;
1928    line-height: 40px;
1929}
1930
1931.dashboardView .hero h3 {
1932    font-size: 22px;
1933font-weight: 600;
1934    line-height: 25px;
1935}
1936
1937.dashboardView .hero {
1938    min-height: 340px;
1939    padding: 30px 0;
1940    background-repeat: no-repeat;
1941    transition-property: background;
1942    transition-duration: .5s;
1943    height: 55vh;
1944}
1945
1946@media only screen and (max-width: 767px) {
1947    .dashboardView .hero h1 {
1948        font-size: 22px;
1949        font-weight: 500;
1950        line-height: 25px;
1951    }
1952    .dashboardView .hero h3 {
1953        font-size: 17px;
1954        font-weight: 500;
1955        line-height: 18px;
1956    }
1957}
1958
1959.sticky.header icon,
1960.sticky .header-accountInfo-account-link {
1961    color: #000;
1962    fill: #000;
1963}
1964
1965.mobileHeader-content-link.active,
1966.mobileHeader-content-link.active:hover {
1967    background: #549ed6;
1968    color: #000;
1969}
1970
1971.badge-details .tier-row .tier-button.selected {
1972    margin-bottom: 0;
1973    border-bottom: 5px solid #549ed6;
1974}
1975
1976.btn.gray,
1977.button-gray {
1978    border-radius: 10px 0 10px 0 !important;
1979}
1980
1981.rewards-selection-selected:hover {
1982    background: #549ed6;
1983    color: #000;
1984}
1985
1986.buttonSecondary, .buttonPrimary {
1987    color: #000;
1988    font-weight: 700!important;
1989}
1990
1991.rewards-selection-selected .rewards-selection-selected-check {
1992    color: #549ed6;
1993}
1994
1995.hp-unique-right {
1996    color: #000;
1997}
1998
1999/*** Footer Overlap Fix ***/
2000
2001@media only screen and (min-width: 831px) {
2002    .hero-trust {
2003        min-height: 540px!important;
2004    }
2005}
2006
2007/*** Misc ***/
2008
2009.widget-profiler-profilers-list .Household {
2010    color: #000!important;
2011}
2012
2013.loginForm .button-full {
2014    font-weight: 700;
2015    color: #000;
2016}
2017
2018.hero .hero-desc-content a {
2019    color:#fff!important;
2020}
2021
2022/**** Social media Buttons ****/
2023	.google-logo, .facebook-logo {
2024		width:30px;
2025		position:relative;
2026	}
2027	.social-btn-text {
2028		padding-left:10px;
2029		position:absolute;
2030		top: 50%;
2031		transform: translateY(-50%);
2032	}
2033	.upp-google-signin, .upp-facebook-signin {
2034		position:relative;
2035		margin-bottom: 10px;
2036		padding: 5px;
2037		border-radius:5px;
2038		font-weight: bold;
2039		height: 35px;
2040		width: 185px;
2041		display: inline-block;
2042		cursor: pointer;
2043		text-align:center;
2044		margin-left: 5px;
2045		margin-right:5px;
2046	}
2047	.upp-facebook-signin {
2048		background: #4267b2;
2049		color: white;
2050		font-family: Helvetica, Arial, sans-serif;
2051	}
2052    
2053    .upp-google-signin {
2054        background-color: white;
2055        border: 1px solid #dddddd;
2056        font-family: 'Roboto', sans-serif;
2057        color:#000;
2058    }
2059
2060.upp-google-signin a { text-decoration: none; color:#000000; } 
2061.upp-facebook-signin a { text-decoration: none; color:#FFFFFF; } 
2062.fa-facebook-square::before {
2063    color: white;
2064    font-size: 18px;
2065}
2066.fa-google {
2067background: 
2068    linear-gradient(to bottom left,transparent 49%,#fbbc05 50%) 0 25%/48% 40%,
2069    linear-gradient(to top    left,transparent 49%,#fbbc05 50%) 0 75%/48% 40%,
2070  

2071    linear-gradient(-40deg ,transparent 53%,#ea4335 54%),
2072    linear-gradient( 45deg ,transparent 46%,#4285f4 48%),
2073    #34a853;
2074  background-repeat:no-repeat;
2075  -webkit-background-clip: text;
2076  background-clip: text;
2077  color: transparent;
2078  -webkit-text-fill-color: transparent;
2079}
2080
2081.upp-social-buttons {text-align:center;}
2082
2083/**** Not Found ****/
2084
2085.center .container{max-width: 980px; text-align: center; width: 100%; margin: auto}
2086.p404 {color: #323232!important;}
2087.p404 a{color: #e61d26!important;}
2088.d404 .container {width: 800px;}
2089
2090/**** PayPal ****/
2091
2092.rewards-checkout-local-paypal {margin-bottom: 20px;}
2093
2094.rewards-checkout-local-paypal  a {
2095background: #009cde;
2096color: #fff;
2097border-radius: 18px;
2098padding: 7px 20px;
2099margin-bottom: 20px !important;}
2100
2101.rewards-checkout-local-paypal a::before{
2102   content: "\f1ed";
2103   display: inline-block;
2104   padding-right: 3px;
2105   vertical-align: middle;
2106   font-weight:900;
2107  font-family: Font Awesome 6 Free;
2108}
2109
2110/****Badges****/
2111
2112.badge-history-container {
2113    margin-top: 100px !important;
2114}
2115
2116/******* SURVEY WALL CARDS ********/
2117.qualifications .list-group{
2118}
2119.qualifications .list-group-item {
2120  padding-bottom: 50px!important;
2121padding: 0.5rem 0.5rem!important;
2122}
2123
2124
2125.qualifications .list-group-item {
2126  background-color: transparent!important;
2127  border: 0px!important;
2128}
2129
2130.card {
2131  border: 0px!important;
2132  border-radius: 11px!important;
2133box-shadow: 0 0 0.6rem #d1d1d1!important;
2134max-width: 230px!important;
2135}
2136.card-header {
2137  padding: 0!important;
2138  border-radius: 11px 11px 0 0!important;
2139}
2140
2141.card-peak {
2142  background-color: #da001a!important;
2143  height: 7px!important;
2144}
2145
2146.card-text {
2147    margin-bottom: 0!important;
2148    text-align: center!important;
2149    margin: 0 auto!important;
2150    font-size: 30px!important;
2151    font-weight: 900;
2152    background-position-y: 1px;
2153    background-position-x: 2px;
2154    background-image: url(https://darwin-assets.dynata.com/OW/Challenge/OW-points.png);
2155    background-repeat: no-repeat;
2156    background-size: 31px;
2157    color: #0a579d;
2158    padding-left: 27px;
2159    min-height: 44.5px;
2160    line-height: 39px;
2161}
2162
2163.card-text span{
2164    clear: both!important;
2165    font-weight: 700;
2166    padding-top: 2px;
2167    display: inline;
2168    font-size: 30px!important;
2169}
2170
2171.card-text img{
2172vertical-align: baseline!important;
2173    height: 30px!important;
2174display: none;
2175}
2176
2177.qualification-body {
2178    background-color: #F7F7F7!important;
2179    font-family: 'open-sans';
2180    font-weight: 300;
2181    padding-left: 24px;
2182}
2183
2184.qualification-body .mb-2 {
2185  margin-bottom: 0.8rem!important;
2186}
2187
2188.card .btn-primary {
2189  border-radius: 0 0 11px 11px!important;
2190    color: #fff!important;
2191    font-size: 15px!important;
2192    font-weight: 600!important;
2193    padding-top: 10px!important;
2194    padding-bottom: 10px!important;
2195    background-color: #0a579d!important;
2196    border-color: #0a579d!important;
2197  border-color: 0!important;
2198}
2199
2200.card {
2201min-height: 170px;
2202}
2203
2204.card-body row {
2205min-height: 22.5px;
2206}
2207
2208upp-punchcard-list::part(pc-points) {
2209
2210            background-color: #549ED6!important;
2211            font-weight: 700!important;
2212            text-transform: none;
2213        }
2214upp-punchcard-list::part(pc-title) {
2215 text-align: left;
2216font-family: omnes-pro, sans-serif;
2217font-weight: 700;
2218color: #549ED6;
2219}
2220
2221upp-punchcard-list::part(view-details) {
2222text-align: left;
2223font-family: omnes-pro, sans-serif;
2224}
2225
2226upp-punchcard-details-modal::part(modal-badge) {
2227    background-image: url(https://darwin-assets.dynata.com/OW/pop-up-punchcard-badge2x.png);
2228}
2229
2230upp-punchcard-list::part(started-filled-punch) {
2231    color: #ffffff!important;
2232    background-color: #549ED6!important;
2233}
2234
2235upp-punchcard-details-modal::part(modal-activate) {
2236    background-color: #549ed6!important;
2237    color: #000!important;
2238    font-weight: 700 !important;
2239    border: 0px;
2240}
2241
2242upp-punchcard-details-modal::part(modal-activate) {
2243    color: #f5740f!important;
2244    --mdc-theme-primary: rgb(245, 116, 15);
2245    font-weight: 700 !important;
2246}    
2247
2248upp-punchcard-list::part(started-filled-pc-punch), upp-punchcard-list::part(qualified-filled-pc-punch), upp-punchcard-list::part(expired-filled-pc-punch) {
2249
2250background: #ffffff!important;
2251
2252} 
2253
2254
2255/******* CHATBOT BUBBLE FIX ********/
2256
2257#joe-bubble-unread {
2258    font-size: 15px!important;
2259    background-color: #d03601;
2260    margin-top: -30px;
2261    border: none!important; 
2262}
2263
2264
2265#joe-bubble-unread {
2266    position: absolute!important;
2267    color: white;
2268    border-radius: 50%;
2269    right: -23px;
2270    top: 23px;
2271    height: 20px!important;

2272    width: 20px!important;
2273line-height: 19px!important;
2274   
2275}
2276
2277.mobile-chat-container {background-color: #549ED6;}
2278
2279.chat-container .chat-header, .chat-container .joe-faq-header {
2280    background-image: linear-gradient(to right, rgba(84, 158, 214, 1),#549ED6 );
2281}
2282
2283.chat-container .chat-history .other-message {
2284	background: rgb(232, 245, 253);
2285color: rgb(0, 0, 0)!important;
2286}
2287
2288.header-bottom .right-brand-icon span, .joe-agent-pic {
2289	background-image: url(https://darwin-assets.dynata.com/OW/helpwidget-icons_OW-helpwidget-icon.png)!important;
2290}
2291
2292/*** Veriff Styling ***/
2293
2294.veriff_container {
2295    text-align: center;
2296    font-family: proxima-soft, sans-serif!important;
2297    font-size: 16px!important;
2298    font-weight: 300;
2299}
2300
2301.veriff_container p {
2302    color: #000;
2303    font-family: proxima-soft, sans-serif!important;
2304    font-weight: 300;
2305    font-size: 16px;
2306}
2307
2308.veriff_container ol {
2309    padding-inline-start: 17px;
2310    font-weight: 500;
2311    text-align: left;
2312}
2313
2314.veriff_container li {
2315    margin-bottom: 12px;
2316    font-weight: 300;
2317    text-align: left!important;
2318}
2319
2320.veriff_header  {
2321    font-size: 29px;
2322    text-align: center;
2323    color:#125799;
2324    text-shadow: none;
2325font-weight: 700!important;
2326}
2327
2328.v-primary {
2329                background: #549ed6;
2330    border: 2px solid #549ed6;
2331    color: #13252f;
2332    border-radius: 10px 0 10px 0;
2333    text-decoration: none!important;
2334    font-weight: 700;
2335        }
2336
2337        .v-secondary {
2338        background: transparent;
2339    border: 2px solid #549ed6;
2340    color: #549ed6;
2341    border-radius: 10px 0 10px 0;
2342    text-decoration: none!important;
2343    font-weight: 700;
2344}
2345
2346.veriff_container p strong {
2347    line-height: 33px;
2348}
2349
2350
2351
2352@media only screen and (min-width: 481px){
2353.vbutton_container {
2354    display: flex;
2355}
2356
2357.vbtn {
2358    flex: 1;
2359    margin: 20px;
2360}
2361}
2362
2363@media only screen and (max-width: 480px){
2364.vbutton_container {
2365    
2366}
2367
2368.v-secondary {
2369    margin-top: 20px;
2370}
2371}
2372
2373.vheader {
2374    height: 80px;
2375    top: 0;
2376    left: 0;
2377    right: 0;
2378    border-bottom: none;
2379    background: #fff;
2380    box-shadow: 0 0 13px rgb(0 0 0 / 50%);
2381    z-index: 1000;
2382    position: fixed;
2383    display: -webkit-box;
2384    display: -moz-box;
2385    display: box;
2386    display: -webkit-flex;
2387    display: -moz-flex;
2388    display: -ms-flexbox;
2389    display: flex;
2390}
2391    
2392    .vheader img {
2393    max-height: 60px;
2394        width: auto;
2395}
2396    
2397    @media only screen and (max-width: 830px){
2398.vheader img {
2399    max-height: 35px;
2400}
2401        }
2402
2403/***BUTTON COMPLETE REWARDS***/
2404    .rewards-complete-actions-buttons .button-gray {
2405         background: #549ed6;
2406         border: 2px solid #549ed6;
2407         color: #000000;
2408         border-radius: 10px 0 10px 0;
2409         text-decoration: none!important;
2410         font-weight: 700;
2411    }
2412    
2413    .rewards-complete-actions-buttons .button-gray:hover {
2414         background: transparent;
2415         border: 2px solid #549ed6;
2416         color: #549ed6;
2417    }
2418
2419.rewardsView .container-widgets {
2420    margin-top: -30px!important;
2421}
2422
2423 /**** Promotion Wallet *******/
2424
2425
2426rxp-tabs::part(pc-points) {
2427
2428            background-color: #549ED6!important;
2429            font-weight: 700!important;
2430            text-transform: none;
2431        }
2432rxp-tabs::part(pc-title) {
2433text-align: left;
2434font-family: omnes-pro, sans-serif;
2435font-weight: 700;
2436color: #549ED6;
2437}
2438
2439rxp-tabs::part(view-details) {
2440text-align: left;
2441font-family: omnes-pro, sans-serif;
2442}
2443
2444upp-punchcard-details-modal::part(modal-badge) {
2445    background-image: url(https://darwin-assets.dynata.com/OW/pop-up-punchcard-badge2x.png);
2446}
2447
2448rxp-tabs::part(started-filled-punch), rxp-tabs::part(qualified-filled-punch), rxp-tabs::part(expired-filled-punch), rxp-tabs::part(credited-filled-punch) {
2449    color: #ffffff!important;
2450    background-color: #549ED6!important;
2451}
2452
2453upp-punchcard-details-modal::part(modal-activate) {
2454    background-color: #549ed6!important;
2455    color: #000!important;
2456    font-weight: 700 !important;
2457    border: 0px;
2458}
2459
2460rxp-tabs::part(modal-activate) {
2461    background-color: #549ed6!important;
2462    color: #000!important;
2463    font-weight: 700 !important;
2464    border: 0px;
2465}    
2466
2467rxp-tabs::part(started-filled-pc-punch), rxp-tabs::part(qualified-filled-pc-punch), rxp-tabs::part(expired-filled-pc-punch), rxp-tabs::part(credited-filled-pc-punch) {
2468
2469background: #ffffff!important;
2470
2471} 
2472
2473rxp-tabs::part(tab-active) {
2474color: #0a579d!important;
2475border-bottom: 5px solid #0a579d!important;
2476}
2477
2478rxp-tabs::part(tab-nav-container) {
2479border-bottom: none;
2480}
2481
2482
2483rxp-tabs::part(punchcard-no-promotions-message) {
2484padding: 50px;
2485    text-align: center;
2486    font-size: 17px;
2487    background: #E6F5FF;
2488    border-radius: 5px;
2489}   
2490
2491 .card-peak .high-reward-header-label svg,  .card-peak .recommended-header-label svg,  .card-peak .quick-header-label svg { 
2492position: absolute; top: 0; right: 0;

2492 width:65px} 
2493
2494.card-peak .high-reward-header-label { 
2495text-align: center; font-size: 15px; background-color: #000000; width: 100%; height: 100%; color: #ffffff; line-height: 25px; text-transform: uppercase; } 
2496
2497.card-peak .recommended-header-label { 
2498text-align: center; font-size: 15px; background-color: #E41E26; width: 100%; height: 100%; color: #ffffff; line-height: 25px; text-transform: uppercase; } 
2499
2500.card-peak .quick-header-label { 
2501text-align: center; font-size: 15px; background-color: #125799; width: 100%; height: 100%; color: #ffffff; line-height: 25px; text-transform: uppercase; } 
2502
2503.card-header {
2504border-bottom: none!important; height: 25px!important;} 
2505
2506.card {
2507overflow: hidden;}
2508
2509
2510/**.quick .card-body-loi .col-md-2 {
2511    background-image: url(https://darwin-assets.dynata.com/OO/quick-time-2x.png) !important;
2512    background-size: 20px;
2513    background-repeat: no-repeat;
2514    background-position: 10px;
2515}**/
2516
2517/** Cognito Styling **/
2518
2519.rxp .auth-title h2 {
2520    margin-bottom: 20px;
2521    font-size: 32px;
2522}
2523
2524.rxp .auth-button-back {
2525}
2526
2527.rxp .auth-button-submit {
2528    float: left;
2529    background: #549ed6!important;
2530        border: 2px solid #549ed6!important;
2531        color: #ffffff!important;
2532        border-radius: 10px 0 10px 0!important;
2533        text-decoration: none !important;
2534        padding: 8px 32px;
2535}
2536
2537.rxp .auth-button-submit:hover {
2538    background: transparent!important;
2539        border: 2px solid #549ed6!important;
2540        color: #549ed6!important;
2541}
2542
2543.rxp .auth-button-forgot-password, .rxp .auth-button-back {
2544        float: right!important;
2545            background: none!important;
2546            border: none!important;
2547            text-decoration: underline!important;
2548            color: #3C76B4!important;
2549            font-weight: 700!important;
2550}
2551
2552.rxp .btn:disabled,
2553.rxp .btn.disabled,

2554fieldset:disabled .rxp .btn {
2555        color: #aeaeae !important;
2556            background-color: #f4f4f4 !important;
2557            border-color: #aeaeae !important;
2558    opacity: 1;
2559}
2560
2561.rxp .auth-buttons-bottom {
2562    padding: 10px 0;
2563}
2564
2565.rxp .auth-input {
2566    margin-bottom: 20px;
2567}
2568
2569.modal .auth-title .login-logo-container .img-logo {
2570    display: none;
2571}
2572
2573.cognito-change-password h3 {
2574    font-size: 23px;
2575        font-weight: 600;
2576        text-align: left;
2577        margin: 0 0 30px;
2578}
2579
2580.cognito-change-password p {
2581    line-height: 1.5em;
2582    text-align: left;
2583}
2584
2585.cognito-change-password .auth-button-submit {
2586    font-weight: 700!important;
2587}
2588
2589.error-text {
2590    margin-top: -10px;
2591    display: block;
2592    padding-top: 0;
2593    padding-bottom: calc(0.375rem + 1px);
2594    margin-bottom: 0;
2595    font-size: inherit;
2596    line-height: 1.5;
2597}
2598
2599@media (max-width: 440px) {
2600
2601.error-text {
2602    padding-top: 0;
2603    padding-bottom: calc(0.375rem + 1px);
2604    margin-bottom: 0;
2605    font-size: inherit;
2606    line-height: 1.5;
2607}
2608
2609.cognito-change-password .error-text {
2610    float: right;
2611    display: inline;
2612    padding-top: calc(0.375rem + 1px);
2613    padding-bottom: calc(0.375rem + 1px);
2614    margin-bottom: 0;
2615    font-size: inherit;
2616    line-height: 1.5;
2617}
2618    
2619}
2620
2621.rxp .cognito-modal .modal-content {
2622    margin: 0px;
2623    padding: 20px;
2624}
2625
2626/********* TILES MOBILE RESIZING ***************/
2627@media only screen and (max-width:600px) {
2628    .scroll-left, .scroll-right {
2629        display: none!important;
2630        visibility: hidden!important;
2631    }
2632
2633    .ow .qualifications .qualification-item {
2634        margin-left: 20px;
2635        margin-right: 20px;
2636        display: flex;
2637    }
2638
2639    .ow .qualifications .list-group-horizontal {
2640        flex-direction: column;
2641        justify-content: center;
2642        align-content: center;
2643        flex-wrap: wrap;
2644        flex: 1;
2645        display: flex;
2646    }
2647
2648    .ow .qualifications .list-group-horizontal>.list-group-item{
2649        width: 100%;
2650    }
2651
2652    .ow .qualifications .list-group-horizontal .list-group-item .card {
2653        max-width: 700px!important;
2654        width: 100%;
2655    }
2656
2657    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body{
2658        padding: 5px!important;
2659    }
2660
2661    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2662        background-position: 30% 50%;
2663    }
2664
2665    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2666        display: flex;
2667        flex-direction: row;
2668        flex-wrap: wrap;
2669        justify-content: center;
2670        align-items: center;
2671        background-color: #F1F1F1!important;
2672        min-height: 41px;
2673        position: relative;
2674    }
2675
2676    .ow .qualifications .list-group-horizontal .list-group-item .card .row {
2677        /*flex: 1 1;*/
2678        flex-direction: row;
2679        justify-content: center;
2680        /*margin: 3px!important;*/
2681    }
2682
2683    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-topic{
2684        flex: 2 1;
2685    }
2686
2687    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-loi{
2688        flex: 1 1;
2689        padding: 0 10px;
2690    }
2691
2692    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2693        padding-left: 30px!important;
2694        background-color: #fff;
2695        /*border-radius: 50px;*/
2696        border-radius: 15px;
2697        /*padding-top: 3px;*/
2698        mask: radial-gradient(20px at 0px 15px,#0000 98%,#000)!important;
2699        margin-left: -20px!important;
2700        display: flex;
2701        align-items: center;
2702    }    
2703
2704    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-2 {
2705        float: right;
2706        background-color: #fff;
2707        border-radius: 50px;
2708        outline:5px solid #F1F1F1;
2709        width: 30px!important;
2710        height: 30px!important;
2711        padding-left: 10px!important;
2712        background-position: center!important;
2713        z-index: 99;
2714    }
2715
2716    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10, .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-topic .col-md-10 {
2717        padding-right: 10px!important;
2718    }
2719
2720    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2721        height: 30px!important;
2722        width: fit-content!important;
2723    }
2724
2725    .ow .qualifications .list-group-horizontal .list-group-item .card .btn-primary {
2726        padding-top: 5px!important;
2727        padding-bottom: 5px!important;
2728    }
2729}
2730
2731@media only screen and (min-width:436px) and (max-width:476px) {
2732    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2733        white-space: nowrap;
2734        overflow: hidden;
2735        text-overflow: ellipsis;
2736        max-width: 69px;
2737    }
2738}
2739
2740@media only screen and (max-width:435px) {
2741    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2742        background-position: 16% 50%;
2743    }
2744
2745    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2746        /*border-radius: 5px;*/
2747        min-height: 30px;
2748        mask: none;
2749        margin-left: 0px;
2750        padding-left: 30px!important;
2751        width: fit-content!important;
2752    }
2753
2754    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2755        min-height: 48px;
2756    }
2757
2758    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body > * {
2759        animation: 8s autoplay6 infinite linear;
2760        position: absolute; 
2761        opacity: 0.0;
2762        width: 100%;
2763    }
2764