:root {
	
	--bodyCopy: #1A1F23;
	--navy: #213845;
	--grey: #96ABBC;
	--orange: #D9822B;
	
    --navy2: #284A6F;
    --lightBlue: #95DCF2;
    --pink: #EF9776;
    
    --teal:#3c6b72;
    --orangeyellow:#D8AD4C;
}

/* COMMENT BACK IN BEFORE LIVE 
.pc__disclaimer,
.o-cookie-message--active	{display: none !important}
*/

body:not(.js-focus-visible) :focus, html:not(.js-focus-visible) :focus {
    outline:none;
}

/** FT CSS OVERRIDES **/
.disclaimer__sponsor				{font-weight:bold !important;}
.disclaimer .o-tooltip-content p	{font-size:16px !important;}
.o-tooltip--arrow-left.o-tooltip-arrow--align-top:after, .o-tooltip--arrow-left.o-tooltip-arrow--align-top:before	{top:50% !important;}
.o-header    	{position: relative; z-index: 10;}
.o-footer							{margin-top:0 !important; position: relative; z-index: 5;}
.o-tooltip							{z-index:50 !important;}
.disclaimer__sponsor				{color:#000000 !important; font-weight: 600 !important;}
.safari-fix			{position: absolute; background-color: #ffffff; left: 0; top: -350px; width: 100%; height: 350px; z-index: 0;}
.o-cookie-message__heading h1 {color: #000;}

/* 2020 OVERRIDES */
.pc 					{padding-top: 11px; padding-bottom: 10px; z-index: 30;}
.o-footer *,
.pc__share-content,
.pc__client .pc__client-title,
.pc__title-content 		{font-family: MetricWeb, sans-serif !important;}
.pc__disclaimer-content {font-family: MetricWeb, sans-serif !important; font-size: 16px; line-height: 1.5em; color: #333333;}

[class*=col-]:not(.slick-slide) 	{float:none !important}

.o-header__drawer * {font-family: MetricWeb,sans-serif !important;}

.o-header__drawer    {transform: translate3d(-100%, 0, 0); width: auto; position: fixed}

/*
.pc-progress   {position: fixed; /* or relative to wherever you want it */ top: 0; left: 0; height: 4px; width: 0; background: red; transition: width 0.1s linear; z-index: 9999; /* if you want it above everything */}
*/

#content .right {float: none; }

#form1 	{background-color:#ffffff;}
* 		{margin:0; padding:0; outline:none; border:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
body 	{background-color: #ffffff !important; height: auto !important; color: #333333; font-family: "stevie-sans", sans-serif;}
ul 		{margin:0;}

#tvn-content h1,
#tvn-content h2,
#tvn-content h3,
#tvn-content h4,
#tvn-content h5,
#tvn-content h6	{font-family: desire-pro, serif; font-weight: 400; letter-spacing: 1px; margin-bottom: 0.5em}
#tvn-content p,
#tvn-content ul,
#tvn-content ol, 
#tvn-content cite {font-family: "stevie-sans", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--bodyCopy)}

#tvn-content .article-hero-container h1	{font-size: 80px; color: #ffffff; line-height: 1em; letter-spacing: 1px; margin-bottom: 0.25em; font-variation-settings: "wdth" 100;}
#tvn-content p.intro					{font-size: 30px; color: #ffffff; line-height: 1.3em; width: 560px; margin: auto; max-width: 100%;}

#tvn-content h2	{font-size: 53px; line-height: 1em}

h2.in-copy-h2	{margin-top: 1em}

a.cover {position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 6; display: none}

strong	{font-weight: 700}	

.inner 	{width:1330px; max-width: 100%; padding-left: 15px; padding-right: 15px; margin:0 auto;}

.relative			{position: relative;}
.overflow-hidden	{overflow: hidden;}

.cols               {display: flex;}

/*********************/
/***** HOME PAGE *****/
/*********************/

.hub-hero               {height: calc(100vh - 107px); width: 100%; background-color: #213845; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden}
.hub-hero-text          {position: relative; z-index: 10; display: flex; flex-direction: column; width: 100%;}
.hub-hero-text h1       {position: absolute; left: -99999px}
.hub-hero-text p        {font-size: 27px; font-weight: 600 !important; color: #ffffff !important; display: block; text-align: center; animation: 2s herotextin 0.5s ease-in-out forwards; opacity: 0; transform: translateY(30px); padding: 0 20px; line-height: 1.4em}
.hub-hero-image-outer   {position: absolute; inset:0; animation: 4s imageIn 0s ease-in-out forwards; opacity: 0; transform: scale(1)}
.hub-hero-image         {position: absolute; inset:0; background-size: cover; background-position: center;}   
.hub-hero-image:after   {position: absolute; inset:0; background-color: rgba(33,56,69); mix-blend-mode: multiply; content: ''; opacity: 0.5}

.hub-lines-top          {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
.hub-lines-top hr       {margin: 5px 0; width: 50%; width: 0; animation: 2s linein ease-in-out forwards;}
.hub-lines-top hr.grey  {width: 0%; animation: 2s linein2 ease-in-out forwards;}

.hub-lines-bottom          {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: 30px;}
.hub-lines-bottom hr       {margin: 5px 0; width: 0%; animation: 2s linein ease-in-out forwards;}
.hub-lines-bottom hr.grey  {width: 0%; animation: 2s linein2 ease-in-out forwards;}

#lottiehub1     {max-width: 1050px; width: 100%; margin: auto}

.hub-hero .down-arrow   {position: absolute; bottom: 50px;}

@keyframes herotextin   {
    
    to  {opacity: 1; transform: translateY(0)}
}

@keyframes linein   {
    
    to  {width: 50%}
}

@keyframes linein2   {
    
    to  {width: 40%}
}

.listing                                        {padding: 30px 0 80px}
.panel-container                       {position: relative; padding: 0}
.panel-container-inner                 {width: 1316px; max-width:calc(100% - 60px); margin: auto; display: block}
.panel-container-cols                  {display: flex;}
.panel-container-image-container       {height: 600px; width: 50%; flex-shrink: 0; position: relative; transition: 0.3s ease-out}
.panel-container-image                 {position: absolute; inset:0; background-size: cover; background-position: center;}
.panel-container-text                  {padding-left: 80px; width: 50%; position: relative; display: flex; align-items: center}
.panel-container-text-inner            {}
#tvn-content .panel-container-text h2  {font-size: 60px; margin-bottom: 0.35em}
#tvn-content .panel-container-text p   {font-size: 20px; line-height: 1.4em; max-width: 430px; width: 100%; margin-bottom: 1.5em; position: relative; z-index: 5; letter-spacing: 0}
.panel-container .btn                  {font-size: 23px; position: relative; z-index: 6; transition: 0.75s cubic-bezier(0.5, 0, 0, 1); letter-spacing: 5px; font-family: desire-pro, serif; border:1px solid var(--navy); border-radius: 4px; text-transform: uppercase; display: inline-block; padding: 15px 20px 12px}
.panel-container:hover .btn,
.panel-container .btn:hover                                {background-color: var(--navy); color: #ffffff}


.panel-container-text #lottiehub3  {position: absolute; right: 20px; bottom: 0; width: 196px; height: auto}
.panel-container-text #lottiehub4  {position: absolute; right: 30px; bottom: 0; width: 152px; height: auto;}
.panel-container-text #lottiehub5  {position: absolute; right: 30px; bottom: 0; width: 200px; height: auto;}
.panel-container-text #lottiehub6  {position: absolute; right: 30px; bottom: 0; width: 300px; height: auto;}
.panel-container-text #lottiehub7  {position: absolute; right: 30px; bottom: 0; width: 300px; height: auto;}

.panel-container-lines             {padding: 50px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.panel-container-lines hr.orange        {border-color:var(--orange); margin: 5px 0; display: block}

hr.orangeyellow                          {border-color:var(--orangeyellow);}
.panel-container-lines hr.orangeyellow   {border-color:var(--orangeyellow); margin: 5px 0; display: block}
.panel-container-lines hr.grey           {border-color:var(--grey); margin: 5px 0; display: block}

.panel-container.flipped .panel-container-cols     {flex-direction: row-reverse}
.panel-container.flipped .panel-container-text     {padding-right: 80px; padding-left: 0}
.panel-container.flipped .panel-container-lines    {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end}

/* FOOTER */
footer.agc-footer           {background-color: var(--navy); padding: 80px 0}
footer.agc-footer .inner    {display: flex; justify-content: center; align-items: center; text-align: center;}
footer.agc-footer h4        {font-size: 64px; color: #ffffff; margin-bottom: 0 !important}
footer.agc-footer p         {font-size: 20px; color: #ffffff !important; line-height: 1.4em}
footer.agc-footer ul        {display: flex; justify-content: center; gap:15px; margin-top: 20px;}
footer.agc-footer ul li a   {display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; border:1px solid #ffffff;}
footer.agc-footer ul li a:hover {background-color: #ffffff;}
footer.agc-footer ul li a:hover path    {fill:var(--navy) !important}

/* ARTICLE HERO */
.article-hero-container				{height: calc(100vh - 107px); position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden}
.article-hero-image-container		{position: absolute; left: 0; top: -20px; bottom: 0; width: 100%;  overflow: hidden;}
.article-hero-container:after		{position: absolute; inset:0; top: auto; bottom: 0; height: 80%; content: ''; background: rgb(33,56,69); background: linear-gradient(0deg, rgba(33,56,69,1) 0%, rgba(33,56,69,0.75) 50%, rgba(33,56,69,0) 100%); }
.article-hero-image					{position: absolute; left: 0; top: 0; inset:0; background-size: cover; background-position: right;}

.article-hero-text					{position: relative; z-index: 5; width: 740px; max-width: calc(100% - 40px); text-align: center; padding-bottom: 30px;}
.article-hero-text p				{font-size: 24px; color: #ffffff !important; width: 616px; max-width: 100%; margin-left: auto; margin-right: auto; line-height: 1.4em; margin-bottom: 1em}

.down-arrow:hover img	{transform: scale(1.1)}
.down-arrow img			{transition: 0.3s ease-out}

.page-3 .article-hero-image {background-position: center}

/* ARTICLE TEXT */
article		{padding: 70px 0 0}
.article-inner					{width: 760px; max-width: 100%; padding: 0 20px; margin: auto;}
#tvn-content .article-inner p	{font-size: 18px; line-height: 1.76em; margin-bottom: 2em}

/* STANDFIRST SECTION */
.standfirst-container	{background-color: var(--navy); padding: 80px 0 25px; position: relative; top: -1px; bottom: -1px;}
#tvn-content .standfirst-container p	{color: #ffffff !important; font-size: 20px;}
.first-character 		{float: left; margin: 0; display: inline-block; font-size: 154px; line-height: 150px; margin-bottom: -30px; margin-right: 15px; font-family: desire-pro, serif;}

/* GENERIC SECTION STYLES */
.jp-section,
.fp-section,
.impact-section     {padding: 60px 0}
.fp-section-navy	{background-color:var(--navy); padding-bottom: 200px;}
#tvn-content .fp-section-navy p	    {color: #ffffff}
#tvn-content .fp-section-navy h2	{color: #ffffff}

.fp-section-4		{padding-top: 140px; padding-bottom: 40px;}

/* ARTICLE IMAGE */
.article-image	{width:1215px; margin: auto; max-width: 100%; margin-top: -160px;}
.article-image img	{transform: scale(0.8)}

.graph-two-container	{margin: 70px 0 0 0}

/* MAP SECTION */
.map-container				{width: 1350px; display: flex; position: relative; z-index: 10; justify-content: center; align-items: center; max-width: 100%; background-color: #ffffff; padding: 60px 0; margin-left: auto; margin-right: auto; margin-bottom: -90px; /*margin-top: -160px;*/ box-shadow: 0 0 40px rgba(0,0,0,0.1)}
.map-container #lottie10	{max-width: calc(100% - 40px);}

/* CTA CONTAINER */
.cta-container							{display: flex; justify-content: center; padding-top: 20px; padding-bottom: 100px;}
.btn-text-text							{overflow: hidden; width: 440px; max-width: 100%; border-radius: 4px; transition: 0.75s cubic-bezier(0.5, 0, 0, 1); background-color: var(--navy); text-transform: uppercase; text-decoration: none; display: inline-flex; padding:0 30px; height: 77px; flex-direction: column;}
.btn-text-text span						{color:#ffffff; font-family: desire-pro, serif; letter-spacing: 1px; font-size:43px; transition: 0.75s cubic-bezier(0.5, 0, 0, 1); height: 82px; width: 100%; text-align: center; justify-content: center; flex-shrink: 0; display: flex; align-items: center}
.btn-text-text:hover span:nth-child(1)	{transform: translateY(-100%);}
.btn-text-text:hover span:nth-child(2)	{transform: translateY(-100%); color:var(--navy)}
.btn-text-text:hover					{background-color: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-color:#000000}

.blockquote-container 					{padding: 40px 0 60px}
.blockquote-container blockquote		{position: relative; width: 583px; max-width: 100%; margin:0 auto; flex-shrink: 0}
.blockquote-container blockquote p		{color: var(--navy) !important; font-size: 53px; line-height: 1.1em; letter-spacing:1px; font-family: desire-pro, serif !important; margin-bottom: 0.35em}
.blockquote-container blockquote cite	{font-size: 16px; font-style: normal; line-height: 1.3em}
.quote									{width: 45px; height: 35px; background-image: url(/_assets/quotemark-orange.svg); background-size: cover; position: absolute; left: -75px; top:0}

.flexed,
.blockquote-container.flexed	{display: flex;}
.blockquote-container-column	{flex-shrink: 0; position: relative; flex: 1}

.blockquote-container-column-right {display: flex; align-items: flex-end;}	
.blockquote-container-column-right .lines	{justify-content: flex-end; align-items: flex-end}

.lines		{display: flex; flex-direction: column; gap: 10px; width: 100%;}
.lines hr	{width: 0;}

hr			{width: 100%; border-top:1px solid #000000; display: block; margin: 0;}
hr.grey		{border-color:var(--grey);}
hr.orange	{border-color:var(--orange);}
hr.pink 	{border-color:var(--pink);}


#lottie1	{position: absolute; right: 95px; top: -80px; width: 1031px; height: auto;}
#lottie2	{position: absolute; right: 50%; margin-right: -660px; bottom: -97px; width: 203px; height: auto;}
#lottie4	{position: absolute; right: 95px; top: -150px; width: 1124px; height: auto;}
#lottie5	{position: absolute; left: 0; top: 0; width: 831px; height: auto;}
#lottie7	{position: absolute; left: 50%; margin-left: -500px; top: -20px; width: 80px;}
#lottie8	{position: absolute; right: 50%; margin-right: -540px; top: -20px; width: 143px;}
#lottie10	{width: 1133px; max-width: 100%;}
#lottie11	{position: absolute; right: 50px; width: 933px; height: auto; top: 0;}
#lottie12	{position: absolute; left: 0; width: 946px; height: auto; bottom: 60px;}

.graph-one	{width: 1076px; margin: auto; max-width: calc(100% - 60px); margin-bottom: 60px; margin-top: 50px;}
.graph-two	{width: 1024px; margin: 60px auto; max-width: calc(100% - 60px);}

.syringes	{width: 170px; position: absolute; top: 100px; left: 50%; margin-left: -630px; display: flex; flex-direction: column}
.syr		{opacity: 0; transform: translateX(-60px);}
.syr-1		{width: 50px;}
.syr-2		{width: 90px; margin-left: auto}
.syr-3		{width: 150px; position: relative; top: -50px;}

.covid		{position: absolute; right: 0; top:200px; display: flex; align-items: flex-start;}
.cov		{opacity: 0}
.cov-1		{margin-top: 50px; transform: translateX(150px);}
.cov-2		{width: 100px; transform: translateX(100px);}
.cov-3		{width: 80px; transform: translateX(90px); margin-top: 50px; margin-left: 10px;}

.article-inner.graph-header	{width: 795px;}

.cta-container	{display: flex; align-items: center}
.cta-inner		{padding: 0 50px;}

.lines-right	{align-items: flex-end}
.lines-end  	{justify-content: flex-end}

.home-icon			       {position: fixed; left: 0; top: 108px; background-color: #ffffff; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; z-index: 30; transition: 0.75s cubic-bezier(0.5, 0, 0, 1);}
.home-icon svg path        {transition: 0.75s cubic-bezier(0.5, 0, 0, 1);}
.home-icon:hover	       {background-color: var(--orange);}
.home-icon:hover svg path  {fill:#ffffff !important}

.related-articles					                            {padding: 50px 0 70px 0; background-color: var(--navy2);}
.related-articles .panel-container                              {margin-bottom: 50px;}
.related-articles .panel-container-inner                        {width: 1000px;}
.related-articles .panel-container-lines                        {padding-top: 0}
#tvn-content .related-articles h3	                            {font-size: 70px; margin-bottom: 0.55em; color: #ffffff; font-weight: 400; display: block; text-align: center}
#tvn-content .related-articles .panel-container-text            {padding: 40px}
#tvn-content .related-articles .panel-container-text h2         {color: #ffffff; font-size: 50px;}
#tvn-content .related-articles .panel-container-text p          {color: #ffffff; font-size: 18px;}
#tvn-content .related-articles .panel-container-text-inner      {padding-bottom: 0 !important}
#tvn-content .related-articles .panel-container-text .btn       {border-color: #ffffff; color: #ffffff}
#tvn-content .related-articles .panel-container-image-container {height: 500px; overflow: hidden}
#tvn-content .related-articles .panel-container:hover .btn,
#tvn-content .related-articles .btn:hover                       {background-color: #ffffff; color: var(--navy);}
#tvn-content .related-articles .panel-container-image           {transition: 0.75s cubic-bezier(0.5, 0, 0, 1);}
#tvn-content .related-articles .panel-container:hover .panel-container-image    {transform: scale(1.1)}

.page-2 #tvn-content .related-articles  {background-color: var(--navy2)}

p.source {font-size: 12px !important; line-height: 14px; margin-top: 20px;}

.related-articles .panel-container:nth-child(even) .panel-container-cols   {flex-direction: row !important;}
.related-articles .panel-container:nth-child(odd) .panel-container-cols   {flex-direction: row-reverse !important;}

.slick-dots     {display: flex; justify-content: center; gap: 10px;}
.slick-dots li  {width: 20px; height: 20px; border-radius: 20px; border:1px solid #ffffff; font-size: 0;}
.slick-dots li.slick-active {background-color: #ffffff}

/** ANIMATIONS **/

.article-hero-image-container	{animation: 3s imageIn 0.4s ease forwards; opacity: 0; transform: scale(1)}
.article-hero-text				{animation: 2.5s textIn 0.4s ease forwards; transform: translateY(100%); opacity: 0;}

@keyframes imageIn {
	
	to	{opacity: 1; transform: scale(1.1)}
	
}

@keyframes textIn {
	
	to	{transform: translateY(0); opacity: 1}
	
}

/* VIDEO */
.video-container        {position: relative; aspect-ratio:16 / 9; overflow: hidden; max-width: 100%; width: 1250px; margin: 60px auto 0; /*margin-bottom: 30px;*/}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*******************************/
/** PAGE 2  - JAPANESE GLASS **/
/*******************************/

.page-2 .standfirst-container           {background-color: var(--navy2);}
.page-2 .article-hero-container:after   {background: rgb(40, 74, 111); background: linear-gradient(0deg, rgba(40, 74, 111, 1) 0%, rgba(40, 74, 111, 0.75) 50%, rgba(40, 74, 111, 0) 100%);}
.page-2 .quote                          {background-image:url(/_assets/quotemark-pink.svg)}
.page-2 .article-hero-image             {background-position: center;}

/* PAGE 2 MAP */

.jp-map-container       {width: 900px; max-width: 100%; background-color: #ffffff; flex-shrink: 0}
.jp-map-container-inner {width: 722px; max-width: 100%; margin: auto;}

.jp-section.section-2   {padding-top: 0}
.jp-map-container h2    {width: 480px; max-width: 100%;}
.key                    {display: flex; gap:15px;}
.key span               {width: 24px; height: 24px; border-radius: 24px; border:1px solid #ffffff; display: block; background-color: var(--lightBlue); margin-right: 5px; box-shadow: 0 0 2px rgba(0,0,0,0.3);}
.key p                  {display: flex; margin: 0 !important; align-items: center; font-weight: 700}
.jp-map                 {position: relative; margin-bottom: 40px; margin-top: -150px; max-width: 100%;}
.marker-container       {position: absolute; cursor: pointer; z-index: 2}
.dot,
.marker                 {background-color: var(--pink); width: 24px; height: 24px; border-radius: 24px; border:1px solid #ffffff; display: flex; justify-content: center; align-items: center; font-weight: 700; color: #000000; font-size: 13px; box-shadow: 0 0 4px rgba(0,0,0,0.3); transition: 0.3s ease-out}
.marker-text            {background-color: #ffffff; padding: 10px 15px; position: absolute; top:50%; transform: translateY(-50%); left: 34px; width: max-content; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-bottom: 4px solid var(--pink); opacity: 0; visibility: hidden; transform: translateY(-15px); transition: 0.3s ease-out}
.marker-text p          {font-size: 14px; line-height: 1.3em; margin: 4px 0}
.marker-1               {left: 581px; top: 94px;}
.marker-2               {left: 576px; top: 235px;}
.marker-3               {left: 530px; top: 369px;}
.marker-4               {left: 449px; top: 389px;}
.marker-5               {left: 338px; top: 400px;}
.marker-6               {left: 135px; top: 294px;}
.marker-7               {left: 157px; top: 311px;}
.marker-8               {left: 47px;  top: 315px;}

.marker-8 .marker-text  {left: auto; right: calc(100% + 10px)}

.marker-9    {top: 294px; left: 38px;}
.marker-10   {top: 338px; left: 49px;}
.marker-11   {top: 317px; left: 87px;}
.marker-12   {top: 280px; left: 113px;}
.marker-13   {top: 334px; left: 173px;}

.marker-9 .marker,
.marker-10 .marker,
.marker-11 .marker,
.marker-12 .marker,
.marker-13 .marker              {background-color: var(--lightBlue);}

.dot    {width: 11px; height: 11px; position: absolute; left: 119px; top: 341px; z-index: 10}

.line-2-4      {border: 1px dashed var(--navy2); width: 180px; position: absolute; right: 105px; top: 319px; transform: rotate(130deg); z-index: 1; opacity: 0;}
.line-7-8      {border: 1px dashed var(--navy2); width: 89px; position: absolute; left: 70px; top: 324px; z-index: 19; opacity: 0;}

.kyu-line-1     {position: absolute; left: 124px; top: 302px; width: 1px; height: 40px; background-color: #BEBEBE}
.kyu-line-2     {position: absolute; left: 135px; top: 307px; width: 1px; height: 40px; background-color: #BEBEBE; transform: rotate(31deg);}
.kyu-line-3     {position: absolute; left: 144px; top: 316px; width: 1px; height: 40px; background-color: #BEBEBE; transform: rotate(61deg);}
.kyu-line-4     {position: absolute; left: 146px; top: 321px; width: 1px; height: 51px; background-color: #BEBEBE; transform: rotate(91deg);}

.line-7-8.active,
.line-2-4.active     {opacity: 1;}
.marker-2.active .marker,
.marker-4.active .marker,
.marker-7.active .marker,
.marker-8.active .marker    {background-color: var(--navy2); transform: scale(1.2); color: #ffffff; z-index: 20}

.marker-8.active    {z-index: 20}

.new-plant     {position: absolute; top: 351px; left: -50px;}

.no-hover               {pointer-events: none}

.marker-container:hover                {z-index: 50}
.marker-container:hover .marker-text   {opacity: 1; visibility: visible; transform: translateY(-50%);}
.marker-container:hover .marker        {transform: scale(1.2); background-color: var(--navy2); color: #ffffff}

/* SECTION 3 */
.jp-section-navy	               {background-color:var(--navy2);}
#tvn-content .jp-section-navy p,
#tvn-content .jp-section-navy h2,
#tvn-content .jp-section-navy .blockquote-container blockquote p  {color: #ffffff !important}
.jp-section-navy blockquote         {background-color: transparent !important; width: 590px;}

.blockquote-container-column-padded          {}
.blockquote-container-column-padded .lines   {padding-right: 90px;}
.section-3 .blockquote-container-column-left {padding-top: 80px;}

/* SECTION 4 */
.section-4                  {padding-bottom: 0}
.jp-graph-container-1       {width: 960px; max-width: calc(100% - 40px); margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 60px;}
.jp-graph-1-source          {width: 861px; margin: 30px auto 0; max-width: 100%;}
.jp-graph-1-source p        {line-height: 14px !important;}

.animation-column-left,
.animation-column-right    {flex: 1; flex-shrink: 0; position: relative; padding: 20px;}

.page-2 .article-image      {margin-top: 20px}

.section-4-bottom           {padding-bottom: 50px;}

.section-5 .animation-column-left {display: flex; justify-content: center; align-items: center;}

.jp-graph-2-container   {width: 780px; max-width: calc(100% - 40px); margin:25px auto 50px;}


.page-2 #jplottie1    {position: absolute; top: -80px; right: 120px; width: 771px; height: auto;}
.page-2 #jplottie2    {position: absolute;left: 0; right: auto; top: auto; bottom: 60px; width: 771px; height: auto;}
.page-2 #jplottie3    {position: absolute; right: 50%; margin-right: -660px; bottom: -96px; width: 280px; height: auto}
.page-2 #jplottie4    {position: relative; left: auto; top: auto; right: auto; width: 861px; max-width: 100%; height: auto; margin-top: 40px;}
.page-2 #jplottie5    {position: absolute; left: 40px; top: 0; right: auto; width: 962px; height: auto; margin-top: 0;}
.page-2 #jplottie6    {position: absolute; right: 40px; top: 0; width: 1324px; height: auto; margin-top: 0;}
.page-2 #jplottie7    {position: relative; width: 212px; height: auto;}
.page-2 #jplottie8    {position: relative; width: 264px; height: auto;}

/**********************/
/***** ARTICLE 3 *****/
/********************/

.is-section-teal	                        {background-color:var(--teal);}
#tvn-content .is-section-teal p,
#tvn-content .is-section-teal blockquote p,
#tvn-content .is-section-teal blockquote cite,
#tvn-content .is-section-teal h2	       {color: #ffffff !important}


.page-3 .quote                          {background-image:url(/_assets/quotemark-orangeyellow.svg)}
.page-3 .standfirst-container           {background-color: var(--teal);}
.page-3 .article-hero-container:after   {background: rgb(60, 107, 114); background: linear-gradient(0deg, rgba(60, 107, 114, 1) 0%, rgba(60, 107, 114, 0.75) 50%, rgba(60, 107, 114, 0) 100%);}

#islottie1	{position: absolute; right: 95px; top: -290px; width: 1445px; height: auto;}
#islottie2  {position: absolute; bottom: 0; right: 50%; margin-right: -780px; width: 390px; height: auto;}
#islottie3  {position: absolute; bottom: 0; left: 0; width: 430px; max-width: 100%; height: auto}
#islottie4  {position: absolute; bottom: 0; left: 50%; margin-left: -775px; width: 336px; max-width: 100%; height: auto}
#islottie5  {position: absolute; top: -100px; right: 95px; width: 1250px; height: auto}
#islottie6  {position: absolute; bottom: -70px; left: 0; width: 961px; height: auto}


.impact-section.section-1   {position: relative; overflow: hidden;}
.impact-section.section-2   {padding-bottom: 200px;}
.impact-section.section-3   {position: relative; overflow: hidden;}

.three-stats            {display: flex; justify-content: center;}
.ts-stat                {width: 33.333%; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 0 15px;}
.ts-stat p              {margin-bottom: 0 !important}
.ts-stat h4             {font-size: 48px; color: var(--teal); margin: 0.25em 0 !important}
.ts-stat h4 span        {color:var(--orangeyellow);}
.ts-stat lottie         {width: 72px; height: auto}
.ts-stat:nth-child(2)   {border-left: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6}

.tower-block                        {display: flex; gap:60px; align-items: center; margin: 50px 0}
#tvn-content .tower-block h4        {font-size: 45px; color: var(--teal);}
#tvn-content .tower-block h4 span   {color:var(--orangeyellow);}
.tb-left                            {width: 246px; flex-shrink: 0}

.furnace-graphic    {width: 634px; max-width: 100%; margin: 40px auto}


/**********************/
/***** ARTICLE 4 *****/
/********************/

.main-markets-section   {padding: 60px 0}

.centre-col {width: 760px; max-width: 100%; padding: 0 20px; flex-shrink: 0}

.graphic-container .cols .graphic-col   {flex: 1;}
.graphic-container .article-inner       {flex-shrink: 0}

.page-4 hr.grey         {border-color: #156C86}
.page-4 hr.orangeyellow {border-color: #D1937A}

.page-4 .cg-section.dark hr.grey         {border-color: #B4DDEA}

.page-4 .article-hero-container:after   {background: rgb(21, 108, 134); background: linear-gradient(0deg, rgba(21, 108, 134, 1) 0%, rgba(21, 108, 134, 0.75) 50%, rgba(21, 108, 134, 0) 100%);}
.page-4 .standfirst-container           {background-color: #156C86}

.page-4 p.source    {line-height: 1.4em !important}

/* MAIN MARKETS */
.main-markets                               {margin: 70px 0 0 0}

.cg-section.light .lines,
.cg-big-pie .lines,
.main-markets .lines                        {padding: 15px 10px 0 0}

.cols.cols-main-markets                     {justify-content: center; gap: 26px; margin-top: 40px; max-width: calc(100% - 40px); margin-left: auto; margin-right: auto}
.cols.cols-main-markets .col                {width: 276px;}
.main-markets .mm-inner                     {text-align: center}
#tvn-content .main-markets .mm-inner h3     {font-size: 40px; margin-bottom: 0.25em}
.main-markets .mm-inner p                   {line-height: 1.7em}
.main-markets p.source                      {margin-bottom: 0 !important}
.mm-text                                    {margin-top: 15px;}

.cg-section.dark                            {padding: 70px 0 0; background-color: #156C86}

#tvn-content .ag-section.dark h2,
#tvn-content .ag-section.dark p,
#tvn-content .ag-section.dark blockquote p,
#tvn-content .ag-section.dark blockquote cite,
#tvn-content .cg-section.dark h2,          
#tvn-content .cg-section.dark p             {color: #ffffff !important;}

.ag-section.dark blockquote {background-color: transparent !important}

#tvn-content .cg-section.light p:last-child,
#tvn-content .cg-section.dark p:last-child  {margin-bottom: 0 !important}
#tvn-content .cg-section.dark .blockquote-container blockquote p    {color: #ffffff !important}
#tvn-content .cg-section.dark blockquote .quote {background-image: url(/_assets/quotemark-4.svg)}

#tvn-content .cg-section.dark .blockquote-container blockquote  {background-color: transparent !important}

.cg-big-pie         {margin: 60px 0 40px}
.cg-pie-container   {display: flex; justify-content: center; margin:20px auto 50px auto; width: 1155px; max-width: 100%;}
.cg-pie-container #cglottie4    {position: relative; width: 810px; max-width: 100%; left: 50%; margin-left: -877px;}

.section-2 .mtb     {margin-top: 30px; margin-bottom: 30px}

.glass-bg-section                   {padding: 120px 0; position: relative; overflow: hidden}
.glass-bg-section:after             {position: absolute; inset: 0; content: ''; background: rgb(21, 108, 134); background: linear-gradient(0deg, rgba(21, 108, 134, 1) 0%, rgba(21, 108, 134, 0.6) 50%, rgba(21, 108, 134, 1) 100%);}
.glass-bg-section .article-inner    {position: relative; z-index: 5}

.glass-bg-image     {position: absolute; top: -10%; bottom: -10%; left: -10%; right: -10%;  background-size: cover; background-position: center;}

.cg-section.light   {padding: 70px 0; background-color: #FDFAF8}

.cg-section-solar   {padding: 70px 0 40px}

.cg-section.section-2 #cglottie5    {width: 1600px; height: auto; position: absolute; right: 50px; top: 0}
.cg-section.section-3               {overflow: hidden}
.cg-section.section-3 #cglottie7    {width: 1600px; height: auto; position: absolute; right: 20px; top: -100px}
.cg-section.section-3 #cglottie8    {width: 1600px; height: auto; position: absolute; left: 20px; bottom: 0}

.cg-lottie-6-container                  {margin-bottom: 60px;}
.graphic-container .cols .graphic-col   {position: relative}

.section-4  {overflow: hidden}
.section-4 .blockquote-container-column-left #cglottie9 {width: 1600px; height: auto; position: absolute; right: 130px; top: -370px}
.section-4 .blockquote-container-column-right #cglottie10 {width: 1600px; height: auto; position: absolute; left: 100px; top: -230px}

.page-4 .blockquote-container-column-right  {padding-left: 20px;}

#pmLink     {visibility: hidden}


/**********************/
/***** ARTICLE 5 *****/
/********************/

.ag-section.dark .article-inner p   {position: relative; z-index: 3}

.advanced-glass-section-1   {padding: 60px 0; overflow: hidden; position: relative;}

#aglottie1  {width: 500px; height: auto; position: absolute; bottom: 0; right: 50%; margin-right: -900px;}
#aglottie2  {width: 748px; height: auto; margin: auto; max-width: 100%; transform: translateX(-70px); margin-top: 40px}
#aglottie3  {width: 410px; height: auto; margin: auto; max-width: 100%; position: absolute; left: 50%; margin-left: -850px; top: 640px}
#aglottie4  {width: 730px; height: auto; position: relative; z-index: 1}
#aglottie5  {width: 547px; height: auto; position: absolute; top: -30px; left: 50%; margin-left: -950px;}
#aglottie6  {width: 459px; height: auto; position: absolute; bottom: 0px; right: 50%; margin-right: -850px;}
#aglottie9  {width: 1250px; height: auto; margin:60px auto; max-width: calc(100% - 40px);}

.page-5 .article-hero-container:after   {background: rgb(21, 108, 134); background: linear-gradient(0deg, rgba(43, 134, 172, 1) 0%, rgba(43, 134, 172, 0.75) 50%, rgba(43, 134, 172, 0) 100%);}
.page-5 .standfirst-container           {background-color: #2B86AC}

.advanced-glass-section-2       {padding-bottom: 40px; max-width: calc(100% - 40px); margin-left: auto; margin-right:auto}
.advanced-glass-section-2 h2    {width: 610px; max-width: 100%; margin: 0 auto;}
.advanced-glass-section-2 p     {width: 680px; max-width: 100%; line-height: 1.5em; margin: 30px auto}
.advanced-glass-section-2 p.source  {margin-bottom: 50px;}
.ag-section.dark                {padding: 70px 0; background-color: #2B86AC}

.advanced-glass-section-3           {overflow: hidden; position: relative;}
.advanced-glass-section-3 .quote    {background-image: url(/_assets/quotemark-5.svg);}

.ag-section.dark hr.grey            {border-color: #BDD8E3}
.ag-section.dark hr.orangeyellow    {border-color: #E5A732}

.blockquote-container-column-left .lines   {width: calc(100% - 130px);}

.aglottie4-container            {position: absolute; right: 0; bottom: 150px;}
.aglottie4-container:before     {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; content: ''; display: block; background: rgba(43, 134, 172, 10); background: linear-gradient(90deg,rgba(43, 134, 172, 0.9) 0%, rgba(43, 134, 172, 0) 100%);}

.advanced-glass-section-4   {padding: 70px 0; overflow: hidden;}

.ag-car-chart-container     {text-align: center; margin: 70px auto 60px; max-width: calc(100% - 40px);}
.ag-car-chart               {display: flex; justify-content: center; flex-direction: column; align-items: center;}
.ag-chart-flex              {display: flex; justify-content: center; gap: 40px; margin-top: 30px;}


/**********************/
/***** ARTICLE 6 *****/
/********************/

.article-inner.full         {width: 100%; max-width: 1500px}


.funding-science-section-1   {padding: 60px 0; position: relative;}

.page-6 .article-hero-container:after   {background: rgb(6, 105, 113); background: linear-gradient(0deg, rgba(6, 105, 113, 1) 0%, rgba(6, 105, 113, 0.75) 50%, rgba(6, 105, 113, 0) 100%);}
.page-6 .standfirst-container           {background-color: #066971}

.page-6 .quote      {background-image: url(/_assets/quotemark-6.svg);}
.page-6 hr.grey     {border-color: #066971}
.page-6 hr.orange   {border-color: #DDA360}

.funding-science-section-2          {background-color: #F2F7F7; padding: 60px 0 45px; overflow: hidden;}
.funding-science-section-2 .cols    {gap: 40px; align-items: center}

.column.column-person               {display: flex;}

.cols-jeremy                                 {margin-bottom: 40px;}
.column-jeremy                               {width: 766px; flex-shrink: 0;}
.column.column-person #fslottieJeremy        {}

.cols-hans .column-hans  {width: 697px; flex-shrink: 0;} 

.funding-science-section-3          {position: relative;}

.funding-science-section-3,
.funding-science-section-5          {padding: 60px 0}

.funding-science-section-4          {position: relative; padding: 60px 0}
.funding-science-section-4 p        {position: relative; z-index: 5; color: #ffffff !important; margin: 0 !important}
.funding-science-section-4:after    {background-color: #066971; border-radius: 0 60px 60px 0; display: block; position: absolute; left: 0; top: 0; content: ''; width: 70%; height: 100%;}
.funding-science-section-4 .cols    {align-items: center; justify-content: space-between; gap:60px;}
.funding-science-section-4 .column  {display: flex; justify-content: flex-end; align-items: center; flex: 1}
.funding-science-section-4 .column-inner    {width: 500px; max-width: 100%;}

#fslottie1  {width: 254px; height: auto; position: absolute; right: 50%; top: -300px; margin-right: -700px;}
#fslottie2  {width: 410px; height: auto; position: absolute; left: 50%; margin-left: -800px; top: -300px;}
#fslottie3  {width: 314px; height: auto; position: absolute; right:50%;  margin-right: -700px; bottom: 0;}
#fslottie4  {width: 340px; height: auto; position: absolute; left:50%;  margin-left: -750px; bottom: 100px;}
#fslottie5  {width: 670px; height: auto; flex-shrink: 0; position: relative; z-index: 5}