span.intro { display: block; margin-top: 0; margin: 1em 1.579em; text-align: center; overflow: hidden } .ar14-annual-report .reporting-module-slp .inner .content > span.intro:before { background: rgba(255, 255, 255, 0.25); content: ""; display: block; height: 1px; margin: 0 auto 1.5em; transition: width ease 0.3s; width: 1.875em } .ar14-annual-report .reporting-module-slp .inner .content ol li .sub-content p { font-size: .875rem } .ar14-annual-report .reporting-module-slp .inner.wellbeing .title h3:before { content: "\e02a" } .ar14-annual-report .reporting-module-slp .inner.inner.environment .title h3:before { content: "\e02c" } .ar14-annual-report .reporting-module-slp .inner.inner.livelihoods .title h3:before { content: "\e02b" } .ar14-annual-report .reporting-module-slp .inner.wellbeing .title h3, .ar14-annual-report .reporting-module-slp .inner.environment .title h3, .ar14-annual-report .reporting-module-slp .inner.livelihoods .title h3 { padding-top: 1em } .ar14-annual-report .reporting-module-slp .inner .content > span.intro p { min-height: 145px } .ar14-palette04 .ar14-close a:before { background-position: 0 -8px } .ar14-palette05 .ar14-close a:before { background-position: 0 -43px } .ar14-palette06 .ar14-close a:before { background-position: 0 -78px } .ar14-palette07 .ar14-close a:before { background-position: 0 -116px } .ar14-palette08 .ar14-close a:before { background-position: -33px 27px } .ar14-palette09 .ar14-close a:before { background-position: -33px -7px } .ar14-palette10 .ar14-close a:before { background-position: -33px -43px } .ar14-palette11 .ar14-close a:before { background-position: -33px -80px } .ar14-uslp-details.ar14-palette04 { border-color: #085f8a } .ar14-uslp-details.ar14-palette05 { border-color: #0b7b67 } .ar14-uslp-details.ar14-palette06 { border-color: #0a6e39 } .ar14-uslp-details.ar14-palette07 { border-color: #57831d } .ar14-uslp-details.ar14-palette08 { border-color: #83751d } .ar14-uslp-details.ar14-palette09 { border-color: #bc4d0c } .ar14-uslp-details.ar14-palette10 { border-color: #9d0620 } .ar14-uslp-details.ar14-palette11 { border-color: #6a0617 } .ar14-location { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; background-color: #e5f2f8; padding: 20px 0; margin-bottom: 30px } .ar14-location .ar14-map { text-align: center; width: 44% } .ar14-location .ar14-map img { width: 100%; height: auto } .ar14-location-ops { padding-left: 20px } .ar14-biz-model { margin-bottom: 2em } .ar14-car-biz-model { text-align: center; width: 100%; margin: 0 auto 50px auto } .ar14-biz-model .ar14-biz-model-slide img { width: 90%; height: 90% } .ar14-biz-model-details { text-align: left; padding: 1.5em 3.5em .5em 3.5em; margin: auto } .ar14-biz-model-details h3, .ar14-biz-model-details h4 { font-size: 1.25em; line-height: 110%; margin-top: 0 } .ar14-biz-model-details h3 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #004976 } .font--arial .ar14-biz-model-details h3 { font-family: Arial, Helvetica, sans-serif } .ar14-biz-model-details h4 { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; text-transform: none } .font--arial .ar14-biz-model-details h4 { font-family: Arial, Helvetica, sans-serif } .ar14-car-biz-model .first { margin-bottom: 30px } .slidelinks { display: none } .slidelinks a, .slidelinks a:link, .slidelinks a:visited { left: 50%; margin-left: -232px; overflow: hidden; position: absolute; height: 505px; top: 0; text-indent: 465px; width: 465px; z-index: 1000 } .slidelinks a.inner-ring { border-radius: 100%; height: 260px; margin: 120px 0 0 -130px; width: 260px; z-index: 1000 } .slidelinks a.ring { border-radius: 100%; height: 160px; margin: 170px 0 0 -80px; width: 160px; z-index: 3000 } .ar14-focus { overflow: hidden; background: url("../images/ara/ar14_strat_focus_lozenge.png") no-repeat scroll center bottom/100% 15% #e5f2f8; padding: 0 0 50px 0; margin-bottom: 3em } .ar14-focus h3 { padding: 30px 0 0 30px; background: url("../images/ara/ar14_bg_hr.png") no-repeat scroll 0 top/100% 5px #e5f2f8 } .ar14-focus-lines { border: 3px solid #007dbb; border-radius: 10px; background-color: #e5f2f8; margin: 95px auto 50px auto; padding: 15px 0 90px; width: 85% } .ar14-focus-int { margin-top: -100px } .ar14-focus-lg-col .ar14-focus-int { margin-top: -150px } .ar14-focus-md-col h4 { background-color: #017dbb; border-radius: 10px; color: #fff; margin-bottom: 10px; padding: 20px 18px; text-align: center } .ar14-focus-mdtop-col, .ar14-focus-mdlower-col { border-top: 3px solid #007dbb; float: left; width: 50%; margin-bottom: 50px; position: relative; z-index: 500 } .ar14-holder-above { background-color: #e5f2f8; border-radius: 50%; margin: 0 auto; width: 160px; position: relative; z-index: 700 } .ar14-focus-blocker { background-color: #e5f2f8; display: block; height: 6px; left: -1px; margin-top: 0; top: -5px; width: 50%; position: relative; z-index: 600 } .ar14-focus-mdtop-col.second .ar14-focus-blocker { display: none } .ar14-focus-mdlower-col.third .ar14-focus-blocker { float: right; left: 0; right: 0; top: -84px } .ar14-focus-mdlower-col .ar14-focus-holder { margin-top: -80px } .ar14-focus-mdtop-col { margin-top: 0; border-top: none } .ar14-focus-mdtop-col .ar14-holder-above { background-color: transparent } .ar14-focus-mdtop-col.second { border-top: none; margin-top: 0 } .ar14-focus-mdtop-col ul, .ar14-focus-mdtop-col .ar14-accordion, .ar14-focus-mdlower-col ul, .ar14-focus-mdlower-col .ar14-accordion { width: 68.01%; margin: 0 auto } .ar14-hor-spacer { padding: 40px 0 } .ar14-focus-lg-col { background-color: #007dbb; border-radius: 10px; margin: -130px auto 20px; width: 70% } .ar14-focus-lg-col h4 { text-align: center; padding: 30px 35px 10px 35px; color: #fff } .ar14-focus-lg-col p { padding: 0 30px 30px 30px; color: #fff } .ar14-focus-holder { background-color: #007dbb; border-radius: 50%; color: #fff; height: 160px; width: 160px; margin: auto; position: relative; overflow: visible } .ar14-focus-holder h4 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: transparent; color: #fff; line-height: 122%; text-transform: uppercase; padding: 45px 0 10px; width: 120px; text-align: center; margin: auto } .font--arial .ar14-focus-holder h4 { font-family: Arial, Helvetica, sans-serif } .ar14-focus-holder h4, .ar14-focus-lg-col h4 { font-size: 1.125em } .ar14-focus-holder h4.element3 { left: 12%; padding: 0; position: absolute; text-align: center; top: 22%; width: 120px } .ar14-focus-holder h4.element4 { padding-top: 62px } .ar14-focus-holder span { display: block; position: absolute; bottom: -10px; left: 50%; border-left: solid 3px #007dbb; width: 1px; height: 10px } .ar14-focus-lines ul { margin-top: 10px; padding: 20px; background-color: #fff; clear: both } .ar14-focus-lines ul li { font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; margin-bottom: 10px; color: #007dbb; background: none; list-style-type: none } .ar14-focus-lines ul li:last-of-type { margin-bottom: 0 } .ar14-focus-lines p.read-more { padding-bottom: 0; margin-bottom: 0 } .ar14-toggleall { text-align: right; width: 100% } .ar14-inner { height: 290px } .ar14-accordion .ar14-panelheader { background-color: #fff } .ar14-accordion .ar14-panelheader p.read-more { margin-bottom: 0 } .ar14-col-uslp .ar14-accordion .ar14-panelheader { background-color: transparent } .ar14-col-uslp .ar14-accordion .ar14-panelbody { background-color: transparent } .ar14-accordion .ar14-panelheader p.ar14-uslp-sleeve a { color: #fff; display: block; width: 100% } .ar14-accordion .ar14-panelheader p.ar14-uslp-sleeve a span { position: relative; left: -9999em; width: 1; height: 1 } .ar14-accordion .ar14-panelheader p.ar14-uslp-sleeve a:before { background-position: -88px -150px; bottom: 28px; left: 45%; padding: 15px; position: absolute } .ar14-accordion .ar14-panelheader p.ar14-uslp-sleeve a.open:before { background-position: -88px -103px } .ar14-uslp-mainnotes { margin-bottom: 2.5em } .ar14-uslp-mainnotes p.read-more a, .ar14-focus-lines p.read-more a, .ar14-accordion .ar14-panelheader h4 a, .ar14-accordion .ar14-panelheader h3 a { display: block; padding: 10px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-family: Arial, sans-serif } .ar14-accordion .ar14-panelheader h4 a, .ar14-accordion .ar14-panelheader h3 a { border-bottom: none } .ar14-panelbody { background: url("../images/ara/ar14_bg_hr.png") no-repeat 0 0/96% 6px #eee; padding: 0 20px 20px; border-bottom: solid 1px #ccc } .ar14-focus .ar14-panelbody { padding-top: 14px } .ar14-panelbody .ar14-col-10 { float: none; padding-top: 1em } .ar14-disclaimer .ar14-panelbody { border-top: none; border-bottom: none; padding-right: 15%; padding-top: 1.5em; border-radius: 0 } .ar14-disclaimer .ar14-panelbody p:last-of-type { padding-top: 0 } .ar14-disclaimer .ar14-panelheader h4, .ar14-disclaimer .ar14-panelheader h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1em; letter-spacing: normal; margin: 0; padding: 0; text-transform: none } .ar14-related-content h2.main { padding-bottom: 10px } .ar14-linklist ul { border-top: none; clear: both; list-style: outside none none; margin-bottom: 0; padding: 0 !important } .ar14-linklist ul li { border-bottom: 1px solid #ddd; padding-bottom: 0 } .ar14-linklist ul li > a:before { content: "\e021"; display: inline; font-family: "unilever-iconfont"; font-size: 0.75em; font-style: normal; font-variant: normal; font-weight: normal; left: 1em; position: absolute; text-transform: none; top: 1.55em; transition: all 0.3s ease 0s } .ar14-linklist ul li > a { color: #007dbb; display: block; line-height: 1.4; overflow: hidden; padding: 0.9em 1em 0.8em 1.8em !important; position: relative; transition: all 0.3s ease 0s; box-shadow: 0 6px 6px -9px transparent } .ar14-linklist ul li > a:hover { background: none repeat scroll 0 0 #fafafa; box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.5); color: #004976 } .ar14-linklist ul li > a:hover:before { margin-left: -0.2em } .ar14-accordion .ar14-panelheader p.read-more a, .ar14-accordion .ar14-panelheader h4 a, .ar14-accordion .ar14-panelheader h3 a { background: white !important; color: #007dbb; cursor: pointer; display: block; position: relative; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 5px 20px 5px 0; text-transform: none; font-size: 0.9375em; letter-spacing: normal; line-height: 1.6; transition: 0.3s ease } .ar14-accordion .ar14-panelheader p.read-more a { padding-left: 15px } .ar14-accordion .ar14-panelheader p.read-more a:before, .ar14-accordion .ar14-panelheader h4 a:before, .ar14-accordion .ar14-panelheader h3 a:before { content: "\e025"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: inline; font-size: 0.8em; display: block; position: absolute; right: 10px; top: 10px; transition: 0.3s ease } .ar14-accordion .ar14-panelheader p.read-more a:before { right: 20px } .ar14-accordion .ar14-panelheader h4 a:hover, .ar14-accordion .ar14-panelheader h4 a:focus, .ar14-accordion .ar14-panelheader h4 a.open, .ar14-accordion .ar14-panelheader h3 a:hover, .ar14-accordion .ar14-panelheader h3 a:focus, .ar14-accordion .ar14-panelheader h3 a.open, .ar14-accordion .ar14-panelheader p.read-more a:hover, .ar14-accordion .ar14-panelheader p.read-more a:focus, .ar14-accordion .ar14-panelheader p.read-more a.open { color: #004976 } .ar14-accordion .ar14-panelheader h4 a.open:before, .ar14-accordion .ar14-panelheader h3 a.open:before, .ar14-accordion .ar14-panelheader p.read-more a.open:before { content: "\e01f" } .ar14-disclaimer .ar14-accordion .ar14-panel.last .ar14-panelheader h4 a, .ar14-disclaimer .ar14-accordion .ar14-panel.last .ar14-panelheader h3 a { border-bottom: solid 1px #ccc } .ar14-disclaimer .ar14-accordion .ar14-panel.last .ar14-panelbody { border-bottom: solid 1px #ccc } .ar14-panelbody h3, .ar14-panelbody h4, .ar14-panelbody h5 { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; padding-bottom: 10px; color: #333; font-size: 1em; text-transform: none } .font--arial .ar14-panelbody h3, .font--arial .ar14-panelbody h4, .font--arial .ar14-panelbody h5 { font-family: Arial, Helvetica, sans-serif } .ar14-panelbody h4, .ar14-panelbody h5 { margin-top: 0 } .ar14-focus-lg-col h4, .ar14-focus-lg-col h3 { text-align: center; padding: 30px 35px 0 35px; color: #fff } .ar14-focus-lg-col p { padding: 0 35px 35px 35px; color: #fff } .ar14-markets { margin-bottom: 30px } .ar14-value .ar14-tabcontent { padding-bottom: 30px } .ar14-value .tabbeditems .tab.ar14-palette-01 a.lit, .ar14-value .tabbeditems .tab.ar14-palette-01 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-01 a:focus { color: #008264; border-color: #008264 } .ar14-value .tabbeditems .tab.ar14-palette-01 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-01 a:focus { color: #008264 } .ar14-value .tabbeditems .tab.ar14-palette-02 a.lit, .ar14-value .tabbeditems .tab.ar14-palette-02 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-02 a:focus { color: #702f8a; border-color: #702f8a } .ar14-value .tabbeditems .tab.ar14-palette-02 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-02 a:focus { color: #702f8a } .ar14-value .tabbeditems .tab.ar14-palette-03 a.lit, .ar14-value .tabbeditems .tab.ar14-palette-03 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-03 a:focus { color: #bf0d3e; border-color: #bf0d3e } .ar14-value .tabbeditems .tab.ar14-palette-03 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-03 a:focus { color: #bf0d3e } .ar14-value .tabbeditems .tab.ar14-palette-04 a.lit, .ar14-value .tabbeditems .tab.ar14-palette-04 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-04 a:focus { color: #003e6a; border-color: #003e6a } .ar14-value .tabbeditems .tab.ar14-palette-04 a:hover, .ar14-value .tabbeditems .tab.ar14-palette-04 a:focus { color: #003e6a } .ar14-big-number-unit.circular { width: 110px; height: 110px; border: dotted 1px #702f8a; border-radius: 50%; margin: 0 auto } .ar14-big-number-unit.circular .figure { text-align: center; padding-top: 35px } .ar14-downloads { border-top: 5px solid #007dbb; margin-bottom: 30px } .ar14-downloads h3 { font-size: 1.375em } .ar14-downloads-mini { background: url("../images/ara/ar14_bg_hr.png") no-repeat scroll 0 top/100% 6px #fff } .ar14-downloads .ar14-col-5 { padding-top: 30px } .ar14-downloads .ar14-col-4 { width: 32.555555555555555555555555555556%; margin-right: 0; padding-left: 2.0833333333333333333333333333333%; padding-right: 2.0833333333333333333333333333333% } .ar14-downloads .ar14-col-7 { margin-top: -40px } .ar14-downloads .ar14-col-7 img { margin-bottom: 1.5em } .ar14-downloads .ar14-col-4.one { padding-left: 0 } .ar14-downloads .ar14-col-4.two { border-left: solid 1px #ccc; border-right: solid 1px #ccc } .ar14-downloads .ar14-col-4 img { margin: 1.5em 0 } .ar14-downloads .ar14-col-4.end { border-right: none; padding-right: 0px } .ar14-download-item a { padding-left: 20px; display: block; color: #007dbb; position: relative } .ar14-download-item a:before { padding: 10px; background-position: -39px -32px; overflow: hidden; position: absolute; top: 0; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0); transition-duration: 0.1s; transition-property: -webkit-transform; transition-property: transform; transition-timing-function: ease-out } .ar14-download-item a span { display: block; color: #666 } .ar14-download-item a:hover, .ar14-download-item a:active, .ar14-download-item a:focus { color: #004976; text-decoration: none } .ar14-download-item a:hover:before, .ar14-download-item a:active:before, .ar14-download-item a:focus:before { -webkit-transform: translate(-4px); transform: translate(-4px); transition: all 0.3s ease } .ar14-annual-report .bx-controls { position: relative; width: 100% } .turnedoff { border: medium none; height: 0; overflow-y: hidden } .tabcontent.active { height: auto; overflow: visible } .ar14-annual-report .bx-viewport:before, .ar14-annual-report .bx-viewport:after { background: none; border: none } .ar14-annual-report .bx-wrapper { margin: 0 auto } .ar14-annual-report .bx-viewport { width: 100%; overflow: hidden; position: relative; height: auto } .ar14-annual-report .bx-default-pager .bx-pager-item .bx-pager-link { height: 14px; width: 14px } .ar14-annual-report .owl-prev, .ar14-annual-report .owl-next { color: #007dbb; display: block } .ar14-car-brands { width: 100%; margin: 0 auto 0; overflow: hidden } .ar14-brand-slide { padding-bottom: 2em } .ar14-car-brands div.ar14-brand-slider { float: left } .visible { overflow: visible } .ar14-foot { position: relative; width: 100%; clear: both; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1 } .ar14-foot p { padding: 0; margin: 0; text-align: right; float: right } .ar14-foot a { background-color: #eee; border-radius: 10px 0 0 0; display: block; line-height: 10px; padding: 0; text-decoration: none; width: 50px; height: 46px; overflow: hidden; transition: width .5s ease-in-out 0s; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25) } .ar14-foot a span { opacity: 0; text-align: left; line-height: 14px; height: 25px; display: block; position: relative; z-index: 500; width: 108px; padding-top: 5px } .ar14-foot a:before { background-position: 10px -83px; padding: 16px 22px; z-index: 600; background-color: #eee } .ar14-foot .ar14-back-up.ar14-bottom a:before { background-color: #fff } .ar14-foot .ar14-bottom a, .ar14-foot a:hover, .ar14-foot a:focus { background-position: 10px -83px; background-color: #ffffff; width: 140px; transition: background-color 0.5s ease, width 0.3s ease-in-out 0s } .ar14-foot .ar14-bottom a:active:before, .ar14-foot a:hover:before, .ar14-foot a:focus:before { transition: background-color 0.5s ease; background-color: #fff } .ar14-foot .ar14-bottom a span { padding-left: 10px; opacity: 1 } .ar14-foot .ar14-bottom a:active span, .ar14-foot .ar14-bottom a:hover span, .ar14-foot .ar14-bottom a:focus span, .ar14-foot a:hover span, .ar14-foot a:focus span { padding-left: 10px; -webkit-animation: fadeTopLink 0.5s ease; -ms-animation: fadeTopLink 0.5s ease; animation: fadeTopLink 0.5s ease; opacity: 1 } #financial .bx-controls-direction .bx-prev { left: -7% } #financial .bx-controls-direction .bx-next { right: -6% } #non-financial .bx-controls-direction .bx-prev { left: -9% } #non-financial .bx-controls-direction .bx-next { right: -8% } #ar14-brands .bx-controls-direction .bx-prev { left: -7% } #ar14-brands .bx-controls-direction .bx-next { right: -6% } @-webkit-keyframes fadeTopLink { 0% { opacity: 0; padding-left: 10px } 25% { opacity: 0; padding-left: 10px } 100% { opacity: 1; padding-left: 10px } } @media screen and (max-width: 1600px) { .ar14-foot p { right: 20% } } .no-js .tabcontent { margin-bottom: 0; padding-bottom: 1em } .no-js .ar14-uslp-details { margin-bottom: 1em } .no-js .ar14-kpis #financial { background: none } .ar14-header-extra { display: none } .no-js .ar14-header-orig { display: none } .no-js .ar14-header-extra { display: block; margin-bottom: 20px; border-bottom: 1px solid #ccc } .no-js .ar14-car-financial, .no-js .ar14-car-nonfinancial { width: 100% } .no-js .ar14-car-financial .slide-content, .no-js .ar14-car-nonfinancial .slide-content { float: left; width: 33%; padding-left: 0; margin-right: 0 } .no-js .ar14-car-nonfinancial .slide-content.three { clear: right } .no-js .ar14-car-financial .slide-content.four, .no-js .ar14-car-nonfinancial .slide-content.four { clear: left } .no-js .ar14-car-nonfinancial .slide-content.seven { clear: both } .no-js .ar14-kpis .tabbeditems.ar14-header-orig .ar14-palette02 { display: none } .no-js .ar14-kpis .tabbeditems.ar14-repeat-header .ar14-palette02 { display: block } .no-js .ar14-car-brands { height: auto; margin-bottom: 2em; overflow: hidden; width: 100% } .no-js .ar14-car-brands div { float: left; width: 15%; margin-right: 15px } .no-js .ar14-car-biz-model div.first { display: none } .no-js .ar14-value .ar14-header-extra h3.ar14-palette03, .no-js .ar14-value .ar14-header-extra h3.ar14-palette04 { color: #bf0d3e; border-bottom: 5px solid #bf0d3e; display: inline-block; padding-bottom: 0; width: auto } .no-js .ar14-value .ar14-header-extra h3.ar14-palette04 { color: #003e6a; border-color: #003e6a } .no-js .ar14-header-extra h3.ar14-palette02 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; border-bottom: 5px solid; display: inline-block; padding-bottom: 0; width: auto; font-size: 1.25em; text-transform: uppercase } .font--arial .no-js .ar14-header-extra h3.ar14-palette02 { font-family: Arial, Helvetica, sans-serif } .no-js .ar14-foot p { margin-bottom: -32px } .no-js .ar14-toggleall { display: none } .no-js .ar14-focus-lines p.read-more { padding-left: 20px } .tabcontentwrapper { width: 100%; clear: both } .ar14-uslp .tabcontentwrapper { padding-top: 40px } .ar14-uslp ul li a.lit:after { background: url("../images/ara/ar14_uslp_arr_box.png") no-repeat center bottom transparent; padding-bottom: 40px } @media (min-width: 1500px) { .ar14-header-holder h2 { font-size: 3.8em } .ar14-biz-model .ar14-biz-model-slide img { width: 60% } .ar14-annual-report #financial .bx-controls { top: 67px !important } .ar14-annual-report #non-financial .bx-controls { top: 105px } #financial .bx-controls-direction .bx-prev { left: -7% } #financial .bx-controls-direction .bx-next { right: -6% } } @media (max-width: 1499px) { .ar14-internal-nav ul li a { padding-left: 3px; padding-right: 3px } .ar14-focus-mdtop-col ul, .ar14-focus-mdtop-col .ar14-accordion, .ar14-focus-mdlower-col ul, .ar14-focus-mdlower-col .ar14-accordion { width: 80% } #financial .bx-viewport, #non-financial .bx-viewport { width: 90% !important } .ar14-annual-report .reporting-module-slp .inner { min-height: 380px } .ar14-annual-report .reporting-module-slp .inner .content ol li h4 { font-size: 1.05em } .ar14-annual-report .reporting-module-slp .inner.livelihoods .title h3 { padding-bottom: 1.2em } .ar14-car-financial .slide-content.three .ar14-big-number-unit p.year { margin-top: 40px } .ar14-car-nonfinancial .slide-content.one .ar14-big-number-unit p.year { margin-top: 30px } .ar14-car-nonfinancial .slide-content.three .ar14-big-number-unit p.year { margin-top: 3px } .ar14-car-nonfinancial .slide-content.six { padding-top: 5.6em } .ar14-annual-report #financial .bx-controls { top: 90px !important } #financial .bx-controls-direction .bx-prev { left: -11% } #financial .bx-controls-direction .bx-next { right: -10% } #non-financial .bx-controls-direction .bx-prev { left: -17% } #non-financial .bx-controls-direction .bx-next { right: -16% } #ar14-brands .bx-controls-direction .bx-prev { left: -10% } #ar14-brands .bx-controls-direction .bx-next { right: -9% } } @media (min-width: 1001px) { .ar14-internal-nav ul { clear: both; overflow: hidden; text-align: center } .ar14-internal-nav ul li { width: 20%; float: left; display: block } .ar14-internal-nav ul li a { border-right: solid 1px #eee } .ar14-internal-nav { width: 100% } } @media (max-width: 1018px) { .ar14-internal-nav.mobilestick { width: 75%; left: 25% } .ar14-internal-nav.mobilestick ul li a { padding-left: 20px; padding-right: 20px; border-bottom: solid 1px #eee; border-right: none } .ar14-internal-nav ul li a.last { border-bottom: none } .ar14-internal-nav ul { background-position: 0 bottom } .ar14-banner-holder:after { background-size: 100% 98.5% } .ar14-annual-report .reporting-module-slp .inner.wellbeing .title h3, .ar14-annual-report .reporting-module-slp .inner.environment .title h3, .ar14-annual-report .reporting-module-slp .inner.livelihoods .title h3 { height: 80px } .ar14-annual-report #non-financial .bx-controls { top: 128px !important } } @media (max-width: 999px) { .ar14-internal-nav { width: 100% !important } .ar14-internal-nav.mobilestick { width: 75% !important } .ar14-internal-nav-wrapper { height: 267px !important } .ar14-focus-lines { width: 90% } .ar14-annual-report .reporting-module-slp .inner .content ol li h4 { font-size: .9em; margin: 0 1em } .ar14-car-financial .ar14-big-number-unit { padding-right: 3em !important } } @media (max-width: 989px) { #ar14-brands .bx-controls-direction .bx-prev { left: -13% } #ar14-brands .bx-controls-direction .bx-next { right: -12% } } @media (max-width: 980px) { .ar14-focus { background-size: 100% 120px } .ar14-download-mobileimg { display: block } .ar14-download-defaultimg { display: none } .ar14-downloads .ar14-col-4, .ar14-downloads .ar14-col-5, .ar14-downloads .ar14-col-7 { width: 100%; float: none } .ar14-downloads .ar14-col-4 { padding-top: 2em; background: url("../images/ara/ar14_bg_hr.png") no-repeat scroll 0 top/100% 6px #fff } .ar14-downloads .ar14-col-4.two { border: none } .ar14-downloads .ar14-col-7 { margin-top: 0 } .ar14-annual-report .reporting-module-slp .inner .content ol li h4 { margin: 0 0.7em } } @media (max-width: 900px) { .ar14-value .tabbeditems { padding-bottom: 0 } .ar14-value .tabbeditems .tab { float: none; margin: 0 } .ar14-value .tabbeditems .tab a { float: none; border-bottom: 5px solid #fff; margin-bottom: 5px; padding-bottom: 0 } .ar14-value .tabtip { display: block; height: 1px } #non-financial .bx-controls-direction .bx-prev { left: -19% } #non-financial .bx-controls-direction .bx-next { right: -18% } } @media (max-width: 845px) { .ar14-annual-report .reporting-module-slp .inner.livelihoods .content ol li h4 { font-size: 1em } #financial .bx-viewport { width: 100% !important } #non-financial .bx-viewport { width: 90% !important } } @media (max-width: 815px) { .ar14-annual-report .reporting-module-slp .inner { min-height: 410px } .ar14-annual-report .reporting-module-slp .inner.livelihoods .content ol li h4 { font-size: 1em } #non-financial .bx-viewport { width: 100% !important } #non-financial .bx-controls-direction .bx-prev { left: -22% } #non-financial .bx-controls-direction .bx-next { right: -21% } } @media (max-width: 802px) { #ar14-brands .bx-controls-direction .bx-prev { left: -17% } #ar14-brands .bx-controls-direction .bx-next { right: -16% } } @media (max-width: 768px) { .ar14-col-2, .ar14-col-3, .ar14-col-4, .ar14-col-5, .ar14-col-6, .ar14-col-7, .ar14-col-8, .ar14-col-9, .ar14-col-10, .ar14-col-11, .ar14-location .ar14-map { float: none; width: 100%; margin: 0 } .ar14-location .ar14-map { width: 90%; margin: 0 auto } .ar14-col-uslp { float: none; width: 100% } .ar14-uslp #health, .ar14-uslp #environment, .ar14-uslp #livelihood { min-height: 218px } .ar14-downloads .ar14-col-4 { width: 98%; border-right: none } .ar14-internal-nav ul li a { padding-left: 20px; padding-right: 20px } .ar14-big-number-unit p.description { display: none } .ar14-uslp #health:after, .ar14-uslp #environment:after, .ar14-uslp #livelihood:after { background: none } .ar14-uslp #health, .ar14-uslp #environment, .ar14-uslp #livelihood { border-radius: 10px; min-height: 150px } .ar14-inner { height: 0 } .ar14-uslp #health h4:before, .ar14-uslp #environment h4:before, .ar14-uslp #livelihood h4:before { left: 5% } .ar14-uslp #health h4, .ar14-uslp #environment h4, .ar14-uslp #livelihood h4 { padding: 20px 20px 0 100px; text-align: left } .ar14-uslp #health p, .ar14-uslp #environment p, .ar14-uslp #livelihood p { padding: 10px 20px 12px 100px; line-height: 1.3em; text-align: left } .ar14-accordion .ar14-panelheader p.ar14-uslp-sleeve a { display: none } .ar14-panelbody { border-radius: 0 0 10px 10px } .ar14-downloads .ar14-col-4 { width: 32.5556%; float: left } .ar14-downloads .ar14-col-4.two { border-left: 1px solid #ccc; border-right: 1px solid #ccc } .ar14-downloads .ar14-col-4 { background: none } .ar14-internal-nav.mobilestick { width: 100% !important; left: 0 } .ar14-section-head .ar14-banner-holder { width: 102.3% } .ar14-internal-nav-wrapper .navcontrol { background-position: 65% 106%; background-size: 108% 6px } .ar14-kpis .tabbeditems, .ar14-value .tabbeditems { padding-bottom: 0 } .ar14-kpis .tabbeditems .tab h3 { padding-bottom: 6px } .ar14-focus { background-size: 100% 10% } .ar14-downloads h3 { font-size: 1em } .ar14-downloads p.ar14-download-item { font-size: .75rem } .ar14-focus { background-size: 100% 5% } .ar14-focus-mdtop-col, .ar14-focus-mdlower-col { float: left; width: 50% } .ar14-focus-mdtop-col ul, .ar14-focus-mdtop-col .ar14-accordion, .ar14-focus-mdlower-col ul, .ar14-focus-mdlower-col .ar14-accordion { width: 85% } .ar14-focus-mdlower-col.second { margin-bottom: 100px } .ar14-focus-mdtop-col.second .ar14-focus-holder { margin-top: -74px } .ar14-focus-lg-col { width: 66% } .ar14-focus-mdtop-col.second { border-top: none; margin-top: 73px } .reporting-module-slp .inner.environment { width: 100%; margin: 0 2px } #financial .bx-viewport { width: 97% !important } .ar14-annual-report #financial .bx-controls { top: 67px } } @media (max-width: 767px) { .ar14-downloads h3 { font-size: 1.375em } .reporting-module-slp .inner.environment { margin: 0 } .ar14-annual-report .reporting-module-slp .inner.wellbeing .title h3, .ar14-annual-report .reporting-module-slp .inner.environment .title h3, .ar14-annual-report .reporting-module-slp .inner.livelihoods .title h3 { padding-top: 0; height: auto } .ar14-annual-report .reporting-module-slp .inner .content > span.intro:before { background: none; margin: 0 } .ar14-annual-report .reporting-module-slp .inner .content > span.intro p { min-height: 1px } .ar14-annual-report .reporting-module-slp .inner .content > span.intro { text-align: left; margin-top: 0; padding-top: 0 } .ar14-annual-report .reporting-module-slp .inner .content > span.intro p { padding: 0; margin: 0 } .ar14-annual-report .reporting-module-slp .inner .content { padding-top: 0; padding-bottom: 0 } .ar14-annual-report .reporting-module-slp .inner { min-height: 10px } .ar14-annual-report .reporting-module-slp .inner .title h3 { padding-left: 0; margin-left: .5em } .ar14-annual-report .reporting-module-slp .inner.livelihoods .title h3 { padding-bottom: 0 } .ar14-annual-report .reporting-module-slp .inner .content ol li h4 { font-size: 1.2em; margin: 0 1em } .ar14-annual-report .reporting-module-slp .inner .content ol li .sub-content { padding: 1em 2em } .ar14-biz-model-details { padding-left: 1.5em; padding-right: 1.5em } .ar14-car-financial .ar14-big-number-unit { padding-right: 2em !important } #financial .bx-viewport, #non-financial .bx-viewport { width: 90% !important } #financial .bx-controls-direction .bx-prev { left: -16% } #financial .bx-controls-direction .bx-next { right: -15% } #non-financial .bx-controls-direction .bx-prev { left: -23% } #non-financial .bx-controls-direction .bx-next { right: -22% } #ar14-brands .bx-controls-direction .bx-prev { left: -12% } #ar14-brands .bx-controls-direction .bx-next { right: -11% } .ar14-biz-model .ar14-biz-model-slide img { height: 100%; width: 75% } .ar14-biz-model .bx-controls-direction .bx-prev { left: -98px !important } .ar14-biz-model .bx-controls-direction .bx-next { left: 88px !important } } @media (max-width: 744px) { #ar14-brands .bx-controls-direction .bx-prev { left: -15% } #ar14-brands .bx-controls-direction .bx-next { right: -14% } } @media (max-width: 675px) { #non-financial .bx-controls-direction .bx-prev { left: -25% } #non-financial .bx-controls-direction .bx-next { right: -24% } } @media (max-width: 630px) { #financial .bx-controls-direction .bx-prev { left: -20% } #financial .bx-controls-direction .bx-next { right: -18% } #non-financial .bx-controls-direction .bx-prev { left: -32% } #non-financial .bx-controls-direction .bx-next { right: -31% } #ar14-brands .bx-controls-direction .bx-prev { left: -19% } #ar14-brands .bx-controls-direction .bx-next { right: -18% } } @media (max-width: 569px) { .ar14-annual-report #financial .bx-controls { top: 110px !important } .ar14-biz-model .ar14-biz-model-slide img { width: 82% } } @media (max-width: 580px) { .ar14-download-mobileimg { display: block } .ar14-download-defaultimg { display: none } .ar14-banner-holder:after { background-size: 100% 97.5% } .ar14-focus-mdtop-col, .ar14-focus-mdlower-col { float: none; width: 99.99% } .ar14-focus-lg-col { width: 66% } .ar14-focus-mdtop-col.second .ar14-focus-blocker { display: block } .ar14-focus-mdtop-col ul, .ar14-focus-mdtop-col .ar14-accordion, .ar14-focus-mdlower-col ul, .ar14-focus-mdlower-col .ar14-accordion { width: 68% } .ar14-focus-mdlower-col.third { margin-bottom: 100px } .ar14-focus-mdtop-col.second { border-top: 3px solid #007dbb; margin-top: 100px } .ar14-focus-mdtop-col.second .ar14-holder-above { margin-top: -80px } .ar14-focus-mdtop-col.second .ar14-focus-blocker, .ar14-focus-mdlower-col.fourth .ar14-focus-blocker { left: 0 } .ar14-downloads .ar14-col-4 { width: 100%; padding-top: 2em; float: none } .ar14-downloads .ar14-col-4.two { border: none } .ar14-downloads .ar14-col-4 { background: url("../images/ara/ar14_bg_hr.png") no-repeat scroll 0 top/100% 6px #fff } .ar14-downloads h3 { font-size: 1.375em } #ar14-brands .bx-controls-direction .bx-prev { left: -23% } #ar14-brands .bx-controls-direction .bx-next { right: -22% } } @media (max-width: 510px) { #financial .bx-controls-direction .bx-prev { left: -23% } #financial .bx-controls-direction .bx-next { right: -21% } .ar14-annual-report #financial .bx-default-pager .bx-pager-item:nth-child(4), .ar14-annual-report #non-financial .bx-default-pager .bx-pager-item:nth-child(7) { display: inline-block } } @media (max-width: 480px) { .ar14-back-up.ar14-bottom { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: opacity 2s ease-out } .ar14-banner-holder:after { background-size: 100% 94.5% } .ar14-header-holder h2 { font-size: 1.8em } .ar14-focus-lg-col { width: 75% } .ar14-focus-mdtop-col ul, .ar14-focus-mdtop-col .ar14-accordion, .ar14-focus-mdlower-col ul, .ar14-focus-mdlower-col .ar14-accordion { width: 85% } .ar14-download-panel p.internal { width: 75% } dl.ar14-footnotes dt { width: 3% } dl.ar14-footnotes dd { width: 97% } #non-financial .bx-controls-direction .bx-prev { left: -37% } #non-financial .bx-controls-direction .bx-next { right: -34% } #ar14-brands .bx-controls-direction .bx-prev { left: -30% } #ar14-brands .bx-controls-direction .bx-next { right: -27% } } @media (max-width: 455px) { .ar14-annual-report #financial .bx-controls { top: 125px !important } .ar14-annual-report #non-financial .bx-default-pager .bx-pager-item { margin: 0 0.2em } #financial .bx-controls-direction .bx-prev { left: -27% } #financial .bx-controls-direction .bx-next { right: -24% } } @media (max-width: 428px) { .ar14-annual-report #non-financial .bx-controls { top: 140px !important } } @media (max-width: 400px) { #ar14-brands .bx-controls-direction .bx-prev { left: -35% } #ar14-brands .bx-controls-direction .bx-next { right: -33% } } @media (max-width: 390px) { #non-financial .bx-controls-direction .bx-prev { left: -45% } #non-financial .bx-controls-direction .bx-next { right: -43% } #financial .bx-controls-direction .bx-prev { left: -30% } #financial .bx-controls-direction .bx-next { right: -27% } } @media (max-width: 360px) { .ar14-annual-report #non-financial .bx-controls { top: 160px !important } #ar14-brands .bx-controls-direction .bx-prev { left: -40% } #ar14-brands .bx-controls-direction .bx-next { right: -37% } #financial .bx-controls-direction .bx-prev { left: -34% } #financial .bx-controls-direction .bx-next { right: -31% } } @media (max-width: 380px) { .ar14-annual-report #financial .bx-controls { top: 145px !important } } @media (max-width: 320px) { .ar14-banner-holder:after { background-size: 100% 92.5% } .ar14-holder-above { width: 150px } .ar14-focus-holder { width: 150px; height: 150px } .ar14-focus-mdlower-col.third .ar14-focus-blocker { top: -75px } .ar14-focus-lg-col p { padding-left: 20px; padding-right: 20px } .ar14-focus-lg-col h4, .ar14-focus-lg-col h3 { padding: 30px 15px 10px } .ar14-focus-holder h4 { padding-top: 40px } .ar14-focus-holder h4.element3 { left: 10% } .ar14-focus-mdtop-col ul, .ar14-focus-mdlower-col ul { height: auto } .ar14-annual-report #financial .bx-controls { top: 150px !important } #financial .bx-controls-direction .bx-prev { left: -37% } #financial .bx-controls-direction .bx-next { right: -33% } #ar14-brands .bx-controls-direction .bx-prev { left: -44% } #ar14-brands .bx-controls-direction .bx-next { right: -43% } } .ara__disclaimer { color: #999999; font-size: .6875rem !important; line-height: 1.5em !important } .ara__table { margin: 0 0 1em 0 !important } .ara__table-head { height: 0; overflow: hidden; position: absolute; width: 0 } .ara__table-cell { border: 0 !important; float: left; padding: 0 10px 0 0 !important } .ara__table-cell--stacked { clear: both } .ara__download__banner { position: relative; height: 300px; background-size: cover; background-position: 0 30%; border: solid 1px #ccc; border-radius: 5px } .ara__download__pdf { position: absolute; top: 64%; left: 5%; right: 5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 20px; background-color: #fff; border-radius: 5px } @media (min-width: 30em) { .ara__download__pdf { padding: 20px; width: 73%; max-width: 330px; top: 67% } } @media (min-width: 30em) { .ara__download__pdf { max-width: 375px } } @media (min-width: 93.75em) { .ara__download__pdf { width: 40%; max-width: none } } .ara__download__pdf a { display: block; position: relative; overflow: hidden; line-height: 1.4; color: #007dbb; box-shadow: 0 6px 6px -9px transparent; transition: all 0.3s ease } .ara__download__pdf a small { display: block; color: #666; margin-top: 0; margin-left: 25px } .ara__download__options ul { list-style: none; padding: 0 !important } .ara__download__options ul li { margin-bottom: 20px } .ara__download__options a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; content: "\e021"; left: -1px; top: 3px; font-size: 0.75em; transition: all 0.3s ease } .ara__copy-spacing { padding-top: 10px } .ara__heading2 { padding: 5px 0 30px } .ara__heading3 { padding: 15px 0 10px } .ara__heading3--blue { text-indent: 25px; color: #007dbb } .ara__heading3--green { text-indent: 25px; color: #54802d } .ara__heading3--pink { text-indent: 25px; color: #d0006f } .ara__slp-heading { font-weight: bold } .ara__slp-heading--blue { color: #007dbb } .ara__slp-heading--green { color: #54802d } .ara__slp-heading--pink { color: #d0006f } .ara__plan { margin: 0 0 4em } @media (min-width: 48em) { .ara__plan { text-align: center } } .ara__flex-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center } .ara__flex-item { display: -ms-flexbox; display: flex } .ara__highlight { border: solid 1px #ccc; border-radius: 5px; padding: 1em 1em 0 1em; margin-bottom: 0.7em; margin-top: 0.7em; width: 100%; text-align: left } .ara__highlight__section { margin-bottom: 1.5em } .ara__highlight__figure { display: block; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #007CBD; font-size: 36px !important; line-height: 37px !important; margin: 10px 0 } .font--arial .ara__highlight__figure { font-family: Arial, Helvetica, sans-serif } .ara__highlight__figure--smaller { font-size: 30px !important; line-height: 32px !important } .ara__highlight__figure--blue { color: #007dbb } .ara__highlight__figure--green { color: #54802d } .ara__highlight__figure--red, .ara__highlight__figure--pink { color: #d0006f } .ara__highlight h4 { margin-top: 0; margin-bottom: 0; font-size: 20px; line-height: 26px } .ara__highlight p { margin-bottom: 0; font-size: 15px; line-height: 24px } .ara__highlight--focus { background-color: #F7F7F7 } .ara__highlight--blue { background-color: #DCF1FA } .ara__highlight--green { background-color: #E4F0C3 } .ara__highlight--red { background-color: #FBEAF4 } .ara__highlight--green h4 { color: #54802d } .ara__highlight--red h4 { color: #d0006f } .ara .footnote { margin-top: 2em; margin-bottom: 2em } .ara .icon { font-family: 'unilever-iconfont' } .ara .icon-leaf::before { content: '\e02c' } .ara .icon-heart::before { content: '\e02a' } .ara .icon-spark::before { content: '\e02b' } .ara .icon-leaf::before, .ara .icon-heart::before, .ara .icon-spark::before { position: absolute; font-size: 30px; margin-left: -60px; margin-top: -4px } @media (min-width: 48em) { .ara .icon-leaf::before, .ara .icon-heart::before, .ara .icon-spark::before { margin-top: 0 } } @media (min-width: 93.75em) { .ara .icon-leaf::before, .ara .icon-heart::before, .ara .icon-spark::before { margin-top: 2px } } .ara--18__goal { font-weight: bold } .ara--18__goal--blue { color: #007dbb } .ara--18__goal--green { color: #54802d } .ara--18__goal--red { color: #d0006f } .ara--18__link { font-size: 13px; margin-bottom: 20px; display: inline-block } .ara--18__link::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; vertical-align: middle; font-size: 10px; content: "\e021"; padding-left: 4px } .ara--18__link--blue { color: #007dbb } .ara--18__link--blue:hover, .ara--18__link--blue:focus, .ara--18__link--blue:active { color: #004976 } .ara--18__link--green { color: #54802d } .ara--18__link--green:hover, .ara--18__link--green:focus, .ara--18__link--green:active { color: #00573F } .ara--18__link--red { color: #d0006f } .ara--18__link--red:hover, .ara--18__link--red:focus, .ara--18__link--red:active { color: #722257 } .ara--18__highlight { padding-top: 0; padding-bottom: 0 } .ara--18__highlight .row { padding-top: 1em; padding-bottom: 1em } .ara--18__highlight .row + .row { border-top: 1px solid #ccc } .ara--18__highlight .flex-container { -ms-flex-pack: start; justify-content: flex-start } .ara--18__highlight h4 { font-size: 16px } @media print, (min-width: 48em) { .ara--18__highlight h4 { font-size: 20px } } .ara--18__highlight ul { list-style-position: inside; margin-bottom: 0 } .ara--18__highlight ul li, .ara--18__highlight p { font-size: 13px } @media print, (min-width: 48em) { .ara--18__highlight ul li, .ara--18__highlight p { font-size: 15px } } .ara--18__highlight.ara__highlight--focus { background-color: #EEEEEE } .ara--18__highlight__figure { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 32px !important; margin-bottom: 3px } .font--arial .ara--18__highlight__figure { font-family: Arial, Helvetica, sans-serif } .ara--18__highlight__figure--smaller { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 20px !important; margin-bottom: 3px } .font--arial .ara--18__highlight__figure--smaller { font-family: Arial, Helvetica, sans-serif } .ara--18__highlight__figure--smaller sup, .ara--18__highlight__figure--smaller .stat-unit--small { font-size: 60% !important } @media print, (min-width: 48em) { .ara--18__highlight__figure--smaller { font-size: 24px !important } .ara--18__highlight__figure--smaller sup, .ara--18__highlight__figure--smaller .stat-unit--small { font-size: 60% !important } } .ara--18__highlight__figure--big-number { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 20px !important; margin-bottom: 3px } .font--arial .ara--18__highlight__figure--big-number { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .ara--18__highlight__figure--big-number { font-size: 22px !important } } @media (min-width: 67.5em) { .ara--18__highlight__figure--big-number { font-size: 32px !important } } .ara--18__highlight__figure sup, .ara--18__highlight__figure .stat-unit--small { font-size: 60% !important } .ara--18__highlight__year { font-family: Arial, Helvetica, sans-serif; font-size: 13px } .ara--18__highlight .col-no-1 { padding-left: 30px } @media print, (min-width: 48em) { .ara--18__highlight { margin-bottom: 15px } .ara--18__highlight .columns.large-6 { padding-right: 30px } .ara--18__highlight .columns.large-6::after { content: ''; position: absolute; top: -16px; bottom: -16px; right: 15px; width: 1px; display: block; background-color: #ccc } } .ara--18__p { margin-bottom: 10px } .ara--18__goal { text-transform: uppercase } @media (min-width: 105.75em) { .row { max-width: 105em } } .row.expanded { max-width: none } hr.content-start { height: 6px; background: none; margin: 0 } .white-text { color: #FFF } hr { border: none; border-width: 0; clear: both; margin: 1em 0 2em; height: 10px; background: url(../images/hr.png) center 0 no-repeat; background-size: 100% 5px } @media (max-width: 30em) { hr { margin: 0.5em 0 1em } } img.float-right { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } img.full-width { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-bottom: 2em } .float-right { width: 100%; margin: 0.5em 0 2em 0 } @media print, (min-width: 48em) { .float-right { width: 35%; float: right; clear: right; margin: 0 0 2em 2em !important } } @media print, (min-width: 48em) { .float-right--50 { width: 50% } } div.to-top { display: none } div.to-top a { display: block; padding: 10px 0 15px; text-align: center; color: #fff; font-weight: bold; background: url(../images/hr.png) 0 top no-repeat #007dbb; background-size: 100% 5px } div.to-top a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01f"; padding-bottom: 11px; display: block; font-size: 1.3em } @media (max-width: 30em) { div.to-top { display: block } } div.rightcol { background: url(../images/vr-left.png) 0 0 no-repeat; background-size: 6px 100% } @media (max-width: 30em) { div.rightcol { margin-top: 0; padding-top: 0 } } div.rightcol div:first-child h3 { background: none } img.chart-desktop { width: 100%; max-width: inherit; margin-bottom: 2em } @media (max-width: 30em) { img.chart-desktop { display: none } } img.chart-mobile { display: none; width: 100%; margin-bottom: 2em; max-width: inherit } @media (max-width: 30em) { img.chart-mobile { display: block } } iframe { border: 0 } .photo-attribution { color: #fff; background-color: rgba(0, 0, 0, 0.4); padding: 10px 20px; font-size: 12px; position: absolute; bottom: 0; left: 0; z-index: 5 } .InPageNavJson { display: none } .no-js .js-only { display: none } .js .no-js-only { display: none } .clearfix { clear: both } .section-container.accordion { background: url("../images/hr.png") center bottom no-repeat, url("../images/hr_down.png") center top no-repeat; background-size: 100% 6px; padding-bottom: 6px; margin: 0 0 4em; clear: both } @media (max-width: 48em) { .section-container.accordion { width: auto } } @media (max-width: 30em) { .section-container.accordion { padding: 5px 0 6px } .section-container.accordion.has-cta { background: none; padding: 0 } } .section-container.accordion h3 { padding: 22px 0 12px; margin-top: 0 } .section-container.accordion h4 { margin-top: 0 } .section-container.accordion section.active > h4.title, .section-container.accordion section.active > p.title { color: #004976 } .section-container.accordion .title { background: white !important; border-top: solid 1px #ddd; color: #007dbb; cursor: pointer; display: block; position: relative; margin-left: 0.6em; margin: 0; padding: 0.9375em 30px 0.9375em 0; letter-spacing: normal; line-height: 1.6; transition: 0.3s ease } .section-container.accordion .title::before { content: "\e025"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 0.8em; display: block; position: absolute; right: 18px; top: 18px; transition: 0.3s ease } @media print { .section-container.accordion .title::before { display: none } } .section-container.accordion .title:hover { color: #004976 } @media (max-width: 48em) { .section-container.accordion .title:hover { margin-left: 0 } } @media (max-width: 30em) { .section-container.accordion .title:hover { color: #007dbb } } .section-container.accordion .title__no-icon::before { content: "" } .section-container.accordion h2.title { padding: 0.45em 30px 0.45em 0 } .section-container.accordion h2.title::before { font-size: 0.5em; top: 1.5em } .section-container.accordion p.title { font-family: arial; font-size: .9375em; text-transform: none } @media (min-width: 93.75em) { .section-container.accordion p.title { font-size: 1em } } @media (max-width: 48em) { .section-container.accordion p.title { font-size: .875em } } .section-container.accordion > .section.active > p.title { color: #004976 } .section-container.accordion > .section.active > .title::before { color: #004976; content: "\e01f" } .section-container.accordion .content { display: none; background: url("../images/hr.png") center top no-repeat #eee; background-size: 100% 6px; margin-bottom: 0; overflow: hidden; padding: 15px 20px } @media print { .section-container.accordion .content { display: block !important } } .section-container.accordion .content ul, .section-container.accordion .content ol { padding-left: 1.2em } .theme-ubrand .section-container.accordion { background: none; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd } .accordion .section:first-child .title { border-top: none } .accordion img { float: right; margin: 0 0 20px 20px; max-width: 100%; width: 40%; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } @media (max-width: 48em) { .accordion img { float: none; max-width: 100%; width: auto; margin: 5px 0 20px } } .accordion a img { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: 0.3s ease } .accordion a:hover img { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) } div.banner { overflow: hidden; margin: 0; padding-bottom: 1em; position: relative; border-top: solid 6px #007dbb } @media print { div.banner { border-color: #000 } } div.banner a.popup-youtube div.image-mask::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } div.banner div.image-mask { position: relative; float: right; width: 50% } div.banner div.image-mask:after { content: ""; position: absolute; background: url(../images/masks/banner/blue-banner-mask.png) 0 0 no-repeat; background-size: 100% 100%; height: 100%; width: 100%; bottom: 0; right: 0; display: block } @media (max-width: 48em) { div.banner div.image-mask { float: none; width: auto } } div.banner div.image-mask img { display: block; margin-bottom: 0; width: 100% } div.banner h2 { font-size: 2.25em; padding: 0 20px 0 0; float: left; width: 50%; margin: 20px 0 0 0; line-height: 1.1 } @media (max-width: 48em) { div.banner h2 { float: none; width: auto; clear: both; margin: 10px 0 0 } } div.banner div.intro p, div.banner p.intro { padding: 10px 20px 15px 0; line-height: 1.5; clear: left; margin-bottom: 0 } @media (max-width: 48em) { div.banner div.intro p, div.banner p.intro { float: none; width: auto; clear: both; padding: 10px 0 } } @media (max-width: 30em) { div.banner div.intro p, div.banner p.intro { padding: 5px 0 } } div.banner.green { border-color: #54802d } div.banner.green h1 { color: #54802d } div.banner.green div:after { background-image: url(../images/masks/banner/green-banner-mask.png) } div.banner.red { border-color: #DA291C } div.banner.red h1 { color: #DA291C } div.banner.red div:after { background-image: url(../images/masks/banner/red-banner-mask.png) } div.banner.purple { border-color: #8A1B61 } div.banner.purple h1 { color: #8A1B61 } div.banner.purple div:after { background-image: url(../images/masks/banner/purple-banner-mask.png) } div.banner.pink { border-color: #d0006f } div.banner.pink h1 { color: #d0006f } div.banner.pink div:after { background-image: url(../images/masks/banner/pink-banner-mask.png) } div.banner.orange { border-color: #d34400 } div.banner.orange h1 { color: #d34400 } div.banner.orange div:after { background-image: url(../images/masks/banner/orange-banner-mask.png) } div.banner.teal { border-color: #008566 } div.banner.teal h1 { color: #008566 } div.banner.teal div:after { background-image: url(../images/masks/banner/teal-banner-mask.png) } div.cta-link { background: url(../images/hr.png) center 0 no-repeat; background-size: 100% 5px; height: 40px; float: left; margin-bottom: 1em; position: relative; width: 100% } @media (min-width: 93.75em) { div.cta-link { height: 55px } } @media print { div.cta-link { display: none } } div.cta-link a, div.cta-link span, div.cta-link p, div.cta-link input { background: #007dbb; color: #FFFFFF; display: block; float: left; font-size: .8125em; line-height: 1.6; text-transform: uppercase; padding: 12px 15px 10px 13px; left: 5px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.4) inset; border-radius: 0 0 10px 10px; transition: background-color 0.3s ease, padding-top 0.3s ease, margin-bottom 0.3s ease } @media (min-width: 93.75em) { div.cta-link a, div.cta-link span, div.cta-link p, div.cta-link input { font-size: 1em } } @media (max-width: 48em) { div.cta-link a, div.cta-link span, div.cta-link p, div.cta-link input { font-size: 0.7em } } @media (max-width: 47.9375em) { div.cta-link a, div.cta-link span, div.cta-link p, div.cta-link input { font-size: 1em } div.cta-link { height: 60px; margin: 0; } } .font--arial div.cta-link a, .font--arial div.cta-link span, .font--arial div.cta-link p, .font--arial div.cta-link input { font-family: Arial, Helvetica, sans-serif } div.cta-link a:after, div.cta-link span:after, div.cta-link p:after, div.cta-link input:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e022"; padding: 0 0 0 6px; top: 1px; position: relative; display: inline-block } div.cta-link a.external::after, div.cta-link span.external::after, div.cta-link p.external::after, div.cta-link input.external::after { content: "\e01a" } div.cta-link a.external::before, div.cta-link span.external::before, div.cta-link p.external::before, div.cta-link input.external::before { content: none !important } div.cta-link a.file::after, div.cta-link span.file::after, div.cta-link p.file::after, div.cta-link input.file::after { content: "\e01d" } div.cta-link a:hover, div.cta-link p:hover, div.cta-link span:hover, div.cta-link input:hover { background: #004976; padding-top: 18px } div.cta-link p:hover { margin-bottom: 10.25px } div.cta-link .hidden { opacity: 0; transition: 0.3s ease } div.cta-link a, div.cta-link input { position: absolute; top: 0; left: 0 } div.cta-link--center { margin-bottom: 3em } div.cta-link--center a, div.cta-link--center input { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } a:focus, button:focus, [role='button']:focus:focus { outline: solid #A5C7FE 2px } a:focus:after, button:focus:after, [role='button']:focus:focus:after { outline: none } #content-wrap a.external::before, #content-wrap a.internal::before, #content-wrap a.download::before, #content-wrap a.file::before, #content-wrap a.twitter::before, #content-wrap a.facebook::before, #content-wrap a.youtube::before, #content-wrap a.linkedin::before, #content-wrap a.google-plusone::before, #content-wrap a.vimeo::before, #content-wrap a.vcs::before, #content-wrap a.webcast::before, #content-wrap a.instagram::before, body.module a.external::before, body.module a.internal::before, body.module a.download::before, body.module a.file::before, body.module a.twitter::before, body.module a.facebook::before, body.module a.youtube::before, body.module a.linkedin::before, body.module a.google-plusone::before, body.module a.vimeo::before, body.module a.vcs::before, body.module a.webcast::before, body.module a.instagram::before, .mfp-wrap a.external::before, .mfp-wrap a.internal::before, .mfp-wrap a.download::before, .mfp-wrap a.file::before, .mfp-wrap a.twitter::before, .mfp-wrap a.facebook::before, .mfp-wrap a.youtube::before, .mfp-wrap a.linkedin::before, .mfp-wrap a.google-plusone::before, .mfp-wrap a.vimeo::before, .mfp-wrap a.vcs::before, .mfp-wrap a.webcast::before, .mfp-wrap a.instagram::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; padding-right: 5px; vertical-align: middle } #content-wrap a.external::before, body.module a.external::before, .mfp-wrap a.external::before { content: "\e01a" } #content-wrap a.internal::before, body.module a.internal::before, .mfp-wrap a.internal::before { content: "\e021" } #content-wrap a.download::before, #content-wrap a.file::before, body.module a.download::before, body.module a.file::before, .mfp-wrap a.download::before, .mfp-wrap a.file::before { content: "\e01d" } #content-wrap a.twitter::before, body.module a.twitter::before, .mfp-wrap a.twitter::before { content: "\ea91" } #content-wrap a.facebook::before, body.module a.facebook::before, .mfp-wrap a.facebook::before { content: "\e019" } #content-wrap a.youtube::before, body.module a.youtube::before, .mfp-wrap a.youtube::before { content: "\e006" } #content-wrap a.linkedin::before, body.module a.linkedin::before, .mfp-wrap a.linkedin::before { content: "\e031" } #content-wrap a.google-plusone::before, body.module a.google-plusone::before, .mfp-wrap a.google-plusone::before { content: "\e016" } #content-wrap a.vimeo::before, body.module a.vimeo::before, .mfp-wrap a.vimeo::before { content: "\e027" } #content-wrap a.vcs::before, body.module a.vcs::before, .mfp-wrap a.vcs::before { content: "\e01e" } #content-wrap a.webcast::before, body.module a.webcast::before, .mfp-wrap a.webcast::before { content: "\e011" } #content-wrap a.instagram::before, body.module a.instagram::before, .mfp-wrap a.instagram::before { content: "\e611" } .show-hide, .show-more { background: url(../images/hr.png) center 0 no-repeat; padding: 0 5px; position: relative; height: 40px; background-size: 100% 5px; overflow: hidden; text-align: center; margin-bottom: 60px } .show-hide--no-margin, .show-more--no-margin { margin-bottom: 0 } @media print { .show-hide, .show-more { display: none } } .show-hide button, .show-hide a, .show-more button, .show-more a { color: #007dbb; background: #fff; border: 0; text-transform: uppercase; padding: 12px 10px 6px 13px; font-size: .8125em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; box-shadow: 0 6px 15px -9px rgba(0, 0, 0, 0.7); border-radius: 0 0 10px 10px; transition: all 0.3s ease } @media (min-width: 93.75em) { .show-hide button, .show-hide a, .show-more button, .show-more a { font-size: .9375em } } .font--arial .show-hide button, .font--arial .show-hide a, .font--arial .show-more button, .font--arial .show-more a { font-family: Arial, Helvetica, sans-serif } .show-hide button:after, .show-hide a:after, .show-more button:after, .show-more a:after { content: "\e025"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; padding: 0 0 0 6px; top: 1px; position: relative; display: inline-block } .show-hide button.less:after, .show-hide a.less:after, .show-more button.less:after, .show-more a.less:after { content: "\e01f" } .show-hide button:hover, .show-hide a:hover, .show-more button:hover, .show-more a:hover { color: #004976 } .show-hide button.hidden, .show-hide a.hidden, .show-more button.hidden, .show-more a.hidden { display: none } .call-out { margin: 20px 0 80px; color: #fff; padding: 20px 15px 1px 20px; background: #007dbb; position: relative; word-break: break-word; border-radius: 10px } @media print { .call-out { padding: 0 } } .call-out h3 { color: #fff } .call-out p { line-height: 1.4 } .call-out p.footnote { color: #b8e2f3 } .call-out ul, .call-out ol { padding-left: 1.2em; line-height: 1.4 } .call-out li { padding-bottom: 0.5em } .call-out li:last-child { padding-bottom: 0 } .call-out a { color: #fff; font-weight: bold } .call-out.quote blockquote { color: #fff; padding: 0; margin: 0; position: relative; word-wrap: break-word; border: 0 } @media print { .call-out.quote blockquote { border: 0 } } .call-out.quote blockquote cite { margin-top: 45px; font-style: normal; left: -20px; line-height: 1.5; position: absolute } @media print { .call-out.quote blockquote cite { margin-top: 5px; position: static } } .call-out.quote blockquote:before { content: "" !important } .call-out.quote blockquote:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: block; color: #007dbb; font-size: 6.25rem; bottom: -98px; content: "\e00b"; left: 40px; position: absolute } @media print { .call-out.quote blockquote:after { display: none } } .call-out.quote blockquote p { color: #fff; line-height: 1.3; margin-bottom: 20px } .call-out.quote blockquote p strong { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-weight: normal } .font--arial .call-out.quote blockquote p strong { font-family: Arial, Helvetica, sans-serif } .call-out.quote.orange { background-color: #d34400 } .call-out.quote.orange blockquote:after { color: #d34400 } .call-out.quote.orange cite { color: #d34400 } .call-out.quote.red { background-color: #DA291C } .call-out.quote.red blockquote:after { color: #DA291C } .call-out.quote.red cite { color: #DA291C } .call-out.quote.green { background-color: #54802d } .call-out.quote.green blockquote:after { color: #54802d } .call-out.quote.green cite { color: #54802d } .call-out.quote.purple { background-color: #8A1B61 } .call-out.quote.purple blockquote:after { color: #8A1B61 } .call-out.quote.purple cite { color: #8A1B61 } .call-out.quote.pink { background-color: #d0006f } .call-out.quote.pink blockquote:after { color: #d0006f } .call-out.quote.pink cite { color: #d0006f } .call-out.quote.vividgreen { background-color: #78be20 } .call-out.quote.vividgreen blockquote:after { color: #78be20 } .call-out.info { background: #004976; margin-bottom: 3em; color: #fff } @media (max-width: 48em) { .call-out.info { padding-left: 15px } } .call-out.info:before { content: "\e015"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.8rem; color: #fff; display: block; position: absolute; left: 22px; float: none } @media (max-width: 48em) { .call-out.info:before { left: 15px } } @media print { .call-out.info:before { left: 0 } } .call-out.info h3 { text-indent: 0; margin-top: 0; padding-left: 1.6em } @media (max-width: 48em) { .call-out.info h3 { padding: 4px 0 10px 35px } } .content-article .float-right .call-out { margin-bottom: 70px !important; position: relative; width: auto } .content-article .float-right .call-out.quote { margin-bottom: 110px !important } @media print { .content-article .float-right .call-out.quote { margin-bottom: 0 !important } } .content-article .float-right .call-out.quote blockquote::after { font-size: 4.6875rem } .content-article .float-right .call-out.quote blockquote p { font-size: 1em } @media screen and (min-width: 57.5em) { .content-article .float-right .call-out.quote blockquote p { font-size: 1.25em } } @media screen and (min-width: 93.75em) { .content-article .float-right .call-out.quote blockquote p { font-size: 1.625em } } @media screen and (min-width: 48em) and (max-width: 57.5em) { .content-article .float-right .call-out.quote blockquote cite { margin-top: 55px } } @media print, (min-width: 30em) { .content-article .float-right .call-out.info h3:before { position: static; float: left; font-size: 1.1em; padding-right: 5px } } .large-6 div.call-out.quote, .large-4 div.call-out.quote, .large-3 div.call-out.quote, .call-out.float-right { margin-bottom: 110px !important } @media print { .large-6 div.call-out.quote, .large-4 div.call-out.quote, .large-3 div.call-out.quote, .call-out.float-right { margin-bottom: 0 !important } } .large-6 div.call-out.quote blockquote::after, .large-4 div.call-out.quote blockquote::after, .large-3 div.call-out.quote blockquote::after, .call-out.float-right blockquote::after { font-size: 4.6875rem } .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.25em } @media (min-width: 93.75em) { .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.625em } } @media (max-width: 30em) { .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.125em } } .large-9 .large-8 div.call-out.quote { margin-bottom: 110px } .call-out.quote.float-right blockquote cite { bottom: -94px } input, select, textarea { margin: 0; padding: 0; font-family: arial; font-family: inherit; box-sizing: border-box } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea { border-radius: 2px; border: solid 1px #ccc; padding: 0.6em; background-color: #f7f7f7; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); width: 100%; transition: all 0.3s ease } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus, select:focus, textarea:focus { border-color: #007dbb; background-color: #fff } input[type="search"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; position: relative } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none } input::-ms-clear, input::-ms-reveal { display: none; width: 0; height: 0 } input[type="checkbox"] + label { cursor: pointer } input[type="radio"] { display: inline-block; position: absolute; top: 1px; left: 0 } input[type="radio"] + label { display: inline-block; margin: 0 10px 0 21px; vertical-align: middle; cursor: pointer; line-height: 1.5 } input[type="text"]:disabled { background: #ccc } @media (max-width: 48em) { select { font-size: 1rem !important } } label, .label { color: #666; margin-bottom: 0.45em; display: block; font-size: .875em } @media (min-width: 93.75em) { label, .label { font-size: .9375em } } @media (max-width: 48em) { label, .label { font-size: .8125em } } @media (max-width: 30em) { label, .label { font-size: .75em } } label.disabled, .label.disabled { color: #999 } .label { line-height: 1em } span.required { color: #DA291C } .input-validation-error { background-color: #feeae9 !important; border-color: #DA291C !important } .field-validation-error { color: #DA291C; display: block; font-size: 80%; margin: 3px 0 5px } .input-clear { display: none; background-color: #007dbb; border: 0; border-radius: 10px !important; box-shadow: none; cursor: pointer; height: 20px; line-height: 20px; margin: -10px 0 0 0 !important; overflow: hidden; padding: 0 !important; position: absolute !important; right: 10px !important; left: auto !important; text-indent: 100%; top: 50% !important; white-space: nowrap; width: 20px; z-index: 2 } .input-clear:before { content: '\2715'; color: white; display: block; font-size: .75rem; height: 20px; line-height: 20px; left: 0; position: absolute; text-align: center; text-indent: 0; width: 20px } .input-clear:hover, .input-clear:active, .input-clear:focus { background-color: #007dbb } form div { margin: 0 0 1em; position: relative } @media (max-width: 30em) { form div { margin: 0; } } form div.error label, form div.error input { color: #DA291C } form div.error input { border-color: #DA291C } form div.search { position: relative } form div.search input { padding-right: 30px } form div.search .input-clear { bottom: 50%; margin: 0 0 -20px 0; top: auto; right: 7px } fieldset { border: none; padding: 0; margin: 0 0 2em } input[type="submit"], input[type="button"] { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #fff; background: #007dbb; position: absolute; top: -5px; border: none; line-height: 1.6; text-transform: uppercase; padding: 12px 13px 6px 13px; box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.4) inset; border-radius: 0 0 10px 10px; transition: background-color 0.3s ease, top 0.3s ease; font-size: 1em !important } .font--arial input[type="submit"], .font--arial input[type="button"] { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { input[type="submit"], input[type="button"] { font-size: .9375em !important } } input[type="submit"]:hover, input[type="button"]:hover { background-color: #004976; top: 0 } input[type="submit"]:disabled:not(.hidden), input[type="button"]:disabled:not(.hidden) { opacity: 0.5 } input[type="submit"]:disabled:not(.hidden):hover, input[type="button"]:disabled:not(.hidden):hover { background-color: #007dbb; top: -5px } .forms.section-container.accordion { margin-left: 0; margin-right: 0; width: auto } .forms.section-container.accordion h3 { margin-left: 0.9375em } @media screen and (min-width: 48em) { .forms.float-right { width: 33% } } .add-to-calendar { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: #007DBB; color: #FFF; left: auto; transition: background-color 0.3s ease, top 0.5s ease; border: 0; border-radius: 5px; box-shadow: none; margin: 0; line-height: 1; text-transform: uppercase; padding: 12px 12px 12px 12px; font-size: 0.8125em } .font--arial .add-to-calendar { font-family: Arial, Helvetica, sans-serif } .add-to-calendar:hover, .add-to-calendar.current-item { background-color: #004976 } .contact-form input[type="radio"] { position: relative } .contact-form input[type="radio"], .contact-form input[type="checkbox"] { margin-right: 5px } .contact-form__subject-list { margin-bottom: 1.25rem } .contact-form__subject-list:last-child { margin-bottom: 0 } .inline-checkbox { position: relative } .inline-checkbox input { position: absolute; left: 0; top: 1px } .inline-checkbox label { padding-left: 1.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } div.linklist.uslp-list > div.uslp-accordion > ul.uslp-targets > li > p > a:hover { background: none; box-shadow: none } div.linklist { margin: 0 0 4em; padding-bottom: 5px; background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 5px; text-align: left } div.linklist--no-margin { margin: 0 } div.linklist--no-margin ul { border-top: none !important } div.linklist.has-cta { background: none } div.linklist.has-cta li:last-child { border-bottom: none } div.linklist h3, div.linklist h2 { background: url(../images/hr_down.png) center 0 no-repeat; background-size: 100% 5px; padding: 22px 0 12px; margin-top: 0 } div.linklist h3.no-shadow { background: none; padding-top: 0 } div.linklist h4 { margin-top: 0.5em } div.linklist p { color: #666; line-height: 1.4 } div.linklist--inline ul li { float: left } div.linklist ul { list-style: none; border-top: 1px solid #ddd; clear: both; margin-bottom: 0; padding: 0 !important } div.linklist ul li { border-bottom: 1px solid #ddd; padding-bottom: 0 } div.linklist ul li > a { padding: 0.9em 2.4em 0.8em 1.8em !important; display: block; position: relative; overflow: hidden; line-height: 1.4; color: #007dbb; box-shadow: 0 6px 6px -9px transparent; transition: all 0.3s ease } div.linklist ul li > a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; content: "\e021"; left: 1em; top: 1.55em; font-size: 0.75em; transition: all 0.3s ease } div.linklist ul li > a:hover { background: #fafafa; box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.5); color: #004976 } @media (max-width: 48em) { div.linklist ul li > a:hover { background: none; color: #007dbb; box-shadow: 0 6px 6px -6px transparent } } div.linklist ul li > a:hover:before { margin-left: -0.2em } div.linklist ul li > a:active { background: none } div.linklist ul li > a:active:before { left: 0.6em } div.linklist ul li > a small { display: block; color: #666; margin-top: 0 } div.linklist ul li > a img { float: right; margin: 0 0 10px 10px; opacity: 1; width: 45%; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } div.linklist ul li > a small.language { background: #ccc; color: #fff; padding: 0.6em 0.3em 0.3em; position: absolute; right: 10px; line-height: 1; top: 0; border-radius: 0 0 3px 3px; transition: all 0.3s ease; font-size: .75em } @media (min-width: 93.75em) { div.linklist ul li > a small.language { font-size: .8125em } } @media (max-width: 48em) { div.linklist ul li > a small.language { font-size: .75em } } @media (max-width: 30em) { div.linklist ul li > a small.language { font-size: .6875em } } div.linklist ul li > a:hover small.language { background: #007dbb } @media (max-width: 48em) { div.linklist ul li > a:hover small.language { background: #ccc } } div.linklist ul li > a.vcs:before { font-size: 1em; top: 12px; left: .7em } div.linklist ul li > a.facebook::before { font-size: 1.1em; top: 13px; left: 7px } div.linklist ul li > a.twitter::before { font-size: 1.2em; top: 14px; left: 6px } div.linklist ul li > a.youtube::before { font-size: 1.2em; top: 12px; left: 6px } div.linklist ul li > a.vimeo::before { font-size: 1em; top: 13px; left: 7px } div.linklist ul li > a.google-plusone:before { font-size: 1em; top: 14px; left: 6px } div.linklist ul li > a.instagram:before { font-size: 1em; top: 14px; left: 6px } div.linklist ul li > a.linkedin:before { font-size: 1em; top: 14px; left: 6px } div.linklist ul li > a.hasLanguage { padding-right: 2.6em } div.linklist ul li > a.image-only { padding-left: 1em } div.linklist ul li > a.image-only::before { display: none } div.linklist ul li > a.image-only img { max-width: 100%; height: auto; margin: 0; float: none } div.linklist ul li.no-link { padding: 0.9em 0 0.8em 0; overflow: hidden } div.linklist ul li.no-link p { font-size: 1em } div.linklist ul li.no-link img { float: right; margin: 0 0 10px 10px; opacity: 1; width: 45%; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } div.linklist ul li.no-link a[href^="mailto"] { display: inline-block; line-height: 1; margin-top: 2px; max-width: 100%; word-wrap: break-word } div.accordion div.linklist { margin: 0 -20px; background: none; padding-bottom: 0 } div.accordion div.linklist p { padding-left: 15px; padding-right: 15px } div.linklist > div.uslp-accordion li a:before { display: none } .content-article .float-right.linklist, .content-article .float-right .linklist { -ms-flex-order: 1000; order: 1000; overflow: visible; margin: 0 } .content-article .float-right.linklist ul, .content-article .float-right .linklist ul { padding: 0 0 0 } .content-article .float-right.linklist li, .content-article .float-right .linklist li { padding-left: 0; padding-right: 0 } @media screen and (max-width: 47.9375em) { .content-article .float-right.linklist, .content-article .float-right .linklist { background: none; margin: 0 0 1em 0 !important; width: 100% } .content-article .float-right.linklist h3, .content-article .float-right.linklist h2, .content-article .float-right .linklist h3, .content-article .float-right .linklist h2 { cursor: pointer; color: #007dbb; margin: 0 -0.9375em; background-color: #f5f5f5; background-image: none; font-family: Arial, sans-serif; font-weight: bold; display: block; font-size: 1em; text-transform: none; border-radius: 0; text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 14px 0; box-shadow: 0 6px 6px -9px transparent } .content-article .float-right.linklist h3:after, .content-article .float-right.linklist h2:after, .content-article .float-right .linklist h3:after, .content-article .float-right .linklist h2:after { content: "\e025"; padding-left: 7px; font-size: 0.8em; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline } .content-article .float-right.linklist h3.visible, .content-article .float-right.linklist h2.visible, .content-article .float-right .linklist h3.visible, .content-article .float-right .linklist h2.visible { background: #007dbb; color: #fff } .content-article .float-right.linklist h3.visible:after, .content-article .float-right.linklist h2.visible:after, .content-article .float-right .linklist h3.visible:after, .content-article .float-right .linklist h2.visible:after { content: "\0e01f" } .content-article .float-right.linklist ul, .content-article .float-right .linklist ul { display: none } } div.linklist.related-articles { background: none } div.linklist.related-articles h3 { text-align: center } div.linklist.related-articles ul { text-align: center; border: none } div.linklist.related-articles ul li { display: inline-block; float: none; width: 32%; vertical-align: top; border: none; transition: all 0.3s ease; opacity: 1 } @media (max-width: 30em) { div.linklist.related-articles ul li { width: auto; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px } } @media (max-width: 30em) { div.linklist.related-articles ul li:last-child { border-bottom: none; margin-bottom: 0 } } div.linklist.related-articles ul li a { padding: 10px; color: #666 } div.linklist.related-articles ul li a:before { display: none } div.linklist.related-articles ul li a:hover { background-color: #fff; box-shadow: none } div.linklist.related-articles ul li a b { display: block; color: #007dbb } div.linklist.related-articles ul li a img { float: none; display: block; width: auto; margin: 0 0 10px } .large-6 div.linklist.related-articles h3 { text-align: left } .large-6 div.linklist.related-articles ul li { width: 48% } .home .linklist { max-width: 320px; margin: 0 auto 2em } body.search .linklist { margin: 0 0 2em } div.social-slider { text-align: center; overflow: hidden; padding: 0 0 2em 0; padding-top: 10px } @media print { div.social-slider { overflow: visible } } div.social-slider p.time { color: #666; font-style: italic } div.social-slider p.followers { text-align: center !important; margin-bottom: 0.5em } div.social-slider p.followers span { font-weight: bold } div.social-slider .video { height: 0; margin: 0 auto 15px auto; padding: 7px 21% 43% 22% !important; position: relative; width: 90% } @media print { div.social-slider .video { display: none } } div.social-slider .video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } div.social-slider .owl-wrapper { cursor: default } div.social-slider .owl-stage-outer { overflow: hidden } @media print, (min-width: 48em) { div.social-slider .owl-item { padding: 0 10px } div.social-slider .owl-item p { text-overflow: ellipsis; overflow: hidden } } div.social-slider div.owl-item div.cta-link a { left: 2px } @media print { div.social-slider div.cta-link a { width: 100% } } @media print { div.social-slider div.cta-link { display: block } } div.social-slider.illustrative p { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1.5em } .font--din div.social-slider.illustrative p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial div.social-slider.illustrative p { font-family: Arial, Helvetica, sans-serif } div.social-slider.illustrative div.owl-item .row a { color: #54802d; display: block; word-break: break-all } div.social-slider.illustrative div.owl-item:last-child .row a { color: #d34400 } div.social-slider.illustrative div.owl-item div.cta-link { margin-left: 1px } div.social-tabs { margin: 0 0 1em; background: url(../images/hr_down.png) 0 bottom no-repeat; padding-top: 6px } @media print { div.social-tabs { display: none } } div.social-tabs ul { color: #007dbb; display: block; height: 55px; list-style: none; margin: 0; padding: 0; text-align: center } div.social-tabs ul li { position: relative } div.social-tabs ul li h3 { background: #007dbb; border-top-right-radius: 6px; border-top-left-radius: 6px; box-shadow: inset 0px -10px 20px -15px #000; color: #FFFFFF; line-height: 58px; cursor: default; display: block; font-weight: normal; font-size: 1em; height: 55px; margin: 0 10px; overflow: hidden; position: relative; text-align: center; vertical-align: middle; z-index: 30 } div.social-tabs ul li h3.twitter, div.social-tabs ul li h3.youtube, div.social-tabs ul li h3.facebook { text-indent: -9999px; font-size: 1.5em; line-height: 38px } div.social-tabs ul li h3:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.4em; text-indent: 0; margin-top: -28px; font-weight: normal; display: block; transition: all 0.3s ease } div.social-tabs ul li h3.twitter:after { content: "\ea91"; font-size: 1.4em; margin-top: -31px } div.social-tabs ul li h3.youtube:after { content: "\e006" } div.social-tabs ul li h3.facebook:after { content: "\e019" } div.social-tabs.illustrative li:first-child.current h3 { background-color: #54802d } div.social-tabs.illustrative li:first-child.current::after { background-color: #54802d } div.social-tabs.illustrative li:last-child.current h3 { background-color: #ffc72c; color: #333 } div.social-tabs.illustrative li:last-child.current::after { background-color: #ffc72c } div[data-current-layout="single"] div.social-tabs ul li h3 { background: #CCCCCC; cursor: pointer; margin: 0; border-radius: 0px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; transition: background-color 0.3s ease } div[data-current-layout="single"] div.social-tabs ul li:first-child h3 { border-top-left-radius: 6px; border-left: 0 } div[data-current-layout="single"] div.social-tabs ul li:last-child h3 { border-top-right-radius: 6px; border-right: 0 } div[data-current-layout="single"] div.social-tabs ul li:after { background: transparent; color: #FFFFFF; content: ''; display: block; height: 1px; left: 50%; margin-top: 0; margin-left: 0; position: absolute; top: 100%; width: 1px; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.3s ease } div[data-current-layout="single"] div.social-tabs ul li:hover h3 { background: #999999 } div[data-current-layout="single"] div.social-tabs ul li.current h3 { background: #007DBB; box-shadow: none; position: relative } div[data-current-layout="single"] div.social-tabs ul li.current:after { background: #007dbb; width: 15px; height: 15px; margin-top: -8px; margin-left: -6px } .accordion .sting.blue div.image-mask:after { background-image: url(../images/masks/small-sting-mask-blue_accordioncontent.png) } .sting { margin: 0 0 0.5em; padding-bottom: 0; overflow: hidden; position: relative; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px; text-align: left } @media screen and (min-width: 48em) { .sting { margin: 0 0 2em; padding-bottom: 2em; } } @media print { .sting { margin-bottom: 14em } } .sting * { -webkit-transform: translateZ(0); transform: translateZ(0) } .sting h2 { padding: 22px 0 12px; margin-top: 0 } .sting h3 { padding: 22px 0 12px; margin-top: 0 } .sting a { display: block; color: #666 } .sting a ul, .sting a ol { margin-left: 26px } .sting div.image-mask a.popup-youtube::after, .sting a.popup-youtube div.image-mask::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .sting div.image-mask { overflow: hidden; position: relative; margin: 0 0 8px; border-top: solid #007dbb 7px; border-color: #007dbb; transition: border-color 0.4s ease } @media print { .sting div.image-mask { border-color: #000 } } .sting div.image-mask:after { content: ""; position: absolute; background-size: 100% 100%; height: 25%; width: 100%; bottom: -1px; display: block; background-repeat: no-repeat; background-image: url(../images/masks/small-sting-mask-blue.png) } .sting div.image-mask img { -webkit-transform: scale(1); transform: scale(1); transition-duration: 1s; transition-timing-function: ease; -webkit-transform: scale(1); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; border-radius: 0; box-shadow: none; display: block; position: relative; overflow: hidden; margin: 0; width: 100% } .sting a:hover div.image-mask img { -webkit-transform: scale(1.1); transform: scale(1.1); transition-duration: 0.4s; transition-timing-function: ease; -webkit-transform: scale(1.1); -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease } @media (max-width: 48em) { .sting a:hover div.image-mask img { -webkit-transform: scale(1); transform: scale(1) } } .sting.forms { padding-top: 10px; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px } .sting.forms form { padding: 7px 3px } .sting.navigation-list { margin: 0 0 0 } .sting.navigation-list small { color: #666; display: block } .sting.navigation-list p { padding-bottom: 15px; margin: 0 2px } .sting.navigation-list ul { background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 5px; line-height: 1.2; padding: 0 !important; list-style-type: none; margin-bottom: 0 } .sting.navigation-list ul li { margin: 14px 3px 7px; border-bottom: 1px solid #eee } .sting.navigation-list ul li:last-child { border-bottom: none } .sting.navigation-list ul li a { border-top: none; display: inline-block; color: #007dbb } .sting.navigation-list ul li a:hover { color: #004976 } .sting.navigation-list ul li h3 { font-family: arial; text-transform: none; letter-spacing: normal; font-weight: bold; margin: 0; padding: 0; position: relative } .sting.navigation-list ul li h3 a { display: block; padding: 0 0 4px 0.8em } @media print { .sting.navigation-list ul li h3 a { padding-left: 0 } } .sting.navigation-list ul li h3 a:before { content: "\e021"; left: 0; transition: left 0.4s ease; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: block; font-size: 0.7em; position: absolute; top: 3px } @media print { .sting.navigation-list ul li h3 a:before { display: none } } .sting.navigation-list ul li h3 a:hover { color: #004976 } .sting.navigation-list ul li h3 a:hover:before { left: -4px } .sting.navigation-list ol { overflow: hidden; padding: 0 3px 12px !important; list-style-type: none; margin-bottom: 0 } .sting.navigation-list ol li { width: 46%; float: left; clear: both; margin: 4px 0; border-bottom: none } .sting.navigation-list ol li:nth-child(even) { float: right; clear: none } @media (max-width: 30em) { .sting.navigation-list ol li { float: none !important; clear: both !important; width: auto !important } } .sting.navigation-list ol li a { color: #007dbb; padding-left: 1.3em; position: relative; line-height: 1.2; word-wrap: break-word } @media (max-width: 30em) { .sting.navigation-list ol li a { padding: 4px 0 8px 1.3em } } .sting.navigation-list ol li a:before { content: "\e021"; left: 5px; transition: left 0.4s ease; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: block; font-size: 0.65em; position: absolute; top: 4px } @media (max-width: 30em) { .sting.navigation-list ol li a:before { top: 8px } } .sting.navigation-list ol li a:hover { color: #004976 } .sting.navigation-list ol li a:hover:before { left: 1px } .sting.navigation-list a.facebook::before { font-size: 0.85em; margin-top: -2px } .sting.navigation-list a div.cta-link span:after { content: "\e025"; font-size: 0.9em } .sting.navigation-list.open a div.cta-link span:after { content: "\e01f" } .sting.navigation-list a:hover div.cta-link span { background-color: #004976 !important } .sting.navigation-list.green h3 { padding-left: 0 } @media (min-width: 93.75em) { .sting.navigation-list.green h3 { padding-left: 0 } } .sting.navigation-list.green h3:before { display: none } .sting.navigation-list.green ul h3 { padding-left: 0 } .sting.navigation-list.green ul h3:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "" } .sting.navigation-list.green a { color: #54802d } .sting.navigation-list.green a:hover { color: #36531d } .sting.navigation-list.blue ul h3 { padding-left: 0 } .sting.navigation-list.blue ul h3:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "" } .theme-ubrand .sting { background-image: none } .theme-ubrand .sting [class*="column"] + [class*="column"]:last-child { float: left } .theme-ubrand .sting h2 { font-size: 1.625em; line-height: 32px; letter-spacing: -0.73px } .theme-ubrand .sting .image-mask { border: 0; margin-bottom: 20px } .theme-ubrand .sting .image-mask::after { background-image: none } .theme-ubrand .sting .sting__link .image-mask { margin-bottom: 8px } .theme-ubrand .sting div.cta-link { background-image: none; padding-top: 20px } .theme-ubrand .sting div.cta-link::before { content: ''; background: url(../images/ubrand/squiggle.svg) repeat-x; display: inline-block; vertical-align: top; position: absolute; height: 8px; width: 103px; top: 0; left: 0 } .theme-ubrand .sting div.cta-link p, .theme-ubrand .sting div.cta-link span { background: none; box-shadow: none; color: #F43E4F; font-family: "ShireTypesPro-Derbyshire", Arial, Helvetica, sans-serif; letter-spacing: 2.25px; font-size: 1.125em; padding-left: 0 } .theme-ubrand .sting div.cta-link p::after, .theme-ubrand .sting div.cta-link span::after { content: none } .theme-ubrand .sting div.cta-link p:hover, .theme-ubrand .sting div.cta-link span:hover { padding-top: 12px } @-webkit-keyframes animateSquiggle { from { background-position: 0 } to { background-position: 103px } } @keyframes animateSquiggle { from { background-position: 0 } to { background-position: 103px } } .theme-ubrand .sting a:hover .cta-link::before { -webkit-animation: animateSquiggle 2s linear infinite; animation: animateSquiggle 2s linear infinite } .theme-ubrand .sting a:hover .cta-link span { color: #b20a1a } .float-right.sting { margin-bottom: 0; padding-bottom: 0; overflow: visible } @media (max-width: 47.9375em) { .float-right.sting { width: 100% } } @media (max-width: 30em) { .float-right.sting { width: auto; margin-bottom: 0; padding-bottom: 40px } } .js div.sting.sting-carousel { visibility: hidden } @media print { .js div.sting.sting-carousel { visibility: visible } } @media print { .bxslider * { display: block !important } } div.sting.sting-carousel { overflow: visible; background: none; clear: both } div.sting.sting-carousel p { margin-bottom: 0.85em } div.sting.sting-carousel .image-mask { float: right; width: 50%; margin-left: 40px; margin-right: 2px } @media (max-width: 30em) { div.sting.sting-carousel .image-mask { float: none; width: auto; margin-left: 0 } } div.sting.sting-carousel > ul { list-style: none } div.sting.sting-carousel > ul > li { clear: both } .js div.sting.sting-carousel > ul > li { display: none } @media print { .js div.sting.sting-carousel > ul > li { display: list-item } } .js div.sting.sting-carousel > ul > li:first-child { display: list-item } div.sting.sting-carousel li a { color: #007dbb; display: block; font-weight: bold; width: 100% } div.sting.sting-carousel li a::before { top: 2px !important } div.sting.sting-carousel li a:hover { color: #004976 } @media print { div.sting.sting-carousel li a { float: none } } div.sting.sting-carousel li div { overflow: hidden } div.sting.sting-carousel .bx-wrapper { position: relative } div.sting.sting-carousel .bx-controls { text-align: center } div.sting.sting-carousel .bx-default-pager { width: auto; display: inline-block; margin: 0 auto; padding: 0 0 13px } div.sting.sting-carousel .bx-viewport:after { display: none } div.sting.sting-carousel .bx-controls-direction { top: auto; bottom: 4px; position: absolute; width: 100% } @media (max-width: 48em) { div.sting.sting-carousel .bx-controls-direction { bottom: 6px } } div.sting.sting-carousel .bx-controls-direction a { display: inline-block; color: #007dbb; width: 44px; height: 44px; line-height: 48px } div.sting.sting-carousel .bx-controls-direction a.bx-prev { left: -46% } div.sting.sting-carousel .bx-controls-direction a.bx-next { right: -46% } div.sting.sting-carousel h3, div.sting.sting-carousel p { padding: 0 0 0 25px } @media (max-width: 30em) { div.sting.sting-carousel h3, div.sting.sting-carousel p { padding: 0 } } div.sting.sting-carousel h3 { padding-top: 40px; padding-bottom: 10px } @media (max-width: 30em) { div.sting.sting-carousel h3 { padding-top: 20px } } .large-4 div.sting.sting-carousel .image-mask, .large-4 div.sting.sting-carousel .image-mask { float: none; width: auto; margin-left: 0 } .large-4 div.sting.sting-carousel h3, .large-4 div.sting.sting-carousel p, .large-4 div.sting.sting-carousel h3, .large-4 div.sting.sting-carousel p { padding: 0 } .large-12 div.sting { padding-bottom: 0 } .primary-nav { position: relative; z-index: 33 } .primary-nav:after { content: ""; display: block; position: absolute; background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 6px; width: 100%; height: 6px } .primary-nav__logo { height: 40px; display: block; margin: 16px 0; text-indent: -9999em; width: 45px; color: transparent; } .primary-nav__logo:hover { color: transparent } .no-svg .primary-nav__logo { background: url(../images/unilever_logo.png) 0 0 no-repeat; background-size: 100% auto; background-position: center 100% } .primary-nav__logo img { bottom: 0; height: 100%; height: auto\9; left: 0; position: absolute } .no-svg .primary-nav__logo img { display: none } .primary-nav__logo .svg { display: block; background: url(../images/logo_blue.png) no-repeat; background-size: auto auto; transition: 0.45s ease; background-size: 100%; height: 100%; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .primary-nav__logo img { height: auto } } @media (min-width: 57.5em) { .primary-nav__logo { width: 90px; height: 80px; margin: 38px 0 20px 0.9375em; position: absolute; top: calc(50% - 40px); margin: 0; } } @media print { .primary-nav__logo { display: none } } .primary-nav__logo--wide { width: 130px; height: 56px; margin: 11px 5px } @media (min-width: 57.5em) { .primary-nav__logo--wide { width: 160px; height: 72px; margin: 30px 0 10px 0.9375em } } @media (min-width: 93.75em) { .primary-nav__logo--wide { width: 200px; margin-top: 22px } } .primary-nav__print-logo { display: none; width: 2cm; height: auto; margin: 0.5cm } @media print { .primary-nav__print-logo { display: block } } .primary-nav__language-selector { background: #007dbb; border-right: 1px solid rgba(255, 255, 255, 0.3); color: #FFF; display: block; float: right; position: absolute; right: 140px; top: 25px } .primary-nav__language-selector a { border-right: none; color: rgba(255, 255, 255, 0.3); float: left; font-size: .8125rem; line-height: 1; padding: 7px; transition: all 0.3s ease } .primary-nav__language-selector a.active { color: #fff; background-color: transparent; position: relative } .primary-nav__language-selector a.active::after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; display: block; left: 50%; margin-left: -6px } .primary-nav__language-selector a:hover { background-color: transparent; color: #fff } @media (min-width: 57.5em) { .primary-nav__language-selector { display: none } } @media print { .primary-nav__language-selector { display: none } } .primary-nav__search-toggle { cursor: pointer; display: block; padding: 0 21px 36px; position: absolute; right: 80px; text-align: center; text-indent: -9999em; top: 19px; width: 36px } .primary-nav__search-toggle:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e00d"; font-size: 2rem; left: 0px; position: absolute; text-align: center; text-indent: 0px; top: 4px; width: 36px } @media screen and (min-width: 57.5em) { .primary-nav__search-toggle { display: none } } @media print { .primary-nav__search-toggle { display: none } } .primary-nav__menu-toggle { margin-top: 25px; } .language.min { display: inline-block; } .language.min ul { list-style: none; margin: 20px 0 0 0; margin-top: 25px; } .language.min ul a { color: #007dbb; } .primary-nav__menu-toggle span { display: block; position: relative; background-color: #007dbb; display: block; font-size: 0; width: 30px; height: 3px } .primary-nav__menu-toggle span:before, .primary-nav__menu-toggle span:after { content: ''; width: 100%; height: 3px; background-color: #007dbb; position: absolute } .primary-nav__menu-toggle span:before { top: 20px } .primary-nav__menu-toggle span:after { top: 10px } @media screen and (min-width: 57.5em) { .primary-nav__menu-toggle { display: none } .language.min { display: none } } @media print { .primary-nav__menu-toggle { display: none } } .primary-nav__list { border-radius: 0; box-shadow: none; display: none; top: 0; left: 0; margin: 0; clear: both; margin-left: -0.9375em; margin-right: -0.9375em } @media (min-width: 57.5em) { .primary-nav__list { display: block; float: right; /*margin: 3.9em 0 0 0;*/ clear: none } .primary-nav__list::after, .primary-nav__list::before { display: none } } @media print { .primary-nav__list { display: none !important } } .no-js .primary-nav__list { display: block } .primary-nav__list-item { border: none; border-top: 1px solid #ccc; display: block; padding: 0; background: transparent; border-radius: 5px 5px 0 0; transition: background ease 0.3s } .primary-nav__list-item.open { background-color: #ffffff; position: relative; } .primary-nav__list-item:hover { background-color: #ffffff } .primary-nav__list-item:first-child { border: none } @media (min-width: 57.5em) { .primary-nav__list-item { border-top: 0px; float: left } } .primary-nav__link { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; transition: all 0.3s ease; position: relative; clear: both; color: #007dbb; display: block; font-size: 1.2em; font-weight: normal; border-bottom: 2px solid transparent; letter-spacing: -0.02em; cursor: pointer; padding: 10px 1.7em 10px 0.9em } .font--arial .primary-nav__link { font-family: Arial, Helvetica, sans-serif } .primary-nav__link::before { position: absolute; bottom: -2px; height: 0; background: #007dbb; width: 100%; pointer-events: none; left: 0; transition: all ease 0.3s; content: "" } .open .primary-nav__link::before { height: 5px } .primary-nav__link:hover::before, .primary-nav__list-item.active .primary-nav__link::before { height: 5px } .primary-nav__link[data-id]::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; transition: 0.3s -webkit-transform ease; transition: 0.3s transform ease; content: "\e025"; color: #999; line-height: 1; position: absolute; font-size: 0.55em; top: 1.7em; right: 1.2em } .open .primary-nav__link { border-radius: 5px 5px 0 0; color: #004976 } .open .primary-nav__link:after { color: #004976; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .nav--reduced .primary-nav__link { font-size: 0.95em; padding-bottom: 13px } @media (min-width: 67.5em) { .nav--reduced .primary-nav__link { font-size: 1.1em; padding-bottom: 10px } } @media (min-width: 93.75em) { .nav--reduced .primary-nav__link { font-size: 1.2em } } .primary-nav__subnav { display: none; padding: 0.9375em 0; background-color: #ffffff; z-index: 33; padding: 0.9375em; position: absolute; left: -300px; right: -300px; overflow: hidden; transition: 0.3s all ease; height: 265px; } .open .primary-nav__subnav { display: block } .primary-nav__subnav.disabled { background: #eee } .primary-nav__subnav.disabled a, .primary-nav__subnav.disabled span { color: rgba(0, 0, 0, 0.4) } .primary-nav__subnav.disabled a:focus { color: #004976 } .primary-nav__subnav.disabled .primary-nav__button { color: #ffffff; background: rgba(0, 0, 0, 0.4) } .primary-nav__subnav.disabled--dark { background: #ddd } .primary-nav__subnav img { margin-bottom: 1.5em; width: 100%; border-radius: 5px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2) } .primary-nav__subnav p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; margin: 0 0 30px; font-size: 14px; line-height: 1.6 } .font--arial .primary-nav__subnav p { font-family: Arial, Helvetica, sans-serif } .primary-nav__subnav ul { list-style-type: none; width: 100%; display: inline-block; margin: 0; vertical-align: top } .primary-nav__subnav a, .primary-nav__subnav span { display: inline-block; padding: 0 10px 15px; font-weight: bold; line-height: 1.3; font-size: 15px; vertical-align: top } .primary-nav__subnav a:before, .primary-nav__subnav a:after, .primary-nav__subnav span:before, .primary-nav__subnav span:after { display: none; font-family: 'unilever-iconfont'; speak: none; -webkit-font-smoothing: antialiased; font-size: 0.6em; content: "\e021"; vertical-align: middle } .primary-nav__subnav a.has-children:after, .primary-nav__subnav span.has-children:after { display: inline; margin-left: 0.8em } .primary-nav__subnav a.back, .primary-nav__subnav span.back { position: absolute; font-size: .875rem; padding-left: 2px; padding-top: 8px; font-weight: normal; padding-left: 0 } .primary-nav__subnav a.back:before, .primary-nav__subnav a.back:after, .primary-nav__subnav span.back:before, .primary-nav__subnav span.back:after { display: none; font-family: 'unilever-iconfont'; content: "\e023"; line-height: 1 } .primary-nav__subnav a.back:before, .primary-nav__subnav span.back:before { display: inline; margin-right: 0.6em } .primary-nav__subnav span { cursor: pointer; color: #007dbb } .primary-nav__subnav .large-6:first-child { background: url(../images/vr-flipped.png) right 0 no-repeat; background-size: 5px 100% } .primary-nav__subnav .sr-only:focus { display: block; position: absolute; display: inline-block } .primary-nav__list-section { padding-left: 20px; padding-right: 20px } .primary-nav__sublinks { margin-bottom: 30px; transition: 0.3s height ease } .primary-nav__sublinks-columns.end { padding-left: 0 } .primary-nav__sublinks .primary-nav__group-title { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; color: #666; padding: 5px 0 0 10px; margin-bottom: 5px } .primary-nav__button { color: #fff; background-color: #007dbb; padding: 10px !important; border-radius: 4px; margin: 0px 0 30px 0; transition: background-color ease 0.3s } .primary-nav__button[hover=true]:hover, .primary-nav__button[hover=true]:focus { color: #fff !important; background-color: #004976 !important } .primary-nav__button[hover=false]:hover, .primary-nav__button[hover=false]:focus { color: #fff; } .primary-nav__button:after { margin-left: 2.4em !important } .primary-nav__off-canvas { background: #ffffff; position: absolute; padding: 20px 30px; top: 0; bottom: 0; width: 67%; transition: 0.3s all ease; left: 100%; right: 0 } .primary-nav__off-canvas a { font-size: 14px; color: rgba(0, 0, 0, 0.4) } .primary-nav__off-canvas.open { border-radius: 0; left: 33%; right: 0; box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.25) } .primary-nav__off-canvas.open.active a, .primary-nav__off-canvas.open.active span { color: #007dbb } .primary-nav__off-canvas.open.active a:hover, .primary-nav__off-canvas.open.active span:hover { color: #004976 } .primary-nav__off-canvas.open.active .primary-nav__button { color: #ffffff } .primary-nav__off-canvas.open .primary-nav__button { background-color: #007dbb; transition: background-color ease 0.3s; margin-top: 46px } .primary-nav__off-canvas.open .primary-nav__button:hover { background-color: 004976 } .primary-nav__off-canvas.open ul { width: 32% } .primary-nav__off-canvas.open .primary-nav__off-canvas { width: 85% } .primary-nav__off-canvas.open .primary-nav__off-canvas.open { left: 15% } .primary-nav__off-canvas.open .primary-nav__off-canvas.open .primary-nav__button { color: #ffffff; background-color: #007dbb } .primary-nav__off-canvas.open:before { content: ' '; display: block; opacity: 0.2; width: 50%; height: 100%; position: absolute; top: 0; left: -50% } .primary-nav__off-canvas.disabled { background-color: #eee } .primary-nav__off-canvas.disabled > .primary-nav__sublinks a { color: rgba(0, 0, 0, 0.4) } .primary-nav__off-canvas.disabled a:focus { color: #004976 } .primary-nav__off-canvas.disabled .primary-nav__button { color: #ffffff; background: rgba(0, 0, 0, 0.4) } .menu-open .content-start:after { z-index: 31; content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0 } #content-wrap { transition: 0.3s opacity ease } .secondary-nav { position: relative; background-size: 5px 100%; padding: 0 0 3em; /* display: none*/ } @media screen and (min-width: 48em) { .secondary-nav { display: block } .secondary-nav:after { background: url(../images/vr.png) right 0 no-repeat; right: 0; position: absolute; top: 0; height: 100%; width: 6px; background-size: 6px 100%; content: ""; pointer-events: none; } } .secondary-nav--no-banner { padding: 2.5em 0 3em } @media (max-width: 30em) { .secondary-nav--no-banner { padding: 1em 0 1.5em; } } .secondary-nav__list { font-size: .9375rem; list-style: none; margin: 0 } .secondary-nav__list li { border-top: 1px solid #ccc } .secondary-nav__list li.active > a, .secondary-nav__list li.active > span { color: #fff; background-color: #007dbb; display: block } .secondary-nav__list li a, .secondary-nav__list li span { padding-right: 15px; transition: background ease 0.3s; padding-top: .9em; padding-bottom: .9em; display: block; margin: 0 } .secondary-nav__list--level-1 { border-bottom: 1px solid #ccc; font-size: 1rem; font-weight: bold } .secondary-nav__list--level-1 > li:first-child { border-top: 0 } .secondary-nav__list--level-2 li:first-child { border-top: 1px solid #007dbb } .secondary-nav__list--level-2 a, .secondary-nav__list--level-2 span, .secondary-nav__list--related a, .secondary-nav__list--related span { padding-left: 20px; font-size: .9375rem } .secondary-nav__list--level-2 a:hover, .secondary-nav__list--related a:hover { background-color: #eee } .secondary-nav__list--level-3 li:first-child { border-top: 1px solid #ccc } .secondary-nav__list--level-3 a, .secondary-nav__list--level-3 span { padding-left: 40px; font-size: .875rem } .secondary-nav__list--level-4 a, .secondary-nav__list--level-4 span { padding-left: 60px; font-size: .75rem; font-weight: normal; color: inherit } .secondary-nav__list--level-5 a, .secondary-nav__list--level-5 span { padding-left: 80px } .slp-menu-header { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; border-radius: 0 0 0 10px; word-spacing: 300px; text-align: center; color: #fff; font-size: 1.1875em; line-height: 20px; padding: 20px; display: block } .font--arial .slp-menu-header { font-family: Arial, Helvetica, sans-serif } .slp-menu-header:before { font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: block; font-size: 2em; margin-bottom: 10px } .slp-menu-header--green { background-color: #54802d } .slp-menu-header--green:before { content: "\e02c" } .slp-menu-header--blue { background-color: #007dbb } .slp-menu-header--blue:before { content: "\e02a" } .slp-menu-header--pink { background-color: #d0006f } .slp-menu-header--pink:before { content: "\e02b" } .basic-crumbs { color: #999; font-size: .75rem; list-style: none; margin: 1em 0; overflow: hidden; white-space: nowrap; } .basic-crumbs li { font-size: .85rem; } @media print, (min-width: 48em) { .basic-crumbs { display: block; margin: 1.5em 0 2em 0; } } @media print { .basic-crumbs { display: none } } .basic-crumbs li { display: inline-block } .basic-crumbs li ul { display: none } .basic-crumbs li a { color: #999; margin-right: 10px } .basic-crumbs li a:hover { color: #007dbb } .basic-crumbs li a::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; font-size: 0.7em; margin-left: 10px } .basic-crumbs li a.current::after { content: none } .basic-crumbs li a.current { color: #666 } .large-9.columns .basic-crumbs { margin-bottom: 20px } div.footer { width: auto; max-width: inherit; min-width: inherit; background-position: center bottom; background-attachment: fixed; background-repeat: no-repeat; box-shadow: 0 11px 6px -9px rgba(0, 0, 0, 0.15) inset; margin-top: 2em; padding-bottom: 405px; position: static; clear: both } @media (max-width: 48em) { div.footer { margin-top: 0; padding-bottom: 0; background: none } } @media print { div.footer { padding-bottom: 0 } } div.footer footer { padding-bottom: 0 } footer { background: url(../images/hr.png) 0 0 no-repeat #007dbb; background-size: 100% 6px; box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); } @media (max-width: 48em) { footer { background-color: #eee } } footer a.external:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01a"; padding-right: 2px; vertical-align: bottom } footer a.download::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01d"; padding-right: 2px; vertical-align: bottom } footer .row { background: none; padding: 15px 0; text-align: center; position: relative; z-index: 1 } @media (max-width: 48em) { footer .row { padding: 0; text-align: left } } @media (max-width: 48em) { footer .row .columns { padding: 0 } } footer .row .multi-country { margin: 0.5em 0 1.5em; text-align: center } @media (max-width: 48em) { footer .row .multi-country { text-align: center; padding: 0 1em } } footer .row .multi-country p, footer .row .multi-country li { color: rgba(255, 255, 255, 0.75); display: inline-block; float: none; } @media print { footer .row .multi-country ul { display: inline-block } } footer .row .multi-country li { padding-right: 10px } footer .row p { margin: 0 8px 0 0; font-size: 0.8em; vertical-align: top; display: inline-block; color: #fff } @media (max-width: 48em) { footer .row .multi-country p, footer .row .multi-country li { color: #666; padding: 1em 0 0 } footer .row .multi-country li { padding-right: 10px; } footer .row p { display: block; padding: 15px; color: #666 } } footer .row ul { list-style: none; margin: 0; vertical-align: top; display: inline-block; font-size: 0.8em } @media (max-width: 48em) { footer .row ul { display: block } } @media print { footer .row ul { display: none } } footer .row ul li { float: left; border-right: 1px solid #ccc } @media (max-width: 48em) { footer .row ul li { border-right: none; float: none; } } footer .row ul li:last-child { border: none } footer .row ul li:last-child a { padding-right: 0 } footer .row ul li #_bapw-link { padding: 0 8px 0 3px } footer .row ul li a { display: block; padding: 0 8px; color: #fff } @media (max-width: 48em) { footer .row ul li a { padding: 0 5px; color: #007dbb } } .owl-wrapper { position: relative } .owl-wrapper.grabbing {} .owl-item { float: left } .owl-wrapper-outer { overflow: hidden } .owl-stage-outer { -ms-touch-action: manipulation; touch-action: manipulation } .owl-pagination { margin: 20px 0 0 0; text-align: center } .owl-pagination .owl-page { display: inline-block; margin: 0 5px } .owl-pagination .owl-page span { background: #ccc; border-radius: 50%; cursor: pointer; display: block; height: 10px; width: 10px; transition: background-color 0.3s ease } .owl-pagination .owl-page span:hover { background-color: #999 } .owl-pagination .owl-page.active span { background: #007dbb; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); cursor: default } .owl-pagination .owl-page.active span:hover { background-color: #007dbb } .owl-dots { margin: 20px 0 0 0; text-align: center } .owl-dots.disabled { display: none; padding: 0; margin: 0 } .owl-dots .owl-dot { display: inline-block; padding: 0; margin: 0 5px; background: transparent; box-shadow: none; border: none; cursor: default } .owl-dots .owl-dot span { background: #ccc; border-radius: 50%; cursor: pointer; display: block; height: 10px; width: 10px; transition: background-color 0.3s ease } .owl-dots .owl-dot span:hover { background-color: #999 } .owl-dots .owl-dot.active span { background: #007dbb; cursor: default } .owl-dots .owl-dot.active span:hover { background-color: #007dbb } .owl-nav.disabled { display: none; padding: 0; margin: 0 } .owl-prev, .owl-next { font-weight: normal; color: #ccc; cursor: pointer; display: block; position: absolute; top: 0px; background: transparent; padding: 0; margin-bottom: 0; border: none; box-shadow: none; transition: color 0.3s ease } .owl-prev.disabled, .owl-prev.disabled:hover, .owl-prev.disabled:focus, .owl-next.disabled, .owl-next.disabled:hover, .owl-next.disabled:focus { background: transparent } .owl-prev::before, .owl-next::before { font-family: 'unilever-iconfont'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased } .owl-prev:hover, .owl-next:hover { color: #999; background: transparent } .owl-prev:focus, .owl-next:focus { background: transparent } .owl-prev:active, .owl-next:active { color: #007dbb; box-shadow: none } .owl-prev { left: 40% } .owl-prev::before { content: "\e023" } @media (max-width: 48em) { .owl-prev { display: none } } .owl-next { right: 40% } .owl-next::before { content: "\e021" } @media (max-width: 48em) { .owl-next { display: none } } .hide-dots .owl-pagination { display: none } .hide-dots .owl-prev { bottom: 10px } .hide-dots .owl-next { bottom: 10px } .bx-viewport { overflow: hidden; position: relative; width: 100% } .bx-viewport:before, .bx-viewport:after { background-position: 50% 100%; background-repeat: no-repeat no-repeat; content: ' '; display: block; height: 5px; overflow: hidden; position: absolute; width: 100%; z-index: 1; background-size: 130% 6px } .bx-viewport:before { background-image: url(../images/hr.png); padding-top: 5px; top: 0px } .bx-viewport:after { background-image: none; bottom: 0px; border-bottom: 1px solid #eee; padding-bottom: 5px } @media (max-width: 48em) { .bx-viewport:after { background-image: none; padding-top: 5px; top: 0px; border: none } } @media print { .bx-controls { display: none !important } } .bx-controls-direction { position: relative; top: -37px; text-align: center } @media print, (min-width: 48em) { .bx-controls-direction { top: -60px } } @media (min-width: 93.75em) { .bx-controls-direction { top: -65px } } .bx-controls-direction .bx-next, .bx-controls-direction .bx-prev { position: relative; top: 0; z-index: 510 } .bx-controls-direction .bx-next:before, .bx-controls-direction .bx-next:after, .bx-controls-direction .bx-prev:before, .bx-controls-direction .bx-prev:after { font-family: 'unilever-iconfont'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased } .bx-controls-direction .bx-next.disabled, .bx-controls-direction .bx-prev.disabled { display: none } .bx-controls-direction .bx-next:before { content: "\e021" } .bx-controls-direction .bx-prev:after { content: "\e023" } #range { margin-bottom: 3em } #range .bx-viewport:before, #range .bx-viewport:after { display: none } #range .bx-controls-direction { background: url(../images/hr.png) center top no-repeat; background-size: 100% 5px; position: relative; top: 0 !important; text-align: center; z-index: 0 } #range .bx-controls-direction .bx-next { top: 15px; right: -20px; font-size: 1.2em } #range .bx-controls-direction .bx-next:before { content: "\e021" } #range .bx-controls-direction .bx-prev { top: 15px; left: -20px; font-size: 1.2em } #range .bx-controls-direction .bx-prev:before { content: "\e023" } div.carousel { margin: 0 } @media (min-width: 93.75em) { div.carousel { margin: 0 0 1.5em } } .sting-carousel > ul { list-style-type: none } .bx-default-pager { overflow: auto; text-align: center; padding: 1em 0; z-index: 1; position: relative; margin: 0 auto } @media (max-width: 48em) { .bx-default-pager { padding-top: 0 } } .bx-default-pager .bx-pager-item { width: 25px; display: inline-block; margin: 0 0.4em } @media print, (min-width: 48em) { .bx-default-pager .bx-pager-item { width: 16px; margin: 0 0.3em } } @media (min-width: 93.75em) { .bx-default-pager .bx-pager-item { width: 25px; margin: 0 0.3em } } .bx-default-pager .bx-pager-item .bx-pager-link { text-indent: -9999em; background: #b8e2f3; border-radius: 50%; width: 25px; display: block; height: 25px; border: 2px solid #fff; overflow: hidden; transition: all 0.3s ease } @media print, (min-width: 48em) { .bx-default-pager .bx-pager-item .bx-pager-link { width: 16px; height: 16px } .bx-default-pager .bx-pager-item .bx-pager-link:hover { border-color: #ccc } } @media (min-width: 93.75em) { .bx-default-pager .bx-pager-item .bx-pager-link { height: 25px; width: 25px; border-radius: 50% } .bx-default-pager .bx-pager-item .bx-pager-link:active { border-color: #007dbb } } .bx-default-pager .bx-pager-item .bx-pager-link.active { background: #007dbb } .bx-custom-pager { position: absolute; bottom: 0px; z-index: 55 } .bx-custom-pager .bx-pager-item { background: #ccc } .bx-custom-pager .bx-pager-item .bx-pager-link.active { color: red } .banner-carousel { display: block; margin: 0 auto 5em auto; min-height: 200px; position: relative; width: 100% } .js .banner-carousel { visibility: hidden } @media (max-width: 48em) { .banner-carousel { margin-bottom: 2em } } .banner-carousel .row { background: transparent } .banner-carousel .row .columns { height: auto !important } .banner-carousel h2 { color: #004976; margin-bottom: 10px; margin-top: 1em; text-transform: none } @media (max-width: 30em) { .banner-carousel h2 { margin: 10px 0 0; padding: 0 } } .banner-carousel .content a { position: relative; padding-left: 1em } .banner-carousel .content a:hover::before { left: -4px } @media (max-width: 30em) { .banner-carousel .content a { line-height: 1.3; display: block; margin-top: 5px } } @media print { .banner-carousel .content a { display: none } } .banner-carousel .content a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding-right: 4px; left: 0px; transition: left 0.3s ease; font-size: 0.8em; position: absolute; top: 0px } .banner-carousel .content a.file:before { content: "\e01d" } .banner-carousel img { margin: 0 } .banner-carousel a { font-weight: bold } .banner-carousel .columns.content { margin-bottom: 2em } @media (max-width: 30em) { .banner-carousel .columns.content { margin-bottom: 1.2em } } .banner-carousel .columns.content .prevor { display: none; height: 100%; position: absolute; right: 100%; top: 0px; max-width: none } .banner-carousel .overlay { border-top: solid 11px #007dbb; height: 100%; position: relative } .banner-carousel .overlay img { max-width: 100% } .banner-carousel .overlay a.popup-youtube::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .banner-carousel .overlay .feature-mask-large { display: none; left: 0; max-width: none; max-height: 100%; pointer-events: none; position: absolute; top: 0 } .banner-carousel .overlay .feature-mask-small { bottom: -2px; display: block; left: 0; max-height: 100%; position: absolute; width: 100% } @media print { .banner-carousel .overlay .feature-mask-large, .banner-carousel .overlay .feature-mask-small { display: none } } @media print, (min-width: 48em) { .banner-carousel h2 { margin-top: 1em } .banner-carousel p { display: block } .banner-carousel ul li { overflow: hidden } .banner-carousel ul li > div { margin: 0 auto; max-width: 1000px } .banner-carousel .columns.image { float: right } .banner-carousel .columns.content { margin-bottom: 0 } .banner-carousel .columns.content .prevor { display: block } .banner-carousel .overlay { border-top: 0px; margin-bottom: 0 } .banner-carousel .overlay a.popup-youtube::before { top: 57%; left: 42% } .banner-carousel .overlay.position-3 a.popup-youtube::before { top: 47%; left: 38% } .banner-carousel .overlay .feature-mask-large { display: block } .banner-carousel .overlay .feature-mask-small { display: none } } @media print, print and (min-width: 48em) { .banner-carousel .overlay .feature-mask-large, .banner-carousel .overlay .feature-mask-small { display: none } } @media print, (min-width: 48em) { .banner-carousel .bx-controls { bottom: -1.5em; display: block; left: 50%; margin-left: -50%; position: absolute; width: 100%; z-index: 1 } .banner-carousel .bx-controls .bx-default-pager { overflow: inherit; padding: 0 } .banner-carousel .bx-controls .bx-controls-direction { top: -18px } } @media screen and (min-width: 48em) and (min-width: 93.75em) { .banner-carousel .bx-controls .bx-controls-direction { top: -22px } } @media (min-width: 57.5em) { .banner-carousel .bx-controls { bottom: -3em } } .image-text-carousel { display: block; margin: 3em auto 5em auto; padding: 3em 0; min-height: 200px; position: relative; width: 100% } .js .image-text-carousel { visibility: hidden } .image-text-carousel:before, .image-text-carousel:after { background-position: 50% 100%; background-repeat: no-repeat no-repeat; background-image: url(../images/hr.png); content: ' '; display: block; height: 5px; overflow: hidden; position: absolute; width: 100%; z-index: 1; background-size: 130% 6px } .image-text-carousel:before { top: 0 } .image-text-carousel:after { bottom: 0 } .image-text-carousel .bx-viewport:before, .image-text-carousel .bx-viewport:after { display: none } .image-text-carousel .columns { height: auto !important } .image-text-carousel h2 { margin: 0; text-transform: none } .image-text-carousel .content p:last-child { margin-bottom: 0 } .image-text-carousel .content a { position: relative; padding-left: 1em } .image-text-carousel .content a:hover::before { left: -4px } @media print { .image-text-carousel .content a { display: none } } .image-text-carousel .content a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding-right: 4px; left: 0px; transition: left 0.3s ease; font-size: 0.8em; position: absolute; top: 0px } .image-text-carousel .content a.file:before { content: "\e01d" } .image-text-carousel .image a { position: relative } .image-text-carousel .image p { font-size: .875rem; text-align: center } .image-text-carousel img { width: 100%; border-radius: 5px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); margin-bottom: .625rem } .image-text-carousel a { font-weight: bold } .image-text-carousel a.popup-youtube::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .image-text-carousel .bx-default-pager { display: none } .image-text-carousel .bx-controls { width: 100%; position: absolute; top: 50% } .image-text-carousel .bx-controls-direction { position: static } .image-text-carousel .bx-prev, .image-text-carousel .bx-next { position: absolute } .image-text-carousel .bx-prev { left: 0 !important } .image-text-carousel .bx-next { right: 0 !important } @media print, (min-width: 48em) { .image-text-carousel .row { margin: 0 auto !important; max-width: 90% !important } .image-text-carousel li { overflow: hidden } .image-text-carousel .image p { margin-bottom: 0; text-align: initial } .image-text-carousel .bx-controls-direction { top: 50% !important } .image-text-carousel .bx-prev, .image-text-carousel .bx-next { font-size: 2.5rem } } .search-strip { background: #004976; display: none; padding-top: .9375rem } .no-js .search-strip { display: block } .search-strip label { display: none } .search-strip__input { width: 100%; position: relative; margin-top: 2.8125rem; margin-bottom: 1.5rem } @media print, (min-width: 48em) { .search-strip__input { margin-bottom: 1.5rem } } .search-strip__input input { box-shadow: none; color: #fff; background: transparent; font-size: 1.75rem; width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; padding: 0 2.8125rem } .search-strip__input input::-ms-clear { display: none; width: 0; height: 0 } .search-strip__input input[type="search"]::-webkit-search-decoration, .search-strip__input input[type="search"]::-webkit-search-cancel-button, .search-strip__input input[type="search"]::-webkit-search-results-button, .search-strip__input input[type="search"]::-webkit-search-results-decoration { display: none } .search-strip__input input:focus, .search-strip__input input:hover { outline: none; background: none } .search-strip__input input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5) } .search-strip__input input::-moz-placeholder { color: rgba(255, 255, 255, 0.5) } .search-strip__input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) } .search-strip__input input::placeholder { color: rgba(255, 255, 255, 0.5) } .search-strip__input input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) } @media print, (min-width: 48em) { .search-strip__input input { padding: 0 3.625rem; font-size: 3rem } } .search-strip .input-clear { background: #fff; margin: 0; bottom: .875rem; top: auto !important; right: .375rem !important } .search-strip .input-clear:before { color: #004976 } .search-strip__submit { position: absolute; bottom: 0; left: 0; margin: 0; padding: .375rem .625rem; background: 0; border: 0; box-shadow: none } @media print, (min-width: 48em) { .search-strip__submit { padding: .625rem .875rem } } .search-strip__submit:before { font-family: 'unilever-iconfont'; speak: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e00d"; font-size: 1.5rem; font-weight: normal } @media print, (min-width: 48em) { .search-strip__submit:before { font-size: 1.75rem } } .search-strip__submit:focus, .search-strip__submit:hover { background: none } .search-strip p { color: #fff; margin: 0 } .search-strip__tags { list-style: none; margin: 1.5rem 0 } .search-strip__tags li { display: inline-block; margin: 0 0 1.25rem 0; margin-right: 1.25rem } .search-strip__tags a { display: block; padding: .625rem .9375rem; border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; font-weight: bold; color: white; transition: all ease 0.45s; font-size: .8125rem } .search-strip__tags a:hover { border-color: #fff; background: #007dbb } @media print, (min-width: 48em) { .search-strip__tags a { font-size: .875rem } } @media (min-width: 67.5em) { .search-strip__tags a { font-size: .9375rem } } @media (min-width: 93.75em) { .search-strip__tags a { font-size: 1rem } } .row.search .filters .row { margin-left: 0; margin-right: 0 } .row.search .filters .search-filters > div { margin-bottom: 1em !important } .row.search .filters > .row > .large-12, .row.search .filters > .row > .small-12 { margin-bottom: 0 } .row.search .content-cog { margin-bottom: 2em } .row.search .content-cog div.content { background: #007dbb; color: #fff; padding: 15px 15px 10px; border-radius: 5px 5px 5px 0px; overflow: hidden } .row.search .content-cog div.content img { float: right; width: 35%; margin: 0 0 10px 15px; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } @media (max-width: 30em) { .row.search .content-cog div.content img { display: none } } .row.search .content-cog div.content h3 { color: #fff } .row.search .content-cog div.content ul { clear: both; list-style: none } .row.search .content-cog div.content ul.multiple li { margin: 0 } .row.search .content-cog div.content ul.multiple a { display: inline-block } .row.search .content-cog div.content ul.multiple a::before { top: 0.3em } .row.search .content-cog div.content ul.multiple a img { max-width: 130px; height: auto; float: none; width: auto; margin: 0 0 10px; display: block } .row.search .content-cog div.content ul li { float: left; margin-right: 20px } .row.search .content-cog div.content a { color: #fff; font-weight: bold; position: relative; padding-left: 1em } .row.search .content-cog div.content a::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; position: absolute; left: 0.2em; top: 0; font-size: 0.75em; transition: left 0.3s ease } .row.search .content-cog div.content a:hover::before { left: -0.2em } .row.search .content-cog div.content .brands { margin-left: -15px; overflow: hidden } .row.search .content-cog div.content .brands a { display: block; float: left; margin: 0 0 15px 0; padding: 0 0 0 15px; width: 50% } .row.search .content-cog div.content .brands a::before { display: none } @media print, (min-width: 30em) { .row.search .content-cog div.content .brands a { margin: 0 0 5px 0; width: 25% } } .row.search .content-cog div.content .brands img { display: block; float: none; margin: 0; width: auto } .row.search .content-cog div.cta-link a { margin-left: 20px } .row.search .rightcol .content-cog { padding-bottom: 2em } .row.search .rightcol .content-cog div.content img { width: 100%; height: auto; float: none; margin: 0 0 1em } .row.search .search-label { font-size: .9375rem; line-height: 1.6; margin-bottom: 1.25em; text-rendering: optimizelegibility } #location-inner { position: relative; overflow: scroll; -webkit-overflow-scrolling: touch; height: 385px } #location-inner ul { position: absolute; top: 12px; left: 0; padding-left: 0; width: 100% } @media screen and (max-width: 57.5em) { #location-inner ul { padding-left: 15px } } #location-inner ul + ul { padding-left: 70px } #location-back { z-index: 20 } .location-strip { background: #004976; display: none; overflow: hidden; padding-top: 15px; position: relative } .location-strip .selector-wrap { margin: 0 0 15px } .no-js .location-strip { display: block } .location-strip:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e028"; position: absolute; right: -100px; top: -20px; font-size: 20em; opacity: 0.1; color: #fff; pointer-events: none } @media screen and (max-width: 57.5em) { .location-strip:after { display: none } } @media screen and (min-width: 93.75em) { .location-strip:after { right: 0; opacity: 0.2 } } .location-strip h2 { color: #fff } .location-strip .row { background: url(../images/hr_down.png) center bottom no-repeat; background-size: 100% 6px; position: relative; color: rgba(255, 255, 255, 0.8); height: 100% } @media screen and (max-width: 57.5em) { .location-strip .row h2:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e028"; padding-right: 8px; font-size: 0.9em; opacity: 0.8 } } .location-strip .row div.large-list { display: block; padding-bottom: 40px } .location-strip .row div.large-list .row { background: none; padding: 0 } @media screen and (max-width: 57.5em) { .location-strip .row div.large-list { display: none } } .location-strip .row div.large-list h3 { color: #fff; clear: both; border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin: 0 0 10px; padding: 20px 0 5px } .location-strip .row div.large-list ul.location-list { list-style: none; margin-bottom: 0 } @media screen and (max-width: 57.5em) { .location-strip .row div.large-list ul.location-list { float: none; width: auto } } .location-strip .row div.large-list ul.location-list li { width: 100% } @media screen and (max-width: 57.5em) { .location-strip .row div.large-list ul.location-list li { float: left; width: 50%; margin-bottom: 0 } .location-strip .row div.large-list ul.location-list li:nth-child(odd) { clear: both } } .location-strip .row div.large-list ul.location-list li a { color: #fff; opacity: 0.8; display: block } @media screen and (max-width: 57.5em) { .location-strip .row div.large-list ul.location-list li a { font-size: .875rem; padding: 5px 0 } } .location-strip .row div.large-list ul.location-list li a:hover { opacity: 1 } .location-strip .row form { float: left; clear: both; margin: 10px 0 5px; width: 58%; position: relative } .location-strip .row form.success .tick { position: absolute; top: 11px; right: 22%; color: green; padding-right: 30px; margin: 0px; font-size: .9375rem } @media screen and (max-width: 57.5em) { .location-strip .row form.success .tick { font-size: .875rem } } @media screen and (max-width: 30em) { .location-strip .row form.success .tick { font-size: .8125rem; padding-right: 20px } } .location-strip .row form.success .tick:after { content: ''; position: absolute; top: 50%; right: 0%; margin: -7px 0 0 -10px; height: 5px; width: 16px; border: solid green; border-width: 0 0 3px 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: 0 0 1px white; box-sizing: initial; -moz-box-sizing: initial; -webkit-box-sizing: initial } @media screen and (max-width: 30em) { .location-strip .row form.success .tick:after { width: 12px; border-width: 0 0 3px 3px } } .location-strip .row form.fail .cross { position: absolute; top: 11px; right: 22%; color: #DA291C; padding-right: 30px; margin: 0px; font-size: .9375rem } @media screen and (max-width: 57.5em) { .location-strip .row form.fail .cross { font-size: .875rem } } @media screen and (max-width: 30em) { .location-strip .row form.fail .cross { font-size: .8125rem; padding-right: 20px } } .location-strip .row form.fail .cross > span { width: 20px; height: 20px; position: absolute; right: 0px; top: -2px; display: block; z-index: 1000 } @media screen and (max-width: 30em) { .location-strip .row form.fail .cross > span { width: 16px; height: 16px } } .location-strip .row form.fail .cross > span:after, .location-strip .row form.fail .cross > span:before { content: ""; position: absolute; z-index: -1; background: #d00; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg) } .location-strip .row form.fail .cross > span:before { left: 50%; width: 10%; margin-left: -5%; height: 100% } .location-strip .row form.fail .cross > span:after { top: 50%; height: 10%; margin-top: -5%; width: 100% } @media screen and (max-width: 57.5em) { .location-strip .row form { clear: both; width: 100% } } .location-strip .row form label { display: none } .location-strip .row form input { border-radius: 2px; border: solid 1px #ccc; padding: 0.6em; background-color: #f7f7f7; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); width: 80%; float: left; transition: all 0.3s ease } .location-strip .row form input:focus { border-color: white; background-color: #fafafa } .location-strip .row form input[type="submit"] { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background: #007dbb; display: block; font-size: 0.8125em; text-transform: uppercase; padding: 12px 10px 6px 13px; border-radius: 10px; width: 18%; position: relative; border: 0px; float: right; top: 0px; margin-right: 2%; max-width: 100px } .font--arial .location-strip .row form input[type="submit"] { font-family: Arial, Helvetica, sans-serif } @media screen and (max-width: 30em) { .location-strip .row form input[type="submit"] { padding: 9px 10px 5px 10px } } .location-strip .row p.locate-me { float: left; text-align: left; width: 40% } @media screen and (max-width: 57.5em) { .location-strip .row p.locate-me { width: auto; float: none; clear: both; text-align: left; margin-top: 15px } } .location-strip .row p { margin: 0 0 10px } .location-strip .row p.locate-me { margin: 10px 0 5px } @media screen and (max-width: 30em) { .location-strip .row p.locate-me { margin: 0 } } .location-strip .row p.locate-me a:before { content: "\e600"; font-size: 1em; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: inline; padding-right: 7px } .location-strip .row p.locate-me a:after { content: "\e021"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; padding-left: 7px; font-size: 0.7em } .location-strip .row p a { font-weight: bold; color: #fff } .location-strip .row .location-panel { clear: both; margin: 10px 0; overflow: hidden; z-index: 2; position: relative; display: none } @media screen and (max-width: 57.5em) { .location-strip .row .location-panel { display: block } } .location-strip .row .location-panel button#location-back, .location-strip .row .location-panel a#location-back { display: block; text-indent: -9999px; height: 100%; width: 55px; position: absolute; background: rgba(0, 0, 0, 0.4); color: #fff; opacity: 0.5; top: 0; left: -55px; box-shadow: none; border: 0; transition: all 0.3s ease } .location-strip .row .location-panel button#location-back:after, .location-strip .row .location-panel a#location-back:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; top: 40.5%; left: 11px; content: "\e023"; font-size: 1.5em; z-index: 3; display: block; text-indent: 0 } @media screen and (max-width: 30em) { .location-strip .row .location-panel button#location-back:after, .location-strip .row .location-panel a#location-back:after { top: 43.5% } } .location-strip .row .location-panel button#location-back:hover, .location-strip .row .location-panel a#location-back:hover { background: rgba(0, 0, 0, 0.6); opacity: 1 } @media screen and (max-width: 57.5em) { .location-strip .row .location-panel { background-color: rgba(0, 0, 0, 0.2); height: 100% } } .location-strip .row .location-panel p { margin: 10px 0 } @media screen and (max-width: 57.5em) { .location-strip .row .location-panel p { margin-left: 15px } } .location-strip .row .location-panel ul { list-style: none; margin-bottom: 0 } .location-strip .row .location-panel ul li { display: inline-block; margin: 0 8px 10px 0 } .location-strip .row .location-panel ul li ul { display: none } @media screen and (max-width: 30em) { .location-strip .row .location-panel ul li { display: block; margin-right: 15px; float: none; width: auto } } .location-strip .row .location-panel ul li button, .location-strip .row .location-panel ul li a { display: block; background: #71c5e8; padding: 5px 10px; font-weight: bold; border-radius: 5px; font-size: .875em; border: 2px solid rgba(255, 255, 255, 0.35); color: #004976; width: 100%; text-align: left; margin: 0; line-height: inherit; transition: background 0.3s ease } @media screen and (min-width: 93.75em) { .location-strip .row .location-panel ul li button, .location-strip .row .location-panel ul li a { font-size: 1em } } .location-strip .row .location-panel ul li button:after, .location-strip .row .location-panel ul li a:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: inline-block; content: "\e022"; padding-left: 7px } @media screen and (max-width: 30em) { .location-strip .row .location-panel ul li button:after, .location-strip .row .location-panel ul li a:after { float: right } } .location-strip .row .location-panel ul li button:before, .location-strip .row .location-panel ul li a:before { display: none } .location-strip .row .location-panel ul li button:hover, .location-strip .row .location-panel ul li a:hover { background: #fff } .location-strip .row .location-panel ul li button:active, .location-strip .row .location-panel ul li a:active { top: 2px; position: relative } .ui-autocomplete { padding: 0; list-style: none; background-color: #fff; width: 218px; border: 1px solid #b8e2f3; max-height: 350px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; opacity: 1 !important } .ui-autocomplete .ui-menu-item { border-top: 1px solid #b8e2f3; display: block; padding: 4px 6px; color: #666; cursor: pointer; font-size: .875rem } .ui-autocomplete .ui-menu-item.ui-state-hover { background-color: #007dbb; color: #fff } .ui-autocomplete:first-child a { border-top: none } .no-js .wordle { font-size: 14px } div.wordle { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; overflow: hidden; margin-bottom: 3em; padding: 2.2em 10px 0; font-size: 2px } .font--din div.wordle { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial div.wordle { font-family: Arial, Helvetica, sans-serif } @media print { div.wordle.bigtext > * { display: inline; font-size: 1.25rem !important; white-space: normal; text-align: justify } } div.wordle.green span:nth-child(odd) { color: #84bd00 } div.wordle.green span:nth-child(even) { color: #54802d } div.wordle.pink span:nth-child(odd) { color: #d0006f } div.wordle.pink span:nth-child(even) { color: #722257 } div.wordle.orange span:nth-child(odd) { color: #ed8b00 } div.wordle.orange span:nth-child(even) { color: #ffc72c } div.wordle.blue span:nth-child(even) { color: #004976 } div.wordle.blue span:nth-child(odd) { color: #007dbb } .share-toolbar { line-height: 1; transition: all 0.3s ease; margin-bottom: 1em; background: #eee; background-size: 100% 6px; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25); padding: 0; background: url(../images/hr_down.png) center bottom no-repeat #eee; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0) } .share-toolbar:hover { background-color: #fff; background-color: #eee } .share-toolbar .title { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; float: none; padding: 0; font-size: 1em; margin-right: 1em; float: left; text-align: center; float: none; color: #007dbb; line-height: 1.25; background: url(../images/hr.png) center 0 no-repeat transparent; padding: 10px 0; margin: 0; cursor: pointer; font-size: 1.125em; transition: all 0.3s ease } .font--arial .share-toolbar .title { font-family: Arial, Helvetica, sans-serif } .share-toolbar .title:hover { background-color: #eee } .share-toolbar .title:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e00c"; padding: 0 7px 0 0 } .share-toolbar .title:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; padding: 0 0 0 7px; font-size: 0.6em } .share-toolbar .title.visible { background-color: #007dbb; color: #fff } .share-toolbar .title.visible:after { content: "\e01f" } .share-toolbar ul { list-style: none; margin: 0; padding: 0; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0); display: none; text-align: center; padding: 5px 0 5px } .share-toolbar ul li { margin: 5px; display: inline-block; margin-left: 5px; padding: 0; line-height: 1 } .share-toolbar ul li a { display: block } @media print, (min-width: 48em) { .share-toolbar { border-radius: 5px 0px 0px 5px; background: #eee; position: fixed; right: 0; top: 30%; z-index: 200; transition: 0.5s ease; padding: 0.5em 0.3em 0.5em 0.5em; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25) } .share-toolbar .title { background: none; padding: 0; cursor: pointer; color: #007dbb } .share-toolbar .title span { display: none } .share-toolbar .title:after { display: none } .share-toolbar .title:before { font-size: 1.875rem } .share-toolbar .title.visible { background: none; color: #007dbb } .share-toolbar .title.open:before { color: #fff } .share-toolbar ul { display: none !important; margin-top: 5px; transition: 0.5s ease; width: 45px; padding: 4px; float: left; border-radius: 0 0 0 5px } .share-toolbar ul li { display: table; margin: 10px 0 } .share-toolbar ul li span::before { font-size: 1.875rem } .share-toolbar.open {} .share-toolbar.open ul { display: block !important } } @media print { .share-toolbar { display: none } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } div.preheader { /* background: url(../images/hr_down.png) center bottom no-repeat #007dbb;*/ display: none } .language.min div.preheader { display: block; } .language.min .lcation-menu { background: #004976; position: absolute; top: 0; right: 0; height: 100vh; width: 75%; margin: 0; z-index: 9; box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); right: -100%; transition: right ease 0.3s; } .language.min .lcation-menu.active { right: 0 } .language.min .lcation-menu li { font-size: .875rem; cursor: pointer; line-height: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; list-style: none; padding: 15px; } .language.min ul a { color: white; } @media (min-width: 57.5em) { div.preheader { display: block } } @media print { div.preheader { display: none } } div.preheader .row { background: transparent } div.preheader .row .preheader-container { float: right } div.preheader ul { float: left; font-size: .8125em; list-style: none; margin: 0 } div.preheader ul li { display: block; float: left } div.preheader a.location ul li { float: unset; width: 100%; } div.preheader ul li a { transition: background 0.3s ease; transition: color 0.45s ease; background-color: transparent; /* border-right: 1px solid rgba(255, 255, 255, 0.3);*/ /*color: #fff;*/ display: block; float: left; font-weight: bold; line-height: 1.6; padding: 7px 15px; position: relative } div.preheader ul li a:hover { color: #fff; } div.preheader ul li ul li { width: 100%; } div.preheader ul li ul li a { border-right: none; width: 100%; color: #fff; } @media screen and (min-width: 93.75em) { div.preheader ul li a { padding: 7px 20px } } @media screen and (max-width: 30em) { div.preheader ul li a { line-height: 2; padding: 7px 15px } } div.preheader ul li a.active, div.preheader ul li a:hover { background-color: #004976 } .min div.preheader ul li a, .min div.preheader ul li a.active, .min div.preheader ul li a:hover { background-color: transparent; color: #004976; } div.preheader ul li a.search span { display: none } @media (min-width: 57.5em) { div.preheader ul li a.search span { display: inline-block } } div.preheader ul li a.search::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e00d"; display: inline; font-size: 1.1em; line-height: 1; text-align: center } @media (min-width: 57.5em) { div.preheader ul li a.search::before { padding-right: 5px } } div.preheader ul li a[data-target="#careers"]:after, div.preheader ul li a[data-target="#investors"]:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; padding-left: 10px; color: #d2dfe6; font-size: 0.8em } div.preheader ul li a[data-target="#careers"].active:after, div.preheader ul li a[data-target="#investors"].active:after { content: "\e01f" } div.preheader ul li a.location { padding-left: 38px } @media screen and (max-width: 30em) { div.preheader ul li a.location { padding: 0; width: 30px; } } div.preheader ul li a.location:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e028"; line-height: 1; font-size: 1.2em; top: 8px; left: 11px; position: absolute } @media screen and (max-width: 30em) { div.preheader ul li a.location:before { font-size: 1.6em; left: 12px; top: 9px } } @media screen and (min-width: 93.75em) { div.preheader ul li a.location:before { top: 9px } } div.preheader ul li a.location:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; content: ""; font-size: .8125em; font-weight: normal; padding-left: 10px; color: #d2dfe6 } @media screen and (max-width: 93.75em) { div.preheader ul li a.location:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; content: ""; } } @media screen and (max-width: 540px) { div.preheader ul li a.location:after { font-size: 0.8em } } .language.min div.preheader ul li a.location:before { font-size: 2.2em; left: 0; top: 0 } div.preheader ul li a.location.active:before { -webkit-transform-origin: 50% 50%; -webkit-animation: rotate 3s linear infinite } div.preheader ul li a.location.active:after { color: #fff } @media screen and (max-width: 93.75em) { div.preheader ul li a.location.active:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01f" } } div.preheader ul.language-selector { border-right: 1px solid rgba(255, 255, 255, 0.3) } div.preheader ul.language-selector li:first-child a { padding-right: 10px } div.preheader ul.language-selector li:last-child a { padding-left: 10px } div.preheader ul.language-selector li:last-child a.active::after { margin-left: -8px } div.preheader ul.language-selector li a { opacity: 0.5; border-right: none; transition: all 0.3s ease } div.preheader ul.language-selector li a.active { opacity: 1; background-color: transparent; position: relative } div.preheader ul.language-selector li a.active::after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; display: block; left: 50%; margin-left: -2px } div.preheader ul.language-selector li a:hover { background-color: transparent; opacity: 1 } div.preheader ul.social-links { border-left: 1px solid rgba(255, 255, 255, 0.3) } div.preheader ul.social-links li { border: none } div.preheader ul.social-links li a { text-indent: -9999em; position: relative; line-height: 0.8 } div.preheader ul.social-links li a:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; text-indent: 0; display: block } div.preheader ul.social-links li a.facebook:after { content: "\e019"; margin-top: -7px; font-size: 1.6em; line-height: 0.8 } div.preheader ul.social-links li a.twitter:after { content: "\ea91"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.youtube:after { content: "\e006"; margin-top: -7px; font-size: 1.6em; line-height: 0.8 } div.preheader ul.social-links li a.linkedin:after { content: "\e031"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.vimeo:after { content: "\e027"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.vimeo_alt:after { content: "\e602"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.youku:after { content: "\e603"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.vk:after { content: "\e604"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.vino:after { content: "\e605"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.tv-sohu-com:after { content: "\e606"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.tumblr:after { content: "\e609"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.tudou:after { content: "\e60a"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.tecent-wechat:after { content: "\e60b"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.snapchat:after { content: "\e60c"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.sinaweibo:after { content: "\e60d"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.pinterest:after { content: "\e60e"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.odnoklassniki-ru:after { content: "\e60f"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.letv-com:after { content: "\e610"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.instagram:after { content: "\e611"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.foursquare:after { content: "\e613"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.flickr:after { content: "\e614"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } div.preheader ul.social-links li a.glassdoor:after { content: "\e900"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } .overflow-overlay { overflow: hidden } .overflow-overlay.show-location .location-strip.dropdown { display: block; opacity: 1 !important; position: fixed; width: 100%; height: 100%; z-index: 551; -webkit-overflow-scrolling: touch } .overflow-overlay.show-location .ui-autocomplete { z-index: 552 } .overlay-closer { color: #fff; display: block; position: absolute; top: -.625rem; right: 0; z-index: 210; background: none; border: 0; box-shadow: none; margin: 0; font-weight: normal } .no-js .overlay-closer { display: none; visibility: hidden } .overlay-closer:hover, .overlay-closer:focus, .overlay-closer:active { background: none } .overlay-closer::after { color: #fff; content: '\2573'; font-size: .8125rem; vertical-align: top; margin-left: .25rem } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #fff; opacity: 0.8; filter: alpha(opacity=80) } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle } .mfp-align-top .mfp-container:before { display: none } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045 } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto } .mfp-ajax-cur { cursor: progress } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: zoom-out } .mfp-zoom { cursor: pointer; cursor: zoom-in } .mfp-auto-cursor .mfp-content { cursor: auto } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .mfp-loading.mfp-figure { display: none } .mfp-hide { display: none !important } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044 } .mfp-preloader a { color: #CCC } .mfp-preloader a:hover { color: #FFF } .mfp-s-ready .mfp-preloader { display: none } .mfp-s-error .mfp-content { display: none } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none } button::-moz-focus-inner { padding: 0; border: 0 } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; font-style: normal; font-size: 1.75rem; font-family: Arial, Baskerville, monospace } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100) } .mfp-close:active { top: 1px } .mfp-close-btn-in .mfp-close { color: #333 } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #007dbb; right: 0; width: 100%; text-align: right } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: .75rem; line-height: 18px; white-space: nowrap } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent } .mfp-arrow:active { margin-top: -54px } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100) } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7 } .mfp-arrow-left { left: 0 } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #FFF; margin-left: 31px } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3F3F3F } .mfp-arrow-right { right: 0 } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #FFF; margin-left: 39px } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3F3F3F } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px } .mfp-iframe-holder .mfp-close { top: -40px } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25% } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000 } img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto } .mfp-figure { line-height: 0 } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444 } .mfp-figure small { color: #BDBDBD; display: block; font-size: .75rem; line-height: 14px } .mfp-figure figure { margin: 0 } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px } .mfp-image-holder .mfp-content { max-width: 100% } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0 } .mfp-img-mobile img.mfp-img { padding: 0 } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0 } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0 } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0 } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75) } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0 } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100% } .mfp-container { padding-left: 6px; padding-right: 6px } } .mfp-ie7 .mfp-img { padding: 0 } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px } .mfp-ie7 .mfp-container { padding: 0 } .mfp-ie7 .mfp-content { padding-top: 44px } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0 } .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem } .select2-container .select2-selection--single .select2-selection__clear { position: relative } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap } .select2-container .select2-search--inline { float: left } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0 } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051 } .select2-results { display: block } .select2-results__options { list-style: none; margin: 0; padding: 0 } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; font-size: 0.8em } .select2-results__option[aria-selected] { cursor: pointer } .select2-container--open .select2-dropdown { left: 0 } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0 } .select2-search--dropdown { display: block; padding: 4px } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none } .select2-search--dropdown.select2-search--hide { display: none } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0) } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #ccc; border-radius: 4px; height: 43px; background-color: #f7f7f7; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1) } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 43px } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #000 } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #000 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 75%; width: 0 } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { font-size: 1.3em; float: left } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text } .select2-container--default .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; font-size: 0.8em } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333 } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0 } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0 } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto } .select2-container--default .select2-results__option[role=group] { padding: 0 } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999 } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0 } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; font-size: 0.8em } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999 } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0) } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0 } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0) } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0 } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555 } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0 } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0 } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent } .select2-container--classic .select2-dropdown--above { border-bottom: none } .select2-container--classic .select2-dropdown--below { border-top: none } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto } .select2-container--classic .select2-results__option[role=group] { padding: 0 } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb } div.brand-banner { position: relative; margin-bottom: 3em; background: #fff 50% 38px no-repeat fixed; background-size: cover; background-color: #fff } @media print { div.brand-banner { height: auto !important } div.brand-banner .row { position: static !important } } div.brand-banner::before { content: ""; height: 6px; width: 100%; position: absolute; background: url(../images/hr_down.png) center bottom; background-size: 100% 6px; bottom: 0; left: 0; z-index: 10 } @media (max-width: 30em) { div.brand-banner::before { display: none } } div.brand-banner.large { height: 235px; margin-top: 14px; position: relative } @media (max-width: 60em) { div.brand-banner.large { height: 235px } } @media (max-width: 48em) { div.brand-banner.large { height: 230px } } @media (max-width: 1250px) { div.brand-banner.large { background-attachment: scroll; background-size: cover; background-position: 50% 50% } } div.brand-banner.large::after { content: ""; height: 6px; position: absolute; top: 0; left: 0; width: 100%; background: url(../images/hr.png) center bottom; background-size: 100% 6px } div.brand-banner.large .row { text-align: center; max-width: none; width: 100%; position: absolute; bottom: 0; margin: 0 } @media (max-width: 30em) { div.brand-banner.large .row { position: static } } div.brand-banner.large img { border-radius: 5px 5px 0 0; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25) } @media (max-width: 48em) { div.brand-banner.large img { width: 140px; height: 140px } } @media (max-width: 30em) { div.brand-banner { height: 200px !important; margin: 0 0 1em !important; } } div.brand-banner div { position: static; text-align: center; z-index: 11; margin: 0 auto; overflow: hidden; border-radius: 5px 5px 0 0; padding-top: 16px; background-color: transparent } @media (max-width: 30em) { div.brand-banner div { position: static; padding: 0; text-align: left } } div.brand-banner img { margin: 0 auto; height: 210px; width: 210px } @media (max-width: 30em) { div.brand-banner img { display: block; width: 100% !important; height: auto !important; } } div.brand-banner h1 { float: left; color: #fff; background: #fff; padding: 20px 40px 10px; line-height: 1; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); color: #007dbb; float: none; display: inline-block; border-radius: 5px 5px 0 0 } @media (max-width: 30em) { div.brand-banner h1 { padding: 10px 15px; color: #007dbb; display: block; float: left; box-shadow: 0px 0px 8px 0px transparent } } @media (min-width: 93.75em) { div.brand-banner h1 { padding: 70px 0 0 40px } } div.brand-banner img + h1 { display: none } @media (max-width: 30em) { div.brand-banner img + h1 { display: block } } .js div.product-showcase-slider, .js div.brand-slider { visibility: hidden } div.brand-slider { background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px; padding-top: 2em } @media (min-width: 48em) { div.brand-slider h2 { float: left } } div.brand-slider a { position: relative; padding-left: 1.1em } @media (min-width: 48em) { div.brand-slider a { float: right; top: 1em } } div.brand-slider a::before { position: absolute; font-family: 'unilever-iconfont'; speak: none; -webkit-font-smoothing: antialiased; content: "\e021"; font-size: 0.75em; left: 0; margin-top: 0.25em; transition: all 0.3s ease } div.brand-slider a:hover::before { margin-left: -0.2em } div.brand-slider ul { padding: 0 3em; clear: both } div.brand-slider li { text-align: center; list-style: none } div.brand-slider .owl-stage-outer { overflow-x: hidden } @media print, (min-width: 48em) { div.brand-slider .owl-pagination, div.brand-slider .owl-dots { display: none } } div.brand-slider span { display: block; margin-top: 10px; padding: 0 0 } div.brand-slider a.download { margin-top: 10px; display: inline-block } div.brand-slider .accordion { background: none; margin-top: 10px } div.brand-slider .accordion h6 { padding: 0 0 0 24px; background: url(../media/BIA/icon_basket.png) 0 0 no-repeat !important; display: inline-block; font-size: .875rem; letter-spacing: normal; line-height: 1.6 } div.brand-slider .accordion h6::before { display: none } div.brand-slider .accordion h6.title:before { top: 14px } div.brand-slider .accordion .content { padding: 0; background: none } div.brand-slider .accordion .content .mfp-close { position: relative; color: #007dbb; float: right; margin-top: 0; margin-bottom: 0 } div.brand-slider .accordion img { border-radius: 0; box-shadow: none; width: 100% } div.brand-slider .owl-prev, div.brand-slider .owl-next { top: auto; bottom: 50%; color: #fff; text-indent: -9999em; font-size: .0625rem } div.brand-slider .owl-prev:hover::before, div.brand-slider .owl-next:hover::before { color: #004976 } div.brand-slider .owl-prev::before, div.brand-slider .owl-next::before { text-indent: 0; display: block; color: #007dbb; font-size: 1.875rem } @media (max-width: 30em) { div.brand-slider .owl-prev, div.brand-slider .owl-next { display: block; bottom: 20px } div.brand-slider .owl-prev::before, div.brand-slider .owl-next::before { font-size: 1.25rem } } @media (max-width: 48em) { div.brand-slider .owl-prev, div.brand-slider .owl-next { display: block } } div.brand-slider .owl-prev { left: 0; right: auto } @media (max-width: 30em) { div.brand-slider .owl-prev { left: 18% } } div.brand-slider .owl-next { right: 0; left: auto } @media (max-width: 30em) { div.brand-slider .owl-next { right: 18% } } div.product-showcase-slider { background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px; background-position: bottom; padding-bottom: 40px; position: relative; margin-top: 60px; margin-bottom: 40px } @media (min-width: 67.5em) { div.product-showcase-slider { margin-top: 70px; margin-bottom: 70px } } div.product-showcase-slider h2 { text-align: center } div.product-showcase-slider p { padding: 0 30px } div.product-showcase-slider a { font-size: 13px } @media print, (min-width: 48em) { div.product-showcase-slider a { font-size: 14px } } @media (min-width: 67.5em) { div.product-showcase-slider a { font-size: 15px } } div.product-showcase-slider ul { padding: 0 15px; clear: both } div.product-showcase-slider li { text-align: center; list-style: none; padding: 0 15px } div.product-showcase-slider .owl-stage-outer { overflow-x: hidden } @media print, (min-width: 48em) { div.product-showcase-slider .owl-pagination { display: none } } div.product-showcase-slider span { display: block; margin-top: 10px; padding: 0 0 } div.product-showcase-slider a.download { margin-top: 10px; display: inline-block } div.product-showcase-slider .accordion { background: none; margin-top: 10px } div.product-showcase-slider .accordion h6 { padding: 0 0 0 24px; background: url(../media/BIA/icon_basket.png) 0 0 no-repeat !important; display: inline-block; font-size: .875rem; letter-spacing: normal; line-height: 1.6 } div.product-showcase-slider .accordion h6::before { display: none } div.product-showcase-slider .accordion h6.title:before { top: 14px } div.product-showcase-slider .accordion .content { padding: 0; background: none } div.product-showcase-slider .accordion .content .mfp-close { position: relative; color: #007dbb; float: right; margin-top: 0; margin-bottom: 0 } div.product-showcase-slider .accordion img { border-radius: 0; box-shadow: none; width: 100% } div.product-showcase-slider .owl-prev, div.product-showcase-slider .owl-next { top: 30%; bottom: auto; color: #fff; text-indent: -9999em; font-size: .0625rem } div.product-showcase-slider .owl-prev:hover::before, div.product-showcase-slider .owl-next:hover::before { color: #004976 } div.product-showcase-slider .owl-prev::before, div.product-showcase-slider .owl-next::before { text-indent: 0; display: block; color: #007dbb; font-size: 1.875rem } @media (max-width: 30em) { div.product-showcase-slider .owl-prev, div.product-showcase-slider .owl-next { display: block; top: 40% } div.product-showcase-slider .owl-prev::before, div.product-showcase-slider .owl-next::before { font-size: 1.25rem } } @media (max-width: 48em) { div.product-showcase-slider .owl-prev, div.product-showcase-slider .owl-next { display: block } } @media (min-width: 67.5em) { div.product-showcase-slider .owl-prev, div.product-showcase-slider .owl-next { top: 40% } } div.product-showcase-slider .owl-prev { left: 15px; right: auto } div.product-showcase-slider .owl-next { right: 15px; left: auto } .iframe { display: block } .iframe p { display: none } @media (max-width: 48em) { .iframe iframe { display: none } .iframe p { display: block } } iframe.responsive { width: 100% } table:not(.recaptchatable):not(.ui-datepicker-calendar) { border-collapse: collapse; margin: 0 0 2em; position: relative; word-wrap: break-word } table:not(.recaptchatable):not(.ui-datepicker-calendar) td, table:not(.recaptchatable):not(.ui-datepicker-calendar) th { text-align: left; border: 1px solid #ccc; padding: 10px; vertical-align: top } table:not(.recaptchatable):not(.ui-datepicker-calendar) td p, table:not(.recaptchatable):not(.ui-datepicker-calendar) th p { padding: 0; margin-bottom: 0 } table:not(.recaptchatable):not(.ui-datepicker-calendar) td ul, table:not(.recaptchatable):not(.ui-datepicker-calendar) td ol, table:not(.recaptchatable):not(.ui-datepicker-calendar) th ul, table:not(.recaptchatable):not(.ui-datepicker-calendar) th ol { padding: 0 0 0 20px; margin-bottom: 0 } table:not(.recaptchatable):not(.ui-datepicker-calendar) th { background-color: #eee; font-weight: bold; text-align: left } table:not(.recaptchatable):not(.ui-datepicker-calendar) th p { font-weight: bold } @media (max-width: 30em) { table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table) { margin: 0 0 70px 0; position: relative; table-layout: fixed; width: 100%; word-wrap: break-word } table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table) td, table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table) th { font-size: .6875rem; padding: 5px } table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table)::after { background: #007dbb; color: #FFFFFF; content: 'Tap to close'; cursor: pointer; display: block; font-weight: bold; height: 35px; left: 0; line-height: 35px; opacity: 0.7; padding: 0 20px; position: absolute; top: 100% } table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table).open tr { display: none } table:not(.recaptchatable):not(.ui-datepicker-calendar):not(.ara__table).open::after { content: 'Table: Tap to open' } } .careers-filter { margin-bottom: 2rem } .careers-filter--flush { margin-bottom: 0 } @media (min-width: 30em) { .careers-filter .text-search-submit { margin-left: 0 !important } } form.filters .row.l-f { padding: 0.5em } form.filters .row.l-f > div.row { margin: 0 } form.filters .row.l-f .left { float: left } form.filters .row.l-f .ui-autocomplete-input { font-size: 0.8rem; padding-top: 1em; padding-bottom: 1em } form.filters { width: 100% } form.filters .text-search-submit { position: static; border-radius: inherit; box-shadow: none; height: 40px } @media (min-width: 30em) { form.filters .text-search-submit { margin-left: 10px } } @media (min-width: 48em) { form.filters .content-nest-accordion__anchor { width: 60% } } @media (min-width: 93.75em) { form.filters .content-nest-accordion__anchor { width: 30% } } form.filters .content-nest-item { margin-bottom: 0 } form.filters .content-nest-item .row.l-f { margin-bottom: 0; padding-bottom: 0 } form.filters .content-nest-item .row.l-f > div { margin-bottom: 0 } form.filters .content-nest-accordion__anchor { text-transform: uppercase; color: #007dbb } form.filters .content-nest-accordion__anchor:hover { color: #004976 } @media print { form.filters { display: none } } form.filters a, form.filters label, form.filters .label, form.filters p { color: #fff } form.filters h2 { display: none } form.filters h2.label { font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; letter-spacing: 0; line-height: 1; margin-bottom: 0.45em; padding: 0 } form.filters input[type="checkbox"] { position: absolute; left: 0 } form.filters button { border-radius: 10px 10px 10px 10px; background-color: #fff; color: #007dbb; transition: none; position: static; margin: 1.1em 0 0 0; padding: 0.5em 1em 0.5em 1em; left: 0 } form.filters button:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e022"; padding: 0 0 0 6px; top: 1px; position: relative; display: inline-block } form.filters p { margin: 0 0 10px } form.filters .input-clear { top: auto; bottom: 8px; right: 22px } form.filters .search-bar .input-clear { right: 10px } form.filters .row.dropdowns { background: #007dbb; color: #fff; padding-top: 0.5em } form.filters .row.dropdowns--margin-bottom { margin-bottom: 1em } form.filters .row.dropdowns input[type=text] { font-family: arial; display: inline-block; font-size: 0.75rem; padding: 7px } @media (max-width: 48em) { form.filters .row.dropdowns input[type=text] { font-size: 1rem !important } } form.filters .row.dropdowns input.text-filter { padding: 0 0 0 7px } form.filters .row.dropdowns input.ui-autocomplete-input { padding: 5px; width: 100% } form.filters .row.dropdowns label, form.filters .row.dropdowns .label { display: inline-block } @media print, (min-width: 48em) { form.filters .row.dropdowns label, form.filters .row.dropdowns .label { display: block } } form.filters .row.dropdowns select { padding: 7px; font-family: arial; display: inline-block; font-size: .75rem } .js form.filters .row.dropdowns select#brand { display: none } form.filters .row.dropdowns.no-search { margin-bottom: 30px } form.filters .row.dropdowns .layout-control { margin-top: 4px; float: right } @media (max-width: 48em) { form.filters .row.dropdowns .layout-control { display: none } } form.filters .row.dropdowns .layout-control label, form.filters .row.dropdowns .layout-control .label { display: block } form.filters .row.dropdowns .layout-control a { color: #999; display: inline-block; padding: 5px 10px; transition: all 0.3s ease; background: #eee } @media (max-width: 48em) { form.filters .row.dropdowns .layout-control a { padding: 10px } } form.filters .row.dropdowns .layout-control a:hover { color: #666 } form.filters .row.dropdowns .layout-control a.active { background: #fff; color: #007dbb; font-weight: normal; position: relative; z-index: 2; box-shadow: 0 0 8px rgba(0, 0, 0, 0.55) } form.filters .row.dropdowns div.cta-link { position: absolute; right: 0; top: 100% } form.filters .row.dropdowns div.cta-link a { left: auto; right: 15px; left: auto; right: 15px; z-index: 3 } form.filters .row.dropdowns div.cta-link input { left: auto; right: 15px; left: auto; right: 15px; z-index: 3 } form.filters .row.l-f { background: #fff; color: #fff; padding-top: 0.5em; background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 5px; padding: 0.5em 0.5em 20px 0.5em; margin-bottom: 1em } form.filters .row.l-f--noborder { background: none } form.filters .row.l-f .keyword-search { height: 40px; text-overflow: ellipsis } form.filters .row.l-f .input-clear { background-color: #007dbb } form.filters .row.l-f--margin-bottom { margin-bottom: 1em } form.filters .row.l-f input[type=text] { font-family: arial; display: inline-block } @media (max-width: 48em) { form.filters .row.l-f input[type=text] { font-size: 0.8125rem } } form.filters .row.l-f input#keyword:after { content: '\e00d'; background-color: #007dbb; padding: 10px } @media (min-width: 30em) { form.filters .row.l-f button#l-f-submit { display: none } } form.filters .row.l-f input.text-filter { padding: 0 0 0 7px } form.filters .row.l-f label, form.filters .row.l-f .label { display: inline-block } @media print, (min-width: 48em) { form.filters .row.l-f label, form.filters .row.l-f .label { display: block } } form.filters .row.l-f select { padding: 7px; font-family: arial; display: inline-block; font-size: 0.75rem !important; margin-bottom: 0 } @media (min-width: 48em) { form.filters .row.l-f select { margin-bottom: 1em } } .js form.filters .row.l-f select#brand { display: none } form.filters .row.l-f select:focus { color: #007dbb } form.filters .row.l-f.no-search { margin-bottom: 30px } form.filters .row.l-f .callout { margin: 0; margin-top: -0.625em } @media (min-width: 30em) { form.filters .row.l-f .callout { margin-bottom: 1em } } @media (min-width: 30em) { form.filters .row.l-f .callout { float: right; margin-top: 0 } } form.filters .row.l-f .callout a { color: #007dbb; font-size: 0.775em } @media (min-width: 48em) { form.filters .row.l-f .callout a { font-size: 0.875em } } form.filters .row.l-f .callout a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e015'; color: #007dbb; margin-right: .75em } form.filters .row.l-f .layout-control { margin-top: 4px; float: right } @media (max-width: 48em) { form.filters .row.l-f .layout-control { display: none } } form.filters .row.l-f .layout-control label, form.filters .row.l-f .layout-control .label { display: block } form.filters .row.l-f .layout-control a { color: #999; display: inline-block; padding: 5px 10px; transition: all 0.3s ease; background: #eee } @media (max-width: 48em) { form.filters .row.l-f .layout-control a { padding: 10px } } form.filters .row.l-f .layout-control a:hover { color: #666 } form.filters .row.l-f .layout-control a.active { background: #fff; color: #007dbb; font-weight: normal; position: relative; z-index: 2; box-shadow: 0 0 8px rgba(0, 0, 0, 0.55) } form.filters .row.l-f button#l-f-submit { position: relative; background-color: #007dbb; border-radius: 2px; box-shadow: none; top: 0; left: 5px; margin: 0; width: 45%; height: 39px } @media (max-width: 30em) { form.filters .row.l-f button#l-f-submit { height: 33px } } @media (min-width: 30.0625em) { form.filters .row.l-f button#l-f-submit { height: 35px } } @media (min-width: 48.0625em) { form.filters .row.l-f button#l-f-submit { height: 37px } } form.filters .row.l-f button#l-f-submit:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e00d'; color: #fff; top: 0; right: 14px } form.filters .row.l-f div.cta-link { position: absolute; right: 0; top: 100% } form.filters .row.l-f div.cta-link a { left: auto; right: 15px; left: auto; right: 15px; z-index: 3 } form.filters .row.l-f div.cta-link input { left: auto; right: 15px; left: auto; right: 15px; z-index: 3 } form.filters .row.l-f .brand-accessibility-text { display: none } form.filters .row.search-bar .columns { margin: 0 } form.filters .row.search-bar div.cta-link { position: absolute; right: 0; top: 100% } form.filters .row.search-bar div.cta-link input { left: 15px; z-index: 2 } form.filters .row.search-bar div.cta-link a { left: auto; right: 15px; z-index: 3 } form.filters .row.search-filters { background: url(../images/hr.png) 0 0 no-repeat #eee; background-size: 100% 6px; display: none; padding-top: 30px; z-index: 2 } .no-js form.filters .row.search-filters { display: block } form.filters .row.search-filters label, form.filters .row.search-filters .label, form.filters .row.search-filters p { color: #666 } form.filters .row.search-filters .topics label { padding-left: 1.6em; line-height: 1.4em } form.filters .row.search-filters .clear-date { color: #007dbb; display: inline-block; float: right; font-size: 0.8em; margin-top: 10px } form.filters .row.search-buttons::after { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 100%; background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px; display: block; pointer-events: none; z-index: 10 } form.filters .row.search-buttons .cta-link { background: none } form.filters .row.search-buttons .cta-link input { left: auto; right: 0 } .no-js form.filters .row.search-buttons .cta-link input { opacity: 1 } form.filters .row.search-buttons .search-drop { right: 0px; left: auto } .no-js .search-drop { display: none } .layout-control .active { font-weight: bold } #single-brand-summary { clear: both; overflow: hidden; margin-top: 30px } #single-brand-summary .image-mask { margin: 0 0 10px; padding: 0 0 56% 0; position: relative; overflow: hidden } #single-brand-summary .image-mask img { margin: 0 !important; position: absolute; width: 100% } #single-brand-summary .item { margin-bottom: 2em; width: 100%; top: 0; left: 0 } #single-brand-summary .item .inner { background: #007dbb !important; border-radius: 5px; overflow: hidden; cursor: default; color: #fff; padding: 15px !important; position: relative } #single-brand-summary .item .inner img.logo { width: 19% !important; position: static !important; height: auto; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); height: auto; margin-right: 5%; float: left } #single-brand-summary .item .inner .information { display: block } #single-brand-summary .item .inner .information label { color: #fff; margin-top: 20px } #single-brand-summary .item .inner .information h3 { color: #fff } #single-brand-summary .item .inner .information a { color: #fff; text-decoration: none; margin-top: 10px; font-weight: bold } #single-brand-summary .item .inner .information .int-link.active { display: block } #single-brand-summary .item .inner .information .int-link a:after { content: "\e022"; padding: 0 0 0 6px; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; top: 2px; position: relative; display: inline-block } #single-brand-summary .item .inner .information div.int-link { display: none; margin: 7px 0 0 10px } @media screen and (min-width: 30em) { #single-brand-summary .item .inner .information div.int-link { margin: 2px 0 0 10px } } #single-brand-summary .item .inner .information select.region { margin-top: 10px } #grid { clear: both; overflow: hidden } #grid .image-mask { margin: 0 0 10px; padding: 0 0 56% 0; position: relative; overflow: hidden } #grid .image-mask img { margin: 0 !important; position: absolute; width: 100% } #grid .item { margin-bottom: 2em } #grid .item--no-margin { margin-bottom: 0 } #grid .item--full-width { width: 100% } #grid .item .inner { background: #eee; border-radius: 5px; overflow: hidden; padding: 15px; position: relative; transition: background 0.4s ease; transition: padding 1ms ease } #grid .item .inner .linklist { margin-bottom: 0; background: #eeeeee } #grid .item .inner .linklist ul li:last-child { border-bottom: none } #grid .item .inner .category { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; display: block; font-size: .8125em; position: absolute; right: 10px; text-transform: uppercase; top: 0; z-index: 1 } .font--arial #grid .item .inner .category { font-family: Arial, Helvetica, sans-serif } #grid .item .inner .category a { background: #007dbb; border-radius: 0 0 5px 5px; color: #FFFFFF; display: block; padding: 7px 5px 3px; transition: all 0.4s ease; -webkit-transform: translate3d(0, 0, 0) } #grid .item .inner .category a:hover { background-color: #004976; padding-top: 12px } @media print { #grid .item .inner .category a { padding-top: 15px } } #grid .item > div time { display: block; font-size: 0.8em; margin: 0 0 8px; color: #999 } #grid .item > div h3 { font-size: 1.4em; margin-top: 20px; transition: all 0.4s ease } @media (max-width: 30em) { #grid .item > div h3 { font-size: 1.2em; } #grid .item > div p { line-height: 1.2em; } } #grid .item > div h3 strong { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-weight: normal; display: block } .font--arial #grid .item > div h3 strong { font-family: Arial, Helvetica, sans-serif } #grid .item > div img { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin: 5px 0 10px; height: auto } #grid .item > div img.logo { margin: 0 } #grid .item > div p.more { color: #007dbb; font-weight: bold; position: relative; padding: 0 0 0 1.2em; margin-bottom: 0; transition: all 0.4s ease } #grid .item > div p.more:hover:before { left: 0.2em } #grid .item > div p.more:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; top: 0.4em; font-size: 0.65em; content: "\e021"; left: 0.6em; transition: left 0.4s ease } #grid .item > div p.more.file::before { content: "\e01d" } #grid .item > div.linklist { overflow: visible; position: relative; margin: 0 0 2em; border-left: 1px solid #ccc; border-right: 1px solid #ccc } @media (max-width: 48em) { #grid .item > div.linklist { min-height: inherit; margin: 5px 10px } } #grid .item > div.linklist span.date { display: block; padding: 0 0 10px; font-weight: bold; font-size: .75rem; font-family: arial; letter-spacing: normal } #grid .item > div.video iframe { width: 100%; height: auto; margin-bottom: 0.5em } @media (max-width: 48em) { #grid .item > div.video iframe { float: left; width: 50%; margin-right: 15px } } @media (max-width: 30em) { #grid .item > div.video iframe { float: none; width: 100%; margin-right: 0 } } #grid .item > div.sting { margin-bottom: 0; padding-bottom: 0 } #grid .item > div.sting a { background: none; box-shadow: none; border: 0; padding: 0 } #grid .item > div.sting a .image-mask img { border-radius: 0px; margin: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } #grid .item > div.sting a:hover { background: none; box-shadow: none; border: 0 } #grid .item > div.sting a:hover .image-mask img { -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1) } #grid.brand-logos { margin-top: 30px } #grid.brand-logos .item .smart-label-title { display: none } #grid.brand-logos .item .inner { background: #eee; border-radius: 5px; color: #fff; cursor: pointer; overflow: hidden; padding: 5% 5% 95% 5%; transition: background 0.4s ease } #grid.brand-logos .item .inner img { display: block; position: absolute; width: 90%; height: 90%; object-fit: cover; } #grid.brand-logos .item .name { opacity: .75; transition: opacity ease 0.45s 0.3s; background: #007dbb; width: calc(100% - .9375em * 2 - 20px); margin: 10px; height: calc(100% - 20px); position: absolute; z-index: 1; display: flex; align-items: center; border-radius: 5px; } #grid.brand-logos .item .name h3 { color: #fff; margin: 0 auto; padding: 0; font-weight: bold; } #grid.brand-logos .item:hover .name, #grid.brand-logos .item.open .name { opacity: 0 } #grid.brand-logos .item.open .name { z-index: 0; } @media print { #grid.brand-logos .item .inner { border: 1px solid #000 } } #grid.brand-logos .item .inner .information { display: none } #grid.brand-logos .item .inner .information label { color: #fff; margin-top: 20px } #grid.brand-logos .item .inner .information h3 { color: #fff } #grid.brand-logos .item .inner .information a { color: #FFFFFF; text-decoration: none; margin-top: 10px; font-weight: bold } #grid.brand-logos .item .inner .information .packshots img { width: 120px !important; height: 120px !important; margin-right: 8px !important } #grid.brand-logos .item .inner .information .int-link.active { display: block } #grid.brand-logos .item .inner .information .int-link a:after { content: "\e022"; padding: 0 0 0 6px; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; top: 2px; position: relative; display: inline-block } #grid.brand-logos .item .inner .information div.int-link { display: none; margin: 7px 0 0 10px } @media screen and (min-width: 30em) { #grid.brand-logos .item .inner .information div.int-link { margin: 2px 0 0 10px } } #grid.brand-logos .item .inner .information select.region { margin-top: 10px } #grid.brand-logos .item .inner:hover { background-color: #ccc } #grid.brand-logos .item.open { width: 100%; cursor: default; z-index: 1 } #grid.brand-logos .item.open .inner { background: #007dbb !important; color: #FFFFFF; cursor: default; padding: 15px !important } #grid.brand-logos .item.open .inner img.logo { width: 19% !important; margin-right: 5%; float: left } #grid.brand-logos .item.open .inner img { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); position: static !important } #grid.brand-logos .item.open .inner .packshots { margin-bottom: 10px } @media (max-width: 48em) { #grid.brand-logos .item.open .inner .packshots { display: none } } #grid.brand-logos .item.open .inner .packshots img { margin-right: 10px } #grid.brand-logos .item.open .inner .information { display: block } @media (max-width: 48em) { #grid.brand-logos { margin-left: 0; margin-right: 0 } #grid.brand-logos .item.open .inner img.logo { width: calc(95% - 10px) !important; margin-bottom: 20px; } } @media (max-width: 48em) { .row.brand-logos-show-more { margin-left: 0; margin-right: 0 } } @media (max-width: 30em) { .lf-pagination { text-align: center; margin-bottom: 6em } } @media (min-width: 30.0625em) { .lf-pagination { text-align: right; margin-top: 1.875em; margin-bottom: 2.125em } } #filter-modal.filter-tips { position: relative; text-align: left; background-color: #fff; margin: 40px auto; padding: 20px; max-height: 95%; overflow: auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) } @media (min-width: 30em) { #filter-modal.filter-tips { max-height: 600px } } @media (min-width: 30em) { #filter-modal.filter-tips { max-width: 1100px } } #filter-modal h3 { padding-bottom: 1.125em; font-size: 1.75em } @media (min-width: 30em) { #filter-modal h3 { font-size: 1.125em } } @media (min-width: 48em) { #filter-modal h3 { font-size: 1.25em } } @media (min-width: 57.5em) { #filter-modal h3 { font-size: 1.625em } } #filter-modal div:last-of-type { margin-bottom: 0 } @media (min-width: 30em) { #filter-modal .row { margin-bottom: 40px } } @media (min-width: 48em) { #filter-modal .row { margin-bottom: 60px } } #filter-modal .row div.image { margin-left: -10px; margin-bottom: 1em } @media (min-width: 30em) { #filter-modal .row div.image { margin-bottom: 0 } } #filter-modal .row div.content { padding: 0 0.2em; margin-bottom: 1em } @media (min-width: 48em) { #filter-modal .row div.content { padding: 0 0.9375em } } @media (min-width: 30em) { #filter-modal .row div.content { margin-bottom: 0 } } #filter-modal .row div img { width: 200px; height: auto; border: 1px solid #ccc } #filter-modal .row div h3 { color: black; font-weight: bold; letter-spacing: 0.25px; font-size: 1.25em } @media (min-width: 30em) { #filter-modal .row div h3 { font-size: 0.75em } } @media (min-width: 37.5em) { #filter-modal .row div h3 { font-size: 0.825em } } @media (min-width: 48em) { #filter-modal .row div h3 { font-size: 1em } } @media (min-width: 67.5em) { #filter-modal .row div h3 { font-size: 1.25em } } #filter-modal .row div ul { margin-left: 15px } #filter-modal .row div ul li { font-size: 0.825em } @media (min-width: 30em) { #filter-modal .row div ul li { font-size: 0.5em } } @media (min-width: 37.5em) { #filter-modal .row div ul li { font-size: 0.625em } } @media (min-width: 48em) { #filter-modal .row div ul li { font-size: 0.75em } } @media (min-width: 67.5em) { #filter-modal .row div ul li { font-size: 0.875em } } .filter-options { margin-bottom: 0 } .filter-options ul { margin: 0; padding-left: 0 } .filter-options ul li { position: relative } .filter-options ul li.filter-openable { display: none; height: 0 } .filter-options ul li.filter-opener-container { background-color: #f7f7f7; padding: 7px 0 7px 10px; border: 1px solid #ccc; border-radius: 2px 2px 0 0; margin-bottom: 1rem; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2) } @media (min-width: 30em) { .filter-options ul li.filter-opener-container { margin-bottom: 0; box-shadow: none } } .filter-options ul li.filter-opener-container.active { background-color: #fff; border-bottom: 1px solid #fff; z-index: 7; margin-bottom: 0; box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.2) } .filter-options ul li.filter-opener-container .filter-opener { color: #000; display: block; font-size: 0.9em; position: relative } .filter-options ul li.filter-opener-container .filter-opener.active:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e01f'; color: #007dbb; position: absolute; top: 4px; right: 10px; font-size: 0.75rem } .filter-options ul li.filter-opener-container .filter-opener:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e025'; color: #007dbb; position: absolute; top: 4px; right: 10px; font-size: 0.75rem } .filter-options ul li .topic-list, .filter-options ul li .date-list { width: 100%; padding: 6px; position: absolute; top: 0; z-index: 6; margin-top: -1px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); border-radius: 0 2px 2px 2px } @media (min-width: 30em) { .filter-options ul li .topic-list, .filter-options ul li .date-list { width: 340px } } @media (min-width: 48.0625em) { .filter-options ul li .topic-list, .filter-options ul li .date-list { width: 160%; min-width: 360px } } .filter-options ul li .topic-list ul li, .filter-options ul li .date-list ul li { padding: 5px; list-style: none } .filter-options ul li .topic-list ul li input[type="radio"], .filter-options ul li .date-list ul li input[type="radio"] { position: relative; margin-right: 5px } .filter-options ul li .date-list { width: 100% } @media (min-width: 30em) { .filter-options ul li .date-list { width: 240px } } @media (min-width: 48.0625em) { .filter-options ul li .date-list { width: 140% } } .filter-options ul li .date-list ul li { clear: both } .filter-options ul li .date-list ul #article div { margin-bottom: 10px } .filter-options ul li .date-list ul #article label { margin: 0 } .filter-options ul li .date-list ul #article label.bold { font-weight: bold } .filter-options ul li .date-list ul #article label.year { padding-left: 1.5em } .filter-options ul li .date-list ul #article #article-year { font-size: 0.75rem; margin-bottom: 1rem } .filter-options ul li .date-list ul #article #radio-article { top: 3px } .filter-options ul li .date-list ul #custom div { margin-bottom: 10px } .filter-options ul li .date-list ul #custom label { margin: 0 } .filter-options ul li .date-list ul #custom label.bold { font-weight: bold } .filter-options ul li .date-list ul #custom #article-from div, .filter-options ul li .date-list ul #custom #article-to div { padding-right: 1.875em } .filter-options ul li .date-list ul #custom #article-from #date-month-from, .filter-options ul li .date-list ul #custom #article-from #date-year-from, .filter-options ul li .date-list ul #custom #article-from #date-month-to, .filter-options ul li .date-list ul #custom #article-from #date-year-to, .filter-options ul li .date-list ul #custom #article-to #date-month-from, .filter-options ul li .date-list ul #custom #article-to #date-year-from, .filter-options ul li .date-list ul #custom #article-to #date-month-to, .filter-options ul li .date-list ul #custom #article-to #date-year-to { font-size: 0.75rem; margin-bottom: 1rem } .filter-options ul li .date-list ul #custom #radio-range { top: 3px } .filter-options ul li label { font-size: 0.8em; color: #000; width: 100%; margin-bottom: 10px } .filter-options ul li label.grey { color: #999 !important } .filter-options ul li label input[type='checkbox'] { position: relative !important; left: 0; margin-right: 5px } .filter-options select { margin-bottom: 1rem !important } @media (min-width: 30em) and (max-width: 37.4375em) { .sort-dropdown { width: 125px; float: right } } #topic-tags { border-top: 1px solid #ccc } #topic-tags span { font-size: 1em; display: block } #topic-tags ul li { background-color: #007dbb; color: #fff; display: inline-block; font-size: 0.625em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 6px 0px 6px 10px; margin: 0 0.75rem 0.75rem 0; border-radius: 25px 5px 5px 25px } #topic-tags ul li:before { display: inline-block; content: ''; border-radius: 0.375em; height: 0.325rem; width: 0.325rem; margin-right: 0.5rem; background-color: #fff } #topic-tags ul li:hover { background-color: #004976 } #topic-tags ul li a { color: #fff; padding: 8px; margin-left: -0.625em } #result-filters { display: none } #result-filters .result-filters { border-bottom: 1px solid #ccc; position: relative } #result-filters .result-filters.active { margin-top: -1.15em } #result-filters .result-filters .total-results p, #result-filters .result-filters .total-results a, #result-filters .result-filters .active-filters p, #result-filters .result-filters .active-filters a { color: #666; font-size: 0.75em; margin: auto 0 } #result-filters .result-filters .total-results p strong, #result-filters .result-filters .total-results a strong, #result-filters .result-filters .active-filters p strong, #result-filters .result-filters .active-filters a strong { color: #000 } #result-filters .result-filters .total-results { display: inline-block; margin-bottom: 1em } @media (min-width: 30em) { #result-filters .result-filters .total-results { margin-bottom: 0 } } #result-filters .result-filters .active-filters p { display: block } @media (min-width: 30em) { #result-filters .result-filters .active-filters p { display: inline-block } } form.reminder { overflow: hidden } form.reminder div { padding-left: 0 } form.reminder p { color: #007dbb; font-weight: bold; clear: both; position: relative } .ui-datepicker { background: #FFFFFF; font-size: 0.9em; z-index: 10 !important } .ui-datepicker select { padding: 0 } .no-results { margin: 2em 0 } .no-results h3 { padding-top: 2em } @media (max-width: 48em) { .no-results h3 { padding-top: 0 } } .no-results img { display: none } @media print, (min-width: 30em) { .no-results img { float: right; display: block } } .no-results .reset-filter a { font-size: 1em } ul.ajax-autocomplete li { color: #007dbb !important; font-size: 0.75em !important; background: none !important; padding: 5px !important; border: none !important; margin: 0 !important } ul.ajax-autocomplete li.ui-state-focus { background-color: #eee !important } .large-dropdown { height: 40px } .large-dropdown:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e025'; color: #007dbb; position: absolute; top: 10px; right: 10px } .reset-filter { display: inline-block; margin: -1.0rem 0.25rem 0.5rem 0.25rem; text-align: left } @media (min-width: 30em) { .reset-filter { margin: 0; text-align: right } } .reset-filter p, .reset-filter a { color: #666; font-size: 0.75em; margin: auto 0 } .reset-filter p strong, .reset-filter a strong { color: #000 } .reset-filter a { color: #007dbb !important } .reset-filter a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e002'; padding-right: 10px; vertical-align: bottom } .tags .tag-cloud { border-top: solid #ccc 1px; padding: 1em 0; text-align: center } @media (min-width: 93.75em) { .tags .tag-cloud { font-size: 1.6em } } .tags .tag-cloud a { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; display: inline; line-height: 0.9em; margin: 0 2px; white-space: nowrap } .font--din .tags .tag-cloud a { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .tags .tag-cloud a { font-family: Arial, Helvetica, sans-serif } .tags .tag-cloud.alt-blue a { color: #78bed0 } .tags .tag-cloud.alt-blue a.tiny { color: #DA291C } .tags .tag-cloud.alt-blue a.small { color: #d0006f } .tags .tag-cloud.alt-blue a.medium { color: #54802d } .tags .tag-cloud.alt-blue a.large { color: #007dbb } .tags .tag-cloud.alt-blue-green a { color: #007dbb } .tags .tag-cloud.alt-blue-green a.small { color: #0085ca } .tags .tag-cloud.alt-blue-green a.medium { color: #004976 } .tags .tag-cloud.alt-blue-green a.large { color: #00a9e0 } .tags .tag-cloud.green a { color: #54802d } .tags .tag-cloud.green a.tiny { color: #84bd00 } .tags .tag-cloud.green a.small { color: #44883e } .tags .tag-cloud.green a.medium { color: #00573f } .tags .tag-cloud.green a.large { color: #78be20 } .tags .tag-cloud.blue a { color: #007dbb } .tags .tag-cloud.blue a.small { color: #0085ca } .tags .tag-cloud.blue a.medium { color: #004976 } .tags .tag-cloud.blue a.large { color: #00a9e0 } .tags .tag-cloud.pink a { color: #d0006f } .tags .tag-cloud.pink a.small { color: #722257 } .tags .tag-cloud.pink a.medium { color: #d0006f } .tags .tag-cloud.pink a.large { color: #e56db1 } .tags .tag-cloud .tiny { font-size: 0.6em } .tags .tag-cloud .small { font-size: 1em } .tags .tag-cloud .medium { font-size: 1.5em } .tags .tag-cloud .large { font-size: 2.5em } .tags div.cta-link { clear: both } .tags div.cta-link a { transition: background-color 0.3s ease, top 0.3s ease } .tags div.cta-link a:hover { top: 0; background-color: #004976 } @media (max-width: 48em) { .tags div.cta-link a { left: 20px } } .contact-details { background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px; margin-bottom: 2em; padding-top: 10px } .contact-details h2, .contact-details h3 { padding: 12px 2px 6px } .contact-details .country-selector form { border-bottom: #ccc 1px solid; padding: 0 0 15px; display: none } .contact-details .country-selector form select { width: auto } .contact-details:not(.static) .map { display: none } .contact-details .map-wrap { padding-top: 40%; position: relative } .contact-details .map-wrap iframe { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); height: 100%; position: absolute; top: 0; width: 100% } .contact-details .address, .contact-details .contacts { padding-top: 15px !important; word-wrap: break-word } .contact-details .address { border-bottom: #ccc 1px solid } @media (max-width: 30em) { .contact-details .address p { margin: 0px } } @media print, (min-width: 30em) { .contact-details .address { border-bottom: 0px } } @media print, (min-width: 30em) { .contact-details .contacts { border-left: #ccc 1px solid } } .contact-details .cta-link strong { font-weight: normal } @media print { .contact-details .country-selector form { display: none !important } } @media print, (min-width: 48em) { .contact-details.float-right .details div { border-left: 0; float: none; width: 100% } } .large-3 .contact-details .address, .large-4 .contact-details .address { border-bottom: #ccc 1px solid; float: none; width: auto } .large-3 .contact-details .contacts, .large-4 .contact-details .contacts { float: none; width: auto; border-left: none } .share-price { margin: 4.375rem 0 } .share-price h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.625rem; letter-spacing: 1px } .font--arial .share-price h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .share-price h2 { font-size: 2rem; letter-spacing: 3px } } .js .share-price li { opacity: 0; transition: opacity ease 0.45s 0.3s, -webkit-transform ease 0.45s 0.3s; transition: opacity ease 0.45s 0.3s, transform ease 0.45s 0.3s; -webkit-transform: translateY(-1.875rem); transform: translateY(-1.875rem) } .js .share-price li:nth-child(2) { transition-delay: 0.6s } .js .share-price li:nth-child(3) { transition-delay: 0.9s } .js .share-price li:nth-child(4) { transition-delay: 1.2s } .js .share-price li.is--animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .share-price ul { margin-top: 1.875rem } @media print, (min-width: 48em) { .share-price ul { margin-top: 0 } } .share-price li { margin-top: .625rem } @media print, (min-width: 48em) { .share-price li { margin-top: 0 } } .share-price p { margin: 0 } .share-price__text { font-size: 1rem } .share-price__stock { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: .875rem } .font--arial .share-price__stock { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .share-price__stock { font-size: .9375rem } } @media (min-width: 93.75em) { .share-price__stock { font-size: 1.125rem } } .share-price__value { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.875rem; color: #007dbb; letter-spacing: -0.04em; line-height: 1.2 } .font--arial .share-price__value { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .share-price__value { font-size: 3.25rem } } .share-price__performance { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.5rem; color: #007dbb; letter-spacing: -0.04em } .font--arial .share-price__performance { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .share-price__performance { font-size: 1.875rem } } @media (min-width: 93.75em) { .share-price__performance { font-size: 2.25rem } } .share-price__performance:after { position: relative; top: -3px; margin: 0 .3125rem } .share-price__performance--up { color: #54802d } .share-price__performance--up:after { content: '\2197' } .share-price__performance--down { color: #da291c } .share-price__performance--down:after { content: '\2198' } .share-price__date, .share-price__time { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: .875rem; color: #666; display: block } .font--arial .share-price__date, .font--arial .share-price__time { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .share-price__date, .share-price__time { font-size: 1rem } } @media (min-width: 93.75em) { .share-price__date, .share-price__time { display: inline-block } } div.share-price { margin: 0 0 2em; padding-bottom: 5px; text-align: left } div.share-price h3 { background: url(../images/hr_down.png) center 0 no-repeat; background-size: 100% 5px; padding: 20px 10px 5px 10px; margin-top: 0 } div.share-price div.price-row { padding: 15px 0; border-top: 1px solid #ddd; overflow: hidden; margin: 0 10px } div.share-price div.price-row .left { width: 66% } div.share-price div.price-row .right { width: 33% } div.share-price div.price-row p { margin: 0; line-height: 1.4 } div.share-price div.price-row .right p { text-align: right } div.share-price div.price-row .right p.value:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; padding-left: 4px; font-size: 0.9em } div.share-price div.price-row .right p.up { color: #54802d } div.share-price div.price-row .right p.up:after { content: "\e01f" } div.share-price div.price-row .right p.down { color: #DA291C } div.share-price div.price-row .right p.down:after { content: "\e025" } .sting.hybrid.blue h3.careers { padding-left: 0 } .sting.hybrid.blue h3.careers:before { content: "" } div.linkedin-bar { display: inline-block; padding: 0.5em; background: #004976; width: 100%; border-radius: 5px; margin-bottom: 1em; text-align: center } div.linkedin-bar.grey-bar { line-height: 1; margin-bottom: 1em; background: url(../images/hr.png) center 0 no-repeat #eee; background-size: 100% 5px; border-radius: 0 0 5px 5px } div.linkedin-bar.grey-bar .li-border { border-right: #ccc 1px solid } div.linkedin-bar.grey-bar a { color: #004976 } div.linkedin-bar ul { display: inline-block; font-size: 0.8em; margin: 0 } div.linkedin-bar ul li { display: inline; margin-right: 1em } div.linkedin-bar ul li a { color: #fff } div.linkedin-bar ul li a.external:before { content: "\e01a"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; margin-right: 0.7em; font-size: 0.75em } div.linkedin-bar p { padding-left: 10px } div.banner.careers a:before { content: "\e021"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: inline-block; font-size: 0.8em; padding-right: 5px } section.home-banner { margin-top: -5px } section.home-banner .row { background-color: transparent } section.home-banner .home { overflow: hidden } section.home-banner .info-trigger { position: absolute; top: 0; right: 0.750em; z-index: 20; color: #FFFFFF; background: #004976; padding: 10px; font-size: 1.25rem; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25); transition: padding 0.3s ease } section.home-banner .info-trigger .text { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1rem; padding-left: 5px } .font--arial section.home-banner .info-trigger .text { font-family: Arial, Helvetica, sans-serif } @media (max-width: 48em) { section.home-banner .info-trigger .text { display: none } } section.home-banner .info-trigger::before { position: relative; top: 4px } section.home-banner .info-trigger:hover { padding-top: 15px } @media print { section.home-banner .info-trigger { display: none } } section.home-banner .info-block { background: #004976; color: #FFFFFF; display: none; padding: 20px 0 } .no-js section.home-banner .info-block { display: block } section.home-banner .info-block a { color: #FFFFFF } section.home-banner .info-block ul { font-size: .875rem; list-style: none } section.home-banner .info-block ul li a { padding-left: 25px; position: relative } section.home-banner .info-block ul li a::before { transition: all 0.3s ease; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 0.75em; position: absolute; content: "\e021"; left: 7px; line-height: 0; top: 50% } section.home-banner .info-block ul li a:hover::before { left: 3px } section.home-banner .info-block h3 { color: #FFFFFF } section.home-banner .info-block .holder .columns { min-width: 230px } section.home-banner div.info { font-size: 2.875rem; position: absolute; top: 36%; z-index: 20; width: 100%; pointer-events: none; letter-spacing: -0.025em; line-height: 1.25; padding: 1em 60px } @media (max-width: 67.5em) { section.home-banner div.info { top: 20% } } @media (max-width: 48em) { section.home-banner div.info { position: static; background: #007dbb; position: relative; z-index: 2; font-size: 1.875rem; padding: 15px 35px 15px } } @media (min-width: 93.75em) { section.home-banner div.info { font-size: 3.75rem } } @media (min-width: 109.375em) { section.home-banner div.info { top: 62% } } section.home-banner div.info:before { content: ""; display: block; z-index: -1; background: rgba(0, 0, 0, 0.4); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 62%); height: 150%; width: 100%; position: absolute; top: -6%; left: 0px; right: 0 } @media (max-width: 48em) { section.home-banner div.info:before { background: none } } section.home-banner div.info .banner-header { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0) } section.home-banner div.info h1, section.home-banner div.info h2, section.home-banner div.info span { color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.12) } section.home-banner div.info h1, section.home-banner div.info h2 { font-size: 2.875rem; padding-bottom: 0; margin-top: 20px; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif } .font--din section.home-banner div.info h1, .font--din section.home-banner div.info h2 { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial section.home-banner div.info h1, .font--arial section.home-banner div.info h2 { font-family: Arial, Helvetica, sans-serif } @media (max-width: 1150px) { section.home-banner div.info h1, section.home-banner div.info h2 { font-size: 2.375rem } } @media (min-width: 93.75em) { section.home-banner div.info h1, section.home-banner div.info h2 { font-size: 3.75rem; max-width: 1110px; margin: 0 auto } } @media (min-width: 109.375em) { section.home-banner div.info h1, section.home-banner div.info h2 { max-width: 100% } } @media (max-width: 48em) { section.home-banner div.info h1, section.home-banner div.info h2 { font-size: 1.875rem } } section.home-banner div.info span { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 62%; display: block } .font--arial section.home-banner div.info span { font-family: Arial, Helvetica, sans-serif } @media (max-width: 48em) { section.home-banner div.info span { margin-top: 8px } } section.home-banner div.media-wrap { margin-top: 0 } section.home-banner div.media-wrap video { width: 100%; margin-bottom: -1px; vertical-align: bottom } section.home-banner .inline-block { display: inline-block; vertical-align: bottom; overflow: hidden; width: 30%; margin: 0 1.5% } @media (max-width: 960px) { section.home-banner .inline-block { width: 100%; margin: 0; border-bottom: 1px solid #fff } } section.home-banner .tab-holder { position: absolute; left: 0; bottom: 0; z-index: 30; width: 100% } @media (max-width: 960px) { section.home-banner .tab-holder { position: static } } section.home-banner .tab a { background: #004976; border-radius: 8px 8px 0 0; position: relative; display: block; padding: 10px 20px 20px; color: #fff; z-index: 2; transition: all 0.4s ease; transition: all 0.4s ease } @media (max-width: 960px) { section.home-banner .tab a { border-radius: 0 } } section.home-banner .tab a:hover { background-color: #007dbb } section.home-banner .tab a h3 { color: #fff; padding-bottom: 0 } section.home-banner .tab a p { padding: 0 4px; margin-bottom: 0; display: none; opacity: 0; transition: all 0.4s ease; transition: all 0.4s ease } section.home-banner .tab a p::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: inline-block; font-size: 0.9em; content: "\e022"; padding-left: 7px } @media (max-width: 960px) { section.home-banner .tab a p { display: block; opacity: 1 } } section.home-banner .tab a:hover p { display: block; opacity: 1 } @media (min-width: 60em) { section.home-banner.animate div.info { opacity: 0; -webkit-animation: info-animation .5s 2.8s linear forwards; -ms-animation: info-animation .5s 2.8s linear forwards; animation: info-animation .5s 2.8s linear forwards } } section.home-banner.animate div.home .small-12 { width: 100% } section.home-banner.animate div.home .small-12 .hero-link img { width: 100% } @media (min-width: 60em) { section.home-banner.animate div.home .small-12 { max-height: 435px; -webkit-animation: homepage-strip-animation 3s 1s linear forwards; -ms-animation: homepage-strip-animation 3s 1s linear forwards; animation: homepage-strip-animation 3s 1s linear forwards } } @media (min-width: 67.5em) { section.home-banner.animate div.home .small-12 { max-height: 300px; -webkit-animation: homepage-strip-animation 1.5s 1s linear forwards; -ms-animation: homepage-strip-animation 1.5s 1s linear forwards; animation: homepage-strip-animation 1.5s 1s linear forwards } } @media (min-width: 93.75em) { section.home-banner.animate div.home .small-12 { min-height: 680px; -webkit-animation: homepage-strip-animation 1.5s 1s linear forwards; -ms-animation: homepage-strip-animation 1.5s 1s linear forwards; animation: homepage-strip-animation 1.5s 1s linear forwards } } section.home-banner.animate .inline-block { display: inline-block; vertical-align: bottom; overflow: hidden; width: 30%; margin: 0 1.5% } @media (max-width: 960px) { section.home-banner.animate .inline-block { width: 100%; margin: 0; border-bottom: 1px solid #fff } } @media (min-width: 60em) { section.home-banner.animate .inline-block:first-child { margin-bottom: -132px; -webkit-animation: blockcta-animation 1s 3.5s ease forwards; -ms-animation: blockcta-animation 1s 3.5s ease forwards; animation: blockcta-animation 1s 3.5s ease forwards } section.home-banner.animate .inline-block:nth-child(2) { margin-bottom: -132px; -webkit-animation: blockcta-animation 1s 3.7s ease forwards; -ms-animation: blockcta-animation 1s 3.7s ease forwards; animation: blockcta-animation 1s 3.7s ease forwards } section.home-banner.animate .inline-block:nth-child(3) { margin-bottom: -132px; -webkit-animation: blockcta-animation 1s 3.9s ease forwards; -ms-animation: blockcta-animation 1s 3.9s ease forwards; animation: blockcta-animation 1s 3.9s ease forwards } } section.home-banner div.home, section.home { padding: 0 0 0; overflow: hidden; background: #f3f3f3; background: url(../images/curve.png) center bottom no-repeat, linear-gradient(to bottom, #f3f3f3 0%, #fff 29%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#ffffff', GradientType=0); text-align: center } section.home-banner div.home.statement, section.home.statement { margin-bottom: 30px } section.home-banner div.home.first .more-information, section.home.first .more-information { margin-top: 45px } @media (max-width: 48em) { section.home-banner div.home.first .more-information, section.home.first .more-information { margin-top: 20px } } section.home-banner div.home.careers, section.home.careers { padding: 0 0 60px 0 } section.home-banner div.home.last, section.home.last { background: linear-gradient(to bottom, #f3f3f3 0%, #f3f3f3 29%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#ffffff', GradientType=0); padding: 0 } @media print, (min-width: 48.0625em) { section.home-banner div.home.last, section.home.last { margin-bottom: -2em } } section.home-banner div.home.last .more, section.home.last .more { padding-bottom: 40px } section.home-banner div.home:nth-last-child(2), section.home:nth-last-child(2) { margin-bottom: 0 } section.home-banner div.home:nth-last-child(2) .more-information, section.home:nth-last-child(2) .more-information { margin-bottom: 3.5em } section.home-banner div.home .row, section.home .row { background: none } section.home-banner div.home .row > h2, section.home .row > h2 { text-align: center; margin: 1em 0 } section.home-banner div.home .row > h2 b, section.home-banner div.home .row > h2 strong, section.home .row > h2 b, section.home .row > h2 strong { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; font-size: 90%; font-weight: normal } .font--arial section.home-banner div.home .row > h2 b, .font--arial section.home-banner div.home .row > h2 strong, .font--arial section.home .row > h2 b, .font--arial section.home .row > h2 strong { font-family: Arial, Helvetica, sans-serif } section.home-banner div.home .row > h2 span, section.home .row > h2 span { display: inline-block; position: relative } section.home-banner div.home .row > h2 span:before, section.home-banner div.home .row > h2 span:after, section.home .row > h2 span:before, section.home .row > h2 span:after { content: ""; position: absolute; border-top: 1px solid #007dbb; top: 44%; width: 100px } @media print { section.home-banner div.home .row > h2 span:before, section.home-banner div.home .row > h2 span:after, section.home .row > h2 span:before, section.home .row > h2 span:after { border-color: #000 } } section.home-banner div.home .row > h2 span:before, section.home .row > h2 span:before { right: 100%; margin-right: 15px } section.home-banner div.home .row > h2 span:after, section.home .row > h2 span:after { left: 100%; margin-left: 15px } section.home-banner div.home .small-12, section.home .small-12 { position: relative; overflow: hidden } section.home-banner div.home .small-12:before, section.home-banner div.home .small-12:after, section.home .small-12:before, section.home .small-12:after { content: ""; display: block; height: 6px; width: 100%; background-size: 100% 6px; pointer-events: none; z-index: 5; position: absolute; top: 0; left: 0 } @media print, (min-width: 48em) { section.home-banner div.home .small-12:before, section.home-banner div.home .small-12:after, section.home .small-12:before, section.home .small-12:after { background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px } } section.home-banner div.home .small-12:after, section.home .small-12:after { top: auto; bottom: 0 } @media print, (min-width: 48em) { section.home-banner div.home .small-12:after, section.home .small-12:after { background: url(../images/hr_down.png) 0 bottom no-repeat; background-size: 100% 6px } } section.home-banner div.home .owl-item .small-12:before, section.home-banner div.home .owl-item .small-12:after, section.home .owl-item .small-12:before, section.home .owl-item .small-12:after { display: none } @media (max-width: 48em) { section.home-banner div.home div.article, section.home div.article { margin-bottom: 20px } } section.home-banner div.home div.article > a, section.home div.article > a { display: block; text-align: center; min-height: 305px; margin: 0 20px } @media (min-width: 93.75em) { section.home-banner div.home div.article > a, section.home div.article > a { min-height: 385px } } section.home-banner div.home div.article > a div, section.home div.article > a div { position: relative } section.home-banner div.home div.article > a div:after, section.home div.article > a div:after { background-size: 95% 6px; position: absolute; bottom: 0; left: -10%; width: 120%; height: 6px; z-index: 5; pointer-events: none; display: block; content: "" } @media print, (min-width: 48em) { section.home-banner div.home div.article > a div:after, section.home div.article > a div:after { background: url(../images/hr_down.png) center bottom no-repeat } } @media print { section.home-banner div.home div.article > a div:after, section.home div.article > a div:after { display: none } } section.home-banner div.home div.article > a div img, section.home div.article > a div img { border-radius: 10px 10px 0 0; display: inline-block; width: 100%; height: auto } section.home-banner div.home div.article > a h3, section.home div.article > a h3 { padding: 15px 26px 0 } section.home-banner div.home div.article > a h3 b, section.home-banner div.home div.article > a h3 strong, section.home div.article > a h3 b, section.home div.article > a h3 strong { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-weight: normal; display: block } .font--arial section.home-banner div.home div.article > a h3 b, .font--arial section.home-banner div.home div.article > a h3 strong, .font--arial section.home div.article > a h3 b, .font--arial section.home div.article > a h3 strong { font-family: Arial, Helvetica, sans-serif } section.home-banner div.home div.article > a span, section.home div.article > a span { display: block; height: 1px; width: auto; margin: 10px 44% 20px; background: #ccc; line-height: 0; transition: margin 0.3s ease } @media (max-width: 48em) { section.home-banner div.home div.article > a span, section.home div.article > a span { margin: 10px 10% 10px; background: #007dbb } } section.home-banner div.home div.article > a p, section.home div.article > a p { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; opacity: 0; margin: 0 15px; padding: 5px 10px 0; position: relative; text-transform: uppercase; clear: both; line-height: 1.2; color: #007dbb; transition: all 0.3s ease } .font--arial section.home-banner div.home div.article > a p, .font--arial section.home div.article > a p { font-family: Arial, Helvetica, sans-serif } @media (max-width: 48em) { section.home-banner div.home div.article > a p, section.home div.article > a p { opacity: 1 } } @media print { section.home-banner div.home div.article > a p, section.home div.article > a p { margin-bottom: 20px; opacity: 1 } } html.touch-device section.home-banner div.home div.article > a p, html.touch-device section.home div.article > a p { opacity: 1 } section.home-banner div.home div.article > a:hover p, section.home div.article > a:hover p { opacity: 1 } section.home-banner div.home div.article > a:hover span, section.home div.article > a:hover span { margin: 10px 10% 10px; background: #007dbb } section.home-banner div.home .scroll-arrow, section.home .scroll-arrow { display: inline-block; text-indent: -9999em; transition: all 0.3s ease; width: 40px; position: relative; height: 40px; border-radius: 50%; background: #ccc; color: #fff; box-shadow: 0 2px 8px rgba(8, 8, 8, 0.21); border: solid 2px #fff; margin: 8px; padding: 0 } @media (max-width: 30em) { section.home-banner div.home .scroll-arrow, section.home .scroll-arrow { display: none } } @media print { section.home-banner div.home .scroll-arrow, section.home .scroll-arrow { display: none } } section.home-banner div.home .scroll-arrow:after, section.home .scroll-arrow:after { display: block; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; top: 11px; left: 10px; font-size: 1em; content: "\e025"; text-indent: 0 } section.home-banner div.home .scroll-arrow:hover, section.home .scroll-arrow:hover { background-color: #007dbb; box-shadow: 0 2px 8px rgba(8, 8, 8, 0.41) } section.home-banner div.home div.company-news, section.home div.company-news { padding: 20px; margin-bottom: 30px } section.home-banner div.home div.careers, section.home div.careers { padding: 20px; margin-bottom: 30px } section.home-banner div.home a.hero-link, section.home a.hero-link { display: block } .no-js section.home:last-of-type { background-image: none; background: linear-gradient(to bottom, #f3f3f3 0%, #f3f3f3 29%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#ffffff', GradientType=0) } @media print, (min-width: 48em) { .no-js section.home:last-of-type { margin-bottom: -2em } } @-webkit-keyframes info-animation { 0% { opacity: 0; top: 42% } 100% { opacity: 1; top: 36% } } @-ms-keyframes info-animation { 0% { opacity: 0; top: 42% } 100% { opacity: 1; top: 36% } } @keyframes info-animation { 0% { opacity: 0; top: 42% } 100% { opacity: 1; top: 36% } } @-webkit-keyframes homepage-strip-animation { 0% { max-height: 215px } 100% { max-height: 500px } } @-ms-keyframes homepage-strip-animation { 0% { max-height: 215px } 100% { max-height: 500px } } @keyframes homepage-strip-animation { 0% { max-height: 215px } 100% { max-height: 500px } } @media (min-width: 67.5em) { @-webkit-keyframes homepage-strip-animation { 0% { max-height: 300px } 100% { max-height: 600px } } @-ms-keyframes homepage-strip-animation { 0% { max-height: 300px } 100% { max-height: 600px } } @keyframes homepage-strip-animation { 0% { max-height: 300px } 100% { max-height: 600px } } } @-webkit-keyframes blockcta-animation { 0% { margin-bottom: -100px } 100% { margin-bottom: 0px } } @-ms-keyframes blockcta-animation { 0% { margin-bottom: -100px } 100% { margin-bottom: 0px } } @keyframes blockcta-animation { 0% { margin-bottom: -100px } 100% { margin-bottom: 0px } } @-moz-document url-prefix() { .no-js section.home-banner .hero-link img { background: #000; color: #fff; padding: 2em } @media print, (min-width: 48em) { .no-js section.home-banner .hero-link img { padding-bottom: 50% } } } div.marquee { direction: ltr; background: #007dbb; height: 40px; overflow: hidden; margin: -5px 0 5px 0 } div.marquee p { color: #fff; margin: 0; min-width: 1340px; padding: 0 8px } @media (min-width: 93.75em) { div.marquee p { min-width: 2000px } } div.marquee p strong { display: inline-block; margin: 0 20px; background: #004976; padding: 8px } div.marquee p a { font-weight: bold; color: #fff; text-decoration: underline } div.marquee p a:hover { text-decoration: none } .crisis.crisis--dark { position: relative; margin-top: -5px; background: #004976 } @media (min-width: 48.0625em) { .crisis.crisis--dark { margin-bottom: -2em } .crisis.crisis--dark + div, .crisis.crisis--dark + section { margin-top: 2em } } .crisis.crisis--dark::after { display: none !important } .crisis.crisis--dark div.row { color: #fff; background: transparent; padding: 35px 10% } .crisis.crisis--dark div.row a { color: #fff; text-decoration: underline } .crisis.crisis--dark div.row a:hover { text-decoration: none } .crisis.crisis--dark div.row h1 { color: #fff } .home-banner.home-banner--dark { background: #004976; margin-top: -5px } @media (min-width: 48.0625em) { .home-banner.home-banner--dark { margin-bottom: -2em } .home-banner.home-banner--dark + div, .home-banner.home-banner--dark + section { margin-top: 2em } } .home-banner.home-banner--dark .hero { position: relative } @media print, (min-width: 48em) { .home-banner.home-banner--dark .hero:hover .media-wrap img, .home-banner.home-banner--dark .hero:hover .media-wrap video { opacity: 0.7 } } .home-banner.home-banner--dark .hero .media-wrap { background-color: #000 } .home-banner.home-banner--dark .hero .media-wrap img, .home-banner.home-banner--dark .hero .media-wrap video { display: block; min-width: 100%; opacity: 1; height: auto; transition: all 0.4s ease } .home-banner.home-banner--dark .hero .info { background: #007dbb; padding: 15px 15px 0; width: 100%; text-align: center; overflow: hidden } .home-banner.home-banner--dark .hero .info h3 { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.375rem; text-align: center; color: #fff; border-bottom: 1px solid #fff; padding: 0 60px 5px; margin-bottom: 16px; display: inline-block } .font--arial .home-banner.home-banner--dark .hero .info h3 { font-family: Arial, Helvetica, sans-serif } .home-banner.home-banner--dark .hero .info p { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1rem; text-align: center; color: #fff; clear: both; text-transform: uppercase } .font--arial .home-banner.home-banner--dark .hero .info p { font-family: Arial, Helvetica, sans-serif } .home-banner.home-banner--dark .hero .info:before { display: none } @media print, (min-width: 48em) { .home-banner.home-banner--dark .hero .info { position: absolute; top: 50px; z-index: 8; background: none; top: 50px } .home-banner.home-banner--dark .hero .info h3 { font-size: 2.625rem } .home-banner.home-banner--dark .hero .info p { font-size: 1.5625rem } } div.information-for-strip { text-align: center; padding-bottom: 3px } div.information-for-strip > * { display: inline-block; margin: 0; padding: 30px 10px; vertical-align: top } @media (max-width: 48em) { div.information-for-strip > * { display: block; padding: 20px 10px 0 } } div.information-for-strip h3 { font-size: 1.3em; position: relative; padding-left: 32px; padding-right: 32px; color: #707070; background: url(../images/vr.png) right 50% no-repeat; background-size: 6px 100% } @media (max-width: 48em) { div.information-for-strip h3 { background: none; padding-top: 60px } } div.information-for-strip h3:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e015"; position: absolute; top: 26px; color: #007dbb; left: 0; font-size: 1.1em } @media (max-width: 48em) { div.information-for-strip h3:before { top: 10px; left: 50%; font-size: 1.6em; margin-left: -16px } } div.information-for-strip ul { list-style: none } @media (max-width: 48em) { div.information-for-strip ul { text-align: center; padding: 0 10px } } div.information-for-strip ul li { float: left; padding-left: 12px; margin-right: 14px } @media (max-width: 48em) { div.information-for-strip ul li { float: none; display: inline-block; padding: 10px } } div.information-for-strip ul li a { display: block; position: relative; padding-left: 20px } div.information-for-strip ul li a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; position: absolute; top: 5px; color: #007dbb; left: 6px; font-size: 0.6em; transition: all 0.4s ease } div.information-for-strip ul li a:hover::before { left: 2px; color: #004976 } .accordian-wrapper { overflow: hidden; height: 400px } .accordian-wrapper ul#info-accordian { transition: 0.2s ease } .accordian-wrapper ul#info-accordian li { text-align: center; border-left: solid 1px #fff; list-style-type: none; height: 400px; cursor: pointer; transition: 0.5s ease; background: #007dbb; color: #fff; overflow: hidden; float: left } .accordian-wrapper ul#info-accordian li img { max-width: none; height: 66%; margin-bottom: 8px } .accordian-wrapper ul#info-accordian li p { transition: 0.1s ease-in; opacity: 0; font-size: .8125rem; margin: 5px 10px } .accordian-wrapper ul#info-accordian li strong { color: #fff } .accordian-wrapper ul#info-accordian li.active { background: #004976; text-align: left } .accordian-wrapper ul#info-accordian li.active strong { margin: 5px 10px } .accordian-wrapper ul#info-accordian li.active p { transition-delay: 0.6s; opacity: 1 } .accordian-wrapper ul#info-accordian li.active h4 { position: relative } @media (max-width: 48em) { .accordian-wrapper { height: auto } .accordian-wrapper ul#info-accordian li { height: auto; border-left: none; border-bottom: solid 1px #fff; text-align: center !important } .accordian-wrapper ul#info-accordian li p { display: none } .accordian-wrapper ul#info-accordian img { width: 100%; height: auto; display: none; transition: 0.5s ease } .accordian-wrapper ul#info-accordian .active img { display: block } } div.mega-banner { background: #fff 50% 0 no-repeat fixed; position: relative; background-size: 102%; height: 400px; margin-bottom: 30px; margin-top: 14px } div.mega-banner h1, div.mega-banner p { color: #fff; padding: 0 10% } div.mega-banner h1 a, div.mega-banner p a { color: #fff; text-decoration: underline } div.mega-banner h1 a:hover, div.mega-banner p a:hover { text-decoration: none } div.mega-banner::before { content: ""; height: 6px; width: 100%; top: 0; transition: all 0.3s ease; position: absolute; background: url(../images/hr.png) center bottom; background-size: 100% 6px; left: 0; z-index: 10 } @media (max-width: 30em) { div.mega-banner::before { display: none } } div.mega-banner:after { position: absolute; bottom: 0; left: 0; height: 50%; width: 100%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 100%); content: ""; z-index: 4; pointer-events: none } @media (max-width: 30em) { div.mega-banner:after { display: none } } @media (min-width: 93.75em) { div.mega-banner { height: 520px } } @media (max-width: 1250px) { div.mega-banner { height: 330px; background-attachment: scroll; background-size: cover; background-position: 50% 50% } } @media (max-width: 48em) { div.mega-banner { height: 230px; margin-bottom: 20px } } div.mega-banner > div:not(.wiop-crumb) { position: absolute; bottom: 0; width: 100%; z-index: 5 } div.mega-banner div.row:not(.wiop-crumb) { max-width: none; text-align: center; background: transparent } @media (max-width: 30em) { div.mega-banner div.row:not(.wiop-crumb) { position: static } } @media (max-width: 30em) { div.mega-banner { background: none !important; height: auto; margin-bottom: 0 } div.mega-banner h1, div.mega-banner p, div.mega-banner a { color: inherit; text-align: left; padding: 0; text-decoration: none } div.mega-banner h1, div.mega-banner a { color: #007dbb } div.mega-banner a:hover { color: #004976 } } div.social-channels { padding: 0 10px; text-align: center; vertical-align: top } @media (max-width: 48em) { div.social-channels { display: block; padding: 20px 10px 0 } } div.social-channels ul { list-style: none } @media (max-width: 48em) { div.social-channels ul { padding: 0 10px } } div.social-channels ul li { display: inline-block; padding: 10px; padding-left: 12px; margin-right: 18px } @media (max-width: 48em) { div.social-channels ul li { clear: both; display: block } } div.social-channels ul li a { display: inline-block; position: relative; padding-left: 40px } div.social-channels ul li a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute !important; top: -11px !important; color: #007dbb; left: 6px; font-size: 1.8em !important; transition: all 0.4s ease } div.social-channels ul li a:hover::before { left: 2px; color: #004976 } div.social-channels ul li a.facebook:before { content: "\e019"; left: 9px } div.social-channels ul li a.facebook:hover::before { left: 5px } div.social-channels ul li a.twitter:before { content: "\ea91"; left: 0 } div.social-channels ul li a.twitter:hover::before { left: -4px } div.social-channels ul li a.youtube:before { content: "\e006" } .reporting-module-slp { margin: 0 0 4em } @media print, (min-width: 48em) { .reporting-module-slp { margin-bottom: 8em } } .reporting-module-slp > h3 { text-align: center } .reporting-module-slp .inner { transition: border-radius 1s ease; position: relative; background: #666; margin: 0 14px; float: left; color: #fff } @media (max-width: 47.9375em) { .reporting-module-slp .inner { margin: 0; border-bottom: 1px solid #fff; border-radius: 0; width: 100% } .reporting-module-slp .inner.open .title h3:after { content: "\e01f" } } @media print, (min-width: 48em) { .reporting-module-slp .inner { border-radius: 10px 10px 0 0; box-shadow: 0 -3px 6px -1px rgba(0, 0, 0, 0.3) inset; margin: 0 6px } .reporting-module-slp .inner::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; transition: all 1s ease; background: #000; border: 4px solid #FFF; border-radius: 50%; bottom: -20px; content: "\e025"; cursor: pointer; font-size: 1.25em; height: 40px; left: 50%; line-height: 36px; margin-left: -20px; position: absolute; text-align: center; width: 40px; z-index: 2 } } @media print, print and (min-width: 48em) { .reporting-module-slp .inner::before { display: none } } @media print, (min-width: 48em) { .reporting-module-slp .inner.wellbeing::before { background: #006696 } .reporting-module-slp .inner.environment::before { background: #416523 } .reporting-module-slp .inner.livelihoods::before { background: #AD0F57 } .reporting-module-slp .inner.wellbeing:hover::before { background: #007dbb } .reporting-module-slp .inner.environment:hover::before { background: #54802d } .reporting-module-slp .inner.livelihoods:hover::before { background: #d0006f } .reporting-module-slp .inner.open { box-shadow: none } } @media (min-width: 57.5em) { .reporting-module-slp .inner { margin: 0 14px } .reporting-module-slp .inner.open::before { content: "\e001"; line-height: 32px } } .reporting-module-slp .inner .title { transition: padding 1s ease; margin: 0 4% 0 4%; padding: 1em 0.75em; position: relative; text-align: center; cursor: pointer } @media (max-width: 47.9375em) { .reporting-module-slp .inner .title { padding: 20px 15px; text-align: left; margin: 0; overflow: hidden } } .reporting-module-slp .inner .title h3 { color: #fff; padding: 0; position: relative } @media print, (min-width: 48em) { .reporting-module-slp .inner .title h3 { font-size: 1.188em } } @media (min-width: 57.5em) { .reporting-module-slp .inner .title h3 { font-size: 1.375em } } @media (min-width: 67.5em) { .reporting-module-slp .inner .title h3 { font-size: 1.5em } } @media (max-width: 48em) { .reporting-module-slp .inner .title h3 { padding: 0 30px 0 30px } .reporting-module-slp .inner .title h3 br { display: none } } .reporting-module-slp .inner .title h3:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 2.708em; display: block } @media (max-width: 48em) { .reporting-module-slp .inner .title h3:before { display: inline-block; font-size: 1.5em; padding: 0 7px 0 0; position: absolute; left: 0; top: -5px } } @media (max-width: 47.9375em) { .reporting-module-slp .inner .title h3:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 0.9em; display: block; content: "\e025"; position: absolute; right: 10px; top: 0 } } .reporting-module-slp .inner .title p { font-size: 0.875em; height: 100px; opacity: 1; padding: 0 1.5em; transition: opacity ease 0.3s, height ease 0.3s } @media (max-width: 47.9375em) { .reporting-module-slp .inner .title p { display: none } } @media print, (min-width: 48em) { .reporting-module-slp .inner.open { border-radius: 10px } } .reporting-module-slp .inner.open .content { border-radius: 0 0 10px 10px } .reporting-module-slp .inner .content { display: none; padding: 0.75em 0 1em; position: relative; float: left; width: 100%; z-index: 1 } .no-js .reporting-module-slp .inner .content { display: block } @media (max-width: 47.9375em) { .reporting-module-slp .inner .content { padding: 0.75em 0 } } @media print, (min-width: 48em) { .reporting-module-slp .inner .content { display: block } } .reporting-module-slp .inner .content > p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #fff; float: left; line-height: 1.25; margin: 1em 1.579em; position: relative; transition: opacity ease 0.3s; z-index: 1 } .font--arial .reporting-module-slp .inner .content > p { font-family: Arial, Helvetica, sans-serif } .reporting-module-slp .inner .content > a { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #fff; float: left; line-height: 1.25; margin: 1em 1.579em; position: relative; transition: opacity ease 0.3s; z-index: 1 } .font--arial .reporting-module-slp .inner .content > a { font-family: Arial, Helvetica, sans-serif } .reporting-module-slp .inner .content > a:before { background: rgba(255, 255, 255, 0.25); content: ""; display: block; height: 1px; margin: 0 auto 1.5em; transition: width ease 0.3s; width: 1.875em } @media (max-width: 47.9375em) { .reporting-module-slp .inner .content > a:before { display: none } } .touch .reporting-module-slp .inner .content > a:before { display: none } @media print, (min-width: 48em) { .no-touch .reporting-module-slp .inner .content > a { display: block; height: 124px; margin-top: 0; text-align: center; overflow: hidden } .no-touch .reporting-module-slp .inner .content > a:hover:before { width: 100% } .no-touch .reporting-module-slp .inner .content > a:hover span:first-child { height: 0; opacity: 0 } .no-touch .reporting-module-slp .inner .content > a:hover span:last-child { opacity: 1 } } .reporting-module-slp .inner .content > a span { transition: all 0.3s ease; display: block } @media print, (min-width: 48em) { .reporting-module-slp .inner .content > a span:first-child { height: 100px; margin: 0; opacity: 1 } } .touch .reporting-module-slp .inner .content > a span:first-child { height: auto; min-height: 100px } .reporting-module-slp .inner .content > a span:last-child { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; clear: both; margin: 1em 0 0; text-transform: uppercase } .font--arial .reporting-module-slp .inner .content > a span:last-child { font-family: Arial, Helvetica, sans-serif } .reporting-module-slp .inner .content > a span:last-child::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; top: 1px; position: relative; display: inline-block; content: "\e022"; padding: 0 0 0 6px } @media print, (min-width: 48em) { .reporting-module-slp .inner .content > a span:last-child { margin: 0; opacity: 0; padding: 0 1em } } .touch .reporting-module-slp .inner .content > a span:last-child { opacity: 1; padding: 0 } .reporting-module-slp .inner .content ol { clear: both; list-style: none } @media (max-width: 47.9375em) { .reporting-module-slp .inner .content ol { margin: 0 } } @media screen and (min-width: 48em) { .reporting-module-slp .inner .content ol { display: none } } .no-js .reporting-module-slp .inner .content ol { display: block } .reporting-module-slp .inner .content ol li h4 { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 10px 0; letter-spacing: -0.025em; font-size: 1em; clear: both; color: #fff; cursor: pointer; display: block; line-height: 1; margin: 0 1em; text-transform: none; position: relative; padding-right: 1em } .font--arial .reporting-module-slp .inner .content ol li h4 { font-family: Arial, Helvetica, sans-serif } @media (max-width: 47.9375em) { .reporting-module-slp .inner .content ol li h4 { font-family: arial; padding: 16px 10px } } @media screen and (min-width: 57.5em) { .reporting-module-slp .inner .content ol li h4 { font-size: 1.2em; margin: 0 1.579em } } .reporting-module-slp .inner .content ol li h4:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; transition: all 1s ease; content: "\e025"; display: inline-block; position: absolute; right: 0; font-size: 0.75em } @media print { .reporting-module-slp .inner .content ol li h4:after { display: none } } .reporting-module-slp .inner .content ol li h4.open::after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .reporting-module-slp .inner .content ol li:first-child h4 { border: 0 } .reporting-module-slp .inner .content ol li .sub-content { box-shadow: 0 6px 7px -6px rgba(0, 0, 0, 0.2) inset; display: none; float: left; font-family: Arial, sans-serif; padding: 1em 1.25em; width: 100% } .no-js .reporting-module-slp .inner .content ol li .sub-content { display: block } @media print { .reporting-module-slp .inner .content ol li .sub-content { display: block } } @media screen and (min-width: 57.5em) { .reporting-module-slp .inner .content ol li .sub-content { padding: 1em 1.875em } } #content-wrap .reporting-module-slp .inner .content ol li .sub-content a.internal { color: #FFF; display: inline-block; margin: 1em 0 0; font-weight: bold } #content-wrap .reporting-module-slp .inner .content ol li .sub-content a.internal:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; float: left; padding: 0 0.5em 0 0; display: block; font-size: 0.9em; top: 2px } #content-wrap .reporting-module-slp .inner .content ol li .sub-content a.internal:hover { opacity: 1 } .reporting-module-slp .inner .content ol li .sub-content ul { margin: 0 } .reporting-module-slp .inner .content ol li .sub-content ul li { padding-left: 1.5em; list-style: none; position: relative } .reporting-module-slp .inner .content ol li .sub-content ul li.no-disc { padding-left: 0 } .reporting-module-slp .inner .content ol li .sub-content span { border: solid 2px #ccc; border-radius: 50%; display: inline-block; height: 1em; position: absolute; top: 4px; width: 1em; left: 0 } .reporting-module-slp .inner .content ol li .sub-content span.large { height: 1.25em; top: 2px; width: 1.25em; right: 0 } .reporting-module-slp .inner .content ol li .sub-content span.blue-disc { background-color: #007dbb; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center center; background-size: 75% } .reporting-module-slp .inner .content ol li .sub-content span.green-disc { background-color: #54802d !important } .reporting-module-slp .inner .content ol li .sub-content span.red-disc { background-color: #D34400 !important } .reporting-module-slp .inner .content ol li .sub-content span.white-disc { background-color: #FFFFFF !important; border-color: #D34400 } .reporting-module-slp .inner .content ol li .sub-content span.white-disc:after { color: #D34400; font-size: 0.6em; display: block; content: attr(data-value); height: 100%; position: absolute; right: 0; text-align: center; top: -1px; width: 100% } .reporting-module-slp .inner .content ol li .sub-content span.grey-disc { background-color: #FFFFFF !important } .reporting-module-slp .inner.wellbeing { background: #007dbb } .reporting-module-slp .inner.wellbeing .title h3::before { content: "\e02a" } .reporting-module-slp .inner.wellbeing .sub-content { background-color: #006696 } .reporting-module-slp .inner.environment { background: #54802d } .reporting-module-slp .inner.environment .title h3::before { content: "\e02c" } .reporting-module-slp .inner.environment .sub-content { background-color: #416523 } .reporting-module-slp .inner.livelihoods { background: #d0006f } .reporting-module-slp .inner.livelihoods .title h3::before { content: "\e02b" } .reporting-module-slp .inner.livelihoods .sub-content { background-color: #AD0F57 } @media print, (min-width: 48em) { .reporting-module-slp.inview .inner::before { opacity: 1 } .reporting-module-slp.inview .inner.open::before { content: "\e001"; line-height: 32px } } .slp-intro { background: #eee !important; margin: 0 14px 1.5em !important; border-radius: 10px; padding: 20px 20px 0 } .more-information { margin: 30px auto; text-align: center } @media print { .more-information { display: none } } .more-information.expanded .outer .inner { height: 40px; width: auto } .more-information.expanded .outer .inner h3 { background: transparent; width: auto } .more-information.expanded .outer .inner ul { border-radius: 20px; display: block; float: right; height: 40px; width: 0 } .more-information.expanded .outer .inner ul li { float: left; margin: 0 15px; opacity: 0; text-align: center } .more-information .outer { display: inline-block } .more-information .outer .inner { background: #007dbb; border-radius: 20px; box-shadow: 0 2px 8px rgba(8, 8, 8, 0); color: #FFF; float: left; font-size: 1.125rem; line-height: 40px; border: 1px solid #fff; margin: 0 auto; overflow: hidden; transition: all 0.3s ease } .more-information .outer .inner:hover { box-shadow: 0 2px 8px rgba(8, 8, 8, 0.41) } .more-information .outer .inner h3 { color: #FFFFFF; float: left; font-size: inherit; line-height: inherit; margin: 0; padding: 0 20px; white-space: nowrap } .more-information .outer .inner ul { background: #004976; display: none; float: left; font-size: .875rem; line-height: inherit; list-style: none; margin: 0; padding: 0; text-align: left; width: 100% } .no-js .more-information .outer .inner ul { display: block } @media screen and (min-width: 48em) { .no-js .more-information .outer .inner ul { display: inline-block; width: auto } } .more-information .outer .inner ul li { display: block; line-height: inherit; margin: 0 15px 0 5px; white-space: nowrap } @media screen and (min-width: 48em) { .no-js .more-information .outer .inner ul li { display: inline-block } } .more-information .outer .inner ul li a { color: #FFFFFF; position: relative; border-radius: 0 5px 5px 0; padding-left: 25px } .more-information .outer .inner ul li a::after { transition: all 0.3s ease; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 0.75em; position: absolute; line-height: 0; top: 50%; left: 7px; content: "\e021" } .animate .more-information { margin: 45px auto 14px auto } .poll { margin-bottom: 2em; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px } @media print { .poll { visibility: hidden } } .poll h3 { padding: 22px 0 12px; margin-top: 0 } .poll .section-container.accordion { margin-bottom: 1.5em } .poll .full-bar { width: 100%; margin: 15px 0 0 } .poll .full-bar div { height: 20px; transition: width 1s ease-in-out; width: 0% } .poll li:nth-child(3n + 1) .full-bar div { background-color: #54802d } .poll li:nth-child(3n + 2) .full-bar div { background-color: #8A1B61 } .poll li:nth-child(3n + 3) .full-bar div { background-color: #d34400 } .poll .result { padding-bottom: 0.5em; background-size: 100% 6px } .poll .result ul { list-style: none } .poll .result ul li p { margin: 0 } .poll .result ul li p span { font-weight: bold } .widget-result { display: none; padding-bottom: 0.5em; background: url(../images/hr.png) 0 bottom no-repeat; background-size: 100% 6px } div.newsletter-signup { margin-bottom: 2em; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px } @media print { div.newsletter-signup { visibility: hidden } } div.newsletter-signup h3 { padding: 22px 0 12px; margin-top: 0 } div.newsletter-signup .topics label { padding: 0 0 20px } @media (max-width: 48em) { div.newsletter-signup .topics label { padding: 0 0 40px } } div.newsletter-signup .widget-result { padding-bottom: 0; background: none } #content-wrap > section > .row > .large-9 article div.newsletter-signup, #content-wrap > section > .row > .large-9 article div.widget-result { background: none } body.sustainable-living-plan-summary div.summary, body.theme-slp div.summary { background: url(../images/hr.png) 0 bottom no-repeat; background-size: 100% 6px; padding-bottom: 2em; margin-bottom: 2em } body.sustainable-living-plan-summary div.summary hr, body.theme-slp div.summary hr { background: #eee; height: 1px; margin: 0.5em 0 } body.sustainable-living-plan-summary div.summary ul.targets, body.theme-slp div.summary ul.targets { margin-bottom: 0; overflow: hidden } body.sustainable-living-plan-summary div.summary ul.targets li, body.theme-slp div.summary ul.targets li { padding-top: 0.75em !important; padding-bottom: 0.75em !important; list-style: none; float: left !important; margin-bottom: 0; position: relative } body.sustainable-living-plan-summary div.summary ul.targets li a, body.theme-slp div.summary ul.targets li a { position: relative; padding: 0 0 0 36px; display: block } body.sustainable-living-plan-summary div.summary ul.targets li:nth-child(3n + 1), body.theme-slp div.summary ul.targets li:nth-child(3n + 1) { clear: both } body.sustainable-living-plan-summary div.summary .goal, body.theme-slp div.summary .goal { margin-top: 2em } body.sustainable-living-plan-summary div.summary .goal h2, body.theme-slp div.summary .goal h2 { padding-left: 55px; position: relative; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px; padding-top: 1em } body.sustainable-living-plan-summary div.summary .goal h2:before, body.theme-slp div.summary .goal h2:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; top: 11px; left: 0; font-size: 1.7em } body.sustainable-living-plan-summary div.summary .goal .sub-heading p, body.theme-slp div.summary .goal .sub-heading p { padding-left: 55px; font-weight: bold } body.sustainable-living-plan-summary div.summary .pillar, body.theme-slp div.summary .pillar { margin-top: 1em } body.sustainable-living-plan-summary div.summary .pillar h3, body.theme-slp div.summary .pillar h3 { margin-bottom: 20px; color: #fff; padding: 10px } body.sustainable-living-plan-summary div.summary .pillar h3 span, body.theme-slp div.summary .pillar h3 span { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: inline-block; margin-right: 0.3em } .font--arial body.sustainable-living-plan-summary div.summary .pillar h3 span, .font--arial body.theme-slp div.summary .pillar h3 span { font-family: Arial, Helvetica, sans-serif } body.sustainable-living-plan-summary div.summary #health h2, body.theme-slp div.summary #health h2 { color: #007dbb } body.sustainable-living-plan-summary div.summary #health h2:before, body.theme-slp div.summary #health h2:before { content: "\e02a" } body.sustainable-living-plan-summary div.summary #health .sub-heading, body.theme-slp div.summary #health .sub-heading { color: #007dbb } body.sustainable-living-plan-summary div.summary #health h3, body.theme-slp div.summary #health h3 { background-color: #007dbb } body.sustainable-living-plan-summary div.summary #environment h2, body.theme-slp div.summary #environment h2 { color: #54802d } body.sustainable-living-plan-summary div.summary #environment h2:before, body.theme-slp div.summary #environment h2:before { content: "\e02c" } body.sustainable-living-plan-summary div.summary #environment .sub-heading, body.theme-slp div.summary #environment .sub-heading { color: #54802d } body.sustainable-living-plan-summary div.summary #environment h3, body.theme-slp div.summary #environment h3 { background-color: #54802d } body.sustainable-living-plan-summary div.summary #livelihoods h2, body.theme-slp div.summary #livelihoods h2 { color: #8A1B61 } body.sustainable-living-plan-summary div.summary #livelihoods h2:before, body.theme-slp div.summary #livelihoods h2:before { content: "\e02b" } body.sustainable-living-plan-summary div.summary #livelihoods .sub-heading, body.theme-slp div.summary #livelihoods .sub-heading { color: #8A1B61 } body.sustainable-living-plan-summary div.summary #livelihoods h3, body.theme-slp div.summary #livelihoods h3 { background-color: #8A1B61 } body.sustainable-living-plan-summary span.icon, body.theme-slp span.icon { background-position: center center; background-repeat: no-repeat; height: 23px; width: 23px; display: inline-block; position: absolute; left: 0; top: 0; border-radius: 30px; padding: 3px } body.sustainable-living-plan-summary .target, body.theme-slp .target { position: relative } body.sustainable-living-plan-summary .overall, body.theme-slp .overall { position: relative } body.sustainable-living-plan-summary .overall span.icon, body.theme-slp .overall span.icon { padding: 16px; right: 0 } body.sustainable-living-plan-summary p.overall, body.theme-slp p.overall { text-transform: uppercase; font-weight: bold; margin-bottom: 15px; padding: 6px 0 0 48px !important } body.sustainable-living-plan-summary .off-plan span.icon, body.theme-slp .off-plan span.icon { border: solid 2px #ccc !important; background-color: #d34400 !important } body.sustainable-living-plan-summary .on-plan span.icon, body.theme-slp .on-plan span.icon { border: solid 2px #ccc !important; background-color: #54802d !important } body.sustainable-living-plan-summary .achieved span.icon, body.theme-slp .achieved span.icon { border: solid 2px #ccc !important; background: url(../images/tick.png) 50% 50% no-repeat #004976 !important } body.sustainable-living-plan-summary .percentage span.icon, body.theme-slp .percentage span.icon { background-color: #fff; text-align: center; border: solid 2px #DA291C; color: #DA291C; font-weight: normal; line-height: 1; padding: 2px } body.sustainable-living-plan-summary .discontinued span.icon, body.theme-slp .discontinued span.icon { border: solid 2px #ccc !important; background: #FFF !important } body.sustainable-living-plan-summary #sticky-dock, body.theme-slp #sticky-dock { position: fixed; padding: 20px 10px 20px 10px; width: 100%; background: #eee; border-top: solid 1px #ccc; bottom: -150px; transition: all 1s ease-in; z-index: 1 } @media (max-width: 48em) { body.sustainable-living-plan-summary #sticky-dock, body.theme-slp #sticky-dock { padding: 10px 0 } } body.sustainable-living-plan-summary #sticky-dock.active, body.theme-slp #sticky-dock.active { bottom: 0px } body.sustainable-living-plan-summary #sticky-dock .row, body.theme-slp #sticky-dock .row { background: none } body.sustainable-living-plan-summary #sticky-dock h4, body.theme-slp #sticky-dock h4 { margin: 2px 10px 0 0; float: right } @media (max-width: 48em) { body.sustainable-living-plan-summary #sticky-dock h4, body.theme-slp #sticky-dock h4 { float: none } } body.sustainable-living-plan-summary ul.key li, body.theme-slp ul.key li { line-height: 22px; list-style: none; margin-bottom: 7px; position: relative; padding-left: 30px } @media (max-width: 67.5em) { body.sustainable-living-plan-summary ul.key li, body.theme-slp ul.key li { font-size: 0.8em; line-height: 1; padding-bottom: 7px; padding-right: 0; padding-top: 7px } } body.sustainable-living-plan-summary ul.key li.percentage, body.theme-slp ul.key li.percentage { padding-top: 0 } @media (min-width: 380px) { body.sustainable-living-plan-summary ul.key li.percentage, body.theme-slp ul.key li.percentage { padding-top: 7px } } @media (min-width: 67.5em) { body.sustainable-living-plan-summary ul.key li.percentage, body.theme-slp ul.key li.percentage { padding-top: 0 } } body.sustainable-living-plan-summary ul.key li span.icon, body.theme-slp ul.key li span.icon { padding: 3px } body.sustainable-living-plan-summary div.slp-target, body.theme-slp div.slp-target { margin: 1em 0 2em; padding-bottom: 6px; overflow: hidden; position: relative } body.sustainable-living-plan-summary div.slp-target:after, body.theme-slp div.slp-target:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px; pointer-events: none; content: "" } body.sustainable-living-plan-summary div.slp-target h4, body.theme-slp div.slp-target h4 { color: #fff; padding: 20px 15px; background: #007dbb url(../images/hr_down.png) 0 bottom no-repeat; background-size: 100% 6px; margin-bottom: 0; border-radius: 10px 10px 0 0 } body.sustainable-living-plan-summary div.slp-target.overall div, body.theme-slp div.slp-target.overall div { padding: 15px 15px 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #fff } body.sustainable-living-plan-summary div.slp-target.overall div p, body.theme-slp div.slp-target.overall div p { margin-bottom: 0; padding-bottom: 1.25em } body.sustainable-living-plan-summary div.slp-target.overall div p.target, body.theme-slp div.slp-target.overall div p.target { padding-left: 30px } body.sustainable-living-plan-summary div.slp-target.overall div p.target span, body.theme-slp div.slp-target.overall div p.target span { padding: 0; right: 0 } body.sustainable-living-plan-summary div.slp-target.individual div.individual-target, body.theme-slp div.slp-target.individual div.individual-target { border-right: 1px solid #ccc; margin-bottom: 10px } @media (max-width: 48em) { body.sustainable-living-plan-summary div.slp-target.individual div.individual-target, body.theme-slp div.slp-target.individual div.individual-target { border-right: none; border-bottom: 1px solid #ccc; margin-bottom: 15px } } body.sustainable-living-plan-summary div.slp-target.individual ul, body.theme-slp div.slp-target.individual ul { padding-left: 20px } body.sustainable-living-plan-summary div.slp-target.individual ul p, body.theme-slp div.slp-target.individual ul p { font-size: 1em } body.sustainable-living-plan-summary div.slp-target.individual div.individual-result p, body.theme-slp div.slp-target.individual div.individual-result p { padding-left: 30px } body.sustainable-living-plan-summary div.slp-target .key, body.theme-slp div.slp-target .key { overflow: hidden; background: #eee; padding: 10px; margin: 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 0.938em } body.sustainable-living-plan-summary div.slp-target h5:first-child, body.theme-slp div.slp-target h5:first-child { margin-top: 0 } body.sustainable-living-plan-summary div.slp-target p.title, body.theme-slp div.slp-target p.title { text-transform: uppercase } .pagination { font-size: 0.875em; margin: 0 0 2em; font-size: 0.8em } .pagination ul { display: inline; list-style: none; margin: 0; padding: 0 } .pagination ul li { display: inline; font-weight: bold } .pagination ul li.cur a { background: #007dbb; } .pagination ul li a { background: #1eb0f9; color: #FFFFFF; padding: 6px 10px; font-weight: normal; transition: background 0.3s ease; font-size: 1.2em; } .pagination ul li a:hover { background: #004976 } @media print, (min-width: 48em) { .pagination { text-align: right } } div.pagination.hidden { display: none } div.social-single { overflow: hidden; padding: 0 0 2em 0; padding-top: 10px } div.social-single .followers { text-align: center; margin-bottom: 0.5em } div.social-single .followers span { font-weight: bold } div.social-single h3 { text-indent: -9999px; position: relative; background: url(../images/hr_down.png) 0 bottom no-repeat #007dbb; background-size: 100% 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; margin-bottom: 15px; height: 55px } @media (max-width: 30em) { div.social-single h3 { height: 50px } } @media (max-width: 48em) { div.social-single h3 { height: 45px } } @media (min-width: 93.75em) { div.social-single h3 { height: 65px } } div.social-single h3::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; text-indent: 0; display: block; position: absolute; left: 50%; top: 5px; margin-left: -19px; font-size: 1.5em; color: #fff } div.social-single h3.linkedin::after { content: "\e031" } div.social-single h3.youtube::after { content: "\e006" } div.social-single h3.facebook::after { content: "\e019" } div.social-single h3.google-plusone::after { content: "\e016" } div.social-single h3.vimeo::after { content: "\e027" } div.social-single p, div.social-single div.video-container { padding-left: 10px; padding-right: 10px } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width: 100%; margin: 0 auto 2em } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } #body.filter.videos .item .video iframe { height: 100% } #body.filter.videos p { color: #999999 } nav.in-page { position: relative; margin: 1.5em 0; overflow: hidden; clear: both } @media (max-width: 48em) { nav.in-page { margin-bottom: 1em; margin-top: 1em } } @media print { nav.in-page { display: none } } nav.in-page ul { list-style: none; margin: 0 } nav.in-page ul li { width: 32%; float: left; position: relative; padding: 6px 0 } nav.in-page ul li a { font-size: 1.2em; padding: 14px 20px 14px 44px; position: relative; display: block; line-height: 1.25; background-color: transparent; border: 1px solid #eee; transition: background 0.3s ease } @media (max-width: 48em) { nav.in-page ul li a { padding-right: 4px; padding-left: 36px } } nav.in-page ul li a::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01f"; font-size: 1rem; color: #ccc; display: block; top: 50%; left: 14px; margin-top: -11px; position: absolute; transition: 0.3s ease } @media (max-width: 48em) { nav.in-page ul li a::after { left: 10px } } nav.in-page ul li a:hover { background-color: #eee } nav.in-page ul li a:not(.disabled):hover::after { left: 14px; color: #007dbb } @media (max-width: 48em) { nav.in-page ul li a:not(.disabled):hover::after { left: 14px } } nav.in-page ul li a strong { display: inline; position: relative } @media (max-width: 48em) { nav.in-page ul li a span { display: none } } nav.in-page ul li a.disabled { color: #666; cursor: default } nav.in-page ul li a.disabled:hover { background-color: transparent } nav.in-page ul li.back-link a { border: 1px solid #ccc } nav.in-page ul li.back-link a::after { top: 52% } @media (max-width: 48em) { nav.in-page ul li.back-link a::after { top: 50% } } nav.in-page ul li.back-link a:hover::after { top: 40%; left: 14px } @media (max-width: 48em) { nav.in-page ul li.back-link a:hover::after { top: 50%; left: 14px } } nav.in-page ul li.previous-link { margin: 0 2% } @media (max-width: 30em) { nav.in-page ul li.previous-link { width: 32%; margin: 0 2% } } .js nav.in-page ul li.previous-link a { visibility: hidden } nav.in-page ul li.previous-link a::after { content: "\e023"; top: 50% } @media (max-width: 48em) { nav.in-page ul li.previous-link a::after { top: 50% } } nav.in-page ul li.previous-link a:not(.disabled):hover::after { left: 10px } @media (max-width: 48em) { nav.in-page ul li.previous-link a:not(.disabled):hover::after { left: 14px } } nav.in-page ul li.next-link { float: right } nav.in-page ul li.next-link a { padding: 14px 44px 14px 20px } .js nav.in-page ul li.next-link a { visibility: hidden } @media (max-width: 48em) { nav.in-page ul li.next-link a { padding-left: 10px; padding-right: 35px } } nav.in-page ul li.next-link a::after { content: "\e021"; left: auto; right: 14px } @media (max-width: 48em) { nav.in-page ul li.next-link a::after { right: 10px } } nav.in-page ul li.next-link a:not(.disabled):hover::after { left: auto; right: 9px } @media (max-width: 48em) { nav.in-page ul li.next-link a:not(.disabled):hover::after { right: 10px } } #sticky-dock { position: fixed; padding: 20px 10px 20px 10px; width: 100%; background: #eee; border-top: solid 1px #ccc; bottom: -230px; transition: all 0.7s ease-in; z-index: 1 } @media (max-width: 48em) { #sticky-dock { padding: 10px 0 } } #sticky-dock.active { bottom: 0px } #sticky-dock .row { background: none } #sticky-dock h4 { margin: 2px 10px 0 0; float: right } @media (max-width: 48em) { #sticky-dock h4 { float: none } } #sticky-dock input[type="checkbox"] { margin-right: 8px } #sticky-dock input[type="email"] { margin-bottom: 10px } #sticky-dock form div { margin-bottom: 0 } @media (max-width: 48em) { #sticky-dock form { padding-top: 15px } } #sticky-dock .mfp-close { color: #007dbb } #sticky-dock .result { display: none } article.error article { overflow: hidden } article.error .error-image { float: left; padding-top: 20px } article.error .error-image h1 { line-height: 1 } article.error .error-image h1 span { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 3.75rem; display: block } .font--din article.error .error-image h1 span { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial article.error .error-image h1 span { font-family: Arial, Helvetica, sans-serif } @media (max-width: 30em) { article.error .error-image h1 span { font-size: 2.5rem } } article.error .error-info { padding-top: 40px } article.error .error-info ul { padding-left: 30px } .rangeslider, .rangeslider__fill { background: #ccc; display: block; height: 5px; width: 130px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6); -o-border-radius: 10px; border-radius: 10px } .rangeslider { position: relative } .rangeslider .rangeslider__fill { position: absolute; top: 0 } .rangeslider .rangeslider__handle { background: white; border: 1px solid #999; cursor: pointer; display: inline-block; width: 15px; height: 15px; position: absolute; top: -5px; background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); -o-border-radius: 50%; border-radius: 50% } .rangeslider .rangeslider__handle:active { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)) } input[type="range"]:focus + .rangeslider .rangeslider__handle { box-shadow: 0 0 8px rgba(255, 0, 255, 0.9) } .better-dateinput-value { position: absolute; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-style: none solid; border-color: transparent; margin: 0px; padding: 0.7em; line-height: normal; color: #000; font-size: .9375rem } @media (max-width: 48em) { .better-dateinput-value { font-size: .875rem } } @media (max-width: 30em) { .better-dateinput-value { font-size: .8125rem } } .better-dateinput-calendar { position: absolute; visibility: hidden; left: 0px; top: 110%; margin: 0px; overflow: hidden; cursor: default; color: #FFF; background: #007dbb; border: 1px solid #DDD; border-radius: 3px; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; width: 300px; opacity: 1; z-index: 1000; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; transition: 0.15s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .better-dateinput-calendar[aria-hidden=true] { opacity: 0; -webkit-transform: scale(0, 0); transform: scale(0, 0) } .better-dateinput-calendar-header { font-weight: bold; line-height: 2.5 } .better-dateinput-calendar > a { position: absolute; left: 0; top: 0; width: 3em; line-height: 3.25; font-size: 0.75em } .better-dateinput-calendar > a:before { content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-width: 0.5em 0.75em 0.5em 0; border-color: transparent; border-right-color: #fff; vertical-align: middle } .better-dateinput-calendar > a + a { left: auto; right: 0 } .better-dateinput-calendar > a + a:before { border-width: 0.5em 0 0.5em 0.75em; border-color: transparent; border-left-color: #fff } .better-dateinput-calendar-days { table-layout: fixed; border-spacing: 0; border-collapse: collapse; color: #555; background: #FFF } .better-dateinput-calendar-days td, .better-dateinput-calendar-days th { width: 1em; height: 1em; line-height: 1; text-align: center; padding: 5px } .better-dateinput-calendar-days th { font-size: 0.75em; background-color: #DDD; font-weight: bold } .better-dateinput-calendar-days td { border: 1px solid #DDD; transition: background-color 0.1s ease-out } .better-dateinput-calendar-past, .better-dateinput-calendar-future { color: #BBB } .better-dateinput-calendar-today { color: #FFF; background-color: #007dbb; font-weight: bold } .better-dateinput-calendar-days td:hover { background-color: #004976; color: #fff } .better-dateinput-calendar > a:hover, td.better-dateinput-calendar-today:hover { background-color: #004976 } .better-dateinput-value + input::-moz-placeholder { color: initial } .unileverLogoSvg { width: 70%; margin-left: 17%; margin-right: 15%; margin-bottom: 30px } .logo-container { width: 50%; margin: 20px auto 0px auto } @media (max-width: 30em) { .logo-container { width: 90% } } .logo-container path:hover { cursor: pointer } .logo-container .svg-container { background-size: contain; position: relative } .js .logo-container .svg-container { background-image: none !important } .logo-container .svg-container .next, .logo-container .svg-container .prev { position: absolute; top: 50%; margin-top: -50px; background: #eaeaea; border-radius: 50px; height: 50px; width: 50px; text-indent: -9999px; cursor: pointer; -webkit-transition-delay: 500ms; -webkit-transition: all 500ms; -moz-transition-delay: 500ms; -moz-transition: all 500ms; transition-delay: 500ms; transition: all 500ms; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; opacity: 0 } .logo-container .svg-container .next:hover, .logo-container .svg-container .prev:hover { background-color: #0067B1 } .logo-container .svg-container .next { right: 0px; background: url(../images/logo-arrow-right.png) no-repeat center center #eaeaea; background-size: 20px } .logo-container .svg-container .prev { left: 0px; background: url(../images/logo-arrow-left.png) no-repeat center center #eaeaea; background-size: 20px } .info-container { margin-bottom: 20px } .info-container ul { position: relative; display: block; margin: 0px; padding: 0px } .info-container ul li { list-style-type: none; display: none; box-sizing: border-box; padding: 10px 20px 20px; width: 100%; text-align: center } .no-js .info-container ul li { display: block } @media (max-width: 30em) { .info-container ul li { font-size: .8125rem } } .info-container ul li:first-child { padding-top: 20px } .info-container ul li:before { font-family: 'unilever-logo'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 7.7em; display: block; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #d0006f; line-height: 80px } .info-container ul li:nth-child(2):before { content: "\e60b" } .info-container ul li:nth-child(3):before { content: "\e617" } .info-container ul li:nth-child(4):before { content: "\e608" } .info-container ul li:nth-child(5):before { content: "\e60c" } .info-container ul li:nth-child(6):before { content: "\e610" } .info-container ul li:nth-child(7):before { content: "\e606" } .info-container ul li:nth-child(8):before { content: "\e603" } .info-container ul li:nth-child(9):before { content: "\e600" } .info-container ul li:nth-child(10):before { content: "\e60e" } .info-container ul li:nth-child(11):before { content: "\e604" } .info-container ul li:nth-child(12):before { content: "\e607" } .info-container ul li:nth-child(13):before { content: "\e616" } .info-container ul li:nth-child(14):before { content: "\e605" } .info-container ul li:nth-child(15):before { content: "\e60d" } .info-container ul li:nth-child(16):before { content: "\e60a" } .info-container ul li:nth-child(17):before { content: "\e60f" } .info-container ul li:nth-child(18):before { content: "\e614" } .info-container ul li:nth-child(19):before { content: "\e601" } .info-container ul li:nth-child(20):before { content: "\e615" } .info-container ul li:nth-child(21):before { content: "\e611" } .info-container ul li:nth-child(22):before { content: "\e612" } .info-container ul li:nth-child(23):before { content: "\e613" } .info-container ul li:nth-child(24):before { content: "\e602" } .info-container ul li:nth-child(25):before { content: "\e609" } body.active > div:not(.primary-nav):not(.mfp-bg):not(.mfp-wrap) { opacity: 0.2 } body.active a.primary-nav__menu-toggle { /*position: fixed;*/ z-index: 1 } #mobile-nav { color: #FFFFFF; display: none; position: absolute; top: 0; left: 0; height: 100%; width: 75%; opacity: 1; z-index: 550; box-shadow: 3px 0 5px rgba(0, 0, 0, 0.15) } #mobile-nav ul { width: 100%; height: 100%; position: absolute; top: -9999em; left: -100%; transition: left 0.3s ease } #mobile-nav ul.shown { top: 0; left: 0; margin: 0; } #mobile-nav .mobile-nav-level-2 { z-index: 2; background: #004976; margin-left: 0; height: 100vh; } #mobile-nav #mobile-nav-level-1 { background: #004976; height: 100vh; } #mobile-nav #mobile-nav-level-2 { z-index: 2; background: #006499 } #mobile-nav #mobile-nav-level-3 { z-index: 3; background: #007dbb } #mobile-nav #mobile-nav-level-4 { z-index: 4; background: #008dcc } #mobile-nav #mobile-nav-level-5 { z-index: 5; background: #009ddd } #mobile-nav #mobile-nav-level-6 { z-index: 6; background: #00adee } #mobile-nav li { font-size: .875rem; cursor: pointer; line-height: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; list-style: none } #mobile-nav li.has-children { padding-right: 25px } #mobile-nav li.has-children:after { position: absolute; top: 14px; right: 0.75em; content: "\e021"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.5em; opacity: 0.5 } #mobile-nav li.handheld { background: #333 } #mobile-nav li.breadcrumb { background: rgba(0, 0, 0, 0.2); font-weight: bold } #mobile-nav li.breadcrumb.back { font-weight: normal; color: #ccc; background: rgba(0, 0, 0, 0.5) } #mobile-nav li.breadcrumb.back a { font-size: .875rem } #mobile-nav li.breadcrumb a { font-size: 1rem; color: #fff } #mobile-nav li.active:not(.breadcrumb) { background: #333; color: #fff } #mobile-nav li.back { padding-left: 30px } #mobile-nav li.back:after { position: absolute; top: 16px; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e023"; display: inline-block; font-size: 1.5em; color: rgba(255, 255, 255, 0.3); left: 14px; content: "\e023" } #mobile-nav a { color: white; display: block; padding: 15px } #mobile-nav .social-links { line-height: 0 } #mobile-nav .social-links ul { list-style: none; margin: 0; overflow: hidden; position: static } #mobile-nav .social-links li { border: none; float: left; line-height: 0 } #mobile-nav .social-links li a { text-indent: -9999em; position: relative; line-height: 0.8 } #mobile-nav .social-links li a:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; text-indent: 0; display: block } #mobile-nav .social-links li a.facebook:after { content: "\e019"; margin-top: -7px; font-size: 1.6em; line-height: 0.8 } #mobile-nav .social-links li a.twitter:after { content: "\ea91"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.youtube:after { content: "\e006"; margin-top: -7px; font-size: 1.6em; line-height: 0.8 } #mobile-nav .social-links li a.linkedin:after { content: "\e031"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.vimeo:after { content: "\e027"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.vimeo_alt:after { content: "\e602"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.youku:after { content: "\e603"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.vk:after { content: "\e604"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.vino:after { content: "\e605"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.tv-sohu-com:after { content: "\e606"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.tumblr:after { content: "\e609"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.tudou:after { content: "\e60a"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.tecent-wechat:after { content: "\e60b"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.snapchat:after { content: "\e60c"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.sinaweibo:after { content: "\e60d"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.pinterest:after { content: "\e60e"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.odnoklassniki-ru:after { content: "\e60f"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.letv-com:after { content: "\e610"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.instagram:after { content: "\e611"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.foursquare:after { content: "\e613"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.flickr:after { content: "\e614"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } #mobile-nav .social-links li a.glassdoor:after { content: "\e900"; margin-top: -7px; font-size: 1.4em; line-height: 0.9 } .author-profile img { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } .author-profile__author { margin: 1em 0 0; font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } .font--arial .author-profile__author { font-family: Arial, Helvetica, sans-serif } .author-profile--full { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 20px 0; margin-bottom: 20px } .author-profile--full img { float: left; width: 40%; margin-right: 30px; margin-bottom: 20px } .author-profile--full .author-profile__author { margin-top: 0 } .author-profile--full .linklist { margin: 0; background: none; padding-bottom: 0 } .author-profile--full .linklist ul { border: 0 } .author-profile--full .linklist ul li { border: 0 } .author-profile--full .linklist ul li > a { padding-left: 30px !important } .author-profile--full .linklist ul li > a::before { margin-top: -10px } .author-profile--full .linklist ul li > a:hover, .author-profile--full .linklist ul li > a:focus, .author-profile--full .linklist ul li > a:active { box-shadow: none; background-color: transparent } .author-profile--full .linklist ul li > a.twitter::before, .author-profile--full .linklist ul li > a.linkedin::before, .author-profile--full .linklist ul li > a.facebook::before { font-size: 20px } .author-profile--full .linklist ul li > a.facebook::before { top: 16px; left: 3px } .author-profile--full .linklist ul li:last-child > a { padding-bottom: 0px !important } @media print, (min-width: 48em) { .author-profile--full { overflow: auto; padding-top: 24px; margin-bottom: 40px } .author-profile--full img { width: 25% } .author-profile--full p { float: right; width: calc(75% - 30px) } .author-profile--full .linklist { float: right; width: calc(75% - 30px) } .author-profile--full .linklist ul li { float: left } .author-profile--full .linklist ul li > a::before { margin-top: -5px } .author-profile--full .linklist ul li:last-child > a { padding-bottom: 0.8em !important } } .five-issues { clear: both; overflow: hidden; margin-top: 2em !important; margin-bottom: 2em !important; margin-left: -0.9375em !important; margin-right: -0.9375em !important } .five-issues .item { cursor: pointer; margin-bottom: 1.875em } .five-issues .item.open { width: 50% } .five-issues .item.open h3 { display: block; padding: 0 0 10px } .five-issues .item.open p, .five-issues .item.open a { display: block } .five-issues .item.open a { margin-top: 0.5em } .five-issues .item.open a.download { margin-bottom: 1em } .five-issues .item.open figure { background-color: rgba(0, 0, 0, 0.7) } .five-issues .item .inner { transition: all 0.4s ease; position: relative; padding: 0 !important } .five-issues .item .inner:after { padding-top: 100%; display: block; content: '' } .five-issues .item .inner::before { position: absolute; bottom: 0; height: 60%; width: 100%; content: ""; z-index: 1; pointer-events: none; border-radius: 0 0 5px 5px } .five-issues .item .inner:hover { background-color: #ccc } .five-issues .item figure { position: absolute; bottom: 0; right: 0; left: 0; color: #fff; background-color: rgba(0, 0, 0, 0.4); padding: 10px 10px 20px; border-radius: 0 0 5px 5px; z-index: 2; transition: all 0.4s ease } .five-issues .item:hover figure { background-color: rgba(0, 0, 0, 0.7) } .five-issues .item img { position: absolute; width: 100%; margin: 0 !important; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: all 0.4s ease } .five-issues .item h3 { color: #fff; padding: 0; font-size: 1em } @media (max-width: 30em) { .five-issues .item h3 { font-size: 4vw } } .five-issues .item p, .five-issues .item a { display: none } .five-issues .item a { color: #fff; text-decoration: none; margin-top: 10px; font-weight: bold } .no-js .five-issues .item a { display: block } @media (max-width: 48em) { .five-issues .item.open { width: 100% } .five-issues .item figure, .five-issues .item.open figure, .five-issues .item img { position: static; background: #007dbb } .five-issues .item img { border-radius: none } .five-issues .item .inner::after, .five-issues .item .inner::before { display: none } } .full-intro p { font-size: .8125rem } @media (min-width: 93.75em) { .full-intro p { font-size: .875rem } } @media (max-width: 30em) { .full-intro p { font-size: .8125rem } } .slp-2016 article img { margin-bottom: 10px; width: 100% } .slp-2016 p.case-summary { background-color: #007dbb; border-radius: 10px; color: #fff; padding: 18px 20px } .cta-footer { display: table-row } @media (max-width: 48em) { .cta-footer { display: block; width: 100%; margin-bottom: 2em } } .cta-footer__section { display: table-cell; vertical-align: middle; border: none; padding-left: 20px; padding-right: 20px; width: 50% } .cta-footer__cta { position: relative; color: #fff; padding: 20px 35px 20px 20px; line-height: 1.2em; background-color: #007dbb; background-image: url("../images/chevron-right.png"); background-repeat: no-repeat; background-position: right center; margin-right: 10px; transition: background-color .3s linear } .cta-footer__cta:hover { background-color: #004976; color: #fff } .cta-footer__share-section { background-color: #EEE } .cta-footer--blue .cta-footer__cta { background-color: #007dbb } .cta-footer--blue .cta-footer__cta:hover { background-color: #004976 } .cta-footer--pink .cta-footer__cta { background-color: #d0006f } .cta-footer--pink .cta-footer__cta:hover { background-color: #722257 } .cta-footer--green .cta-footer__cta { background-color: #54802d } .cta-footer--green .cta-footer__cta:hover { background-color: #00573F } @media (max-width: 48em) { .cta-footer__section { display: block; width: 100%; padding: 20px } .cta-footer__cta { padding-right: 40px } .cta-footer__share-section { text-align: center } } @media (max-width: 29.9375em) { .cta-footer__share-section { padding-left: 0; padding-right: 0 } } .share-icons-bar { padding: 20px; font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif } .font--arial .share-icons-bar { font-family: Arial, Helvetica, sans-serif } .share-icons-bar--page-footer { padding-top: 22.5px; padding-bottom: 22.5px; line-height: 1.2em; vertical-align: middle; width: 50% } .share-icons-bar__title { line-height: 1.2em; vertical-align: middle; display: inline-block; margin: 10px 0 } .share-icons-bar__list { list-style: none; display: inline-block; margin: 0; padding: 0 !important } .share-icons-bar__item { display: inline } .share-icons-bar__share-icon { line-height: 1.2em; vertical-align: middle; display: inline-block; margin: 10px 0 } .share-icons-bar__link:focus { outline: none } .share-icons-bar__link .icon-at-facebook:before, .share-icons-bar__link .icon-at-twitter:before, .share-icons-bar__link .icon-at-google-plusone:before, .share-icons-bar__link .icon-at-linkedin:before, .share-icons-bar__link .icon-at-email:before { line-height: 1.2em; margin-left: 10px; font-size: 1.92rem; vertical-align: middle } @media (max-width: 48em) { .share-icons-bar { display: block; width: 100%; padding: 20px } .share-icons-bar__share-icon { line-height: 0.8em } .share-icons-bar__title { line-height: 0.8em; font-size: 0.8em } .share-icons-bar__link * { margin-left: 5px } .share-icons-bar__link *:before { font-size: 1.2em } } @media (max-width: 29.9375em) { .share-icons-bar { text-align: center } .share-icons-bar__link .icon-at-facebook:before, .share-icons-bar__link .icon-at-twitter:before, .share-icons-bar__link .icon-at-google-plusone:before, .share-icons-bar__link .icon-at-linkedin:before, .share-icons-bar__link .icon-at-email:before { margin-left: 0 } } .statistic-box { background-color: #004976; border-radius: 10px; color: #fff; margin-bottom: 40px; padding: 30px 20px 0 } .statistic-box__list { margin-bottom: 0 } .statistic-box__stat, .statistic-box__text { display: inline-block; width: 48%; vertical-align: middle; padding-bottom: 30px; margin-bottom: 0 } .statistic-box__stat { text-align: right; padding-right: 10px; font-size: 2.4em; line-height: 0em; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif } .statistic-box__text { font-size: 1em; line-height: 1.2em; font-family: "DINWebPro-Light", Arial, sans-serif } .statistic-box--single-vertical { padding: 20px 17.5px 20px; margin: 0 0 1em } .statistic-box--single-vertical .statistic-box__stat, .statistic-box--single-vertical .statistic-box__text { width: 100%; vertical-align: initial; text-align: center; line-height: normal; padding-bottom: 0; padding-right: 0 } .statistic-box--single-vertical .statistic-box__stat:last-child, .statistic-box--single-vertical .statistic-box__text:last-child { padding-bottom: 0; line-height: 1.2 } @media (max-width: 57.5em) and (min-width: 48em) { .statistic-box__stat { font-size: 1.6em } } @media (max-width: 48em) { .statistic-box { padding-top: 15px } .statistic-box__stat, .statistic-box__text { padding-bottom: 30px } .statistic-box--single-vertical { padding-top: 15px; padding-bottom: 15px } .statistic-box--single-vertical .statistic-box__stat, .statistic-box--single-vertical .statistic-box__text { padding-bottom: 7.5px } .statistic-box--single-vertical .statistic-box__stat { font-size: 1.6em } } .sting-carousel__header { text-align: center } .theme-ubrand .sting-carousel__header { text-align: left } .sting-carousel-slp2016 { background: url(../images/hr.png) 50% 0 no-repeat #eee; background-size: 100% 6px; overflow: hidden; -ms-user-select: none; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; position: relative; padding-top: 20px } .sting-carousel-slp2016 .owl-item { opacity: 0.5; transition: opacity .3s linear } .sting-carousel-slp2016 .owl-item.active { opacity: 1 } .sting-carousel-slp2016 .owl-item .image-mask:after { background-image: url(../images/masks/small-sting-mask-blue_accordioncontent.png); width: 101%; left: -1px; right: -1px } .sting-carousel-slp2016 .owl-item h3 { padding-top: 0 } @media (max-width: 29.9375em) { .sting-carousel-slp2016 .owl-item .sting { padding-bottom: 0.5em; margin-bottom: 0.5em } } .sting-carousel-slp2016 .owl-nav { position: absolute; width: 300px; height: 20px; left: 50%; margin-left: -150px; bottom: 25px; top: auto; font-size: 1.4em } @media (max-width: 29.9375em) { .sting-carousel-slp2016 .owl-nav { top: 40%; height: 0; width: 100%; left: 0; right: 0; margin-left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.8em } } .sting-carousel-slp2016 .owl-nav .owl-prev, .sting-carousel-slp2016 .owl-nav .owl-next { color: #007dbb; cursor: pointer; display: block; position: absolute; top: 0px; transition: color 0.3s ease; transition: color .3s ease } .sting-carousel-slp2016 .owl-nav .owl-prev::before, .sting-carousel-slp2016 .owl-nav .owl-next::before { font-family: 'unilever-iconfont'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased } .sting-carousel-slp2016 .owl-nav .owl-prev:hover, .sting-carousel-slp2016 .owl-nav .owl-next:hover { color: #004976 } .sting-carousel-slp2016 .owl-nav .owl-prev:active, .sting-carousel-slp2016 .owl-nav .owl-next:active { color: #007dbb } .sting-carousel-slp2016 .owl-nav .owl-prev { left: 0px } .sting-carousel-slp2016 .owl-nav .owl-prev::before { content: "\e023" } @media (max-width: 29.9375em) { .sting-carousel-slp2016 .owl-nav .owl-prev { left: 5px } } @media (max-width: 48em) { .sting-carousel-slp2016 .owl-nav .owl-prev { display: none } } .sting-carousel-slp2016 .owl-nav .owl-next { right: 0px } .sting-carousel-slp2016 .owl-nav .owl-next::before { content: "\e021" } @media (max-width: 29.9375em) { .sting-carousel-slp2016 .owl-nav .owl-next { right: 5px } } @media (max-width: 48em) { .sting-carousel-slp2016 .owl-nav .owl-next { display: none } } .sting-carousel-slp2016 .owl-dots { position: absolute; width: 250px; left: 50%; bottom: 25px; margin-left: -125px; text-align: center } .theme-ubrand .sting-carousel-slp2016 { background: none } .theme-ubrand .sting-carousel-slp2016 .owl-item .image-mask:after { content: none } .theme-ubrand .sting-carousel-slp2016 .owl-item .sting { min-height: 0; padding-bottom: 2em } .theme-ubrand .sting-carousel-slp2016 h3 { font-size: 1.25em } .theme-ubrand h2.sting-carousel__header { font-family: "ShireTypesPro-Derbyshire", Arial, Helvetica, sans-serif; letter-spacing: -0.62px; color: #015DEE; margin-top: 1.875rem } .theme-ubrand .case-study-carousel-page { margin-bottom: 2.5rem } @media (max-width: 30em) { .theme-ubrand .case-study-carousel-page { margin-bottom: 1.25rem } } .cta-link.post-carousel { float: none !important } .theme-ubrand .cta-link.post-carousel { display: none; background: none } .cta-link.post-carousel a { text-align: center; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } @media (max-width: 29.9375em) { .cta-link.post-carousel a { left: 15%; right: 15%; -webkit-transform: translateX(0); transform: translateX(0) } } .sting--popup__content.white-popup-block { max-height: 5000px; padding: 0 } @media (max-width: 67.5em) { .sting--popup__content.white-popup-block { max-width: 80% } } @media (max-width: 30em) { .sting--popup__content.white-popup-block { max-width: 90% } } .sting-lightbox__img-frame { position: relative } .sting-lightbox__arrow { position: absolute; top: 50%; padding: 20px; z-index: 1046; cursor: pointer; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; font-size: 2em; color: #007dbb; transition: color .3s ease } .sting-lightbox__arrow:hover { color: #004976 } .sting-lightbox__arrow:after { font-family: 'unilever-iconfont' } .sting-lightbox__arrow--left { margin-left: -400px } .sting-lightbox__arrow--left:after { content: "\e023" } .sting-lightbox__arrow--right { margin-left: 400px } .sting-lightbox__arrow--right:after { content: "\e021" } .sting-lightbox__mobile-arrow { display: none; position: absolute; bottom: 0; box-shadow: none; border: none; padding: 0; width: 44px; height: 44px; margin-bottom: 0 } .sting-lightbox__mobile-arrow:after { font-family: 'unilever-iconfont'; text-align: center } .sting-lightbox__mobile-arrow--left { left: 0 } .sting-lightbox__mobile-arrow--left:after { content: "\e023" } .sting-lightbox__mobile-arrow--right { right: 0 } .sting-lightbox__mobile-arrow--right:after { content: "\e021" } @media (max-width: 67.5em) { .sting-lightbox__arrow { -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .sting-lightbox__arrow--left { margin-left: 0; left: 0 } .sting-lightbox__arrow--right { margin-left: 0; right: 0; left: auto } } @media (max-width: 48em) { .sting-lightbox__arrow { padding: 5px } } @media (max-width: 30em) { .sting-lightbox__mobile-arrow { display: block } .sting-lightbox__arrow { display: none } } .sting-article__img { width: 100% } .sting-article__text { padding: 20px } .sting-article__title { padding-top: 30px } .photos-gallery .photos-gallery__item[class*="column"] + .photos-gallery__item[class*="column"]:last-child { float: left } .photos-gallery__header { text-align: center } .photos-gallery__item { padding-bottom: 0.9375em; padding-top: 0.9375em } .photos-gallery__img-mask { overflow: hidden; display: block } .photos-gallery__img { -webkit-transform: scale(1); transform: scale(1); transition-duration: 1s; transition-timing-function: ease; -webkit-transform: scale(1); -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease } .photos-gallery__img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); transition-duration: 0.4s; transition-timing-function: ease; -webkit-transform: scale(1.1); -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease } @media (max-width: 48em) { .photos-gallery__img:hover { -webkit-transform: scale(1); transform: scale(1) } } .photos-gallery__more-rows-label { margin-top: 0.9375em } .photos-gallery--popup__content.white-popup-block { max-height: none; padding: 0; max-width: 1024px; overflow: visible } .photos-gallery--popup__content.white-popup-block .mfp-close { -webkit-transform: translateY(-100%); transform: translateY(-100%) } @media (max-width: 73em) { .photos-gallery--popup__content.white-popup-block { max-width: calc(100% - 144px) } } @media (max-width: 48em) { .photos-gallery--popup__content.white-popup-block { max-width: calc(100% - 84px) } } @media (max-width: 30em) { .photos-gallery--popup__content.white-popup-block { max-width: 95% } } .photo-box { overflow: hidden } .photo-box__img { width: 100%; display: table-row } .photo-box__nav { position: absolute; -webkit-transform: translateY(-100%); transform: translateY(-100%) } .photo-box__index { background-color: rgba(0, 0, 0, 0.5); padding: 15px; height: 100%; text-align: center } .photo-box__index__text { margin-bottom: 0; line-height: 1em; color: #fff } .photo-box__text-container-table { display: table; width: 100% } .photo-box__text-container { display: table-row } .photo-box__content { padding: 20px; display: table-cell } .photo-box__share { width: 340px; padding: 0; text-align: center; vertical-align: middle; border-left: 1px solid #ccc } .photo-box__arrow { position: absolute; top: 50%; padding: 20px; z-index: 1046; cursor: pointer; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 2em; color: #007dbb; transition: color .3s ease } .photo-box__arrow:hover { color: #004976 } .photo-box__arrow:after { font-family: 'unilever-iconfont' } .photo-box__arrow--left { margin-left: -564px } .photo-box__arrow--left:after { content: "\e023" } .photo-box__arrow--right { margin-left: 564px } .photo-box__arrow--right:after { content: "\e021" } .photo-box__mobile-arrow { display: none; height: 100%; box-shadow: none; border: none; padding: 0 } .photo-box__mobile-arrow:after { font-family: 'unilever-iconfont'; text-align: center } .photo-box__mobile-arrow--left:after { content: "\e023" } .photo-box__mobile-arrow--right:after { content: "\e021" } @media (max-width: 73em) { .photo-box__arrow { -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .photo-box__arrow--left { margin-left: 0; left: 0 } .photo-box__arrow--right { margin-left: 0; right: 0; left: auto } } @media (max-width: 67.5em) { .photo-box__content { display: block; border-right: none } .photo-box__text-content { padding-bottom: 0 } .photo-box__share { width: 100%; text-align: left; border-left: none } } @media (max-width: 48em) { .photo-box__text-container { display: block } .photo-box__arrow { padding: 5px } } @media (max-width: 30em) { .photo-box__nav { width: 100% } .photo-box__index { display: table-cell; float: left; position: static; width: calc(100% - 88px); height: 44px; -webkit-transform: translateY(0); transform: translateY(0) } .photo-box__arrow { display: none } .photo-box__mobile-arrow { display: table-cell; float: left; width: 44px; height: 44px; margin-bottom: 0 } } .arrow-link:before { content: "\e021"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; padding-right: 5px; vertical-align: middle } .hidden-text { position: absolute; left: -99999px; width: 1px; height: 1px; overflow: hidden; font-size: .0625rem } .wrapper.overview-2016 { margin-top: -6px } .overview-2016 .roundel { width: 220px; height: 220px; text-align: center; border-radius: 50%; margin-bottom: 2em; background: radial-gradient(ellipse at bottom left, rgba(0, 125, 187, 0.85) 65%, rgba(0, 73, 118, 0.85) 100%); transition: All 0.6s ease } .overview-2016 .roundel.pre-animate { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3) } .overview-2016 .roundel.visible { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .overview-2016 .roundel span { height: 220px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle } .overview-2016 .roundel div.content { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; font-family: 'unilever_illustrative_betaBd'; font-size: 1.25rem; color: #fff; padding: 20px; line-height: 1.25 } .overview-2016 .roundel div.content h2, .overview-2016 .roundel div.content h3 { color: white } .overview-2016 section:before, .overview-2016 section:after { content: " "; display: table } .overview-2016 section:after { clear: both } .overview-2016 section div.left, .overview-2016 section div.right { width: 50%; padding: 4em; position: relative } .overview-2016 section.one .roundel, .overview-2016 section.four .roundel, .overview-2016 section.seven .roundel { background: radial-gradient(ellipse at bottom left, rgba(0, 73, 118, 0.85) 65%, rgba(0, 30, 50, 0.85) 100%) } .overview-2016 div.left { float: left } .overview-2016 div.right { float: right } .overview-2016 a { font-weight: bold } .overview-2016 ol, .overview-2016 ul { list-style: none } .overview-2016 section.one { background: black; position: relative } .overview-2016 section.one::after, .overview-2016 section.four::after, .overview-2016 section.seven::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: url(../media/overview-slp2016/hr.png) 0 0 no-repeat; background-size: 100% 6px; height: 6px; z-index: 4; pointer-events: none } .overview-2016 section.one div.roundel h2 b:nth-child(1) { border-bottom: 1px solid white; margin-bottom: 13px; padding-bottom: 6px } .overview-2016 section.one .title { position: absolute; top: 45%; left: 0; right: 0; z-index: 5; display: none } .overview-2016 section.one .title h2 { text-align: center; font-size: 2.625rem; color: white; text-transform: uppercase; position: relative; font-family: "DINWebPro-Light"; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4) } .overview-2016 section.one .title h2:after { content: ""; display: block; z-index: -1; background: rgba(0, 0, 0, 0.4); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 62%); height: 140%; width: auto; position: absolute; top: -30%; left: 10%; right: 10% } .overview-2016 section.one .title h2 b { font-weight: normal; font-family: "DINWebPro-Black" } .overview-2016 section.one .title { display: block } .overview-2016 ul.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0 } .overview-2016 ul.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; background-position: 50% 60%; background-repeat: no-repeat; background-size: cover } .overview-2016 section.one ul.rslides li { padding-top: 25%; max-height: 370px; min-height: 190px } .overview-2016 ul.rslides li:first-child { position: relative; display: block; float: left } .overview-2016 section.one ul li:nth-child(1) { background-image: url(../media/overview-slp2016/hero-01.jpg) } .overview-2016 section.one ul li:nth-child(2) { background-image: url(../media/overview-slp2016/hero-02.jpg) } .overview-2016 section.one ul li:nth-child(3) { background-image: url(../media/overview-slp2016/hero-03.jpg) } .overview-2016 section.one ul li:nth-child(4) { background-image: url(../media/overview-slp2016/hero-04.jpg) } .overview-2016 section.one ul li:nth-child(5) { background-image: url(../media/overview-slp2016/hero-05.jpg) } .overview-2016 section.two .image { background: url(../media/overview-slp2016/tea-pickers.jpg) 0 bottom no-repeat fixed; background-size: cover; border-top: 60px solid white } .overview-2016 section.two .roundel ul li { text-align: center; min-height: 60px; display: block !important; width: 180px; font-size: 1.4375rem } .overview-2016 section.three .left .roundel { position: absolute; right: 50px; top: -100px } .overview-2016 section.three .right .roundel { position: absolute; right: 50%; top: 0; margin-right: -150px } .overview-2016 section.three .right .roundel div.content { font-size: 1.375rem } .overview-2016 section.three div.text { padding: 10em 4em 2em } .overview-2016 section.three .image { padding-top: 0; padding-bottom: 0 } .overview-2016 section.three .image.visible { background: url(../media/overview-slp2016/collective.gif) 50% 90% no-repeat #fff } .overview-2016 section.four { background: url(../media/overview-slp2016/polman2.jpg) 50% top no-repeat fixed; background-size: cover; padding: 4em 0; position: relative; overflow: hidden } .overview-2016 section.four div.roundel { width: 300px; height: 300px; margin-top: 0; margin-left: 11% } .overview-2016 section.four div.roundel span { height: 300px } .overview-2016 section.four div.roundel div.content h2 { font-size: 2.875rem; line-height: 1.15; text-transform: uppercase; font-family: "DINWebPro-Light" } .overview-2016 section.four div.roundel div.content h2 b { font-weight: normal; font-family: "DINWebPro-Black"; display: block; border-top: 1px solid white; padding-top: 10px; font-size: 1.875rem } .overview-2016 section.four div.roundel div.content p { font-size: 1rem; margin-bottom: 0; line-height: 1.5; padding: 0 20px 10px; font-family: Arial, sans-serif } .overview-2016 section.four div.right { padding: 4em 6em 4em 6em; color: #333 } .overview-2016 section.four blockquote { margin: 2em 0; text-transform: uppercase; padding: 0.9em 0 0 30px } .overview-2016 section.four blockquote p { font-family: "DINWebPro-Light"; color: #004976; font-size: 3.125rem; line-height: 1.25; margin-bottom: 0 } .overview-2016 section.four blockquote:before { left: 0 } .overview-2016 section.four blockquote footer { font-family: "DINWebPro-Black"; font-size: 1.25rem; color: #007dbb; background: none; box-shadow: none } .overview-2016 section.five { padding: 4em } .overview-2016 section.five > p { padding: 20px 15% 20px; position: relative; z-index: 2; background: white } .overview-2016 section.five h3 { font-size: 1.75rem; font-family: "DINWebPro-Medium"; text-align: center; margin-top: 2em } .overview-2016 section.five ol { text-align: center } .overview-2016 section.five ol li { width: 27%; display: inline-block; vertical-align: top; margin: 20px; text-align: left; opacity: 0; position: relative; top: 30px; border-radius: 10px; background: #007dbb; transition: All 0.6s ease; z-index: 2 } .overview-2016 section.five ol li.visible { opacity: 1; top: 0 } .overview-2016 section.five ol li:nth-child(2) { transition: All 0.6s ease .5s } .overview-2016 section.five ol li:nth-child(3) { transition: All 0.6s ease 1s } .overview-2016 section.five ol li:nth-child(2) { background-color: #54802d } .overview-2016 section.five ol li:nth-child(3) { background-color: #d0006f } .overview-2016 section.five ol li:nth-child(2) a { background-image: url(../media/overview-slp2016/icon-plant.png) } .overview-2016 section.five ol li:nth-child(3) a { background-image: url(../media/overview-slp2016/icon-heart.png) } .overview-2016 section.five ol li a { padding: 110px 30px 10px; border-radius: 10px; display: block; background-position: 50% 20px; background-repeat: no-repeat; background-image: url(../media/overview-slp2016/icon-spark.png); background-color: transparent; color: white; transition: All 0.6s ease } .overview-2016 section.five ol li a:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.2) } .overview-2016 section.five ol li p { color: white; margin-top: 0; text-align: center } .overview-2016 section.five ol li p b { opacity: 0.7; display: block; font-size: 2.625rem; margin: 10px 0 0; letter-spacing: -0.04em; line-height: 1; font-family: "unilever_illustrative_betaBd" } .overview-2016 section.six { position: relative } .overview-2016 section.six div.roundel { width: 300px; height: 300px; margin: 6em auto 20em; position: relative; z-index: 5 } .overview-2016 section.six div.roundel a { color: #fff; transition: color 0.3s ease } .overview-2016 section.six div.roundel a:hover { color: #ccc } .overview-2016 section.six div.roundel span { height: 300px } .overview-2016 section.six div.roundel p { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0; padding: 0 30px } .overview-2016 section.six ul li { position: absolute; width: 400px; text-align: left; transition: All 0.6s ease; background-color: #fff; z-index: 1 } .overview-2016 section.six ul li h4 { font-family: "unilever_illustrative_betaBd"; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.04em; margin: 0 } .overview-2016 section.six ul li div.silouhette { float: left; width: 22% } .overview-2016 section.six ul li div.copy { float: right; width: 75% } .overview-2016 section.six ul li.pre-animate { opacity: 0 } .overview-2016 section.six ul li.visible { opacity: 1 } .overview-2016 section.six ul li.costs { top: 50px; right: 7% } .overview-2016 section.six ul li.costs h4 { color: #54802d } .overview-2016 section.six ul li.trust { top: 380px; right: 7% } .overview-2016 section.six ul li.trust h4 { color: #007dbb } .overview-2016 section.six ul li.risk { top: 380px; left: 7% } .overview-2016 section.six ul li.risk h4 { color: #54802d } .overview-2016 section.six ul li.growth { top: 50px; left: 7% } .overview-2016 section.six ul li.growth h4 { color: #d0006f } .overview-2016 section.seven { background: url(../media/overview-slp2016/wash.jpg) 50% 50% no-repeat fixed; background-size: cover; padding: 8em 4em; position: relative } .overview-2016 section.seven .roundel { height: 300px; width: 300px; margin: 0 auto } .overview-2016 section.seven .roundel span { height: 300px } .overview-2016 section.seven .roundel h2 { line-height: 1.2; text-transform: uppercase; font-family: "DINWebPro-Light"; font-size: 1.625rem } .overview-2016 section.seven .roundel h2 a { color: #fff; transition: color 0.3s ease } .overview-2016 section.seven .roundel h2 a:hover { color: #ccc } .overview-2016 section.seven .roundel h2 b { font-family: "DINWebPro-Black"; font-size: 2.75rem; border-top: 1px solid white; padding-top: 10px; display: block; line-height: 1.1; margin-top: 7px } .overview-2016 section.eight { padding: 4em 0 0; position: relative } .overview-2016 section.eight > p { max-width: 50%; margin: 0 auto 2em } .overview-2016 section.eight > p:last-of-type { text-align: center; font-size: 1.5rem; max-width: 45%; font-family: "DINWebPro-Light"; text-align: center; margin-top: 7em; margin-bottom: 0 } .overview-2016 section.eight > p:last-of-type b { color: #004976; font-weight: normal; display: block; margin-top: 1em; font-size: 1.75rem } .overview-2016 section.eight > div.roundel { position: absolute; top: -100px; left: 5% } .overview-2016 section.eight ul { text-align: center; margin: 6em 0 } .overview-2016 section.eight li { display: inline-block; margin: 7em 2% 11em; width: 28%; vertical-align: top; position: relative } .overview-2016 section.eight li div.roundel { height: 170px; width: 170px; position: relative; margin: 0 auto; z-index: 3 } .overview-2016 section.eight li div.roundel span { height: 170px } .overview-2016 section.eight li div.roundel .content { font-size: 1rem } .overview-2016 section.eight li img { height: auto } .overview-2016 section.eight li div.copy { text-align: left; width: 200px; position: absolute; z-index: 2 } .overview-2016 section.eight li div.copy h4 { font-family: "unilever_illustrative_betaBd"; font-size: 2.375rem; line-height: 1.2; margin: 0 } .overview-2016 section.eight li.eliminating-deforestation div.roundel { background: #54802d; margin: 0 } .overview-2016 section.eight li.eliminating-deforestation div.copy h4 { color: #54802d } .overview-2016 section.eight li.eliminating-deforestation div.copy { top: 0px; left: 200px; width: 55% } .overview-2016 section.eight li.eliminating-deforestation img.icon { position: absolute; top: -110px; left: 110px } .overview-2016 section.eight li.eliminating-deforestation img.illustration { position: absolute; bottom: -243px; max-width: 350px; right: 20px } .overview-2016 section.eight li.sustainable-agriculture div.roundel { background: #d0006f; top: 100px; left: -60px; transition: All 0.6s ease 0.5s } .overview-2016 section.eight li.sustainable-agriculture div.copy { top: 285px; left: 15%; width: 80% } .overview-2016 section.eight li.sustainable-agriculture div.copy h4 { color: #d0006f } .overview-2016 section.eight li.sustainable-agriculture img.icon { position: absolute; top: -30px; left: 16% } .overview-2016 section.eight li.sustainable-agriculture img.illustration { position: absolute; top: -40px; right: 10px } .overview-2016 section.eight li.clean-water { margin-top: 4em } .overview-2016 section.eight li.clean-water div.roundel { background: #007dbb; transition: All 0.6s ease 1s; left: -7%; top: 20px; position: absolute } .overview-2016 section.eight li.clean-water div.copy { top: 226px; left: 27%; width: 80% } .overview-2016 section.eight li.clean-water div.copy h4 { color: #007dbb } .overview-2016 section.eight li.clean-water img.icon { position: absolute; bottom: -120px; left: 9px } .overview-2016 section.eight li.clean-water img.illustration { position: relative; top: -15px; max-width: 350px; right: -20px } .overview-2016 section.eight li.womens-empowerment { clear: both; width: 66%; margin-top: 11em; margin-bottom: 0 } .overview-2016 section.eight li.womens-empowerment div.copy { width: 70%; padding: 100px 0 0 200px; margin: 0 auto; position: static } .overview-2016 section.eight li.womens-empowerment div.copy h2 { color: #d34400; font-family: 'unilever_illustrative_betaBd'; font-size: 1.625rem } .overview-2016 section.eight li.womens-empowerment img.icon { top: 20px; left: 75%; position: absolute } .overview-2016 section.eight li.womens-empowerment img.illustration { left: 13%; position: absolute; top: 12px; max-width: 200px } .overview-2016 section.nine { padding: 8em 4em 4em; overflow: hidden; position: relative } .overview-2016 section.nine .overview-icons .overview-icon { display: inline-block; opacity: 0.5; cursor: pointer; margin-left: 0.2em; margin-right: 0.2em } .overview-2016 section.nine .overview-icons .overview-icon:hover { opacity: 1 } .overview-2016 section.nine .overview-icons .overview-icon, .overview-2016 section.nine .overview-icons .overview-icon .icon, .overview-2016 section.nine .overview-icons .overview-icon span.icon, .overview-2016 section.nine .overview-icons .overview-icon span.icon:before, .overview-2016 section.nine .overview-icons .overview-icon span.icon:after { width: 50px; height: 50px; font-size: 1.953125rem; line-height: 31.25px; color: #fff; transition: opacity ease 0.3s } .overview-2016 section.nine::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: red; background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%); height: 100px; z-index: 4; pointer-events: none } .overview-2016 section.nine::before, .overview-2016 section.one::before, .overview-2016 section.four::before, .overview-2016 section.seven::before { background: url(../media/overview-slp2016/hr_down.png) 50% bottom no-repeat; background-size: 100% 6px; content: ""; bottom: 0; left: 0; width: 100%; height: 6px; z-index: 4; pointer-events: none; position: absolute } .overview-2016 section.nine video { position: absolute; bottom: 0; left: 0; width: 100% } .overview-2016 section.nine .roundel { height: 320px; width: 320px; margin: 0 auto; z-index: 5; position: relative } .overview-2016 section.nine .roundel span { height: 320px } .overview-2016 section.nine .roundel h2 { line-height: 1.2; text-transform: uppercase; font-size: 1.625rem; font-family: "DINWebPro-Light" } .overview-2016 section.nine .roundel h2 b { display: inline-block; line-height: 1; color: white; margin: 10px 0; font-family: "DINWebPro-Black" } .overview-2016 section.nine .roundel img { margin-top: 10px; opacity: 0.6; cursor: pointer; transition: All 0.4s ease } .overview-2016 section.nine .roundel img:hover { opacity: 1 } @media screen and (min-width: 1500px) { .overview-2016 section.one .title h2 { font-size: 3.375rem } } @media screen and (max-width: 1200px) { .overview-2016 section.six div.roundel { margin: 0 auto } .overview-2016 section.six ul { text-align: center } .overview-2016 section.six ul li { position: static; margin: 0 !important; padding: 2em; width: 49% !important; display: inline-block; opacity: 1 !important; vertical-align: top } .overview-2016 section.six ul li img { position: static !important } .overview-2016 section.eight li { width: 100% !important; margin: 0 0 2em !important } .overview-2016 section.eight li div.roundel { float: left; position: static !important; margin-right: -10px !important; transition: All 0.6s ease 0 !important } .overview-2016 section.eight li div.copy, .overview-2016 section.eight li img { position: static !important } .overview-2016 section.eight li div.copy { margin: 20px 0 0 0 } .overview-2016 section.eight ul { margin: 0 0 2em } .overview-2016 section.eight li img.icon { display: none } .overview-2016 section.eight li div.copy { float: left; clear: both; width: 100% !important; padding: 0 !important; float: right } .overview-2016 section.eight li.womens-empowerment div.copy { width: 80% !important; clear: none } .overview-2016 section.eight li img.illustration { float: left; position: static; width: auto; max-height: 170px; margin-left: 0 } .overview-2016 section.eight { padding: 2em 4em } .overview-2016 section.eight > p:last-of-type { margin-top: 2em } } @media screen and (max-width: 1000px) { .overview-2016 section.one .title h2 { font-size: 2.375rem } .overview-2016 section div.left, .overview-2016 section div.right, .overview-2016 section.three div.text { float: none; width: 100%; clear: both; padding: 1em 2em 1em; height: auto !important } .overview-2016 section.two div.right .roundel { margin-top: -140px } .overview-2016 section.two .image { background-size: initial; height: 400px !important } .overview-2016 section.two .roundel, .overview-2016 section.three .left .roundel, .overview-2016 section.three .right .roundel, .overview-2016 section.eight > div.roundel { margin: 0 auto 2em; position: static } .overview-2016 section.three div.right { padding-bottom: 200px; background-position: 50% 90% !important } .overview-2016 section.four { background-position: 70% top; padding: 1em 0 } .overview-2016 section.four div.left, .overview-2016 section.four div.right { padding-left: 50% } .overview-2016 section.four div.right { padding-top: 2em } .overview-2016 section.four blockquote p { font-size: 2.5rem } .overview-2016 section.four blockquote footer { font-size: 1.25rem } .overview-2016 section.four div.roundel { margin: 0 } .overview-2016 section.five ol li { width: 100%; float: none; background-position: 20px 20px; margin: 0 0 2em; opacity: 1 !important; top: 0 !important } .overview-2016 section.five ol li a { height: auto !important } .overview-2016 section.five ol li:nth-child(2) h4, .overview-2016 section.five ol li:nth-child(3) h4 { padding-left: 55px } .overview-2016 section.five > p { padding: 0 } .overview-2016 section.five > h3 { text-align: left } .overview-2016 section.eight > p { max-width: inherit } .overview-2016 section.eight > p:last-of-type { max-width: inherit; text-align: left } .overview-2016 section.nine { padding: 2em } } @media screen and (max-width: 768px) { .overview-2016 section.one .title h2 { font-size: 2.375rem } .overview-2016 section.one .title { position: static; background: #004976; padding: 10px 0 0 } .overview-2016 section.one ul.rslides li { background-position: 30% 60% } .overview-2016 section.one .title h2 span { display: block } .overview-2016 section.six ul li { width: 100% !important } .overview-2016 section.six ul li div.silouhette { width: auto; float: left } .overview-2016 section.six ul li div.copy { width: 75% } .overview-2016 section.four { background-size: contain; background-attachment: scroll; padding: 55% 2em 2em } .overview-2016 section.four::before, .overview-2016 section.four::after { display: none } .overview-2016 section.four div.left, .overview-2016 section.four div.right { padding: 0 0 } .overview-2016 section.two div.left { display: none } .overview-2016 section.two div.right .roundel { margin-top: 0 } .overview-2016 section.four div.left { padding: 0 } .overview-2016 section.seven { background-attachment: scroll } .overview-2016 section.eight li div.copy { margin-top: 20px } .overview-2016 section.four div.roundel div.content h2 b { padding-top: 0; border: none } .overview-2016 section.four div.roundel { width: auto; height: auto; background: none; margin: 2em 0 0; text-align: left } .overview-2016 section.four div.roundel span { display: none } .overview-2016 section.four div.roundel .content { color: #666; text-align: left; padding: 0 } .overview-2016 section.four div.roundel div.content h2 { color: #007dbb } .overview-2016 section.four div.roundel div.content p { padding-left: 0; padding-right: 0 } .overview-2016 section.four { padding-bottom: 0 } .overview-2016 section.five { padding: 0 2em 2em } .overview-2016 section.five h3 { font-size: 1.25rem; text-align: left } .overview-2016 section.eight > p:last-of-type { font-size: 1rem !important; font-family: "Arial", "Helvetica", sans-serif; position: relative; padding-top: 40px; margin-top: 0 } .overview-2016 section.eight > p:last-of-type::before { width: 100px; height: 1px; background: #ccc; content: ""; display: inline-block; position: absolute; top: 0; left: 50%; margin-left: -50px; z-index: 4 } .overview-2016 section.eight > p:last-of-type b { font-size: 1rem; font-weight: bold } .overview-2016 section.eight li.womens-empowerment div.copy { width: 70% !important } .overview-2016 section.eight ul { margin-bottom: 0 } .overview-2016 section.nine { background: url(../media/overview-slp2016/outro-bg-mobile.jpg) 50% top no-repeat } .overview-2016 section.nine .outro-video { display: none } } @media screen and (max-width: 550px) { .overview-2016 section.one .title h2 { font-size: 1.75rem } .overview-2016 section.eight { padding: 2em } .overview-2016 section div.left, .overview-2016 section div.right, .overview-2016 section.three div.text { padding: 2em 2em 0 } .overview-2016 section.three div.right { padding-bottom: 40% !important } .overview-2016 section.three div.image.visible { background: url(../media/overview-slp2016/collective.gif) 50% 100% no-repeat #fff; background-size: contain } .overview-2016 section.four blockquote p { font-size: 1.75rem } .overview-2016 section.four blockquote footer { font-size: 1.125rem } .overview-2016 section.five { padding-bottom: 0 } .overview-2016 section.five ol li h4 b { font-size: 2.25rem } .overview-2016 section.six ul li div.copy { width: 70% } .overview-2016 section.six div.roundel { width: 280px; height: 280px } .overview-2016 section.six div.roundel span { height: 280px } .overview-2016 section.six div.roundel p { font-size: 1.5rem } .overview-2016 section.six ul li div.silouhette { width: 20% } .overview-2016 section.eight li.womens-empowerment img.illustration { width: 20% } .overview-2016 section.eight li.womens-empowerment div.copy { width: 75% !important } .overview-2016 section.seven { padding: 2em } .overview-2016 section.seven .roundel { width: 260px; height: 260px } .overview-2016 section.seven .roundel span { height: 260px } .overview-2016 section.seven .roundel h2 { font-size: 1.5rem } .overview-2016 section.seven .roundel h2 b { font-size: 2.25rem } .overview-2016 section.eight li div.roundel { opacity: 1 !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; float: left; margin-bottom: 20px } .overview-2016 section.eight li div.copy { clear: both } .overview-2016 section.nine .roundel { width: 280px; height: 280px } .overview-2016 section.nine .roundel span { height: 280px } .overview-2016 section.nine .roundel h2, .overview-2016 section.nine .roundel h2 a { font-size: 1.375rem } .overview-2016 section.nine .roundel h2 a { font-size: 1.375rem } .overview-2016 section.nine video { bottom: auto; top: 0 } .overview-2016 section.nine { padding: 2em 0 } } .line { position: absolute; height: 2px; width: 50px; background: linear-gradient(to right, transparent, transparent 110px, #007dbb 110px, #007dbb calc(100% - 110px), transparent calc(100% - 110px), transparent 100%); z-index: 1; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent } .line--large-to-large { background: linear-gradient(to right, transparent, transparent 150px, #007dbb 150px, #007dbb calc(100% - 150px), transparent calc(100% - 150px), transparent 100%) } .line--small-to-large { background: linear-gradient(to right, transparent, transparent 110px, #007dbb 110px, #007dbb calc(100% - 150px), transparent calc(100% - 150px), transparent 100%) } .line--large-to-small { background: linear-gradient(to right, transparent, transparent 150px, #007dbb 150px, #007dbb calc(100% - 110px), transparent calc(100% - 110px), transparent 100%) } .line--radiator { position: absolute; left: 50%; top: calc(5em + 10.3125em); width: calc(300px + 5%); z-index: initial; background: linear-gradient(to right, transparent, transparent 150px, #007dbb 150px, #007dbb 100%) } .line--radiator--0 { -webkit-transform: rotate(-19deg); transform: rotate(-19deg) } .line--radiator--1 { -webkit-transform: rotate(31deg); transform: rotate(31deg) } .line--radiator--2 { -webkit-transform: rotate(147deg); transform: rotate(147deg) } .line--radiator--3 { -webkit-transform: rotate(195deg); transform: rotate(195deg) } .line--orthogonal { position: relative; top: 125px; z-index: initial; background-image: none; background-color: #007dbb; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .line--orthogonal--0 { left: 18%; width: calc(100% - 18% * 2); -webkit-transform: rotate(0); transform: rotate(0) } .line--orthogonal--1 { left: 18%; width: 75px } .line--orthogonal--2 { left: calc(18% + (100% - 18% * 2 - 2px)); width: 150px; -webkit-transform-origin: 0% -2px; transform-origin: 0% -2px } .line--orthogonal--3 { left: calc(32% * 1.5 + 2% + 75px); width: 150px; -webkit-transform-origin: 0px 75px; transform-origin: 0px 75px } @media (max-width: 1300px) { .line--radiator { display: none } } @media (max-width: 1200px) { .line--orthogonal { display: none } } @media (max-width: 1000px) { .line { display: none } } .overview-cta { background-image: url(../media/overview-cta-bg.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; display: block; position: relative; padding-top: 25%; max-height: 380px; min-height: 190px } .overview-cta__mobile-banner { display: none } .overview-cta__link { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; transition: background-color 0.6s ease; height: 100% } .overview-cta__link:hover { background-color: rgba(0, 0, 0, 0.25) } .overview-cta__text { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .overview-cta__text:after { content: ""; display: block; z-index: -1; background: rgba(0, 0, 0, 0.4); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 62%); height: 140%; width: auto; position: absolute; top: -10%; left: 10%; right: 10% } .overview-cta__title, .overview-cta__subtitle { text-align: center; color: white; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4) } .overview-cta__title strong, .overview-cta__subtitle strong { font-family: "DINWebPro-Black"; font-weight: normal } .overview-cta__title { font-size: 2.625rem; text-transform: uppercase; font-family: "DINWebPro-Light"; margin-top: 20px } .overview-cta__subtitle { font-size: 1.5rem; text-transform: uppercase; font-family: "DINWebPro-Medium"; margin-bottom: 0 } .overview-cta__subtitle:after { font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; font-size: 0.7em; margin-left: 14px } .overview-cta:after, .overview-cta:before { content: ""; height: 6px; width: 100%; position: absolute; left: 0; z-index: 2; background-position: 50% 0; background-repeat: no-repeat; background-size: 100% 6px } .overview-cta:before { background-image: url(../images/hr.png); top: 0 } .overview-cta:after { background-image: url(../images/hr_down.png); bottom: 0 } @media (max-width: 62.4375em) { .overview-cta { padding-top: 50%; background-position: 40% 50% } } @media (max-width: 48em) { .overview-cta { padding-top: 0; position: initial; background: none; max-height: none; min-height: none } .overview-cta__mobile-banner { display: initial; background-image: url(../media/overview-cta-bg.jpg); background-position: 30% 50%; background-repeat: no-repeat; background-size: cover; display: block; padding-top: 35%; max-height: 380px; min-height: 200px } .overview-cta__link { position: static; display: block; background: #004976 } .overview-cta__link:hover { background: #004976 } .overview-cta__text { position: static; -webkit-transform: translateY(0); transform: translateY(0); padding: 35px 10px } .overview-cta__text:after { display: none } .overview-cta__title { font-size: 2.25rem; margin-top: 0 } .overview-cta__subtitle { font-size: 1.125rem } } .overview-cta--vertical-spacing { margin: 3em 0 0 } .arrow-right { font-family: 'unilever-iconfont' } .overview-parallax { background-color: #000; color: #FFF; margin-bottom: 2em; position: relative; width: 100%; z-index: 1 } .overview-parallax.active { height: 100%; position: fixed; top: 0; z-index: 202 } .overview-parallax .slide { background: #FFF; display: none; position: relative; visibility: hidden } .overview-parallax.active .slide { display: block; height: 100%; visibility: visible; width: 100% } @media screen and (min-width: 48em) { .overview-parallax.active .slide { min-height: 500px } } .overview-parallax .skrollable { position: fixed; z-index: 202 } .overview-parallax .skrollr-mobile .skrollable { position: absolute } .overview-parallax .skrollable .skrollable { position: absolute } .overview-parallax .skrollable .skrollable .skrollable { position: static } .overview-parallax .background { background-position: center center; background-size: cover; height: 100%; left: 0; top: 0; width: 100%; z-index: 150 } .overview-parallax .circle { background-color: #000; background-size: cover; border-radius: 50%; display: block; height: 25em; left: 50%; margin: -12.5em 0 0 -12.5em; position: absolute; top: 50%; width: 25em } .overview-parallax .circle.circle-1 { background-color: #004976; background-image: url("../images/overview/mobile/world-map.png"); background-position: 0em 0em; box-shadow: inset 1em 0 2.5em 0.375em #000, inset -0.188em 0 0.375em 0.125em rgba(255, 255, 255, 0.2); font-size: 0.375em; height: 27.5em; left: 30%; margin: -13.75em 0 0 -13.75em; opacity: 1; top: 50%; -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 27.5em } @media screen and (min-width: 48em) { .overview-parallax .circle.circle-1 { background-image: url("../images/overview/world-map.png"); font-size: 0.750em } } @media screen and (min-width: 57.5em) { .overview-parallax .circle.circle-1 { font-size: 1em } } .overview-parallax .circle.circle-2 { box-shadow: 0em 0 5.625em -0.625em #fff; border-color: #01253b; border-style: solid; border-width: 0px; font-size: 0.375em; overflow: hidden; z-index: 201 } @media screen and (min-width: 48em) { .overview-parallax .circle.circle-2 { font-size: 0.750em } } @media screen and (min-width: 57.5em) { .overview-parallax .circle.circle-2 { font-size: 1em } } .overview-parallax .circle.circle-3 { background-color: #fff; font-size: 0.5em; height: 11.500em; left: 20%; margin: 0; overflow: hidden; top: 87%; width: 11.500em } @media screen and (min-width: 48em) { .overview-parallax .circle.circle-3 { font-size: 0.750em } } @media screen and (min-width: 57.5em) { .overview-parallax .circle.circle-3 { font-size: 1em } } .overview-parallax .circle.circle-4 { font-size: 0.4375em; overflow: hidden } @media screen and (min-width: 48em) { .overview-parallax .circle.circle-4 { font-size: 0.750em } } @media screen and (min-width: 57.5em) { .overview-parallax .circle.circle-4 { font-size: 1em } } .overview-parallax .circle.circle-5 { background-color: #ed8c01; font-size: 0.625em; height: 18.5em; left: auto; right: 55%; margin: -9.25em 0 0 -9.25em; top: 49%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; width: 18.5em } @media screen and (max-width: 29.9375em) { .overview-parallax .circle.circle-5 { left: 50%; right: auto; top: 35%; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0% } } @media screen and (min-width: 30em) and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .circle.circle-5 { right: 60% } } @media screen and (min-width: 48em) { .overview-parallax .circle.circle-5 { font-size: 0.750em } } @media screen and (min-width: 57.5em) { .overview-parallax .circle.circle-5 { font-size: 1em } } .overview-parallax .circle-3-container { display: block; height: 100%; margin: 0 1em; max-width: 58.75em; position: relative; width: calc(100% - 2em) } @media screen and (min-width: 48em) { .overview-parallax .circle-3-container { margin: 0 auto; width: 100% } } .overview-parallax .overview-cpanel { box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); display: none; position: fixed; top: 0; right: 0; z-index: 204 } .overview-parallax.active .overview-cpanel { display: block } .overview-parallax .overview-cpanel .share-toolbar { transition: 0.5s ease; border-radius: 0; box-shadow: none; float: left; height: 44px; margin: 0; padding: 0; position: relative; width: 44px; z-index: 204 } .overview-parallax .overview-cpanel .share-toolbar h3 { background: #007dbb; cursor: pointer; height: 44px; margin: 0; padding: 0.3125em; width: 44px; text-align: center } .overview-parallax .overview-cpanel .share-toolbar h3 span { display: none } .overview-parallax .overview-cpanel .share-toolbar h3:before { color: #FFF; font-size: 1.3125rem; padding: 0; position: relative; top: 4px } .overview-parallax .overview-cpanel .share-toolbar h3:after { content: ""; display: none; visibility: hidden } .overview-parallax .overview-cpanel .share-toolbar h3:hover { background-color: #004976 } .overview-parallax .overview-cpanel .share-toolbar h3.open { background: #004976 } .overview-parallax .overview-cpanel .share-toolbar h3.open:before { color: white } .overview-parallax .overview-cpanel .share-toolbar ul { transition: 0.5s ease; background: whitesmoke; border-radius: 0; display: none !important; float: left; margin: 0; padding: 0 0.375em; position: absolute; right: 100%; top: 0; width: 200px } .overview-parallax .overview-cpanel .share-toolbar ul li { display: table; float: left; margin: 6px 6px 7px } .overview-parallax .overview-cpanel .share-toolbar ul li span::before { background: #fff } .overview-parallax .overview-cpanel .share-toolbar.open { background: #007dbb } .overview-parallax .overview-cpanel .share-toolbar.open ul { display: block !important } .overview-parallax .overview-cpanel button { background: #FFF; border: 0; color: #666; cursor: pointer; float: left; font-size: 0.75em; font-weight: normal; height: 44px; line-height: 44px; margin: 0; padding: 0 1em; text-align: center; text-transform: uppercase; width: 44px } .overview-parallax .overview-cpanel button:focus { outline: 0 } .overview-parallax .overview-cpanel button:before { color: #007dbb; content: "\00d7"; font-size: 2em; font-weight: bold; line-height: 1; margin-right: 0; position: relative; top: 0.167em } .overview-parallax .overview-cpanel button span { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px } .overview-parallax .arrows-cpanel { display: none; position: fixed; right: 0.25em; top: 60px; width: 44px; border-top-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); z-index: 203 } @media screen and (min-width: 48em) { .overview-parallax .arrows-cpanel { right: 0 } } .overview-parallax.active .arrows-cpanel { display: block } .overview-parallax .arrows-cpanel button { background: #007dbb; border: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 5px; display: block; height: 47px; margin: 0; padding: 1em; width: 47px; outline: 0; box-shadow: none } .overview-parallax .arrows-cpanel button:hover { background: #004976 } .overview-parallax .arrows-cpanel button:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 0.85em } .overview-parallax .arrows-cpanel button:active { box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1); top: 1px } .overview-parallax .arrows-cpanel button.prev { border-top-left-radius: 5px; border-bottom-left-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5) } .overview-parallax .arrows-cpanel button.prev:before { content: "\e01f" } .overview-parallax .arrows-cpanel button.next:before { content: "\e025" } .overview-parallax .arrows-cpanel button span { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px } .overview-parallax .scroll-cta { bottom: 0; display: none; left: 0; position: fixed; text-align: center; width: 100%; z-index: 203 } .overview-parallax.active .scroll-cta { display: block } .overview-parallax .scroll-cta p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; background: rgba(0, 125, 187, 0.75); border-radius: 5px 5px 0 0; color: #FFF; display: none; font-size: 1em; cursor: pointer; text-transform: uppercase; margin: 0; padding: 0.25em 0.5em 0.2em } .font--arial .overview-parallax .scroll-cta p { font-family: Arial, Helvetica, sans-serif } .overview-parallax .scroll-cta p:after { content: url("../images/overview/scroll-prompt-arrows-animate.gif"); display: inline-block; height: 25px; margin-left: 0.5em; position: relative; top: 0.25em } .overview-parallax .overview-intro { background-color: #000; background-position: center top; background-size: cover; color: #FFF; display: block; overflow: hidden; text-align: center; visibility: visible; z-index: 203 } .overview-parallax .overview-intro p a { color: #fff; text-decoration: underline } .overview-parallax .overview-intro p a:hover { text-decoration: none } .overview-parallax .overview-intro p a.plain-text { text-decoration: none; margin-top: 1em } .overview-parallax .overview-intro .lens-flare { background-image: url("../images/overview/mobile/flare.png"); transition: all ease 2.55s; position: absolute; top: 0; z-index: 1; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: 50% top; transform-origin: 50% top; opacity: 0 } @media screen and (min-width: 48em) { .overview-parallax .overview-intro .lens-flare { background-image: url("../images/overview/flare.png") } } .overview-parallax .overview-intro:hover .lens-flare { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1 } .overview-parallax.active .overview-intro .lens-flare { display: none } .overview-parallax .overview-intro .container { background-image: url("../images/overview/mobile/crowd-layer.jpg"); margin: 0; padding: 2.5em 0; position: relative; width: 100%; z-index: 2 } .overview-parallax .overview-intro .container:after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.65) 65%, #000 100%); content: ""; display: block; filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000', GradientType=0); height: 101%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } @media screen and (max-height: 29.9375em) and (max-width: 47.9375em) { .overview-parallax .overview-intro .container { padding: 0.5em 0 } } @media screen and (min-width: 48em) { .overview-parallax .overview-intro .container { background-image: url("../images/overview/crowd-layer.jpg") } } .overview-parallax .overview-intro h3 { color: #FFF; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.6875em; position: relative; text-shadow: 1px 1px 2px #000; z-index: 2 } .font--din .overview-parallax .overview-intro h3 { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .overview-intro h3 { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .overview-intro h3 { font-size: 1.222em } } @media screen and (min-width: 67.5em) { .overview-parallax .overview-intro h3 { font-size: 1.625em } } .overview-parallax .overview-intro h3 span { display: block; line-height: 1.25 } .overview-parallax .overview-intro h3 span:nth-child(1) { font-size: 1.231em; line-height: 1.75 } .overview-parallax .overview-intro h3 span:nth-child(2) { font-size: 2.883em; position: relative } .overview-parallax .overview-intro h3 span:nth-child(2):before, .overview-parallax .overview-intro h3 span:nth-child(2):after { background: #FFF; content: ""; display: block; height: 2px; left: 50%; margin-left: -3.390em; position: absolute; top: -4%; width: 6.780em } .overview-parallax .overview-intro h3 span:nth-child(2):after { top: 90% } .overview-parallax .overview-intro h3 span:nth-child(3) { font-size: 1.85em } .overview-parallax .overview-intro p { font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; display: block; line-height: 1.4; margin: 0 auto; max-width: 59em; padding: 0 0.5em; position: relative; text-shadow: 1px 1px 2px #000; z-index: 2 } @media screen and (min-width: 48em) { .overview-parallax .overview-intro p { font-size: 1em; line-height: 1.6 } } @media screen and (min-width: 67.5em) { .overview-parallax .overview-intro p { font-size: 0.9em } } .overview-parallax .overview-intro button { background: none; border: 0; box-shadow: none; color: #70b1e0; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; margin: 0; top: 0; position: relative; margin-top: 20px; padding: 10px 10px 20px; text-shadow: 1px 1px 2px #000; transition: all ease 0.45s; z-index: 2 } .font--din .overview-parallax .overview-intro button { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .overview-intro button { font-family: Arial, Helvetica, sans-serif } .overview-parallax .overview-intro button:hover { color: #fff; top: 10px } @media screen and (min-width: 57.5em) { .overview-parallax .overview-intro button { font-size: 1.25em } } @media screen and (min-width: 67.5em) { .overview-parallax .overview-intro button { font-size: 1.5em } } @media print { .overview-parallax .overview-intro button { display: none } } .no-js .overview-parallax .overview-intro button { display: none; visibility: hidden } .overview-parallax .overview-intro button:focus { outline: 0 } .overview-parallax .overview-intro button:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; background: #007dbb; border: 2px solid #FFF; border-radius: 50%; clear: both; color: #FFF; display: block; content: "\e025"; font-size: 0.75em; height: 1.750em; margin: 0.75em auto 0; padding: 0.25em; text-shadow: none; width: 1.750em } .overview-parallax .overview-intro .spinner { background: url("../images/overview/loader.gif") scroll no-repeat center center transparent; display: none; height: 88px; margin-top: 30px; position: relative; z-index: 3 } .overview-parallax .box-1 { background: #000; z-index: 203 } .overview-parallax .box-1 .stars-static-bg { background-image: url("../images/overview/mobile/star-bg.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .stars-static-bg { background-image: url("../images/overview/star-bg.jpg") } } .overview-parallax .box-1 .stars-bg { background-image: url("../images/overview/mobile/star-layer.png") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .stars-bg { background-image: url("../images/overview/star-layer.png") } } .overview-parallax .box-1 .world-changing { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.4722222222222222em; left: 58%; line-height: 1.1; margin: 0; position: absolute; text-align: center } .font--din .overview-parallax .box-1 .world-changing { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .world-changing { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-1 .world-changing { font-size: 1.200em; left: 60% } } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .world-changing { font-size: 1.733em; left: 55% } } .overview-parallax .box-1 .world-changing span { display: block; position: relative } .overview-parallax .box-1 .world-changing span:nth-child(1) { color: #78C5E3; font-family: 'unilever_illustrative_betaBd', Arial, sans-serif; font-size: 2.692em } .overview-parallax .box-1 .world-changing span:nth-child(2) { color: #1D7ABF; font-family: 'unilever_illustrative_betaBd', Arial, sans-serif; font-size: 2.462em } .overview-parallax .box-1 .world-changing span:nth-child(3) { font-size: 1.808em } .overview-parallax .box-1 .world-changing span:nth-child(4) { font-size: 2.154em } .overview-parallax .box-1 .freezing-bg { background-image: url("../images/overview/mobile/bg-ice.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .freezing-bg { background-image: url("../images/overview/bg-ice.jpg") } } .overview-parallax .box-1 .sun-bg { background-image: url("../images/overview/mobile/bg-desert.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .sun-bg { background-image: url("../images/overview/bg-desert.jpg") } } .overview-parallax .box-1 .temp-rising { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1; padding-top: 36%; text-align: center; text-transform: uppercase } .font--din .overview-parallax .box-1 .temp-rising { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .temp-rising { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .temp-rising { font-size: 1em } } .overview-parallax .box-1 .temp-rising span:nth-child(1) { font-size: 3.733em } .overview-parallax .box-1 .temp-rising span:nth-child(2) { font-size: 5.333em } .overview-parallax .box-1 .water-bg { background-image: url("../images/overview/mobile/bg-water.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .water-bg { background-image: url("../images/overview/bg-water.jpg") } } .overview-parallax .box-1 .water-overlay-bg { background-color: rgba(0, 73, 118, 0) } .overview-parallax .box-1 .water-circle-bg { background-image: url("../images/overview/water-level.png"); background-position: center bottom; height: 120%; left: 0; position: absolute !important; top: 12%; width: 120%; z-index: 1 } .overview-parallax .box-1 .water-shortages { font-family: 'unilever_illustrative_betaBd', Arial, sans-serif; font-size: 1em; line-height: 1; padding-top: 16%; position: relative !important; text-align: center; text-transform: uppercase; z-index: 2 } .overview-parallax .box-1 .water-shortages span { display: block; font-size: 3.733em } .overview-parallax .box-1 .water-shortages span:nth-child(3) { color: #0085ca; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 2.533em; margin-top: 0.5em } .font--din .overview-parallax .box-1 .water-shortages span:nth-child(3) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .water-shortages span:nth-child(3) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .water-shortages span:nth-child(4) { color: #0085ca; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif } .font--din .overview-parallax .box-1 .water-shortages span:nth-child(4) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .water-shortages span:nth-child(4) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .segments-bg { background-image: url("../images/overview/segments.png"); background-size: cover; height: 100%; left: 0; position: absolute !important; top: 0%; width: 100%; z-index: 1 } .overview-parallax .box-1 .segments-bg:nth-of-type(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(4) { -webkit-transform: rotate(135deg); transform: rotate(135deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(5) { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(6) { -webkit-transform: rotate(225deg); transform: rotate(225deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(7) { -webkit-transform: rotate(270deg); transform: rotate(270deg) } .overview-parallax .box-1 .segments-bg:nth-of-type(8) { -webkit-transform: rotate(315deg); transform: rotate(315deg) } .overview-parallax .box-1 .orange-bg { background-image: url("../images/overview/mobile/crop-farmer.jpg"); background-position: left center } @media screen and (min-width: 48em) { .overview-parallax .box-1 .orange-bg { background-image: url("../images/overview/crop-farmer.jpg"); background-position: center center } } .overview-parallax .box-1 .orange-overlay-bg { background-color: rgba(230, 112, 2, 0) } .overview-parallax .box-1 .food-supplies { font-family: 'unilever_illustrative_betaBd', Arial, sans-serif; font-size: 1em; line-height: 1; padding-top: 21%; position: relative !important; text-align: center; text-transform: uppercase; z-index: 2 } .overview-parallax .box-1 .food-supplies span { display: block; font-size: 3.733em } .overview-parallax .box-1 .food-supplies span:nth-child(1) { font-size: 6.55em; line-height: 0.8 } .overview-parallax .box-1 .food-supplies span:nth-child(2) { margin-top: -0.04em } .overview-parallax .box-1 .food-supplies span:nth-child(1), .overview-parallax .box-1 .food-supplies span:nth-child(2) { text-shadow: 0.018em 0.018em 0.036em rgba(0, 0, 0, 0.2) } .overview-parallax .box-1 .food-supplies span:nth-child(3) { color: #e67002; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1.9em } .font--din .overview-parallax .box-1 .food-supplies span:nth-child(3) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .food-supplies span:nth-child(3) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .food-supplies span:nth-child(4) { color: #e67002; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 4.767em; margin-top: .05em } .font--din .overview-parallax .box-1 .food-supplies span:nth-child(4) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .food-supplies span:nth-child(4) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .population-bg { background-image: url("../images/overview/mobile/bg-city.jpg"); background-position: center 0% } @media screen and (max-width: 57.5em) and (orientation: portrait) { .overview-parallax .box-1 .population-bg { background-size: auto } } @media screen and (min-width: 48em) { .overview-parallax .box-1 .population-bg { background-image: url("../images/overview/bg-city.jpg") } } .overview-parallax .box-1 .populations-growing { font-family: 'unilever_illustrative_betaBd', Arial, sans-serif; font-size: 1em; line-height: 1; padding-right: 14.5em; padding-top: 15%; position: relative !important; text-align: right; text-transform: uppercase; z-index: 2 } .overview-parallax .box-1 .populations-growing span { display: block } .overview-parallax .box-1 .populations-growing span:nth-child(1) { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 4.800em } .font--din .overview-parallax .box-1 .populations-growing span:nth-child(1) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .populations-growing span:nth-child(1) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .populations-growing span:nth-child(2) { color: #78be20; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 3.400em } .font--din .overview-parallax .box-1 .populations-growing span:nth-child(2) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .populations-growing span:nth-child(2) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .hygiene-bg { background-image: url("../images/overview/mobile/bg-toliet-builder.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-1 .hygiene-bg { background-image: url("../images/overview/bg-toliet-builder.jpg") } } .overview-parallax .box-1 .hygiene-sanitation { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1; padding-left: 40%; padding-top: 57%; position: relative !important; text-align: left; text-transform: uppercase; z-index: 2 } .font--din .overview-parallax .box-1 .hygiene-sanitation { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .hygiene-sanitation { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .hygiene-sanitation span { display: block; font-size: 2.933em } .overview-parallax .box-1 .hygiene-sanitation span:nth-child(1) { color: #76cbf0 } .overview-parallax .box-1 .hygiene-sanitation span:nth-child(2) { font-size: 4.533em } .overview-parallax .box-1 .hygiene-sanitation span:nth-child(3) { font-size: 4.600em } .overview-parallax .box-1 .hygiene-sanitation span:nth-child(4) { color: #76cbf0 } .overview-parallax .box-1 .hygiene-sanitation span:nth-child(5) { color: #76cbf0 } .overview-parallax .box-1 .stretch-bg { background-color: #fff } .overview-parallax .box-1 .stretching { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.938em; line-height: 1; margin-top: 30%; position: relative !important; text-align: center; text-transform: uppercase; width: 306px; z-index: 2 } .font--din .overview-parallax .box-1 .stretching { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-1 .stretching { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-1 .stretching { width: 612px } } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .stretching { font-size: 1em; width: 816px } } .overview-parallax .box-1 .stretching span { display: block; line-height: 1; text-align: center } .overview-parallax .box-1 .stretching span:nth-child(1) { color: #6fc3e8; font-size: 4.267em; margin: 0.5em 0 0.2em } .overview-parallax .box-1 .stretching span:nth-child(2) { font-size: 8.533em; line-height: 0.8 } .overview-parallax .box-1 .stretching span:nth-child(3) { color: #6fc3e8; font-size: 4em } .overview-parallax .box-1 .stretching span:nth-child(4) { font-size: 3.333em } .overview-parallax .box-1 .video-bg { width: 100% } .overview-parallax .box-1 .video-bg .additional-circle { border-radius: 50%; display: none; font-size: 0.75em; position: absolute; z-index: 1 } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg .additional-circle { display: block } } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .video-bg .additional-circle { font-size: 1em } } .overview-parallax .box-1 .video-bg .additional-circle.ad-circle-1 { background-color: #6ba439; height: 11.250em; left: -5.625em; top: 5%; width: 11.250em } .overview-parallax .box-1 .video-bg .additional-circle.ad-circle-2 { background-color: #71c5e9; height: 21.000em; left: -10.500em; top: 40%; width: 21.000em } .overview-parallax .box-1 .video-bg .additional-circle.ad-circle-3 { background-color: #84bd00; height: 9.625em; right: -4.813em; top: 70%; width: 9.625em } .overview-parallax .box-1 .video-bg .video-wrapper { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; height: 13.6875em; margin: 0 auto; width: 15.8125em; z-index: 0 } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg .video-wrapper { height: 16.0625em; width: 28.75em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .video-bg .video-wrapper { height: 21.5em; width: 38.375em } } @media screen and (min-width: 93.75em) { .overview-parallax .box-1 .video-bg .video-wrapper { height: 29.4375em; width: 52.125em } } .overview-parallax .box-1 .video-bg .video-wrapper:after { background: url(../images/hr_down.png) center bottom no-repeat; background-size: 95% 6px; bottom: -2px; content: ""; display: block; height: 6px; left: -10%; pointer-events: none; position: absolute; width: 120%; z-index: 5 } .overview-parallax .box-1 .video-bg .video-wrapper p { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; color: #666; font-size: 0.75em; text-transform: uppercase } .font--arial .overview-parallax .box-1 .video-bg .video-wrapper p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg .video-wrapper p { left: 0; position: absolute; top: 60%; z-index: 1 } } @media screen and (min-width: 57.5em) { .overview-parallax .box-1 .video-bg .video-wrapper p { font-size: 1em } } @media screen and (min-width: 93.75em) { .overview-parallax .box-1 .video-bg .video-wrapper p { top: 75% } } .overview-parallax .box-1 .video-bg .video-wrapper p strong { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #007dbb; display: block; font-size: 1.6em; margin-bottom: 0.2em; text-transform: none; line-height: 1 } .font--arial .overview-parallax .box-1 .video-bg .video-wrapper p strong { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-1 .video-bg .video-wrapper p span { display: block } .overview-parallax .box-1 .video-bg .video-wrapper p span abbr { border-bottom: 0; font-size: 100% } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg .video-wrapper p span abbr { border-bottom: 1px dotted } } .overview-parallax .box-1 .video-bg .video-wrapper video { background: transparent; width: 100% } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg .video-wrapper video { height: auto; min-height: 100% } } .overview-parallax .box-1 .video-bg button { background: rgba(0, 0, 0, 0.5); background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 70%); border: 2px solid #FFF; border-radius: 50%; color: #FFF; height: 3.5em; margin-left: -1.75em; left: 50%; outline: 0; padding: 0; position: absolute; top: 110%; width: 3.5em; z-index: 1 } .overview-parallax .box-1 .video-bg button:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e011"; font-size: 1.25em } .overview-parallax .box-1 .video-bg button.pause:before { content: "\e012" } .overview-parallax .box-1 .video-bg button.play:before { content: "\e011" } @media screen and (min-width: 30em) and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-1 .video-bg button { left: 112%; top: 70% } } @media screen and (min-width: 48em) { .overview-parallax .box-1 .video-bg button { bottom: 1em; left: 70%; margin-left: 0; top: auto } } .overview-parallax .box-1 .video-bg button span { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px } .overview-parallax .box-2:before { background: #FFF; content: ""; display: block; height: 4px; left: 0; position: absolute; top: -2px; width: 100%; z-index: 999 } .overview-parallax .box-2 div { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0 3em 0 1em; width: 100% } @media screen and (min-width: 48em) { .overview-parallax .box-2 div { padding: 0 1em } } .overview-parallax .box-2 p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #666; font-size: 0.8666666666666667em; line-height: 1.5; margin: 0 auto 0.75em; max-width: 23.076923076923077em } .font--arial .overview-parallax .box-2 p { font-family: Arial, Helvetica, sans-serif } @media screen and (max-height: 29.9375em) and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-2 p { line-height: 1.1 } } @media screen and (min-width: 48em) { .overview-parallax .box-2 p { font-size: 1.467em; max-width: 27.273em } } .overview-parallax .box-2 p:first-child { color: #1876be; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1.0666666666666667em; max-width: 18.75em; line-height: 1.2 } .font--din .overview-parallax .box-2 p:first-child { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-2 p:first-child { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-2 p:first-child { font-size: 2.133em; max-width: 18.750em } } .overview-parallax .box-3 { z-index: 203 } .overview-parallax .box-3 .working-rights { background-image: url("../images/overview/mobile/bg-shakti.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-3 .working-rights { background-image: url("../images/overview/bg-shakti.jpg") } } .overview-parallax .box-3 .working-rights p { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.375em; padding: 0 2em; text-align: center; text-shadow: 0.067em 0.067em 0.2em rgba(0, 0, 0, 0.5) } .font--din .overview-parallax .box-3 .working-rights p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-3 .working-rights p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-3 .working-rights p { font-size: 0.8em; padding: 0 } } @media screen and (min-width: 57.5em) { .overview-parallax .box-3 .working-rights p { font-size: 1em } } .overview-parallax .box-3 .working-rights p span { display: block; line-height: 1 } .overview-parallax .box-3 .working-rights p span:nth-child(1), .overview-parallax .box-3 .working-rights p span:nth-child(2), .overview-parallax .box-3 .working-rights p span:nth-child(4) { font-size: 5.067em } .overview-parallax .box-3 .working-rights p span:nth-child(3) { font-size: 2.133em; line-height: 1.25; margin-bottom: 0.5em } .overview-parallax .box-3 .working-rights p span:nth-child(3):before, .overview-parallax .box-3 .working-rights p span:nth-child(3):after { background: #FFF; content: ""; display: block; height: 2px; margin: 0.25em auto; width: 9.250em } .overview-parallax .box-3 .working-rights p span:nth-child(3):before { margin-bottom: 0.4em } .overview-parallax .box-3 .health-wellbeing { background-image: url("../images/overview/mobile/bg-flora.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-3 .health-wellbeing { background-image: url("../images/overview/bg-flora.jpg") } } .overview-parallax .box-3 .health-wellbeing p { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.375em; padding: 0 2.5em; text-align: center; text-shadow: 0.067em 0.067em 0.2em rgba(0, 0, 0, 0.5) } .font--din .overview-parallax .box-3 .health-wellbeing p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-3 .health-wellbeing p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-3 .health-wellbeing p { font-size: 0.8em; padding: 0 } } @media screen and (min-width: 57.5em) { .overview-parallax .box-3 .health-wellbeing p { font-size: 1em } } .overview-parallax .box-3 .health-wellbeing p span { display: block; line-height: 1.1 } .overview-parallax .box-3 .health-wellbeing p span:nth-child(1) { font-size: 3.800em } .overview-parallax .box-3 .health-wellbeing p span:nth-child(2) { font-size: 5.067em; line-height: 1 } .overview-parallax .box-3 .health-wellbeing p span:nth-child(2):before, .overview-parallax .box-3 .health-wellbeing p span:nth-child(2):after { background: #FFF; content: ""; display: block; height: 2px; margin: 0em auto; width: 3.895em } .overview-parallax .box-3 .health-wellbeing p span:nth-child(2):before { margin-bottom: 0.2em } @media screen and (min-width: 48em) { .overview-parallax .box-3 .health-wellbeing p span:nth-child(2) { line-height: 1.25 } .overview-parallax .box-3 .health-wellbeing p span:nth-child(2):before { margin-bottom: 0.1em } } .overview-parallax .box-3 .health-wellbeing p span:nth-child(3) { font-size: 2.333em; line-height: 2 } .overview-parallax .box-3 .sustainable-sources { background-image: url("../images/overview/mobile/bg-tomato.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-3 .sustainable-sources { background-image: url("../images/overview/bg-tomato.jpg") } } .overview-parallax .box-3 .sustainable-sources p { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.375em; padding: 0 2.5em; text-align: center; text-shadow: 0.067em 0.067em 0.2em rgba(0, 0, 0, 0.5) } .font--din .overview-parallax .box-3 .sustainable-sources p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-3 .sustainable-sources p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-3 .sustainable-sources p { font-size: 0.8em; padding: 0 } } @media screen and (min-width: 57.5em) { .overview-parallax .box-3 .sustainable-sources p { font-size: 1em } } .overview-parallax .box-3 .sustainable-sources p span { display: block; line-height: 1.25 } .overview-parallax .box-3 .sustainable-sources p span:nth-child(1) { font-size: 2.333em } .overview-parallax .box-3 .sustainable-sources p span:nth-child(2) { font-size: 7.067em; line-height: 1 } .overview-parallax .box-3 .sustainable-sources p span:nth-child(2):before, .overview-parallax .box-3 .sustainable-sources p span:nth-child(2):after { background: #FFF; content: ""; display: block; height: 2px; margin: 0.05em auto; width: 2.792em } .overview-parallax .box-3 .sustainable-sources p span:nth-child(2):before { margin-bottom: 0.2em } .overview-parallax .box-3 .sustainable-sources p span:nth-child(3) { font-size: 3.467em } .overview-parallax .box-3 .environment-safeguarded { background-image: url("../images/overview/mobile/bg-tea-plantation.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-3 .environment-safeguarded { background-image: url("../images/overview/bg-tea-plantation.jpg") } } .overview-parallax .box-3 .environment-safeguarded p { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.375em; padding: 0 2.5em; text-align: center; text-shadow: 0.067em 0.067em 0.2em #000 } .font--din .overview-parallax .box-3 .environment-safeguarded p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-3 .environment-safeguarded p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-3 .environment-safeguarded p { font-size: 0.8em; padding: 0 } } @media screen and (min-width: 57.5em) { .overview-parallax .box-3 .environment-safeguarded p { font-size: 1em } } .overview-parallax .box-3 .environment-safeguarded p span { display: block; line-height: 1.5 } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(1) { font-size: 2.067em } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(2) { font-size: 5.667em; line-height: 1 } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(2):before { background: #FFF; content: ""; display: block; height: 2px; margin: 0.1em auto 0.2em; width: 3.482em } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(3) { font-size: 5.600em; line-height: 1 } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(3):after { background: #FFF; content: ""; display: block; height: 2px; margin: 0.1em auto 0.1em; width: 3.524em } .overview-parallax .box-3 .environment-safeguarded p span:nth-child(4) { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 3.467em } .font--din .overview-parallax .box-3 .environment-safeguarded p span:nth-child(4) { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-3 .environment-safeguarded p span:nth-child(4) { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 { z-index: 203 } .overview-parallax .box-4 .graph-bg { background-image: url("../images/overview/mobile/bg-graph-paper.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .graph-bg { background-image: url("../images/overview/bg-graph-paper.jpg") } } .overview-parallax .box-4 .graph-text { color: #666; max-width: 12.5em; right: 55% } @media screen and (max-width: 29.9375em) { .overview-parallax .box-4 .graph-text { bottom: 47%; left: 1em; max-width: calc(100% - 2em); width: calc(100% - 2em) } } @media screen and (min-width: 30em) { .overview-parallax .box-4 .graph-text { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .graph-text { max-width: 22.5em; right: 50% } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .graph-text { right: 55% } } .overview-parallax .box-4 .graph-text p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 0.6875em } .font--arial .overview-parallax .box-4 .graph-text p { font-family: Arial, Helvetica, sans-serif } @media screen and (max-height: 29.9375em) and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-4 .graph-text p { line-height: 1.1 } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .graph-text p { font-size: 1.3em } } .overview-parallax .box-4 .graph-text p:last-child { margin-bottom: 0 } .overview-parallax .box-4 .graph-text p span { color: #009ccd; display: block; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; line-height: 1 } .font--din .overview-parallax .box-4 .graph-text p span { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .graph-text p span { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .graph-text p span:nth-child(1) { font-size: 3.8em; margin-top: 0.253em } .overview-parallax .box-4 .graph-text p span:nth-child(2) { font-size: 2.7em } .overview-parallax .box-4 .graph-text p span:nth-child(3) { font-size: 2.955em; margin-bottom: 0.253em } .overview-parallax .box-4 .graph-container { display: block; font-size: 0.5em; height: 100%; left: 55%; max-height: 29.500em; max-width: 28.500em; width: 100% } @media screen and (max-width: 29.9375em) { .overview-parallax .box-4 .graph-container { left: auto; right: 1.25em; top: 49% } } @media screen and (min-width: 30em) { .overview-parallax .box-4 .graph-container { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 46% } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .graph-container { font-size: 0.7em; left: 55% } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .graph-container { font-size: 1em } } .overview-parallax .box-4 .graph-container .arrow { background-size: cover; display: block; height: 100%; left: 0; top: 0; width: 100% } .overview-parallax .box-4 .graph-container .arrow.skrollable { position: absolute } .overview-parallax .box-4 .graph-container .arrow.arrow-1 { background-image: url("../images/overview/graph-redarrow.png") } .overview-parallax .box-4 .graph-container .arrow.arrow-2 { background-image: url("../images/overview/graph-bluearrow.png") } .overview-parallax .box-4 .graph-container .arrow.arrow-3 { background-image: url("../images/overview/graph-greenarrow.png") } .overview-parallax .box-4 .graph-container .graph-axis { background-image: url("../images/overview/graph-axis.png"); background-size: cover; display: block; height: 100%; left: 0; position: relative; top: 0; width: 100%; z-index: 203 } .overview-parallax .box-4 .goals-content > span { font-family: 'unilever-iconfont'; display: block } .overview-parallax .box-4 .goals-content > p { font-size: 0.75em; line-height: 1 } @media screen and (min-width: 48em) { .overview-parallax .box-4 .goals-content > p { font-size: 1.5em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .goals-content > p { font-size: 2em } } .overview-parallax .box-4 .goals-content > p em { display: block; font-style: normal } .overview-parallax .box-4 .goals-content > p .medium { font-size: 2em; margin-top: -5px } @media screen and (min-width: 48em) { .overview-parallax .box-4 .goals-content > p .medium { margin-top: -10px } } .overview-parallax .box-4 .goals-content > p .large { font-size: 3em } .overview-parallax .box-4 .environment { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 1em; left: 50%; margin: 0 0 0 -50%; min-height: 12em; position: absolute; text-align: center; width: 100% } @media screen and (min-width: 48em) { .overview-parallax .box-4 .environment { min-height: 34em } } .overview-parallax .box-4 .environment span { font-size: 4em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .environment span { font-size: 8em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .environment span { font-size: 12em } } .overview-parallax .box-4 .environment .text-container { background-color: #6ba539; display: block; font-size: 0.375em; height: 5.667em; overflow: hidden; position: absolute; top: 18.875em; width: 100%; z-index: 100 } .overview-parallax .box-4 .environment .text-container:first-of-type { top: 13.375em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .environment .text-container { font-size: 0.75em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .environment .text-container { font-size: 1em; height: 5.5em } } .overview-parallax .box-4 .environment .text-container p { color: #FFF; font-size: 14em; line-height: 1; margin-top: -0.393em; position: static; font-family: "unilever_illustrative_betaRg", arial, sans-serif } .overview-parallax .box-4 .environment .text-container:first-of-type p { margin-top: 0 } .overview-parallax .box-4 .environment > p { color: #CEDC00; font-size: 0.75em; margin: 0; position: absolute; text-align: center; top: 8.75em; width: 100%; font-family: "unilever_illustrative_betaRg", arial, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .environment > p { font-size: 2em; top: 8.75em } } .overview-parallax .box-4 .well-being { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", arial, sans-serif; left: 50%; margin: 0em 0 0 -50%; text-align: center; width: 100% } .overview-parallax .box-4 .well-being .medium { margin-top: 0 !important } .overview-parallax .box-4 .well-being span { font-size: 4em; margin-bottom: 0.4em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .well-being span { font-size: 8em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .well-being span { font-size: 11em } } .overview-parallax .box-4 .livelihoods { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; text-align: center; width: 100% } .font--din .overview-parallax .box-4 .livelihoods { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .livelihoods { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .livelihoods span { font-size: 4em; margin-bottom: 0.4em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .livelihoods span { font-size: 8em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .livelihoods span { font-size: 11em } } .overview-parallax .box-4 .livelihoods p { position: relative } .overview-parallax .box-4 .livelihoods p b { color: #FFF !important } .overview-parallax .box-4 .driving-corners-bg { background-color: #fff; background-image: url("../images/overview/mobile/shaded-corners.png"); font-size: 0.4em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .driving-corners-bg { background-image: url("../images/overview/shaded-corners.png"); font-size: 1em } } .overview-parallax .box-4 .driving-corners-bg p { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.688em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .driving-corners-bg p { font-size: 0.6875em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .driving-corners-bg p { font-size: 0.9375em } } @media screen and (min-width: 93.75em) { .overview-parallax .box-4 .driving-corners-bg p { font-size: 1em } } .overview-parallax .box-4 .driving-corners-bg p span { display: block; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; line-height: 1; text-align: center } .font--din .overview-parallax .box-4 .driving-corners-bg p span { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .driving-corners-bg p span { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(1) { color: #72c4ea; font-size: 4.667em } @media screen and (min-width: 48em) { .overview-parallax .box-4 .driving-corners-bg p span:nth-child(1) { font-size: 2.667em } } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(2) { color: #1c7bbd; font-size: 8.667em } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(3) { color: #72c4ea; font-size: 3.6em; margin-top: -0.13em } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(4) { color: #1c7bbd; font-size: 5.6em; margin-top: 0.07em } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(5) { color: #72c4ea; font-size: 5.467em } .overview-parallax .box-4 .driving-corners-bg p span:nth-child(6) { color: #1c7bbd; font-size: 8.133em; margin-top: -0.05em } .overview-parallax .box-4 .corners-slide .text-container { display: block; margin: 7% auto 0; max-width: 58.750em; padding: 0 1em; position: relative } @media screen and (max-width: 29.9375em) { .overview-parallax .box-4 .corners-slide .text-container { margin-top: 10% } } @media screen and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-4 .corners-slide .text-container { margin-top: 1% } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .corners-slide .text-container { padding: 0 } } @media screen and (max-width: 29.9375em) { .overview-parallax .box-4 .corners-slide.innovation-bg .text-container { margin-top: 30% } } .overview-parallax .box-4 .corners-slide .foreground.skrollable { position: absolute } .overview-parallax .box-4 .corners-slide .text-container h3 { color: #FFF; font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1.75em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) } .font--din .overview-parallax .box-4 .corners-slide .text-container h3 { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .corners-slide .text-container h3 { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .corners-slide .text-container h3 { font-size: 2.564em } } .overview-parallax .box-4 .corners-slide .text-container p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 0.8888888888888888em; line-height: 1.5; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) } .font--arial .overview-parallax .box-4 .corners-slide .text-container p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .corners-slide .text-container p { font-size: 1.467em } } @media screen and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-4 .corners-slide .text-container p { text-shadow: 1px 1px 1px #000 } } .overview-parallax .box-4 .corners-slide .text-container p span { display: block } .overview-parallax .box-4 .brands-bg { background-image: url("../images/overview/mobile/bg-ground.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .brands-bg { background-image: url("../images/overview/bg-ground.jpg") } } .overview-parallax .box-4 .brands-hands { background-image: url("../images/overview/mobile/lifebuoy-hands.png"); background-position: 40% bottom; background-repeat: no-repeat; background-size: 150% } @media screen and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-4 .brands-hands { background-position: left bottom; background-size: 60% } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .brands-hands { background-image: url("../images/overview/lifebuoy-hands.png"); background-position: center center; background-size: cover } } .overview-parallax .box-4 .brands-bg .text-container { text-align: left } @media screen and (min-width: 48em) { .overview-parallax .box-4 .brands-bg .text-container { padding-right: 3em; text-align: right } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .brands-bg .text-container { padding-right: 2em } } @media screen and (min-width: 67.5em) { .overview-parallax .box-4 .brands-bg .text-container { padding-right: 1em } } .overview-parallax .box-4 .innovation-bg { background-image: url("../images/overview/mobile/bg-comfort.jpg"); background-position: 67% center } @media screen and (min-width: 48em) { .overview-parallax .box-4 .innovation-bg { background-image: url("../images/overview/bg-comfort.jpg"); background-position: center center } } @media screen and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-4 .innovation-bg { background-position: 67% top } } .overview-parallax .box-4 .innovation-bg .text-container { text-align: left } .overview-parallax .box-4 .supply-chain-bg { background-image: url("../images/overview/mobile/bg-blurry.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .supply-chain-bg { background-image: url("../images/overview/bg-blurry.jpg") } } .overview-parallax .box-4 .supply-chain-bg .tea-cup { background-image: url("../images/overview/mobile/lipton-hand.png"); background-position: 60% 110%; background-repeat: no-repeat; background-size: 180% } @media screen and (min-width: 48em) { .overview-parallax .box-4 .supply-chain-bg .tea-cup { background-image: url("../images/overview/lipton-hand.png"); background-position: center center } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .supply-chain-bg .tea-cup { background-size: cover } } .overview-parallax .box-4 .supply-chain-bg .text-container { text-align: left } .overview-parallax .box-4 .project-sunlight { background-image: url("../images/overview/mobile/bg-textured.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .project-sunlight { background-image: url("../images/overview/bg-textured.jpg") } } .overview-parallax .box-4 .project-sunlight-text { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #666; right: 47% } @media screen and (min-width: 30em) { .overview-parallax .box-4 .project-sunlight-text { right: 55% } } .overview-parallax .box-4 .project-sunlight-text.skrollable { position: absolute } .overview-parallax .box-4 .project-sunlight-text h3 { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1.3125em; line-height: 1; max-width: 7.3em } .font--din .overview-parallax .box-4 .project-sunlight-text h3 { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .project-sunlight-text h3 { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .project-sunlight-text h3 { font-size: 2.137em } } .overview-parallax .box-4 .project-sunlight-text p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 0.875em; max-width: 11.071428571428571em } .font--arial .overview-parallax .box-4 .project-sunlight-text p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .project-sunlight-text p { max-width: 13.571428571428571em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .project-sunlight-text p { font-size: 1.334em; max-width: 13.9em; padding-right: 10px } } .overview-parallax .box-4 .phone-container { left: 52%; top: 10% } @media screen and (min-width: 37.5em) { .overview-parallax .box-4 .phone-container { left: 56% } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .phone-container { left: 52% } } .overview-parallax .box-4 .rainforest-logo { background-image: url("../images/overview/rainforest-logo.png"); background-position: center center; background-size: cover; display: block; height: 100% } .overview-parallax .box-4 .sun-icon { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; color: white; display: block; float: left; font-size: 12.5em; height: auto; line-height: 1; padding-top: 0.360em; text-align: center; width: 100% } .overview-parallax .box-4 .phone { background-image: url("../images/overview/iphone.png"); background-size: cover; font-size: 0.5em; height: 32.563em; margin-top: 13em; position: relative; width: 17.188em } @media screen and (min-width: 30em) { .overview-parallax .box-4 .phone { margin-top: 3em } } @media screen and (min-width: 37.5em) { .overview-parallax .box-4 .phone { margin-top: 5em } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .phone { font-size: 1em; margin-top: 7.5em } } .overview-parallax .box-4 .phone .screen-container { background-image: url("../images/overview/sunlight-site.jpg"); background-position: 0% 0%; background-size: cover; height: 21.375em; overflow: hidden; position: relative !important; top: 4.375em; left: 3em; width: 12.625em } .overview-parallax .box-4 .world-map { background-color: #6ba439; background-image: url("../images/overview/mobile/map.png") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .world-map { background-image: url("../images/overview/map.png") } } .overview-parallax .box-4 .world-map .text-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .overview-parallax .box-4 .world-map p { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.5em; text-align: center } .font--din .overview-parallax .box-4 .world-map p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .world-map p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .world-map p { font-size: 1em } } .overview-parallax .box-4 .world-map p span { display: block; line-height: 1.25 } .overview-parallax .box-4 .world-map p:nth-child(1) span:nth-child(1) { font-size: 3.733em; line-height: 1 } .overview-parallax .box-4 .world-map p:nth-child(1) span:nth-child(2) { font-size: 1.867em } .overview-parallax .box-4 .world-map p:nth-child(1) span:nth-child(3) { font-size: 2.267em } .overview-parallax .box-4 .world-map p:nth-child(1) span:nth-child(4) { font-size: 3.8em; line-height: 1 } .overview-parallax .box-4 .world-map p:nth-child(2):before { background: #FFF; content: ""; display: block; height: 2px; margin: 0.933em auto; width: 19.733em } .overview-parallax .box-4 .world-map p:nth-child(2) span:nth-child(1) { font-size: 3em; line-height: 1; margin-top: 0.6em } .overview-parallax .box-4 .world-map p:nth-child(2) span:nth-child(2) { font-size: 5.133em; line-height: 1 } .overview-parallax .box-4 .world-map p:nth-child(2) span:nth-child(3) { font-size: 1.625em } .overview-parallax .box-4 .deforestation { background-image: url("../images/overview/mobile/bg-deforest.jpg") } @media screen and (max-width: 57.5em) and (orientation: portrait) { .overview-parallax .box-4 .deforestation { background-size: auto } } @media screen and (min-width: 48em) { .overview-parallax .box-4 .deforestation { background-image: url("../images/overview/bg-deforest.jpg") } } .overview-parallax .box-4 .deforestation-text { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; padding-top: 9em; text-align: center } .font--din .overview-parallax .box-4 .deforestation-text { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .deforestation-text { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .deforestation-text span { display: block; font-size: 3.6em; line-height: 1 } .overview-parallax .box-4 .deforestation-text span:nth-child(1) { font-size: 2.667em } .overview-parallax .box-4 .access-water { background-image: url("../images/overview/mobile/bg-access-water.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .access-water { background-image: url("../images/overview/bg-access-water.jpg") } } .overview-parallax .box-4 .access-water-text { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; padding-top: 5em; text-align: center } .font--din .overview-parallax .box-4 .access-water-text { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .access-water-text { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .access-water-text span { display: block; font-size: 3.6em; line-height: 1 } .overview-parallax .box-4 .access-water-text span:nth-child(1), .overview-parallax .box-4 .access-water-text span:nth-child(4) { font-size: 2.667em } .overview-parallax .box-4 .smallholder-farmers { background-image: url("../images/overview/mobile/bg-farmers.jpg"); background-position: center right } @media screen and (min-width: 48em) { .overview-parallax .box-4 .smallholder-farmers { background-image: url("../images/overview/bg-farmers.jpg") } } .overview-parallax .box-4 .smallholder-farmers-farmer { background-image: url("../images/overview/mobile/man.png"); background-position: 30% center } @media screen and (min-width: 48em) { .overview-parallax .box-4 .smallholder-farmers-farmer { background-image: url("../images/overview/man.png"); background-position: center left } } .overview-parallax .box-4 .smallholder-farmers-leaf { background-image: url("../images/overview/mobile/foreground.png") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .smallholder-farmers-leaf { background-image: url("../images/overview/foreground.png") } } .overview-parallax .box-4 .farmers-text { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 1em; padding-top: 7em; text-align: center } .font--din .overview-parallax .box-4 .farmers-text { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .farmers-text { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-4 .farmers-text span { display: block; font-size: 3.467em; line-height: 1 } .overview-parallax .box-4 .farmers-text span:nth-child(4) { font-size: 2.933em } .overview-parallax .box-4 .farmers-text span:nth-child(5) { font-size: 5.067em } .overview-parallax .box-4 .turning-point { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.375em; left: 0; padding-bottom: 4em; text-align: center; width: 100% } .font--din .overview-parallax .box-4 .turning-point { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .turning-point { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .turning-point { font-size: 1em } } .overview-parallax .box-4 .turning-point span { color: #72c4e9; display: block; font-size: 4em; line-height: 0.9 } .overview-parallax .box-4 .turning-point span:nth-child(2) { color: #0085ca; font-size: 6.5em; margin-top: 0.09em } @media screen and (min-width: 57.5em) { .overview-parallax .box-4 .turning-point span:nth-child(2) { font-size: 7.333em } } .overview-parallax .box-4 .point { background-image: url("../images/overview/mobile/bg-orange.jpg") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .point { background-image: url("../images/overview/bg-orange.jpg") } } .overview-parallax .box-4 .a-point { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.625em; left: 0; padding-left: 2em; text-align: left; width: 100% } .font--din .overview-parallax .box-4 .a-point { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-4 .a-point { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-4 .a-point { font-size: 1em; padding-left: 4% } } @media screen and (min-width: 67.5em) { .overview-parallax .box-4 .a-point { padding-left: 8% } } .overview-parallax .box-4 .a-point span { display: block; font-size: 1.733em; line-height: 1.2 } .overview-parallax .box-4 .a-point span:nth-child(1) { font-size: 7.333em; margin-bottom: -0.2em } .overview-parallax .box-4 .a-point-map { background-image: url("../images/overview/mobile/world2.png") } @media screen and (min-width: 48em) { .overview-parallax .box-4 .a-point-map { background-image: url("../images/overview/world2.png") } } .overview-parallax .box-5 { z-index: 203 } .overview-parallax .box-5 .heart p { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.4375em; left: 50%; text-align: center } .font--din .overview-parallax .box-5 .heart p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-5 .heart p { font-family: Arial, Helvetica, sans-serif } @media screen and (max-width: 29.9375em) { .overview-parallax .box-5 .heart p { bottom: 10%; font-size: 0.5em; left: 0; top: auto; width: 100% } } @media screen and (min-width: 30em) and (max-width: 47.9375em) and (orientation: landscape) { .overview-parallax .box-5 .heart p { left: 42% } } @media screen and (min-width: 30em) { .overview-parallax .box-5 .heart p { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } } @media screen and (min-width: 48em) { .overview-parallax .box-5 .heart p { font-size: 0.667em } } @media screen and (min-width: 57.5em) { .overview-parallax .box-5 .heart p { font-size: 0.867em; left: 48% } } @media screen and (min-width: 67.5em) { .overview-parallax .box-5 .heart p { font-size: 1em } } .overview-parallax .box-5 .heart p span { display: block; line-height: 1 } .overview-parallax .box-5 .heart p span:nth-child(1) { color: #75c8ea; font-size: 3.333em } .overview-parallax .box-5 .heart p span:nth-child(2) { color: #0085ca; font-size: 2.400em } .overview-parallax .box-5 .heart p span:nth-child(3) { color: #75c8ea; font-size: 4.267em } .overview-parallax .box-5 .heart p span:nth-child(4) { color: #0085ca; font-size: 5.200em; margin-top: -0.06em } .overview-parallax .box-5 .heart .icon { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; color: white; display: block; float: left; font-size: 12.5em; height: auto; line-height: 1.48em; text-align: center; width: 100% } .overview-parallax .box-5 .radial-grad { background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=1) } .overview-parallax .box-5 .radial-grad.skrollable { left: 0; position: absolute; top: 0 } .overview-parallax .box-5 .brighter-future p { font-family: "unilever_illustrative_betaRg", Arial, Helvetica, sans-serif; font-size: 0.4375em; text-align: center; width: 100% } .font--din .overview-parallax .box-5 .brighter-future p { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .overview-parallax .box-5 .brighter-future p { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future p { font-size: 1em } } .overview-parallax .box-5 .brighter-future p.skrollable { position: relative } .overview-parallax .box-5 .brighter-future p.survive { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .overview-parallax .box-5 .brighter-future p.grow-sustainably { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .overview-parallax .box-5 .brighter-future p.better-time { margin: 0; padding-top: 4em } @media screen and (min-width: 30em) { .overview-parallax .box-5 .brighter-future p.better-time { padding-top: 1em } } .overview-parallax .box-5 .brighter-future p span { display: block; line-height: 1 } .overview-parallax .box-5 .brighter-future .survive span:nth-child(1) { color: #fff; font-size: 3.6em } .overview-parallax .box-5 .brighter-future .survive span:nth-child(2) { color: #72c5e7; font-size: 3.6em; margin-top: 0.1em } .overview-parallax .box-5 .brighter-future .survive span:nth-child(3) { color: #fff; font-size: 9.733em } .overview-parallax .box-5 .brighter-future .grow-sustainably span:nth-child(1) { color: #72c4e9; font-size: 4em } .overview-parallax .box-5 .brighter-future .grow-sustainably span:nth-child(2) { color: #fff; font-size: 12em; line-height: 0.75; margin-top: 0.11em; margin-bottom: 0.03em } .overview-parallax .box-5 .brighter-future .grow-sustainably span:nth-child(3) { color: #fff; font-size: 5.0625em } .overview-parallax .box-5 .brighter-future .grow-sustainably span:nth-child(4) { color: #72c4e9; font-size: 5.4375em } .overview-parallax .box-5 .brighter-future-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 150 } .overview-parallax .box-5 .sunlight-container { display: block; font-size: 0.4375em; height: 12.8125em; margin: 0 auto; max-width: 20.125em; width: 100% } @media screen and (max-height: 19.9375em) and (max-width: 47.9375em) { .overview-parallax .box-5 .sunlight-container { display: none !important } } @media screen and (min-width: 48em) { .overview-parallax .box-5 .sunlight-container { font-size: 1em } } .overview-parallax .box-5 .sunlight-container.skrollable { position: relative } .overview-parallax .box-5 .sunlight-container .sunlight-icon { left: 0; top: 0 } .overview-parallax .box-5 .sunlight-container .sunlight-icon.skrollable { position: absolute } .overview-parallax .box-5 .sunlight-container .sunlight-icon:nth-of-type(1) { background-image: url("../images/overview/sunlight-icon-1.png") } .overview-parallax .box-5 .sunlight-container .sunlight-icon:nth-of-type(2) { background-image: url("../images/overview/sunlight-icon-2.png") } .overview-parallax .box-5 .sunlight-container .sunlight-icon:nth-of-type(3) { background-image: url("../images/overview/sunlight-icon-3.png") } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(1) { color: #fff; font-size: 3.867em } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(2) { color: #fff; font-size: 3.000em } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(3) { color: #ffd101; font-size: 3.333em } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(4) { color: #fff; font-size: 3.400em } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(5) { color: #ffd101; font-size: 4.400em } .overview-parallax .box-5 .brighter-future .better-time span:nth-child(6) { color: #ffd101; font-size: 5.600em; margin-top: -0.05em } .overview-parallax .box-5 .brighter-future-share { margin: 0 auto; max-width: 250px; text-align: center } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share { max-width: 596px; margin-top: 15px } } .overview-parallax .box-5 .brighter-future-share h3 { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, 0.6); display: inline-block; float: left; margin: 10px 10px 0 5px; padding: 0 10px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.8em; letter-spacing: 0; position: relative; text-transform: uppercase } .font--arial .overview-parallax .box-5 .brighter-future-share h3 { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share h3 { float: left; margin: 0 5px 0 0; font-size: 1rem; padding: 0 20px 0 0 } } .overview-parallax .box-5 .brighter-future-share h3 span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e00c"; margin-right: 0.25em } .overview-parallax .box-5 .brighter-future-share ul { float: left; line-height: 0.75 } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share ul { margin: 6px 0 } } .overview-parallax .box-5 .brighter-future-share ul li { display: inline-block; list-style: none; margin: 0 3px } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share ul li { margin: 0 12px } } .overview-parallax .box-5 .brighter-future-share ul li a { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; color: #fff; font-size: 1rem; text-transform: uppercase; padding-left: 1.8em; position: relative } .font--arial .overview-parallax .box-5 .brighter-future-share ul li a { font-family: Arial, Helvetica, sans-serif } .overview-parallax .box-5 .brighter-future-share ul li a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.5625rem; position: absolute; left: 0; top: -5px; color: rgba(255, 255, 255, 0.75) } .overview-parallax .box-5 .brighter-future-share ul li a.icon-at-facebook:before { content: "\e019"; top: -6px } .overview-parallax .box-5 .brighter-future-share ul li a.icon-at-twitter:before { content: "\ea91" } .overview-parallax .box-5 .brighter-future-share ul li a.icon-at-linkedin:before { content: "\e031" } .overview-parallax .box-5 .brighter-future-share ul li a.icon-at-email:before { content: "\e01c" } .overview-parallax .box-5 .brighter-future-share ul li a span { display: none } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share ul li a span { display: inline } } .overview-parallax .box-5 .brighter-future-share p { clear: both; display: block; font-family: Arial, sans-serif; font-size: 0.8em; margin: 2em 0 0 } @media screen and (min-width: 48em) { .overview-parallax .box-5 .brighter-future-share p { margin-top: 1em } } .overview-parallax .box-5 .brighter-future-share p a { display: inline-block; margin-top: 15px; color: #FFF; color: rgba(255, 255, 255, 0.5) } .overview-parallax .box-5 .brighter-future-share p a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; margin-right: 0.5em } .overview-parallax .box-5 .brighter-future-share p a:hover { color: #fff } .white-popup-block { background: #FFF; padding: 20px 30px; text-align: left; max-width: 650px; margin: 40px auto; position: relative; max-height: 400px; overflow: auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) } .white-popup-block ul { padding-left: 2em } .slp-taking-action-sting p a { display: inline; color: #007dbb; text-decoration: underline } .slp-taking-action-sting p a:hover { text-decoration: none; color: #004976 } body.theme-slp div.slp-target.overall h2 { padding-left: 20px; font-size: 1.625em } .section-container.accordion .slp-target > h3 { margin-bottom: 0 !important } .section-container.accordion .slp-target > div { background-color: #fff; overflow: hidden; padding-top: 10px } .section-container.accordion .section-container.accordion { clear: both; margin-bottom: 0; border-top: 1px solid #eee; background: none } .section-container.accordion .section-container.accordion .title { padding-left: 20px } .section-container.accordion .section-container.accordion .section .content { background-color: #fff } .slp-navigation { margin: 2em 0 } @media print { .slp-navigation { margin-bottom: 4em } } .slp-navigation h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.375em; text-align: center } .font--arial .slp-navigation h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .slp-navigation h2 { display: none } } .slp-navigation a { color: #FFF; opacity: 1; transition: opacity 0.3s ease } .slp-navigation a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; transition: left 0.3s ease; padding: 0 0.5em 0 0; left: 0; font-size: 0.9em; display: inline-block; position: relative } .slp-navigation a:hover { opacity: 0.8 } .slp-navigation a:hover:before { left: -3px } .slp-navigation .slp-nav-container { border-radius: 0.25em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); float: left; width: 100% } @media print, (min-width: 48em) { .slp-navigation .slp-nav-container { border: none; box-shadow: none } } .slp-navigation .slp-nav-container > h3 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; border-radius: 0.25em 0.25em 0 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 1em; position: relative; text-align: left; z-index: 1; color: #fff } .font--arial .slp-navigation .slp-nav-container > h3 { font-family: Arial, Helvetica, sans-serif } .no-js .slp-navigation .slp-nav-container > h3 { color: #007dbb } @media print, (min-width: 48em) { .slp-navigation .slp-nav-container > h3 { border: 1px solid red; display: none } } .slp-navigation .slp-nav-container > h3:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; font-size: 0.9em; display: inline-block; float: right; padding: 0 0 0 0.5em } .slp-navigation .slp-nav-container > h3.plan { background-color: #F7F7F7 } .slp-navigation .slp-nav-container > h3.open { background-color: #fff; color: #007dbb } .slp-navigation .slp-nav-container > h3.open:after { content: "\e01f" } .slp-navigation .slp-nav-inner-container { display: none; float: left; position: relative; width: 100% } .no-js .slp-navigation .slp-nav-inner-container { display: block } @media print, (min-width: 48em) { .slp-navigation .slp-nav-inner-container { display: block } } @media print { .slp-navigation .slp-nav-inner-container { display: none } } .slp-navigation section div { background: #666; border: solid #FFF; border-width: 0 0.5em 0.5em; color: #FFF; float: left; position: relative; width: 100% } @media print, (min-width: 48em) { .slp-navigation section div { border-radius: 10px 10px 0 0; border-width: 2px } } .slp-navigation section div.plan { background: #F7F7F7; border-top: 0; color: #007dbb } .slp-navigation section div.plan a { color: #666 } .slp-navigation section div.plan ul { background-color: #E5E5E5 } @media print { .slp-navigation section div.plan ul { text-align: left !important; margin-top: 4em; padding-left: 0 !important; padding-right: 0 !important } } .slp-navigation section div.plan li { border-color: rgba(102, 102, 102, 0.25) } @media print { .slp-navigation section div.plan li { display: inline-block !important; margin: 0 !important; width: 33% !important } } @media print { .slp-navigation section div.plan { display: block !important } } @media print, (min-width: 48em) { .slp-navigation section div.plan { background: none; display: none } .no-js .slp-navigation section div.plan { display: block } .slp-navigation section div.plan a { color: #007dbb; display: inline } .slp-navigation section div.plan h4 { background: url(../images/hr_down.png) bottom center no-repeat; background-size: 100% 5px; overflow: hidden; padding: 1.1em 1em; padding-bottom: 0; position: relative; text-align: center } .slp-navigation section div.plan h4 span { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #007dbb; display: inline; background: #FFF; border-radius: 0.476em 0.476em 0 0; box-shadow: 0 -3px 9px -5px rgba(0, 0, 0, 0.7); font-size: 1.25em; padding: 0.571em 1em 0.286em; transition: all 0.3s ease } .font--arial .slp-navigation section div.plan h4 span { font-family: Arial, Helvetica, sans-serif } .slp-navigation section div.plan h4 span:before { display: none } .slp-navigation section div.plan ul { background-color: transparent; box-shadow: none; padding: 1.25em 1em; text-align: center } .slp-navigation section div.plan li { border: 0; display: inline; margin: 0 1em } } .slp-navigation section:nth-child(2) div { background: #007dbb; color: #fff } .slp-navigation section:nth-child(2) div ul { background-color: #006696 } .slp-navigation section:nth-child(3) div { background: #54802d; color: #fff } .slp-navigation section:nth-child(3) div ul { background-color: #416523 } .slp-navigation section:nth-child(4) div { background: #d0006f; color: #fff } .slp-navigation section:nth-child(4) div ul { background-color: #AD0F57 } .slp-navigation h3, .slp-navigation h4 { transition: padding 1s ease; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #FFF; font-size: 1em; margin: 0; padding: 0; position: relative; text-transform: none; display: block; padding: 1.1em 1em } .font--arial .slp-navigation h3, .font--arial .slp-navigation h4 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .slp-navigation h3, .slp-navigation h4 { font-size: 1.063em } } @media (max-width: 47.9375em) { .slp-navigation h3 span, .slp-navigation h4 span { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px } } .slp-navigation h4.active { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .slp-navigation h4.active { font-family: Arial, Helvetica, sans-serif } .slp-navigation ul { border-radius: 0 0 10px 10px; box-shadow: 0 8px 7px -6px rgba(0, 0, 0, 0.2) inset; float: left; list-style: none; margin: 0; padding: 0; position: relative; width: 100% } .slp-navigation ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding: 0 1em } .slp-navigation ul li:last-child { border: none } .slp-navigation ul li a { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; display: block; letter-spacing: -0.025em; line-height: 1; padding: 1em 0 } .font--arial .slp-navigation ul li a { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .slp-navigation ul li a { font-size: 1.063em; padding: 0.824em 0 } } @media print, (min-width: 48em) { .slp-navigation .sublist { display: none } .no-js .slp-navigation .sublist { display: block } } @media print { .slp-navigation .sublist { display: block } } .slp-navigation .sublist li { float: left; width: 100% } .slp-navigation .sublist li.active { background: rgba(0, 0, 0, 0.25) } .slp-navigation .show-hide { bottom: -40px; margin: 0; position: absolute; width: 100% } @media print, (min-width: 48em) { .slp-navigation .show-hide { float: left; margin: 0.75em 0 0; position: static; width: 100% } } .slp-navigation .show-hide button { color: #007dbb; display: inline-block } .slp-navigation .show-hide button:before { display: none } .ct-label.ct-label.ct-horizontal { -ms-flex-pack: end; justify-content: flex-end; text-align: right; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; writing-mode: vertical-lr; -ms-writing-mode: tb-rl; margin-top: 8px } .ct-chart-bar .ct-label.ct-horizontal.ct-end { -ms-flex-pack: end; justify-content: flex-end; text-align: right; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; margin: 0 33%; width: auto !important; height: auto !important } .ct-chart svg { overflow: visible; -webkit-transform: scaleX(1); transform: scaleX(1) } .ct-chart { display: block; margin-top: 1em; margin-bottom: 2em; position: relative; width: 100% } .no-js .ct-chart { display: none; visibility: hidden } .ct-pie .ct-chart:before, .ct-donut .ct-chart:before, .ct-double-donut .ct-chart:before { content: ""; display: block; float: left; content: ""; padding-bottom: 61.804697157%; width: 0 } .ct-pie .ct-chart:after, .ct-donut .ct-chart:after, .ct-double-donut .ct-chart:after { clear: both; content: ""; display: table } .ct-pie .ct-chart > svg, .ct-donut .ct-chart > svg, .ct-double-donut .ct-chart > svg { display: block; left: 0; position: absolute; top: 0 } .ct-pie .ct-chart .ct-label, .ct-donut .ct-chart .ct-label, .ct-double-donut .ct-chart .ct-label { color: #666666; fill: #666666 } .ct-chart .ct-label { color: #666; fill: #666 } .ct-chart .ct-label.ct-vertical { color: #666 } .ct-chart .ct-label.ct-horizontal { color: #666; text-align: center } .ct-chart .ct-bar { stroke-width: 10px } @media screen and (min-width: 600px) { .ct-chart .ct-bar { stroke-width: 20px } } .ct-double-donut { margin-bottom: 2em; position: relative } .ct-double-donut .ct-chart { margin-bottom: 0 } .ct-double-donut .ct-chart.inner { left: 0; position: absolute; top: 0; width: 100% } .ct-double-donut .inner .ct-label { display: none } @media screen and (min-width: 48em) { .ct-double-donut .inner .ct-label { display: block } } .ct-chart.inner .ct-label, .ct-chart.outer .ct-label { color: #FFF !important; fill: #FFF !important } .ct-chart.outer .ct-series.ct-series-a .ct-slice-donut { stroke: #84bd00 } .ct-chart.outer .ct-series.ct-series-b .ct-slice-donut { stroke: #00573f } .ct-chart.outer .ct-series.ct-series-c .ct-slice-donut { stroke: #007dbb } div.case-study { position: relative; overflow: hidden; padding: 0 0 1em } div.case-study > div { padding-top: 2em } div.case-study::after { content: ""; background: url(../images/hr_down.png) 0 0 no-repeat; background-size: 100% 6px; top: 0; left: 0; position: absolute; height: 6px; width: 100%; display: block; pointer-events: none } div.case-study::before { content: ""; background: url(../images/hr.png) 0 0 no-repeat; background-size: 100% 6px; bottom: 0; left: 0; position: absolute; height: 6px; width: 100%; display: block; pointer-events: none } div.case-study img { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } .map-container { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-bottom: 0.9375em; position: relative } .no-js .map-container { display: none; visibility: hidden } .map-container .info-windows { margin: 0; padding: 0 } .map-container .info-windows > li { background: rgba(255, 255, 255, 0.9); display: none; height: 75%; left: 0; list-style: none; padding: 0; position: absolute; top: 0; width: 100%; z-index: 1 } @media screen and (min-width: 48em) { .map-container .info-windows > li { height: 100%; width: 22.625em } } .map-container .info-windows .header { border-bottom: 1px solid #CCC; float: left; margin-bottom: 0.5em; padding: 0.5em 1em; width: 100% } @media screen and (min-width: 48em) { .map-container .info-windows .header { padding: 0.5em 2em } } .map-container .info-windows .header h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #004976; float: left; font-size: 1.125em; font-weight: normal; line-height: 1.778em; margin: 0; padding: 0 } .font--arial .map-container .info-windows .header h2 { font-family: Arial, Helvetica, sans-serif } .map-container .info-windows .header button { background: none; border: 0; color: #999; float: right; line-height: 0.875em; margin: 0; padding: 0.5em } .map-container .info-windows .header button:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e001" } .map-container .info-windows .header button span { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px } .map-container .info-windows .content { clear: both; float: left; margin: 0.5em 0; max-height: 12.313em; overflow-y: scroll; padding: 0 1em; width: 100% } @media screen and (min-width: 48em) { .map-container .info-windows .content { max-height: 22.875em; padding: 0 2em } } .map-container .info-windows .content.double-link { max-height: 9.6em } @media screen and (min-width: 48em) { .map-container .info-windows .content.double-link { max-height: 20.2em } } .map-container .info-windows .content h3 { font-size: 1.25em } .map-container .info-windows .content p { font-size: 0.8em } .map-container .info-windows .content p.intro { font-size: 0.9em } .map-container .info-windows .content p:last-of-type { background: url(../images/hr_down.png) 0 bottom no-repeat; background-size: 100% 6px; padding-bottom: 3em } .map-container .info-windows .content img { float: left; margin: 0 0.5em 0.5em 0 } .map-container .info-windows .content .map-accordion { list-style: none; margin: 0; padding: 0 } .map-container .info-windows .content .map-accordion li { border-top: 1px solid #CCC } .map-container .info-windows .content .map-accordion li:first-child { border-top: none } .map-container .info-windows .content .map-accordion h4 { cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: normal; line-height: 2.5em; margin: 0; padding: 0.75em 0.5em 0.75em 0; text-transform: capitalize } .map-container .info-windows .content .map-accordion h4:before { font-family: 'unilever-farmersmap-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; background: #007dbb; border-radius: 50%; color: #FFF; content: ""; display: block; float: left; font-size: 1.5em; height: 1.667em; line-height: 1.667em; margin-right: 0.333em; text-align: center; width: 1.667em } @media screen and (min-width: 48em) { .map-container .info-windows .content .map-accordion h4:before { margin-right: 0.5em } } .map-container .info-windows .content .map-accordion h4.cash:before { content: "\e600" } .map-container .info-windows .content .map-accordion h4.environmental:before { content: "\e601" } .map-container .info-windows .content .map-accordion h4.investment:before { content: "\e602" } .map-container .info-windows .content .map-accordion h4.network:before { content: "\e603" } .map-container .info-windows .content .map-accordion h4.planting:before { content: "\e604" } .map-container .info-windows .content .map-accordion h4.resources:before { content: "\e605" } .map-container .info-windows .content .map-accordion h4.support:before { content: "\e606" } .map-container .info-windows .content .map-accordion h4:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; float: right; transition: 0.7s ease-in-out -webkit-transform; transition: 0.7s ease-in-out transform } .map-container .info-windows .content .map-accordion h4.open:after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .map-container .info-windows .content .map-accordion p { background: url("../images/hr.png") center top no-repeat #EEE; display: none; margin: 0; padding: 1.692em } .map-container .info-windows > li > a { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; border-top: 1px solid #CCC; clear: both; display: block; float: left; padding: 0.5em 1em; width: 100% } .font--arial .map-container .info-windows > li > a { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { .map-container .info-windows > li > a { padding: 0.5em 2em } } .map-container .info-windows > li > a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; margin-right: 0.25em } .map-container .map-canvas { display: block; height: 26.25em; width: 100%; z-index: 0 } @media screen and (min-width: 48em) { .map-container .map-canvas { height: 30.25em } } .map-container .gm-style .gmnoprint { display: none } @media screen and (min-width: 57.5em) { .map-container .gm-style .gmnoprint { display: block } } .map-container .gm-style .gmnoprint img { max-width: none } .map-container + p { font-size: 0.8em; margin: 1em 0 3em } .no-js .map-container + p { display: none; visibility: hidden } ul.footprint-infographic { display: block; float: left; margin: 0 0 1em -23px; padding: 0; width: calc(100% + 23px) } ul.footprint-infographic li { display: block; float: left; padding: 0 0 0 23px; position: relative; text-align: center; width: 100% } @media print, screen and (min-width: 48em) { ul.footprint-infographic li { min-width: 10%; padding: 0; width: 10% } ul.footprint-infographic li.panel-10 { width: 10% } ul.footprint-infographic li.panel-15 { width: 15% } ul.footprint-infographic li.panel-20 { width: 20% } ul.footprint-infographic li.panel-25 { width: 25% } ul.footprint-infographic li.panel-30 { width: 30% } ul.footprint-infographic li.panel-35 { width: 35% } ul.footprint-infographic li.panel-40 { width: 40% } ul.footprint-infographic li.panel-45 { width: 45% } ul.footprint-infographic li.panel-50 { width: 50% } ul.footprint-infographic li.panel-55 { width: 55% } ul.footprint-infographic li.panel-60 { width: 60% } ul.footprint-infographic li.panel-65 { width: 65% } ul.footprint-infographic li.panel-70 { width: 70% } ul.footprint-infographic li.panel-75 { width: 75% } ul.footprint-infographic li.panel-80 { width: 80% } ul.footprint-infographic li.panel-85 { width: 85% } ul.footprint-infographic li.panel-90 { width: 90% } } ul.footprint-infographic li:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: block; font-size: 1.25em; line-height: 1; padding: 1em 0 } @media print, screen and (min-width: 48em) { ul.footprint-infographic li:before { display: inline-block; left: 0%; margin-top: -0.5em; padding: 0 0.1em; position: absolute; top: 50% } } ul.footprint-infographic li.plus:before { content: "\e010" } ul.footprint-infographic li.minus:before { content: "\e013" } ul.footprint-infographic li.minus .text-wrapper { background: #FFF } ul.footprint-infographic li:first-child:before { content: ""; display: none; visibility: hidden } ul.footprint-infographic .text-wrapper { border-radius: 1em; float: right; height: 100%; padding: 1em 0.1em; width: 100% } @media print, screen and (min-width: 48em) { ul.footprint-infographic .text-wrapper { width: calc(100% - 23px) } } ul.footprint-infographic .text-wrapper.dotted { border: 1px dashed #ccc } ul.footprint-infographic h3 { font-size: 1.625em; padding: 0 } ul.footprint-infographic img { display: block; margin: 0 auto 1em; height: auto; max-width: 100% } ul.footprint-infographic p { color: #333; line-height: 1.2; word-wrap: break-word } @media screen and (min-width: 48em) { ul.footprint-infographic p { font-size: 0.8em } } ul.footprint-infographic.blue li:before { color: #007dbb } ul.footprint-infographic.blue .text-wrapper { background-color: #d6eff4 !important } ul.footprint-infographic.blue .text-wrapper.dotted { border-color: #007dbb } ul.footprint-infographic.blue h3 { color: #007dbb } ul.footprint-infographic.green li:before { color: #54802d } ul.footprint-infographic.green .text-wrapper { background-color: #e8f3de !important } ul.footprint-infographic.green .text-wrapper.dotted { border-color: #54802d } ul.footprint-infographic.green h3 { color: #54802d } ul.footprint-infographic.teal li:before { color: #008566 } ul.footprint-infographic.teal .text-wrapper { background-color: #ddf0ea !important } ul.footprint-infographic.teal .text-wrapper.dotted { border-color: #008566 } ul.footprint-infographic.teal h3 { color: #008566 } .virtuous-cycle { display: block; margin: 0 0 20px; padding: 20px 0 0; position: relative; width: 100% } @media screen and (min-width: 30em) { .virtuous-cycle { padding: 50px 0 } } @media print, screen and (min-width: 48em) { .virtuous-cycle { font-size: 1em } } .virtuous-cycle .cycle-container { background: url("../images/virtuous-cycle.png") !important; background-size: cover !important; display: block; font-size: 0.625em; height: 29.375em; margin: 0 auto; overflow: hidden; position: relative; width: 29.375em } @media print, screen and (min-width: 48em) { .virtuous-cycle .cycle-container { font-size: 1em } } .virtuous-cycle .cycle-container li { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; color: #FFF; display: block; font-size: 1.25em; height: 23.5em; left: 0; line-height: 1; list-style: none; padding: 0; position: absolute; top: 0; text-align: center; text-transform: uppercase; width: 23.5em } .font--arial .virtuous-cycle .cycle-container li { font-family: Arial, Helvetica, sans-serif } .virtuous-cycle .cycle-container li:nth-child(1) { padding: 1.8em 0 0 1.5em; -webkit-transform: rotate(40deg); transform: rotate(40deg) } .virtuous-cycle .cycle-container li:nth-child(2) { padding: 2.05em 1.6em 0 0px; -webkit-transform: rotate(120deg); transform: rotate(120deg) } .virtuous-cycle .cycle-container li:nth-child(2) span { display: block; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .virtuous-cycle .cycle-container li:nth-child(3) { padding: 1.6em 0 0 1.5em; -webkit-transform: rotate(182deg); transform: rotate(182deg) } .virtuous-cycle .cycle-container li:nth-child(3) span { display: block; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .virtuous-cycle .cycle-container li:nth-child(4) { padding: 1.9em 0 0 1.5em; -webkit-transform: rotate(252deg); transform: rotate(252deg) } .virtuous-cycle .cycle-container li:nth-child(4) span { display: block; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .virtuous-cycle .cycle-container li:nth-child(5) { padding: 2em 0 0 16px; -webkit-transform: rotate(329deg); transform: rotate(329deg) } .virtuous-cycle .cycle-labels { margin: 0 0 20px; padding-left: 20px } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels { display: block; height: 100%; left: 50%; margin: 0 0 0 -225px; position: absolute; top: 0; padding: 0; width: 450px; list-style: none } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels { margin: 0 0 0 -369px; width: 738px } } .virtuous-cycle .cycle-labels li { font-size: 0.75em; line-height: 1.25; padding-bottom: 0.5em } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li { position: absolute; padding-bottom: 0 } } .virtuous-cycle .cycle-labels li:nth-child(1) { color: #004976 } .virtuous-cycle .cycle-labels li:nth-child(2) { color: #004976 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(2) { left: 56%; top: 22px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(2) { left: 62% } } .virtuous-cycle .cycle-labels li:nth-child(3) { color: #004976 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(3) { left: 72%; top: 58px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(3) { top: 76px } } .virtuous-cycle .cycle-labels li:nth-child(4) { color: #004976 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(4) { left: 80%; top: 96px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(4) { top: 124px } } .virtuous-cycle .cycle-labels li:nth-child(5) { color: #D0006F } .virtuous-cycle .cycle-labels li:nth-child(6) { color: #D0006F } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(6) { left: 84%; top: 162px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(6) { top: 285px } } .virtuous-cycle .cycle-labels li:nth-child(7) { color: #D0006F } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(7) { left: 82%; top: 250px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(7) { top: 374px } } .virtuous-cycle .cycle-labels li:nth-child(8) { color: #D0006F } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(8) { left: 76%; top: 292px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(8) { left: 78%; top: 426px } } .virtuous-cycle .cycle-labels li:nth-child(9) { color: #54802D } .virtuous-cycle .cycle-labels li:nth-child(10) { color: #54802D } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(10) { left: 66%; top: 334px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(10) { left: 68%; top: 496px } } .virtuous-cycle .cycle-labels li:nth-child(11) { color: #54802D } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(11) { left: 55%; top: 356px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(11) { left: 55%; top: 530px } } .virtuous-cycle .cycle-labels li:nth-child(12) { color: #54802D } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(12) { right: 55%; text-align: right; top: 356px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(12) { top: 530px } } .virtuous-cycle .cycle-labels li:nth-child(13) { color: #54802D } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(13) { right: 66%; text-align: right; top: 320px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(13) { right: 68%; top: 496px } } .virtuous-cycle .cycle-labels li:nth-child(14) { color: #D34400 } .virtuous-cycle .cycle-labels li:nth-child(15) { color: #D34400 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(15) { right: 76%; top: 292px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(15) { right: 78%; top: 426px } } .virtuous-cycle .cycle-labels li:nth-child(16) { color: #D34400 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(16) { right: 82%; top: 250px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(16) { top: 374px } } .virtuous-cycle .cycle-labels li:nth-child(17) { color: #D34400 } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(17) { right: 84%; top: 162px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(17) { top: 285px } } .virtuous-cycle .cycle-labels li:nth-child(18) { color: #007DBB } .virtuous-cycle .cycle-labels li:nth-child(19) { color: #007DBB } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(19) { right: 80%; text-align: right; top: 96px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(19) { top: 124px } } .virtuous-cycle .cycle-labels li:nth-child(20) { color: #007DBB } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(20) { right: 72%; top: 58px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(20) { top: 76px } } .virtuous-cycle .cycle-labels li:nth-child(21) { color: #007DBB } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li:nth-child(21) { right: 56%; text-align: right; top: 22px } } @media screen and (min-width: 48em) { .virtuous-cycle .cycle-labels li:nth-child(21) { right: 62% } } .virtuous-cycle .cycle-labels li.title { list-style: none; margin-top: 20px } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li.title { display: none; visibility: hidden } } .virtuous-cycle .cycle-labels li br { display: none } @media screen and (min-width: 30em) { .virtuous-cycle .cycle-labels li br { display: inline } } .wiop__banner { margin-top: -6px !important } @media (max-width: 48em) { .wiop__banner { height: 230px; margin-bottom: 20px } } .wiop__banner .basic-crumbs { margin-top: 0 !important; padding-top: 1.5em; text-align: left; z-index: 2; position: relative } .wiop__banner .basic-crumbs li a { color: #fff !important } .wiop__banner .basic-crumbs li { color: #fff !important } .wiop .ui-autocomplete-input { padding: 2px !important } @media (max-width: 57.5em) { .wiop .ui-autocomplete-input { font-size: 0.9em !important } } @media (min-width: 57.5em) { .wiop__mobile { display: none } } .wiop__desktop { display: none } @media (min-width: 57.5em) { .wiop__desktop { display: block } } .wiop .content-start { display: none } .wiop .content-article { margin-top: 20px } .wiop__product-page__logo { border-radius: 7px; outline: none; border-color: #C0C0C0; box-shadow: 0 0 6px #C0C0C0 } .wiop__product-page__info-panel img { border: solid 1px #ccc; margin-top: 1em; width: 99px } .wiop__product-page__logo-container { text-align: center } @media (min-width: 57.5em) { .wiop__product-page__logo-container { text-align: left } } .wiop__product-page__tag-outer { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-color: #007EBB; padding: 0.5em 0 0.5em 0.5em; color: #fff; font-weight: bold; font-size: .75em; float: left; margin-right: 1em; transition: 0.3s ease } .wiop__product-page__tag-outer:hover { background-color: #004976 } .wiop__product-page__tag-inner { border-radius: 50%; width: 7px; height: 7px; background-color: #82BFDC; float: right; margin: 0.2em 0.75em 0 0.75em } .wiop__product-page__ingredient-select { float: left; margin-bottom: 1em } @media (min-width: 57.5em) { .wiop__product-page__ingredient-select { float: right } } .wiop__product-page__ingredient-select span { padding-bottom: 1em; height: 2em } .wiop__product-page__ingredients-list { font-size: 0.8em } .wiop__product-page__ingredients-list--title { font-size: 14px !important; font-weight: normal !important; line-height: 54px !important; padding-top: 0 !important; padding-bottom: 0 !important } .wiop__product-page__ingredients-list--title:before { top: auto !important } @media (min-width: 57.5em) { .wiop__product-page__ingredients-list--title { font-size: 15px !important } } .wiop__product-page__ingredients-list--subtitle { margin-bottom: .625rem } .no-js .wiop__product-page__ingredients-list--subtitle { padding: 0 !important } .wiop__product-page__ingredients-list--icon { float: none !important; margin: 0 .875em 0 .875em !important; border: none !important; width: auto !important; box-shadow: none !important } .wiop__product-page__ingredients-list--desc { margin-right: 2em; font-weight: normal; font-style: italic; display: block; color: #666 } @media (min-width: 57.5em) { .wiop__product-page__ingredients-list--desc { float: right; display: inline } } .wiop__product-page__ingredients-list dt { min-height: 54px; margin-bottom: 0 } .wiop__product-page__ingredients-list--content { border: 0 !important } .wiop__product-page__ingredients-list--content img { float: none !important; margin: 0 .75em 0 0 !important; border: none !important; width: auto !important; box-shadow: none !important } .wiop__product-page__ingredients-list--content td, .wiop__product-page__ingredients-list th { border: 0 !important; background-color: transparent !important } .wiop__product-page__ingredients-list ul { list-style-type: none; margin: 0; padding-left: 0 !important } .wiop__product-page__ingredients-list ul li { padding-bottom: .625rem } .wiop__product-page__ingredients-list a { text-decoration: underline; display: block } .no-js .wiop__product-page__ingredients-list a { display: none } .no-js .wiop__product-page__ingredients-list .white-popup-block { display: block !important; max-width: inherit; max-height: inherit; padding: 1.25rem; margin: 0 0 1.25rem 0; box-shadow: none } .wiop__hub__banner { background-image: url("../images/wiop/banner-bg3.jpg"); background-color: #000; text-align: center; position: relative; z-index: 1; margin-bottom: 2em; background-position: 50% 50%; background-size: cover } .wiop__hub__banner--header { padding: 3.5em 0; position: relative; z-index: 3; display: block; text-transform: uppercase; letter-spacing: normal } .wiop__hub__banner--header:before { content: ""; display: block; z-index: -1; background: rgba(0, 0, 0, 0.4); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.48) 10%, rgba(0, 0, 0, 0.5) 45%, transparent 64%); height: 50%; width: 100%; position: absolute; top: 25%; left: 0px; right: 0 } @media (min-width: 48em) { .wiop__hub__banner--header { padding: 5.5em 0 } } @media (min-width: 57.5em) { .wiop__hub__banner--header { padding: 7.5em 0 } } .wiop__hub__banner--header h1 { font-size: 2em; font-family: 'unilever_illustrative_betaRg', Arial, sans-serif; color: #fff; letter-spacing: normal } @media (min-width: 48em) { .wiop__hub__banner--header h1 { font-size: 2.4em } } @media (min-width: 57.5em) { .wiop__hub__banner--header h1 { font-size: 2.8em } } .wiop__hub__banner--header--span { color: #fff; font-size: 1.2em; letter-spacing: normal; font-family: "DINWebPro-Bold", "Arial", "Helvetica", sans-serif } @media (min-width: 48em) { .wiop__hub__banner--header--span { font-size: 1.6em } } @media (min-width: 48em) { .wiop__hub__banner--header--span:hover:after { width: 20em } } .wiop__hub__banner--header--span:after { background: #FFF; content: ""; display: block; height: 1px; margin-left: auto; margin-right: auto; margin-top: 0.4em; margin-bottom: 1em; background: #ccc; line-height: 0; width: 5em; transition: width 0.3s ease } .wiop__hub__banner--selects { position: relative; z-index: 3 } .wiop__hub__banner--selects select { background-color: rgba(0, 0, 0, 0.75); color: #fff; font-size: 1.2em; height: 60px; margin-top: 1em; width: 70% !important } @media (min-width: 48em) { .wiop__hub__banner--selects select { margin-top: 0em; width: 300px !important } } .wiop__hub__banner--selects select:disabled { border: none; color: #ccc } .wiop__hub__banner--selects select:focus { border: 1px solid #ccc; outline: none } .wiop__hub__banner--selects button { border: 0; height: 60px; margin-top: 1em; background-color: #007dbb; box-shadow: none; transition: all 0.3s ease } @media (min-width: 48em) { .wiop__hub__banner--selects button { margin-top: 0 } } .wiop__hub__banner--selects button:hover { background-color: #004976 } .wiop__hub__banner--selects button:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; display: inline; line-height: 1; text-align: center; margin-left: 0.7em; font-size: 0.8em } .wiop__hub__banner--selects button:disabled { background-color: #999; opacity: 1; border: none } .wiop__hub__banner .basic-crumbs { margin-top: 0 !important; padding-top: 1.5em; text-align: left; z-index: 3; position: relative } .wiop__hub__banner .basic-crumbs li a { color: #fff !important } .wiop__hub__banner .basic-crumbs li { color: #fff !important } .wiop__hub__banner:after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 30%); content: ""; display: block; filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000', GradientType=0); height: 101%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .wiop__search__input-wrapper select { display: none } .wiop__search__input-wrapper input { display: inline-block; text-indent: 10px; height: 60px; font-size: 1.2em; width: 65%; margin-right: 10px } @media (min-width: 30em) { .wiop__search__input-wrapper input { width: 75% } } @media (min-width: 48em) { .wiop__search__input-wrapper input { width: 550px } } .wiop__search__input-wrapper input::-webkit-input-placeholder { font-size: 0.8em } .wiop__search__input-wrapper input:-moz-placeholder { font-size: 0.8em } .wiop__search__input-wrapper input::-moz-placeholder { font-size: 0.8em } .wiop__search__input-wrapper input:-ms-input-placeholder { font-size: 0.8em } .wiop__search__input-wrapper button { background-color: #007dbb; border: 0; display: inline-block; height: 60px; margin-top: 1em; box-shadow: none; transition: all 0.3s ease } .wiop__search__input-wrapper button:hover { background-color: #004976 } .wiop__search__input-wrapper button span:before { content: "\e00d"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: inline; line-height: 1; text-align: center } .wiop__search__input-wrapper--grey { color: #999 } .wiop__search__input-wrapper--grey a { text-decoration: underline; color: #999 } .wiop__search__input-wrapper--count { font-size: 1em; margin-top: 10px } .wiop__search__results__pagination { margin-top: 1em } .wiop__search__results__brand { margin-top: 30px } .wiop__search__results__brand--wrap { background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 6px; position: relative } .wiop__search__results__brand--wrap h1 { font-size: 1.4em } .wiop__search__results__brand--gray { color: #999 } .wiop__search__results__brand--viewmore { text-align: right; position: absolute; right: 0; bottom: 0; padding-bottom: 1em } .wiop__search__results__brand--viewmore a { font-size: 0.8em } .wiop__search__results__brand--viewmore a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding: 0 6px 0 0; top: -2px; position: relative; display: inline-block; font-size: 0.6em } .wiop__search__results__brand--link { padding-top: 1em; text-align: center; font-size: 0.8em } .wiop__search__results__brand--link a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding: 0 6px 0 0; top: -2px; position: relative; display: inline-block; font-size: 0.6em } .wiop__search__results__product { margin-top: 30px } .wiop__search__results__product h2 { font-size: 1.2em } .wiop__search__results__product p { font-size: 0.8em } .wiop__search__results__product p:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding: 0 6px 0 0; top: -2px; position: relative; display: inline-block; font-size: 0.6em } .wiop__ingredients__alpha { width: 44px; height: 44px; background-color: #ccc; margin-right: 10px; margin-bottom: 10px; float: left; text-align: center; line-height: 44px; color: #666; font-weight: bold; font-size: 1.2em } .wiop__ingredients__alpha--active { background-color: #007dbb; color: #fff; cursor: pointer; transition: all 0.3s ease } .wiop__ingredients__alpha--active:hover { background-color: #004976 } .wiop__ingredients__alpha--container { margin: 1em 0 2em 0 } .wiop__ingredients__glossary__header { background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 6px; position: relative; margin-bottom: 1em; margin-top: 1em; clear: both } .wiop__ingredients__glossary__header a { font-size: 0.9em; line-height: 50px } .wiop__ingredients__glossary__header a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e01f"; padding: 0 6px 0 0; top: -2px; position: relative; display: inline-block; font-size: 0.6em } .wiop__ingredients__glossary__item { margin-bottom: 1.75em; padding: 0 0.75em 0 0.75em; font-size: 0.9em } .wiop__ingredients__glossary__item span { font-size: 0.8em } .wiop__brand__item--image:hover { cursor: pointer } @media (min-width: 57.5em) { .wiop__brand__item--image { padding-left: 2em } } .wiop__brand__item--image img { width: 100%; max-width: 198px } @media (min-width: 57.5em) { .wiop__brand__item--desc { padding-top: 2em } } .wiop__brand__item--desc a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding: 0 6px 0 0; top: -2px; position: relative; display: inline-block; font-size: 0.6em } .wiop__brand__item--desc h2 { margin-bottom: 0; padding-bottom: 0 } .wiop__brand__item--desc p { margin-top: 0 } .wiop__allergen__help { clear: both; margin-top: 30px; color: #999 } .wiop__allergen__help .section-container.accordion h3 { padding-top: 0; padding-bottom: 0 } .wiop__allergen__help-text { text-align: center; font-size: 1.2em !important; line-height: 1em; font-family: "DINWebPro-Bold", "Arial", "Helvetica", sans-serif } .wiop__language-modal--row { margin-left: 0; padding-left: 0; margin-bottom: 1em } .wiop__language-modal--submit { margin-top: 2em } .wiop__language-modal--submit a:before { font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; font-size: 0.75em; transition: all 0.3s ease; margin-right: 0.5em } .wiop .multi-grid { clear: both } .wiop .multi-grid .wiop__search__results__brand .item { margin-bottom: 1em } .wiop .multi-grid .image-mask { margin: 0 0 10px; padding: 0 0 56% 0; position: relative; overflow: hidden } .wiop .multi-grid .image-mask img { margin: 0 !important; position: absolute; width: 100% } .wiop .multi-grid .item .inner { background: #eee; border-radius: 5px; overflow: hidden; padding: 15px; position: relative; transition: background 0.4s ease; transition: padding 1ms ease } .wiop .multi-grid .item .inner .linklist { margin-bottom: 0; background: #eeeeee } .wiop .multi-grid .item .inner .linklist ul li:last-child { border-bottom: none } .wiop .multi-grid .item .inner .category { display: block; font-family: 'DINWebPro-Light', Arial, sans-serif; font-size: .8125em; position: absolute; right: 10px; text-transform: uppercase; top: 0; z-index: 1 } .wiop .multi-grid .item .inner .category a { background: #007dbb; border-radius: 0 0 5px 5px; color: #FFFFFF; display: block; padding: 7px 5px 3px; transition: all 0.4s ease; -webkit-transform: translate3d(0, 0, 0) } .wiop .multi-grid .item .inner .category a:hover { background-color: #004976; padding-top: 12px } @media print { .wiop .multi-grid .item .inner .category a { padding-top: 15px } } .wiop .multi-grid .item > div time { display: block; font-size: 0.8em; margin: 0 0 8px; color: #999 } .wiop .multi-grid .item > div h3 { transition: all 0.4s ease } .wiop .multi-grid .item > div h3 strong { font-family: 'DINWebPro-Bold', Arial, sans-serif; font-weight: normal; display: block } .wiop .multi-grid .item > div img { margin: 5px 0 10px; height: auto } .wiop .multi-grid .item > div img.logo { margin: 0 } .wiop .multi-grid.brand-logos { margin-top: 30px; margin-bottom: 30px } .wiop .multi-grid.brand-logos .item .inner { background: #eee; border-radius: 5px; color: #fff; cursor: pointer; overflow: hidden; padding: 5% 5% 95% 5%; transition: background 0.4s ease } .wiop .multi-grid.brand-logos .item .inner img { display: block; position: absolute; width: 90% } @media print { .wiop .multi-grid.brand-logos .item .inner { border: 1px solid #000 } } .wiop .multi-grid.brand-logos .item .inner:hover { background-color: #ccc } @media (max-width: 48em) { .wiop .multi-grid.brand-logos { margin-left: 0; margin-right: 0 } } .wiop #grid .wiop__search__results__product { margin-bottom: 0 !important } .wiop .text-filter { height: 28px } .wiop .wiop-filters .ui-autocomplete { background: #f7f7f7; max-height: 160px; font-family: "Arial", "Helvetica", sans-serif; border: 1px solid #ccc; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1) } .wiop .wiop-filters .ui-state-focus { border: none; background: none; margin: 0; background-color: #eee } .wiop .wiop-filters .ui-autocomplete::-webkit-scrollbar { width: 16px } .wiop .wiop-filters .ui-autocomplete::-webkit-scrollbar-button { display: none } .wiop .wiop-filters .ui-autocomplete::-webkit-scrollbar-track { background-color: #ccc } .wiop .wiop-filters .ui-autocomplete::-webkit-scrollbar-thumb { background-color: gray } .wiop .wiop-filters .ui-menu-item { border-top: none !important; color: #333; font-size: .9375em; padding: 7px 10px } .wiop .wiop-filters .ui-menu-item span { font-style: italic; color: #333 } #allergen-grid { display: none } #allergen-grid p:first-child { margin-bottom: 0; margin-top: 20px } ul.compass-strategy-graph { height: 264px; padding: 0; position: relative; margin: 0 auto 50px; width: 290px } @media screen and (min-width: 48em) { ul.compass-strategy-graph { float: left; height: 434px; margin: 0 20px 40px 0; width: 474px } } ul.compass-strategy-graph:before, ul.compass-strategy-graph:after { background-color: #D1D2D3 !important; bottom: 0; display: block; content: ""; left: 0; position: absolute; z-index: 1 } ul.compass-strategy-graph:before { height: 151px; width: 7px } @media screen and (min-width: 48em) { ul.compass-strategy-graph:before { height: 303px } } ul.compass-strategy-graph:after { height: 7px; width: 151px } @media screen and (min-width: 48em) { ul.compass-strategy-graph:after { width: 303px } } ul.compass-strategy-graph > li { background-repeat: no-repeat !important; background-size: cover !important; bottom: 0; left: 0; list-style: none; margin: 0; padding: 0; position: absolute } ul.compass-strategy-graph > li span { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; border-radius: 50%; color: #FFF; display: block; font-size: .75rem; height: 106px; line-height: 1.25; padding: 42px 0 0; position: absolute; text-align: center; text-transform: uppercase; width: 106px } .font--arial ul.compass-strategy-graph > li span { font-family: Arial, Helvetica, sans-serif } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li span { height: 122px; padding: 50px 0 0; width: 122px } } ul.compass-strategy-graph > li.arrow-red { background-image: url("../images/arrow-red.png") !important; height: 151px; width: 97px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-red { height: 303px; width: 195px } } ul.compass-strategy-graph > li.arrow-red span { background-color: #D11846; right: -40px; top: -112px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-red span { right: -30px; top: -130px } } ul.compass-strategy-graph > li.arrow-blue { background-image: url("../images/arrow-blue.png") !important; height: 116px; width: 153px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-blue { height: 233px; width: 307px } } ul.compass-strategy-graph > li.arrow-blue span { background-color: #007dbb; right: -92px; top: -92px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-blue span { right: -105px; top: -105px } } ul.compass-strategy-graph > li.arrow-green { background-image: url("../images/arrow-green.png") !important; height: 47px; width: 174px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-green { height: 94px; width: 349px } } ul.compass-strategy-graph > li.arrow-green span { background-color: #54802d; padding: 32px 0 0; right: -110px; top: -20px } @media screen and (min-width: 48em) { ul.compass-strategy-graph > li.arrow-green span { padding: 40px 0 0; right: -124px; top: 0px } } @media (min-width: 57.5em) { .js .matrix__mobile { display: none } } .matrix__jq_modal_list { padding: 0 !important } .matrix__mobile .matrix__modal__filter-header { margin-top: 1em } .matrix__desktop { display: none } @media (min-width: 57.5em) { .matrix__desktop { display: block } } .matrix__desktop--frame { width: 650px; height: 481px; background-image: url("../images/matrix/matrixBackground.png"); position: relative } .matrix__heading { background-color: #333; color: #fff; display: block; margin: 0 0 .125em 0; padding: .25em; text-align: center; padding: 0.75em 0 0.75em 0; cursor: pointer; cursor: hand } .matrix__heading--blue { background-color: #007dbb } .matrix__heading--green { background-color: #54802d } .matrix__heading--pink { background-color: #d0006f } .matrix__heading--purple { background-color: #8A1B60 } .matrix__heading--orange { background-color: #D34400 } .matrix__heading--blue--font { color: #007dbb } .matrix__heading--green--font { color: #54802d } .matrix__heading--pink--font { color: #d0006f } .matrix__heading--purple--font { color: #8A1B60 } .matrix__heading--orange--font { color: #D34400 } .matrix__heading--gray--font { color: #666666 } .matrix__heading--moderate { background-color: #F7F7F7; color: #000; text-transform: uppercase; padding: 1em 0 } .matrix__heading--high { background-color: #EEEEEE; color: #000; text-transform: uppercase; padding: 1em 0 } .matrix__heading--very-high { background-color: #E4E4E4; color: #000; text-transform: uppercase; padding: 1em 0 } .matrix__pin-container { position: relative; width: auto; padding: 0 10px 0 10px } .matrix__pin-container:hover, .matrix__pin-container:active, .matrix__pin-container:focus { background: white; z-index: 1000; box-shadow: 2px 2px 1px #A9A9A9; border-radius: 10px; cursor: pointer } .matrix__pin-container--active { background: white; z-index: 10000; box-shadow: 2px 2px 1px #A9A9A9; border-radius: 10px } .matrix__pin-container--text-left .matrix__pin { right: 3px; left: auto } .matrix__pin-container--text-left .matrix__pin--title { padding-right: 10px; padding-left: 0; text-align: right } .matrix__pin { background-color: #333; border-radius: 999px; color: #fff; display: inline-block; font-size: .5625em; font-weight: normal; height: 10px; width: 10px; line-height: 16px; margin: 0 2px 0 0; overflow: hidden; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; z-index: 1000; position: absolute; left: 3px; right: auto; top: 5px } .matrix__pin:hover, .matrix__pin:active, .matrix__pin:focus { z-index: 1000 } .matrix__pin--full-text { margin-left: 0.5em; color: #007dbb; font-size: 1.1em; letter-spacing: 0; width: 10.625em; display: inline-block; vertical-align: middle } .matrix__pin--icon { font-size: 0.9em; float: right; line-height: 2.8em; color: #007dbb; margin-right: 1.25em } .matrix__pin--blue { background-color: #007dbb } .matrix__pin--green { background-color: #54802d } .matrix__pin--pink { background-color: #d0006f } .matrix__pin--purple { background-color: #8A1B60 } .matrix__pin--orange { background-color: #D34400 } .matrix__pin--large { font-size: .6875em; height: 14px; line-height: 36px; width: 14px; letter-spacing: 0; margin: 14px 0 } .matrix__pin--fade { -webkit-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25 } .matrix__pin--fade + div.matrix__pin--title { -webkit-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25 } .matrix__pin--title { min-height: 20px; line-height: 16px; z-index: 999; white-space: nowrap; font-size: .75em; color: #666666; position: relative; width: 100%; padding-left: 10px; padding-top: 2px; font-weight: bold } .matrix__pin--title.hovered:focus { outline: none } .matrix__pin--show { display: block; z-index: 1001 } .matrix__pin--zindex { z-index: 1002 !important } .matrix__pin:hover + div, .matrix--static-pin + div { display: block } .matrix__pin:hover { z-index: 1002 } .matrix__pin:hover + div { z-index: 1001 } .matrix--static-pin { z-index: 1000 } .matrix__focus-list { margin: 0; list-style-type: none; padding-left: 0 !important } .matrix__focus-list__filter-text { margin-top: 1em } .matrix__topic-list { margin: 0; list-style-type: none } .matrix__topic-list > li { border-top: solid 1px #ddd; padding: 5px 0 0 0 } .matrix__topic-list > li:first-child { border-top: none } .matrix__topic-list-sub-heading { margin-top: 0.2em; text-transform: none; font-family: "Arial", "Helvetica", sans-serif; font-size: 0.9em; cursor: pointer; cursor: hand } .matrix__topic-list-sub-heading .matrix__pin { position: relative; top: 0 } .matrix__topic-list-sub-heading span { margin-right: 0.5em } .matrix__item-list { margin: 0; list-style-type: none; padding-left: 0.5em !important } .matrix__item-list li { font-size: 0.8em; margin-bottom: 0.7em } .matrix__item-list-header { color: #666666; padding: 5px; margin-top: 0; background: #eee url("../images/hr.png") center top no-repeat; background-size: 100% 6px } .matrix__item-list-header h5 { margin-top: 1em; font-size: 1.1em; padding-left: 0.5em } .matrix__modal { max-width: 62.5em; max-height: 40em; padding-left: 0 } .matrix__modal__header { margin-left: 0.8em; font-size: 1.5em; margin-bottom: .625em; margin-top: .5em } .matrix__modal__sub-header { font-size: 1.3em } .matrix__modal__topic-select { font-weight: bold; padding: 0 .375em; max-height: 22px } .matrix__modal__view-graph { background-image: url("../images/matrix/matrixBackground.png"); position: relative; height: 481px; width: 650px } .matrix__modal__filter-text { font-size: 0.9em; margin: 0.8em 0 0 0; padding: 0 1.6em 0 1em; line-height: 1.6em } .matrix__modal__menu { height: 447px; width: 298px; border-right: solid 1px #EEE; border-top: solid 1px #EEE; border-bottom: solid 1px #EEE; padding: 0; float: left !important; overflow: hidden } .matrix__modal__filter-box { border-bottom: solid 1px #CCCCCC; padding: 1em } .matrix__modal__topic-list { padding: 1em } .matrix__modal__focus-heading { font-size: 0.9em } .matrix__modal__download-link { font-size: 0.9em; margin-top: 1.375em } .matrix__modal__download-link span { font-size: 0.8em; margin-right: .6875em } .matrix__modal__filter-header { margin-top: 0; font-size: 1.3em } .matrix__modal__filter-header span { font-family: 'DINWebPro-Light', Arial, sans-serif; color: #666 } .matrix__modal__go-back { margin: 1em 0 1em 0; font-weight: bold; font-size: 0.9em; color: #43A0CB } .matrix__modal .mfp-close { color: #007dbb } .matrix__modal .matrix__heading { font-size: 1.1em } .matrix__modal .matrix__jq_modal_list { overflow-x: hidden; overflow-y: scroll; max-height: 250px } .jq_pin.active .matrix__pin--icon::before { content: "\e01f" } .nutrition-modal { max-width: 62.5em; max-height: 40em } .nutrition-splash { display: block } .nutrition-infograph { width: 100%; background: #0060aa; color: white; padding: 0.5em 0.25em; border-radius: 10px; text-align: center; margin-bottom: 0.5em } .nutrition-infograph__image { margin: 0; width: 90%; float: none } .nutrition-infograph__item-label { width: 100% } .nutrition-infograph__headline, .nutrition-infograph__sub-header { font-family: "unilever_illustrative_betaRg", "Arial", "Helvetica", sans-serif; color: white; margin-bottom: 0; line-height: 1em } .nutrition-infograph__headline { font-size: 2em } .nutrition-infograph__sub-header { font-size: 1.2em } .nutrition-infograph__items { width: 100%; margin: 1em 0 0; padding-left: 0 } .nutrition-infograph__item { display: inline-block; vertical-align: top; width: 12%; padding: 0.25em } @media (max-width: 60em) { .nutrition-infograph__item { width: 30%; margin-bottom: 1em } } @media (max-width: 30em) { .nutrition-infograph__item { width: 40% } } .nutrition-infograph__item--details { width: 4% } @media (max-width: 30em) { .nutrition-infograph__item--details { display: none } } .nutrition-matrix { background: #eee; display: none } .nutrition-matrix__data { width: 36.2em; display: inline-block; vertical-align: top; border: 1px solid #ccc; border-right: none; height: 27.9em } .nutrition-matrix__graphic { color: white; font-weight: 300; width: 22.5em; display: inline-block; vertical-align: top; background: url(../images/vr-left.png) left top no-repeat #00a9e0; background-size: 6px 100% } .nutrition-matrix__explore-buttons { width: 100%; text-align: left; margin-bottom: 1.5em } .nutrition-matrix__explore-button { border: none; color: white; width: 32.3%; margin-right: 1%; padding: 1em; position: relative; display: inline-block; font-weight: bold } .nutrition-matrix__explore-button--products { background: #008566 } .nutrition-matrix__explore-button--diets { background: #8A1B61 } .nutrition-matrix__explore-button--lives { background: #d34400 } @media (max-width: 57.5em) { .nutrition-matrix__explore-button { width: 100% } } .nutrition-matrix__explore-button:hover { color: white } .nutrition-matrix__explore-icon { position: absolute; right: 1em } .nutrition-matrix__copy { padding: 1em } .nutrition-matrix__copy--map { padding: 0.5em 1em; height: 13.3em } .nutrition-matrix__map { padding: 1em; position: relative } .nutrition-matrix__tab-header { width: 100% } .nutrition-matrix__link { font-weight: bold; cursor: pointer; color: #007dbb; font-size: 0.9em; line-height: 0; position: inherit } .nutrition-matrix__icon { margin-right: 1em } .nutrition-matrix__options { padding: 1em 1em 0 } .nutrition-matrix__options-item { display: inline-block } .nutrition-matrix__options-item--tag { margin-right: 1em } .nutrition-matrix__selection { width: 100%; background: #008566; margin: 0 auto; border-bottom: 1px solid white; color: white; padding: 1em; text-align: left; cursor: pointer; position: relative } .nutrition-matrix__selection-icon { position: absolute; right: 1em } .nutrition-matrix__tab-item:hover { color: #666 } .nutrition-matrix__tab-item { width: 33.3%; display: inline-block; text-align: center; padding: 10px; border-right: 1px solid #ccc; color: #989898; box-shadow: inset 0 -6px 6px -6px #989898; cursor: pointer; font-family: 'DINWebPro-Medium', Arial, sans-serif; transition: 0.2s ease } .nutrition-matrix__tab-item--products { border-top: 5px solid #008566 } .nutrition-matrix__tab-item--products.nutrition-matrix__tab-item--active { color: #008566 } .nutrition-matrix__tab-item--diets { border-top: 5px solid #8A1B61 } .nutrition-matrix__tab-item--diets.nutrition-matrix__tab-item--active { color: #8A1B61 } .nutrition-matrix__tab-item--lives { border-top: 5px solid #d34400; border-right: none } .nutrition-matrix__tab-item--lives.nutrition-matrix__tab-item--active { color: #d34400 } .nutrition-matrix__tab-item--active { background: white; box-shadow: none } .nutrition-matrix__tab-content { display: none; background: white; height: 19.1em; overflow-y: scroll } .nutrition-matrix__tab-content--products { overflow-y: hidden } .nutrition-matrix__tab-content--active { display: block } .nutrition-matrix__dropdown-back { width: 100%; padding: 1em; background: #008566; color: white; cursor: pointer; display: none } .nutrition-matrix__regions { overflow-y: scroll; height: 16em } .nutrition-matrix__dropdown-title { width: 100%; border-bottom: 1px solid #ccc; padding: 1em; color: #008566; position: relative; cursor: pointer } .nutrition-matrix__dropdown-title--diets { color: #8A1B61 } .nutrition-matrix__dropdown-title--lives { color: #d34400 } .nutrition-matrix__dropdown-icon { color: #007dbb; position: absolute; right: 1em; font-size: 0.75em; line-height: 1.6em } .nutrition-matrix__dropdown-container { display: none; background: #eee; padding: 1em; box-shadow: inset 1px 4px 9px -6px #989898 } .nutrition-matrix__dropdown-headline { font-weight: 700; color: #008566 } .nutrition-matrix__dropdown-headline--diets { color: #8A1B61 } .nutrition-matrix__dropdown-headline--lives { color: #d34400 } .nutrition-matrix__topic-headline { background: #d34400; padding: 1em; margin: 0; color: white } .nutrition-matrix__dropdown-item { margin-bottom: 1em } .nutrition-matrix__dropdown-image { display: inline-block; width: 16%; margin-right: 2%; vertical-align: top } .nutrition-matrix__dropdown-text { display: inline-block; width: 82%; vertical-align: top } .nutrition-matrix__topic-text { margin: 0; font-weight: bold } .nutrition-matrix__map { transition: 0.3s ease; -webkit-transform: translate(0, 0) scale(1.1); transform: translate(0, 0) scale(1.1) } .nutrition-matrix__map-overflow { padding: 1em; overflow: hidden } .nutrition-matrix__pin { width: 5px; height: 5px; background: #989898; position: absolute; display: block; border-radius: 50%; display: none } .nutrition-matrix__pin--products { background: #008566; z-index: 4 } .nutrition-matrix__pin--diets { background: #8A1B61; z-index: 4 } .nutrition-matrix__pin--lives { background: #d34400; z-index: 4 } .nutrition-matrix__pin--australia { left: 83%; top: 68% } .nutrition-matrix__pin--brazil { left: 35%; top: 67% } .nutrition-matrix__pin--belgium { left: 49.5%; top: 31% } .nutrition-matrix__pin--canada { left: 18%; top: 28% } .nutrition-matrix__pin--finland { left: 54%; top: 22% } .nutrition-matrix__pin--germany { left: 50%; top: 32% } .nutrition-matrix__pin--greece { left: 53.5%; top: 37.5% } .nutrition-matrix__pin--ireland { left: 45.7%; top: 30.6% } .nutrition-matrix__pin--israel { left: 56%; top: 42% } .nutrition-matrix__pin--kenya { top: 65%; left: 58% } .nutrition-matrix__pin--netherlands { top: 29.5%; left: 49.5% } .nutrition-matrix__pin--nigeria { top: 54%; left: 48% } .nutrition-matrix__pin--spain { top: 36.7%; left: 47% } .nutrition-matrix__pin--poland { top: 29.5%; left: 52% } .nutrition-matrix__pin--portugal { top: 38%; left: 46% } .nutrition-matrix__pin--south-africa { top: 73%; left: 55% } .nutrition-matrix__pin--sweden { top: 23%; left: 51% } .nutrition-matrix__pin--tanzania { top: 61%; left: 58% } .nutrition-matrix__pin--thailand { top: 48%; left: 74% } .nutrition-matrix__pin--uk { top: 31%; left: 47.2% } .nutrition-matrix__pin--uganda { top: 54%; left: 57% } .nutrition-matrix__pin--vietnam { top: 50%; left: 76% } .nutrition-matrix__pin--indonesia { top: 56%; left: 79% } .nutrition-matrix__pin--france { top: 33%; left: 48.2% } .nutrition-matrix__pin--colombia { top: 57%; left: 30% } .nutrition-matrix__pin--usa { top: 38%; left: 20% } .nutrition-matrix__pin--italy { top: 37%; left: 51.3% } .nutrition-matrix__pin--china { top: 40%; left: 74% } .nutrition-matrix__pin--switzerland { top: 34%; left: 49.8% } .nutrition-matrix__pin--philippines { top: 47%; left: 79% } .nutrition-matrix__pin--mexico { top: 47%; left: 21% } .nutrition-matrix__pin--saudi-arabia { top: 45%; left: 59% } .nutrition-matrix__pin--turkey { top: 37%; left: 56% } .nutrition-matrix__pin--lebanon { top: 41%; left: 57% } .nutrition-matrix__pin--india { top: 48%; left: 68% } .nutrition-matrix__pin--pakistan { top: 46%; left: 67% } .nutrition-matrix__pin--sri-lanka { top: 53%; left: 69% } .nutrition-matrix__pin--japan { top: 32%; left: 84% } .nutrition-matrix__pin--korea { top: 37%; left: 80.5% } .nutrition-matrix__pin--czech-republic { top: 31%; left: 52% } .nutrition-matrix__pin--hungary { top: 33%; left: 53% } .nutrition-matrix__pin--austria { top: 34%; left: 52% } .nutrition-matrix__pin--argentina { top: 82%; left: 32% } .nutrition-matrix__pin--bolivia { top: 71%; left: 32% } .nutrition-matrix__pin--uruguay { top: 78%; left: 34% } .nutrition-matrix__pin--paraguay { top: 74%; left: 33% } .nutrition-matrix__pin--chile { top: 73.5%; left: 31% } .nutrition-matrix__pin--trinidad-tobago { top: 55%; left: 34% } .nutrition-matrix__pin--guatamala { top: 52%; left: 24% } .nutrition-matrix__pin--el-salvador { top: 53%; left: 25% } .nutrition-matrix__pin--panama { top: 55%; left: 27% } .nutrition-matrix__pin--new-zealand { left: 93%; top: 74% } .nutrition-matrix__pin--singapore { top: 54%; left: 74.5% } @media (max-width: 67.5em) { .nutrition-matrix__data { width: 100%; border: 1px solid #ccc } .nutrition-matrix__graphic { display: none } } .nutrition-matrix__title-open .nutrition-matrix__dropdown-icon::before { content: "\e01f" } @media (min-width: 93.75em) { html body .nutrition-modal p { font-size: 15px } } @media (min-width: 93.75em) { html body .nutrition-modal h3 { font-size: 1.625em } } html body .nutrition-matrix__tab-header { padding-left: 0; margin-bottom: 0 } html body .mfp-close-btn-in .mfp-close { color: #007dbb } html body .nutrition-matrix__tab-item p { margin-bottom: 0 } @media (max-width: 37.5em) { html body .nutrition-matrix__tab-item p { max-width: 5em; margin: 0 auto } } html body .white-popup-block li { font-size: 15px } html body .white-popup-block .nutrition-infograph ul.nutrition-infograph__items { padding-left: 0px } html body .white-popup-block .nutrition-infograph .nutrition-infograph__item p, html body .white-popup-block .nutrition-infograph p.nutrition-infograph__item-label { font-size: 0.75em; font-weight: 300; margin: 0 } html body .white-popup-block .nutrition-infograph p.nutrition-infograph__item-label--target { margin-bottom: 1em } html body .white-popup-block .nutrition-infograph p.nutrition-infograph__item-headline { font-size: 1em; font-weight: bold } html body .white-popup-block .nutrition-infograph p.nutrition-infograph__item-subline, html body .white-popup-block .nutrition-infograph p.nutrition-infograph__item-label { font-weight: bold } html body .white-popup-block .nutrition-infograph img { width: 80%; margin: 0; float: none } html body .nutrition-teaser { width: 50%; float: right; text-align: center; margin-bottom: 1em; margin-top: 22px; margin-left: 1em } @media (max-width: 57.5em) { html body .nutrition-teaser { width: 100% } } html body .nutrition-teaser img { width: 100% } body .buorg { background: #d34400; border-bottom: 0; color: #FFF; cursor: pointer; font-size: .75rem; width: 100% } body .buorg a { color: #FFF; text-decoration: underline } body .buorg a:hover { text-decoration: none } body .buorg div { padding: 10px 24px 10px 10px } body .buorg #buorgclose { font-size: 1.125rem; font-weight: bold; height: 20px; padding: 0; position: absolute; right: 6px; top: 6px; width: 12px } @media print { #content-wrap > .row > .large-3 { display: none } #content-wrap > .row > .large-9 { width: 100% } iframe { page-break-inside: avoid } } @media (min-width: 48em) { #slp-charts #chart { min-height: 900px } } #slp-charts #navigation .linklist { margin-bottom: 0 } #slp-charts #navigation h2 { background: url(../images/hr_down.png) center 0 no-repeat; background-size: 100% 5px; padding: 22px 0 12px; margin-top: 10px; position: relative; padding-right: 60px } #slp-charts #navigation h2 span { position: absolute; top: 5px; right: 0; color: #fff; font-family: arial, helvetica, sans-serif; font-weight: bold; background-color: #999; letter-spacing: normal; font-size: 12px; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; padding: 5px } #slp-charts #navigation h3 { color: #666; text-transform: none; font-family: arial, helvetica, sans-serif; font-size: 15px; font-weight: bold; padding-top: 20px } #slp-charts #navigation h4 { position: relative; text-transform: none; font-size: 1em; margin: 0; font-family: arial; font-size: 1em; letter-spacing: normal } #slp-charts #navigation h4 a { padding: 0.9em 2.4em 0.8em 1.8em !important; display: block; position: relative; overflow: hidden; line-height: 1.4; color: #007dbb; box-shadow: 0 6px 6px -9px transparent; transition: all 0.3s ease } #slp-charts #navigation h4 a:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; position: absolute; content: "\e021"; left: 1em; top: 1.55em; font-size: 0.75em; transition: all 0.3s ease } #slp-charts #navigation h4 a:hover { background: #fafafa; box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.5); color: #004976 } #slp-charts #navigation h4 a:hover:before { margin-left: -0.2em } #slp-charts .ct-donut { margin-left: auto; margin-right: auto } @media (min-width: 60em) { #slp-charts .ct-donut { width: 40% } } #slp-charts .in-page ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px } #slp-charts .in-page ul li { display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 32%; flex-basis: 32% } #slp-charts .in-page ul li a { width: 100% } #slp-charts .title { background: url(../images/hr_down.png) center 0 no-repeat; background-size: 100% 5px; padding: 22px 0 12px; margin-top: 10px; position: relative; padding-right: 60px; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; text-transform: none; color: #007dbb } #slp-charts .title span { position: absolute; top: 5px; right: 0; color: #fff; font-family: arial, helvetica, sans-serif; font-weight: bold; background-color: #999; letter-spacing: normal; font-size: 12px; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; padding: 5px } .chart-footnotes { color: #999; font-size: .75em } @media (min-width: 93.75em) { .chart-footnotes { font-size: .8125em } } @media (max-width: 48em) { .chart-footnotes { font-size: .6875em } } .chart-footnotes p { margin-bottom: 0 } .chart-footnotes li { font-size: inherit; list-style: none; margin-bottom: 10px } .shadow { height: 5px } .shadow--up { background: url(../images/hr_down.png) center bottom no-repeat; background-size: 100% 100% } .shadow--down { background: url("../images/hr.png") center top no-repeat; background-size: 100% 100% } .three-x-nine .columns { float: left !important } .three-x-nine__module-container { position: relative; background: #EEEEEE; background: radial-gradient(circle, #fff 0%, #eee 100%) } .three-x-nine__tiles-container { padding-bottom: 190px } @media (min-width: 30em) { .three-x-nine__tiles-container { padding-bottom: 125px } } @media (min-width: 48em) { .three-x-nine__tiles-container { padding-bottom: 87.5px } } .three-x-nine__tiles-container.open { padding-bottom: 150px } .three-x-nine__module-heading > p { padding-bottom: 30px; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; letter-spacing: -0.025em; margin: 0; font-size: 1.625em } .font--arial .three-x-nine__module-heading > p { font-family: Arial, Helvetica, sans-serif } .three-x-nine.wellbeing .three-x-nine__container:nth-child(2) { margin-left: -45px } .three-x-nine.wellbeing .three-x-nine__container:nth-child(3) { margin-left: -77px } .three-x-nine.environment .three-x-nine__container:nth-child(1) { margin-right: -45px; margin-left: 45px } .three-x-nine.environment .three-x-nine__container:nth-child(3) { margin-left: -45px } .three-x-nine.environment .three-x-nine__container.active.offset { margin-left: -32%; transition-delay: 0s } .three-x-nine.livelihoods .three-x-nine__container:nth-child(1) { margin-right: -77px; margin-left: 122px } .three-x-nine.livelihoods .three-x-nine__container:nth-child(2) { margin-right: -45px } .three-x-nine.livelihoods .three-x-nine__container.active.offset { margin-left: -64%; transition-delay: 0s } .three-x-nine__container { position: relative; overflow: visible; z-index: 0; margin-left: 0; -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease; -ms-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-property: all; transition-duration: .4s; transition-timing-function: ease; transition-delay: .7s } @media (max-width: 1024px) { .three-x-nine__container { width: 100%; margin-bottom: 30px } } .three-x-nine__container.active { margin-left: 0; transition-delay: 0s; -webkit-transform: scale(1.025, 1.025); transform: scale(1.025, 1.025) } .three-x-nine__container.inactive { transition-delay: .4s; -webkit-transform: scale(.82, .82); transform: scale(.82, .82) } .three-x-nine__container.lowerIndex { z-index: 2 } .three-x-nine__tile { padding: 30px 0; border-radius: 10px; position: relative; z-index: 1; -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in } @media (min-width: 1025px) { .three-x-nine__tile { min-height: 550px } } .three-x-nine__tile.active { border-radius: 10px 0 0 10px; -ms-box-shadow: 5px 0px 17px 0px rgba(0, 0, 0, 0.2); box-shadow: 5px 0px 17px 0px rgba(0, 0, 0, 0.2) } .three-x-nine__tile--wellbeing { background: #007dbb } @media (min-width: 1025px) { .three-x-nine__tile--wellbeing .three-x-nine__content-link.active-link { background: #004976 } } .three-x-nine__tile--wellbeing .three-x-nine__title:before { content: "" } .three-x-nine__tile--wellbeing .three-x-nine__mobile-content-container { background-color: #004976 } .three-x-nine__tile--environment { background: #54802d } @media (min-width: 1025px) { .three-x-nine__tile--environment .three-x-nine__content-link.active-link { background: #3A591F } } .three-x-nine__tile--environment .three-x-nine__title:before { content: "" } .three-x-nine__tile--environment .three-x-nine__mobile-content-container { background-color: #3A591F } .three-x-nine__tile--livelihoods { background: #d0006f } @media (min-width: 1025px) { .three-x-nine__tile--livelihoods .three-x-nine__content-link.active-link { background: #722257 } } .three-x-nine__tile--livelihoods .three-x-nine__title--large { display: block } .three-x-nine__tile--livelihoods .three-x-nine__title:before { content: "" } .three-x-nine__tile--livelihoods .three-x-nine__mobile-content-container { background-color: #722257 } .three-x-nine__title { height: auto; margin: 0 15px 0 20px; padding-bottom: 20px; position: relative; width: auto; float: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); display: block; padding-left: 50px; text-align: left } @media (min-width: 37.5em) { .three-x-nine__title { border-bottom: none; width: 30%; float: left; padding-bottom: 0 } } @media (min-width: 1025px) { .three-x-nine__title { margin: 0 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); width: auto; float: none; height: 150px } } .three-x-nine__title p { color: #fff; font-size: 16px; font-family: "unilever_illustrative_betaBd", Arial, Helvetica, sans-serif; letter-spacing: normal; line-height: 1.25; margin-bottom: 0 } .font--dinBold .three-x-nine__title p { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .three-x-nine__title p { font-family: Arial, Helvetica, sans-serif } @media (min-width: 37.5em) { .three-x-nine__title p { font-size: 15px } } @media (min-width: 1025px) { .three-x-nine__title p { font-size: 16px } } .three-x-nine__title--large p { font-size: 48px; line-height: 1em; letter-spacing: -2px } @media (min-width: 37.5em) { .three-x-nine__title--large p { font-size: 22px } } @media (min-width: 48.0625em) { .three-x-nine__title--large p { font-size: 23px } } @media (min-width: 57.5em) { .three-x-nine__title--large p { font-size: 26px } } .three-x-nine__title:before { font-size: 2.708em; position: absolute; left: -10px; top: -10px; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff } .three-x-nine__discover-more-link { font-family: Helvetica; font-weight: bold; line-height: 20px; color: #FFFFFF; display: block; position: relative; margin: 0 30px; font-size: 13.5px; clear: both; text-align: left; padding-left: 15px } .three-x-nine__discover-more-link:hover, .three-x-nine__discover-more-link:focus { color: #fff } .three-x-nine__discover-more-link--sub-content { margin: 0; width: 100%; clear: both; height: auto } .three-x-nine__discover-more-link:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; transition: all 0.3s ease; font-size: 0.75em; position: absolute; top: 10px; line-height: 0; content: "\e021"; left: 0 } .three-x-nine__discover-more-link--inline { display: inline; font-weight: normal; margin: 0; padding: 0; text-decoration: underline } .three-x-nine__discover-more-link--inline:hover, .three-x-nine__discover-more-link--inline:focus, .three-x-nine__discover-more-link--inline:active { text-decoration: none } .three-x-nine__discover-more-link--inline::before { display: none } .three-x-nine__discover-more-link--inline span { white-space: nowrap } .three-x-nine__discover-more-link--inline span::before, .three-x-nine__discover-more-link--inline span::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; transition: all 0.3s ease; font-size: 0.75em; line-height: 0; display: inline-block } .three-x-nine__discover-more-link--inline span::after { content: "\e021"; margin-left: 3px } .three-x-nine__img { max-height: 70px } .three-x-nine__content { height: auto; padding-top: 10px; color: #fff; margin: 0 30px; font-size: 13.5px; padding-bottom: 20px; display: block; text-align: left } .three-x-nine__content a { color: #fff; white-space: nowrap; text-decoration: underline; display: inline-block } .three-x-nine__content a:hover, .three-x-nine__content a:focus, .three-x-nine__content a:active { text-decoration: none } .three-x-nine__content a::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; content: "\e021"; margin-left: 3px; font-size: 0.75em; display: inline-block } @media (min-width: 1025px) { .three-x-nine__content { padding-top: 15px; height: 130px } .three-x-nine__content p { font-size: 14px } } @media (min-width: 37.5em) and (max-width: 1024px) { .three-x-nine__content { width: 32%; float: left; margin: 0 15px; padding-bottom: 0; padding-top: 0 } } .three-x-nine__content-links { list-style: none; color: #fff; padding-top: 20px; margin-bottom: 0; height: 172px; clear: both } @media (min-width: 1025px) { .three-x-nine__content-links { padding-top: 40px } } @media (max-width: 1024px) { .three-x-nine__content-links { height: auto } } .three-x-nine__content-link { font-size: 15px; width: 100%; -webkit-transition-property: background-color; -ms-transition-property: background-color; -moz-transition-property: background-color; -o-transition-property: background-color; -webkit-transition-duration: .3s; -ms-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; -webkit-transition-timing-function: ease; -ms-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-property: background-color; transition-duration: .3s; transition-timing-function: ease } .three-x-nine__content-link:hover { background-color: rgba(0, 0, 0, 0.15) } .three-x-nine__content-link span.link-title { padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.5); display: block; cursor: pointer; position: relative; margin: 0 30px; text-align: left; padding-right: 10px } .three-x-nine__content-link span.link-title:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; transition: all 0.3s ease; font-size: 0.75em; position: absolute; top: 16px; line-height: 0; content: "\e021"; right: 0 } @media (max-width: 1024px) { .three-x-nine__content-link span.link-title:after { -webkit-transform: rotate(90deg); transform: rotate(90deg) } } @media (min-width: 1025px) { .three-x-nine__content-link:first-child span.link-title { border-top: 1px solid transparent } } .three-x-nine__content-link.active-link { -webkit-transition-property: width; -ms-transition-property: width; -moz-transition-property: width; -o-transition-property: width; -webkit-transition-duration: .1s; -ms-transition-duration: .1s; -moz-transition-duration: .1s; -o-transition-duration: .1s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: width; transition-duration: .1s; transition-timing-function: ease-in; transition-delay: .4s } @media (min-width: 1025px) { .three-x-nine__content-link.active-link { width: 100% } } .three-x-nine__content-link.active-link span.link-title { -webkit-transition-property: margin; -ms-transition-property: margin; -moz-transition-property: margin; -o-transition-property: margin; -webkit-transition-duration: .1s; -ms-transition-duration: .1s; -moz-transition-duration: .1s; -o-transition-duration: .1s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: margin; transition-duration: .1s; transition-timing-function: ease-in; transition-delay: .4s } @media (min-width: 1025px) { .three-x-nine__content-link.active-link span.link-title { border-top: 1px solid transparent !important; margin-left: 50px } } @media (max-width: 1024px) { .three-x-nine__content-link.active-link span.link-title:after { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } } .three-x-nine__content-link.active-link + li span.link-title { border-top: 1px solid transparent !important } .three-x-nine__sdg-tab { margin-top: 30px } .three-x-nine__sdg-tab p { color: #fff; position: relative; left: 70px; display: inline-block; width: calc(100% - 100px); font-size: 12px } @media (min-width: 48em) { .three-x-nine__sdg-tab { position: absolute; top: 0; right: 0; margin: auto; width: 28% } .three-x-nine__sdg-tab p { left: 60px } } @media (min-width: 1025px) { .three-x-nine__sdg-tab { position: static; top: auto; right: auto; margin-top: 30px; width: auto } .three-x-nine__sdg-tab p { font-size: 13px; left: 70px } } .three-x-nine__sdg-logo-container { padding: 10px; width: 60px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; left: 0; margin-left: 1px; background: #ffffff; position: absolute } .three-x-nine__sdg-logo-container img { width: 35px; height: 35px } @media (min-width: 48em) { .three-x-nine__sdg-logo-container { padding: 22px 6px 6px; width: 50px; border-top-right-radius: 0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px } .three-x-nine__sdg-logo-container img { margin: auto } } @media (min-width: 1025px) { .three-x-nine__sdg-logo-container { padding: 10px; width: 60px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 0 } } .three-x-nine__slide-container { border-radius: 10px; height: 100%; width: 90%; position: absolute; top: 0; left: 15px; padding: 0; -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; transition-delay: .4s } .three-x-nine__slide-container--wellbeing { background: #004976 } .three-x-nine__slide-container--wellbeing .first-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #54802d; width: 200px; height: 100%; top: 0; right: 0; left: auto; border-radius: 10px; color: #fff; text-align: right; z-index: -1; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--wellbeing .first-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--wellbeing .second-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #d0006f; width: 200px; height: 100%; top: 0; right: 0; left: auto; border-radius: 10px; color: #fff; text-align: right; z-index: -2; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--wellbeing .second-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--wellbeing .jspDrag { background-color: #007dbb } .three-x-nine__slide-container--environment { background: #3A591F } .three-x-nine__slide-container--environment .first-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #007dbb; width: 200px; height: 100%; top: 0; right: auto; left: 0; border-radius: 10px; color: #fff; text-align: left; z-index: -1; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--environment .first-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--environment .second-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #d0006f; width: 200px; height: 100%; top: 0; right: 0; left: auto; border-radius: 10px; color: #fff; text-align: right; z-index: -2; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--environment .second-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--environment .jspDrag { background-color: #54802d } .three-x-nine__slide-container--livelihoods { background: #722257 } .three-x-nine__slide-container--livelihoods .first-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #007dbb; width: 200px; height: 100%; top: 0; right: auto; left: 0; border-radius: 10px; color: #fff; text-align: left; z-index: -2; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--livelihoods .first-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--livelihoods .second-tab { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; display: block; position: absolute; padding: 15px; background-color: #54802d; width: 200px; height: 100%; top: 0; right: auto; left: 0; border-radius: 10px; color: #fff; text-align: left; z-index: -1; -webkit-transform: scale(.85, .85); transform: scale(.85, .85); -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; cursor: pointer } .three-x-nine__slide-container--livelihoods .second-tab:before { font-size: 3.708em; content: "" } .three-x-nine__slide-container--livelihoods .jspDrag { background-color: #d0006f } .three-x-nine__slide-container.scale-down { -webkit-transform: scale(1, .82); transform: scale(1, .82) } .three-x-nine__slide-container.active { width: 805px; margin: 0; -ms-box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.5); padding: 30px 30px 30px 333.33px } @media (min-width: 93.75em) { .three-x-nine__slide-container.active { width: 1141px; padding: 30px 30px 30px 463.91px } } .three-x-nine__slide-container.active.three-x-nine__slide-container .first-tab, .three-x-nine__slide-container.active.three-x-nine__slide-container .second-tab { -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-property: all; transition-duration: .4s; transition-timing-function: ease-out; transition-delay: .7s } .three-x-nine__slide-container.active.three-x-nine__slide-container--wellbeing .first-tab { right: -90px } .three-x-nine__slide-container.active.three-x-nine__slide-container--wellbeing .second-tab { right: -165px } .three-x-nine__slide-container.active.three-x-nine__slide-container--environment .first-tab { left: -90px } .three-x-nine__slide-container.active.three-x-nine__slide-container--environment .second-tab { right: -90px } .three-x-nine__slide-container.active.three-x-nine__slide-container--livelihoods .first-tab { left: -165px } .three-x-nine__slide-container.active.three-x-nine__slide-container--livelihoods .second-tab { left: -90px } .three-x-nine__slide-container-close { position: absolute; top: 15px; right: 15px; cursor: pointer } .three-x-nine__slide-container-close:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; content: "\e001"; font-size: 0; -webkit-transition-property: font-size; -ms-transition-property: font-size; -moz-transition-property: font-size; -o-transition-property: font-size; -webkit-transition-duration: .3s; -ms-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; -webkit-transition-timing-function: linear; -ms-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-property: font-size; transition-duration: .3s; transition-timing-function: linear; transition-delay: 0s } .three-x-nine__slide-container-close.active:before { -webkit-transition-property: font-size; -ms-transition-property: font-size; -moz-transition-property: font-size; -o-transition-property: font-size; -webkit-transition-duration: .3s; -ms-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; -webkit-transition-timing-function: linear; -ms-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-property: font-size; transition-duration: .3s; transition-timing-function: linear; transition-delay: .8s; font-size: 16px } .three-x-nine__sub-content-container { font-size: 13.5px; line-height: 22px; color: #fff; display: none; text-align: left } @media (min-width: 1025px) { .three-x-nine__sub-content-container { max-height: 480px; overflow-y: auto; margin-top: 20px } .three-x-nine__sub-content-container .jspVerticalBar { background-color: transparent; left: auto; right: 0 } .three-x-nine__sub-content-container .jspTrack { background-color: rgba(0, 0, 0, 0.4); border-radius: 10px } .three-x-nine__sub-content-container .jspDrag { border-radius: 10px } .three-x-nine__sub-content-container .jspArrow { background: transparent; text-indent: 0; height: 25px; position: relative } .three-x-nine__sub-content-container .jspArrow.jspDisabled { background: transparent } .three-x-nine__sub-content-container .jspArrowUp:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; content: '\e01f'; position: absolute; top: -3px; left: 1px } .three-x-nine__sub-content-container .jspArrowDown:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; content: '\e025'; position: absolute; bottom: -3px; left: 1px } } .three-x-nine__sub-content-container > h4:first-child { padding-top: 0 } .three-x-nine__sub-content-container.active-content { display: block } .three-x-nine__sub-content-container.mobile-content { display: block; visibility: hidden; overflow: hidden } .three-x-nine__sub-content-container.active-content-mobile { visibility: visible } .three-x-nine__sub-content-title p { color: #fff; clear: both; padding-top: 10px; margin-top: 0; font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; margin-bottom: 0.5em; line-height: 1.2125em; letter-spacing: -0.04em; margin-bottom: 0 } .font--arial .three-x-nine__sub-content-title p { font-family: Arial, Helvetica, sans-serif } .three-x-nine__sub-content-list-title { font-weight: bold; clear: both; display: block; margin-bottom: 5px } .three-x-nine__text-block { display: block; padding-bottom: 20px } .three-x-nine__text-block p { font-size: 13.5px; margin-bottom: 0 } .three-x-nine__text-icon-block { position: relative; padding-bottom: 7px } .three-x-nine__label { display: block; padding-left: 30px; padding-left: 30px } .three-x-nine__label p { font-size: 13.5px; margin-bottom: 0 } .three-x-nine__sub-content-list { list-style: none; margin-bottom: 10px } .three-x-nine__sub-content-column { padding-left: 0 } .three-x-nine__sub-content-column--divider { border-top: 1px solid rgba(255, 255, 255, 0.5); padding: 15px 0 0 } .three-x-nine__list-item { position: relative } .three-x-nine__slide-tab { height: 100%; width: 300px } .three-x-nine__slide-tab--wellbeing { background: #007dbb } .three-x-nine__slide-tab--environment { background: #54802d } .three-x-nine__slide-tab--livelihoods { background: #d0006f } .three-x-nine__mobile-content-container { box-shadow: 0 6px 7px -6px rgba(0, 0, 0, 0.2) inset; display: none; padding: 30px } .three-x-nine__key-container { width: 100%; background: #E5E5E5; position: relative; z-index: 0; text-align: center; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.19); display: none; -webkit-transition-property: all; -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-duration: .4s; -ms-transition-duration: .4s; -moz-transition-duration: .4s; -o-transition-duration: .4s; -webkit-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-property: all; transition-duration: .4s; transition-timing-function: ease-out; transition-delay: .7s } .three-x-nine__key-container.active { display: block } .three-x-nine__key-container.active + .shadow { background: url("../images/hr_down.png") center bottom no-repeat #E5E5E5 } .three-x-nine__half-circle-tab { content: ''; background: #E5E5E5; display: block; width: 55px; height: 55px; position: absolute; top: -27.5px; border-radius: 50%; margin-left: calc(50% - 27.5px); z-index: -1; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.19) } .three-x-nine__half-circle-tab:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #666; -webkit-transform: rotate(270deg); transform: rotate(270deg); transition: all 0.3s ease; content: "\e021"; font-size: 0.75em; display: block; width: 100%; margin-top: 8px } .three-x-nine__key-title { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; letter-spacing: -0.025em; margin: 0; font-size: 14px; text-transform: uppercase; color: #666; display: inline-block; padding-bottom: 0 } .font--arial .three-x-nine__key-title { font-family: Arial, Helvetica, sans-serif } .three-x-nine__slp-intro { margin-top: 60px } .three-x-nine__slp-intro-title p { padding-bottom: 30px; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; letter-spacing: -0.025em; margin: 0; font-size: 1.875em } .font--arial .three-x-nine__slp-intro-title p { font-family: Arial, Helvetica, sans-serif } .three-x-nine__slp-intro-content p { text-align: left } .three-x-nine__slp-intro-content--large p { font-size: 18px } .three-x-nine__download-box { display: block; background-color: #007dbb; width: 100%; max-width: 557px; border-radius: 5px; margin: 30px auto 50px; padding: 12px; color: #fff; text-align: left } .three-x-nine__download-box:hover, .three-x-nine__download-box:focus { color: #fff } .three-x-nine__download-box-text { font-weight: bold; font-size: 15px; line-height: 18px; position: relative; display: block; padding-left: 20px } .three-x-nine__download-box-text:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #fff; transition: all 0.3s ease; content: "\e025"; font-size: 0.75em; position: absolute; top: 2px; line-height: 11px; border-bottom: 1.5px solid #fff; left: 0 } .three-x-nine__file { font-size: 13px; text-transform: uppercase; font-weight: normal } .three-x-nine__file--type { margin-left: 20px; margin-right: 2px } .three-x-nine__file--size { margin-left: 2px } span.disc-icon { border: solid 1px #fff; border-radius: 50%; display: inline-block; height: 1em; position: absolute; top: 4px; width: 1em; left: 0 } span.disc-icon.large { height: 1.25em; top: 2px; width: 1.25em; right: 0 } span.disc-icon.blue-disc { background-color: #007dbb; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center center; background-size: 75% } span.disc-icon.green-disc { background-color: #54802d !important } span.disc-icon.red-disc { background-color: #D34400 !important } span.disc-icon.white-disc { background-color: #FFFFFF !important; border-color: #D34400 } span.disc-icon.white-disc:after { color: #D34400; font-size: 0.6em; display: block; content: attr(data-value); height: 100%; position: absolute; right: 0; text-align: center; top: 0px; width: 100%; line-height: 1.6 } span.disc-icon.white-disc.large:after { font-size: 0.8em } span.disc-icon.grey-disc { background-color: #FFFFFF !important } .tweetable-statement { margin-bottom: 30px; padding: 15px 0 15px 15px; border-left: 1px solid #007dbb; transition: all 0.333s ease-out; position: relative } .tweetable-statement::before { content: ''; background-color: transparent; height: 100%; width: 1px; position: absolute; left: 0; top: 0; transition: all 0.333s ease-out } .tweetable-statement:hover { border-left-width: 8px } .tweetable-statement:hover::before { background-color: #f7f7f7; width: 100% } .tweetable-statement:hover .tweetable-statement__copy { padding-right: 4px } .tweetable-statement .tweetable-statement__copy { display: inline-block; color: #007dbb; position: relative; z-index: 3; padding-right: 12px; transition: padding 0.333s ease-out } @media (min-width: 67.5em) { .tweetable-statement .tweetable-statement__copy p { font-size: 1.3125em } } .tweetable-statement .tweetable-statement__copy > p { margin-bottom: 0 } .slp-download__link-title { font-style: normal; margin-bottom: 0.5em } .slp-download { display: inline-block; position: relative; background-color: #007dbb; border-radius: 5px; transition: background-color 0.3s; text-align: center; margin-bottom: 25px; padding: 14px 24px 14px 34px; text-align: left } .slp-download:hover { background-color: #004976 } .slp-download__link { display: inline-block } .slp-download__link-title { font-family: "Arial", "Helvetica", sans-serif; font-weight: bold; letter-spacing: normal; text-transform: none; font-size: 15px; color: #fff; margin-top: 0 } .slp-download__link-properties > p { font-size: 13px; color: #fff; margin-bottom: 0 } .slp-download .icon { font-family: 'unilever-iconfont' } .slp-download .icon-download::before { content: '\e01d'; position: absolute; top: 17px; color: #fff; font-size: 12px; left: 15px } .taking-action-landing__heading { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; font-size: 2.25em; margin-top: 20px } .font--arial .taking-action-landing__heading { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .taking-action-landing__heading { font-size: 2.75em } } @media (max-width: 48em) { .taking-action-landing__heading { font-size: 1.875em } } @media (max-width: 30em) { .taking-action-landing__heading { font-size: 1.625em } .three-x-nine__slp-intro-title p { padding-bottom: 10px; font-size: 1.5em; } .three-x-nine__slp-intro { margin-top: 10px; } .mega-banner h1 { margin: 0; } } .taking-action-landing__content { text-align: center } @media (min-width: 30em) { .taking-action-landing__content { width: 80%; margin: 0 auto } } .taking-action-pillar__heading { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; font-size: 2.25em; margin-top: 20px } .font--arial .taking-action-pillar__heading { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .taking-action-pillar__heading { font-size: 2.75em } } @media (max-width: 48em) { .taking-action-pillar__heading { font-size: 1.875em } } @media (max-width: 30em) { .taking-action-pillar__heading { font-size: 1.625em } } .taking-action-pillar__content { text-align: center } @media (min-width: 30em) { .taking-action-pillar__content { width: 80%; margin: 0 auto } } @media print { .pillar-card { width: 50% } .pillar-card:nth-child(2n + 1) { clear: both } } .pillar-card__link { display: block; position: relative } @media print { .pillar-card__link { margin-bottom: 60px } } .pillar-card__link::before { content: ''; position: absolute; background-color: #000; border-radius: 10px; width: 100%; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .pillar-card__link::after { content: ''; position: absolute; background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%); border-radius: 0 0 10px 10px; width: 100%; height: 50%; bottom: 0 } @media print { .pillar-card__link::after { height: 0% } } .pillar-card__link:hover .pillar-card__goal--green { background-color: #00573f } .pillar-card__link:hover .pillar-card__goal--blue { background-color: #004976 } .pillar-card__link:hover .pillar-card__goal--pink { background-color: #722257 } .pillar-card__link:hover::before { opacity: 0.3 } .pillar-card__image { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 10px; height: 200px; padding: 10px 0 15px; margin: 14px 0 } @media (min-width: 48em) { .pillar-card__image { height: 250px } } @media print { .pillar-card__image { display: block; height: 100% } } .pillar-card__image img { display: none } @media print { .pillar-card__image img { display: block } } .pillar-card__image video { background-color: #000; display: none; position: absolute; min-width: 101%; min-height: 100%; top: 50%; left: 50%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .pillar-card__goal { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: inline-block; position: relative; text-indent: 20px; color: #fff; max-width: 100%; padding: 6px 10px; z-index: 1; transition: all 0.3s ease; border-radius: 0 5px 5px 0 } .font--arial .pillar-card__goal { font-family: Arial, Helvetica, sans-serif } .pillar-card__goal > p { font-size: 12px; margin-bottom: 0 } .pillar-card__goal--green { background-color: #54802d } .pillar-card__goal--blue { background-color: #007dbb } .pillar-card__goal--pink { background-color: #d0006f } .pillar-card__title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; line-height: 1.3; color: #fff; max-width: 100%; padding: 0 10px; z-index: 1 } .pillar-card__title > p { margin-bottom: 0; font-weight: bold } .pillar-card .icon { font-size: 11px; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased } .pillar-card .icon-chevron::before { content: '\e021' } .pillar-card .icon-leaf::before { content: '\e02c' } .pillar-card .icon-heart::before { content: '\e02a' } .pillar-card .icon-spark::before { content: '\e02b' } .pillar-card .icon-leaf::before, .pillar-card .icon-heart::before, .pillar-card .icon-spark::before { position: absolute; font-size: 20px; top: -1px; left: -16px } .pillar-card--youth .pillar-card__image { border-radius: 0; margin: 0 } .pillar-card--youth .pillar-card__title { z-index: 2 } .pillar-card--youth .pillar-card__link { overflow: hidden } .pillar-card--youth .pillar-card__link::before, .pillar-card--youth .pillar-card__link::after { border-radius: 0; z-index: 1 } .pillar-card--youth .pillar-card__title { position: absolute; bottom: 10px } .pillar-card--youth .pillar-card__title > p { padding-left: 15px; position: relative } .pillar-card--youth .icon { position: absolute; top: 3px; left: 0 } .pillar-card--youth .icon-external { top: 7px } @media print, (min-width: 48em) { .pillar-card--youth video { display: block } } .taking-action__nav { display: -ms-flexbox; display: flex } .taking-action__nav--green a:hover .taking-action__nav__item__direction { background-color: #00573f } .taking-action__nav--green a:hover .taking-action__nav__item--prev .taking-action__nav__item__direction span:before { left: 5px } .taking-action__nav--green a:hover .taking-action__nav__item--next .taking-action__nav__item__direction span:after { right: 5px } .taking-action__nav--green .taking-action__nav__item__direction { background-color: #54802d; transition: all 0.3s ease } .taking-action__nav--blue a:hover .taking-action__nav__item__direction { background-color: #004976 } .taking-action__nav--blue a:hover .taking-action__nav__item--prev .taking-action__nav__item__direction span:before { left: 5px } .taking-action__nav--blue a:hover .taking-action__nav__item--next .taking-action__nav__item__direction span:after { right: 5px } .taking-action__nav--blue .taking-action__nav__item__direction { background-color: #007dbb; transition: all 0.3s ease } .taking-action__nav--pink a:hover .taking-action__nav__item__direction { background-color: #722257 } .taking-action__nav--pink a:hover .taking-action__nav__item--prev .taking-action__nav__item__direction span:before { left: 5px } .taking-action__nav--pink a:hover .taking-action__nav__item--next .taking-action__nav__item__direction span:after { right: 5px } .taking-action__nav--pink .taking-action__nav__item__direction { transition: all 0.3s ease; background-color: #d0006f } .taking-action__nav__item { background-color: #eee; border-radius: 10px; padding: 10px 0 10px 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: 100%; -ms-flex-pack: justify; justify-content: space-between } .taking-action__nav__item > span { font-size: 14px; font-weight: bold; color: #666 } .taking-action__nav__item--prev { text-align: left; -ms-flex-direction: column; flex-direction: column } @media (min-width: 30em) { .taking-action__nav__item--prev { text-align: right; -ms-flex-direction: row; flex-direction: row } } .taking-action__nav__item--prev > span { text-align: left; margin-top: 10px; margin-right: 10px; padding-left: 15px; max-width: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse } @media (min-width: 30em) { .taking-action__nav__item--prev > span { margin-top: 0; margin-right: 15px; margin-left: 15px; text-align: right; -ms-flex-preferred-size: 100%; flex-basis: 100% } } .taking-action__nav__item--next { text-align: right; -ms-flex-direction: column; flex-direction: column } @media (min-width: 30em) { .taking-action__nav__item--next { text-align: left; -ms-flex-direction: row-reverse; flex-direction: row-reverse } } .taking-action__nav__item--next > span { text-align: right; margin-top: 10px; margin-left: 10px; padding-right: 15px; max-width: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse } @media (min-width: 30em) { .taking-action__nav__item--next > span { margin-top: 0; margin-left: 15px; margin-right: 15px; text-align: left; -ms-flex-preferred-size: 100%; flex-basis: 100% } } .taking-action__nav__item__direction { color: #fff; padding: 10px 0 10px 0; font-size: 12px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; transition: all 0.3s ease; position: relative } .font--arial .taking-action__nav__item__direction { font-family: Arial, Helvetica, sans-serif } .taking-action__nav__item--prev .taking-action__nav__item__direction { margin-right: auto; border-radius: 0 5px 5px 0 } .taking-action__nav__item--prev .taking-action__nav__item__direction span { margin: 0 10px 0 30px } .taking-action__nav__item--prev .taking-action__nav__item__direction span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e023"; font-size: 1em; transition: all 0.3s ease; position: absolute; top: 30%; left: 10px } .taking-action__nav__item--next .taking-action__nav__item__direction { margin-left: auto; border-radius: 5px 0 0 5px; padding-left: 10px } .taking-action__nav__item--next .taking-action__nav__item__direction span { margin: 0 30px 0 10px } .taking-action__nav__item--next .taking-action__nav__item__direction span:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; font-size: 1em; transition: all 0.3s ease; position: absolute; top: 30%; right: 10px } .taking-action-image__nav { overflow: auto; padding-bottom: 10px } .theme-ubrand .taking-action-image__nav { margin-bottom: 20px; margin-top: 20px } .taking-action-image__nav--green a:hover .taking-action-image__nav__item__direction { background-color: #00573f } .taking-action-image__nav--green a:hover .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction span:before { left: 5px } .taking-action-image__nav--green a:hover .taking-action-image__nav__item--next .taking-action-image__nav__item__direction span:after { right: 5px } .taking-action-image__nav--green .taking-action-image__nav__item__direction { background-color: #54802d; transition: all 0.3s ease } .taking-action-image__nav--blue a:hover .taking-action-image__nav__item__direction { background-color: #004976 } .taking-action-image__nav--blue a:hover .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction span:before { left: 5px } .taking-action-image__nav--blue a:hover .taking-action-image__nav__item--next .taking-action-image__nav__item__direction span:after { right: 5px } .taking-action-image__nav--blue .taking-action-image__nav__item__direction { background-color: #007dbb; transition: all 0.3s ease } .taking-action-image__nav--pink a:hover .taking-action-image__nav__item__direction { background-color: #722257 } .taking-action-image__nav--pink a:hover .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction span:before { left: 5px } .taking-action-image__nav--pink a:hover .taking-action-image__nav__item--next .taking-action-image__nav__item__direction span:after { right: 5px } .taking-action-image__nav--pink .taking-action-image__nav__item__direction { transition: all 0.3s ease; background-color: #d0006f } .taking-action-image__nav a { display: block; position: relative; transition: all 0.3s ease } .taking-action-image__nav a:before { content: ""; border-radius: 0 0 10px 10px; width: 100%; height: 50%; position: absolute; z-index: 1; bottom: 0; background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%) } .theme-ubrand .taking-action-image__nav a:before { background-image: linear-gradient(-180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%) } .taking-action-image__nav a:after { content: " "; border-radius: 10px; width: 100%; height: 100%; position: absolute; z-index: 1; bottom: 0; background: black; opacity: 0; transition: all 0.3s ease } .taking-action-image__nav a:hover:after { opacity: 0.3 } .taking-action-image__nav__item { height: 152px; background-size: cover; background-position: 50% 50%; border-radius: 10px; padding: 10px 0 10px 0; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-direction: column; flex-direction: column; position: relative } @media (min-width: 57.5em) { .taking-action-image__nav__item { height: 182px } } @media (min-width: 93.75em) { .taking-action-image__nav__item { height: 240px } } .taking-action-image__nav__item > span { z-index: 2; font-size: 14px; font-weight: bold; line-height: 17px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) } .taking-action-image__nav__item--prev { text-align: left } .taking-action-image__nav__item--prev > span { margin-top: .625rem; margin-left: .625rem; margin-right: .625rem; text-align: left } @media (min-width: 30em) { .taking-action-image__nav__item--prev > span { margin-top: 0; margin-left: .9375rem; margin-right: .9375rem } } .taking-action-image__nav__item--next > span { margin-top: .625rem; margin-left: .625rem; margin-right: .625rem; text-align: left } @media (min-width: 30em) { .taking-action-image__nav__item--next > span { margin-top: 0; margin-left: .9375rem; margin-right: .9375rem } } .taking-action-image__nav__item__direction { color: #fff; padding: 10px 0 10px 0; font-size: 12px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; transition: all 0.3s ease; position: relative; z-index: 3; -ms-flex-preferred-size: auto; flex-basis: auto } .font--arial .taking-action-image__nav__item__direction { font-family: Arial, Helvetica, sans-serif } .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction { border-radius: 0 5px 5px 0; padding-right: 10px; -ms-flex-item-align: start; align-self: flex-start } .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction span { margin: 0 10px 0 30px } .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e023"; font-size: 1em; transition: all 0.3s ease; position: absolute; top: 30%; left: 10px } .taking-action-image__nav__item--next .taking-action-image__nav__item__direction { border-radius: 5px 0 0 5px; padding-left: 10px; -ms-flex-item-align: end; align-self: flex-end } .taking-action-image__nav__item--next .taking-action-image__nav__item__direction span { margin: 0 30px 0 10px } .taking-action-image__nav__item--next .taking-action-image__nav__item__direction span:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; font-size: 1em; transition: all 0.3s ease; position: absolute; top: 30%; right: 10px } .spotlight__heading { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; font-size: 1.625em } .font--arial .spotlight__heading { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .spotlight__heading { font-size: 1.875em } } @media (max-width: 48em) { .spotlight__heading { font-size: 1.25em } } @media (max-width: 30em) { .spotlight__heading { font-size: 1.125em } } .content-nest__heading { font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } @media (min-width: 93.75em) { .content-nest__heading { font-size: 1.625em } } @media (max-width: 48em) { .content-nest__heading { font-size: 1.125em } } @media (max-width: 30em) { .content-nest__heading { font-size: 1em } } .font--arial .content-nest__heading { font-family: Arial, Helvetica, sans-serif } .content-nest { background-color: #eee; border-radius: 10px; padding: 15px 20px; margin-bottom: 50px } .content-nest__heading { margin-top: 0 } .content-nest__links > p { margin-bottom: 0 } .content-nest__link { text-decoration: underline; color: #007dbb } .content-nest-item__heading { font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } @media (min-width: 93.75em) { .content-nest-item__heading { font-size: 1.625em } } @media (max-width: 48em) { .content-nest-item__heading { font-size: 1.125em } } @media (max-width: 30em) { .content-nest-item__heading { font-size: 1em } } .font--arial .content-nest-item__heading { font-family: Arial, Helvetica, sans-serif } .content-nest-accordion { position: relative; margin-bottom: 25px } .content-nest-accordion__divider { margin-bottom: -20px } .content-nest-accordion__anchor { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: #fff; font-size: 15px; text-align: center; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); border-radius: 10px; width: 90%; padding: 25px 30px 15px; margin-left: auto; margin-right: auto; display: block } .font--arial .content-nest-accordion__anchor { font-family: Arial, Helvetica, sans-serif } @media (min-width: 48em) { .content-nest-accordion__anchor { width: 80% } } @media (min-width: 93.75em) { .content-nest-accordion__anchor { width: 60% } } .content-nest-accordion__anchor--active { top: auto; margin-bottom: 5px } .content-nest-accordion .icon { font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased } .content-nest-accordion .icon-arrow-down::before { content: '\e025' } .content-nest-accordion .icon-arrow-up::before { content: '\e01f' } .content-nest-accordion .icon-arrow-down::before, .content-nest-accordion .icon-arrow-up::before { display: block; font-size: 10px; padding-top: 10px } @media (min-width: 48em) { .content-nest-accordion .icon-arrow-down::before, .content-nest-accordion .icon-arrow-up::before { display: inline-block; padding-top: 0; padding-left: 10px } } .content-nest-item { display: none } .content-nest-item__copy ul { clear: left; padding-left: 20px } .content-nest-item__copy li { padding-bottom: 10px } .content-nest-item__anchor { top: -60px; position: relative } .pillar-target-box__subheading { font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } @media (min-width: 93.75em) { .pillar-target-box__subheading { font-size: 1.625em } } @media (max-width: 48em) { .pillar-target-box__subheading { font-size: 1.125em } } @media (max-width: 30em) { .pillar-target-box__subheading { font-size: 1em } } .font--arial .pillar-target-box__subheading { font-family: Arial, Helvetica, sans-serif } .accordion.slp2017 { background: none; padding: 0; margin: 0 } .accordion.slp2017 .title:hover, .accordion.slp2017 .section.active > p.title, .accordion.slp2017 .section.active > .title::before { color: #fff } .pillar-target-box { margin-bottom: 15px } .pillar-target-box.active { border: 1px solid #ccc; border-top: none; border-radius: 10px; margin-bottom: 30px } .pillar-target-box.active > p.title:hover { color: #fff } .pillar-target-box.active > div.title.pillar-target-box__heading { border-radius: 10px 10px 0 0 } .pillar-target-box .title.pillar-target-box__heading { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; position: relative; color: #fff; border-radius: 10px; padding: 15px 20px; outline: none; transition: all 0.3s } .font--arial .pillar-target-box .title.pillar-target-box__heading { font-family: Arial, Helvetica, sans-serif } .pillar-target-box .title.pillar-target-box__heading > p { font-size: 18px; margin-bottom: 0 } .pillar-target-box .title.pillar-target-box__heading--green { background-color: #54802d !important } .pillar-target-box .title.pillar-target-box__heading--green:hover { background-color: #00573f !important } .pillar-target-box .title.pillar-target-box__heading--blue { background-color: #007dbb !important } .pillar-target-box .title.pillar-target-box__heading--blue:hover { background-color: #004976 !important } .pillar-target-box .title.pillar-target-box__heading--pink { background-color: #d0006f !important } .pillar-target-box .title.pillar-target-box__heading--pink:hover { background-color: #722257 !important } .pillar-target-box .title.pillar-target-box__heading:focus, .pillar-target-box .title.pillar-target-box__heading:active { color: #fff } .pillar-target-box .content.pillar-target-box__content { background: none; background-color: transparent; padding: 15px 30px } @media (min-width: 48em) { .pillar-target-box .content.pillar-target-box__content { padding: 15px 20px } } .pillar-target-box__target { padding: 0 0 10px } .pillar-target-box__target-performance { position: relative; padding-left: 50px } .pillar-target-box__key { position: absolute; border-radius: 50%; width: 25px; height: 25px; left: 15px } .pillar-target-box__key--achieved { background-color: #017db6; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center; background-size: 50% } .pillar-target-box__key--on-plan { background-color: #54802d } .pillar-target-box__key--off-plan { background-color: #d34400 } .pillar-target-box__key--percentage { border: 2px solid #d0021b; color: #d0021b; text-align: center; font-size: 13px; line-height: 23px; font-weight: bold } .pillar-target-box__divider { background: none; background-color: #ccc; height: 1px; margin: 0 0 20px } .pillar-target-box__subheading { margin-top: 0 } .pillar-target-box__disclaimer > p { display: block; color: #999; font-size: 11px } .pillar-target-box__link { display: block; color: #007dbb; padding-top: 15px } .pillar-target-box__link:hover, .pillar-target-box__link:focus { color: #007dbb } .pillar-target-box .icon { font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased } .pillar-target-box .icon-arrow-right::before { content: '\e021'; font-size: 14px } .pillar-target-box .icon-arrow-down::before { content: '\e025' } .pillar-target-box .icon-arrow-up::before { content: '\e01f' } .pillar-target-box .icon-arrow-down::before, .pillar-target-box .icon-arrow-up::before { position: absolute; font-size: 16px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 15px } .pillar-commitment-box__heading { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; font-size: 1.625em } .font--arial .pillar-commitment-box__heading { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .pillar-commitment-box__heading { font-size: 1.875em } } @media (max-width: 48em) { .pillar-commitment-box__heading { font-size: 1.25em } } @media (max-width: 30em) { .pillar-commitment-box__heading { font-size: 1.125em } } .pillar-commitment-box__target-heading { font-size: 1.25em; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } @media (min-width: 93.75em) { .pillar-commitment-box__target-heading { font-size: 1.625em } } @media (max-width: 48em) { .pillar-commitment-box__target-heading { font-size: 1.125em } } @media (max-width: 30em) { .pillar-commitment-box__target-heading { font-size: 1em } } .font--arial .pillar-commitment-box__target-heading { font-family: Arial, Helvetica, sans-serif } .pillar-commitment-box { border: 1px solid #ccc; border-top: none; border-radius: 10px; margin-bottom: 30px } .pillar-commitment-box__heading { color: #fff; border-radius: 10px 10px 0 0; padding: 15px 0 15px 20px } .pillar-commitment-box__heading--green { background-color: #54802d } .pillar-commitment-box__heading--blue { background-color: #007dbb } .pillar-commitment-box__heading--pink { background-color: #d0006f } .pillar-commitment-box__target { padding: 20px 20px 0 20px } .pillar-commitment-box__target-heading { margin-top: 0 } .pillar-commitment-box__target-copy { position: relative } .pillar-commitment-box__target-copy--indent { padding-left: 35px } .pillar-commitment-box__key { position: absolute; border-radius: 50%; width: 25px; height: 25px; left: 0 } .pillar-commitment-box__key--achieved { background-color: #017db6; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center; background-size: 50% } .pillar-commitment-box__key--on-plan { background-color: #54802d } .pillar-commitment-box__key--off-plan { background-color: #d34400 } .pillar-commitment-box__key--percentage { border: 2px solid #d0021b; color: #d0021b; text-align: center; font-size: 13px; line-height: 23px; font-weight: bold } .pillar-commitment-box__divider { margin-top: 1.5rem } @media (min-width: 48em) { .pillar-commitment-box__divider { margin-bottom: 0.5rem } } .pillar-commitment-box__bar { list-style-type: none } @media (min-width: 48em) { .pillar-commitment-box__bar { padding: 0 30px } } .pillar-commitment-box__bar-legend { padding-top: 4px; margin-bottom: 0; padding-left: 25px } @media (min-width: 48em) { .pillar-commitment-box__bar-legend { padding-top: 0 } .pillar-commitment-box__bar-legend p { margin-bottom: 0 } } .slp-key { transition: height 0.3s ease; background: #eee; bottom: 0; box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.19); height: auto; left: 0; position: fixed; text-align: center; width: 100%; z-index: 6; display: none } .slp-key.active { display: block } .slp-key .container { margin: 20px auto 0; max-width: 85em; padding-bottom: 5px } .slp-key h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #666; display: block; font-size: 0.9em; padding: 0; text-transform: uppercase } .font--arial .slp-key h2 { font-family: Arial, Helvetica, sans-serif } .slp-key h2:after { content: "\003A" } .slp-key ul { margin: 0 auto; padding: 10px 40px 0; background: #eee } .slp-key li { display: inline-block; font-size: 0.9em; padding-left: 1.5em; margin-left: 5px; position: relative } @media (min-width: 28.563em) { .slp-key li { margin: 0 } } .slp-key span { border: solid 2px #ccc; border-radius: 50%; display: inline-block; height: 20px; left: 0; position: absolute; top: 2px; width: 20px } .slp-key span.key-title { font-family: "DINWebPro-medium", Arial, Helvetica, sans-serif; background: #eee; top: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100px; border: none; margin: 0 auto; display: block; font-size: 0.9em; padding: 0; text-align: center; text-transform: uppercase } .slp-key span.blue-disc { background-color: #007dbb; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center; background-size: 75% } .slp-key span.green-disc { background-color: #54802d } .slp-key span.red-disc { background-color: #D34400 } .slp-key span.white-disc { background-color: #FFFFFF; border-color: #D34400 } .slp-key span.white-disc:after { color: #D34400; font-size: 0.6em; display: block; content: "%"; height: 100%; position: absolute; right: 0; text-align: center; top: -1px; width: 100% } .slp-key span.grey-disc { background-color: #FFFFFF } .expandable-key { display: block; background: #eee; position: absolute; top: -28px; border-radius: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 28px; z-index: -1; cursor: pointer; box-shadow: 0 6px 7px -6px rgba(0, 0, 0, 0.4) inset } .expandable-key:before { content: "\e01f"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; top: 8px; left: 38%; z-index: 8; font-size: 0.8em } .expandable-key--expanded:before { content: "\e025" } .pillar-key { border: 1px solid #ccc; border-top: none; border-radius: 10px } .pillar-key__heading { color: #fff; border-radius: 10px 10px 0 0; padding: 15px 0 15px 30px } .pillar-key__heading--green { background-color: #54802d } .pillar-key__heading--blue { background-color: #007dbb } .pillar-key__heading--pink { background-color: #d0006f } .pillar-key__target { padding: 30px 30px 0 30px } .pillar-key__target-heading { margin-top: 0 } .pillar-key__target-copy { position: relative; margin-bottom: 0 } .pillar-key__target-copy--indent { padding-left: 35px } .pillar-key__key { position: absolute; border-radius: 50%; width: 25px; height: 25px; left: 0; margin-right: 5px } .pillar-key__key--achieved { background-color: #017db6; color: #fff; text-align: center; background-image: url(../images/tiny_tick.png); background-repeat: no-repeat; background-position: center center; background-size: 75% } .pillar-key__key--on-plan { background-color: #54802d } .pillar-key__key--off-plan { background-color: #d34400 } .pillar-key__key--percentage { border: 1.5px solid #d0021b !important; color: #d0021b; text-align: center; font-size: 13px; line-height: 20px; font-weight: bold } .pillar-key__divider { margin-top: 1.5rem } @media (min-width: 48em) { .pillar-key__divider { margin-bottom: 0.5rem } } .pillar-key__bar { list-style-type: none } @media (min-width: 48em) { .pillar-key__bar { padding: 0 30px } } .pillar-key__bar-item__left-text { text-align: left; margin-left: 0 !important } .pillar-key__bar-legend { margin-left: 5px } @media (min-width: 48em) { .pillar-key__bar-legend { padding-top: 0 } } .pillar-key__bar-legend--text { display: none } .sticky-goal-nav { min-height: 39px; width: 100%; transition: 0.3s, all, ease; position: relative; z-index: 30; margin-top: 20px } @media (max-width: 29.9375em) { .sticky-goal-nav { min-height: 58px } } @media print { .sticky-goal-nav { display: none } } .sticky-goal-nav.fixed { position: fixed; width: 100%; top: 0; margin-top: 0; left: 0 } .sticky-goal-nav.fixed .sticky-goal-nav__container { position: relative } .sticky-goal-nav__container { list-style: none; padding: 0; margin: 0; width: 100% } @media (max-width: 29.9375em) { .sticky-goal-nav__container { position: absolute; top: 0; left: 0 } } .sticky-goal-nav__item { width: 33.3333%; height: 100%; float: left; text-align: center; height: 100%; vertical-align: middle; color: white; font-size: 10px; font-weight: bold; padding: 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: table; transition: 0.3s, all, ease } @media (min-width: 48.0625em) { .sticky-goal-nav__item { font-size: 13px } } .sticky-goal-nav__item.active .sticky-goal-nav__link-title { border-bottom: 1px solid rgba(255, 255, 255, 0.5) } @media (max-width: 29.9375em) { .sticky-goal-nav__item.active .sticky-goal-nav__link-title { border-bottom: 1px solid transparent; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } } @media (max-width: 29.9375em) { .sticky-goal-nav__item.active .sticky-goal-nav__link-title:before { display: block; position: relative; margin-bottom: 8px; font-size: 26px } } @media (max-width: 29.9375em) { .sticky-goal-nav__item.active { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } } .sticky-goal-nav__item--wellbeing { background-color: #007dbb } .sticky-goal-nav__item--wellbeing:hover { background-color: #004976 } @media (max-width: 29.9375em) { .sticky-goal-nav__item--wellbeing .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (max-width: 29.9375em) and (max-width: 29.9375em) { .sticky-goal-nav__item--wellbeing .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } @media (min-width: 30em) { .sticky-goal-nav__item--wellbeing .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (min-width: 30em) and (max-width: 29.9375em) { .sticky-goal-nav__item--wellbeing .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } .sticky-goal-nav__item--environment { background-color: #54802d; border-left: 1px solid #fff; border-right: 1px solid #fff } .sticky-goal-nav__item--environment:hover { background-color: #00573F } @media (max-width: 29.9375em) { .sticky-goal-nav__item--environment .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (max-width: 29.9375em) and (max-width: 29.9375em) { .sticky-goal-nav__item--environment .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } @media (min-width: 30em) { .sticky-goal-nav__item--environment .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (min-width: 30em) and (max-width: 29.9375em) { .sticky-goal-nav__item--environment .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } .sticky-goal-nav__item--livelihoods { background-color: #d0006f } .sticky-goal-nav__item--livelihoods:hover { background-color: #722257 } @media (max-width: 29.9375em) { .sticky-goal-nav__item--livelihoods .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (max-width: 29.9375em) and (max-width: 29.9375em) { .sticky-goal-nav__item--livelihoods .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } @media (min-width: 30em) { .sticky-goal-nav__item--livelihoods .sticky-goal-nav__link-title:before { content: ""; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: white; font-size: 23px; line-height: 13px; top: 5px; position: relative; right: 3px } } @media (min-width: 30em) and (max-width: 29.9375em) { .sticky-goal-nav__item--livelihoods .sticky-goal-nav__link-title:before { left: 0; top: 0; line-height: 18px } } .sticky-goal-nav__link { display: table-cell; height: 100%; width: 100%; color: white; padding: 0 0.9375em; vertical-align: middle } .sticky-goal-nav__link:hover, .sticky-goal-nav__link:focus { color: white } .sticky-goal-nav__link-title { display: inline-block; position: relative; border-bottom: 1px solid transparent; margin: 0; padding: 0 } @media (min-width: 30em) { .sticky-goal-nav__link-title { margin: 9px 0; padding: 0 } } @media (max-width: 29.9375em) { .sticky-goal-nav__link-title:before { display: none } } .anchor-link-offset { top: -60px; position: relative; display: block } .goal-tab__name { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-style: normal; text-transform: uppercase; line-height: 1.2125em; letter-spacing: -0.04em; color: #004976 } .font--arial .goal-tab__name { font-family: Arial, Helvetica, sans-serif } .goal-tab { display: none; position: absolute; width: 100%; top: 0 } @media (min-width: 30em) { .goal-tab { display: block } } @media (min-width: 48em) { .goal-tab { position: relative } } .goal-tab--green { border-top: 10px solid #54802d } .goal-tab--blue { border-top: 10px solid #007dbb } .goal-tab--pink { border-top: 10px solid #d0006f } .goal-tab__box { border-radius: 0 0 10px 10px; width: 80%; margin: 0 auto; text-align: center; padding: 10px 15px 15px; display: block; transition: 0.3s, all, ease } .goal-tab__box--green { background-color: #54802d } .goal-tab__box--blue { background-color: #007dbb } .goal-tab__box--pink { background-color: #d0006f } @media (min-width: 48em) { .goal-tab__box { position: absolute; border-radius: 10px 10px 0 0; width: 220px; bottom: 0; padding: 20px; left: 75px } } @media (min-width: 1024px) { .goal-tab__box { left: 0.9375em } } .goal-tab__name { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; color: #fff; font-size: 13px; margin: 0 } .font--arial .goal-tab__name { font-family: Arial, Helvetica, sans-serif } @media (min-width: 48em) { .goal-tab__name { font-size: 18px; max-width: 140px; margin: 0 auto } } .goal-tab .icon { font-size: 11px; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased } .goal-tab .icon-leaf::before { content: '\e02c' } .goal-tab .icon-heart::before { content: '\e02a' } .goal-tab .icon-spark::before { content: '\e02b' } .goal-tab .icon-leaf::before, .goal-tab .icon-heart::before, .goal-tab .icon-spark::before { color: #fff; font-size: 13px } @media (min-width: 93.75em) { .goal-tab .icon-leaf::before, .goal-tab .icon-heart::before, .goal-tab .icon-spark::before { padding-right: 5px } } @media (min-width: 48em) { .goal-tab .icon-leaf::before, .goal-tab .icon-heart::before, .goal-tab .icon-spark::before { display: block; font-size: 36px; padding-bottom: 15px } } .goal-hero { position: relative } .goal-hero__image { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; width: 100%; height: 258px } @media (min-width: 48em) { .goal-hero__image { height: 432px } } .inline-key { float: left; margin: 0 0 2em; width: 100% } .inline-key__item { float: left; line-height: 20px; margin-bottom: 0.5em; position: relative; width: 50% } .inline-key__item--title { width: 100% } .inline-key__item-text { display: block; font-size: 14px; font-family: 'DINWebPro', Arial, Helvetica, sans-serif; margin: 0 0 0 25px } .inline-key__item-text--bold { font-size: 16px; font-family: 'DINWebPro-Bold', Arial, Helvetica, sans-serif; font-weight: bold; line-height: 24px; margin: 0 0 0 0; text-transform: uppercase } .inline-key__item-disc { background-color: #666666; border-color: #CCCCCC; border-radius: 50%; border-style: solid; border-width: 2px; display: inline-block; font-size: 12px; height: 20px; left: 0; line-height: 18px; position: absolute; text-align: center; top: 0; width: 20px } .inline-key__item-disc--achieved { background-color: #004976; background-image: url("../images/tiny_tick.png"); background-repeat: no-repeat; background-position: center center } .inline-key__item-disc--on { background-color: #54802D } .inline-key__item-disc--off { background-color: #D34400 } .inline-key__item-disc--percentage { background-color: #FFFFFF; border-color: #D0021B; color: #D0021B } @media (min-width: 768px) { .inline-key { display: table; float: none; margin: 0 auto 2em; width: auto } .inline-key__item { display: table-cell; float: none; padding: 0 40px 0 0; width: auto } .inline-key__item--title { width: auto } } .magazine-grid { margin-top: 35px !important } .magazine-grid a:hover img { opacity: 0.7 } .magazine-grid a.flex-child { color: #ffffff } .content-nest-accordion .result-filters { border-bottom: none !important } .mag__card { position: relative; min-height: 200px; transition: all 0.3s ease; box-shadow: 0 0 5px 0 transparent } .mag__card:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) } .mag__card:hover .mag__card__content__title:before { left: -0.9em } .mag__card .image-mask { margin: 0 !important; background: #000; border-radius: 10px 10px 0 0; border-bottom: 1px solid #ccc } .mag__card .image-mask--video:before { content: ""; top: 50%; background: url(../images/play.png); background-size: cover; width: 40px; height: 40px; display: block; position: absolute; z-index: 4; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50% } .mag__card--promoted { border: 1px solid #ccc; border-radius: 10px; background-size: cover; background-position: 50% 50%; margin-bottom: 20px; min-height: 300px } .mag__card--promoted.mag__card__content__title { color: #fff } .mag__card--promoted .mag__card__content__title--feature:before { top: 0.65em; font-size: 0.4em } @media (min-width: 93.75em) { .mag__card--promoted { min-height: 400px } } .mag__card--promoted:before { content: ''; position: absolute; background-color: #000; border-radius: 10px; width: 100%; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .mag__card--promoted:after { content: ""; border-radius: 0 0 10px 10px; width: 100%; height: 50%; position: absolute; z-index: 1; bottom: 0; background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%) } .mag__card--promoted:hover::before { opacity: 0.3 } .mag__card--promoted .mag__card__content { position: absolute; bottom: 0; z-index: 2; padding: 20px 30px; left: 0 } .mag__card--promoted .mag__card__content__date { color: #fff } .mag__card--promoted .mag__card__content__title { color: #fff; letter-spacing: -0.025em } .mag__card--padding { padding-top: 40px } .mag__card--tweet { background-color: #007dbb } .mag__card--tweet .mag__card__content { padding-bottom: 20px } .mag__card--tweet .mag__card__content__date { margin-top: 10px; margin-left: 0 } .mag__card__link { height: 100%; box-sizing: border-box; display: block } .mag__card__topic { z-index: 5; background-color: #007dbb; color: #fff; padding: 7px 15px 7px 15px; font-size: 13px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; position: absolute; top: 15px; left: 0; border-radius: 0 5px 5px 0 } .font--arial .mag__card__topic { font-family: Arial, Helvetica, sans-serif } .mag__card__image { width: 100%; border-radius: 10px 10px 0 0; transition: all 0.3s ease } .mag__card__content { padding: 20px 20px 10px 20px } .mag__card__content__date { display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; margin-bottom: 10px; margin-left: 8px } .font--arial .mag__card__content__date { font-family: Arial, Helvetica, sans-serif } .mag__card__content__date--tweet { color: #fff } .mag__card__content__title { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; display: block; color: #007DBB; position: relative; letter-spacing: normal; padding-left: 8px } .font--arial .mag__card__content__title { font-family: Arial, Helvetica, sans-serif } .mag__card__content__title--tweet { color: #fff; padding-left: 0; line-height: 1.5 } .mag__card__content__title--tweet a { color: #fff; text-decoration: underline } .mag__card__content__title--tweet a:hover { color: #fff; text-decoration: none } .mag__card__content__title:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: inline; transition: all 0.3s ease; font-size: 0.65em; position: absolute; top: 0.35em; left: -0.6em } .mag__card__content__title--feature:before { content: "\e021" } .mag__card__content__title--joinin:before { content: "\e021" } .mag__card__content__title--pressrelease:before { content: "\e021" } .mag__card__content__title--video:before { content: "\e021" } .mag__card__content--tweetlink { color: #fff; display: inline-block; font-family: Arial, Helvetica, sans-serif; margin-bottom: 14px; font-size: 11px } .mag__card__content--tweetlink:hover { color: #fff } .mag__card__content--tweetlink:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: inline; font-size: 16px; transition: all 0.3s ease; content: "\ea91"; margin-right: 5px; position: relative; top: 3px; margin-right: 5px } @media (min-width: 48em) { .flex { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between } } @media (min-width: 48em) { .flex .flex-container-inner { -ms-flex-preferred-size: 49%; flex-basis: 49%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: row; flex-direction: row } } .flex .flex-container-inner .flex-child { margin-bottom: 20px } .flex .flex-child { border: 1px solid #ccc; border-radius: 10px; -ms-flex: 0 0 48%; flex: 0 0 48%; padding-bottom: 20px; word-wrap: break-word; position: relative } .flex .flex-child .mag__card__content__title { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold } .flex .flex-child .mag__card__content__title--tweet { font-weight: normal } .flex .flex-large { border: 1px solid #ccc; border-radius: 10px; -ms-flex: 0 0 49%; flex: 0 0 49%; margin-bottom: 20px } @media (min-width: 48em) { .flex .flex-large { display: -ms-flexbox; display: flex } } .flex .flex-large .flex-child { border: none } @media (min-width: 48em) { .flex .flex-large .flex-child { -ms-flex-preferred-size: 100%; flex-basis: 100% } } @media (min-width: 48em) { .flex .flex-large .mag__card__content__title { font-size: 20px; letter-spacing: -0.025em; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif } .font--arial .flex .flex-large .mag__card__content__title { font-family: Arial, Helvetica, sans-serif } } @media (min-width: 48em) { .flex .flex-large .mag__card .image-mask:before { width: 56px; height: 56px } } .flex-news { margin-bottom: 2em !important } .flex-news .flex-child { height: auto; border: 1px solid #ccc; border-radius: 10px } @media (min-width: 48em) { .flex-news { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between } } .flex-news .flex-child { display: block; margin-bottom: 20px; -ms-flex: 0 0 23%; flex: 0 0 23% } @media (min-width: 48em) { .flex-news .flex-child { margin-bottom: 0 } } .flex-news .mag__card__content__title { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold } .flex-news .mag__card__content__title--tweet { font-weight: normal } .image-caption__image-container { border-radius: 10px } .image-caption__image { border-radius: 10px; width: 100%; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.4) } .image-caption__caption-container { padding-top: 15px; padding-bottom: 15px; text-align: left } .image-caption__caption { font-family: Helvetica; font-size: 12px; font-style: oblique; line-height: 14px; color: #9B9B9B } .goal-statement-box { border-radius: 10px; width: 100%; padding: 20px; color: #fff; margin-top: 30px } .goal-statement-box--green { background: #54802d } .goal-statement-box--pink { background: #d0006f } .goal-statement-box--blue { background: #007dbb } .goal-statement-box__heading { color: #fff; font-size: 24px; font-family: 'unilever_illustrative_betaRg'; letter-spacing: normal; line-height: 27px; margin-bottom: 0; padding: 0; text-align: left } @media (min-width: 48em) { .goal-statement-box__heading { font-size: 28px; line-height: 33px } } .goal-statement-box__intro-text { display: block; font-family: 'unilever_illustrative_betaBd' } .goal-statement-box__description { font-size: 16px; line-height: 24px; margin-top: 0; font-family: "DINWebPro", Arial, Helvetica, sans-serif } .goal-statement-box__text { margin-top: 8px; text-align: left } @media (max-width: 47.9375em) { .goal-statement-box__text { padding: 0 } } @media (min-width: 48em) { .goal-statement-box__text { margin-top: 0px } } .call-out { margin: 20px 0 80px; color: #fff; padding: 20px 15px 1px 20px; background: #007dbb; position: relative; word-break: break-word; border-radius: 10px } @media print { .call-out { padding: 0 } } .call-out h3 { color: #fff } .call-out p { line-height: 1.4 } .call-out p.footnote { color: #b8e2f3 } .call-out ul, .call-out ol { padding-left: 1.2em; line-height: 1.4 } .call-out li { padding-bottom: 0.5em } .call-out li:last-child { padding-bottom: 0 } .call-out a { color: #fff; font-weight: bold } .call-out.quote blockquote { color: #fff; padding: 0; margin: 0; position: relative; word-wrap: break-word; border: 0 } @media print { .call-out.quote blockquote { border: 0 } } .call-out.quote blockquote cite { margin-top: 45px; font-style: normal; left: -20px; line-height: 1.5; position: absolute } @media print { .call-out.quote blockquote cite { margin-top: 5px; position: static } } .call-out.quote blockquote:before { content: "" !important } .call-out.quote blockquote:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; display: block; color: #007dbb; font-size: 6.25rem; bottom: -98px; content: "\e00b"; left: 40px; position: absolute } @media print { .call-out.quote blockquote:after { display: none } } .call-out.quote blockquote p { color: #fff; line-height: 1.3; margin-bottom: 20px } .call-out.quote blockquote p strong { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-weight: normal } .font--arial .call-out.quote blockquote p strong { font-family: Arial, Helvetica, sans-serif } .call-out.quote.orange { background-color: #d34400 } .call-out.quote.orange blockquote:after { color: #d34400 } .call-out.quote.orange cite { color: #d34400 } .call-out.quote.red { background-color: #DA291C } .call-out.quote.red blockquote:after { color: #DA291C } .call-out.quote.red cite { color: #DA291C } .call-out.quote.green { background-color: #54802d } .call-out.quote.green blockquote:after { color: #54802d } .call-out.quote.green cite { color: #54802d } .call-out.quote.purple { background-color: #8A1B61 } .call-out.quote.purple blockquote:after { color: #8A1B61 } .call-out.quote.purple cite { color: #8A1B61 } .call-out.quote.pink { background-color: #d0006f } .call-out.quote.pink blockquote:after { color: #d0006f } .call-out.quote.pink cite { color: #d0006f } .call-out.quote.vividgreen { background-color: #78be20 } .call-out.quote.vividgreen blockquote:after { color: #78be20 } .call-out.info { background: #004976; margin-bottom: 3em; color: #fff } @media (max-width: 48em) { .call-out.info { padding-left: 15px } } @media (max-width: 48em) { .call-out.info { padding-left: 15px } } .call-out.info:before { content: "\e015"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.8rem; color: #fff; display: block; position: absolute; left: 22px; float: none } @media (max-width: 48em) { .call-out.info:before { left: 15px } } @media print { .call-out.info:before { left: 0 } } .call-out.info--green { background: #54802d } .call-out.info--pink { background: #d0006f } .call-out.info--blue { background: #007dbb } .call-out.info h3 { text-indent: 0; margin-top: 0; padding-left: 1.6em } @media (max-width: 48em) { .call-out.info h3 { padding: 4px 0 10px 35px } } .content-article .float-right .call-out { margin-bottom: 70px !important; position: relative; width: auto } .content-article .float-right .call-out.quote { margin-bottom: 110px !important } @media print { .content-article .float-right .call-out.quote { margin-bottom: 0 !important } } .content-article .float-right .call-out.quote blockquote::after { font-size: 4.6875rem } .content-article .float-right .call-out.quote blockquote p { font-size: 1em } @media screen and (min-width: 57.5em) { .content-article .float-right .call-out.quote blockquote p { font-size: 1.25em } } @media screen and (min-width: 93.75em) { .content-article .float-right .call-out.quote blockquote p { font-size: 1.625em } } @media screen and (min-width: 48em) and (max-width: 57.5em) { .content-article .float-right .call-out.quote blockquote cite { margin-top: 55px } } @media print, (min-width: 30em) { .content-article .float-right .call-out.info h3:before { position: static; float: left; font-size: 1.1em; padding-right: 5px } } .large-6 div.call-out.quote, .large-4 div.call-out.quote, .large-3 div.call-out.quote, .call-out.float-right { margin-bottom: 110px !important } @media print { .large-6 div.call-out.quote, .large-4 div.call-out.quote, .large-3 div.call-out.quote, .call-out.float-right { margin-bottom: 0 !important } } .large-6 div.call-out.quote blockquote::after, .large-4 div.call-out.quote blockquote::after, .large-3 div.call-out.quote blockquote::after, .call-out.float-right blockquote::after { font-size: 4.6875rem } .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.25em } @media (min-width: 93.75em) { .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.625em } } @media (max-width: 30em) { .large-6 div.call-out.quote blockquote p, .large-4 div.call-out.quote blockquote p, .large-3 div.call-out.quote blockquote p, .call-out.float-right blockquote p { font-size: 1.125em } } .large-9 .large-8 div.call-out.quote { margin-bottom: 110px } .call-out.quote.float-right blockquote cite { bottom: -94px } .blog-container { margin-bottom: 20px } .thumbnail-container { margin-bottom: 30px; display: table } @media (max-width: 48em) { .thumbnail-container { margin-top: 0 } } @media (min-width: 48em) { .thumbnail-container { float: left } } .thumbnail-img { display: none; float: left } .thumbnail-img img { max-height: 100px } @media (min-width: 30em) { .thumbnail-img { float: left; max-width: 100px; max-height: 100px; margin-right: 10px; display: block } } .thumbnail-img2 { float: left; max-width: 100px; margin-right: 10px } .thumbnail-img2 img { max-height: 100px } @media (max-width: 30em) { .thumbnail-img2 { float: left; margin-right: 10px; display: block } } .thumbnail-text-container { float: left; margin-top: 15px; font-family: "DINWebPro-bold", Arial, Helvetica, sans-serif } @media (max-width: 48em) { .thumbnail-text-container { float: none } } .thumbnail-text { font-size: 18px; color: #666666; font-weight: 600; margin-bottom: 0 } .thumbnail-text--normal { margin-bottom: 0 } .thumbnail-text a { font-weight: normal; font-size: medium; font-family: Arial, Helvetica, sans-serif } .overview-2017 { margin-top: -6px; margin-bottom: -2em } .overview-2017 p, .overview-2017 .link, .overview-2017 .body-copy { font-size: 22px; line-height: 1.5 } .overview-2017 .link--large-gap { margin-bottom: 60px; display: block } .overview-2017 p.intro { font-weight: bold } .overview-2017 h2 .bold { font-family: "DINWebPro-Bold" } .overview-2017 ul, .overview-2017 ol { list-style: none } .overview-2017 .chevron-list li { position: relative; padding-left: 25px; margin-bottom: 40px } .overview-2017 .chevron-list li::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; display: inline-block; font-size: 14px; position: absolute; left: 0; top: 8px } .overview-2017 section::before, .overview-2017 section::after, .overview-2017 section.two ol::before, .overview-2017 section.two ol::after { content: " "; display: table } .overview-2017 section::after, .overview-2017 section.two ol::after { clear: both } .theme-slp-2017 .footer { position: relative; z-index: 3 } .overview-2017 p.tweetable { font-size: 21px; position: relative; margin-left: -1.25em; padding: 1em 0; position: relative } .overview-2017 p.tweetable a { display: block; padding-left: 1.25em; border-left: 1px solid #007dbb; transition: all 0.333s ease-out; position: relative; z-index: 3 } .overview-2017 p.tweetable--custom a { color: #71C5EB; border-left: 1px solid #71C5EB } .overview-2017 p.tweetable a::after { content: ""; background-color: transparent; height: 100%; width: 1px; position: absolute; left: 0; top: 0; transition: all 0.333s ease-out } .overview-2017 p.tweetable a:hover::after { background-color: #f7f7f7; width: 100% } .overview-2017 p.tweetable a span { display: block; z-index: 2; position: relative; padding: 16px 40px 16px 0; transition: all 0.333s ease-out } .overview-2017 p.tweetable a:hover span { padding-right: 32px } .overview-2017 p.tweetable--custom a:hover span { color: #007dbb } .overview-2017 p.tweetable a small { display: block; font-size: 12px; font-weight: bold; margin-top: 12px } .overview-2017 p.tweetable a small::before { content: ""; top: 6px; position: relative; margin-right: 10px; background: url("../media/overview-slp2017/twitter-icon.png") 0 0 no-repeat; background-size: contain; height: 20px; width: 24px; display: inline-block } .overview-2017 p.tweetable a:hover { border-left: 8px solid #007dbb } .overview-2017 ul.slideshow { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0 } .overview-2017 ul.slideshow li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; transition: opacity 2500ms ease-in-out, -webkit-transform 4s ease !important; transition: opacity 2500ms ease-in-out, transform 4s ease !important } .overview-2017 ul.slideshow.mobile-safari li { background-attachment: scroll } .overview-2017 ul.slideshow li::after { position: absolute; width: 70%; height: 100%; display: block; background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 100%); top: 0; right: 0; bottom: auto; z-index: 1; content: ""; opacity: 1 } .overview-2017 ul.slideshow li { -webkit-transform-origin: bottom left; transform-origin: bottom left } .overview-2017 ul.slideshow li:nth-child(2) { -webkit-transform-origin: bottom right; transform-origin: bottom right } .overview-2017 ul.slideshow li:nth-child(3) { -webkit-transform-origin: bottom center; transform-origin: bottom center } .overview-2017 ul.slideshow li:nth-child(4) { -webkit-transform-origin: bottom left; transform-origin: bottom left } .overview-2017 ul.slideshow li:nth-child(5) { -webkit-transform-origin: bottom right; transform-origin: bottom right } .overview-2017 ul.slideshow li:first-child { position: relative; display: block; float: left } .overview-2017 ul.slideshow li.rslides1_on, .overview-2017 ul.slideshow li.rslides2_on, .overview-2017 ul.slideshow li.rslides3_on, .overview-2017 ul.slideshow li.rslides4_on { -webkit-transform: scale(1.04); transform: scale(1.04) } .overview-2017 .full-screen-list { position: relative; margin-bottom: 0 } .overview-2017 .full-screen-list__panel { background-color: #000000; height: 800px; height: 100vh; position: relative } .overview-2017 .full-screen-list__panel::before { background-size: cover; content: ''; position: absolute; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; top: 0; left: 0; width: 100%; height: 800px; height: 100vh; z-index: 1; opacity: 0; transition: opacity 1s ease-out; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 .full-screen-list__panel--first { min-height: 1300px; min-height: calc(100vh + 500px) } .overview-2017 .full-screen-list__panel--first::before { min-height: 1300px; min-height: calc(100vh + 500px) } .overview-2017 .full-screen-list__panel.visible::before { opacity: 1; transition: opacity 1s ease-out } .overview-2017 .full-screen-list .photo-attribution { position: fixed; bottom: 0; margin-bottom: 0; display: none; font-size: 12px } .overview-2017 .full-screen-list li div { left: 100px; position: absolute; height: 200px; width: 36vw; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); top: 35%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 3; opacity: 1; transition: opacity 2s ease-out } .overview-2017 .full-screen-list li .photo-attribution { padding: 10px 20px } .overview-2017 .full-screen-list li:last-child div { margin-top: -80px } section.three .full-screen-list li:first-child div, section.seven .full-screen-list li:first-child div:first-of-type { height: 250px; top: 35% } .overview-2017 .full-screen-list li div p { color: white; font-size: 18px } .overview-2017 .full-screen-list li:nth-child(odd) div:first-of-type { left: auto; right: 100px } .overview-2017 .full-screen-list li::after { position: absolute; width: 70%; height: 100%; display: block; background: linear-gradient(to right, transparent 0%, #000 100%); top: 0; right: 0; z-index: 1; content: ""; opacity: 0; transition: opacity 2s ease-out } .overview-2017 .full-screen-list li:nth-child(even)::after { background: linear-gradient(to left, transparent 0%, #000 100%); right: auto; left: -100px; opacity: 0; transition: opacity 2s ease-out } .overview-2017 .full-screen-list li.visible::after { opacity: 1; transition: opacity 2s ease-out } section.seven .full-screen-list.fixed li.shade::after { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; transition: opacity 2s ease-out } .overview-2017 .full-screen-list li img { opacity: 0; transition: all 2s ease; width: 270px; position: relative; top: 0 } .overview-2017 .full-screen-list li:nth-child(2) img { width: 310px } .overview-2017 .full-screen-list img.visible { top: 40px; opacity: 1 } .overview-2017 section.one { background-color: #000000; position: relative; margin-bottom: 0 } .overview-2017 section.one::before, .overview-2017 section.one::after, .overview-2017 section .slideshow::before, .overview-2017 section .slideshow::after, .overview-2017 section.eight::before, .overview-2017 section.eight::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: url("../media/overview-slp2017/hr.png") 0 0 no-repeat; background-size: 100% 5px; height: 5px; z-index: 20; pointer-events: none } .overview-2017 section.one::after, .overview-2017 section .slideshow::after, .overview-2017 section.eight::after { bottom: 0; top: auto; background-image: url("../media/overview-slp2017/hr_down.png") } .overview-2017 section.one .title { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 100px; width: 30vw; z-index: 5 } .overview-2017 section.one h1 { text-align: left; font-size: 42px; color: white; text-transform: uppercase; position: relative; font-family: "DINWebPro-Light"; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4) } .overview-2017 section.one h1 span { display: block } .overview-2017 section.one h1 .bold { font-weight: normal; font-family: "DINWebPro-Black"; font-size: 52px } .overview-2017 section.one p { color: #ffffff; font-weight: bold; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7) } .overview-2017 section.one .row { padding: 4em 0 0 } .overview-2017 section.one .row li { padding-bottom: 1em } .overview-2017 section.one ul.slideshow { background: #000000; height: 70vh; max-height: 680px; min-height: 520px; opacity: 0; transition: opacity 3.3s ease } .overview-2017 section.one ul.slideshow.visible { opacity: 1 } .overview-2017 section.one ul.slideshow li { height: 100% } .overview-2017 section.one ul.slideshow li:nth-child(1) { background-image: url(../media/overview-slp2018/girl-guides.jpg); background-position: 50% top } .overview-2017 section.one ul.slideshow li:nth-child(2) { background-image: url(../media/overview-slp2018/tractor.jpg); background-position: 50% bottom; -webkit-transform-origin: center right; transform-origin: center right } .overview-2017 section.one ul.slideshow li:nth-child(3) { background-image: url(../media/overview-slp2018/scything.jpg); background-position: 50% 50% } .overview-2017 section.one ul.slideshow li:nth-child(4) { background-image: url(../media/overview-slp2018/windfarm.jpg); background-position: 50% 50% } .overview-2017 section.one .scroll { font-family: Arial, Helvetica, sans-serif; color: #ffffff; cursor: pointer; display: inline-block; font-size: 18px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); position: relative; text-align: left; top: 50px } .overview-2017 section.one .scroll .bold { color: #ffffff } .overview-2017 section.one .scroll::after { content: ''; background: url(../media/overview-slp2017/arrow_down.svg) 0 50% no-repeat; position: relative; margin: 15px auto 0; height: 15px; width: 20px; display: block; background-size: contain; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-6px); transform: translateY(-6px) } 60% { -webkit-transform: translateY(-4px); transform: translateY(-4px) } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-6px); transform: translateY(-6px) } 60% { -webkit-transform: translateY(-4px); transform: translateY(-4px) } } .overview-2017 section.two { position: relative; background-color: #fff } .overview-2017 section.two > .row { padding: 4em 0 0 } .overview-2017 section.two > .row.without-padding-top { padding-top: 0 } .overview-2017 section.two .row .mobile { display: none } .overview-2017 section.two .large-12 { margin-top: -2em } .overview-2017 section.two .large-12 h2 { text-align: center; margin-bottom: 40px } .overview-2017 section.two .large-12 p { text-align: center } .overview-2017 section.two .large-12 p:last-child { margin-bottom: 3em } .overview-2017 section.two ol { text-align: center; padding: 0 0 4em; margin: 0 } .overview-2017 section.two ol li { width: 32%; float: left; margin-right: 2%; text-align: left; position: relative; border-radius: 10px; background-color: #007dbb; transition: all ease 0.3s } .overview-2017 section.two ol li:hover { -webkit-transform: scale(1.05); transform: scale(1.05); z-index: 4 } .overview-2017 section.two ol li:nth-child(1) { -webkit-transform-origin: center right; transform-origin: center right } .overview-2017 section.two ol li:nth-child(2) { background-color: #54802d } .overview-2017 section.two ol li:nth-child(3) { background-color: #d0006f; margin-right: 0; -webkit-transform-origin: center left; transform-origin: center left } .overview-2017 section.two ol li:nth-child(2) a { background-image: url(../media/overview-slp2017/icon-plant.png) } .overview-2017 section.two ol li:nth-child(3) a { background-image: url(../media/overview-slp2017/icon-spark.png) } .overview-2017 section.two ol li a { padding: 110px 20px 10px; border-radius: 10px; display: block; background-position: 50% 25px; background-repeat: no-repeat; background-image: url(../media/overview-slp2017/icon-heart.png); color: white; transition: all ease 0.3s } .overview-2017 section.two ol li a:hover, .overview-2017 section.two ol li a:focus, .overview-2017 section.two ol li a:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.2) } .overview-2017 section.two ol li p { color: white; margin-top: 0; text-align: center; font-size: 15px; line-height: 22px } .overview-2017 section.two ol li p .bold { opacity: 0.7; display: block; font-size: 42px; margin: 10px 0 0; letter-spacing: -0.04em; line-height: 1; font-family: "unilever_illustrative_betaBd" } .overview-2017 section.two .image-and-statement .tweet { font-size: 14px } .overview-2017 section.two .image-and-statement .tweet .icon { font-size: normal; font-size: 28px } @media print, (min-width: 48em) { .overview-2017 section.two .image-and-statement .image-and-statement__background { background-position: 80% center } .overview-2017 section.two .image-and-statement .image-and-statement__quote { padding: 100px 0 } .overview-2017 section.two .image-and-statement blockquote p { font-size: 1.8em; line-height: 1.2 } } @media print, (min-width: 67.5em) { .overview-2017 section.two .image-and-statement .image-and-statement__quote { padding: 165px 0 190px } .overview-2017 section.two .image-and-statement blockquote p { font-size: 2.25em } } .overview-2017 section.three { margin-top: 40px } .overview-2017 section.three h2 { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase } .font--arial .overview-2017 section.three h2 { font-family: Arial, Helvetica, sans-serif } .overview-2017 section.three .row { padding: 4em 0 0 } .overview-2017 section.three .row li { padding-bottom: 1em } .overview-2017 section.three .full-screen-list li:nth-child(1)::before { background-image: url("../media/overview-slp2018/farmer.jpg") } .overview-2017 section.three .full-screen-list li:nth-child(1)::after { background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.8) 95%) } .overview-2017 section.three .full-screen-list li:nth-child(1) .photo-attribution { left: 0; right: auto } .overview-2017 section.three .full-screen-list li:nth-child(2)::before { background-image: url("../media/overview-slp2018/refuse.jpg") } .overview-2017 section.three .full-screen-list li:nth-child(2) .photo-attribution { right: 0; left: auto } .overview-2017 section.three .full-screen-list li:nth-child(3)::before { background-image: url("../media/overview-slp2018/dry-chilli.jpg") } .overview-2017 section.three .full-screen-list li:nth-child(3)::after { background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.8) 95%) } .overview-2017 section.three .full-screen-list li:nth-child(3) .photo-attribution { left: 0; right: auto } .overview-2017 section.three .full-screen-list li:nth-child(4)::before { background-image: url("../media/overview-slp2018/runners.jpg") } .overview-2017 section.three .full-screen-list li:nth-child(4) .photo-attribution { right: 0; left: auto } .overview-2017 section.three.fixed .full-screen-list li::before { position: fixed } .overview-2017 section.three.fixed .full-screen-list li.shade::after { position: fixed } .overview-2017 section.three.fixed .full-screen-list .visible.shade + .visible.shade .photo-attribution { display: block } .overview-2017 section.four { position: relative; background-color: #fff; z-index: 3 } .overview-2017 section.four h2 { font-size: 26px; margin-bottom: 30px } .overview-2017 section.four h2 span { display: block; margin-top: 25px } .overview-2017 section.four h2 span + span { margin-top: 20px } .overview-2017 section.four .feature-image-with-description__statement-quote blockquote p { font-size: 28px; margin-bottom: 30px; line-height: 1.3 } .overview-2017 section.four .row { padding: 4em 0 2em } .overview-2017 section.four .large-12 { margin-top: -2em } .overview-2017 section.four .large-12 p { text-align: center } .overview-2017 section.five { position: relative; background-color: #ffffff; z-index: 3 } .overview-2017 section.five .video-height { background: #000000; height: 3000px } .overview-2017 section.five .video-shadow { content: ''; display: block; width: 100%; height: 100px; position: absolute; top: 400px; padding-top: 31%; left: 0; right: 0; background: linear-gradient(to bottom, transparent 0%, #000 60%, #000 100%) } .overview-2017 section.five .video-scroll { position: absolute; top: 0; left: 0; width: 100% } .overview-2017 section.five.fixed .video-shadow, .overview-2017 section.five.fixed .video-scroll { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 section.five img { display: none } .overview-2017 section.five .line1, .overview-2017 section.five .line2, .overview-2017 section.five .line3 { position: absolute; color: #ffffff; width: 50%; height: 200px; right: 0; left: 0; margin: 0 auto; z-index: 3 } .overview-2017 section.five .line1 p, .overview-2017 section.five .line2 p, .overview-2017 section.five .line3 p { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 42px; text-align: center; margin-bottom: 1.1em } .font--arial .overview-2017 section.five .line1 p, .font--arial .overview-2017 section.five .line2 p, .font--arial .overview-2017 section.five .line3 p { font-family: Arial, Helvetica, sans-serif } .overview-2017 section.five .line1 { top: 25% } .overview-2017 section.five .line2 { top: 50% } .overview-2017 section.five .line3 { top: 75% } .overview-2017 section.six { position: relative; background-color: #fff; z-index: 3 } .overview-2017 section.six .row { padding: 4em 0 3em } .overview-2017 section.six .large-12 { margin-top: -2em } .overview-2017 section.six h2 { margin-top: 60px } .overview-2017 section.six .large-12 p { text-align: center } .overview-2017 section.seven { position: relative; background-color: #fff; padding: 1em 0 0; z-index: 3 } .overview-2017 section.seven .row { padding: 4em 0 } .overview-2017 section.seven .row--custom { position: relative; background-color: #fff; max-width: none; text-align: center; z-index: 4 } .overview-2017 section.seven .full-screen-list li div { width: 32vw } .overview-2017 section.seven .full-screen-list li:nth-child(1)::before { background-image: url(../media/overview-slp2017/LOWRES_ULSLR17_PalmOil_Indonesia_2678-2.jpg) } .overview-2017 section.seven .full-screen-list.fixed li:nth-child(1)::before { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 section.seven .full-screen-list li:nth-child(1n)::after { background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 100%) } .overview-2017 section.seven .full-screen-list li:nth-child(2)::before { background-image: url(../media/overview-slp2017/Madagascar_March_2012_DB.jpg) } .overview-2017 section.seven .full-screen-list.fixed li:nth-child(2)::before { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 section.seven .full-screen-list li:nth-child(2n)::after { background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.6) 100%) } .overview-2017 section.seven .full-screen-list li:nth-child(3)::before { background-image: url(../media/overview-slp2017/UniCR_India_Lifebuoy_HIGHRES_8249.jpg) } .overview-2017 section.seven .full-screen-list.fixed li:nth-child(3)::before { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 section.seven .full-screen-list li:nth-child(3n)::after { background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 100%) } .overview-2017 section.seven .full-screen-list .scrollmagic-pin-spacer li div { left: 100px } .overview-2017 section.seven .full-screen-list .scrollmagic-pin-spacer li .map { left: auto } .overview-2017 section.seven .full-screen-list .scrollmagic-pin-spacer li::after { background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.85) 100%); right: auto; left: -100px } .overview-2017 section.seven .full-screen-list li:nth-child(4)::before { background-image: url(../media/overview-slp2017/UniCR_India_SHAKTHI_WOMAN_HIGH_RES_6874.jpg) } .overview-2017 section.seven .full-screen-list .scrollmagic-pin-spacer li::before { background-image: url(../media/overview-slp2017/UniCR_India_SHAKTHI_WOMAN_HIGH_RES_6874.jpg) } .overview-2017 section.seven .full-screen-list.fixed li:nth-child(4)::before { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0) } .overview-2017 section.seven .full-screen-list li .map { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 40%, transparent 70%, transparent 100%); width: 100%; height: auto; left: auto; top: auto; bottom: -305px; -webkit-transform: none; transform: none; padding: 20px 0; z-index: 4; transition: all 1s ease } .overview-2017 section.seven .full-screen-list li .map-two, .overview-2017 section.seven .full-screen-list li .map-four { background: linear-gradient(to left, rgba(0, 0, 0, 0.55) 40%, transparent 70%, transparent 100%); text-align: right; padding-right: 50px } .overview-2017 .full-screen-list.fixed li.map-animate-in .map { bottom: 0 } .overview-2017 .full-screen-list.fixed li.map-animate-in.map-animate-out .map { bottom: -305px } .overview-2017 .full-screen-list li .map::before { content: ''; display: inline-block; vertical-align: top; background-size: contain; background-repeat: no-repeat; width: 115px; height: 86px; margin-left: 20px; margin-bottom: 20px } .overview-2017 .full-screen-list li .map-one::before { background-image: url(../media/overview-slp2017/globe_1.png) } .overview-2017 .full-screen-list li .map-two::before { background-image: url(../media/overview-slp2017/globe_2.png) } .overview-2017 .full-screen-list li .map-three::before { background-image: url(../media/overview-slp2017/globe_3.png) } .overview-2017 .full-screen-list li .map-four::before { background-image: url(../media/overview-slp2017/globe_4.png) } .overview-2017 .full-screen-list li .map p { display: inline-block; vertical-align: top; width: 40%; font-size: 15px; margin-bottom: 0 } .overview-2017 .full-screen-list li .map-two p, .overview-2017 .full-screen-list li .map-four p { text-align: left } .overview-2017 section.eight { height: 80vh; min-height: 775px; position: relative; background: #000 url("../media/overview-slp2018/child-water.jpg") no-repeat; background-position: right 50%; overflow: hidden; z-index: 3 } .overview-2017 section.eight img { position: absolute; width: 100%; height: auto; top: 0; left: 0 } .overview-2017 section.eight .pseudo-shade { position: absolute; width: 50%; height: 100%; display: block; background: linear-gradient(to left, transparent 0%, #000 100%); top: 0; left: 0; z-index: 2 } .overview-2017 section.eight .video-view::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none } .overview-2017 section.eight p, .overview-2017 section.eight h2 { color: #ffffff } .overview-2017 section.eight .row { position: relative } .overview-2017 section.eight .content { width: 50%; position: absolute; top: 20vh; left: 20px; z-index: 5 } .overview-2017 section.eight p { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 34px } .font--arial .overview-2017 section.eight p { font-family: Arial, Helvetica, sans-serif } .overview-2017 section.eight h2 { font-size: 70px; color: white; display: block } .overview-2017 section.eight h2 .bold { display: block; font-weight: normal; font-family: "DINWebPro-Black" } .overview-2017 section.eight ul { margin-top: 10px } .overview-2017 section.eight li { margin-bottom: 10px } .overview-2017 section.eight li a { color: white; display: block; padding: 10px 0 10px 40px; background-size: 30px 30px; background-position: 0 40%; background-repeat: no-repeat; font-weight: bold; text-decoration: underline } .overview-2017 section.eight li.facebook a { background-image: url("../media/overview-slp2018/facebook-icon-white.png"); background-size: 25px 25px; background-position: 0px 40% } .overview-2017 section.eight li.twitter a { background-image: url("../media/overview-slp2017/twitter-icon-white.png"); background-size: 28px 22px } .overview-2017 section.eight li.linkedin a { background-image: url("../media/overview-slp2017/linkedin-icon-white.png"); background-size: 25px 25px } .overview-2017 section.eight li.linkedin { margin-right: 0 } .overview-2017 section.eight li a:hover { text-decoration: none } @media only screen and (min-width: 920px) and (max-width: 1280.9px) { .overview-2017 section.one h1 { font-size: 2.25em } } @media screen and (max-width: 919.9px) { .overview-2017 p, .overview-2017 p.tweetable { font-size: 16px } .overview-2017 p.tweetable { margin-left: 0 } .overview-2017 .full-screen-list li { background: #ffffff; height: auto; min-height: auto; padding-top: 400px } .overview-2017 .full-screen-list li div { background-color: #FFFFFF; padding: 20px 20px 20px 20px } .overview-2017 .full-screen-list li::before { height: 600px; min-height: initial; opacity: 1 } .overview-2017 .full-screen-list li::after { background: linear-gradient(to top, #fff 0%, transparent 100%) !important; background-position: 0 !important; height: 100px; left: auto !important; opacity: 1 !important; top: 301px; width: 100% } .overview-2017 .full-screen-list li .photo-attribution { padding: 5px; top: 0; bottom: auto; display: block; position: absolute } .overview-2017 .full-screen-list li div { position: relative; width: 100%; height: auto; top: auto; left: auto; bottom: auto; -webkit-transform: none; transform: none; text-shadow: none } .overview-2017 .full-screen-list li div h3 { color: #007dbb } .overview-2017 .full-screen-list li div p { color: #666666 } .overview-2017 .full-screen-list li:nth-child(odd) div:first-of-type { left: auto; right: auto } .overview-2017 .full-screen-list li img { display: none } .overview-2017 p, .overview-2017 .link, .overview-2017 .body-copy { font-size: 15px } .overview-2017 p.intro { font-size: 18px } .overview-2017 section.one .title { width: 100%; top: auto; bottom: 0; -webkit-transform: none; transform: none; right: auto; padding-left: 30px } .overview-2017 section.one .title p { display: none } .overview-2017 section.one h1 { font-size: 28px; text-shadow: none } .overview-2017 section.one h1::after { display: none } .overview-2017 section.one .scroll { display: none } .overview-2017 section.one ul.slideshow { height: 40vh; min-height: 330px; opacity: 1 !important } .overview-2017 ul.slideshow li { background-attachment: scroll } .overview-2017 ul.slideshow li.rslides1_on, .overview-2017 ul.slideshow li.rslides2_on, .overview-2017 ul.slideshow li.rslides3_on, .overview-2017 ul.slideshow li.rslides4_on { -webkit-transform: scale(1.1); transform: scale(1.1) } .overview-2017 ul.slideshow li::after { background: linear-gradient(to bottom, transparent 0%, #000 100%); width: 100%; height: 45%; top: auto; bottom: 0 } .overview-2017 section.one ul.slideshow li:nth-child(1) { background-position: 0 top } .overview-2017 section.one ul.slideshow li:nth-child(2) { background-position: 0 50% } .overview-2017 section.one { margin-bottom: 24px } .overview-2017 section.one .photo-attribution { padding: 6px; height: 24px; bottom: -24px; background-color: rgba(0, 0, 0, 0.1); color: #666; left: auto; right: 0 } .overview-2017 section.two .row .mobile { display: block; margin-bottom: 2em } .overview-2017 section.two ol li { float: none; clear: both; width: auto; margin: 1em 0 0 } .overview-2017 section.two ol li:hover { -webkit-transform: scale(1); transform: scale(1) } .overview-2017 section.two ol li a { background-position: 20px 20px; height: auto !important; padding: 20px 20px 5px 100px } .overview-2017 section.two .large-12 p { text-align: left } .overview-2017 section.two ol li:nth-child(3) a { background-size: 60px 49px } .overview-2017 section.two ol li p .bold { font-size: 32px } .overview-2017 section.two > .row { padding-top: 1.7em } .overview-2017 section.two .large-12 p:last-child { margin-bottom: 1.5em } .overview-2017 section.three .row { padding-top: 2.5em } .overview-2017 section.three .full-screen-list li:nth-child(2) .photo-attribution, .overview-2017 section.three .full-screen-list li:nth-child(4) .photo-attribution { left: 0; right: auto } section.three .full-screen-list li:first-child div, section.seven .full-screen-list li:first-child div:first-of-type { height: auto; top: auto } .overview-2017 section.three .full-screen-list li:nth-child(2)::before { background-position: 55% -70px } .overview-2017 section.three .full-screen-list li:nth-child(3)::before { background-position: 25% } .overview-2017 section.three .full-screen-list li:nth-child(4)::before { background-image: url(../media/overview-slp2017/LORES_ULSLR17_LEATHERHEAD_1642.jpg); background-position: 80% } .overview-2017 section.three h2 { color: #007dbb } .overview-2017 section.four .row { padding: 2em 0 0 } .overview-2017 section.five { background-color: #000000 } .overview-2017 section.five ul { display: none } .overview-2017 section.five .line1, .overview-2017 section.five .line2, .overview-2017 section.five .line3 { display: block; position: relative; width: 100%; height: auto; top: auto; right: auto; -webkit-transform: none; transform: none; padding: 30px 20px 0 } .overview-2017 section.five .line1 p, .overview-2017 section.five .line2 p, .overview-2017 section.five .line3 p { font-size: 24px } .overview-2017 section.five .video-wrapper { display: none } .overview-2017 section.five img { display: block } .overview-2017 section.six .row { padding: 2em 0 1em } .overview-2017 section.seven .full-screen-list li { padding-bottom: 0 } .overview-2017 section.seven .full-screen-list li div { width: 100% } .overview-2017 section.seven .full-screen-list li:nth-child(1)::before { background-position: 20% 0px } .overview-2017 section.seven .full-screen-list li:nth-child(2)::before { background-position: 50% -90px } .overview-2017 section.seven .full-screen-list li:nth-child(3)::before { background-position: 20% -100px } .overview-2017 section.seven .full-screen-list li:nth-child(4)::before { background-position: 30% -100px } .overview-2017 section.seven .full-screen-list li .map { display: block; position: relative; text-align: left; background: none; background-color: #007dbb; padding: 30px 20px 30px; opacity: 1; bottom: 0; transition: all } .overview-2017 .full-screen-list li .map::before { display: block; width: 172px; height: 66px; top: 60px; margin-left: 0 } .overview-2017 .full-screen-list li .map p { display: block; width: 100%; color: #ffffff } .overview-2017 section.seven .row { padding: 2em 0 1em } .overview-2017 section.seven .row--custom { text-align: left } .overview-2017 section.eight { height: auto; background-position: 0 0 } .overview-2017 section.eight .content { position: relative; width: 98%; top: auto; padding-top: 70% } .overview-2017 section.eight h2 { font-size: 32px } .overview-2017 section.eight .pseudo-shade { width: 100%; height: 80%; background: linear-gradient(to top, #000 0%, #000 60%, rgba(0, 0, 0, 0.8) 80%, transparent 100%); top: auto; bottom: 0 } .overview-2017 section.eight { background-size: contain } .overview-2017 section.eight .photo-attribution { top: 0; bottom: auto } .overview-2017 section.eight .video-view { display: none } } @media only screen and (min-width: 550px) and (max-width: 919.9px) { .overview-2017 section.one ul.slideshow li:nth-child(3) { background-position: 0 bottom } .overview-2017 section.one h1 { font-size: 38px } .overview-2017 section.one h1 .bold { font-size: 42px } .overview-2017 section.eight .pseudo-shade { height: 60% } .overview-2017 section.eight h2 { font-size: 40px } } @media screen and (max-width: 768.9px) { .overview-2017 { margin-bottom: 0 } .overview-2017 .full-screen-list li:last-child div { margin-top: 0 } } .image-stat-graphic-block .image-stat-container { position: relative; margin-bottom: 40px } .image-stat-graphic-block .main-image { width: 100%; padding-top: 56.25%; background-size: cover } .image-stat-graphic-block .main-image-caption { margin: 10px 15px; color: #9B9B9B; font-size: .75em; font-style: italic } .image-stat-graphic-block .info-box { position: relative; z-index: 1; display: table; width: 100% } .image-stat-graphic-block .box-1 { background-color: #00A9E0 } .theme-ubrand .image-stat-graphic-block .box-1 { background-color: #FFDD3E } .image-stat-graphic-block .box-1, .image-stat-graphic-block .box-2 { width: 50%; display: table-cell; vertical-align: middle; text-align: center } .image-stat-graphic-block .graphic { width: 100%; height: 100%; position: relative } .image-stat-graphic-block .icon { width: 70px; height: 85px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; fill: #225FB2 } .theme-ubrand .image-stat-graphic-block .icon { fill: #F43E4F; width: 100%; height: auto; max-width: 120px; max-height: 120px } .image-stat-graphic-block .info-wrap { height: 100%; padding: 0 } .image-stat-graphic-block .info { background: #eeeeee; width: 100%; height: 100%; text-align: left; padding: 20px } .image-stat-graphic-block dl { margin-bottom: 0 } .image-stat-graphic-block dl dt, .image-stat-graphic-block dl dt p { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; color: #005EB8; font-size: 42px; line-height: 1.2; margin-bottom: 0; word-wrap: break-word } .font--arial .image-stat-graphic-block dl dt, .font--arial .image-stat-graphic-block dl dt p { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .image-stat-graphic-block dl dt, .image-stat-graphic-block dl dt p { font-size: 56px } } .image-stat-graphic-block dl dd, .image-stat-graphic-block dl dd p { font-size: 13px; word-wrap: break-word } @media print, (min-width: 48em) { .image-stat-graphic-block dl dd, .image-stat-graphic-block dl dd p { font-size: 15px } } .image-stat-graphic-block dd { margin-bottom: 0 } .image-stat-graphic-block .image-container { margin-top: -30px } .image-stat-graphic-block--full-image .image-container { margin-top: 0px } .image-stat-graphic-block--blue .box-1 { background: #dcf1fa } .image-stat-graphic-block--blue .graphic { color: #007dbb } .image-stat-graphic-block--blue .icon { fill: #007dbb; position: relative; width: 95% } .image-stat-graphic-block--blue dl dt { color: #007dbb } .image-stat-graphic-block--green .box-1 { background: #e4f0c3 } .image-stat-graphic-block--green .graphic { color: #54802d } .image-stat-graphic-block--green .icon { fill: #54802d; position: relative; width: 95% } .image-stat-graphic-block--green dl dt { color: #54802d } .image-stat-graphic-block--pink .box-1 { background: #fbeaf4 } .image-stat-graphic-block--pink .graphic { color: #d0006f } .image-stat-graphic-block--pink .icon { fill: #d0006f; position: relative; width: 95% } .image-stat-graphic-block--pink dl dt { color: #d0006f } @media print, (min-width: 48em) { .image-stat-graphic-block .image-stat-container { padding-bottom: 80px } .image-stat-graphic-block .image-stat-container .info-box { position: absolute; right: 0; bottom: 0; width: 234px; display: block; margin-right: 25px } .image-stat-graphic-block .image-stat-container .info-box .box-1, .image-stat-graphic-block .image-stat-container .info-box .box-2 { width: 100%; display: block; height: 234px } .image-stat-graphic-block .image-stat-container .info-box .info { padding: 25px } .image-stat-graphic-block .image-stat-container .image-container { margin-top: 0; margin-left: calc(8.33% + 15px); margin-right: calc(8.33% + 15px) } .image-stat-graphic-block .image-stat-container .main-image-caption { text-align: left; max-width: calc(100% - 234px) } .image-stat-graphic-block--full-image .image-stat-container { padding-bottom: 122px } } @media (min-width: 67.5em) { .image-stat-graphic-block { margin-bottom: 25px } .image-stat-graphic-block .image-stat-container { float: right; width: 50%; text-align: right; margin-bottom: 0 } .image-stat-graphic-block .image-stat-container .image-container { margin-left: 15px; margin-right: 0 } .image-stat-graphic-block .image-stat-container .main-image-caption { width: 50% } .image-stat-graphic-block--full-image { margin-bottom: 0 } .image-stat-graphic-block--full-image .image-stat-container { position: relative; float: none; left: 0; width: calc(50vw + 416px); text-align: left; margin-top: 30px; margin-bottom: 60px; padding-bottom: 0 } .image-stat-graphic-block--full-image .image-stat-container .info-box { margin-right: 0; bottom: auto; top: 50%; margin-top: -234px } .image-stat-graphic-block--full-image .image-stat-container .image-container { margin-left: 0; margin-right: 117px } .image-stat-graphic-block--full-image .image-stat-container .main-image-caption { width: calc(100% - 300px); margin-left: calc(50vw - 493px) } } @media (min-width: 93.75em) { .image-stat-graphic-block--full-image .image-stat-container { width: calc(50vw + 565px) } .image-stat-graphic-block--full-image .image-stat-container .main-image-caption { margin-left: calc(50vw - 665px) } } .graphic-and-statistics { color: #fff; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding: 15px 0 30px 0; position: relative } @media print, (min-width: 48em) { .graphic-and-statistics { -ms-flex-direction: row; flex-direction: row } } .graphic-and-statistics__split { min-height: 210px } .graphic-and-statistics__split::before { content: ''; background-color: #00A9E0; position: absolute; top: 0; bottom: 0; left: -50vw; right: 50% } .graphic-and-statistics__split::after { content: ''; background-color: #0085CE; position: absolute; top: 0; bottom: 0; left: 50%; right: 0 } .theme-ubrand .graphic-and-statistics__split::before { background-color: #015DEE } .theme-ubrand .graphic-and-statistics__split::after { background-color: #6ADED7 } @media print, (min-width: 48em) { .graphic-and-statistics__split { min-height: 100% } } .graphic-and-statistics__logo { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; z-index: 1; width: 150px; height: 150px } .theme-ubrand .graphic-and-statistics__logo { width: auto; height: auto; max-height: 150px; max-width: 200px } .graphic-and-statistics dl { display: table-row } .graphic-and-statistics dt, .graphic-and-statistics dd { display: table-cell; vertical-align: top } .graphic-and-statistics dt { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 3em; line-height: 1.2; padding: 0 25px 20px 15px } .font--arial .graphic-and-statistics dt { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .graphic-and-statistics dt { font-size: 3.5em } } .graphic-and-statistics dd { line-height: 24px; padding-right: 15px; padding-bottom: 20px; font-size: .8125em } @media print, (min-width: 48em) { .graphic-and-statistics dd { font-size: .875em } } @media (min-width: 67.5em) { .graphic-and-statistics dd { font-size: .9375em } } .graphic-and-statistics__content { background-color: #005EB8; padding-top: 50px; padding-bottom: 30px } .theme-ubrand .graphic-and-statistics__content { background-color: #030A8E } .graphic-and-statistics--blue .graphic-and-statistics__split:before, .graphic-and-statistics--blue .graphic-and-statistics__split:after, .graphic-and-statistics--green .graphic-and-statistics__split:before, .graphic-and-statistics--green .graphic-and-statistics__split:after, .graphic-and-statistics--pink .graphic-and-statistics__split:before, .graphic-and-statistics--pink .graphic-and-statistics__split:after { content: none } .graphic-and-statistics--blue .graphic-and-statistics__content, .graphic-and-statistics--green .graphic-and-statistics__content, .graphic-and-statistics--pink .graphic-and-statistics__content { background: #eee } .graphic-and-statistics--blue .graphic-and-statistics__content dd, .graphic-and-statistics--green .graphic-and-statistics__content dd, .graphic-and-statistics--pink .graphic-and-statistics__content dd { color: #333 } .graphic-and-statistics--blue { color: #007dbb } .graphic-and-statistics--blue .graphic-and-statistics__graphic { background: #bbe8ff } .graphic-and-statistics--blue .graphic-and-statistics__logo { fill: #007dbb; color: #007dbb } .graphic-and-statistics--green { color: #54802d } .graphic-and-statistics--green .graphic-and-statistics__graphic { background: #d5eac2 } .graphic-and-statistics--green .graphic-and-statistics__logo { fill: #54802d; color: #54802d } .graphic-and-statistics--pink { color: #d0006f } .graphic-and-statistics--pink .graphic-and-statistics__graphic { background: #ffd0e9 } .graphic-and-statistics--pink .graphic-and-statistics__logo { fill: #d0006f; color: #d0006f } .image-and-statement { margin-bottom: 40px; position: relative } @media print, (min-width: 48em) { .image-and-statement { min-height: 600px; margin-top: 30px; margin-bottom: 60px } } .image-and-statement__background { background-position: right; background-repeat: no-repeat; background-size: cover; padding-top: 56.25%; position: relative; top: 0; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: 0 } @media print, (min-width: 48em) { .image-and-statement__background { height: auto; padding-top: 0; position: absolute; width: 100% } } @media (min-width: 67.5em) { .image-and-statement__background { width: calc(50vw + 500px - 20px) } } @media (min-width: 93.75em) { .image-and-statement__background { position: absolute; width: calc(50vw + 680px - 20px) } } .image-and-statement__quote { background-color: #101010; margin: 0; padding: 30px 30px 30px 50px } .image-and-statement__quote::before .image-and-statement__quote::after { content: '' } .image-and-statement__quote--has-author p::before { content: "\201C"; left: -30px; top: -20px; display: inline-block; font-family: "Georgia", serif; font-size: 3.5rem; position: absolute; line-height: 1.4; color: #fff } @media print, (min-width: 48em) { .image-and-statement__quote--has-author p::before { font-size: 6rem; top: -40px; content: "\201c"; left: -50px } } .image-and-statement__quote--has-author p::after { content: '\201d'; display: inline } @media print, (min-width: 48em) { .image-and-statement__quote { background-color: transparent; padding: 165px 0 190px 0 } } .image-and-statement__tweet .tweet { color: #fff } @media print, (min-width: 48em) { .image-and-statement__tweet .tweet { margin-top: 15px } } @media (min-width: 67.5em) { .image-and-statement__tweet .tweet { margin-top: 60px } } .image-and-statement p, .image-and-statement cite { color: #fff } .image-and-statement blockquote p { font-size: 1.25em; line-height: 26px; text-transform: none; margin-bottom: 25px; position: relative } .image-and-statement blockquote p::first-letter { text-transform: uppercase } @media print, (min-width: 48em) { .image-and-statement blockquote p { font-size: 2.25em; line-height: 43px; margin-bottom: 40px } } .image-and-statement__author { font-size: 1.125em; line-height: 24px } @media print, (min-width: 48em) { .image-and-statement--with-light-bg p, .image-and-statement--with-light-bg cite { color: #666 } .image-and-statement--with-light-bg .image-and-statement__quote--has-author p::before { color: #666 } .image-and-statement--with-light-bg .image-and-statement__tweet .tweet { color: #007dbb } } .full-header, .full-article-banner { position: relative; height: 65vh; min-height: 480px; margin-top: -6px } .full-header .bg-image, .full-article-banner .bg-image { background-repeat: no-repeat; background-size: cover; background-position: top right; width: 100%; height: 100% } .full-header .bg-image::before, .full-header .bg-image::after, .full-article-banner .bg-image::before, .full-article-banner .bg-image::after { content: ''; position: absolute; background: url(../images/hr.png) center bottom no-repeat; background-size: cover; height: 5px; width: 100%; top: 0; left: 0; z-index: 1 } .full-header .bg-image::after, .full-article-banner .bg-image::after { background-image: url(../images/hr_down.png); top: auto; bottom: 0 } .full-header .bg-gradient, .full-article-banner .bg-gradient { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.8) 0%, transparent 70%) } .theme-ubrand .full-header .bg-gradient, .theme-ubrand .full-article-banner .bg-gradient { background: radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.4) 0%, transparent 70%) } .full-header .bg-gradient.bg-gradient--bottom, .full-article-banner .bg-gradient.bg-gradient--bottom { background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%) } .full-header .image-caption, .full-article-banner .image-caption { position: relative; z-index: 1; margin-bottom: 10px; margin-top: -1.25em } .full-header .image-caption p, .full-article-banner .image-caption p { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; margin-bottom: 0; font-size: 1.25em } .font--arial .full-header .image-caption p, .font--arial .full-article-banner .image-caption p { font-family: Arial, Helvetica, sans-serif } .full-header .intro-text p, .full-article-banner .intro-text p { font-size: .9375em } .full-header .page-title, .full-article-banner .page-title { font-family: "DINWebPro", Arial, Helvetica, sans-serif; color: #007CBD; text-transform: none; margin-top: 10px } .font--arial .full-header .page-title, .font--arial .full-article-banner .page-title { font-family: Arial, Helvetica, sans-serif } .full-header--silver .banner-info, .full-article-banner--silver .banner-info { position: relative; margin-top: 0; z-index: 1 } .full-header--silver time, .full-article-banner--silver time { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 11px; display: block; margin-top: 18px; margin-bottom: 10px } .font--arial .full-header--silver time, .font--arial .full-article-banner--silver time { font-family: Arial, Helvetica, sans-serif } .full-header--silver-alternative, .full-article-banner--silver-alternative { position: static; height: auto; min-height: 0; margin-bottom: 20px } .full-header--silver-alternative .silver-banner-alternative-container, .full-article-banner--silver-alternative .silver-banner-alternative-container { position: relative; height: 65vh; min-height: 480px; color: #ffffff } .full-header--silver-alternative .page-title, .full-article-banner--silver-alternative .page-title { color: #ffffff; padding-bottom: 0 } .full-header--silver-alternative .bg-gradient, .full-article-banner--silver-alternative .bg-gradient { display: block } .full-header--silver-alternative .banner-info-container, .full-article-banner--silver-alternative .banner-info-container { position: absolute; bottom: 20px; left: 0; right: 0 } .full-header--silver-alternative time, .full-article-banner--silver-alternative time { margin-top: 0 } .full-header--silver-alternative .intro-text p, .full-article-banner--silver-alternative .intro-text p { margin: 20px 0 0 } .full-header--top-right-bg .bg-image, .full-article-banner--top-right-bg .bg-image { background-position: right top } .full-header--top-centre-bg .bg-image, .full-article-banner--top-centre-bg .bg-image { background-position: center top } .full-header--top-left-bg .bg-image, .full-article-banner--top-left-bg .bg-image { background-position: left top } .full-header--centre-right-bg .bg-image, .full-article-banner--centre-right-bg .bg-image { background-position: right center } .full-header--centre-centre-bg .bg-image, .full-article-banner--centre-centre-bg .bg-image { background-position: 50% 50% } .full-header--centre-left-bg .bg-image, .full-article-banner--centre-left-bg .bg-image { background-position: left center } .full-header--bottom-right-bg .bg-image, .full-article-banner--bottom-right-bg .bg-image { background-position: right bottom } .full-header--bottom-centre-bg .bg-image, .full-article-banner--bottom-centre-bg .bg-image { background-position: center bottom } .full-header--bottom-left-bg .bg-image, .full-article-banner--bottom-left-bg .bg-image { background-position: left bottom } @media print, (min-width: 48em) { .full-header, .full-article-banner { margin: 20px 0 40px } .full-header .bg-gradient, .full-article-banner .bg-gradient { display: block } .full-header .image-caption, .full-article-banner .image-caption { margin-top: 0 } .full-header .image-caption p, .full-article-banner .image-caption p { font-size: 1.875em; padding-bottom: 0 } .full-header .banner-info-container, .full-article-banner .banner-info-container { position: absolute; bottom: 20px; left: 0; right: 0 } .theme-ubrand .full-header .banner-info-container .large-push-1, .theme-ubrand .full-article-banner .banner-info-container .large-push-1 { left: 0 } .full-header .page-title, .full-article-banner .page-title { color: #ffffff } .full-header .intro-text p, .full-article-banner .intro-text p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1.125em } .font--arial .full-header .intro-text p, .font--arial .full-article-banner .intro-text p { font-family: Arial, Helvetica, sans-serif } .full-header .intro-text a, .full-article-banner .intro-text a { color: white; text-decoration: underline } .full-header .intro-text a:hover, .full-header .intro-text a:focus, .full-header .intro-text a:active, .full-article-banner .intro-text a:hover, .full-article-banner .intro-text a:focus, .full-article-banner .intro-text a:active { text-decoration: none } .full-header--silver, .full-article-banner--silver { margin-bottom: 120px } .full-header--silver .banner-info-container, .full-article-banner--silver .banner-info-container { bottom: -80px } .full-header--silver .banner-info, .full-article-banner--silver .banner-info { background: #ffffff; padding: 15px 30px 0; border-radius: 10px 10px 0 0 } .full-header--silver .page-title, .full-article-banner--silver .page-title { color: #007CBD; font-size: 1.875em } .full-header--silver .intro-text p, .full-article-banner--silver .intro-text p { font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 1em } .full-header--silver time, .full-article-banner--silver time { margin-top: 8px } .full-header--silver .intro-text a, .full-article-banner--silver .intro-text a { color: #007dbb; text-decoration: none } .full-header--silver-alternative, .full-article-banner--silver-alternative { margin-bottom: 30px } .full-header--silver-alternative .banner-info-container, .full-article-banner--silver-alternative .banner-info-container { bottom: 20px } .full-header--silver-alternative .banner-info, .full-article-banner--silver-alternative .banner-info { background: none; padding: 0; border-radius: 0 } .full-header--silver-alternative .intro-text p, .full-article-banner--silver-alternative .intro-text p { margin-top: 30px } .full-header--silver-alternative .page-title, .full-article-banner--silver-alternative .page-title { color: #ffffff } .full-header--silver-alternative time, .full-article-banner--silver-alternative time { margin-top: 0 } } @media (min-width: 67.5em) { .full-header .page-title, .full-article-banner .page-title { font-size: 3em } .full-header .image-caption p, .full-article-banner .image-caption p { font-size: 2.5em } .full-header--silver, .full-article-banner--silver { margin-bottom: 30px } .full-header--silver .banner-info-container, .full-article-banner--silver .banner-info-container { bottom: 0px } .full-header--silver .banner-info, .full-article-banner--silver .banner-info { overflow: auto } .full-header--silver .intro-text p, .full-article-banner--silver .intro-text p { font-size: 1.125em } .full-header--silver .page-title, .full-article-banner--silver .page-title { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 2.25em } .font--arial .full-header--silver .page-title, .font--arial .full-article-banner--silver .page-title { font-family: Arial, Helvetica, sans-serif } .full-header--silver-alternative .banner-info-container, .full-article-banner--silver-alternative .banner-info-container { bottom: 20px } .full-header--silver-alternative .banner-info, .full-article-banner--silver-alternative .banner-info { overflow: visible } .full-header--silver-alternative .intro-text p, .full-article-banner--silver-alternative .intro-text p { margin-top: 40px } } .banner-with-linkbox { margin-bottom: 40px } .banner-with-linkbox__banner { position: relative; height: 300px; background-size: cover; background-position: 0 30%; border: solid 1px #ccc; border-radius: 5px } .banner-with-linkbox__info { position: absolute; top: 60%; left: 5%; right: 5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 20px; background-color: #fff; border-radius: 5px } @media print, (min-width: 48em) { .banner-with-linkbox__info { width: 66% } } .banner-with-linkbox h2 { font-size: 1.125em } @media print, (min-width: 48em) { .banner-with-linkbox h2 { font-size: 1.25em } } @media (min-width: 67.5em) { .banner-with-linkbox h2 { font-size: 1.625em } } .banner-with-linkbox p, .banner-with-linkbox a { font-size: .8125em } @media print, (min-width: 48em) { .banner-with-linkbox p, .banner-with-linkbox a { font-size: .875em } } @media (min-width: 67.5em) { .banner-with-linkbox p, .banner-with-linkbox a { font-size: .9375em } } .banner-with-linkbox p { margin-bottom: 10px } .banner-with-linkbox a { position: relative } .banner-with-linkbox a::before { font-size: .75em } .banner-with-linkbox--alternate .banner-with-linkbox__banner { border: none; border-radius: 0 } .banner-with-linkbox--alternate .banner-with-linkbox__info { border-radius: 0; background-color: rgba(0, 0, 0, 0.6); color: #fff } .banner-with-linkbox--alternate .banner-with-linkbox__info h2, .banner-with-linkbox--alternate .banner-with-linkbox__info p, .banner-with-linkbox--alternate .banner-with-linkbox__info a { color: #fff } .unilever-timeline-container { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .unilever-timeline__skybox { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } .unilever-timeline__overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; z-index: 5000 } @media print, (min-width: 48em) { .unilever-timeline__overlay { padding: 20px } } @media (min-width: 93.75em) { .unilever-timeline__overlay { padding: 40px } } .unilever-timeline__card-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4 } .unilever-timeline__background { background: #fff; left: 0; top: 0; width: 100vw; height: 100vh; opacity: 0.8; position: absolute } .unilever-timeline__card-background { background: #000; top: 0; left: 0; right: 0; bottom: 0; height: 100%; opacity: 0.7; z-index: 1 } .unilever-timeline__card-detail { background-color: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80vw; max-height: 90vh; z-index: 2 } @media print, (min-width: 48em) { .unilever-timeline__card-detail { max-width: 50vw } } @media (min-width: 93.75em) { .unilever-timeline__card-detail { max-width: 30vw } } .unilever-timeline__close { background: rgba(255, 255, 255, 0.5); border: none; border-radius: 5px; box-shadow: none; color: #007dbb; display: -ms-flexbox; display: flex; font-size: 14px; font-weight: bold; -ms-flex-align: center; align-items: center; margin: 0; position: absolute; top: 10px; right: 56px; padding: 4px 12px; transition: all ease 0.3s; z-index: 1 } .unilever-timeline__close::after { content: '\00d7'; display: inline-block; font-size: 1.5rem; padding: 0 0 0 5px } @media print, (min-width: 48em) { .unilever-timeline__close::after { font-size: 2rem; padding: 0 0 0 10px } } .unilever-timeline__close:hover, .unilever-timeline__close:focus { background: #fff; border: none; color: #007dbb } .unilever-timeline__close-icon::after { content: '\e001'; color: #007dbb; display: inline-block; font-family: 'unilever-iconfont'; font-size: 1rem; position: absolute; top: 20px; right: 20px } .unilever-timeline__close-icon:hover, .unilever-timeline__close-icon:focus { cursor: pointer } .unilever-timeline__container { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #eeeeee } .unilever-timeline__content-header { -ms-flex: none; flex: none } .unilever-timeline__content { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding: 20px } @media print, (min-width: 48em) { .unilever-timeline__content { padding: 30px 30px 15px } } .unilever-timeline__content .jspVerticalBar { background: none } .unilever-timeline__content .jspTrack, .unilever-timeline__content .jspDrag { border-radius: 50px } .unilever-timeline__content .jspTrack { background-color: #ccc } .unilever-timeline__content .jspDrag { background-color: #999 } .unilever-timeline__content-label { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; margin-bottom: 0 } .unilever-timeline__inner-content { max-height: 300px; overflow: auto } .unilever-timeline__inner-content ul { padding-left: 16px } @media print, (min-width: 48em) { .unilever-timeline__inner-content { max-height: 380px } } .unilever-timeline__actions { background-color: #fff; padding: 0 20px 20px } @media print, (min-width: 48em) { .unilever-timeline__actions { padding: 0 30px 30px } } .unilever-timeline__pagination { -ms-flex-pack: justify; justify-content: space-between } .unilever-timeline__previous, .unilever-timeline__next { font-family: "Arial", "Helvetica", sans-serif; font-size: 14px; font-weight: 700; margin: 0 15px } .unilever-timeline__view-buttons { position: absolute; bottom: 80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 3 } @media print, (min-width: 48em) { .unilever-timeline__view-buttons { bottom: 83px; right: 133px; -webkit-transform: translateX(0); transform: translateX(0); left: auto } } .unilever-timeline__view-buttons .timeline-button { font-size: 14px; text-decoration: none; box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.17); border-radius: 50px; padding: 10px 10px 10px 40px; transition: all ease 0.3s; display: block; font-family: Arial; font-weight: bold; color: #007DBB } .unilever-timeline__view-buttons .timeline-button--view2d { background: url("../images/timeline/view2d.svg") 10px 6px no-repeat #fff; background-size: 23px; background-position: 10px } .unilever-timeline__view-buttons .timeline-button--view3d { background: url("../images/timeline/view3d.svg") 10px 6px no-repeat #fff; background-size: 23px; background-position: 10px } @media print, (min-width: 48em) { .unilever-timeline__view-buttons .timeline-button--view2d, .unilever-timeline__view-buttons .timeline-button--view3d { background-position: 7px 50%; background-size: 40px; padding: 20px 20px 20px 58px } } .unilever-timeline__view-buttons .timeline-button:hover { color: #004976; box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.37); -webkit-transform: scale(1.04); transform: scale(1.04) } .unilever-timeline__image-wrap { background: #fff; margin-bottom: 20px; position: relative; padding-top: 56.25% } .unilever-timeline__image-wrapped { position: absolute; top: 0; left: 0 } .unilever-timeline__card { width: 450px } .unilever-timeline__card * { box-sizing: border-box } .unilever-timeline__card:active { box-shadow: unset; top: 2px } .unilever-timeline__card a { display: block; text-decoration: none; border-radius: 10px; overflow: hidden; position: relative; max-width: 450px; height: 300px; border-radius: 10px; background-color: #fff; position: relative; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) } .unilever-timeline__card header { position: absolute; padding: 10px; top: 0; left: 0; right: 0; z-index: 4; background: white; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card a:hover header { background-color: #007dbb; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card header::after { position: absolute; bottom: -5px; left: 0; right: 0; background: url("../images/timeline/hr.png") 0 0 no-repeat; background-size: cover; height: 5px; width: 100%; z-index: 3; content: ""; transition: all ease 0.25s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card header span.label { display: block; font-family: "DINWebPro-bold", Arial, Helvetica, sans-serif; font-size: 14px; color: #666; transition: all ease 0.25s; position: relative; padding-bottom: 3px; z-index: 3; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card a:hover header span.label, .unilever-timeline__card a:hover header h2 { color: #fff } .unilever-timeline__card header h2 { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; padding-bottom: 0; letter-spacing: -0.025em; transition: all ease 0.25s; z-index: 3; position: relative; font-size: 24px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card .image-wrap { height: 100%; left: 0; top: 0; bottom: 0; width: 100%; position: absolute; background-color: white; transition: all ease 0.95s; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card .image-wrap img { position: absolute; width: 100%; bottom: 0; transition: -webkit-transform 0.55s; transition: transform 0.55s; z-index: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .unilever-timeline__card a:hover .image-wrap img { -webkit-transform: scale(1.1); transform: scale(1.1); transition-timing-function: ease-in-out } @media print, (min-width: 48em) { .unilever-timeline__card a { max-width: 600px } } @media (min-width: 93.75em) { .unilever-timeline__card a { max-width: 750px } } .unilever-timeline__card.two-d { max-width: 450px } .unilever-timeline__card.two-d a { overflow: hidden; padding: 15px; height: 120px; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3) } .unilever-timeline__card.two-d a:hover { -webkit-transform: scale(1.02); transform: scale(1.02); box-shadow: 0 2px 19px rgba(0, 0, 0, 0.3) } .unilever-timeline__card.two-d header { left: 35%; border-radius: 0; background: transparent } .unilever-timeline__card.two-d a:hover header { background: white } .unilever-timeline__card.two-d header h2 { font-size: 18px; color: #007dbb } .unilever-timeline__card.two-d header span.label { color: #666 } .unilever-timeline__card.two-d header::after { opacity: 0 } .unilever-timeline__card.two-d a:hover header span.label { color: #666 } .unilever-timeline__card.two-d a:hover header h2 { color: #007dbb } .unilever-timeline__card.two-d .image-wrap { width: 30%; height: 80px; top: 10px; left: 10px; bottom: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) } .unilever-timeline__card.two-d .image-wrap.marker { display: block } .unilever-timeline__card.two-d.marker .image-wrap { display: none } .unilever-timeline__card.two-d.marker .image-wrap--2d { background-position: center; background-size: cover; display: block; height: 100% } .unilever-timeline__card.two-d a:hover .image-wrap img { -webkit-transform: scale(1); transform: scale(1) } @media print, (min-width: 48em) { .unilever-timeline__card.two-d { max-width: 550px; width: 550px } .unilever-timeline__card.two-d a { height: 115px; width: 550px } .unilever-timeline__card.two-d .image-wrap { height: 95px } .unilever-timeline__card.two-d header h2 { font-size: 24px } } @media (min-width: 93.75em) { .unilever-timeline__card.two-d { max-width: 750px; width: 750px } .unilever-timeline__card.two-d a { height: 150px; width: 750px } .unilever-timeline__card.two-d .image-wrap { height: 127px } .unilever-timeline__card.two-d header h2 { font-size: 24px } } .unilever-timeline__card.marker header { background-color: transparent !important; padding: 25px } .unilever-timeline__card.marker header * { color: white !important } .unilever-timeline__card.marker header:after { display: none } .unilever-timeline__card.marker .image-wrap { position: static; background-color: black } .unilever-timeline__card.marker .image-wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0.8) 0%, transparent 90%); z-index: 2 } .unilever-timeline__card.marker .image-wrap img { -webkit-transform: scale(1.3); transform: scale(1.3); position: static; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0.7 } .unilever-timeline__card.marker a:hover .image-wrap img { -webkit-transform: scale(1.4); transform: scale(1.4); opacity: 0.8 } .unilever-timeline__card.marker header span.label { font-size: 64px; line-height: 1 } .unilever-timeline__card.marker header h2 { font-size: 24px; padding-left: 10px } .unilever-timeline__card.marker.two-d a { padding: 0 } .unilever-timeline__card.marker.two-d header { padding: 15px 25px; left: 0 } .unilever-timeline__card.marker.two-d header span.label { font-size: 42px } .unilever-timeline__card.marker.two-d header h2 { font-size: 18px; padding-left: 0 } .unilever-timeline__card.marker.two-d .image-wrap { width: auto; height: auto; top: auto; left: auto } .unilever-timeline__card.marker.two-d a:hover .image-wrap img { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 1 } @media screen and (max-width: 768px) { .unilever-timeline__card header span.label { font-size: 12px } .unilever-timeline__card header h2 { font-size: 22px } } .unilever-timeline__divider { width: 320px; height: auto; position: absolute; top: 0; left: 0 } @media print, (min-width: 30em) { .unilever-timeline__divider { width: 320px } } .unilever-timeline__divider h3 { font-size: 18px; text-align: right; color: #666; font-family: "DINWebPro-bold", Arial, Helvetica, sans-serif } .unilever-timeline__divider div { width: 100%; height: 2px; background-color: #007dbb } .unilever-timeline__slider-bar { background-color: #3a3a3a; width: 2em; height: 100%; position: absolute; border-style: solid; border-color: #3a3a3a; border-width: 7em 0 7em 0; box-sizing: border-box; top: 0; right: 0; z-index: 1 } @media print, (min-width: 30em) { .unilever-timeline__slider-bar { width: 3em } } .unilever-timeline__slider-bar .unilever-timeline__slider-line { background-color: #aaa; width: 1px; display: block; margin: auto; height: 90%; position: relative } @media print, (min-width: 30em) { .unilever-timeline__slider-bar .unilever-timeline__slider-line { height: 100% } } .unilever-timeline__slider-bar .unilever-timeline__slider-button { cursor: move; cursor: grab; font-size: 14px; text-decoration: none; background: #007DBB; border-radius: 8px; padding: 8px; transition: all ease 0.1s; display: block; font-family: Arial; font-weight: bold; color: #FFFFFF; position: absolute; width: auto; top: 0; right: 1em; -webkit-transform: translateY(-50%); transform: translateY(-50%) } @media print, (min-width: 30em) { .unilever-timeline__slider-bar .unilever-timeline__slider-button { right: 2em } } .unilever-timeline__slider-bar .unilever-timeline__slider-button:active { cursor: grabbing; background: #004976 } .unilever-timeline__slider-bar .unilever-timeline__slider-button::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -18px; background: white; height: 10px; width: 10px; border-radius: 50% } @media print, (min-width: 30em) { .unilever-timeline__slider-bar .unilever-timeline__slider-button::after { right: -32px } } .unilever-timeline--hidden { display: none !important } .unilever-timeline__data { display: none } .no-js .unilever-timeline__data { display: block; list-style-type: none } .no-js .unilever-timeline__data-item { border-bottom: 1px solid lightgrey; list-style-type: none; margin-bottom: 40px; padding: 0 } .no-js .unilever-timeline__data-id { display: none } .no-js .unilever-timeline__data-content img { display: none } .no-js .unilever-timeline__data-label, .no-js .unilever-timeline__data-title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .no-js .unilever-timeline__data-img, .no-js .unilever-timeline__data-type { display: none } .unilever-timeline__slider-line .unilever-timeline__slider-bottom-label { color: #ffffff; font-size: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; position: absolute; bottom: -2em } .unilever-timeline__slider-line .unilever-timeline__slider-top-label { color: #ffffff; font-size: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; position: absolute; top: -2em } #timeline-card-template { display: none; position: absolute; top: 0; left: 0 } .feature-image-with-description-container { margin-top: 30px; margin-bottom: 30px } .feature-image-with-description-container + .feature-image-with-description-container { margin-top: -30px } .feature-image-with-description { background-color: #DCF1FA } .theme-ubrand .feature-image-with-description { background-color: #F8CBE0 } .theme-ubrand .feature-image-with-description { margin: 15px 0 30px } .feature-image-with-description__image-container { background-position: left 0; background-repeat: no-repeat; background-size: cover; padding-top: 56.25% } .theme-ubrand .feature-image-with-description__image-container { background-position: center center } .feature-image-with-description__info-container { padding: 20px 15px 35px } .feature-image-with-description__stat dl dt, .feature-image-with-description__stat dl dt p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #004976; font-size: 42px; line-height: 1.2; margin-bottom: 0; word-wrap: break-word } .font--arial .feature-image-with-description__stat dl dt, .font--arial .feature-image-with-description__stat dl dt p { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .feature-image-with-description__stat dl dt, .feature-image-with-description__stat dl dt p { font-size: 56px } } .feature-image-with-description__stat dl dd, .feature-image-with-description__stat dl dd p { font-size: 13px; word-wrap: break-word } @media print, (min-width: 48em) { .feature-image-with-description__stat dl dd, .feature-image-with-description__stat dl dd p { font-size: 15px } } .feature-image-with-description__stat dl dt, .feature-image-with-description__stat dl dt p { font-size: 42px } .theme-ubrand .feature-image-with-description__stat dt { color: #015DEE } .feature-image-with-description__graphic { margin-bottom: 30px } .feature-image-with-description__graphic img { width: 100% } .feature-image-with-description__statement-quote blockquote { margin-top: 0; margin-bottom: 0 } .feature-image-with-description__statement-quote p { text-transform: none; margin-bottom: 15px; position: relative } .feature-image-with-description__statement-quote p::before, .feature-image-with-description__statement-quote p::after { display: inline-block; font-family: "Georgia", serif; font-size: 3.5rem; position: absolute; line-height: 1.4; color: #007dbb } .feature-image-with-description__statement-quote p::before { content: "\201C"; left: -30px; top: -20px } .feature-image-with-description__statement-quote p::after { content: '\201d'; margin-left: 5px; bottom: -30px; display: inline } .feature-image-with-description__statement-quote--standalone { background-color: #DCF1FA; border-radius: 5px; padding: 20px 15px; margin-bottom: 20px } .feature-image-with-description__statement-quote--standalone blockquote { padding: 0.7em 1.25em 0 40px } .feature-image-with-description__statement-quote--blue { margin-bottom: 20px } .feature-image-with-description__statement-quote--blue p::before, .feature-image-with-description__statement-quote--blue p::after, .feature-image-with-description__statement-quote--blue cite { color: #007dbb } .feature-image-with-description__statement-quote--green { margin-bottom: 20px } .feature-image-with-description__statement-quote--green p::before, .feature-image-with-description__statement-quote--green p::after, .feature-image-with-description__statement-quote--green cite { color: #54802d } .feature-image-with-description__statement-quote--pink { margin-bottom: 20px } .feature-image-with-description__statement-quote--pink p::before, .feature-image-with-description__statement-quote--pink p::after, .feature-image-with-description__statement-quote--pink cite { color: #d0006f } body.theme-careers-2018 .feature-image-with-description { position: relative; background-color: #000f9f; min-height: 20rem } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__image-container { min-height: 20em; background-position: 50% 50% } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote blockquote { padding: .625rem 1.25rem 0 1.875rem } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote > blockquote > p, body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote > blockquote > p:before, body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote > blockquote > p:after, body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote > blockquote > cite { color: #00CFC9 } body.theme-careers-2018 .feature-image-with-description.feature-image-with-description--c2018-teal { background-color: #00CFC9 } body.theme-careers-2018 .feature-image-with-description.feature-image-with-description--c2018-teal .feature-image-with-description__statement-quote > blockquote > p, body.theme-careers-2018 .feature-image-with-description.feature-image-with-description--c2018-teal .feature-image-with-description__statement-quote > blockquote > p:before, body.theme-careers-2018 .feature-image-with-description.feature-image-with-description--c2018-teal .feature-image-with-description__statement-quote > blockquote > p:after, body.theme-careers-2018 .feature-image-with-description.feature-image-with-description--c2018-teal .feature-image-with-description__statement-quote > blockquote > cite { color: #000f9f } @media print, (min-width: 48em) { .feature-image-with-description-container { margin-bottom: 50px } .feature-image-with-description-container + .feature-image-with-description-container { margin-top: -50px } .feature-image-with-description__info-container { overflow: auto; padding-top: 25px } .feature-image-with-description__info, .feature-image-with-description__statement-simple { float: left; margin-left: 8.3333333333%; width: 58.3333333333% } .feature-image-with-description__info--full, .feature-image-with-description__statement-simple--full { float: none; width: 83.3333333333% } .feature-image-with-description__statement-simple { margin-left: 30px; width: 50% } .feature-image-with-description__stat dl dt, .feature-image-with-description__stat dl dt p { font-size: 48px } .feature-image-with-description__stat, .feature-image-with-description__graphic { float: left; margin-left: 30px; width: 25% } .feature-image-with-description__graphic { margin-left: 8.3333333333%; width: 33.3333333333% } .feature-image-with-description__statement-quote blockquote p { font-size: 1.25em } } @media (min-width: 67.5em) { .feature-image-with-description-container { margin-top: 40px; margin-bottom: 60px } .feature-image-with-description-container + .feature-image-with-description-container { margin-top: -60px } .feature-image-with-description { display: -ms-flexbox; display: flex; height: 100%; -ms-flex-align: stretch; align-items: stretch } .feature-image-with-description--reverse { -ms-flex-direction: row-reverse; flex-direction: row-reverse } .feature-image-with-description--reverse .feature-image-with-description__image-container { background-position: right 0 } .feature-image-with-description__image-container { width: 67%; padding-top: 0; min-height: 500px } .feature-image-with-description__info-container { width: 33%; padding: 45px } .feature-image-with-description__info, .feature-image-with-description__statement-simple, .feature-image-with-description__stat, .feature-image-with-description__graphic { float: none; margin-left: 0; margin-right: 0; width: auto } .feature-image-with-description__graphic img { max-width: 260px } .feature-image-with-description__statement-quote blockquote p { font-size: 1.375em } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__image-container { width: 37.5% } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__info-container { width: 62.5%; padding: 1.875rem 1.25rem } body.theme-careers-2018 .feature-image-with-description .feature-image-with-description__statement-quote blockquote { padding: .625rem 1.25rem 0 1.875rem } } .statistics h2 { font-family: "DINWebPro", Arial, Helvetica, sans-serif } .font--arial .statistics h2 { font-family: Arial, Helvetica, sans-serif } .statistics dl { border: 1px solid #ccc; border-radius: 5px; padding: 20px 15px } .statistics dl dt, .statistics dl dt p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; color: #005EB8; font-size: 42px; line-height: 1.2; margin-bottom: 0; word-wrap: break-word } .font--arial .statistics dl dt, .font--arial .statistics dl dt p { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .statistics dl dt, .statistics dl dt p { font-size: 56px } } .statistics dl dd, .statistics dl dd p { font-size: 13px; word-wrap: break-word } @media print, (min-width: 48em) { .statistics dl dd, .statistics dl dd p { font-size: 15px } } .statistics dl dt { color: #007CBD } .statistics--alternate dl { background-color: rgba(0, 0, 0, 0.6); border: 0; border-radius: 0 } .statistics--alternate dl dt, .statistics--alternate dl dd { color: #fff } @media print, (min-width: 48em) { .statistics dl { width: 100%; margin-bottom: 30px } } .brand-content h2, .related-articles h2 { text-align: center; margin-bottom: 40px; background: none } .brand-content__container, .related-articles__container { position: relative; min-height: 200px; transition: all 0.3s ease; box-shadow: 0 0 5px 0 transparent; border: 1px solid #ccc; border-radius: 5px; padding-bottom: 20px; margin-bottom: 30px; word-wrap: break-word; width: 100% } .brand-content__container:hover, .related-articles__container:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) } .brand-content__container:hover .brand-content, .brand-content__container:hover .related-articles__title::before, .related-articles__container:hover .brand-content, .related-articles__container:hover .related-articles__title::before { left: -0.9em } .brand-content__link, .related-articles__link { display: block } .brand-content__link:hover img, .brand-content__link:focus img, .brand-content__link:active img, .related-articles__link:hover img, .related-articles__link:focus img, .related-articles__link:active img { opacity: 0.7 } .brand-content__article-type, .related-articles__article-type { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: #007dbb; color: #fff; padding: 7px 15px; font-size: 13px; position: absolute; top: 15px; left: 0; border-radius: 0 5px 5px 0 } .font--arial .brand-content__article-type, .font--arial .related-articles__article-type { font-family: Arial, Helvetica, sans-serif } .popup-youtube .brand-content__article-type, .popup-youtube .related-articles__article-type { display: none } .brand-content__img-mask, .related-articles__img-mask { margin: 0; padding-top: 56.2%; background: #000000; border-radius: 5px 5px 0 0; border-bottom: 1px solid #ccc; position: relative } .brand-content__img-mask img, .related-articles__img-mask img { margin: 0; position: absolute; top: 0; left: 0; width: 100%; opacity: 1; transition: all 0.3s ease; border-radius: 5px 5px 0 0 } .popup-youtube .brand-content__img-mask:before, .popup-youtube .related-articles__img-mask:before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .brand-content__content, .related-articles__content { padding: 20px 20px 10px 20px } .brand-content__content time, .related-articles__content time { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: block; font-size: 11px; color: #666; margin-left: 8px; margin-bottom: 10px } .font--arial .brand-content__content time, .font--arial .related-articles__content time { font-family: Arial, Helvetica, sans-serif } .brand-content__title, .related-articles__title { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; font-size: 13px; font-weight: bold; letter-spacing: normal; padding-left: 8px } .brand-content__title::before, .related-articles__title::before { content: "\e021"; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: inline; transition: all 0.3s ease; font-size: 0.65em; position: absolute; top: 0.25em; left: -0.6em } .image-with-text-block { background-color: #eee; padding: 15px; margin: 20px 0 40px } .image-with-text-block__text-container h4 { text-transform: uppercase; margin-top: 20px } @media print, (min-width: 48em) { .image-with-text-block { margin-bottom: 60px; display: -ms-flexbox; display: flex } .image-with-text-block__image-container { width: calc(50% - 15px) } .image-with-text-block__text-container { margin-left: 30px; width: calc(50% - 15px) } .image-with-text-block__text-container h4 { margin-top: 0 } } .brand-header { position: static; height: auto; min-height: 0 } .brand-header__img-name-container { position: relative; height: 33vh; min-height: 240px; width: 100% } .brand-header__img-name-container::before, .brand-header__img-name-container::after { content: ''; position: absolute; background: url(../images/hr.png) center bottom no-repeat; background-size: cover; height: 5px; width: 100%; top: 0; left: 0; z-index: 1 } .brand-header__img-name-container::after { background-image: url(../images/hr_down.png); top: auto; bottom: 0 } .brand-header .bg-image { background-position: center } @media print, (min-width: 48em) { .brand-header .bg-image { background-position: center 90px; background-attachment: fixed } } .brand-header .bg-image::before, .brand-header .bg-image::after { display: none } .brand-header__logo { border-radius: 10px 10px 0 0; position: absolute; bottom: 0; left: 15px; width: 90px; padding: 0 8px; background: #ffffff; text-align: center; z-index: 2 } .brand-header__logo img { height: 70px } .brand-header .bg-gradient { display: block } .brand-header .bg-gradient.bg-gradient--bottom { background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 57.5%) } .brand-header__brand-name { position: absolute; bottom: 20px; margin-left: 115px; left: 0 } .brand-header h1 { color: #ffffff; margin: 0; padding: 0 } .brand-header__brand-url { margin-top: 20px; font-size: 13px; font-weight: bold } .brand-header .social-channels { padding-left: 0; padding-right: 0 } .brand-header .social-channels ul { *zoom: 1; margin: 0; padding: 0 } .brand-header .social-channels ul:before, .brand-header .social-channels ul:after { display: table; content: ""; line-height: 0 } .brand-header .social-channels ul:after { clear: both } .brand-header .social-channels ul li { float: left; width: 50%; clear: none; margin-right: 0; margin-left: 0; padding-left: 0; text-align: left } .brand-header .social-channels a { font-size: 13px; padding-left: 30px; position: relative } .brand-header .social-channels a::before { position: absolute !important; left: 0 !important } .brand-header .social-channels a:hover::before, .brand-header .social-channels a:focus::before, .brand-header .social-channels a:active::before { left: -5px !important } .brand-header--blurred .brand-header__img-name-container { height: 25vh; min-height: 140px; overflow: hidden } .brand-header--blurred .bg-image { background-size: 150%; -webkit-filter: blur(40px); filter: blur(40px) } @media print, (min-width: 48em) { .brand-header { position: relative; height: 65vh; min-height: 480px; color: #ffffff; margin-bottom: 0 } .brand-header__img-name-container { position: relative; height: 100%; min-height: 0 } .brand-header__container { position: absolute; bottom: 0; width: 100% } .brand-header__logo { width: calc( 25% - 30px) } .brand-header__logo img { height: 142px } .brand-header__brand-name { margin-left: calc( 25% + 15px); width: 33.3333333333%; bottom: 70px } .brand-header__brand-url { margin-top: 0; margin-bottom: 16px; font-size: 14px; text-align: right; font-weight: normal } .brand-header__brand-url a { color: #ffffff; font-weight: bold; border-bottom: 2px solid rgba(255, 255, 255, 0.25); transition: border 0.3s ease } .brand-header__brand-url a:hover, .brand-header__brand-url a:focus, .brand-header__brand-url a:active { border-bottom-color: rgba(255, 255, 255, 0.75) } .brand-header .social-channels { padding: 10px 0 15px; border-top: 1px solid #ffffff } .brand-header .social-channels ul li { padding-right: 30px; width: auto } .brand-header .social-channels a { color: #ffffff; font-weight: bold; font-size: 14px } .brand-header .social-channels a::before, .brand-header .social-channels a:hover::before, .brand-header .social-channels a:focus::before, .brand-header .social-channels a:active::before, .brand-header .social-channels a::after, .brand-header .social-channels a:hover::after, .brand-header .social-channels a:focus::after, .brand-header .social-channels a:active::after { color: #ffffff } .brand-header--blurred { height: 25vh; min-height: 230px } .brand-header--blurred .brand-header__img-name-container { position: relative; height: 100%; min-height: 0 } .brand-header--blurred .brand-header__img-name-container .bg-image { -webkit-filter: blur(50px); filter: blur(50px) } } @media (min-width: 67.5em) { .brand-header__logo { width: calc( 250px - 30px); left: calc(50% - 500px) } .brand-header__logo img { height: 135px } .brand-header__brand-name { left: calc(50% - 250px); margin-left: 15px; width: 333.333333333px; bottom: 70px } .brand-header--blurred { height: 30vh; min-height: 270px } } @media (min-width: 93.75em) { .brand-header__logo { width: calc( 340px - 30px); left: calc(50% - 680px) } .brand-header__logo img { height: 135px } .brand-header__brand-name { left: calc(50% - 340px); width: 453.333333333px } } .related-brands { margin-bottom: 10px } .related-brands__title { font-family: "DINWebPro", Arial, Helvetica, sans-serif; text-align: center; font-size: 20px; padding: 0; margin-bottom: 20px } .font--arial .related-brands__title { font-family: Arial, Helvetica, sans-serif } .related-brands__container { transition: all 0.3s ease; box-shadow: 0 0 5px 0 transparent; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 30px; padding: 5px; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center } .related-brands__container:hover { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) } .related-brands__container a { display: block } .related-brands__container img { width: 100% } @media print, (min-width: 48em) { .related-brands { margin-bottom: 30px } .related-brands__title { font-size: 26px; margin-bottom: 30px } } @media (min-width: 67.5em) { .related-brands { margin-bottom: 40px } .related-brands__title { font-size: 30px; margin-bottom: 40px } } .brand-content .show-hide { height: 65px } .brand-content .show-hide a { display: block; width: 90%; margin: 0 auto; padding: 25px 30px 15px } @media print, (min-width: 48em) { .brand-content .show-hide a { width: 80% } } .brand-details-search-container { background: rgba(0, 125, 187, 0.2); margin-bottom: 35px } @media print, (min-width: 48em) { .brand-details-search-container { margin-bottom: 40px } } .brand-details-search-container--with-results { padding-bottom: 5px; background: url(../images/hr.png) center bottom no-repeat; background-size: 100% 5px; margin-bottom: 40px } @media (min-width: 67.5em) { .brand-details-search-container--with-results { margin-bottom: 70px } } .brand-details-search-container--with-results .brand-details-search form.filters .brand-details-search__location { display: none } .brand-details-search-container--with-results .brand-details-search form.filters .brand-details-search__reset { display: block } .no-js .brand-details-search-container--with-results .brand-details-search form.filters .brand-details-search__reset { display: none } .brand-details-search { padding: 40px 0 35px } .brand-details-search__title { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #333333 } @media print, (min-width: 48em) { .brand-details-search__title { font-size: 16px } } @media (min-width: 67.5em) { .brand-details-search__title { font-size: 18px } } .brand-details-search__country-search { margin-bottom: 20px } .brand-details-search__country-search:not(.ui-autocomplete-input) { display: none } .brand-details-search form.filters .brand-details-search__reset, .brand-details-search form.filters .brand-details-search__location { display: none; color: #007dbb; font-size: 13px } .brand-details-search form.filters .brand-details-search__reset:hover, .brand-details-search form.filters .brand-details-search__reset:focus, .brand-details-search form.filters .brand-details-search__reset:active, .brand-details-search form.filters .brand-details-search__location:hover, .brand-details-search form.filters .brand-details-search__location:focus, .brand-details-search form.filters .brand-details-search__location:active { color: #004976 } @media print, (min-width: 48em) { .brand-details-search form.filters .brand-details-search__reset, .brand-details-search form.filters .brand-details-search__location { font-size: 14px } } @media (min-width: 67.5em) { .brand-details-search form.filters .brand-details-search__reset, .brand-details-search form.filters .brand-details-search__location { font-size: 15px } } .brand-details-search form.filters .brand-details-search__submit { margin-left: 0; margin-bottom: 15px } .brand-details-search form.filters .brand-details-search__error { color: #DA291C } .brand-details-search__submit { display: none } .no-js .brand-details-search__country-search { display: block } .no-js .brand-details-search__submit { display: block } .js .brand-details-search-result-container, .js .brand-details-search__error { display: none } .js form.filters .brand-details-search__location { display: block } .tab-widget__dropdown-container { display: block } .tab-widget__dropdown { margin-bottom: 15px } .tab-widget__list { display: none; list-style-type: none; margin: 0; padding: 0 } .tab-widget__item { margin: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1 } .tab-widget__link { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: #eee; color: #004976; border-radius: 5px 5px 0 0; border: 1px solid #ccc; border-bottom: 0; padding: 0.85em 1.5em; display: block; position: relative; height: 100%; font-size: 15px; text-align: center; text-transform: uppercase } .font--arial .tab-widget__link { font-family: Arial, Helvetica, sans-serif } .tab-widget__link--active { background-color: #fff } .tab-widget__link--active::after { content: ''; width: 100%; height: 2px; background: #fff; position: absolute; bottom: -1px; left: 0; right: 0 } .tab-widget__link--active.focus { color: #666 } .tab-widget__link--active.blue { color: #007dbb } .tab-widget__link--active.green { color: #54802d } .tab-widget__link--active.pink { color: #d0006f } .tab-widget__tab-content { display: none } .tab-widget__tab-content--active, .no-js .tab-widget__tab-content { display: block } .tab-widget .help-text.sr-only { overflow: hidden } .no-js .tab-widget .help-text.sr-only { width: auto; height: auto; margin: 0; overflow: auto; clip: auto; position: relative } @media print, (min-width: 48em) { .tab-widget__heading { text-align: center } .tab-widget__dropdown-container { display: none } .tab-widget__list { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around } .tab-widget__panels { background-color: #fff; border: solid #ccc 1px; padding: 1em; text-align: center } } @media (min-width: 67.5em) { .tab-widget__list { -ms-flex-pack: start; justify-content: flex-start } } .map-cluster-container { margin-bottom: 0.9375em; position: relative } .map-cluster-container .info-list { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; max-width: 280px } @media (min-width: 30em) { .map-cluster-container .info-list { max-width: 450px; min-width: 350px; width: auto } } .map-cluster-container .info-list dt { padding: 0; margin: 0; margin-top: 5px; font-weight: normal } @media (min-width: 30em) { .map-cluster-container .info-list dt { float: left; width: 35%; clear: left } } .map-cluster-container .info-list dd { padding: 0; margin: 5px 0 0 0 } @media (min-width: 30em) { .map-cluster-container .info-list dd { float: left; width: calc(65% - 10px); clear: right; margin-left: 10px } } .map-cluster-container .info-windows { margin: 0; padding: 0; list-style: none } .map-cluster-container .info-windows li { font-size: 12px } .js .map-cluster-container .info-windows { display: none } .map-cluster-container .map-canvas { display: block; height: 26.25em; width: 100%; z-index: 0 } @media screen and (min-width: 48em) { .map-cluster-container .map-canvas { height: 30.25em } } html.dark, body.dark { background-color: #000 } .no-js .nojs-dark { background: #000 !important } html body { height: auto; min-height: 100vh } html body.is--grid-initialised .takeaction-grid__grid, html body.is--grid-initialised .takeaction-grid__mobile-grid { opacity: 1 } html body.is--overlay-active, html body.is--landing-overlay-active, html body.is--onboarding-tour-active, html body.is--filter-active { position: fixed; height: 100vh; width: 100vw; overflow: hidden } html body.theme-yta .evidon-consent-button { position: fixed; bottom: 0; z-index: 10 } @media print, (min-width: 48em) { html body.is--info-panel-active { overflow: hidden; position: fixed; height: 100%; width: 100%; -webkit-overflow-scrolling: touch } } @media (min-width: 67.5em) { html body.is--grid-initialised { overflow: hidden } } form[data-filters-container] div { margin-bottom: 0 !important } .topic--food { background-color: #DDA63A } .topic--health { background-color: #DC1894 } .topic--education { background-color: #9B2743 } .topic--equality { background-color: #FF3A21 } .topic--water { background-color: #26BDE2 } .topic--sustainability { background-color: #702F8A } .topic--climate { background-color: #528316 } .topic--naturalworld { background-color: #56C02B } .topic--collaboration { background-color: #005EB8 } .takeaction-launchcta { position: fixed; display: none; bottom: 0; width: 100%; z-index: 6 } .takeaction-launchcta--is-active { display: block } @media print, (min-width: 48em) { .takeaction-launchcta { width: 38rem; height: 38rem; right: -19rem; bottom: -19rem; overflow: hidden; -webkit-transform: rotate(45deg); transform: rotate(45deg) } } .takeaction-launchcta__wrapper { background-color: #666; background-repeat: no-repeat; background-size: cover; display: -ms-flexbox; display: flex; -ms-flex-direction: column-reverse; flex-direction: column-reverse } @media print, (min-width: 48em) { .takeaction-launchcta__wrapper { position: relative; width: 26.875rem; height: 26.875rem; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 5.5625rem; left: -13.4375rem } } .takeaction-launchcta__wrapper:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6) } .takeaction-launchcta__content { color: #fff; padding: 0 1.5rem 1.875rem 1.5rem; text-align: center; position: relative } @media print, (min-width: 48em) { .takeaction-launchcta__content { position: absolute; bottom: 0; width: 18.75rem; text-align: right; right: 0 } } .takeaction-launchcta__content p { font-weight: bold; font-size: .8125rem } @media print, (min-width: 48em) { .takeaction-launchcta__content p { font-size: 1.5rem; line-height: 1.9375rem; padding-left: 3.3125rem } } .takeaction-launchcta__close { background: none; border: 0; color: transparent; margin: 0; padding: 20px; width: 100%; box-shadow: none } .takeaction-launchcta__close:hover, .takeaction-launchcta__close:focus { background: none; color: transparent } .takeaction-launchcta__close:before, .takeaction-launchcta__close:after { content: ''; position: absolute; height: 24px; width: 2px; background-color: #fff; left: 50% } @media print, (min-width: 48em) { .takeaction-launchcta__close:before, .takeaction-launchcta__close:after { height: 30px } } .takeaction-launchcta__close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .takeaction-launchcta__close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } @media print, (min-width: 48em) { .takeaction-launchcta__close { width: auto; float: right; top: 7.5rem } } .takeaction-launchcta__button { background-color: #007DBB; font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; font-size: 1.125rem; color: #fff; display: inline-block; text-align: left; padding: .9375rem; transition: all 0.3s ease 0s } .font--arial .takeaction-launchcta__button { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .takeaction-launchcta__button { font-size: 1.375rem; padding: .75rem } } .takeaction-launchcta__button:focus, .takeaction-launchcta__button:hover { color: #fff; background-color: #004976 } .takeaction-launchcta__button:focus:after, .takeaction-launchcta__button:hover:after { left: .375rem } .takeaction-launchcta__button:after { content: "\e021"; transition: all 0.3s ease 0s; font-family: unilever-iconfont; font-size: .625rem; display: inline-block; margin-left: .375rem; position: relative; top: -.1875rem } @media print, (min-width: 48em) { .takeaction-launchcta__button:after { font-size: .75rem } } .takeaction-grid { display: block; background-color: #000; color: #fff; width: 100%; margin: 0; padding: 0 } .no-js .takeaction-grid { overflow: hidden } .takeaction-grid .takeaction-info-panel__content-block a { text-decoration: underline } .takeaction-grid .takeaction-info-panel__content-block a:hover { text-decoration: none } .takeaction-grid__grid { display: none; margin: 0; padding: 0; width: 100vw; height: 100vh } .js .takeaction-grid__grid, .js .takeaction-grid__mobile-grid { opacity: 0; transition: opacity 0.5s ease } .takeaction-grid__tile-source, .takeaction-grid__mobile-grid { margin: 0; padding: 10px; padding-top: 92px; padding-bottom: 0; max-width: none; list-style-type: none; *zoom: 1 } .takeaction-grid__tile-source:before, .takeaction-grid__tile-source:after, .takeaction-grid__mobile-grid:before, .takeaction-grid__mobile-grid:after { display: table; content: ""; line-height: 0 } .takeaction-grid__tile-source:after, .takeaction-grid__mobile-grid:after { clear: both } .takeaction-grid__mobile-grid { display: none } .js .takeaction-grid__mobile-grid { display: block } .is--info-panel-active .takeaction-grid__mobile-grid { display: none } .takeaction-grid__tile-source { display: block } .js .takeaction-grid__tile-source { display: none } .takeaction-grid__topic-source { display: none } .takeaction-grid__tile { display: block; position: relative; padding: 0; margin-bottom: 10px; z-index: 1; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease } .takeaction-grid__tile:before { content: ""; display: block; padding-top: 56.25% } .takeaction-grid__tile--topic .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic .takeaction-grid__tile-link:before { top: 0; display: block; background-image: none } .takeaction-grid__tile--topic.takeaction-grid__tile--food .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--food .takeaction-grid__tile-link:before { background-color: #DDA63A } .takeaction-grid__tile--topic.takeaction-grid__tile--health .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--health .takeaction-grid__tile-link:before { background-color: #DC1894 } .takeaction-grid__tile--topic.takeaction-grid__tile--education .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--education .takeaction-grid__tile-link:before { background-color: #9B2743 } .takeaction-grid__tile--topic.takeaction-grid__tile--equality .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--equality .takeaction-grid__tile-link:before { background-color: #FF3A21 } .takeaction-grid__tile--topic.takeaction-grid__tile--water .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--water .takeaction-grid__tile-link:before { background-color: #26BDE2 } .takeaction-grid__tile--topic.takeaction-grid__tile--sustainability .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--sustainability .takeaction-grid__tile-link:before { background-color: #702F8A } .takeaction-grid__tile--topic.takeaction-grid__tile--climate .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--climate .takeaction-grid__tile-link:before { background-color: #528316 } .takeaction-grid__tile--topic.takeaction-grid__tile--naturalworld .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--naturalworld .takeaction-grid__tile-link:before { background-color: #56C02B } .takeaction-grid__tile--topic.takeaction-grid__tile--collaboration .takeaction-grid__tile-link:before, .takeaction-grid__tile--statistic.takeaction-grid__tile--collaboration .takeaction-grid__tile-link:before { background-color: #005EB8 } .takeaction-grid__tile-link { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; text-decoration: none; background-color: #333; background-position: 50% 50%; background-size: cover; padding: 1.25rem; overflow: hidden; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); transition: box-shadow 0.25s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .takeaction-grid__tile-link:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.666)); top: 50% } .takeaction-grid__tile.takeaction-grid__tile--statistic .takeaction-grid__tile-link { padding-top: 1.875rem } .takeaction-grid__tile.takeaction-grid__tile--statistic .takeaction-grid__tile-link:before { background-image: none } .takeaction-grid__tile.takeaction-grid__tile--topic .takeaction-grid__tile-link:before { height: 30px; z-index: 2 } .takeaction-grid__tile.takeaction-grid__tile--topic .takeaction-grid__tile-link:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.666)) } .takeaction-grid__tile-icon { position: relative; width: 2.75rem } .takeaction-grid__tile-heading, .takeaction-grid__tile-copy, .takeaction-grid__tile-cta { transition: opacity ease 0.45s; color: #fff; z-index: 1 } .is--landing-overlay-active .takeaction-grid__tile-heading, .is--onboarding-tour-active .takeaction-grid__tile-heading, .is--filter-active .takeaction-grid__tile-heading, .is--landing-overlay-active .takeaction-grid__tile-copy, .is--onboarding-tour-active .takeaction-grid__tile-copy, .is--filter-active .takeaction-grid__tile-copy, .is--landing-overlay-active .takeaction-grid__tile-cta, .is--onboarding-tour-active .takeaction-grid__tile-cta, .is--filter-active .takeaction-grid__tile-cta { opacity: 0 } .takeaction-grid__tile-heading, .takeaction-grid__tile-cta { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; letter-spacing: normal } .font--arial .takeaction-grid__tile-heading, .font--arial .takeaction-grid__tile-cta { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__tile-heading { display: block; position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; padding: 0; font-size: .9375rem; line-height: 1.35 } .takeaction-grid__tile--topic .takeaction-grid__tile-heading, .takeaction-grid__cell-tile--topic .takeaction-grid__tile-heading { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; font-size: 2.375rem; bottom: 1.25rem } .font--arial .takeaction-grid__tile--topic .takeaction-grid__tile-heading, .font--arial .takeaction-grid__cell-tile--topic .takeaction-grid__tile-heading { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__tile--topic .takeaction-grid__tile-heading { text-transform: uppercase } .takeaction-grid__tile--statistic .takeaction-grid__tile-heading, .takeaction-grid__cell-tile--statistic .takeaction-grid__tile-heading { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; font-size: 3rem; position: relative; bottom: 0; left: 0 } .font--arial .takeaction-grid__tile--statistic .takeaction-grid__tile-heading, .font--arial .takeaction-grid__cell-tile--statistic .takeaction-grid__tile-heading { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__tile-copy { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .takeaction-grid__tile-copy { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__tile--statistic .takeaction-grid__tile-copy, .takeaction-grid__cell-tile--statistic .takeaction-grid__tile-copy { line-height: 1.35; font-size: .9375rem; display: block; position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem } .takeaction-grid__tile-copy:last-child { margin-bottom: 0 } .takeaction-grid__tile-cta { display: inline-block; position: relative; padding: .625rem 2.5rem; text-align: center; background-color: #007dbb; cursor: pointer } .takeaction-grid__tile-highlight { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 1 } .takeaction-grid__tile-highlight:before { display: block; content: ""; width: 0; height: 0; border: 25px solid transparent; border-top-color: #fff; border-right-color: #fff } .takeaction-grid__tile-highlight:after { display: block; position: absolute; top: 6px; right: 6px; font-family: 'unilever-iconfont'; font-size: 1.125rem; transition: all 0.25s ease } .takeaction-grid__tile:hover .takeaction-grid__tile-highlight:after, .takeaction-grid__tile:focus .takeaction-grid__tile-highlight:after, .takeaction-grid__tile.is--focused .takeaction-grid__tile-highlight:after { top: 1px } .js .takeaction-grid__tile:hover .takeaction-grid__tile-highlight:after, .js .takeaction-grid__tile:focus .takeaction-grid__tile-highlight:after, .js .takeaction-grid__tile.is--focused .takeaction-grid__tile-highlight:after { top: 5px } .takeaction-grid__tile-highlight--new:after { content: "\e903"; color: #54802D } .takeaction-grid__tile-highlight--expiring:after { content: "\e904"; color: #D34400 } .takeaction-grid__tile-highlight-count { display: block; position: absolute; top: 12px; right: 11px; font-size: 11px; line-height: 11px; color: #D34400; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .takeaction-grid__tile-highlight-count { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__vignette { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 10; background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.33) 100%) } .takeaction-grid__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; background: #000; transition: opacity 0.3s ease; pointer-events: none; opacity: 0; cursor: pointer } .is--onboarding-tour-active .takeaction-grid__overlay, .is--filter-active .takeaction-grid__overlay, .is--landing-overlay-active .takeaction-grid__overlay, .is--info-panel-active .takeaction-grid__overlay { pointer-events: auto; opacity: 1 } .is--info-panel-active .takeaction-grid__overlay { background: #333 } @media print, (min-width: 48em) { .is--info-panel-active .takeaction-grid__overlay { background: #000; opacity: 0.85 } } .takeaction-grid__controls { display: -ms-flexbox; display: flex; position: fixed; z-index: 12; text-align: center; pointer-events: none; top: 0; left: 0; right: 0; *zoom: 1; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5) } .takeaction-grid__controls:before, .takeaction-grid__controls:after { display: table; content: ""; line-height: 0 } .takeaction-grid__controls:after { clear: both } .takeaction-grid__controls-plangroup { display: block; position: fixed; bottom: 20px; left: 30px; right: 30px } .takeaction-grid__controls-item { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; pointer-events: auto; font-size: 16px; transition: all 0.3s ease } .font--arial .takeaction-grid__controls-item { font-family: Arial, Helvetica, sans-serif } .takeaction-grid__controls-item .icon-arrow-right { font-size: 85% } .takeaction-grid__controls-item-text { display: block; position: relative; line-height: 1.25 } .takeaction-grid__controls-item-logo { display: none; width: 50px; height: auto; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } .takeaction-grid__controls-item--exit, .takeaction-grid__controls-item--tour { display: inline-block; width: 50%; margin: 0; float: left; padding: 20px; line-height: 1.35 } .takeaction-grid__controls-item--exit, .takeaction-grid__controls-item--plan { background-color: #fff } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text { padding-left: 28px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text:before { font-family: 'unilever-iconfont'; content: '\e023'; display: block; position: absolute; left: 0; font-size: .85rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .takeaction-grid__controls-item--tour { background-color: #007dbb; color: #fff } .takeaction-grid__controls-item--tour:hover, .takeaction-grid__controls-item--tour:focus, .takeaction-grid__controls-item--tour:active { color: #fff } .takeaction-grid__controls-item--plan, .takeaction-grid__controls-item--more { box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.5); display: block; position: relative } .takeaction-grid__controls-item--plan .takeaction-grid__controls-item-text, .takeaction-grid__controls-item--more .takeaction-grid__controls-item-text { padding: .9375rem } .takeaction-grid__controls-item--plan { margin-bottom: .625rem } .takeaction-grid__controls-item--more { color: #fff; background-color: #007dbb } .js .takeaction-grid__controls-item--more { display: none } .takeaction-grid__controls-item--more:hover, .takeaction-grid__controls-item--more:focus { background-color: #004976; color: #fff } @media (min-width: 37.5em) { .takeaction-grid__overlay { background: rgba(0, 0, 0, 0.86) } .takeaction-grid__tile-source, .takeaction-grid__mobile-grid { padding: 10px; padding-right: 0 } .takeaction-grid__cell { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; position: relative } .takeaction-grid__tile { display: inline-block; width: calc(50% - (10px)); margin-right: 10px } .takeaction-grid__tile--topic, .takeaction-grid__cell .takeaction-grid__tile--topic { width: 100%; width: calc(100% - (10px)); margin-right: 10px } .takeaction-grid__tile:not(.takeaction-grid__tile--statistic) .takeaction-grid__tile-heading { left: 20px } .takeaction-grid__tile-copy, .takeaction-grid__tile--statistic .takeaction-grid__tile-copy { left: 20px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(8), .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(9) { position: absolute; bottom: 0 } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(6), .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(7) { margin-bottom: calc(28.8% + 10px) } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(8) { right: 0 } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(9) { left: 0 } .takeaction-grid__controls-item { box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); width: auto } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text { padding-left: 1.25rem } .takeaction-grid__controls-item--tour { right: 0 } .takeaction-grid__controls-item--exit, .takeaction-grid__controls-item--tour { position: fixed; height: auto; height: 60px } .takeaction-grid__controls-item--plan, .takeaction-grid__controls-item--more { display: inline-block; width: calc(50% - .3125rem) } .takeaction-grid__controls-item--plan { margin: .625rem } } @media (min-width: 67.5em) { .js .takeaction-grid { position: fixed } .js .takeaction-grid__grid { display: block } .js .takeaction-grid__mobile-grid { display: none } .takeaction-grid__tile { display: block; height: 200px } .takeaction-grid__tile:before { padding-top: 200px } .takeaction-grid__tile:hover, .takeaction-grid__tile:focus, .takeaction-grid__tile.is--focused, .takeaction-grid__tile:focus-within { z-index: 11; -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .takeaction-grid__tile:hover .takeaction-grid__tile-link, .takeaction-grid__tile:focus .takeaction-grid__tile-link, .takeaction-grid__tile.is--focused .takeaction-grid__tile-link, .takeaction-grid__tile:focus-within .takeaction-grid__tile-link { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75) } .takeaction-grid__tile--topic { height: 400px } .takeaction-grid__tile--topic:before { padding-top: 400px } .takeaction-grid__tile--topic:hover, .takeaction-grid__tile--topic:focus, .takeaction-grid__tile--topic.is--focused { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05) } .takeaction-grid__cell:first-child .takeaction-grid__tile, .takeaction-grid__cell .takeaction-grid__tile { display: block; position: absolute; width: 300px; height: 169px; top: 0px; left: 0px; z-index: 1; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75); transition: box-shadow 0.45s ease, -webkit-transform 0.45s ease; transition: box-shadow 0.45s ease, transform 0.45s ease; padding-left: 0 } .takeaction-grid__cell:first-child .takeaction-grid__tile:before, .takeaction-grid__cell .takeaction-grid__tile:before { padding-top: 169px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(1), .takeaction-grid__cell .takeaction-grid__tile:nth-child(1) { top: 199px; left: 330px; width: 620px; height: 358px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(2), .takeaction-grid__cell .takeaction-grid__tile:nth-child(2) { top: 10px; left: 10px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(3), .takeaction-grid__cell .takeaction-grid__tile:nth-child(3) { top: 10px; left: 330px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(4), .takeaction-grid__cell .takeaction-grid__tile:nth-child(4) { top: 10px; left: 650px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(5), .takeaction-grid__cell .takeaction-grid__tile:nth-child(5) { top: 10px; left: 970px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(6), .takeaction-grid__cell .takeaction-grid__tile:nth-child(6) { top: 199px; left: 970px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(7), .takeaction-grid__cell .takeaction-grid__tile:nth-child(7) { top: 388px; left: 970px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(8), .takeaction-grid__cell .takeaction-grid__tile:nth-child(8) { top: 388px; right: auto; left: 10px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(9), .takeaction-grid__cell .takeaction-grid__tile:nth-child(9) { top: 199px; left: 10px } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(8), .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(9), .takeaction-grid__cell .takeaction-grid__tile:nth-child(8), .takeaction-grid__cell .takeaction-grid__tile:nth-child(9) { bottom: auto } .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(6), .takeaction-grid__cell:first-child .takeaction-grid__tile:nth-child(7), .takeaction-grid__cell .takeaction-grid__tile:nth-child(6), .takeaction-grid__cell .takeaction-grid__tile:nth-child(7) { margin-bottom: 0 } .takeaction-grid__cell:first-child .takeaction-grid__tile:hover, .takeaction-grid__cell:first-child .takeaction-grid__tile:focus, .takeaction-grid__cell:first-child .takeaction-grid__tile.is--focused, .takeaction-grid__cell .takeaction-grid__tile:hover, .takeaction-grid__cell .takeaction-grid__tile:focus, .takeaction-grid__cell .takeaction-grid__tile.is--focused { z-index: 11; box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.75); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .takeaction-grid__cell:first-child .takeaction-grid__tile .takeaction-grid__tile-link, .takeaction-grid__cell .takeaction-grid__tile .takeaction-grid__tile-link { left: 0 } .takeaction-grid__cell:first-child .takeaction-grid__tile--topic .takeaction-grid__tile-heading, .takeaction-grid__cell .takeaction-grid__tile--topic .takeaction-grid__tile-heading { z-index: 1 } .takeaction-grid__vignette { display: block } .takeaction-grid__controls { bottom: 0; width: 100% } .takeaction-grid__controls-plangroup { display: -ms-flexbox; display: flex; -ms-flex-direction: row-reverse; flex-direction: row-reverse; left: auto; bottom: 60px; right: 60px } .takeaction-grid__controls-item { transition: opacity ease 0.45s } .is--landing-overlay-active .takeaction-grid__controls-item, .is--onboarding-tour-active .takeaction-grid__controls-item, .is--filter-active .takeaction-grid__controls-item { opacity: 0 } .takeaction-grid__controls-item--tour, .takeaction-grid__controls-item--plan, .takeaction-grid__controls-item--more { box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.5); padding: 20px 30px; transition: all ease 0.3s; z-index: 1 } .takeaction-grid__controls-item--tour:hover, .takeaction-grid__controls-item--plan:hover, .takeaction-grid__controls-item--more:hover { box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.95); -webkit-transform: scale(1.03); transform: scale(1.03); z-index: 2 } .takeaction-grid__controls-item--exit { left: auto; width: auto; background: transparent; box-shadow: none } .takeaction-grid__controls-item--tour { display: block; position: absolute; width: auto; background-color: #fff; color: #007dbb; top: 30px; right: 60px } .takeaction-grid__controls-item--tour:hover, .takeaction-grid__controls-item--tour:focus, .takeaction-grid__controls-item--tour:active { color: #004976 } .takeaction-grid__controls-item--tour .takeaction-grid__controls-item-text { font-size: 18px } .takeaction-grid__controls-item--plan, .takeaction-grid__controls-item--more { width: auto; margin: 0 } .takeaction-grid__controls-item--plan .takeaction-grid__controls-item-text, .takeaction-grid__controls-item--more .takeaction-grid__controls-item-text { font-size: 24px; left: auto; right: auto } .takeaction-grid__controls-item--more { margin-right: .625rem } .takeaction-grid__controls-item-text { display: block; position: relative; margin-bottom: 0px } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text, .takeaction-grid__controls-item--plan .takeaction-grid__controls-item-text, .takeaction-grid__controls-item--tour .takeaction-grid__controls-item-text, .takeaction-grid__controls-item--more .takeaction-grid__controls-item-text { position: relative; -webkit-transform: none; transform: none; top: 0; padding: 0 } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text { height: 0px; transition: all 0.35s ease; padding-left: 20px } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text:before { left: 0 } .takeaction-grid__controls-item-logo { display: block } .takeaction-grid__controls-item--exit { transition: all 0.35s ease } .takeaction-grid__controls-item--exit:before { display: block; position: absolute; top: -180px; left: -180px; content: ""; background: #fff; width: 350px; height: 350px; -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: inset 0 5px 20px #000000; z-index: -1; transition: all 0.35s ease } .takeaction-grid__controls-item--exit .takeaction-grid__controls-item-text { height: 20px; margin-bottom: 20px } .takeaction-grid__controls-item--exit:hover, .takeaction-grid__controls-item--exit:focus { -webkit-transform: scale(1.03); transform: scale(1.03) } } .is--action-plan-active { height: 100% } .is--action-plan-active body { height: 100%; background-color: #000 } .is--action-plan-active footer, .is--action-plan-active .to-top { display: none } .takeaction-header { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; position: relative; z-index: 1; text-align: left } .font--arial .takeaction-header { font-family: Arial, Helvetica, sans-serif } .takeaction-header--plan { background: #000 } @media (min-width: 67.5em) { .takeaction-header--topic .takeaction-header__back { position: absolute } } .takeaction-header__back { text-align: center; display: inline-block; background: #007dbb; width: 100%; transition: all ease 0.3s; color: #fff } @media (min-width: 67.5em) { .takeaction-header__back { width: auto } } @media (min-width: 105rem) { .takeaction-header__back { position: absolute; top: 0; left: 0; bottom: 0; width: 9.375rem; padding: .9375rem } } .takeaction-header__back:hover, .takeaction-header__back:active, .takeaction-header__back:focus { color: #fff; background-color: #004976 } .takeaction-header__back span { font-size: .75rem; margin: 1.25rem; display: block } @media print, (min-width: 48em) { .takeaction-header__back span { font-size: 1.25rem } } @media (min-width: 67.5em) { .takeaction-header__back span { margin: 1.125rem 1rem .8125rem 3.75rem; font-size: 1.125rem } } @media (min-width: 105rem) { .takeaction-header__back span { position: relative; display: block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0; font-size: 1.0625rem } } .takeaction-header__back span:before { position: absolute; margin: .625rem .9375rem; top: 0; left: 0; content: ''; background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 25 41' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='0' width='25' height='11'%3E%3C/rect%3E%3Crect x='0' y='15' width='25' height='11' opacity='0.699999988'%3E%3C/rect%3E%3Crect x='0' y='30' width='25' height='11'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat; display: block; width: 1.25rem; height: 2.125rem; color: #fff } @media print, (min-width: 48em) { .takeaction-header__back span:before { width: 1.5625rem; height: 2.5625rem } } @media (min-width: 67.5em) { .takeaction-header__back span:before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='0' width='12' height='12' opacity='0.699999988'%3E%3C/rect%3E%3Crect x='16' y='0' width='28' height='12'%3E%3C/rect%3E%3Crect x='0' y='16' width='28' height='12'%3E%3C/rect%3E%3Crect x='32' y='16' width='12' height='12' opacity='0.699999988'%3E%3C/rect%3E%3Crect x='0' y='32' width='12' height='12' opacity='0.699999988'%3E%3C/rect%3E%3Crect x='16' y='32' width='28' height='12'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat; width: 1.75rem } } @media (min-width: 105rem) { .takeaction-header__back span:before { display: block; position: static; margin: 0 auto .9375rem auto; height: 2.75rem; width: 2.75rem } } .takeaction-header--filter .takeaction-header__content { display: none } @media (min-width: 67.5em) { .takeaction-header--filter .takeaction-header__content { display: block } } .takeaction-header--topic .takeaction-header__content { text-transform: uppercase } @media (min-width: 67.5em) { .takeaction-header__content { padding: 2.125rem 0; min-height: 12.75rem } } @media (min-width: 93.75em) { .takeaction-header__content { padding: 3.125rem 0 0; min-height: 16.75rem } .takeaction-header--topic .takeaction-header__content { min-height: 15rem } } .takeaction-header__content h1 { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; font-size: 1.75rem; color: #fff; margin: 0 0 .9375rem 0; padding: 0 } .font--arial .takeaction-header__content h1 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .takeaction-header__content h1 { font-size: 3rem } } @media (min-width: 93.75em) { .takeaction-header__content h1 { font-size: 4rem } } .takeaction-header--topic .takeaction-header__content h1 { margin: 1.75rem 0 1.25rem 0; padding: 0 } @media (min-width: 67.5em) { .takeaction-header--topic .takeaction-header__content h1 { position: absolute; top: 60%; -webkit-transform: perspective(1px) translateY(-60%); transform: perspective(1px) translateY(-60%) } } .takeaction-header__content li, .takeaction-header__content p { font-size: 1.25rem; margin-bottom: 0 } @media (min-width: 93.75em) { .takeaction-header__content li, .takeaction-header__content p { font-size: 1.5rem } } @media (min-width: 67.5em) { .takeaction-header__content p { display: inline } } .takeaction-header__content ul { margin-bottom: .9375rem } @media print, (min-width: 48em) { .takeaction-header__content ul { margin-bottom: 1.875rem } } @media (min-width: 67.5em) { .takeaction-header__content ul { display: inline } } .takeaction-header__content li { color: #fff; font-weight: normal; display: block } @media (min-width: 67.5em) { .takeaction-header__content li { display: inline; margin-left: .25rem } .takeaction-header__content li:after { content: ","; display: inline-block } .takeaction-header__content li:nth-child(2):after { content: attr(data-additional-initiatives-text); margin-left: .5rem } .takeaction-header__content li:last-child:after { display: none } .takeaction-header__content li:nth-child(n + 3) { display: none } } .takeaction-header__content a { font-size: 18px } @media print, (min-width: 48em) { .takeaction-header__content a { font-size: 1.375rem } } @media (min-width: 67.5em) { .takeaction-header__content a { font-size: 1.125rem } } .takeaction-header__reveal-button { width: 100%; background: none; border: 0; box-shadow: none; font-size: .75rem; font-weight: normal; padding: 1.25rem .9375rem; margin: 0; position: relative } .takeaction-header__reveal-button:focus, .takeaction-header__reveal-button:hover { background: none; border: 0 } .takeaction-header__reveal-button:after { font-family: 'unilever-iconfont'; content: '\e025'; position: absolute; margin-left: .9375rem; font-size: .6875rem } @media print, (min-width: 48em) { .takeaction-header__reveal-button:after { margin-top: .125rem; font-size: .9375rem } } .is--action-plan-active .takeaction-header__reveal-button:after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } @media print, (min-width: 48em) { .takeaction-header__reveal-button { font-size: 1.25rem } } @media (min-width: 67.5em) { .takeaction-header__reveal-button { display: none } } .takeaction-header__reveal-panel { display: none; padding-top: .9375rem; text-align: left } .is--action-plan-active .takeaction-header__reveal-panel, .takeaction-header--topic .takeaction-header__reveal-panel { display: block } @media print, (min-width: 48em) { .takeaction-header__reveal-panel { padding-top: 1.875rem } } @media (min-width: 67.5em) { .takeaction-header__reveal-panel { display: block; padding-top: 0; position: absolute; top: 50%; -webkit-transform: perspective(1px) translateY(-50%); transform: perspective(1px) translateY(-50%) } .takeaction-header__reveal-panel h1 { display: none } .takeaction-header--topic .takeaction-header__reveal-panel h1 { display: block } } .takeaction-header__selected-topics { display: block; list-style-type: none; text-align: left; margin: 0; padding: 0 .625rem; margin-left: 11.25rem; min-height: 18.75rem; padding: 4.375rem 0 } .takeaction-header__selected-topics-item { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; color: #007dbb; font-size: 2.25rem } .font--arial .takeaction-header__selected-topics-item { font-family: Arial, Helvetica, sans-serif } .takeaction-header__selected-topics-topic { color: #fff } .takeaction-filter { display: none; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 18; margin: 0; position: absolute; overflow-y: scroll; -webkit-overflow-scrolling: touch } .takeaction-filter.is--active { display: block } .takeaction-filter__content { position: relative; padding: 0 25px } .takeaction-filter__steps { *zoom: 1; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: center; padding: 0; list-style-type: none; margin: 1.25rem 0 } .takeaction-filter__steps:before, .takeaction-filter__steps:after { display: table; content: ""; line-height: 0 } .takeaction-filter__steps:after { clear: both } .takeaction-filter__step { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; opacity: .666; padding: 1.25rem; color: #fff } .font--arial .takeaction-filter__step { font-family: Arial, Helvetica, sans-serif } .takeaction-filter__step.is--active { opacity: 1.0 } .takeaction-filter__step.is--clickable { cursor: pointer } .takeaction-filter__step-text, .takeaction-filter__step-num { display: block } .takeaction-filter__step-text { font-size: 1.125rem; line-height: 1.5 } .takeaction-filter__step-num { font-size: 2.25rem; line-height: 2.25rem } .takeaction-filter__heading, .takeaction-filter__subheading { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; display: block; color: #fff } .font--arial .takeaction-filter__heading, .font--arial .takeaction-filter__subheading { font-family: Arial, Helvetica, sans-serif } .takeaction-filter__heading { margin-bottom: .4375rem; font-size: 1.75rem } @media print, (min-width: 48em) { .takeaction-filter__heading { font-size: 3rem } } @media (min-width: 93.75em) { .takeaction-filter__heading { font-size: 4rem } } .takeaction-filter__subheading { font-size: 1.125rem; margin-bottom: 3.75rem; opacity: .666 } .takeaction-filter__fieldset { padding-bottom: 5rem } @media print, (min-width: 48em) { .takeaction-filter__fieldset { margin-left: 140px; margin-right: 140px } } @media print, (min-width: 30em) { .takeaction-filter__fieldset { padding-bottom: 0 } } .takeaction-filter__fieldset-content { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .takeaction-filter input[type="submit"].takeaction-filter__cta { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: block; width: 100%; font-size: 1rem !important; position: fixed; border-radius: 0; padding: .9375rem 1.875rem; color: #fff; background-color: #007dbb; box-shadow: none; top: auto; bottom: 0; left: 0; right: 0; opacity: 0; pointer-events: none; text-transform: none; transition: all ease 0.3s; z-index: 3 } .font--arial .takeaction-filter input[type="submit"].takeaction-filter__cta { font-family: Arial, Helvetica, sans-serif } .takeaction-filter input[type="submit"].takeaction-filter__cta.is--active { opacity: 1; pointer-events: auto; -webkit-transform: translateZ(0) } .takeaction-filter input[type="submit"].takeaction-filter__cta:hover { background-color: #004976 } .takeaction-filter__label { cursor: pointer; margin-bottom: 1.875rem; padding: 0 10px; text-align: left; position: relative } .takeaction-filter__label-text { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: inline-block; max-width: calc(100% - 50px); color: #ccc; font-size: 1.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.25s ease; line-height: 1.2 } .font--arial .takeaction-filter__label-text { font-family: Arial, Helvetica, sans-serif } .takeaction-filter__label:focus-within .takeaction-filter__label-text { color: #fff } .takeaction-filter__input--radio, .takeaction-filter__input--checkbox { opacity: 0; position: absolute; top: 4px; left: 0; right: 0; margin: 0 auto; z-index: 1 } .takeaction-filter__input--radio:checked ~ .takeaction-filter__label-text, .takeaction-filter__input--checkbox:checked ~ .takeaction-filter__label-text { color: #fff } .takeaction-filter__input--radio:disabled ~ .takeaction-filter__label-text, .takeaction-filter__input--checkbox:disabled ~ .takeaction-filter__label-text { color: #757575 } .takeaction-filter__input--radio:focus + .takeaction-filter__fake-checkbox, .takeaction-filter__input--radio:focus + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--radio:focus + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--radio:focus + .takeaction-filter__fake-radio, .takeaction-filter__input--radio:focus + .takeaction-filter__fake-radio:before, .takeaction-filter__input--radio:focus + .takeaction-filter__fake-radio:after, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-checkbox, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-radio, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-radio:before, .takeaction-filter__input--checkbox:focus + .takeaction-filter__fake-radio:after { border-color: #fff } .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio { border-color: #757575 } .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:before, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:after, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:before, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:after { background-color: #757575; width: 2px; left: 50%; right: auto; top: 50% } .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:before, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } html[dir="rtl"] .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:before, html[dir="rtl"] .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:before, html[dir="rtl"] .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:before, html[dir="rtl"] .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:before { -webkit-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg) } .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:after, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:after, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } html[dir="rtl"] .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-checkbox:after, html[dir="rtl"] .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:after, html[dir="rtl"] .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:after, html[dir="rtl"] .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-radio:after { -webkit-transform: translate(50%, -50%) rotate(-45deg); transform: translate(50%, -50%) rotate(-45deg) } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox { border-color: #007dbb; width: .625rem; height: .625rem; margin-top: .6875rem; margin-left: .125rem; margin-bottom: -.0625rem; top: -.3125rem; -webkit-transform: rotate(45deg); transform: rotate(45deg) } html[dir="rtl"] .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox, .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:after { background-color: #007dbb } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:before { left: -.625rem; width: .6875rem } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:after { top: -1.25rem; height: 1.3125rem } .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:before, .takeaction-filter__input--checkbox:disabled + .takeaction-filter__fake-checkbox:after { height: 7px } .takeaction-filter__input--radio:focus + .takeaction-filter__fake-radio { border-color: #fff } .takeaction-filter__input--radio:checked + .takeaction-filter__fake-radio { width: 18px; height: 18px; margin-bottom: 0; margin-right: 1.25rem; left: -.1875rem; top: 0 } .takeaction-filter__input--radio:checked + .takeaction-filter__fake-radio:before { background-color: #007dbb; width: 10px; height: 10px; border-radius: 50%; top: 2px; left: 2px } .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:before, .takeaction-filter__input--radio:disabled + .takeaction-filter__fake-radio:after { content: ""; height: 7px } .takeaction-filter__fake-checkbox, .takeaction-filter__fake-radio { display: inline-block; position: relative; z-index: 2; background-color: transparent; margin-top: 0; margin-right: 1.875rem; cursor: pointer; transition: all 0.25s ease; top: 0px; left: 0px; float: left } .takeaction-filter__fake-checkbox:before, .takeaction-filter__fake-checkbox:after, .takeaction-filter__fake-radio:before, .takeaction-filter__fake-radio:after { display: block; position: absolute; background-color: transparent; transition: all 0.25s ease } .takeaction-filter__fake-checkbox:before, .takeaction-filter__fake-radio:before { content: "" } .takeaction-filter__fake-checkbox { width: .75rem; height: .75rem; -webkit-transform: rotate(0deg); transform: rotate(0deg); border: 2px solid #ccc; top: .125rem } .takeaction-filter__label:focus-within .takeaction-filter__fake-checkbox { border-color: #007dbb } .takeaction-filter__fake-checkbox:after { content: "" } .takeaction-filter__fake-checkbox:before, .takeaction-filter__fake-checkbox:after { top: -2px; left: -2px; width: .625rem; height: .625rem } .takeaction-filter__fake-radio { width: .75rem; height: .75rem; border: 2px solid #ccc; border-radius: 50%; margin-bottom: 6px; margin-right: 1.625rem; top: .1875rem } .takeaction-filter__label:focus-within .takeaction-filter__fake-radio { border-color: #007dbb } @media (min-width: 37.5em) { .takeaction-filter input[type="submit"].takeaction-filter__cta { display: inline-block; width: auto; min-width: 320px; position: relative; top: 0; left: auto; right: auto; bottom: auto } .takeaction-filter input[type="submit"].takeaction-filter__cta.is--active { margin-bottom: 60px } } @media (min-width: 67.5em) { .takeaction-filter { max-height: 100vh } .takeaction-filter__label { width: 20% } .takeaction-filter__label-text { display: block; float: none; text-align: center; max-width: none } .takeaction-filter__fake-checkbox, .takeaction-filter__fake-radio { display: block; float: none; margin: 0 auto 1.875rem } .takeaction-filter__fake-checkbox { width: 1.375rem; height: 1.375rem } .takeaction-filter__fake-checkbox:before, .takeaction-filter__fake-checkbox:after { width: .9375rem; height: .9375rem } .takeaction-filter__fake-radio { width: 1.375rem; height: 1.375rem; top: 0 } .takeaction-filter__fake-radio:before, .takeaction-filter__fake-radio:after { width: 1rem; height: 1rem; top: 1px; left: 1px } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox { top: 0px; margin-left: auto; width: .9375rem; height: .9375rem; margin-bottom: 1.625rem } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:before { left: -.9375rem; width: 1rem } .takeaction-filter__input--checkbox:checked + .takeaction-filter__fake-checkbox:after { top: -1.875rem; height: 1.9375rem } .takeaction-filter__input--radio:checked + .takeaction-filter__fake-radio { top: -.1875rem; margin: 0 auto 1.375rem; width: 30px; height: 30px; left: 0 } .takeaction-filter__input--radio:checked + .takeaction-filter__fake-radio:before { width: 16px; height: 16px; top: 5px; left: 5px } .takeaction-filter__fieldset { margin-left: 0; margin-right: 0 } .takeaction-filter__fieldset-content { -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-wrap: wrap; flex-wrap: wrap } .takeaction-filter input[type="submit"].takeaction-filter__cta { min-width: 200px } } .takeaction-info-panel { outline: 0; position: absolute; overflow: hidden; top: 0; display: inline-block; margin-top: 8.125rem; height: 100vh; z-index: 16; -webkit-transform: translateX(-100%); transform: translateX(-100%) } .is--info-panel-active .takeaction-info-panel { -webkit-transform: translateX(0); transform: translateX(0); overflow: visible } .is--info-panel-active .takeaction-info-panel:before, .is--info-panel-active .takeaction-info-panel:after { content: '' } @media print, (min-width: 48em) { .takeaction-info-panel { margin-top: 0; transition: -webkit-transform ease 0.3s; transition: transform ease 0.3s } } .takeaction-info-panel:before, .takeaction-info-panel:after { position: absolute; height: 24px; width: 2px; top: -4.5rem; left: 50%; background-color: #fff } @media print, (min-width: 48em) { .takeaction-info-panel:before, .takeaction-info-panel:after { left: 39.0625rem; top: .9375rem } } .takeaction-info-panel:before { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .takeaction-info-panel:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .takeaction-info-panel__container { min-width: 20rem; background: #fff; display: inline-block } @media print, (min-width: 48em) { .takeaction-info-panel__container { height: 100%; overflow: auto; max-width: 37.5rem; display: block } } .takeaction-info-panel__header-block { margin: .9375rem } @media print, (min-width: 30em) { .takeaction-info-panel__header-block { margin-bottom: 1.875rem } } .takeaction-info-panel__image-container { position: relative; overflow: hidden; background-color: #333 } .takeaction-info-panel__image-container h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; position: absolute; bottom: 0; font-size: 1.375rem; color: #fff; padding: 6.25rem .9375rem .9375rem; width: 100%; background: linear-gradient(to bottom, transparent, #000); outline: 0 } .font--arial .takeaction-info-panel__image-container h2 { font-family: Arial, Helvetica, sans-serif } .takeaction-info-panel__image-container img { width: 100% } .takeaction-info-panel__status { position: relative; color: #fff; font-size: .75rem; padding: .625rem .9375rem; padding-left: 2.5rem; display: block } .takeaction-info-panel__status strong { position: relative; font-size: .625rem; position: absolute; left: .9375rem; top: .625rem; width: 15px; height: 17px; display: block; text-align: center; padding-top: .125rem } .takeaction-info-panel__status strong:before { position: absolute; font-family: 'unilever-iconfont'; font-weight: normal; font-size: 1rem; top: -3px; left: 1px } .takeaction-info-panel__status--expiring { background-color: #D34400 } .takeaction-info-panel__status--expiring strong:before { content: '\e904' } .takeaction-info-panel__status--expired { background-color: #D34400; padding-left: .9375rem } .takeaction-info-panel__status--new { background-color: #3f7e44 } .takeaction-info-panel__status--new strong:before { content: "\e903" } .takeaction-info-panel__statistics { list-style-type: none; color: #fff; margin: 0 .9375rem; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .takeaction-info-panel__statistics { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 30em) { .takeaction-info-panel__statistics { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin: 0 1.875rem } } .takeaction-info-panel__statistics li { margin-bottom: .9375rem; -ms-flex: 1; flex: 1; padding: .9375rem; font-size: .9375rem } @media print, (min-width: 30em) { .takeaction-info-panel__statistics li { margin-bottom: 1.875rem } } @media print, (min-width: 30em) { .takeaction-info-panel__statistics li:nth-child(2) { margin-left: 1.875rem } } .takeaction-info-panel__statistics p { margin: 0 } .takeaction-info-panel__statistics strong { display: block; font-size: 4rem } .takeaction-info-panel__video { display: block; position: relative; margin: 0 .9375rem .9375rem; padding-bottom: 56.25%; overflow: hidden } @media print, (min-width: 30em) { .takeaction-info-panel__video { margin: 0 1.875rem 1.875rem } } .takeaction-info-panel__video iframe, .takeaction-info-panel__video object, .takeaction-info-panel__video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .takeaction-info-panel__content-block { color: #666; padding: 0 .9375rem 1.875rem .9375rem } @media print, (min-width: 30em) { .takeaction-info-panel__content-block { padding: 0 1.875rem 1.875rem } } .takeaction-info-panel__content-block--footer { padding-top: 1.875rem; background-color: #eee } .takeaction-info-panel__rich-text { margin-bottom: 1.875rem } .takeaction-info-panel__heading, .takeaction-info-panel__rich-text h3 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #666; font-size: 1.5rem; padding-top: .9375rem } .font--arial .takeaction-info-panel__heading, .font--arial .takeaction-info-panel__rich-text h3 { font-family: Arial, Helvetica, sans-serif } .takeaction-info-panel__heading:first-child, .takeaction-info-panel__rich-text h3:first-child { padding-top: 0 } .takeaction-info-panel__rich-text ul, .takeaction-info-panel__rich-text ol { font-size: .875rem; margin-left: 1.875rem } @media print, (min-width: 48em) { .takeaction-info-panel__rich-text ul, .takeaction-info-panel__rich-text ol { font-size: .9375rem } } @media (min-width: 93.75em) { .takeaction-info-panel__rich-text ul, .takeaction-info-panel__rich-text ol { font-size: 1rem } } .takeaction-info-panel__rich-text img, .takeaction-info-panel__rich-text p { width: 100%; margin-bottom: .9375rem } .takeaction-info-panel__quote { padding: 0; margin-bottom: 1.875rem; margin-left: 1.875rem } .takeaction-info-panel__quote p { font-size: 1.25rem; text-transform: none; color: #666; font-family: inherit; margin-bottom: .625rem } .takeaction-info-panel__quote p:before, .takeaction-info-panel__quote p:after { font-family: Georgia, serif; font-size: 3.5rem; position: absolute; line-height: 0; color: #007dbb } .takeaction-info-panel__quote p:before { content: "\201c"; margin: 20px 0 0 0; margin-left: -30px } .takeaction-info-panel__quote p:after { content: "\201d"; margin: 25px 0 0 0; margin-left: 5px } .takeaction-info-panel__cta { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: #007dbb; font-size: 1.5rem; color: #fff; display: block; margin-bottom: 1.875rem; padding: 1.25rem; text-align: center } .font--arial .takeaction-info-panel__cta { font-family: Arial, Helvetica, sans-serif } .takeaction-info-panel__cta:hover { color: #fff } .takeaction-info-panel__initiative-links { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #007dbb; font-size: 1.25rem; display: -ms-flexbox; display: flex } .font--arial .takeaction-info-panel__initiative-links { font-family: Arial, Helvetica, sans-serif } .takeaction-info-panel__initiative-links a { -ms-flex: 1; flex: 1 } .takeaction-info-panel__initiative-links a:before, .takeaction-info-panel__initiative-links a:after { vertical-align: top; transition: all ease 0.3s } .takeaction-info-panel__initiative-links a:first-child:before { content: '\2190'; margin: 0 15px; margin-right: 5px; font-size: 1.0625rem } .takeaction-info-panel__initiative-links a:last-child { text-align: right } .takeaction-info-panel__initiative-links a:last-child:after { content: '\2192'; margin: 0 15px; margin-left: 5px; font-size: 1.0625rem } .takeaction-info-panel__initiative-links a:hover:before, .takeaction-info-panel__initiative-links a:hover:after { margin: 0 10px } .takeaction-info-panel__initiative-links span { display: none } .takeaction-info-panel__initiative-links span:before, .takeaction-info-panel__initiative-links span:after { content: '\00a0' } @media print, (min-width: 30em) { .takeaction-info-panel__initiative-links span { display: inline-block } } .takeaction-info-panel__partners { font-size: 0; margin-bottom: 1.875rem } .takeaction-info-panel__partners img { margin: 0 0 .9375rem 0; margin-right: .9375rem } .takeaction-info-panel__topics { margin-bottom: 1.875rem } .takeaction-info-panel__topics ul { font-size: 0; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; list-style-type: none } .font--arial .takeaction-info-panel__topics ul { font-family: Arial, Helvetica, sans-serif } .takeaction-info-panel__topics li { display: inline-block } .takeaction-info-panel__topics a { display: block; font-size: 1rem; padding: .9375rem; color: #fff; margin: 0 0 .9375rem 0; margin-right: .9375rem } .takeaction-plan h1, .takeaction-plan h2 { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; font-size: 1.75rem; padding: 0; margin: 0 0 .9375rem 0 } .font--arial .takeaction-plan h1, .font--arial .takeaction-plan h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .takeaction-plan h1, .takeaction-plan h2 { font-size: 3rem } } @media (min-width: 93.75em) { .takeaction-plan h1, .takeaction-plan h2 { font-size: 4rem } } @media print, (min-width: 48em) { .takeaction-plan p { font-size: 1rem } } @media (min-width: 67.5em) { .takeaction-plan p { font-size: 1.125rem } } .is--action-plan-active .takeaction-plan { display: none } @media (min-width: 67.5em) { .is--action-plan-active .takeaction-plan { display: block } } .takeaction-plan__initiatives { background-color: #222; padding: .9375rem 0 2.8125rem 0; color: #ccc; overflow: hidden } @media print, (min-width: 48em) { .takeaction-plan__initiatives { padding: 1.875rem 0 2.8125rem 0 } } @media (min-width: 67.5em) { .takeaction-plan__initiatives { padding: 5.625rem 0 } } .takeaction-plan__initiatives h1, .takeaction-plan__initiatives h2 { color: #fff } .takeaction-plan__initiatives img { width: 100% } .takeaction-plan__initiatives strong { color: #fff } .takeaction-plan__initiatives .owl-stage { padding-top: .9375rem; display: -ms-flexbox; display: flex } @media print, (min-width: 48em) { .takeaction-plan__initiatives .owl-stage { padding-top: 1.25rem } } @media (min-width: 67.5em) { .takeaction-plan__initiatives .owl-stage { padding-top: 2.8125rem } } .takeaction-plan__initiatives .owl-item { position: relative } @media (min-width: 67.5em) { .takeaction-plan__initiatives .owl-item:hover, .takeaction-plan__initiatives .owl-item:focus, .takeaction-plan__initiatives .owl-item.focused { z-index: 3 !important } } .takeaction-plan__initiatives .owl-item:nth-child(odd) { z-index: 2 } .takeaction-plan__initiatives .owl-item:nth-child(even) { z-index: 1; top: -.9375rem } @media print, (min-width: 48em) { .takeaction-plan__initiatives .owl-item:nth-child(even) { top: -1.25rem } } @media (min-width: 67.5em) { .takeaction-plan__initiatives .owl-item:nth-child(even) { top: -2.8125rem } } .takeaction-plan__initiatives .owl-item:last-child { display: none } .takeaction-plan__count { font-size: 1rem !important } @media print, (min-width: 48em) { .takeaction-plan__count { font-size: 1.5rem !important } } .takeaction-plan__key { list-style-type: none } @media (min-width: 67.5em) { .takeaction-plan__key { display: -ms-flexbox; display: flex } } .takeaction-plan__key-item { position: relative; padding: 0 4.0625rem; font-size: .8125rem; margin-bottom: .9375rem; min-height: 3.125rem } .takeaction-plan__key-item div { left: 0; right: auto } @media (min-width: 67.5em) { .takeaction-plan__key-item { width: 50%; -ms-flex: 1; flex: 1; padding: 0 4.6875rem } } .takeaction-plan__initiative-items { width: 100vw; margin-top: .9375rem; margin-bottom: 2.8125rem } .takeaction-plan__initiative-item { box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.3); transition: all 0.45s ease; direction: ltr; display: block } @media (min-width: 67.5em) { .takeaction-plan__initiative-item:hover, .takeaction-plan__initiative-item:focus { box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.75); -webkit-transform: scale(1.1); transform: scale(1.1) } } .takeaction-plan__image-container { position: relative; display: block; background-color: #666 } .takeaction-plan__image-container h2, .takeaction-plan__image-container h3 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; position: absolute; bottom: 0; width: 100%; color: #fff; font-size: 1rem; padding: 3.5rem 1.875rem 1.5rem; margin: 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85)) } .font--arial .takeaction-plan__image-container h2, .font--arial .takeaction-plan__image-container h3 { font-family: Arial, Helvetica, sans-serif } .takeaction-plan__initiative-controls { display: none; position: relative; width: 100%; clear: both; height: 5rem } @media (min-width: 67.5em) { .takeaction-plan__initiative-controls { display: block } } .takeaction-plan__initiative-prev, .takeaction-plan__initiative-next { position: absolute; display: none; background: none; border: 0; box-shadow: none; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.25rem; vertical-align: top } .font--arial .takeaction-plan__initiative-prev, .font--arial .takeaction-plan__initiative-next { font-family: Arial, Helvetica, sans-serif } .takeaction-plan__initiative-prev:-moz-focusring, .takeaction-plan__initiative-next:-moz-focusring { outline: 1px dotted #fff } .takeaction-plan__initiative-prev:focus, .takeaction-plan__initiative-prev:hover, .takeaction-plan__initiative-next:focus, .takeaction-plan__initiative-next:hover { background: none } .takeaction-plan__initiative-prev:hover:before, .takeaction-plan__initiative-prev:hover:after, .takeaction-plan__initiative-next:hover:before, .takeaction-plan__initiative-next:hover:after { margin: 0 10px } .takeaction-plan__initiative-prev.is--active, .takeaction-plan__initiative-next.is--active { display: block } .takeaction-plan__initiative-prev { left: 0 } .takeaction-plan__initiative-prev:before { content: '\2190'; margin: 0 15px; margin-right: 5px; font-size: 1.0625rem; vertical-align: top; transition: all ease 0.3s } .takeaction-plan__initiative-next { right: 0 } .takeaction-plan__initiative-next:after { content: '\2192'; margin: 0 15px; margin-left: 5px; font-size: 1.0625rem; vertical-align: top; transition: all ease 0.3s } .takeaction-plan__share { position: relative } .takeaction-plan__share h2 { color: #fff; font-size: 1.5rem } @media print, (min-width: 48em) { .takeaction-plan__share h2 { font-size: 2.25rem } } @media (min-width: 67.5em) { .takeaction-plan__share h2 { width: 60% } } @media (min-width: 93.75em) { .takeaction-plan__share h2 { font-size: 3rem } } .takeaction-plan__share p { color: #fff } .takeaction-plan__icons { margin-top: .625rem; text-align: center } .no-js .takeaction-plan__icons { display: none } @media (min-width: 67.5em) { .takeaction-plan__icons { position: absolute; top: 0; right: 0; margin-top: 0 } } .takeaction-plan__icons a { display: inline-block; margin: 0 .9375rem; transition: all ease 0.3s } @media (min-width: 67.5em) { .takeaction-plan__icons a { margin: 0 1.125rem } } .takeaction-plan__icons a:hover { -webkit-transform: scale(1.25); transform: scale(1.25) } .takeaction-plan__icons [class^="icon-"]:before { text-align: center; color: #fff } @media print, (min-width: 48em) { .takeaction-plan__icons [class^="icon-"]:before { font-size: 2rem } } @media (min-width: 67.5em) { .takeaction-plan__icons [class^="icon-"]:before { font-size: 2.25rem } } @media (min-width: 93.75em) { .takeaction-plan__icons [class^="icon-"]:before { font-size: 2.625rem } } .takeaction-plan__statement { padding: 2.8125rem 0 1.875rem 0 } @media (min-width: 67.5em) { .takeaction-plan__statement { padding: 5.625rem 0 } } .takeaction-plan__hero { position: relative } .takeaction-plan__hero h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.25rem } .font--arial .takeaction-plan__hero h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .takeaction-plan__hero h2 { font-size: 1.75rem } } @media (min-width: 67.5em) { .takeaction-plan__hero h2 { color: #fff; font-size: 2.25rem } } @media (min-width: 67.5em) { .takeaction-plan__hero p { color: #fff } } .takeaction-plan__hero a { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1rem; display: inline-block; color: #fff; background-color: #007dbb; padding: .9375rem 1.875rem; transition: all ease 0.3s } .font--arial .takeaction-plan__hero a { font-family: Arial, Helvetica, sans-serif } .takeaction-plan__hero a:hover { background-color: #004976 } .takeaction-plan__hero-image { position: relative; overflow: hidden; padding-top: 56.25%; height: 0; margin-bottom: 1.875rem } @media (min-width: 67.5em) { .takeaction-plan__hero-image { padding-top: 50%; margin: 0 } } @media (min-width: 93.75em) { .takeaction-plan__hero-image { padding-top: 40% } } .takeaction-plan__hero-image img { position: absolute; top: 0; bottom: 0; margin: auto; width: 100% } .takeaction-plan__hero-content { position: relative; width: 100% } @media (min-width: 67.5em) { .takeaction-plan__hero-content { position: absolute; bottom: 0; height: 100%; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.5), transparent) } .takeaction-plan__hero-content .columns { position: absolute; bottom: 3.75rem; width: 40% } } .takeaction-plan__more-items { padding: 1.875rem 0 } @media (min-width: 67.5em) { .takeaction-plan__more-items { padding: 3.75rem 0 } } .takeaction-plan__more-items h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.125rem; margin: .9375rem 0; padding: 0; transition: all ease 0.3s } .font--arial .takeaction-plan__more-items h2 { font-family: Arial, Helvetica, sans-serif } .takeaction-plan__more-items a { display: block } .takeaction-plan__more-items p { margin-bottom: .625rem; color: #666 } @media print, (min-width: 48em) { .takeaction-plan__more-items p { font-size: .9375rem } } .takeaction-plan__more-items img { width: 100% } .takeaction-plan__more-items .owl-stage-outer { overflow: hidden } .takeaction-plan__more-items .owl-stage { display: -ms-flexbox; display: flex } .takeaction-plan .takeaction-plan__read-more { color: #007dbb; transition: all ease 0.3s; font-weight: bold } .takeaction-plan .takeaction-plan__read-more:before, .takeaction-plan .takeaction-plan__read-more:after { font-family: 'unilever-iconfont'; font-weight: normal; margin-right: 5px; transition: all ease 0.3s; font-size: .625rem } @media print, (min-width: 30em) { .takeaction-plan .takeaction-plan__read-more:before, .takeaction-plan .takeaction-plan__read-more:after { font-size: .75rem } } .takeaction-plan .takeaction-plan__read-more:before { content: '\e021' } .takeaction-plan__item:hover .takeaction-plan__read-more, .takeaction-plan__item:hover h2 { color: #004976 } .no-js .takeaction-plan__initiative-items { width: 100% } .no-js .takeaction-plan__initiative-items, .no-js .takeaction-plan__more-items .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 67.5em) { .no-js .takeaction-plan__initiative-items, .no-js .takeaction-plan__more-items .columns { margin: -.9375rem } } .no-js .takeaction-plan__initiative-item, .no-js .takeaction-plan__item { margin: .9375rem; width: 100% } @media (min-width: 67.5em) { .no-js .takeaction-plan__initiative-item, .no-js .takeaction-plan__item { width: 30% } } @media (min-width: 67.5em) { .takeaction-plan .large-uncollapse { padding-left: .9375em; padding-right: .9375em } } .take-action-onboarding { display: none; position: absolute; top: 0; bottom: 0; width: 100%; z-index: 16; overflow: auto } .is--onboarding-tour-active .take-action-onboarding { display: block } .take-action-onboarding__container { max-width: 1080px; margin: 0 auto } @media (min-width: 67.5em) { .take-action-onboarding__container { padding: 0 100px } } .take-action-onboarding__cta-container { overflow: auto; padding: 15px } @media (min-width: 67.5em) { .take-action-onboarding__cta-container { padding-top: 85px } } .take-action-onboarding__cta-container a { float: right; text-decoration: underline; color: #fff; font-size: 13px } .take-action-onboarding__checkbox-container { float: left } .take-action-onboarding__checkbox-container label { display: inline-block; color: #fff; font-size: 12px; margin-left: 4px } .take-action-onboarding__checkbox-container input { vertical-align: middle } .take-action-onboarding__checkbox-container input:focus + label { outline: 1px dotted } .take-action-onboarding .owl-stage-outer { overflow: hidden } .take-action-onboarding .owl-stage { display: -ms-flexbox; display: flex } .take-action-onboarding__carousel-image { width: 100%; object-fit: contain } .take-action-onboarding__carousel-image-container { background: #222222; height: 300px; overflow: hidden; display: -ms-flexbox; display: flex } @media print, (min-width: 48em) { .take-action-onboarding__carousel-image-container { height: 50vh } } .take-action-onboarding__carousel-info-container { color: #fff; margin: auto; padding: 30px 10%; text-align: center } @media print, (min-width: 48em) { .take-action-onboarding__carousel-info-container { padding: 75px 20% 0 } } @media (min-width: 67.5em) { .take-action-onboarding__carousel-info-container { padding: 40px 10% 0 } } .take-action-onboarding__carousel-info-container a { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1rem; display: inline-block; color: #fff; background-color: #007dbb; padding: .9375rem 1.875rem; transition: all ease 0.3s } .font--arial .take-action-onboarding__carousel-info-container a { font-family: Arial, Helvetica, sans-serif } .take-action-onboarding__carousel-info-container a:hover { background: #004976 } .take-action-onboarding__carousel { margin: 0; padding: 0; list-style-type: none } .take-action-onboarding__carousel h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #fff } .font--arial .take-action-onboarding__carousel h2 { font-family: Arial, Helvetica, sans-serif } .take-action-onboarding__carousel .owl-item { -webkit-transform: scale(1); transform: scale(1) } .take-action-onboarding__carousel .owl-item:focus { outline: 0; border: 1px solid #333 } .take-action-onboarding__carousel .owl-dots .owl-dot { margin: 0 4px } .take-action-onboarding__carousel .owl-dots .owl-dot span { width: 8px; height: 8px; background-color: #666 } .take-action-onboarding__carousel .owl-dots .owl-dot.active span { background-color: #fff } .take-action-onboarding__carousel .owl-prev.disabled, .take-action-onboarding__carousel .owl-next.disabled { display: none !important } .take-action-onboarding__carousel .owl-nav { display: none !important } @media (min-width: 67.5em) { .take-action-onboarding__carousel .owl-nav { position: absolute; top: 44%; width: 100%; display: block !important } .take-action-onboarding__carousel .owl-prev, .take-action-onboarding__carousel .owl-next { position: absolute; top: 50%; width: 4vmin; height: 4vmin; background: transparent; border-top: 1.25vmin solid white; border-right: 1.25vmin solid white; box-shadow: 0 0 0 lightgray; transition: all 200ms ease } .take-action-onboarding__carousel .owl-prev:before, .take-action-onboarding__carousel .owl-next:before { display: none } .take-action-onboarding__carousel .owl-prev:focus, .take-action-onboarding__carousel .owl-next:focus { outline: 1px dotted white } .take-action-onboarding__carousel .owl-prev { left: -70px; -webkit-transform: translate3d(0, -50%, 0) rotate(-135deg); transform: translate3d(0, -50%, 0) rotate(-135deg) } .take-action-onboarding__carousel .owl-next { right: -70px; left: auto; -webkit-transform: translate3d(0, -50%, 0) rotate(45deg); transform: translate3d(0, -50%, 0) rotate(45deg) } } .takeaction-landing { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 20; max-height: 100vh; overflow-y: auto } .js .takeaction-landing.is--active { display: block } .takeaction-landing__content { padding: 15px; margin: 0 auto; margin-bottom: 60px; -webkit-overflow-scrolling: touch; position: relative } @media print, (min-width: 48em) { .takeaction-landing__content { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-bottom: 15px; box-shadow: 0px 0px 80px 1px #007dbb; background: #000 } } .takeaction-landing__logo { width: 55px; height: auto } .takeaction-landing__heading, .takeaction-landing__copy, .takeaction-landing__cta { color: #fff } .takeaction-landing__heading { font-family: "DINWebPro-Black", Arial, Helvetica, sans-serif; margin-bottom: 30px; padding: 0 } .font--arial .takeaction-landing__heading { font-family: Arial, Helvetica, sans-serif } .takeaction-landing__heading:focus { outline: 0 } .takeaction-landing__copy { margin-bottom: 20px } .takeaction-landing__copy p { margin-bottom: 30px; text-align: left; font-size: 15px } .takeaction-landing__copy p:last-child { margin-bottom: 0 } .takeaction-landing__cta { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: block; min-height: 45px; padding: 15px; background-color: #007dbb; transition: all ease 0.3s; font-size: 16px } .font--arial .takeaction-landing__cta { font-family: Arial, Helvetica, sans-serif } .takeaction-landing__cta:hover, .takeaction-landing__cta:focus, .takeaction-landing__cta:active { color: #fff; background: #004976 } .takeaction-landing__cta-separator { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; display: block; margin-top: 20px; margin-bottom: 20px; color: #fff } .font--arial .takeaction-landing__cta-separator { font-family: Arial, Helvetica, sans-serif } .takeaction-landing__footer { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 60px; display: inline-block } .font--arial .takeaction-landing__footer { font-family: Arial, Helvetica, sans-serif } .takeaction-landing__footer-copyright, .takeaction-landing__footer-link { color: #fff; margin: 0 5px; float: left } .takeaction-landing__footer-link { text-decoration: underline } .takeaction-landing__footer-link:hover, .takeaction-landing__footer-link:focus, .takeaction-landing__footer-link:active { color: #ccc } @media (min-width: 37.5em) { .takeaction-landing__content { width: 85%; padding: 1.875rem; padding-left: 140px; max-width: 700px } .takeaction-landing__logo { position: absolute; left: 40px; top: 40px } .takeaction-landing__heading { text-align: left; margin-top: 5px } .takeaction-landing__cta { min-height: 64px; font-size: 24px; padding-top: 24px } .takeaction-landing__cta, .takeaction-landing__cta-separator { margin-right: 90px; font-size: 18px } .takeaction-landing__footer { margin-right: 90px } } .debug { display: block; position: absolute; top: 10px; right: 10px; z-index: 9999 } .debug button { padding: 8px } .sdg-taxonomy-container { background: #eeeeee; padding: 15px 0 } .sdg-taxonomy-panel__list { padding: 0; margin: 0; list-style: none; overflow: auto; margin-left: -10px; margin-top: -10px } .sdg-taxonomy-panel__list li { margin-left: 10px; margin-top: 10px; float: left } .sdg-taxonomy-panel__list img { width: 90px; height: 90px } .sdg-content-banner { background: #eeeeee; padding: 25px 0; position: relative; border-bottom: 1px solid #ccc } .sdg-content-banner .button-link { background: none; color: #007dbb; border: none; padding: 0 0 2px; font: inherit; cursor: pointer; font-size: 13px; transition: color 0.3s } .no-js .sdg-content-banner .button-link { display: none } .sdg-content-banner .button-link:hover, .sdg-content-banner .button-link:focus, .sdg-content-banner .button-link:active { color: #004976 } .sdg-content-banner .button-link::before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e025"; margin-right: 5px } .sdg-content-banner .button-link--close::before { content: "\e01f" } .sdg-content-banner .button-link--back::before { content: "\e023" } .sdg-content-banner .default-state { overflow: auto } .sdg-content-banner .default-state__un-logo { width: 50px; height: 50px; float: left } .sdg-content-banner .default-state__container { margin-left: 65px } .sdg-content-banner .default-state__sdg-info { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start } .sdg-content-banner .default-state__sdg-count { font-size: 50px; line-height: 1; font-family: 'unilever_illustrative_betaBd'; position: relative; top: 5px; -ms-flex-item-align: end; align-self: flex-end } .sdg-content-banner .default-state__sdg-count-description { font-size: 15px; -ms-flex-item-align: end; align-self: flex-end; margin-left: 10px; max-width: 170px } .js .sdg-content-banner .listing-state { display: none } .sdg-content-banner .listing-state__description-container .listing-state__learn-more { display: none } .sdg-content-banner .listing-state__description-container .button-link { margin-bottom: 20px } .sdg-content-banner .listing-state__learn-more { font-size: 14px; margin-bottom: 16px; display: inline-block } .sdg-content-banner .listing-state__list { padding: 0; margin: 0 0 20px -10px; list-style: none; overflow: auto } .sdg-content-banner .listing-state__list li { margin-left: 10px; margin-top: 10px; width: calc(33% - 10px); float: left } .sdg-content-banner .listing-state__list li a { display: block } .sdg-content-banner .listing-state__list li img { width: 100%; cursor: pointer } .js .sdg-content-banner .detail-state { display: none } .sdg-content-banner .detail-state__title { font-family: "DINWebPro", Arial, Helvetica, sans-serif; margin-top: 15px } .font--arial .sdg-content-banner .detail-state__title { font-family: Arial, Helvetica, sans-serif } .sdg-content-banner .detail-state__listing .flex-container { -ms-flex-pack: start; justify-content: flex-start } .sdg-content-banner .detail-state__listing-heading { color: #007DBB; font-weight: bold; font-size: 15px } .sdg-content-banner .detail-state__listing-item-image { border-radius: 5px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); margin-bottom: 10px; width: 100% } .sdg-content-banner .detail-state__listing-item-title { line-height: 1.35 } @media print, (min-width: 48em) { .sdg-content-banner .button-link { font-size: 15px } .sdg-content-banner .default-state__un-logo { width: 75px; height: 75px } .sdg-content-banner .default-state__container { margin-left: 95px } .sdg-content-banner .default-state__sdg-info { margin-top: -10px } .sdg-content-banner .listing-state__description-container .listing-state__learn-more { display: block; margin-top: 35px } .sdg-content-banner .listing-state__list-container .listing-state__learn-more { display: none } .sdg-content-banner .listing-state__list li { width: calc(25% - 10px) } .sdg-content-banner .detail-state__title { margin-top: 0 } } @media (min-width: 67.5em) { .sdg-content-banner .listing-state__description-container .listing-state__learn-more { margin-top: 0 } .sdg-content-banner .listing-state__list li { width: calc(16.6% - 10px) } } .spotlight { position: relative; padding: 50px 20px 30px; margin-bottom: 30px; background-color: #eee } .spotlight + .spotlight { border-bottom: none } @media (min-width: 48em) { .spotlight { padding-top: 56px } } .spotlight__sticker { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; position: absolute; top: 0; color: #fff; padding: 9px 13px 9px; border-radius: 0 0 5px 0px; left: -1px } .font--arial .spotlight__sticker { font-family: Arial, Helvetica, sans-serif } .spotlight__sticker > p { font-size: 14px; margin-bottom: 0 } .spotlight__sticker > p:before { content: ''; display: inline-block; opacity: 0.8; background-image: url(../images/bulb.svg); background-repeat: no-repeat; width: 19px; height: 22px; vertical-align: middle; margin-right: 7px } .spotlight__image { border-radius: 5px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3) } @media (min-width: 48em) { .spotlight__image { max-width: 290px; margin-top: 0px; float: right; margin: 0 0 20px 30px } } @media (min-width: 93.75em) { .spotlight__image { max-width: 310px } } .spotlight__heading { padding-top: 15px } @media (min-width: 48em) { .spotlight__heading { padding-top: 0 } } .spotlight__tweet { text-align: center } .spotlight__copy ul, .spotlight__copy ol { clear: left; padding-left: 20px } .spotlight .tweet { display: inline-block; padding-top: 30px } .spotlight__sdg-panel { border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px } .spotlight--green { border-left: 5px solid #54802d } .spotlight--green .spotlight__sticker { background-color: #54802d } .spotlight--green .spotlight__heading { color: #54802d } .spotlight--blue { border-left: 5px solid #007dbb } .spotlight--blue .spotlight__sticker { background-color: #007dbb } .spotlight--blue .spotlight__heading { color: #007dbb } .spotlight--pink { border-left: 5px solid #d0006f } .spotlight--pink .spotlight__sticker { background-color: #d0006f } .spotlight--pink .spotlight__heading { color: #d0006f } .fact-box { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px 0 10px 40px; margin: 10px 0 30px } .fact-box__heading { font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-bottom: 20px; position: relative; font-size: 1.125rem } @media (min-width: 93.75em) { .fact-box__heading { font-size: 1.1875rem } } @media (max-width: 48em) { .fact-box__heading { font-size: 1.0625rem } } @media (max-width: 30em) { .fact-box__heading { font-size: 1rem } } .fact-box__heading::before { content: ''; position: absolute; width: 30px; height: 30px; left: -40px; top: -5px; border-radius: 50% } .fact-box__heading::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e902"; position: absolute; left: -28px; top: -2px; font-size: 18px } .fact-box ul, .fact-box ol { padding-left: 18px } .fact-box--blue .fact-box__heading { color: #007dbb } .fact-box--blue .fact-box__heading::before { background-color: #DCF1FA } .fact-box--green .fact-box__heading { color: #54802d } .fact-box--green .fact-box__heading::before { background-color: #E4F0C3 } .fact-box--pink .fact-box__heading { color: #d0006f } .fact-box--pink .fact-box__heading::before { background-color: #FBEAF4 } .insight__heading { font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-family: "DINWebPro", Arial, Helvetica, sans-serif; padding-bottom: 10px; letter-spacing: -0.025em; font-size: 1.625em } .font--arial .insight__heading { font-family: Arial, Helvetica, sans-serif } @media (min-width: 93.75em) { .insight__heading { font-size: 1.875em } } @media (max-width: 48em) { .insight__heading { font-size: 1.25em } } @media (max-width: 30em) { .insight__heading { font-size: 1.125em } } .insight { position: relative; margin-bottom: 3em } .insight__heading { text-align: left; padding-bottom: 75px } @media (min-width: 48em) { .insight__heading { padding: 0 0 15px 169px } } .insight__hr { position: absolute; margin: 0; width: 100% } .insight__hr--down { background: url(../images/hr_down.png) center 0 no-repeat; background-size: 100% 5px } @media (min-width: 48em) { .insight__hr--down { padding-bottom: 5px } } .insight__content { background-color: #e4f0c3; background: url(../images/hr.png) center 0 no-repeat; background-size: 100% 5px; padding: 70px 15px 15px; position: relative; text-align: left; border-radius: 0 0 10px 10px } @media (min-width: 48em) { .insight__content div:nth-child(2) { padding-left: 139px } } .insight__content--green { background-color: #e4f0c3 } .insight__content--blue { background-color: #dcf1fa } .insight__content--pink { background-color: #fbeaf4 } @media (min-width: 48em) { .insight__content { padding: 15px 30px 30px; text-align: left } } .insight__image { position: absolute; background-repeat: no-repeat; background-size: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); border-radius: 50%; width: 124px; height: 124px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -62px } @media print { .insight__image { background-image: none !important; box-shadow: none } } .insight__image img { opacity: 0 } @media print { .insight__image img { opacity: 1 } } @media (min-width: 48em) { .insight__image { -webkit-transform: none; transform: none; left: 30px } } .insight__biography { font-style: oblique } @media (min-width: 48em) { .insight__copy { padding-top: 10px } } .insight__copy ul { margin-left: 15px } .insight__tweet { text-align: center } .insight__sdg-panel { border-top: 1px solid #ffffff; margin-top: 20px; padding-top: 20px } .theme-site-home .site-header { background: #fff; margin: 0; padding: 0; position: fixed; width: 100%; z-index: 99; } .site-header>.primary-nav>.row>.column { justify-content: space-between; display: flex; } @media screen and (min-width: 57.5em) { .site-header>.primary-nav>.row>.column { display: block; } } .theme-site-home .site-header .primary-nav:after { display: none } .js .theme-site-home .site-header div.preheader .preheader-container>ul>li>a, .js .theme-site-home .site-header div.preheader .preheader-container>ul>li>a.location::after { color: #007dbb; background: #fff; } @media (min-width: 67.5em) { .theme-site-home.menu-open .site-header { background-color: #fff } .theme-site-home.menu-open .site-header svg { fill: #0F0E9A !important } .theme-site-home.menu-open .site-header .primary-nav__link, .theme-site-home.menu-open .site-header .primary-nav__link[data-id]::after { color: #007dbb } .theme-site-home .site-header { width: 100%; z-index: 1; background: none; transition: background ease 0.45s; background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.33); } .js .theme-site-home .site-header { position: relative; z-index: 2 } .js .theme-site-home .site-header.focus { background-color: #fff } .js .theme-site-home .site-header.focus .svg { background: url(../images/logo_blue.png) no-repeat; display: block; transition: 0.45s ease; background-size: 100%; height: 100%; } .js .theme-site-home .site-header.focus .primary-nav__link, .js .theme-site-home .site-header.focus .primary-nav__link[data-id]::after { color: #007dbb } .js .theme-site-home .site-header div.preheader .preheader-container>ul>li>a, .js .theme-site-home .site-header div.preheader .preheader-container>ul>li>a.location::after { color: #fff; background: transparent; } .js .theme-site-home .site-header:hover, .js .theme-site-home .site-header:focus, .js .theme-site-home .site-header:focus-within { background-color: #fff } .js .theme-site-home .site-header:hover .svg, .js .theme-site-home .site-header:focus .svg, .js .theme-site-home .site-header:focus-within .svg { background: url(../images/logo_blue.png) no-repeat; display: block; transition: 0.45s ease; background-size: 100%; height: 100%; } .js .theme-site-home .site-header:hover div.preheader ul li a, .js .theme-site-home .site-header:hover div.preheader ul li a.location::after, .js .theme-site-home .site-header:hover .primary-nav__link, .js .theme-site-home .site-header:hover .primary-nav__link[data-id]::after, .js .theme-site-home .site-header:focus .primary-nav__link, .js .theme-site-home .site-header:focus .primary-nav__link[data-id]::after, .js .theme-site-home .site-header:focus-within .primary-nav__link, .js .theme-site-home .site-header:focus-within .primary-nav__link[data-id]::after { color: #007dbb } .js .theme-site-home .site-header:hover div.preheader ul li ul li a, .js .theme-site-home .site-header:focus div.preheader ul li ul li a { color: #fff; } .theme-site-home.menu-open .site-header div.preheader .preheader-container>ul>li>a, .theme-site-home.menu-open .site-header div.preheader .preheader-container>ul>li>.location, .js .theme-site-home .site-header:hover div.preheader .preheader-container>ul>li>a:hover, .js .theme-site-home .site-header:focus div.preheader .preheader-container>ul>li>a, .js .theme-site-home .site-header:focus-within div.preheader .preheader-container>ul>li>a, .js .theme-site-home .site-header:hover div.preheader .preheader-container>ul>li>a.location:hover::after, .js .theme-site-home .site-header:focus div.preheader .preheader-container>ul>li>a.location::after, .js .theme-site-home .site-header:focus-within div.preheader .preheader-container>ul>li>a.location::after { color: #007dbb !important; background: #fff !important; } .theme-site-home .content-start:after { z-index: 1 } .theme-site-home div.preheader { background-image: none } .js .theme-site-home:before { content: ""; /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 20%, transparent 100%);*/ position: absolute; top: 0; left: 0; right: 0; height: 30vh; width: 100%; z-index: 1; pointer-events: none; transition: all ease-in-out 0.75s } .js .theme-site-home .primary-nav__logo .svg { display: block; background: url(../images/logo_white.png) no-repeat; transition: 0.45s ease; background-size: 100%; height: 100%; } .js .theme-site-home .primary-nav__link, .js .theme-site-home .primary-nav__link[data-id]::after { color: #fff; transition: color ease 0.45s, -webkit-transform ease 0.3s; transition: color ease 0.45s, transform ease 0.3s } .js .theme-site-home #content-wrap { position: relative; top: -121px; margin-bottom: -8.75rem; z-index: 1; } } .multi-panel { background: #000; position: relative; overflow: hidden } @media (min-width: 67.5em) { .multi-panel { display: -ms-flexbox; display: flex } } .multi-panel:before, .multi-panel:after { content: ''; background: url("../images/hr.png") 0 0 no-repeat; height: 5px; width: 100%; background-size: cover; position: absolute; top: 0; left: 0 } .multi-panel:after { top: auto; bottom: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .multi-panel h1 { display: none } .multi-panel__section { height: auto; -ms-flex: 1; flex: 1; position: relative; overflow: hidden; cursor: pointer; opacity: 0; transition: -ms-flex ease 0.65s, opacity ease-out 0.65s 0.33s; transition: flex ease 0.65s, opacity ease-out 0.65s 0.33s } .multi-panel__section:first-child:nth-last-child(2) video { width: 100% } .no-js .multi-panel__section { opacity: 1 } @media print, (min-width: 48em) { .multi-panel__section { height: 30vh } } @media (min-width: 57.5em) { .multi-panel__section { height: 50vh } } @media (min-width: 67.5em) { .multi-panel__section { height: 100vh !important; min-height: 51rem } } .multi-panel__section:hover { -ms-flex: 1.07; flex: 1.07 } .multi-panel__section:hover .multi-panel__image, .multi-panel__section:hover video { opacity: 0.8 !important } .multi-panel__section:nth-child(3) { transition: -ms-flex ease 0.65s, opacity ease-out 0.65s 1.33s; transition: flex ease 0.65s, opacity ease-out 0.65s 1.33s } .multi-panel__section:nth-child(3) .multi-panel__image { background-position: 50% 50% } .multi-panel__section:nth-child(3) video { object-position: 50% 50% } .multi-panel__section:nth-child(4) { transition: -ms-flex ease 0.65s, opacity ease-out 0.65s 2.33s; transition: flex ease 0.65s, opacity ease-out 0.65s 2.33s } .multi-panel__section:nth-child(4) .multi-panel__image { background-position: 20% 50% } .multi-panel__section:nth-child(4) video { object-position: 100% 50% } .multi-panel.is--active .multi-panel__section { opacity: 1 } .multi-panel__section video { transition: all ease 0.45s; object-fit: cover; opacity: 0.7; background: #000; object-position: 0% 50%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto } .multi-panel:hover .multi-panel__section video { opacity: 0.4 } .multi-panel__section .video { transition: all ease 0.45s; opacity: 0.7; height: 100%; object-fit: cover; width: 100%; } .multi-panel .multi-panel__section:hover > .video { opacity: 1 } @media (min-width: 67.5em) { .multi-panel__section video { width: auto; height: 100% } } .multi-panel__section h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2.125rem; color: #fff; text-transform: uppercase; letter-spacing: .0625rem; padding-bottom: 0; transition: all ease-out 0.45s 0.2s } .font--arial .multi-panel__section h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .multi-panel__section h2 { font-size: 2.0625rem } } @media (min-width: 93.75em) { .multi-panel__section h2 { font-size: 2.6875rem } } @media (min-width: 67.5em) { .multi-panel__section h2 { text-align: center; width: 100% } } .multi-panel__section h3, .multi-panel__section span { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.25rem; text-transform: uppercase; color: #fff; line-height: 1.1; opacity: 0; transition: opacity ease-out 0.2s } .font--arial .multi-panel__section h3, .font--arial .multi-panel__section span { font-family: Arial, Helvetica, sans-serif } @media (min-width: 67.5em) { .multi-panel__section h3, .multi-panel__section span { font-size: 1.75rem; padding-left: .25rem } } .multi-panel--with-titles .multi-panel__section h3, .multi-panel--with-titles .multi-panel__section span { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } .js .multi-panel__section ul { display: none; opacity: 0; visibility: hidden; max-height: 0; position: relative; list-style: none; padding: .625rem; margin: 0; transition: max-height 0.45s ease-out, opacity ease 0.2s 0.4s } @media (min-width: 67.5em) { .js .multi-panel__section ul { padding: 1.25rem; display: block } } .multi-panel__section li { opacity: 0; color: #fff; -webkit-transform: translateX(-24px); transform: translateX(-24px); margin-bottom: 1.25rem; transition: opacity ease-out 0.45s 0.85s, -webkit-transform ease-out 0.45s 0.85s, left ease-out 0.3s; transition: opacity ease-out 0.45s 0.85s, transform ease-out 0.45s 0.85s, left ease-out 0.3s } @media (min-width: 67.5em) { .multi-panel__section li { margin-bottom: 3vh } } .multi-panel__section li:nth-child(2) { transition: opacity ease-out 0.45s 1.15s, -webkit-transform ease-out 0.45s 1.15s, left ease-out 0.3s; transition: opacity ease-out 0.45s 1.15s, transform ease-out 0.45s 1.15s, left ease-out 0.3s } .multi-panel__section li:nth-child(3) { transition: opacity ease-out 0.45s 1.35s, -webkit-transform ease-out 0.45s 1.35s, left ease-out 0.3s; transition: opacity ease-out 0.45s 1.35s, transform ease-out 0.45s 1.35s, left ease-out 0.3s } .multi-panel__section a { padding: .625rem; display: block; transition: background ease 0.3s } @media (min-width: 67.5em) { .multi-panel__section a { padding: 1.25rem } } .multi-panel__section a:focus, .multi-panel__section a:hover { background: rgba(0, 0, 0, 0.2) } .multi-panel__section h4 { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.125rem; margin: 0; color: #fff; text-transform: none } .font--arial .multi-panel__section h4 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .multi-panel__section h4 { font-size: 1.625rem } } .multi-panel__section p { font-size: .875rem; margin: .625rem 0 0 0; color: #fff } @media (min-width: 93.75em) { .multi-panel__section.is--reduced .multi-panel__heading { padding: 1.25rem } } .multi-panel__section.is--reduced video { opacity: 0.55 } .multi-panel__section.is--reduced .multi-panel__image { opacity: 0.3 } .multi-panel__section.is--reduced:hover .multi-panel__image { opacity: 0.4 } .multi-panel__section.is--reduced h2 { transition: font-size ease 0.45s } @media print, (min-width: 48em) { .multi-panel__section.is--reduced h2 { font-size: 1.3125rem } } @media (min-width: 93.75em) { .multi-panel__section.is--reduced h2 { font-size: 1.8125rem } } @media (min-width: 67.5em) { .multi-panel__section.is--reduced span { font-size: 1rem } } .no-js .multi-panel__section { height: auto } .no-js .multi-panel__section .multi-panel__heading { padding: 1.25rem } .no-js .multi-panel__section video { display: none } .no-js .multi-panel__section, .multi-panel__section.is--expanded { height: auto; -ms-flex: 3.5; flex: 3.5; cursor: default; background: #006399 } @media print, (min-width: 48em) { .no-js .multi-panel__section, .multi-panel__section.is--expanded { -ms-flex: 2.3; flex: 2.3 } } @media (min-width: 93.75em) { .no-js .multi-panel__section, .multi-panel__section.is--expanded { -ms-flex: 2.6; flex: 2.6 } } .no-js .multi-panel__section .multi-panel__heading, .multi-panel__section.is--expanded .multi-panel__heading { text-align: left; padding-bottom: 0 } @media (min-width: 67.5em) { .no-js .multi-panel__section .multi-panel__heading, .multi-panel__section.is--expanded .multi-panel__heading { padding: 1.25rem 2.5rem } } .no-js .multi-panel__section .multi-panel__image, .multi-panel__section.is--expanded .multi-panel__image { opacity: 0.3 !important; -webkit-transform: scale(1.1); transform: scale(1.1) } .no-js .multi-panel__section video, .multi-panel__section.is--expanded video { opacity: 0.35 !important; height: 100% } .no-js .multi-panel__section h2, .multi-panel__section.is--expanded h2 { transition: all ease 0.45s } @media print, (min-width: 48em) { .no-js .multi-panel__section h2, .multi-panel__section.is--expanded h2 { font-size: 2.75rem } } @media (min-width: 93.75em) { .no-js .multi-panel__section h2, .multi-panel__section.is--expanded h2 { font-size: 3.4375rem } } @media (min-width: 67.5em) { .no-js .multi-panel__section h2, .multi-panel__section.is--expanded h2 { text-align: left } } .no-js .multi-panel__section h3, .no-js .multi-panel__section span, .multi-panel__section.is--expanded h3, .multi-panel__section.is--expanded span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: opacity ease-in 0.45s 0.45s; padding-left: 0 } .no-js .multi-panel__section ul, .multi-panel__section.is--expanded ul { display: block; opacity: 1; visibility: visible; max-height: 2000px; transition: max-height ease-out 1s 0.45s, opacity ease-in 0.2s } .no-js .multi-panel__section li, .multi-panel__section.is--expanded li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); max-width: 580px } .multi-panel__image { background-position: 80% 50%; background-size: cover; background-repeat: no-repeat; content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; opacity: 0.7; transition: opacity ease 0.45s, -webkit-transform ease 6s 0.4s, -webkit-filter ease 1s 0.2s, opacity ease 0.45s, -webkit-transform ease 6s 0.4s, filter ease 1s 0.2s; transition: opacity ease 0.45s, transform ease 6s 0.4s, filter ease 1s 0.2s } .multi-panel:hover .multi-panel__image { opacity: 0.4 } .js .multi-panel__heading { position: relative; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.12); padding: 2.5rem 1.25rem } @media print, (min-width: 48em) { .js .multi-panel__heading { padding: 1.25rem } } @media (min-width: 93.75em) { .js .multi-panel__heading { padding: 2.5rem } } @media (min-width: 67.5em) { .js .multi-panel__heading { text-align: center } .js .multi-panel__heading span { width: 100% } .js .multi-panel__heading span:after { content: '\00a0' } } @media (min-width: 67.5em) { .js .multi-panel__content { position: relative; top: 55%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } } .multi-panel__prompt { z-index: 1; color: #fff; font-size: .8125rem; position: absolute; top: 0; right: 0; transition: bottom ease-out .45s, opacity ease .45s; opacity: 0.5; cursor: pointer; background: none; border: 0; padding: 1.25rem; box-shadow: none; margin: 0 } @media print, (min-width: 48em) { .multi-panel__prompt { top: 2.5rem; right: 1.25rem } } @media (min-width: 93.75em) { .multi-panel__prompt { right: 2.5rem } } @media (min-width: 67.5em) { .multi-panel__prompt { top: 11.25rem } } .multi-panel__prompt:focus, .multi-panel__prompt:hover { opacity: 1; background: none; box-shadow: none } .multi-panel__prompt:after { content: '\2573'; display: inline-block; padding-left: 1.125rem; font-size: 16px; font-weight: normal; transition: -webkit-transform ease-out .45s; transition: transform ease-out .45s; -webkit-transform: translateY(7px) rotate(-45deg); transform: translateY(7px) rotate(-45deg) } .no-js .multi-panel__prompt { display: none } .no-js .multi-panel__prompt, .is--expanded .multi-panel__prompt { color: rgba(255, 255, 255, 0); bottom: calc(100% - 70px) } .no-js .multi-panel__prompt:after, .is--expanded .multi-panel__prompt:after { -webkit-transform: rotate(-2520deg); transform: rotate(-2520deg); opacity: 1; color: white } .content-feed { clear: both; background-color: #f7f7f7 } .content-feed:nth-child(even) { background-color: #eee } .content-feed:nth-child(even) .content-feed__section-title h2, .content-feed:nth-child(even) .content-feed__section-title a { background-color: #eee } .content-feed--compact .content-feed__section-title, body.theme-careers-2018 .content-feed .content-feed__section-title { margin-bottom: 0 } .content-feed--compact .content-feed__container, body.theme-careers-2018 .content-feed .content-feed__container { padding-top: 1.875rem; background-color: transparent } .content-feed--compact .content-feed__container:before, body.theme-careers-2018 .content-feed .content-feed__container:before { display: none } @media (min-width: 93.75em) { .content-feed--full-width .row { max-width: calc(100% - 1.875em * 2) } } .content-feed--fixed-background .content-feed__background { background-attachment: fixed } .content-feed--fixed-background .content-feed__background:before { background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 100%) } .content-feed--fixed-background .content-feed__background:after { display: none } .content-feed__section-title { margin: 5rem 0 1.875rem; position: relative; transition: all ease-out 0.45s } @media (min-width: 67.5em) { .content-feed__section-title { margin: 5.625rem 0 5rem } } .js .content-feed__section-title { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } .content-feed__section-title:after { height: 1px; background-color: #ccc; width: 0%; position: absolute; top: 1.25rem; left: .9375em; transition: width ease-out 2s } @media print, (min-width: 48em) { .content-feed__section-title:after { content: '' } } .content-feed__section-title.is--animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .content-feed__section-title.is--animate:after { width: calc(100% - 3.75em) } .content-feed__section-title h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.625rem; padding: 0; padding-right: .625rem } .font--arial .content-feed__section-title h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .content-feed__section-title h2 { letter-spacing: .1875rem; font-size: 2rem; position: relative; display: inline-block; z-index: 2; background: #f7f7f7 } } .content-feed__section-title a { font-weight: bold; display: inline-block; line-height: 1.3; font-size: .8125rem; color: #007dbb; transition: all ease 0.3s; position: relative; top: .625rem; opacity: 1 } @media print, (min-width: 48em) { .content-feed__section-title a { position: absolute; font-size: 1rem; right: 0; padding-left: .625rem; z-index: 1; background: #f7f7f7; margin-right: 1.875em } } .content-feed__section-title a:hover { color: #004976 } .content-feed__section-title a:after { content: '\e021'; font-family: 'unilever-iconfont'; font-size: .5rem; margin-left: .375rem; position: absolute; right: -.875rem; top: .1875rem } @media print, (min-width: 48em) { .content-feed__section-title a:after { top: .375rem } } .content-feed__section-title--external a:after { content: '\e01a'; font-size: .625rem; top: .125rem } @media print, (min-width: 48em) { .content-feed__section-title--external a:after { top: .3125rem } } .content-feed__section-title p { margin-top: 1.25rem } @media print, (min-width: 48em) { .content-feed__section-title p { margin-top: .625rem; margin-bottom: 0 } } @media (min-width: 93.75em) { .content-feed__section-title p { width: 50% } } .content-feed__container { position: relative; background-color: #eee; padding-bottom: 1.25rem; overflow: hidden } @media print, (min-width: 48em) { .content-feed__container { padding: 5.625rem 0 5rem } } @media (min-width: 67.5em) { .content-feed__container { padding: 8.125rem 0 6.25rem } } .content-feed__container:before { content: ''; background: url(../images/hr.png) 0 0 no-repeat; height: 5px; width: 100%; opacity: 1; background-size: cover; position: absolute; top: 0; left: 0; z-index: 5 } @media print, (min-width: 48em) { .content-feed__video { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden } .content-feed__video:after { background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 100%) } .content-feed__video video { position: absolute; top: 50%; left: 50%; height: auto; width: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover } } .content-feed__background { padding-top: 56.25%; background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 100%); background-size: cover; background-position: 60% 50%; background-repeat: no-repeat } @media print, (min-width: 48em) { .content-feed__background:after { background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 36%, rgba(255, 255, 255, 0) 60%) } } .content-feed__video, .content-feed__background { transition: all ease 3.5s; margin-bottom: 1.875rem } .content-feed__video, .content-feed__background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0 } .content-feed__video:before, .content-feed__video:after, .content-feed__background:before, .content-feed__background:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: all ease 3.5s } .content-feed__video:before, .content-feed__background:before { background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 100%) } .js .content-feed__video, .js .content-feed__background { opacity: 0 } .content-feed__video.is--animate, .content-feed__background.is--animate { opacity: 1 } .content-feed__title { margin-bottom: 1.875rem } @media print, (min-width: 48em) { .content-feed__title { margin-bottom: 4.375rem } } .js .content-feed__title { position: relative; transition: all ease-out 0.45s; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } .content-feed__title.is--animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .content-feed__title h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #007dbb; font-size: 1.625rem } .font--arial .content-feed__title h2 { font-family: Arial, Helvetica, sans-serif } .content-feed__title h2 { color: #fff; font-size: 2.25rem } @media (min-width: 67.5em) { .content-feed__title h2 { font-size: 3rem } } .content-feed__title p { color: #666 } .content-feed__title p { color: #fff } .content-feed__title a { color: #007dbb; font-weight: bold; transition: all ease 0.3s; position: relative; font-size: .8125rem; line-height: .8125rem } @media print, (min-width: 48em) { .content-feed__title a { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #fff; padding-bottom: 2px; font-size: 1rem; line-height: 1.5rem } .content-feed__title a:hover { border-bottom: 1px solid #fff } } .content-feed__title a:after { font-family: 'unilever-iconfont'; content: '\e021'; position: absolute; bottom: .0625rem; right: -.875rem; background-size: contain; transition: all ease 0.45s; display: block; font-size: .5rem } @media print, (min-width: 48em) { .content-feed__title a:after { bottom: -.1875rem } } .content-feed__items { list-style-type: none } .no-js .content-feed__items { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .js .content-feed__items { transition: all ease-out 0.45s; -webkit-transform: translateX(10vw); transform: translateX(10vw); opacity: 0 } .content-feed__items.is--animate { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } .content-feed__items .owl-carousel { -ms-touch-action: pan-x; touch-action: pan-x } .content-feed__items .owl-stage { padding-left: 0 !important } .content-feed__items .owl-stage-outer { overflow: visible !important } .content-feed__items .owl-controls { clear: both } .content-feed__items .owl-prev, .content-feed__items .owl-next { font-size: .8125rem; font-weight: bold; color: #007dbb; margin-top: 1.875rem; position: static; background: none; box-shadow: none; border: 0 } @media print, (min-width: 48em) { .content-feed__items .owl-prev, .content-feed__items .owl-next { font-size: 1rem } } .content-feed__items .owl-prev, .content-feed__items .owl-next { transition: all ease 0.45s } .content-feed__items .owl-prev:before, .content-feed__items .owl-prev:after, .content-feed__items .owl-next:before, .content-feed__items .owl-next:after { opacity: 1; transition: all ease 0.45s; display: inline-block; content: '\2794'; padding: 0 .3125rem } .content-feed__items .owl-prev.disabled, .content-feed__items .owl-next.disabled { opacity: 0 } .content-feed__items .owl-prev { float: left } .content-feed__items .owl-prev:before { -webkit-transform: translateY(2px) rotate(180deg); transform: translateY(2px) rotate(180deg) } .content-feed__items .owl-prev:hover:before { -webkit-transform: translateY(2px) translateX(-5px) rotate(180deg); transform: translateY(2px) translateX(-5px) rotate(180deg) } .content-feed__items .owl-prev:after { content: '' } .content-feed__items .owl-next { float: right } .content-feed__items .owl-next:before { content: '' } .content-feed__items .owl-next:hover:after { -webkit-transform: translateX(5px); transform: translateX(5px) } .content-feed__item { overflow: hidden; transition: all ease 0.45s; box-shadow: 0px 2px 20px -3px rgba(50, 50, 50, 0.22); background: #fff } .no-js .content-feed__item { width: 100% } @media print, (min-width: 48em) { .no-js .content-feed__item { width: 50% } } @media (min-width: 93.75em) { .no-js .content-feed__item { width: 33% } } #img-list li img { object-fit: cover; } .content-feed__item.focused img, .content-feed__item:hover img { -webkit-transform: scale(1.05); transform: scale(1.05) } .content-feed__item:hover { box-shadow: 0px 4px 20px -3px rgba(50, 50, 50, 0.5) } .content-feed__item.focused { box-shadow: 0px 2px 14px 6px #A5C7FE } .content-feed__item.focused a:focus { outline: none } .content-feed__item a { display: block; transition: all ease 0.45s } .content-feed__item a:focus { outline-offset: -2px } .js .content-feed__item a { opacity: 0.33 } .active .content-feed__item a { opacity: 1 } .content-feed__item h3 { font-family: Arial, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.5; position: relative; font-weight: bold; padding: .9375rem 2.1875rem } .content-feed__item h3:before { font-family: 'unilever-iconfont'; content: '\e021'; position: absolute; top: 1.1875rem; left: 1rem; display: block; font-size: .625rem } .content-feed__item--brand.focused, .content-feed__item--brand:hover { -webkit-transform: scale(1.07); transform: scale(1.07) } @media (hover: none) { .content-feed__item--brand { -webkit-transform: scale(1) !important; transform: scale(1) !important } } .content-feed__item--brand .content-feed__image-container { padding-top: 100% } .content-feed__item--brand a { position: relative } .content-feed__item--brand h3 { text-align: right; font-weight: normal; color: #666; padding: .9375rem; position: absolute; bottom: 0; right: 0 } .content-feed__item--brand h3:before { display: none } .content-feed__item--vacancy a { padding: 1.25rem } .content-feed__item--vacancy span, .content-feed__item--vacancy p, .content-feed__item--vacancy dl { color: #666 } .content-feed__item--vacancy span { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: .75rem; display: block; margin-bottom: .9375rem; text-transform: uppercase; letter-spacing: 2px } .font--arial .content-feed__item--vacancy span { font-family: Arial, Helvetica, sans-serif } .content-feed__item--vacancy h3 { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; font-size: 1.5rem; font-weight: normal; padding: 0; margin-bottom: .9375rem } .font--arial .content-feed__item--vacancy h3 { font-family: Arial, Helvetica, sans-serif } .content-feed__item--vacancy h3:before { display: none } .content-feed__item--vacancy p { font-family: "DINWebPro", Arial, Helvetica, sans-serif; font-size: 1rem; border-bottom: 1px solid #eee; padding-bottom: .9375rem; margin-bottom: .9375rem } .font--arial .content-feed__item--vacancy p { font-family: Arial, Helvetica, sans-serif } .content-feed__item--vacancy dl { font-size: .9375rem; margin: .625rem 0 0 0 } .content-feed__item--vacancy dt { font-weight: normal; margin-top: .625rem; display: inline-block; clear: both; margin: 0 } .content-feed__item--vacancy dd { font-weight: bold; display: inline-block; margin: 0 } .content-feed__image-container { padding-top: 56%; position: relative; overflow: hidden } .content-feed__image-container img { position: absolute; top: 0; left: 0; right: 0; width: 100%; display: block; transition: all ease .4s; z-index: 1 } .content-feed .popup-youtube:hover .content-feed__image-container:before { background-color: #004976; box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.3) } .content-feed .popup-youtube .content-feed__image-container:before { content: ''; display: inline-block; color: transparent; overflow: hidden; height: 3rem; width: 3rem; top: 50%; left: 50%; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: #007dbb; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); position: absolute; transition: all ease 0.45s; z-index: 2 } .content-feed .popup-youtube .content-feed__image-container:after { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; position: absolute; content: ''; top: 50%; left: 50%; z-index: 3; margin: -10px 0 0 -6px } .communication { padding: 3.75rem 0; background: url(../images/hr.png) 0 0 no-repeat #f7f7f7; background-size: 100% 6px; padding: 3.75rem 0 } .communication.min { display: none; } .communication .trendsTab { float: right; overflow: hidden; margin-bottom: 1rem; margin-right: 12px; } .communication .trendsTab li { float: left; line-height: 18px; text-align: center; font-size: 18px; color: #0c8ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-left: 13px; cursor: pointer; border: 1px solid #0c8ccc; padding: 10px 18px; } @media (max-width: 950px) { .theme-site-home .communication { padding-left: .9375em; padding-right: .9375em; } .communication .lh-news-a .img { display: none; } } .communication .trendsTab li:last-of-type { margin-right: 0; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; } .communication .trendsCrt, .communication .trendsTab li:hover { color: #fff !important; background: #0c8ccc !important; } .index-trends-cont dl { width: 100%; float: left; overflow: hidden; margin-bottom: 1rem; padding: 20px 12px; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; border-bottom: 1px solid #eee; } .index-trends-cont { -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; } #right .index-trends-cont dl { border-bottom: 0; } #right .index-trends-cont dl dt { display: inline-block; } .index-trends-cont dl a { width: 100%; height: 100%; display: block; } #left .index-trends-cont dl:hover { background: rgba(0, 0, 0, 0.2); } #left .index-trends-cont dl:hover a { color: #fff; } .index-trends-cont dd { display: inline-block; margin-bottom: 0; float: right; } .index-trends-cont dl dt b { font-size: 16px; display: block; padding-bottom: 5px; } .div-line { position: absolute; left: 50%; margin: 0 auto; padding: 0; width: 2px; height: 80%; background: radial-gradient(#f0f0f0 10%, white 90%); box-shadow: 2px 10px 5px #eee; } .box-shadow { box-shadow: 0px 8px 12px #f0f0f0; } @media (max-width: 48em) { .div-line { display: none } } @media print, (min-width: 48em) { .communication { margin-top: 2em } } @media (min-width: 93.75em) { .communication { padding: 4.375rem 0 } } .theme-site-home .communication { background: #fff; margin-top: 0 } .communication h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; letter-spacing: 3px; font-size: 1.625rem; text-transform: capitalize } .font--arial .communication h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .communication h2 { font-size: 2rem } } .communication p { margin-bottom: 1rem; font-size: 1rem } .communication dd p { margin-bottom: 0; } .communication ul { list-style-type: none; margin-bottom: 2.5rem } @media print, (min-width: 48em) { .communication ul { margin-bottom: 0 } } .communication li { display: inline-block; margin-right: 1.875rem } .communication li a { display: block } .communication li a:after { display: none } .communication a { font-weight: bold } .communication a:after { content: '\e021'; display: inline-block; font-family: 'unilever-iconfont'; font-size: .5rem; margin-left: .375rem; vertical-align: middle; clear: both; } .communication a:hover span:before { color: #004976 } .communication span:before { font-size: 2.8125rem; color: #007dbb; transition: color 0.3s ease } .careers-search { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding: 8.125rem 0 7.5rem 0; position: relative } @media print, (min-width: 48em) { .careers-search { height: 90vh; min-height: 43.75rem } } .careers-search::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4) } @media print, (min-width: 48em) { .careers-search::before { background: linear-gradient(119deg, rgba(46, 46, 46, 0.78), transparent 25%, transparent 43%, rgba(46, 46, 46, 0.8)) } } .careers-search h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #fff; font-size: 1.625rem; letter-spacing: 3px } .font--arial .careers-search h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .careers-search h2 { font-size: 2rem } } .careers-search p { font-size: 1rem; color: #fff } .careers-search form { margin-top: 2.5rem } .careers-search select { font-size: 1.125rem; width: 100%; margin-bottom: 1.75rem; padding: .75rem; box-shadow: none; border: 0 } @media print, (min-width: 48em) { .careers-search select { width: 26.25rem; margin-right: 1.75rem } } .careers-search button { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; background-color: transparent; font-size: 1.25rem; color: #fff; letter-spacing: 1px; padding: 0; border: 0; box-shadow: none } .font--arial .careers-search button { font-family: Arial, Helvetica, sans-serif } .careers-search button:after { content: ''; display: inline-block; padding-left: .625rem; -webkit-transform: translateY(-2px); transform: translateY(-2px); font-family: 'unilever-iconfont'; font-size: .75rem; content: '\e021' } .careers-search__play { margin-top: 3.75rem } @media print, (min-width: 48em) { .careers-search__play { display: inline-block; position: relative; left: 45%; top: 100px } } .careers-search__play a { display: inline-block; color: transparent; overflow: hidden; height: 4rem; width: 4rem; border-radius: 50%; background: #007dbb; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); position: relative; transition: all ease 0.45s; vertical-align: middle } @media print, (min-width: 48em) { .careers-search__play a { height: 5.375rem; width: 5.375rem } } .careers-search__play a:after { width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 24.2px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-color: transparent transparent transparent #fff; position: absolute; content: ''; top: 50%; left: 55% } .careers-search__play a:focus, .careers-search__play a:hover { background-color: #004976; box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.3); outline: none } .careers-search__play p { display: block; font-size: 1.125rem; margin-top: 1.25rem } @media print, (min-width: 48em) { .careers-search__play p { display: inline-block; vertical-align: middle; font-size: 1.25rem; margin-left: 1.25rem } } .careers-search__play strong { display: block } .scroll-prompt { position: absolute; left: 0; bottom: -3.125rem; padding: 1.25rem 1.25rem 1.75rem; display: block; font-size: .9375rem; width: 100%; color: #fff; font-weight: bold; text-align: center; margin: 0 auto; transition: padding ease 0.45s, bottom ease 0.45s 3.33s, opacity ease 0.45s 3.33s, -webkit-transform ease 0.45s; transition: padding ease 0.45s, bottom ease 0.45s 3.33s, opacity ease 0.45s 3.33s, transform ease 0.45s; text-decoration: none; background-color: rgba(0, 0, 0, 0.6); opacity: 0; z-index: 99; display: none } @media (min-width: 67.5em) { .js .scroll-prompt { display: block } } .scroll-prompt.is--clicked { -webkit-transform: translateY(6.25rem); transform: translateY(6.25rem) } .scroll-prompt.is--active { bottom: 0; opacity: 1 } .scroll-prompt:before { font-family: 'unilever-iconfont'; font-weight: normal; font-size: .625rem; content: '\e025'; position: relative; margin-right: .625rem; display: inline-block; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite } .scroll-prompt:after { height: 0; width: 120vw; position: fixed; content: ''; left: 0; bottom: 0; -webkit-transform: translateX(-50vw); transform: translateX(-50vw); transition: all ease 0.45s } .scroll-prompt:focus, .scroll-prompt:hover { color: #fff; padding-bottom: 2.5rem } .scroll-prompt:focus:after, .scroll-prompt:hover:after { height: 1.5625rem } .scroll-prompt ul { display: inline-block; list-style-type: none; position: relative; margin: 0; text-align: left } .scroll-prompt li { position: absolute; top: -1.0625rem; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); transition: all 350ms ease; display: inline-block; white-space: nowrap; visibility: unset !important; } .scroll-prompt li:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } .scroll-prompt li.is--active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); color: #fff; } .scroll-prompt li.is--previous { opacity: 0; -webkit-transform: translateY(25px); transform: translateY(25px) } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-6px); transform: translateY(-6px) } 60% { -webkit-transform: translateY(-4px); transform: translateY(-4px) } } .news-and-features-header { margin: 40px 0 18px } .news-and-features-header__items-container { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 57.5em) { .news-and-features-header__items-container { height: 40px } } .news-and-features-header__title { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.5rem; letter-spacing: -0.27px; line-height: 40px; height: 40px; color: #007dbb; margin-top: 0; padding-bottom: 0 } .font--arial .news-and-features-header__title { font-family: Arial, Helvetica, sans-serif } .news-and-features-header__menu-options { text-align: center } .news-and-features-header__menu-option { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; transition: all 0.3s ease; position: relative; color: #004976; display: none } .font--arial .news-and-features-header__menu-option { font-family: Arial, Helvetica, sans-serif } @media (min-width: 57.5em) { .news-and-features-header__menu-option:not(.hide) { display: inline } } .news-and-features-header__menu-option::before { position: absolute; bottom: -2px; height: 0; background: #007dbb; width: 150%; margin-left: -25%; pointer-events: none; left: 0; transition: all ease 0.3s; content: "" } .news-and-features-header__menu-option:hover::before { height: 3px } .news-and-features-header__menu-option.active::before { height: 3px } .news-and-features-header__menu-mobile { width: 100%; height: 40px; margin-top: 10px } @media (min-width: 57.5em) { .news-and-features-header__menu-mobile { display: none; margin-top: 0 } } .news-and-features-header__menu-search { -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-align: center; align-items: center; width: 100%; height: 40px; margin-top: 10px; -ms-flex-order: 1; order: 1 } .news-and-features-header__menu-search:not(.hide) { display: -ms-inline-flexbox; display: inline-flex } @media (min-width: 57.5em) { .news-and-features-header__menu-search { width: auto; height: 40px; -ms-flex-positive: 1; flex-grow: 1; margin-left: 15px; margin-right: 15px; margin-top: 0 } } .news-and-features-header input[type="text"].news-and-features-header__search-field { display: inline-block; width: 70%; height: 100% } .news-and-features-header input[type="submit"].news-and-features-header__search-button { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .875rem !important; letter-spacing: -0.25px; line-height: 10px; position: relative; display: inline-block; width: 28%; height: 100%; border-radius: 0; top: 0px; box-shadow: initial } .font--arial .news-and-features-header input[type="submit"].news-and-features-header__search-button { font-family: Arial, Helvetica, sans-serif } .news-and-features-header__icon-search { cursor: pointer; transition: color 0.3s ease 0s; font-size: 1.5rem; color: #007dbb } .news-and-features-header__icon-search:hover { color: #004976 } .news-and-features-header__icon-close { cursor: pointer; transition: background-color 0.3s ease 0s; font-size: 1.5rem; line-height: 30px; color: white; background-color: #007dbb; height: 100%; border-radius: 6px; padding: 6px; height: 40px; position: relative } .news-and-features-header__icon-close:hover { background-color: #004976 } @media (min-width: 57.5em) { .news-and-features-header__icon-close { -ms-flex-order: 1; order: 1 } } .select2-container--news-and-features { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .9375rem; line-height: 40px; color: #999 } .font--arial .select2-container--news-and-features { font-family: Arial, Helvetica, sans-serif } .select2-container--news-and-features .select2-selection__arrow b[role="presentation"] { display: none } .select2-container--news-and-features .select2-selection__arrow::after { display: inline-block; font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e025'; color: #007dbb; position: absolute; top: 0; right: 10px; font-size: 0.75rem; transition: all ease 0.1s } .select2-container--news-and-features .select2-selection--single { outline: none; height: 40px; border: 1px solid #ccc; border-radius: 2px } .select2-container--news-and-features .select2-dropdown { border-color: #ccc; border-radius: 2px } .select2-container--news-and-features.select2-container--open .select2-selection__arrow::after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .select2-container--news-and-features.select2-container--open.select2-container--below { border-radius: 2px } .select2-container--news-and-features.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--news-and-features.select2-container--open .select2-results { box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1) } .select2-container--news-and-features.select2-container--open .select2-results .select2-results__option { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .9375rem; font-weight: bold; color: #007dbb; border-bottom: 1px solid #ccc } .font--arial .select2-container--news-and-features.select2-container--open .select2-results .select2-results__option { font-family: Arial, Helvetica, sans-serif } .select2-container--news-and-features.select2-container--open .select2-results .select2-results__option:last-child { border-bottom: none } .select2-container--news-and-features.select2-container--open .select2-results .select2-results__option--highlighted { background-color: black; color: #fff; margin-left: -1px; margin-right: -1px; border-bottom: none } .news-and-features { position: relative; z-index: 1 } .news-and-features--animate .story-hero:after { opacity: 0; -webkit-animation: news-and-features__opacity-background-animation 2.8s linear 1.5s forwards; animation: news-and-features__opacity-background-animation 2.8s linear 1.5s forwards } .news-and-features--animate .story-hero__theme { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation: news-and-features__opacity-and-scale-animation 500ms linear 1s forwards; animation: news-and-features__opacity-and-scale-animation 500ms linear 1s forwards } .news-and-features--animate .story-hero__title-row { opacity: 0; margin-top: 7%; -webkit-animation: news-and-features__opacity-and-margin-top-animation 500ms linear 1.5s forwards; animation: news-and-features__opacity-and-margin-top-animation 500ms linear 1.5s forwards } .news-and-features--animate .story-hero__summary-row { opacity: 0; margin-top: 7%; -webkit-animation: news-and-features__opacity-and-margin-top-animation 500ms linear 1.8s forwards; animation: news-and-features__opacity-and-margin-top-animation 500ms linear 1.8s forwards } .news-and-features--animate .story-hero__author-columns { opacity: 0; margin-top: 7%; -webkit-animation: news-and-features__opacity-and-margin-top-animation 500ms linear 2.1s forwards; animation: news-and-features__opacity-and-margin-top-animation 500ms linear 2.1s forwards } .news-and-features--animate .story-hero__date-time-columns { opacity: 0; margin-top: 7%; -webkit-animation: news-and-features__opacity-and-margin-top-animation 500ms linear 2.4s forwards; animation: news-and-features__opacity-and-margin-top-animation 500ms linear 2.4s forwards } .news-and-features--animate .story-grid { opacity: 0; -webkit-animation: news-and-features__opacity-and-padding-top-animation 500ms linear 3.6s forwards; animation: news-and-features__opacity-and-padding-top-animation 500ms linear 3.6s forwards } @-webkit-keyframes news-and-features__opacity-and-scale-animation { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0) } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1) } } @keyframes news-and-features__opacity-and-scale-animation { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0) } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1) } } @-webkit-keyframes news-and-features__opacity-and-margin-top-animation { 0% { opacity: 0; margin-top: 7% } 100% { opacity: 1; margin-top: 0% } } @keyframes news-and-features__opacity-and-margin-top-animation { 0% { opacity: 0; margin-top: 7% } 100% { opacity: 1; margin-top: 0% } } @-webkit-keyframes news-and-features__opacity-background-animation { 0% { opacity: 0 } 100% { opacity: 0.7 } } @keyframes news-and-features__opacity-background-animation { 0% { opacity: 0 } 100% { opacity: 0.7 } } @-webkit-keyframes news-and-features__opacity-and-padding-top-animation { 0% { opacity: 0; padding-top: 10% } 100% { opacity: 1; padding-top: 0% } } @keyframes news-and-features__opacity-and-padding-top-animation { 0% { opacity: 0; padding-top: 10% } 100% { opacity: 1; padding-top: 0% } } .news-and-features .story-grid__white-background-container .story-grid__row { background-color: white } .news-and-features .story-grid__white-background-container .story-card--typographic .story-card__title { color: #007dbb } .news-and-features .story-grid__white-background-container .story-card--typographic .story-card__date, .news-and-features .story-grid__white-background-container .story-card--typographic .story-card__time { color: #666 } .news-and-features .story-grid__white-background-container .story-card--typographic .story-card__summary { color: #666 } .story-grid-container { overflow: hidden } .story-grid-container__theme { position: relative; display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: #FFFFFF; padding: 10px 15px 5px 15px; text-transform: uppercase; z-index: 5; width: 100% } .font--arial .story-grid-container__theme { font-family: Arial, Helvetica, sans-serif } .story-grid-container__theme--climate { background-color: #528316 } .story-grid-container__theme--collaborating { background-color: #005EB8 } .story-grid-container__theme--popular { background-color: #333 } .story-grid-container__theme--healthy { background-color: #DC1894 } .story-grid-container__theme--water { background-color: #00838A } .story-grid-container__theme--equality { background-color: #E4002B } .story-grid-container__theme--consuming { background-color: #702F8A } .story-grid-container__theme--protecting { background-color: #00573F } .story-grid-container__theme--education { background-color: #9B2743 } .story-grid-container__theme--nutrition { background-color: #B85C00 } .story-grid-container__theme--business { background-color: #004976 } .story-grid-container__theme--other { background-color: #333333 } .story-grid { position: relative } .story-grid__row-theme { position: relative; display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: #FFFFFF; padding: 10px 15px 5px 15px; text-transform: uppercase; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; z-index: 5; width: 100% } .font--arial .story-grid__row-theme { font-family: Arial, Helvetica, sans-serif } .story-grid__row-theme--climate { background-color: #528316 } .story-grid__row-theme--collaborating { background-color: #005EB8 } .story-grid__row-theme--popular { background-color: #333 } .story-grid__row-theme--healthy { background-color: #DC1894 } .story-grid__row-theme--water { background-color: #00838A } .story-grid__row-theme--equality { background-color: #E4002B } .story-grid__row-theme--consuming { background-color: #702F8A } .story-grid__row-theme--protecting { background-color: #00573F } .story-grid__row-theme--education { background-color: #9B2743 } .story-grid__row-theme--nutrition { background-color: #B85C00 } .story-grid__row-theme--business { background-color: #004976 } .story-grid__row-theme--other { background-color: #333333 } .story-grid__row-theme-view-all { -ms-flex-negative: 0; flex-shrink: 0; text-transform: none; -webkit-transform: translateY(-2px); transform: translateY(-2px); font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: white } .font--arial .story-grid__row-theme-view-all { font-family: Arial, Helvetica, sans-serif } .story-grid__row-theme-view-all::after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: "\e021"; padding: 0 0 0 6px; top: 1px; position: relative; display: inline-block; transition: all ease-out 0.3s } .story-grid__row-theme-view-all:hover { color: white } .story-grid__row-theme-view-all:hover::after { -webkit-transform: translateX(3px); transform: translateX(3px) } .story-grid__row { padding: 28px 0 0; position: relative } .story-grid__row .row { position: relative; z-index: 3 } .story-grid__row .story-card-full__author-container { z-index: 3 } .story-grid__row--signup { margin-top: 28px; margin-bottom: 28px } .story-grid__row--youtube img { width: 100% } .story-grid__row--youtube .story-grid__row-theme { margin-top: 0px; margin-bottom: 28px } .story-grid__row--youtube .story-cards-carousel { padding-top: 0 } .story-grid__row--youtube .story-cards-carousel:after { content: ''; position: absolute; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 100%, transparent 100%); width: 100%; height: 100%; bottom: 0; left: 0 } @media print, (min-width: 48em) { .story-grid__row--youtube .story-cards-carousel:after { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 50%, transparent 100%) } } .story-grid__row--youtube .youtube_title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: white; font-size: 2.25rem; line-height: 46px; margin-left: 15px } .font--arial .story-grid__row--youtube .youtube_title { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-grid__row--youtube .youtube_title { font-size: 3.25rem; line-height: 66px } } .story-grid__row--instagram { background-color: white } .story-grid__row--instagram .story-cards-carousel { padding-top: 0 } .story-grid__row--instagram .instagram_title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #4A4A4A; font-size: 2.25rem; line-height: 46px } .font--arial .story-grid__row--instagram .instagram_title { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-grid__row--instagram .instagram_title { font-size: 3.25rem; line-height: 66px } } .story-grid__row--twitter { background-size: cover; background-position: 50%; background-color: black; background-repeat: no-repeat; position: relative } .story-grid__row--twitter:after { content: ''; position: absolute; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 100%, transparent 100%); width: 100%; height: 100%; bottom: 0; left: 0 } @media print, (min-width: 48em) { .story-grid__row--twitter:after { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 50%, transparent 100%) } } .story-grid__row--twitter .twitter-handle a { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #007dbb; font-size: 2.25rem; line-height: 46px } .font--arial .story-grid__row--twitter .twitter-handle a { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-grid__row--twitter .twitter-handle a { font-size: 3.25rem; line-height: 66px } } .story-grid__row--twitter .twitter-body p { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: white; font-size: 1.625rem; line-height: 36px } .font--arial .story-grid__row--twitter .twitter-body p { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-grid__row--twitter .twitter-body p { font-size: 2.25rem; line-height: 46px } } .story-grid__row--twitter .twitter-body p a { color: white; text-decoration: underline } .story-grid__row--twitter .twitter-date p { font-size: 1rem; line-height: 23px; color: white; margin-top: 20px } .story-grid__row--combined-social img { width: 100% } .story-grid__row--combined-social .story-grid__row-theme { margin-top: 0px; margin-bottom: 28px } .story-grid__row--combined-social .story-cards-carousel { padding-top: 0 } .story-grid__row--combined-social .story-cards-carousel:after { content: ''; position: absolute; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 100%, transparent 100%); width: 100%; height: 100%; bottom: 0; left: 0 } @media print, (min-width: 48em) { .story-grid__row--combined-social .story-cards-carousel:after { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 50%, transparent 100%) } } .story-grid__row--white .story-grid__row { background: white } .story-grid .recommended-for-you .story-grid__row-theme { margin-top: 0px; margin-bottom: 28px } .story-grid__load-more { position: relative; height: 102px; background-color: #fff; -webkit-transform: translateY(32px); transform: translateY(32px) } .story-grid__load-more .story-grid__load-more-link { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .story-grid__load-more .story-grid__load-more-link:after { -webkit-transform: rotate(90deg) translateX(-5px); transform: rotate(90deg) translateX(-5px) } .story-grid__append-load-more-items > .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 28px } .story-grid__append-load-more-items > .row > .columns { display: -ms-flexbox; display: flex } .story-grid__append-load-more-items > .row:after, .story-grid__append-load-more-items > .row:before { display: none } .story-grid__append-load-more-items .story-card { margin-top: 28px } .story-card { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; position: relative; background: #fff; border: 1px solid #ccc } .story-card a:focus { outline: thin auto } .story-card__theme { position: relative; display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: #FFFFFF; padding: 10px 15px 5px 15px; text-transform: uppercase; margin-top: -1px; border-bottom: 1px solid #ccc; width: calc(100% + 2px); -webkit-transform: translateX(-1px); transform: translateX(-1px) } .font--arial .story-card__theme { font-family: Arial, Helvetica, sans-serif } .story-card__theme--climate { background-color: #528316 } .story-card__theme--collaborating { background-color: #005EB8 } .story-card__theme--popular { background-color: #333 } .story-card__theme--healthy { background-color: #DC1894 } .story-card__theme--water { background-color: #00838A } .story-card__theme--equality { background-color: #E4002B } .story-card__theme--consuming { background-color: #702F8A } .story-card__theme--protecting { background-color: #00573F } .story-card__theme--education { background-color: #9B2743 } .story-card__theme--nutrition { background-color: #B85C00 } .story-card__theme--business { background-color: #004976 } .story-card__theme--other { background-color: #333333 } .story-card__link { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-positive: 1; flex-grow: 1; position: relative; height: calc(100% - 30px) } .story-card__link:hover .story-card__image-container::before { opacity: 0.3 } .story-card__link:hover .story-card__title, .story-card__link:hover .story-card__typographic-title, .story-card__link:hover .story-card__typographic-text { color: #004976 } .story-card__content { display: -ms-flexbox; display: flex; position: relative; z-index: 1; padding: 15px 30px } .story-card__image-container { position: relative; overflow: hidden; margin-bottom: 15px } .story-card__image-container::before { content: ''; position: absolute; background-color: #000; width: 100%; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .story-card__youtube-container { position: relative } .story-card__instagram-container { position: relative } .story-card__popup-youtube::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .story-card__popup-youtube::before a:focus { outline: thin auto } .story-card__image { width: 100% } .story-card__date-time-container { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; font-size: .6875rem; line-height: 23px; color: #666 } .story-card__date { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .story-card__date { font-family: Arial, Helvetica, sans-serif } .story-card__time { font-family: "Helvetica", Arial, Helvetica, sans-serif; position: relative; text-align: center } .font--arial .story-card__time { font-family: Arial, Helvetica, sans-serif } .story-card__time > span { display: inline-block; margin-right: 2px; width: 22px } .story-card__time > span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.375rem; position: absolute; top: -1px; left: 0; width: 22px; content: "\e904"; display: inline-block } .story-card__title-container { display: -ms-flexbox; display: flex; -ms-flex-line-pack: start; align-content: flex-start; margin: 15px } .story-card__title { display: block; margin-top: 15px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.5rem; line-height: 28px; letter-spacing: -0.42px; color: #007dbb } .font--arial .story-card__title { font-family: Arial, Helvetica, sans-serif } .story-card__title--large { font-size: 2.25rem; line-height: 2.5rem } .story-card__typographic-title { margin-top: 15px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 4rem; line-height: 52px; letter-spacing: -0.63px; color: #007dbb } .font--arial .story-card__typographic-title { font-family: Arial, Helvetica, sans-serif } .story-card__typographic-text { margin-top: 15px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2.25rem; line-height: 42px; letter-spacing: -0.63px; color: #007dbb } .font--arial .story-card__typographic-text { font-family: Arial, Helvetica, sans-serif } .story-card__taken-from-container { width: 100%; margin: 15px; -ms-flex-item-align: end; align-self: flex-end; display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start } .story-card__taken-from { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .875rem; line-height: 22px; color: #666 } .font--arial .story-card__taken-from { font-family: Arial, Helvetica, sans-serif } .story-card__summary { margin-top: 15px; margin-bottom: 15px } .story-card__summary, .story-card__summary p { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .875rem; line-height: 22px; color: #666 } .font--arial .story-card__summary, .font--arial .story-card__summary p { font-family: Arial, Helvetica, sans-serif } .story-card__author-container { -ms-flex-item-align: end; align-self: flex-end; position: relative; width: 100%; margin: 0 15px 15px; cursor: pointer } .story-card__author-container:hover .story-card__author-image-container::before { opacity: 0.3 } .story-card__author-info-container { border-top: 1px solid #ccc; padding-top: 15px; width: 100% } .story-card__author-image-container { position: relative; float: left; margin-right: 5px } .story-card__author-image-container::before { content: ''; position: absolute; background-color: #000; width: 100%; border-radius: 5px; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .story-card__author-image { max-width: 85px; border-radius: 5px } .story-card__author-name { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .8125rem; font-weight: bold; line-height: 16px; color: #666; letter-spacing: -0.17px; margin-bottom: 5px } .font--arial .story-card__author-name { font-family: Arial, Helvetica, sans-serif } .story-card__author-position { word-wrap: break-word; font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 14px; color: #666 } .font--arial .story-card__author-position { font-family: Arial, Helvetica, sans-serif } .story-card__social-title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2.25rem; line-height: 46px; color: white; margin-bottom: 30px } .font--arial .story-card__social-title { font-family: Arial, Helvetica, sans-serif } .story-card--typographic { border: none } .story-card--typographic .story-card__theme { border-bottom: none } .story-card--youtube { background: transparent; border: none; display: block } .story-card--youtube .story-card__image-container { margin-bottom: 0px } .story-card--youtube .story-card__video_title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: white; font-size: 1.5rem; line-height: 31px; margin-top: 15px } .font--arial .story-card--youtube .story-card__video_title { font-family: Arial, Helvetica, sans-serif } .story-card--youtube:hover .story-card__image-container::before { opacity: 0.3 } .story-card--instagram { background: transparent; border: none; display: block } .story-card--instagram img { width: 100% } .story-card--instagram .story-card__image-container { margin-bottom: 0px } .story-card--instagram:hover .story-card__image-container::before { opacity: 0.3 } .story-card--twitter { background: transparent; border: none } .story-card--twitter .story-card__twitter-body p { font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif; color: white; font-size: 1.5rem; line-height: 31px } .font--arial .story-card--twitter .story-card__twitter-body p { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-card--twitter .story-card__twitter-body p { font-size: 1.5rem; line-height: 31px } } .story-card--twitter .story-card__twitter-body p a { color: white; text-decoration: underline } .story-card--twitter .story-card__twitter-date p { font-size: 1rem; line-height: 23px; color: white; margin-top: 20px } .story-card--with-carousel { height: 100% } .story-card--with-carousel .story-card__author-container { margin-bottom: 45px } .story-card--with-carousel .owl-carousel { display: -ms-flexbox; display: flex; height: 100% } .story-card--with-carousel .owl-stage-outer { display: -ms-flexbox; display: flex; overflow: hidden } .story-card--with-carousel .owl-stage { display: -ms-flexbox; display: flex } .story-card--with-carousel .owl-item { -ms-flex-negative: 0; flex-shrink: 0 } .story-card--with-carousel .owl-nav { position: absolute; display: block; bottom: 30px; left: 0; width: 100% } .story-card--with-carousel .owl-nav .owl-next, .story-card--with-carousel .owl-nav .owl-prev { position: absolute; display: inline-block; color: #007dbb; font-size: 1rem; font-weight: bold } .story-card--with-carousel .owl-nav .owl-next.disabled, .story-card--with-carousel .owl-nav .owl-prev.disabled { display: none; opacity: 0; pointer-events: none } .story-card--with-carousel .owl-nav .owl-next:after, .story-card--with-carousel .owl-nav .owl-next:before, .story-card--with-carousel .owl-nav .owl-prev:after, .story-card--with-carousel .owl-nav .owl-prev:before { display: inline-block; vertical-align: middle; font-size: 1rem; transition: all ease-out 0.3s; padding: 0 5px } .story-card--with-carousel .owl-next { right: 15px } .story-card--with-carousel .owl-next:before { content: '' } .story-card--with-carousel .owl-next:after { content: "\2794" } .story-card--with-carousel .owl-next:hover:after { -webkit-transform: translateX(3px); transform: translateX(3px) } .story-card--with-carousel .owl-prev { left: 15px } .story-card--with-carousel .owl-prev:before { content: "\2794"; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .story-card--with-carousel .owl-prev:hover:before { -webkit-transform: translateX(-3px) rotate(180deg); transform: translateX(-3px) rotate(180deg) } .story-card--with-carousel .story-card__show-all { color: #007dbb; font-size: 1rem; font-weight: bold; position: absolute; right: 15px; bottom: 14px; cursor: pointer; display: inline-block } .story-card--with-carousel .story-card__show-all.disabled { display: none } .author-profile-lightbox { background: white; padding: 20px 30px; text-align: left; margin: 40px auto; position: relative; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) } .author-profile-lightbox__name { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2rem; letter-spacing: -0.43px; line-height: 41px; color: #004976 } .font--arial .author-profile-lightbox__name { font-family: Arial, Helvetica, sans-serif } .author-profile-lightbox__jobTitle { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1rem; line-height: 24px; color: #666 } .font--arial .author-profile-lightbox__jobTitle { font-family: Arial, Helvetica, sans-serif } .author-profile-lightbox__profile, .author-profile-lightbox__profile p { font-family: "Helvetica", Arial, Helvetica, sans-serif; font-size: 1.125rem; line-height: 27px; color: #666; margin-top: 28px } .font--arial .author-profile-lightbox__profile, .font--arial .author-profile-lightbox__profile p { font-family: Arial, Helvetica, sans-serif } .author-profile-lightbox__image { border-radius: 5px } .author-profile-lightbox__linklist { margin-top: 28px } .author-profile-lightbox__linklist a { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.125rem; line-height: 22px; color: #007dbb; margin-right: 15px; cursor: pointer; transition: all 300ms ease 0ms } .font--arial .author-profile-lightbox__linklist a { font-family: Arial, Helvetica, sans-serif } .author-profile-lightbox__linklist a::before { padding-right: 0 !important; display: inline-block !important; transition: all 300ms ease 0ms } .author-profile-lightbox__linklist a:hover { color: #004976 } .author-profile-lightbox__linklist a:hover::before { -webkit-transform: translateX(-3px); transform: translateX(-3px) } .news-filter .story-grid__row .signup { margin: 28px 0 28px 0 } .series-listing .story-grid__row { padding-top: 0px } .series-listing .story-grid__append-load-more-items > .row { margin-bottom: 0px } .story-grid__row--columns-flex > .row > .columns { margin-bottom: 28px } .author-profile-lightbox { width: 90vw } .news-and-features .story-grid__row--slide-in:not(.story-grid__row--with-carousel), .news-and-features .story-grid__row--slide-in.story-grid__row--with-carousel .owl-carousel .owl-stage-outer { transition: all ease-out 0.45s; -webkit-transform: translateX(10vw); transform: translateX(10vw); opacity: 0 } .news-and-features .story-grid__row--slide-in-show-up:not(.story-grid__row--with-carousel), .news-and-features .story-grid__row--slide-in-show-up.story-grid__row--with-carousel .owl-carousel .owl-stage-outer { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } .news-and-features .story-card--no-image { border: none } .news-and-features .story-card--no-image .story-card__theme { border-bottom: none } @media print, (min-width: 48em) { .news-and-features .story-grid__row--signup > div { background: transparent !important } .news-and-features .story-grid__row--signup > div:after { background-image: none } .news-and-features .story-card--typographic, .news-and-features .story-card--no-image { background: transparent } .news-and-features .story-card--typographic .story-card__date, .news-and-features .story-card--typographic .story-card__time, .news-and-features .story-card--typographic .story-card__title, .news-and-features .story-card--typographic .story-card__typographic-title, .news-and-features .story-card--typographic .story-card__typographic-text, .news-and-features .story-card--typographic .story-card__taken-from, .news-and-features .story-card--typographic .story-card__summary, .news-and-features .story-card--typographic .story-card__summary p, .news-and-features .story-card--typographic .story-card__author-name, .news-and-features .story-card--typographic .story-card__author-position, .news-and-features .story-card--no-image .story-card__date, .news-and-features .story-card--no-image .story-card__time, .news-and-features .story-card--no-image .story-card__title, .news-and-features .story-card--no-image .story-card__typographic-title, .news-and-features .story-card--no-image .story-card__typographic-text, .news-and-features .story-card--no-image .story-card__taken-from, .news-and-features .story-card--no-image .story-card__summary, .news-and-features .story-card--no-image .story-card__summary p, .news-and-features .story-card--no-image .story-card__author-name, .news-and-features .story-card--no-image .story-card__author-position { color: white; transition: color 0.3s ease } .news-and-features .story-card--typographic .story-card__link:hover .story-card__date, .news-and-features .story-card--typographic .story-card__link:hover .story-card__time, .news-and-features .story-card--typographic .story-card__link:hover .story-card__title, .news-and-features .story-card--typographic .story-card__link:hover .story-card__typographic-title, .news-and-features .story-card--typographic .story-card__link:hover .story-card__typographic-text, .news-and-features .story-card--typographic .story-card__link:hover .story-card__taken-from, .news-and-features .story-card--typographic .story-card__link:hover .story-card__summary, .news-and-features .story-card--typographic .story-card__link:hover .story-card__summary p, .news-and-features .story-card--typographic .story-card__link:hover .story-card__author-name, .news-and-features .story-card--typographic .story-card__link:hover .story-card__author-position, .news-and-features .story-card--no-image .story-card__link:hover .story-card__date, .news-and-features .story-card--no-image .story-card__link:hover .story-card__time, .news-and-features .story-card--no-image .story-card__link:hover .story-card__title, .news-and-features .story-card--no-image .story-card__link:hover .story-card__typographic-title, .news-and-features .story-card--no-image .story-card__link:hover .story-card__typographic-text, .news-and-features .story-card--no-image .story-card__link:hover .story-card__taken-from, .news-and-features .story-card--no-image .story-card__link:hover .story-card__summary, .news-and-features .story-card--no-image .story-card__link:hover .story-card__summary p, .news-and-features .story-card--no-image .story-card__link:hover .story-card__author-name, .news-and-features .story-card--no-image .story-card__link:hover .story-card__author-position { color: rgba(255, 255, 255, 0.8) } .story-grid-container__theme { margin-left: 15px; width: calc(100% - 30px) } .story-grid__row-theme { margin-left: 15px; width: calc(100% - 30px) } .story-grid__row--columns-flex > .row { display: -ms-flexbox; display: flex } .story-grid__row--columns-flex > .row > .columns { display: -ms-flexbox; display: flex; margin-bottom: 0px } .story-grid__row--with-story-card-with-carousel .story-card__author-container { margin-bottom: 45px } .author-profile-lightbox { width: 70vw } } @media print, (min-width: 48em) and (max-width: 57.5em) { .story-card__theme { font-size: .5rem } .story-card__typographic-title { font-size: 3rem } .story-card__typographic-text { font-size: 2rem; line-height: 42px } .story-card__time { margin-right: 0 } .story-card__author-image-container { float: none; margin-bottom: 5px } .author-profile-lightbox { width: 50vw } } .no-js .story-hero-container.hide, .no-js .story-grid.hide { display: block } .no-js .news-and-features-header__items-container { height: auto } .no-js .news-and-features-header__menu-search.hide { display: block; width: 100% } .no-js .news-and-features .story-grid { background-color: #333 } .no-js .story-grid-container { overflow: visible } .no-js .story-grid-container .story-grid__row--slide-in { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } .no-js .owl-carousel { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 45px } .no-js .owl-carousel .story-card { margin-left: 15px; margin-bottom: 15px } .no-js .story-card { width: auto } .no-js .story-card__link { height: auto } .no-js .story-card__author-container { margin-bottom: 15px } .no-js .story-card--with-carousel .story-card__theme { border-bottom: none } .no-js .story-card--with-carousel .story-card__link { border-top: 1px solid #ccc } .story-card-full__theme { position: relative; display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: #FFFFFF; padding: 10px 15px 5px 15px; text-transform: uppercase; margin-bottom: 15px } .font--arial .story-card-full__theme { font-family: Arial, Helvetica, sans-serif } .story-card-full__theme--climate { background-color: #528316 } .story-card-full__theme--collaborating { background-color: #005EB8 } .story-card-full__theme--popular { background-color: #333 } .story-card-full__theme--healthy { background-color: #DC1894 } .story-card-full__theme--water { background-color: #00838A } .story-card-full__theme--equality { background-color: #E4002B } .story-card-full__theme--consuming { background-color: #702F8A } .story-card-full__theme--protecting { background-color: #00573F } .story-card-full__theme--education { background-color: #9B2743 } .story-card-full__theme--nutrition { background-color: #B85C00 } .story-card-full__theme--business { background-color: #004976 } .story-card-full__theme--other { background-color: #333333 } @media print, (min-width: 48em) and (max-width: 57.5em) { .story-card-full__theme { font-size: .5rem } } .story-card-full__link { position: relative; background: #fff } .story-card-full__link a:focus { outline: thin auto } .story-card-full__link > .row { padding-top: 0; padding-bottom: 15px; padding-left: 15px; padding-right: 15px } .story-card-full__link:hover .story-card-full__image-container::before { opacity: 0.3 } .story-card-full__link:hover .story-card-full__title { color: #004976 } .story-card-full__image-container { position: relative; overflow: hidden } .story-card-full__image-container::before { content: ''; position: absolute; background-color: #000; width: 100%; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .story-card-full__popup-youtube::before { content: ""; top: 50%; left: 50%; background: url(../images/play.png); background-size: cover; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: block; position: absolute; z-index: 4 } .story-card-full__image { width: 100% } .story-card-full__title { padding: 15px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2rem; line-height: 40px; letter-spacing: -0.48px; color: #007dbb } .font--arial .story-card-full__title { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-card-full__title { font-size: 1.3125rem; line-height: 30px } } @media (min-width: 67.5em) { .story-card-full__title { font-size: 2rem; line-height: 40px } } .story-card-full__date-time-container { width: 100%; padding-left: 15px; padding-right: 15px; font-size: .6875rem; line-height: 23px; color: #666 } .story-card-full__date { float: left; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .story-card-full__date { font-family: Arial, Helvetica, sans-serif } .story-card-full__time { position: relative; float: right; margin-top: 2px; text-align: center } .story-card-full__time > span { display: inline-block; margin-right: 2px; width: 22px } .story-card-full__time > span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.375rem; position: absolute; top: -1px; left: 0; width: 22px; content: "\e904"; display: inline-block } .story-card-full__author-container { cursor: pointer; padding: 15px } .story-card-full__author-container:hover .story-card-full__author-image-container::before { opacity: 0.3 } .story-card-full__author-separator { width: 100%; height: 1px; border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 1.25em 0 0.85em } .story-card-full__author-image-container { position: relative; float: left; margin-right: 5px } .story-card-full__author-image-container::before { content: ''; position: absolute; background-color: #000; width: 100%; border-radius: 5px; height: 100%; bottom: 0; opacity: 0; transition: all 0.3s ease } .story-card-full__author-image { max-width: 85px; border-radius: 5px } .story-card-full__author-name { font-family: "Helvetica", Arial, Helvetica, sans-serif; color: #666; font-weight: bold; letter-spacing: -0.17px; line-height: 14px; font-size: .8125rem; margin-bottom: 4px } .font--arial .story-card-full__author-name { font-family: Arial, Helvetica, sans-serif } .story-card-full__author-position { word-wrap: break-word; font-family: "Helvetica", Arial, Helvetica, sans-serif; color: #666; line-height: 14px; font-size: .75rem } .font--arial .story-card-full__author-position { font-family: Arial, Helvetica, sans-serif } .story-card-full--enhanced .story-card-full__theme { position: relative; z-index: 1 } .story-card-full--enhanced .story-card-full__link { border: none; height: 100%; background-position: 50% 50%; background-size: cover; min-height: 310px } .story-card-full--enhanced .story-card-full__link::after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: black; opacity: 0.6; transition: all 0.3s ease } .story-card-full--enhanced .story-card-full__title { position: absolute; z-index: 1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: white; font-size: 2rem; line-height: 2.5rem } @media print, (min-width: 48em) { .story-card-full--enhanced .story-card-full__title { font-size: 3rem; line-height: 3.375rem } } .story-card-full--enhanced .story-card-full__date-time-container { position: absolute; z-index: 1; width: 100%; bottom: 15px; padding: 0 } .story-card-full--enhanced .story-card-full__date { color: white; margin-left: 15px } .story-card-full--enhanced .story-card-full__time { color: #ccc; margin-right: 15px } .story-card-full--enhanced:hover .story-card-full__link::after { opacity: 0.8 } .story-card-full--enhanced:hover .story-card-full__title { color: white } .story-card-full { margin-left: -15px; margin-right: -15px } .story-card-full__date-time-container { padding-top: 24px } .story-card-full__author-container { position: relative } @media print, (min-width: 48em) { .story-card-full { margin-left: 0; margin-right: 0 } .story-card-full__date-time-container { padding-top: 0 } .story-card-full__author-container { padding: 0px; position: absolute; width: calc(50% - 30px); left: calc(50% + 15px); bottom: 15px; right: 15px } } .signup { padding: 28px 15px; background-position: 50% 50%; background-size: cover; position: relative } .signup a:focus { outline: thin auto } .signup:after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%) } .signup > .row { position: relative; z-index: 3 } @media print, (min-width: 48em) { .signup .row .row { margin-left: 0 } } .signup__join-our-community { color: white; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2.75rem; font-weight: bold; line-height: 68px; padding-bottom: 10px } .font--arial .signup__join-our-community { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .signup__join-our-community { font-size: 3.25rem } } .signup__social-text { width: 100%; border-radius: 0; border: solid 1px #ccc; padding: 14px; background-color: #fff; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1rem; display: inline-block; color: #666 } .font--arial .signup__social-text { font-family: Arial, Helvetica, sans-serif } .signup__social-subscribe { position: absolute; left: initial !important } @media print, (min-width: 30em) { .signup__social-subscribe { right: 0 !important } } .signup__confirm-age { margin-top: 10px; display: inline-block; color: white; font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: .75rem; color: white } .font--arial .signup__confirm-age { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 30em) { .signup__confirm-age { font-size: .9375rem } } .signup__confirm-age input { float: left; vertical-align: middle; margin-right: 10px; -webkit-transform: scale(2); transform: scale(2); width: 20px; margin-left: 5px } .signup__confirm-age input:focus + label { outline: 1px dotted } .signup__sign-up-for-our-quar { color: white; clear: both; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 1.5rem; line-height: 36px; padding-top: 15px } .font--arial .signup__sign-up-for-our-quar { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 30em) { .signup__sign-up-for-our-quar { font-size: 2.25rem; line-height: 42px } } @media (max-width: 29.9375em) { .signup .cta-link { background: none } .signup .cta-link input { box-shadow: none; border-radius: 5px } } .overview-cta__subtitle:hover { color: white } .overview-cta__subtitle:after { transition: all ease 0.3s } .overview-cta__subtitle:hover:after { margin-left: 18px } .story-cards-carousel { padding-top: 28px; padding-bottom: 28px; background-position: 100% 100%; background-size: cover; position: relative; overflow-x: hidden } .story-cards-carousel .story-cards-carousel__title { display: -ms-flexbox; display: flex } .story-cards-carousel .story-cards-carousel__title .story-card { background: transparent; border: none } .story-cards-carousel .story-cards-carousel__title .story-card__theme { border-bottom: none } .story-cards-carousel .story-cards-carousel__title .story-card__link, .story-cards-carousel .story-cards-carousel__title .story-card a { pointer-events: none } .story-cards-carousel .story-cards-carousel__title .story-card__title { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: 2.25rem; letter-spacing: -0.31px; line-height: 40px; color: white } .font--arial .story-cards-carousel .story-cards-carousel__title .story-card__title { font-family: Arial, Helvetica, sans-serif } .story-cards-carousel .story-cards-carousel__title .story-card__summary { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1.125rem; letter-spacing: -0.31px; line-height: 27px; color: white } .font--arial .story-cards-carousel .story-cards-carousel__title .story-card__summary { font-family: Arial, Helvetica, sans-serif } .story-cards-carousel .owl-nav { position: absolute; display: block; bottom: 5px; left: 15px; right: 15px } .story-cards-carousel .owl-nav .owl-next, .story-cards-carousel .owl-nav .owl-prev { position: absolute; display: inline-block; color: #333 } .story-cards-carousel .owl-nav .owl-next.disabled, .story-cards-carousel .owl-nav .owl-prev.disabled { display: none; opacity: 0; pointer-events: none } .story-cards-carousel .owl-nav .owl-next:after, .story-cards-carousel .owl-nav .owl-next:before, .story-cards-carousel .owl-nav .owl-prev:after, .story-cards-carousel .owl-nav .owl-prev:before { display: inline-block; vertical-align: middle; font-size: 1rem; transition: all ease-out 0.3s; padding: 0 5px } .story-cards-carousel .owl-next { right: 0 } .story-cards-carousel .owl-next:before { content: '' } .story-cards-carousel .owl-next:after { content: "\2794" } .story-cards-carousel .owl-next:hover:after { -webkit-transform: translateX(3px); transform: translateX(3px) } .story-cards-carousel .owl-prev { left: 0 } .story-cards-carousel .owl-prev:before { content: "\2794"; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .story-cards-carousel .owl-prev:hover:before { -webkit-transform: translateX(-3px) rotate(180deg); transform: translateX(-3px) rotate(180deg) } .story-cards-carousel .owl-carousel { margin-bottom: 28px } .story-cards-carousel .owl-stage { display: -ms-flexbox; display: flex } .story-cards-carousel .owl-item { transition: opacity ease 0.45s; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0 } .story-cards-carousel .owl-item .story-card__theme, .story-cards-carousel .owl-item .story-card__link { opacity: 0.33 } .story-cards-carousel .owl-item.active-item .story-card__theme, .story-cards-carousel .owl-item.active-item .story-card__link { opacity: 1 } .story-cards-carousel .owl-item:not(.active-item) .story-card__link, .story-cards-carousel .owl-item:not(.active-item) .story-card a { pointer-events: none } .story-cards-carousel--with-background:after { content: ''; position: absolute; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 100%); width: 100%; height: 100%; bottom: 0; left: 0 } .story-cards-carousel--with-background .owl-nav .owl-next, .story-cards-carousel--with-background .owl-nav .owl-prev { color: white } .story-cards-carousel .story-card { width: calc(100vw - 85px) } .story-cards-carousel .columns { z-index: 2 } @media print, (min-width: 48em) and (max-width: 57.5em) { .story-cards-carousel .story-card__author-image-container { float: left; margin-bottom: none } } @media print, (min-width: 48em) { .story-cards-carousel .story-card { width: calc((100vw / 2) - 85px) } } @media (min-width: 67.5em) { .story-cards-carousel .story-card { width: 303.333333333px } .story-cards-carousel .story-card__link { width: 303.333333333px } } @media (min-width: 93.75em) { .story-cards-carousel .story-card { width: 423.333333333px } .story-cards-carousel .story-card__link { width: 423.333333333px } } .story-hero a:focus { outline: thin auto } .story-hero__background, .story-hero:after { position: absolute; top: 0; left: 0; -webkit-transform-origin: top center; transform-origin: top center; background-size: cover } .story-hero__background { overflow: hidden; background-position: 50% 50%; transition: -webkit-transform 2s; transition: transform 2s } .story-hero:after { content: ''; background-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.5) 100%); opacity: 0.7; transition: opacity 2s } @media screen and (max-width: 48em) { .story-hero { background: #000 !important; padding-bottom: 15px } } .story-hero__mobile-image { padding: 0 } .story-hero__mobile-image .columns { padding: 0 } .story-hero__theme { position: relative; display: block; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; font-size: .75rem; line-height: 15px; color: #FFFFFF; padding: 10px 15px 5px 15px; text-transform: uppercase; font-size: .8125rem; line-height: 13px; z-index: 5 } .font--arial .story-hero__theme { font-family: Arial, Helvetica, sans-serif } .story-hero__theme--climate { background-color: #528316 } .story-hero__theme--collaborating { background-color: #005EB8 } .story-hero__theme--popular { background-color: #333 } .story-hero__theme--healthy { background-color: #DC1894 } .story-hero__theme--water { background-color: #00838A } .story-hero__theme--equality { background-color: #E4002B } .story-hero__theme--consuming { background-color: #702F8A } .story-hero__theme--protecting { background-color: #00573F } .story-hero__theme--education { background-color: #9B2743 } .story-hero__theme--nutrition { background-color: #B85C00 } .story-hero__theme--business { background-color: #004976 } .story-hero__theme--other { background-color: #333333 } .story-hero__row { position: relative; z-index: 5 } @media print, (min-width: 48em) { .story-hero__row { min-height: 322px } } .story-hero__title { font-size: 2rem; line-height: 43px; margin-top: 15px; font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: white } .font--arial .story-hero__title { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { .story-hero__title { margin-top: 28px; font-size: 3rem; line-height: 56px } } .story-hero__summary { margin-top: 10px } .story-hero__summary, .story-hero__summary p { font-family: "DINWebPro-Light", Arial, Helvetica, sans-serif; font-size: 1rem; letter-spacing: -0.33px; line-height: 27px; color: white } .font--arial .story-hero__summary, .font--arial .story-hero__summary p { font-family: Arial, Helvetica, sans-serif } .story-hero__author-container { cursor: pointer } .story-hero__author-container:hover .story-hero__author-image-container::before { opacity: 0.3 } .story-hero__author-image-container { position: relative; float: left; margin-right: 5px } .story-hero__author-image-container::before { content: ''; position: absolute; background-color: #000; border-radius: 5px; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; transition: all 0.3s ease } .story-hero__author-image { height: 43px; width: 77px; border-radius: 5px } .story-hero__author-name { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: white; font-weight: bold; letter-spacing: -0.16px; line-height: 15px; font-size: .75rem } .font--arial .story-hero__author-name { font-family: Arial, Helvetica, sans-serif } .story-hero__author-position { font-family: "Helvetica", Arial, Helvetica, sans-serif; color: white; font-size: .625rem; line-height: 14px } .font--arial .story-hero__author-position { font-family: Arial, Helvetica, sans-serif } .story-hero__date-time-container { margin-top: 15px; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; font-size: .6875rem; line-height: 23px; color: white } @media (min-width: 57.5em) { .story-hero__date-time-container { -ms-flex-pack: start; justify-content: flex-start } } .story-hero__date { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif } .font--arial .story-hero__date { font-family: Arial, Helvetica, sans-serif } .story-hero__time { position: relative; font-family: "Helvetica", Arial, Helvetica, sans-serif; text-align: center; color: #ccc } .font--arial .story-hero__time { font-family: Arial, Helvetica, sans-serif } .story-hero__time > span { display: inline-block; margin-right: 2px; width: 22px; color: #ccc } .story-hero__time > span:before { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; font-size: 1.375rem; position: absolute; top: -1px; left: 0; width: 22px; content: "\e904"; display: inline-block; color: white } .story-hero__time--nodate { float: left; margin-bottom: 10px } .story-hero__title-row, .story-hero__summary-row { -webkit-transform: translateX(0px); transform: translateX(0px); transition: all 0.75s ease-out } .story-hero--fixed .story-hero:after, .story-hero--fixed .story-hero__background { position: fixed; bottom: 0; right: 0 } .story-hero--fixed .story-hero:after { background-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.7) 100%) } .story-hero--blurred .story-hero__background { -webkit-filter: blur(5px); filter: blur(5px) } .story-hero--blurred .story-hero:after { opacity: 1 } .story-hero__background, .story-hero:after { display: none } @media print, (min-width: 48em) { .story-hero { position: relative } .story-hero__row { margin-top: 0; padding-bottom: 28px } .story-hero__mobile-image { padding: 0; display: none } .story-hero__mobile-image .columns { padding: 0 } .story-hero__background, .story-hero:after { display: block; bottom: initial; right: initial; width: 100vw; height: 100vh } .story-hero__theme { margin-left: 15px; margin-right: 15px } .story-hero__row { margin-top: 0px } .story-hero__summary { font-size: 1.125rem } .story-hero__title-row, .story-hero__summary-row { -webkit-transform: translateX(15px); transform: translateX(15px); transition: all 0.75s ease-out } .story-hero__date { margin-right: 15px } .story-hero__time { float: initial } .story-hero--hovered .story-hero__background { -webkit-transform: scale(1.04); transform: scale(1.04) } .story-hero--hovered .story-hero:after { -webkit-transform: scale(1.04); transform: scale(1.04); opacity: 1 } .story-hero--hovered .story-hero__title-row, .story-hero--hovered .story-hero__summary-row { -webkit-transform: translateX(0px); transform: translateX(0px); transition: all 0.75s ease-out } } .themes-listing { overflow: hidden; position: relative; z-index: 1 } .themes-listing .story-cards-carousel { padding-top: 0; padding-bottom: 38px } .themes-listing .signup { margin-top: 28px; margin-bottom: 56px } .series-listing { overflow: hidden; position: relative; z-index: 1 } .series-listing .story-grid { margin-top: 28px } .series-listing .signup { margin-top: 28px; margin-bottom: 28px } .theme-ubrand hr.content-start { height: 0 } .theme-ubrand [class*="column"] + [class*="column"]:last-child { float: left } @media (max-width: 30em) { .theme-ubrand #content-wrap { margin-bottom: 1.25rem } } .theme-ubrand #content-wrap h1, .theme-ubrand #content-wrap h2.title { font-family: "ShireTypesPro-Derbyshire", Arial, Helvetica, sans-serif; letter-spacing: -0.62px; color: #015DEE } .theme-ubrand #content-wrap h1 { position: relative; padding-bottom: 1.875rem; margin-bottom: 1.25rem } .theme-ubrand #content-wrap h1::after { content: ''; background: url(../images/ubrand/squiggle.svg); display: inline-block; vertical-align: top; position: absolute; height: 8px; width: 103px; bottom: 0; left: 0 } .theme-ubrand #content-wrap h2.title { line-height: 2.125rem } .theme-ubrand #content-wrap .full-article-banner h1 { color: #015DEE } @media print, (min-width: 48em) { .theme-ubrand #content-wrap .full-article-banner h1 { color: #FFF } } .theme-ubrand #content-wrap .space-top { margin-top: 1.875rem } .theme-ubrand .simple-copy h2 { font-family: "ShireTypesPro-Derbyshire", Arial, Helvetica, sans-serif; letter-spacing: -0.62px; color: #015DEE } body.theme-careers-2018 #content-wrap { overflow: hidden } body.theme-careers-2018 #content-wrap h1 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 2.25rem; line-height: 2.875rem; color: #000f9f } body.theme-careers-2018 #content-wrap h2 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.875rem; line-height: 2.5rem; color: #238DC1 } body.theme-careers-2018 #content-wrap h3 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.625rem; line-height: 2rem; color: #000f9f } body.theme-careers-2018 hr.content-start { margin-bottom: -6px } body.theme-careers-2018::-webkit-input-placeholder { color: #666 } body.theme-careers-2018::-moz-placeholder { color: #666 } body.theme-careers-2018:-ms-input-placeholder { color: #666 } body.theme-careers-2018:-moz-placeholder { color: #666 } body.theme-careers-2018 .careers-filter { background-color: #eee } body.theme-careers-2018 .careers-filter form.filters .row.l-f { background: none } body.theme-careers-2018 .careers-filter form.filters .row.l-f select { font-size: 14px !important } body.theme-careers-2018 .careers-filter > .filters > .dropdowns > .small-12.columns:not(.filter-options) { display: none } body.theme-careers-2018 .careers-filter .filter-options ul { list-style-type: none } body.theme-careers-2018 .careers-filter .filter-options ul li.filter-opener-container .filter-opener { color: #666; font-size: 14px; line-height: 24px } body.theme-careers-2018 .careers-filter .filter-options ul li.filter-opener-container .filter-opener:after { top: 1px } body.theme-careers-2018 .careers-filter .filter-options .large-5.small-12.columns.left.input-clear-wrap { margin-bottom: 0 } body.theme-careers-2018 .careers-filter .filter-opener-container, body.theme-careers-2018 .careers-filter .large-dropdown, body.theme-careers-2018 .careers-filter .keyword-search { height: 40px } body.theme-careers-2018 .careers-filter .filters .dropdowns { padding-top: 30px; padding-bottom: 10px; margin-bottom: 0 } body.theme-careers-2018 .careers-filter .large-dropdown, body.theme-careers-2018 .careers-filter .keyword-search { color: #666; font-size: 14px; line-height: 24px } body.theme-careers-2018 .careers-filter .text-search-submit { font-family: "DINWebPro-Bold"; font-size: 16px !important; padding: 7px 15px; letter-spacing: 2.67px; line-height: 30px; border-radius: 0; transition: background ease 0.3s; background-color: #FEB0C0; color: #000f9f } body.theme-careers-2018 .careers-filter .text-search-submit:hover { background-color: #be8490 } body.theme-careers-2018 .careers-filter .large-dropdown { position: relative; cursor: pointer; -moz-appearance: none; -webkit-appearance: none; appearance: none } body.theme-careers-2018 .careers-filter .filter-options.record-result { position: relative } body.theme-careers-2018 .careers-filter .filter-options.record-result.active:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e01f'; color: #007dbb; position: absolute; top: 4px; right: 10px; font-size: 0.75rem } body.theme-careers-2018 .careers-filter .filter-options.record-result:after { font-family: "GeneralFoundicons"; font-family: 'unilever-iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; display: inline; content: '\e025'; color: #007dbb; position: absolute; top: 4px; right: 10px; font-size: 0.75rem } body.theme-careers-2018 .careers-filter .filter-options.record-result:after { top: 15px; right: 30px; pointer-events: none } body.theme-careers-2018 .careers-filter .filter-options.record-result > select::-ms-expand { display: none } @media (min-width: 30em) { body.theme-careers-2018 .careers-filter .large-dropdown, body.theme-careers-2018 .careers-filter .input-clear-wrap { margin-bottom: 0 } body.theme-careers-2018 .careers-filter .filter-options select { margin-bottom: 0 !important } body.theme-careers-2018 .careers-filter .text-search-submit { margin-left: 30px } } body.theme-careers-2018 .careers-filter--c2018-cta-blue .text-search-submit { font-family: "DINWebPro-Bold"; font-size: 16px !important; padding: 7px 15px; letter-spacing: 2.67px; line-height: 30px; border-radius: 0; transition: background ease 0.3s; background-color: #238DC1; color: #FFEA29 } body.theme-careers-2018 .careers-filter--c2018-cta-blue .text-search-submit:hover { background-color: #1a6a91 } @media (min-width: 30em) and (max-width: 47.9375em) { body.theme-careers-2018 .careers-filter .filter-options.end { margin-top: 1.25rem } body.theme-careers-2018 .careers-filter .filter-options.end .small-12.columns.left.input-clear-wrap { padding-right: .9375rem } body.theme-careers-2018 .careers-filter .text-search-submit { margin-left: .9375rem } } body.theme-careers-2018 .sting { background-image: none } body.theme-careers-2018 .sting div.cta-link { background-image: none; margin-bottom: 0; height: auto } body.theme-careers-2018 .sting div.cta-link > span { font-family: "DINWebPro-Bold"; font-size: 16px !important; padding: 7px 15px; letter-spacing: 2.67px; line-height: 30px; border-radius: 0; transition: background ease 0.3s; background-color: #FEB0C0; color: #000f9f; box-shadow: none; border-radius: 0 } body.theme-careers-2018 .sting div.cta-link > span:hover { background-color: #be8490 } body.theme-careers-2018 .sting div.cta-link > span:after { display: none } body.theme-careers-2018 .sting div.image-mask { border-top: none; margin-bottom: 15px } body.theme-careers-2018 .sting div.image-mask:after { display: none } body.theme-careers-2018 .sting--c2018-blue h2 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.625rem; line-height: 2rem; color: #238DC1 } body.theme-careers-2018 .sting--c2018-blue div.cta-link > span { font-family: "DINWebPro-Bold"; font-size: 16px !important; padding: 7px 15px; letter-spacing: 2.67px; line-height: 30px; border-radius: 0; transition: background ease 0.3s; background-color: #238DC1; color: #FFEA29 } body.theme-careers-2018 .sting--c2018-blue div.cta-link > span:hover { background-color: #1a6a91 } body.theme-careers-2018 #content-wrap .sting h2 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.625rem; line-height: 2rem; color: #000f9f } body.theme-careers-2018 #content-wrap .sting--c2018-blue h2 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.625rem; line-height: 2rem; color: #238DC1 } body.theme-careers-2018 .content-feed { background-color: #00CFC9; max-width: 100%; overflow: hidden } @media (min-width: 93.75em) { body.theme-careers-2018 .content-feed > .row { max-width: 85em; padding-left: .9375rem; padding-right: .9375rem } } body.theme-careers-2018 .content-feed__container { overflow: visible } body.theme-careers-2018 .content-feed .content-feed__container { padding-top: 3.125rem; padding-bottom: 2.8125rem } body.theme-careers-2018 .content-feed__section-title:after { background-color: #fff; left: 1.5625rem; width: calc(100% - 9.375rem) } body.theme-careers-2018 .content-feed__section-title > p { display: none } body.theme-careers-2018 .content-feed__items .owl-prev, body.theme-careers-2018 .content-feed__items .owl-next { color: #000f9f; padding-top: .9375rem; margin-top: 2.8125rem; margin-bottom: 0 } body.theme-careers-2018 .content-feed__item > a > p { color: #238DC1; margin-bottom: 2.1875rem } body.theme-careers-2018 .content-feed__item > a > dl > dt { display: none } body.theme-careers-2018 .content-feed__item > a > h3 { padding-top: 1.125rem } body.theme-careers-2018 .content-feed__item > a > h3:before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } body.theme-careers-2018 .content-feed__item--vacancy > a > span:first-child { display: none } body.theme-careers-2018 .content-feed--c2018-pink { background-color: #FEB0C0 } body.theme-careers-2018 .content-feed--c2018-pink h2 { background-color: #FEB0C0 } body.theme-careers-2018 .content-feed--c2018-white { background-color: #fff } body.theme-careers-2018 .content-feed--c2018-white h2 { background-color: #fff } body.theme-careers-2018 .content-feed--c2018-white .content-feed__section-title:after { background-color: #000f9f } body.theme-careers-2018 .content-feed--c2018-white .content-feed__section-title a { background-color: #fff } body.theme-careers-2018 .content-feed--c2018-linkedin.is--initialised .owl-stage { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: start; justify-content: flex-start } body.theme-careers-2018 .content-feed--c2018-linkedin .content-feed__item > a > h3 { padding: 1.25rem } body.theme-careers-2018 .content-feed--c2018-linkedin .content-feed__item > a > h3:before { display: none } @media (min-width: 93.75em) { body.theme-careers-2018 .content-feed__section-title > a { margin-right: 0; right: 4rem } } body.theme-careers-2018 #content-wrap .content-feed h2 { color: #000f9f } body.theme-careers-2018 #content-wrap .content-feed .content-feed__item h3 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.25rem; line-height: 1.5625rem; color: #000f9f } body.theme-careers-2018 #content-wrap .content-feed--fixed-background { background-color: #eee } body.theme-careers-2018 #content-wrap .content-feed--fixed-background .content-feed__container { padding-top: 0 } @media print, (min-width: 48em) { body.theme-careers-2018 #content-wrap .content-feed--fixed-background .content-feed__container { padding-top: 5.625rem; padding-bottom: 5rem } } body.theme-careers-2018 #content-wrap .content-feed--fixed-background h2 { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; color: #007dbb; font-size: 1.625rem; line-height: 1.25 } .font--arial body.theme-careers-2018 #content-wrap .content-feed--fixed-background h2 { font-family: Arial, Helvetica, sans-serif } @media print, (min-width: 48em) { body.theme-careers-2018 #content-wrap .content-feed--fixed-background h2 { color: #fff; font-size: 2.25rem } } @media (min-width: 67.5em) { body.theme-careers-2018 #content-wrap .content-feed--fixed-background h2 { font-size: 3rem } } body.theme-careers-2018 #content-wrap .content-feed--c2018-linkedin .content-feed__item h3 { font-family: "DINWebPro-Bold"; text-transform: uppercase; font-size: 1.25rem; line-height: 1.5625rem; color: #238DC1 } body.theme-careers-2018 .content-feed .content-feed__section-title h2, body.theme-careers-2018 .content-feed:nth-child(even) .content-feed__section-title h2 { background-color: #00CFC9 } body.theme-careers-2018 .content-feed .content-feed__section-title a, body.theme-careers-2018 .content-feed:nth-child(even) .content-feed__section-title a { background-color: #00CFC9; color: #000f9f } body.theme-careers-2018 .content-feed.content-feed--c2018-pink .content-feed__section-title h2, body.theme-careers-2018 .content-feed:nth-child(even).content-feed--c2018-pink .content-feed__section-title h2 { background-color: #FEB0C0 } body.theme-careers-2018 .content-feed.content-feed--c2018-pink .content-feed__section-title a, body.theme-careers-2018 .content-feed:nth-child(even).content-feed--c2018-pink .content-feed__section-title a { background-color: #FEB0C0 } body.theme-careers-2018 .content-feed.content-feed--c2018-white .content-feed__section-title h2, body.theme-careers-2018 .content-feed:nth-child(even).content-feed--c2018-white .content-feed__section-title h2 { background-color: #fff } body.theme-careers-2018 .content-feed.content-feed--c2018-white .content-feed__section-title a, body.theme-careers-2018 .content-feed:nth-child(even).content-feed--c2018-white .content-feed__section-title a { background-color: #fff } .c2018-banner__container { background-color: #007dbb; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; margin-left: 0; margin-right: 0 } .c2018-banner__container.row { margin-left: 0; margin-right: 0 } .c2018-banner__media, .c2018-banner__text { display: block; position: relative; padding-left: 0; padding-right: 0; height: 15.625rem } .c2018-banner__media { background-size: cover; background-position: 50% 50% } .c2018-banner__title { display: block; position: absolute; padding-bottom: 0; margin-top: 0; text-align: left; top: 50%; left: 1.25rem; -webkit-transform: translateY(-50%); transform: translateY(-50%) } @media (min-width: 48em) { .c2018-banner__title { text-align: center } } @media (min-width: 48em) { .c2018-banner__container { -ms-flex-direction: row; flex-direction: row } .c2018-banner__media, .c2018-banner__text { height: 22.5rem } .c2018-banner__title { left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } } #content-wrap .c2018-banner .c2018-banner__title { color: #fff } #content-wrap .c2018-banner .c2018-banner--c2018-blue .c2018-banner__title { color: #00CFC9 } body.theme-careers-2018 .c2018-banner .c2018-banner__container { background-color: #00CFC9 } body.theme-careers-2018 .c2018-banner--c2018-blue .c2018-banner__container { background-color: #000f9f } body.theme-careers-2018 #content-wrap .c2018-banner .c2018-banner__title { color: #000f9f; font-size: 1.5rem; letter-spacing: .25rem } @media (min-width: 30em) { body.theme-careers-2018 #content-wrap .c2018-banner .c2018-banner__title { font-size: 1.875rem } } @media (min-width: 48em) { body.theme-careers-2018 #content-wrap .c2018-banner .c2018-banner__title { font-size: 2.25rem } } body.theme-careers-2018 #content-wrap .c2018-banner--c2018-blue .c2018-banner__title { color: #00CFC9 } body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item { border-radius: 0 } body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--prev .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--prev .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--prev .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--prev .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--prev .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--prev .taking-action__nav__item__direction { -ms-flex-item-align: start; align-self: flex-start } [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--prev .taking-action__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--prev .taking-action-image__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--prev .taking-action__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--prev .taking-action-image__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--prev .taking-action__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--prev .taking-action-image__nav__item__direction > span:before, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--prev .taking-action__nav__item__direction > span:before { content: "\e021" } body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--next .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--next .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--next .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--next .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--next .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--next .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--next .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--next .taking-action__nav__item__direction { -ms-flex-item-align: end; align-self: flex-end } [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--next .taking-action-image__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item--next .taking-action__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--next .taking-action-image__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action__nav .taking-action__nav__item--next .taking-action__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--next .taking-action-image__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item--next .taking-action__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--next .taking-action-image__nav__item__direction > span:after, [dir="rtl"] body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item--next .taking-action__nav__item__direction > span:after { content: "\e023" } body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item__direction { border-radius: 0; background-color: #000f9f; transition: all 0.3s ease } body.theme-careers-2018 .taking-action__nav .taking-action-image__nav__item__direction > span, body.theme-careers-2018 .taking-action__nav .taking-action__nav__item__direction > span, body.theme-careers-2018 .taking-action-image__nav .taking-action-image__nav__item__direction > span, body.theme-careers-2018 .taking-action-image__nav .taking-action__nav__item__direction > span { display: block; padding-top: .0625rem; color: #FEB0C0; text-transform: uppercase } body.theme-careers-2018 .taking-action__nav a:hover .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action__nav a:hover .taking-action__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav a:hover .taking-action-image__nav__item__direction, body.theme-careers-2018 .taking-action-image__nav a:hover .taking-action__nav__item__direction { background-color: #000968 } body.theme-careers-2018 .taking-action__nav a:before, body.theme-careers-2018 .taking-action__nav a:after, body.theme-careers-2018 .taking-action-image__nav a:before, body.theme-careers-2018 .taking-action-image__nav a:after { border-radius: 0px } .gold-article h1, .gold-article h2, .gold-article h3, .gold-article h4, .gold-article h5, .gold-article h6, .gold-article .gold-article-heading { clear: both } .gold-article h1 p, .gold-article h1 span, .gold-article h2 p, .gold-article h2 span, .gold-article h3 p, .gold-article h3 span, .gold-article h4 p, .gold-article h4 span, .gold-article h5 p, .gold-article h5 span, .gold-article h6 p, .gold-article h6 span, .gold-article .gold-article-heading p, .gold-article .gold-article-heading span { background-color: #0085CA; color: #fff; display: inline-block; padding: 7px 12px 2px } .gold-article h1 span, .gold-article h2 span, .gold-article h3 span, .gold-article h4 span, .gold-article h5 span, .gold-article h6 span, .gold-article .gold-article-heading span { font-family: "DINWebPro-Bold", Arial, Helvetica, sans-serif; text-transform: uppercase } .font--arial .gold-article h1 span, .font--arial .gold-article h2 span, .font--arial .gold-article h3 span, .font--arial .gold-article h4 span, .font--arial .gold-article h5 span, .font--arial .gold-article h6 span, .font--arial .gold-article .gold-article-heading span { font-family: Arial, Helvetica, sans-serif } .gold-article p { font-size: .9375em } @media print, (min-width: 48em) { .gold-article p { font-size: 1em } } @media (min-width: 67.5em) { .gold-article p { font-size: 1.125em } } div { -webkit-tap-highlight-color: transparent } .communication .lh-news-a .img { animation: lhImgRight ease 2s; animation-fill-mode: both; margin-right: 50px; } .communication .lh-news-a h4 { animation: lhFadeInUp ease 1s; animation-fill-mode: both; color: #333; color: ; position: relative; padding: 0px 0 20px; overflow: hidden; } .communication .lh-news-a h4::after { content: ''; display: block; width: 20px; height: 2px; background: #333; background: ; position: absolute; left: 0; top: 40px; } .communication .lh-news-a h2 { font-size: 20px; color: #333333; color: ; overflow: hidden; height: 22px; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .communication ul.imgnews-list { padding: 0; margin: 0; list-style: none; overflow: hidden; } .communication .imgnews-list .item-2 { border-bottom: 1px dashed; padding: 0 0 20px; border-color: #666666; border-color: ; } .communication .imgnews-list .item-2 .text { float: right; width: calc(100% - 90px - 20px); max-height: 160px; overflow: hidden; } .communication .imgnews-list .item-2 .text h3 { width: 100%; font-size: 18px; padding-bottom: 6px; } .communication .imgnews-list .item-2 .title { left: 0; } .communication .imgnews-list li .title { font-size: 14px; line-height: 30px; color: #333333; color: ; margin: 0; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; -webkit-transition: all .6s cubic-bezier(.165, .84, .44, 1) 0ms; transition: all .6s cubic-bezier(.165, .84, .44, 1) 0ms; left: 10px; } .communication .imgnews-list .item-2 .title::after { background-color: #666666; background-color: ; content: ""; height: 1px; width: 18px; left: 0; bottom: 0; position: absolute; } .communication .imgnews-list .item-2 .text p { margin-top: 6px; color: #666666; color: ; font-size: 16px; line-height: 26px; overflow: hidden; max-height: 78px; } .communication .imgnews-list li .date { float: left; height: 90px; text-align: center; margin-right: 20px; width: 90px; background: #0c8ccc; } .communication .imgnews-list li .date .day { font-size: 36px; font-weight: bold; position: relative; letter-spacing: 1px; color: #eeeeee; } .communication .imgnews-list li .date .year { color: #eeeeee; position: relative; display: block; } .communication .item-other { padding-top: 10px; transition: ease .65s; } .communication .item-other:first-child { padding-top: 0; } .communication .item-other.item-1.active { display: none; } .communication .item-other.item-2 { opacity: 0; height: 0; padding: 0; position: absolute; } .communication .item-other.item-2 a { display: none; } .communication .item-other.item-2.active { opacity: 1; height: auto; position: unset; transform: translate(0, 10px); margin-bottom: 20px; } .communication .item-other.item-2.active a { display: block; } .communication .imgnews-list li .title { font-size: 16px; line-height: 20px; color: #333333; color: ; margin: 0; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; -webkit-transition: all .6s cubic-bezier(.165, .84, .44, 1) 0ms; transition: all .6s cubic-bezier(.165, .84, .44, 1) 0ms; left: 10px; } .communication .imgnews-list li .fa { display: inline-block; line-height: 20px; float: left; color: #0c8ccc; color: ; font-size: 13px; position: relative; right: 0; opacity: 1; } .communication .imgnews-list li .time { display: inline-block; line-height: 30px; float: right; color: #666666; color: ; font-size: 13px; position: relative; } .text-xs-left { text-align: left !important; } .communication .imgnews-list li { display: block; margin-right: 1.875rem; cursor: pointer; } .communication .clearfix::after { display: table; clear: both; content: ''; } .communication .imgnews-list li.transform { visibility: inherit; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } .communication .lh-news-b { margin-top: 78px; margin-left: -40px; } .communication .lh-flex { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .communication .lhShow .lh-news-b li:nth-child(1), .communication .lhShow .lh-footer-item li:nth-child(1) { animation-delay: .1s; } .communication .lh-news-b li { background: #F2F2F2; box-shadow: 0 0 10px rgba(12, 3, 6, .16); position: relative; width: 30%; margin: 0 0 30px 3%; overflow: hidden; animation: lhFadeInUp ease 1s; animation-fill-mode: both; } .communication .lh-news-b li .img { opacity: 0; visibility: hidden; transition: ease .65s; height: 100%; } .communication .lh-news-b li:hover .img { opacity: 1; visibility: visible; } .communication img { border: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .communication .lh-news-b li a { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; transition: ease .65s; } .communication .bgopacity { background: #f2f2f2; } .communication .h1, .communication .h2, .communication .h3, .communication .h4, .communication .h5, .communication .h6, .communication h1, .communication h2, .communication h3, .communication h4, .communication h5, .communication h6 { font-family: "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Roboto, Arial, sans-serif; } .communication .lh-news-b li h4 { position: relative; left: 0; top: 0; width: 100%; padding: 30px 35px; color: #777777; color: ; transition: ease .65s; font-size: 14px; } .communication .lh-news-b li h4::after { content: ''; display: block; width: 15px; height: 1px; background: #0c8ccc; background: ; position: absolute; left: 35px; bottom: 20px; transition: ease .65s; } .communication .lh-news-b li h2 { padding: 0 35px; text-align: center; line-height: 24px; font-size: 16px; color: #333333; color: ; text-align: left; font-weight: bold; overflow: hidden; transition: ease .65s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .communication .lh-news-b li p { color: #777777; color: ; display: -webkit-box; -webkit-box-orient: vertical; padding: 4px 35px; transition: ease .65s; } .communication .lh-news-b li:hover h4, .communication .lh-news-b li:hover h2, .communication .lh-news-b li:hover p { color: #ffffff; } .communication .lh-news-b li:hover h4::after { background: #ffffff; } .communication .lh-news-b li::after { content: ''; display: block; width: 100%; height: 100%; background: none; position: absolute; left: 0; top: 0; opacity: 0; transition: ease .65s; } .communication .lh-news-b li:hover:after { opacity: 1; transform: translate(10px, 10px); } .communication .lh-news-b li:hover a { transform: translate(10px, 10px); } .communication .lh-news-a .imgnews-list li a { transition: ease .65s; } .communication.min { display: none; } @media (max-width:767px) { .communication { display: none; } .communication.min { display: block; padding: 40px 0 0; } .communication .lh-news-a h2 { height: auto; line-height: unset; color: #007dbb; font-style: normal; font-weight: normal; color: #007dbb; line-height: 1.25; margin: 0; font-size: 1.5rem; height: auto; } .communication.min .index-min-box h2 { font-size: 1rem !important; float: left; max-width: calc(100% - 90px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0; padding: 0; } .communication.min .index-min-box .date { font-size: 1rem !important; float: right; margin: 0; margin-top: 0px; line-height: 33px; width: 80px; white-space: nowrap; } .communication li { display: block; margin: 0; width: 100%; } .communication.min .row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; *zoom: 1; padding-left: .9375em; padding-right: .9375em; } } .wxbox-img { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; display: none; } .wxbox-img .bg-close { background: rgba(0, 0, 0, 0.4); position: fixed; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10; } .wxbox-img.hidetwo .img { opacity: 1; transform: translateY(0); transition: ease all .5s; } .wxbox-img.hidetwo .img { opacity: 1; transform: translateY(0); transition: ease all .5s; } .wxbox-img .img { opacity: 0; transition: ease all .5s; transform: translateY(-20px); z-index: 24; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; position: absolute; background: #fff; padding: 15px; box-sizing: border-box; } .wxbox-img .img img { max-width: 100%; } ul.category > li { display: inline-block; text-align: center; font-size: 0.9rem; padding: 2px 10px; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; } ul.category > li > a { color: #0c8ccc; } .category li:hover, .category li.active { background: #0c8ccc; } .category li:hover a, .category li.active a { color: #fff; } ul.category.large > li { height: 40px; } ul.category.large > li:hover { background-color: #007dbb; } ul.category.large > li > a { color: #007dbb; font-size: 13px !important; line-height: 40px; } ul.category.large li:hover, ul.category.large li.active { background: #007dbb; color: #fff; } ul.category.large li:hover a, ul.category.large li.active a { color: #fff; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-pull-12 { right: 100% } .col-xs-pull-11 { right: 91.66666667% } .col-xs-pull-10 { right: 83.33333333% } .col-xs-pull-9 { right: 75% } .col-xs-pull-8 { right: 66.66666667% } .col-xs-pull-7 { right: 58.33333333% } .col-xs-pull-6 { right: 50% } .col-xs-pull-5 { right: 41.66666667% } .col-xs-pull-4 { right: 33.33333333% } .col-xs-pull-3 { right: 25% } .col-xs-pull-2 { right: 16.66666667% } .col-xs-pull-1 { right: 8.33333333% } .col-xs-pull-0 { right: auto } .col-xs-push-12 { left: 100% } .col-xs-push-11 { left: 91.66666667% } .col-xs-push-10 { left: 83.33333333% } .col-xs-push-9 { left: 75% } .col-xs-push-8 { left: 66.66666667% } .col-xs-push-7 { left: 58.33333333% } .col-xs-push-6 { left: 50% } .col-xs-push-5 { left: 41.66666667% } .col-xs-push-4 { left: 33.33333333% } .col-xs-push-3 { left: 25% } .col-xs-push-2 { left: 16.66666667% } .col-xs-push-1 { left: 8.33333333% } .col-xs-push-0 { left: auto } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (min-width:768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666667% } .col-sm-pull-10 { right: 83.33333333% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666667% } .col-sm-pull-7 { right: 58.33333333% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666667% } .col-sm-pull-4 { right: 33.33333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.66666667% } .col-sm-pull-1 { right: 8.33333333% } .col-sm-pull-0 { right: auto } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666667% } .col-sm-push-10 { left: 83.33333333% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666667% } .col-sm-push-7 { left: 58.33333333% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666667% } .col-sm-push-4 { left: 33.33333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.66666667% } .col-sm-push-1 { left: 8.33333333% } .col-sm-push-0 { left: auto } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } @media (min-width:992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666667% } .col-md-pull-10 { right: 83.33333333% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666667% } .col-md-pull-7 { right: 58.33333333% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666667% } .col-md-pull-4 { right: 33.33333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.66666667% } .col-md-pull-1 { right: 8.33333333% } .col-md-pull-0 { right: auto } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666667% } .col-md-push-10 { left: 83.33333333% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666667% } .col-md-push-7 { left: 58.33333333% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666667% } .col-md-push-4 { left: 33.33333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.66666667% } .col-md-push-1 { left: 8.33333333% } .col-md-push-0 { left: auto } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666667% } .col-md-offset-10 { margin-left: 83.33333333% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666667% } .col-md-offset-7 { margin-left: 58.33333333% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666667% } .col-md-offset-4 { margin-left: 33.33333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.66666667% } .col-md-offset-1 { margin-left: 8.33333333% } .col-md-offset-0 { margin-left: 0 } } @media (min-width:1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666667% } .col-lg-pull-10 { right: 83.33333333% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666667% } .col-lg-pull-7 { right: 58.33333333% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666667% } .col-lg-pull-4 { right: 33.33333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.66666667% } .col-lg-pull-1 { right: 8.33333333% } .col-lg-pull-0 { right: auto } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666667% } .col-lg-push-10 { left: 83.33333333% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666667% } .col-lg-push-7 { left: 58.33333333% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666667% } .col-lg-push-4 { left: 33.33333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.66666667% } .col-lg-push-1 { left: 8.33333333% } .col-lg-push-0 { left: auto } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666667% } .col-lg-offset-10 { margin-left: 83.33333333% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666667% } .col-lg-offset-7 { margin-left: 58.33333333% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666667% } .col-lg-offset-4 { margin-left: 33.33333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.66666667% } .col-lg-offset-1 { margin-left: 8.33333333% } .col-lg-offset-0 { margin-left: 0 } } 三二开码-必发娱乐登录-官网直营信用无忧