*				{margin: 0; padding: 0}

body			{background-color: #ffffff; font-family:'Roobert', "sans-serif"; color: #3C4748}

/*footer			{display: none}*/

h1,h2,h3,h4,h5,h6,p,ul,ol {font-family:'Roobert', "sans-serif"; color: #3C4748}

h1				{color: #243508; font-weight: 500; line-height: 0.9em; margin-bottom: 0.75em}

img {
	max-width: 100%;
	height: auto;
}




div.logo img {
	width:100%;
	max-width:initial;
	width: auto;
}

/*.logo			{width: 100px; display: block; position: absolute; right: 38px; top: 0}*/

.inner			{width: 1240px; max-width: 100%; margin: auto; padding: 0 38px; position: relative;}

.main-content	{padding: 30px 0; position: relative;}

.cols			{display: flex; justify-content: space-between}
.col-left		{width: 408px; max-width: 100%; padding-top: 50px; flex-shrink: 1; }
.col-right		{flex: 1; flex-shrink: 0; padding-top: 60px;/*border:1px solid #000;*/}

.logo-2			{width: 273px; display: block;}

header			{position: relative; z-index: 999;}

h1	{font-size: 68px;}

h1 span {font-weight: bold;}

p a			{border-color:#3C4748}
p a:hover	{border-color:#243508}

a.close	{position: absolute; right: 72px; top: 60px; width: 26px; height: 26px; background-image: url(/esg-risk-whitepaper/_assets/icon-close.svg); background-repeat: no-repeat; background-size: cover; cursor: pointer; z-index: 5}

.share-download	{position: absolute; right: 38px; bottom: 80px; display: flex; gap: 24px;}

.share-download a:hover path	{fill:#BFF355 !important}

.hexagon-container			{position: relative; width: 606px; height: 700px; margin: auto}
.hexagon 					{pointer-events: none; opacity:0; position: absolute; width: 257px; height: 297px; transition: 0.65s cubic-bezier(.47,1.64,.41,.8); display: flex; justify-content: center; align-items: center; background-color: #3498db; clip-path: polygon(50% 0%,/* top point */100.1% 25%,/* top right */100% 75%,/* bottom right */50% 100%,/* bottom point */0% 75%,/* bottom left */0% 25%/* top left */);}
.hexagon div				{font-weight: 600; font-size: 17px; color: #3C4748; text-align: center; opacity: 0; visibility: hidden; transition: 0.3s ease-out 0.2s}
.hexagon div span			{width: 20px; height: 20px; display: block; margin: auto; position: relative; margin-top: 15px; transition: 0.3s ease-out}
.hexagon div span:before	{width: 2px; height: 100%; left: 50%; margin-left: -1px; content: ''; background-color: #243508; display: block; position: absolute; transition: 0.3s ease-out}
.hexagon div span:after		{width: 100%; height: 2px; top: 50%; margin-top: -1px; content: ''; background-color: #243508; display: block; position: absolute; transition: 0.3s ease-out}
.hexagon-middle				{width: 70px; height: 80px;  left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #ffffff; z-index: 50; cursor: pointer; pointer-events: all}
.hexagon-middle:before		{content: 'Open'; font-size: 17px; text-align: center; display: block; width: 100%; position: absolute; transition: 0.1s ease-out 0.1s}
.hexagon-middle:hover		{background-color: #BFF355}

.hex1	{background: rgb(191,243,85); background: linear-gradient(225deg, rgba(191,243,85,1) 0%, rgba(130,200,190,1) 75%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 0.6s forwards;}
.hex2	{background: rgb(130,200,190); background: linear-gradient(324deg, rgba(130,200,190,1) 21%, rgba(177,166,255,1) 75%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 0.8s forwards;}
.hex3	{background: rgb(130,200,190); background: linear-gradient(195deg, rgba(130,200,190,1) 0%, rgba(191,243,85,1) 100%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 1s forwards;}
.hex4	{background: rgb(191,243,85); background: linear-gradient(-90deg, rgba(191,243,85,1) 0%, rgba(226,214,207,1) 100%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 1.2s forwards;}
.hex5	{background: rgb(130,200,190); background: linear-gradient(180deg, rgba(130,200,190,1) 0%, rgba(177,166,255,1) 100%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 1.4s forwards;}
.hex6	{background: rgb(226,214,207); background: linear-gradient(45deg, rgba(226,214,207,1) 45%, rgba(177,166,255,1) 100%); mix-blend-mode: multiply; animation: 0.5s fader ease-out 1.6s forwards;}

.hexagon-middle	{animation: 0.5s fader ease-out 1.4s forwards;}

/* BEFORE ANIMATION */
.hex1	{left: 50%; top:53px; transform: translateX(-50%);}
.hex2	{right:46px; top: 127px}
.hex3	{right: 46px; top:275.75px;}
.hex4	{left:50%; bottom:53px; transform: translateX(-50%);}
.hex5	{left: 46px; top:275.75px;}
.hex6	{left:46px; top:127px;}


/* AFTER ANIMATION */
.hexagon-container.animated .hexagon		{width: 225px; height: 260px; pointer-events: all}
.hexagon-container.animated .hexagon div	{opacity: 1; visibility: visible; transition: 0.3s ease-out; transition-delay: 0}

.hexagon-container.animated .hex1		{top:0; left: 50%;}
.hexagon-container.animated .hex2		{right: 0; top:110px;}
.hexagon-container.animated .hex3		{right: 0; top:330px;}
.hexagon-container.animated .hex4		{left: 50%; bottom:0px;}
.hexagon-container.animated .hex5		{left: 0%; top:330px;}
.hexagon-container.animated .hex6		{left: 0%; top:110px;}

.hexagon-container.animated .hexagon-middle			{width: 155px; height: 180px; background-color: #BFF355}
.hexagon-container.animated .hexagon-middle:before	{opacity: 0; visibility: hidden; }

.hexagon-container.animated .hexagon						{}
.hexagon-container.animated .hexagon:hover					{background: #243508; cursor: pointer; transition: none !important}
.hexagon-container.animated .hexagon:hover div				{color: #ffffff;}
.hexagon-container.animated .hexagon:hover div span:before	{background-color: #ffffff}
.hexagon-container.animated .hexagon:hover div span:after	{background-color: #ffffff}

.hexagon.active,
.hexagon-middle.active	{background: #243508;}

.hexagon.active div				{color: #ffffff}
.hexagon.active div span		{transform: rotate(45deg)}
.hexagon.active div span:before	{background-color: #ffffff}
.hexagon.active div span:after	{background-color: #ffffff}

/* SLIDER */
.slide-in-panel {
	width: 40vw;
	min-width: 600px;
	/*height: 100vh;*/
	position: fixed;
	left: -100%;
	top: 81px;
	bottom: 0;
	padding: 45px 75px 45px 45px;
	overflow-y: auto;
	transition: 0.5s ease-out;
	z-index: 999;
}

.slide-in-panel h2	{font-size: 42px; font-weight: 500; color: #243508; margin-bottom: 0.75em; padding-right: 30px;}
.slide-in-panel h3	{color: #243508; font-weight: 700; font-size: 20px; margin:1.5em 0 0.5em 0}
.slide-in-panel p,
.slide-in-panel ul	{font-size: 15px; line-height: 1.3em; color: #243508}
.slide-in-panel ul	{margin:1.5em 1em 0.5em;}
.slide-in-panel ul li	{margin-bottom: 1em}

/* CASE STUDY SLIDE IN */
.slide-in-panel-case-studies {
	background-color: #F0EAE7;
	left: -1200px;
	z-index: 1000;
	width: 100%;
	max-width: 1180px;
	/*min-height: 100vh;*/
}

.slide-in-panel-case-studies .inner	{margin: 0; padding: 0}

.slide-in-panel.active	{left: 0}
.slide-in-panel-case-studies.active	{left: 0;}


.slide-in-panel.one		{background: rgb(191,243,85); background: linear-gradient(225deg, rgba(191,243,85,1) 0%, rgba(130,200,190,1) 75%);}
.slide-in-panel.two		{background: rgb(130,200,190); background: linear-gradient(324deg, rgba(130,200,190,1) 21%, rgba(177,166,255,1) 75%);}
.slide-in-panel.three	{background: rgb(130,200,190); background: linear-gradient(195deg, rgba(130,200,190,1) 0%, rgba(191,243,85,1) 100%);}
.slide-in-panel.four	{background: rgb(191,243,85); background: linear-gradient(-90deg, rgba(191,243,85,1) 0%, rgba(226,214,207,1) 100%);}
.slide-in-panel.five	{background: rgb(130,200,190); background: linear-gradient(180deg, rgba(130,200,190,1) 0%, rgba(177,166,255,1) 100%);}
.slide-in-panel.six		{background: rgb(226,214,207); background: linear-gradient(45deg, rgba(226,214,207,1) 45%, rgba(177,166,255,1) 100%);}

.slide-in-panel .accordion	{margin:40px 0 30px 0}
.slide-in-panel hr			{border-color:#243508; border-width: 0.5px; margin: 40px 0; display: block}

/* ACCORDION */
.accordion												{margin-top: 50px;}
.accordion .accordion-item								{margin-bottom:6px; margin-bottom: 5px;}
.accordion .accordion-item h3							{font-size:18px; color: #243508; font-weight: 500; position: relative; cursor: pointer; line-height: 1.4em; padding: 0 40px 10px 0; margin: 0}
.accordion .accordion-item h3 span.plus 				{width:20px; height: 20px; position:absolute; right:2px; top:2px; display: block;}
.accordion .accordion-item h3 span.plus:before			{width:2px; height: 100%; background-color: #333333; position: absolute; left: 10px; top: 0; content: '';}
.accordion .accordion-item h3 span.plus:after			{width:2px; height: 100%; background-color: #333333; position: absolute; left: 10px; top: 0; content: ''; transform: rotate(90deg);}
.accordion .accordion-item.active h3 span.plus:after	{}
.accordion .accordion-item.active h3 span.plus:before	{display:none;}
.accordion .accordion-expanded							{display:none; padding:20px 75px 40px 45px; background-color: rgba(255,255,255,0.87); margin-left: -45px; width: calc(100% + 120px); margin-bottom: 20px;}
.accordion .accordion-expanded p:last-child				{margin-bottom:0;}



/* PANEL LISTING */
.floater-expander .cols			{display: block; width: calc(100% + 22px); margin-left: -11px; font-size: 0}
.floater-expander .cols .col	{padding: 11px; width: 235px; display: inline-block}
.f-left							{float: left}
.listing-float-panel			{padding: 20px; height: 213px; display: flex; flex-direction: column; justify-content: space-between; background-color: #ffffff; position: relative; cursor: pointer;}
.listing-float-panel p			{font-size: 22px; font-weight: 500}

.listing-float-panel.active 						{background-color: #2c5e4f;}
.listing-float-panel.active p 						{color:#ffffff;}
.listing-float-panel.active	.flat-plus-btn			{border-color: #ffffff;}
.listing-float-panel.active	.flat-plus-btn:before	{display:none;}
.listing-float-panel.active	.flat-plus-btn:after	{background-color:#ffffff;}

/*.listing-float-panel:after 		{width: 0; height: 0; border-style: solid; border-width: 20px 21px 0 21px; border-color: #2c5e4f transparent transparent transparent; content: ''; position: absolute; bottom: -20px; left: 50%; margin-left: -24px; display: none;}*/
/*.listing-float-panel.active:after	{display:block;}*/

/* EXPANDED PANEL */
.floater-expanded-content		{padding: 40px; background-color: #ffffff; float: left; margin-top: 10px; width: 100%; display: flex; align-items: flex-end;}
.floater-expanded 				{display:none; float: left; padding: 11px}
.floater-expanded.open			{display:block; width: 940px; max-width: 100%;}

.fec-inner	{width: 660px; max-width: 100%; flex-shrink: 0}

.blockquote-container			{width: 306px; flex-shrink: 0; background-color: #BFF355; padding: 80px 30px 60px; position: relative; margin-left: 50px;}
.blockquote-container:before	{width: 29px; height: 20px; background-image: url(/esg-risk-whitepaper/_assets/quotemark.svg); content: ''; position: absolute; left: 30px; top: 20px;}
.blockquote-container p			{font-weight: 300;}
.blockquote-container cite		{font-size: 15px; font-weight: 600; font-style: normal; line-height: 1.2em}

/* PLUS BUTTON */
.flat-plus-btn			{width: 20px; height: 20px; display: block; margin: 0; position: relative; margin-top: 15px; transition: 0.3s ease-out}
.flat-plus-btn:before	{width: 2px; height: 100%; left: 50%; margin-left: -1px; content: ''; background-color: #243508; display: block; position: absolute; transition: 0.3s ease-out}
.flat-plus-btn:after	{width: 100%; height: 2px; top: 50%; margin-top: -1px; content: ''; background-color: #243508; display: block; position: absolute; transition: 0.3s ease-out}

.box-1	{background: rgb(130,200,190); background: linear-gradient(180deg, rgba(130,200,190,1) 0%, rgba(177,166,255,1) 100%);}
.box-2	{background: rgb(191,243,85); background: linear-gradient(-90deg, rgba(191,243,85,1) 0%, rgba(226,214,207,1) 100%); }
.box-3	{background: rgb(226,214,207); background: linear-gradient(45deg, rgba(226,214,207,1) 45%, rgba(177,166,255,1) 100%);}
.box-4	{background: rgb(130,200,190); background: linear-gradient(195deg, rgba(130,200,190,1) 0%, rgba(191,243,85,1) 100%);}
.box-5	{background: rgb(130,200,190); background: linear-gradient(324deg, rgba(130,200,190,1) 21%, rgba(226,214,207,1) 75%);}
.box-6	{background: rgb(130,200,190); background: linear-gradient(180deg, rgba(130,200,190,1) 0%, rgba(177,166,255,1) 100%);}
.box-7	{background: rgb(191,243,85); background: linear-gradient(-90deg, rgba(191,243,85,1) 0%, rgba(226,214,207,1) 100%); }
.box-8	{background: rgb(226,214,207); background: linear-gradient(45deg, rgba(226,214,207,1) 45%, rgba(177,166,255,1) 100%);}
.box-9	{background: rgb(130,200,190); background: linear-gradient(195deg, rgba(130,200,190,1) 0%, rgba(191,243,85,1) 100%);}
.box-10	{background: rgb(130,200,190); background: linear-gradient(324deg, rgba(130,200,190,1) 21%, rgba(226,214,207,1) 75%);}


.box-1.active,
.box-2.active,
.box-3.active,
.box-4.active,
.box-5.active,
.box-6.active,
.box-7.active,
.box-8.active,
.box-9.active,
.box-10.active {background: #243508}
/************************/
/****** ANIMATION ******/

.logo-2		{opacity: 0; animation: 0.3s topin ease-out 0.2s forwards;}
.logo		{opacity: 0; animation: 0.3s topin ease-out 0.4s forwards;}
.col-left	{opacity: 0; animation: 0.3s topin ease-out 0.6s forwards;}


.authors {display: flex; margin-top: 20px; }
.authors .authors-col.left {padding-right: 5px; }
.authors .authors-col.right {width: 84%;}

.authors .authors-col span {display: block; width: 100%; margin-bottom: 2px; font-size: 15px; line-height: 1.3em; color: #243508; }

.authors .authors-col span a {color: #243508; text-decoration: underline;}


.share-popup-v2 {position: absolute; top: 0;}

/* Should be in some generic ESG CSS file. */

ul.esg-submenu {
	list-style: none;
}

ul.esg-submenu li {
}

ul.esg-submenu li a {
	position:relative;
	display: inline-block;
	width: 100%;
	text-align: center;
	border: 0;
}

ul.esg-submenu li:not(.active) a {
	background-color: rgba(var(--hl-light-green-rgb), 0.3);
}

ul.esg-submenu li a:hover {
	background-color: var(--hl-light-green)!important;
}

ul.esg-submenu li.active a:after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 21px;
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	margin-left: -12px;
	background-color: var(--hl-light-green);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}


@keyframes topin {
	0%		{opacity: 0; transform: translateY(-10px)}
	100%	{opacity: 1; transform: translateY(0px)}
	
}


@keyframes fader {
	
	0%		{opacity: 0}
	100%	{opacity: 1}
	
}

/************************/
/****** RESPONSIVE ******/

@media (max-width:1330px) {
	
	.slide-in-panel-case-studies	{width: calc(100% - 180px)}
	
	.fec-inner				{width: 68%;}
	.blockquote-container	{width: 38%; margin-left: 5%;}
	
}

@media (max-width:1260px) {
	
	.col-left	{padding-right: 30px;}
	.col-right	{margin-right: 0}
	
}

@media (max-width:1000px) {
	
	h1	{font-size: 55px;}
	
	.floater-expanded-content	{flex-direction: column}
	.fec-inner					{width: 100%;}
	.blockquote-container		{width: 100%; margin: 40px 0 0 0}
	
}

@media (max-width:940px) {
	
	h1			{font-size: 68px;}
	.cols		{flex-direction: column;}
	.col-left	{width: 100%; margin-bottom: 40px; padding: 20px 0 0 0;}
	
	/*.logo		{position: relative; left: 0; margin-bottom: 35px;}*/
	
	/*.main-content	{padding-top: 0}*/
	
	.hexagon-container	{max-width: 100%;}
	
}

@media (max-width:682px) {
	
	.hexagon-container	{height: 344px; width: 296px; max-width: unset}
	.hexagon			{width: 148px; height: 172px;}
	.hexagon-middle		{width: 70px; height: 80px;}
	
	.hex1	{top: 0}
	.hex2	{right: 0; top: 43px;}
	.hex3	{right: 0; top: 128.75px;}
	.hex4	{bottom: 0}
	.hex5	{left: 0; top: 128.75px;}
	.hex6	{left: 0; top: 43px;}
	
	.hexagon-container.animated					{height: auto}
	.hexagon-container.animated					{display: flex; flex-direction: column;}
	.hexagon-container.animated .hexagon		{position: relative; left: auto; top: auto; bottom: auto; right: auto; transform: none; margin-bottom: -75px;}
	.hexagon-container.animated .hexagon-middle {order: 7; margin: 50px 0}
	
	.hex2,
	.hex4,
	.hex6	{margin-left: auto}
	
	
}

@media (max-width:600px) {
	
	a.close			{right: 45px;}
	.slide-in-panel	{width: 100%; min-width: unset}
	.slide-in-panel .close			{top: 55px;}
	.slide-in-panel-case-studies	{padding-left: 45px; padding-right: 45px;}

	.floater-expanded-content	{width:calc(100% + 90px); margin-left: -45px; max-width: unset; padding: 45px}
	
	.slide-in-panel	{padding-right: 45px;}
	.accordion .accordion-expanded	{width: calc(100% + 90px); margin-left: -45px; padding-right: 45px;}
	
}

@media (max-width: 490px) {
	
	.share-download	{bottom: 0}
	
}

@media (max-width: 460px) {
	
    h1 {font-size: 14.5vw;}	
}

@media (max-width: 414px) {
	
	a.close							{right: 35px;}
	.floater-expanded-content		{width:calc(100% + 70px); margin-left: -35px; max-width: unset; padding: 35px}
	.slide-in-panel					{padding-right: 35px; padding-left: 35px;}
	.accordion .accordion-expanded	{width: calc(100% + 70px); margin-left: -35px; padding-right: 35px; padding-left: 35px;}
	
}

@media (max-width:374px) {
	
	.inner				{padding: 0 20px;}
	.col-right			{width: calc(100% + 40px); margin-left: -20px;}
	
	.accordion .accordion-expanded	{}
	
}