/* Hero Element */

body.page-template-page-ginas-report .first-container {
	padding-top: 90px;
}

body.page-template-page-ginas-report .report-image-header {
	position: absolute;
	top: -1px;
	left: 0;
	right: 54%;
	height: 100%;
}

body.page-template-page-ginas-report .report-image-header img {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

body.page-template-page-ginas-report .report-header {
	background: #f8f9f7;
	min-height: 668px;
	padding-bottom: 24px;
}

body.page-template-page-ginas-report .report-header::after {
	content: "";
	display: block;
	width: 100%;
	height: 24px;
	background-image: url("/wp-content/themes/niftic/template-parts/gina-report-modules/CW_GMH_color_bar.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.sponsors-area {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 50px;
	align-items: center;
	padding: 20px 0px;
}

.sponsors-logos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.ginas-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 0px;
}

.ginas-tags .label {
	display: inline-block;
    background: #E9EADE;
    border-radius: 0px;
    margin-right: 8px;
    color: #302A2C;
    font-family: 'Figtree';
    font-size: 16px;
    line-height: 26px;
    padding: 4px 8px;
}

.ginas-label {
	background: #d9d2bd !important;
}

.ginas-label-primary {
	background: #7d5140 !important;
	color: #ffffff !important;
}

body.page-template-page-ginas-report button {
    display: inline-block;
    border: none;
    transition: all .3s ease;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
	body.page-template-page-ginas-report .report-header::after {
		display: none;
	}
	body.page-template-page-ginas-report .report-image-header {
		position: relative;
		top: 0px;
		margin-top: -90px;
		left: -15px;
		height: 436px;
		width: calc(100% + 30px);
	}
	body.page-template-page-ginas-report .report-image-header::after {
		content: "";
		display: block;
		width: 100%;
		height: 16px;
		/* background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 1442 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M138.51 0.497314H0.250977V24.4973H138.51V0.497314Z' fill='%23387A6E'/%3E%3Cpath d='M570.141 0.497314H138.51V24.4973H570.141V0.497314Z' fill='%2347966E'/%3E%3Cpath d='M1154.62 0.497314H570.141V24.4973H1154.62V0.497314Z' fill='%2370B566'/%3E%3Cpath d='M1441.25 0.497314H1154.62V24.4973H1441.25V0.497314Z' fill='%23A8D166'/%3E%3C/svg%3E%0A"); */
		background-image: url("/wp-content/themes/niftic/template-parts/gina-report-modules/CW_GMH_color_bar.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
	}
	.type-xl {
		font-size: 24px;
		line-height: 34px;
		letter-spacing: -1px;
	}
	.container {
		max-width: none !important;
	}
}

.download-anchor-link {
	color: #387a6e;
	position: relative;
}
.download-anchor-link h4 {
	position: relative;
	color: #387a6e;
	padding-right: 29px;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -1px;
	display: inline-block;
}
.download-anchor-link h4::after {
	content: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.3872 8.27344L9.88721 17.5304L0.387208 8.27344L2.28721 6.42204L8.58156 12.5554L8.58156 0.891061L11.2686 0.891061L11.2686 12.4816L17.4872 6.42204L19.3872 8.27344Z' fill='%23387A6E'/%3E%3Crect x='1.36963' y='19.6973' width='16.9977' height='2.57267' fill='%23387A6E'/%3E%3C/svg%3E%0A");
	position: absolute;
	right: 0;
	top: 4px;
	display: block;
}

.smaller-text p {
	font-size: 14px;
}

.ginas-report-image {
	text-align: center;
}

.clear-float {
	clear: both;
}

.methane-problem-text {
	width: 50%;
	/* min-width: 280px; */
	vertical-align: top; /* TODO: CHECK IF NECESSARY Fix for different height elements*/
	float: left;
	padding: 0px 8px;
}

.methane-sources::before {
	content: "";
	background: linear-gradient(
			0deg,
			rgba(204, 227, 240, 0.25),
			rgba(204, 227, 240, 0.25)
		),
		#ffffff;
}
.methane-perks {
	/* background: rgba(79, 199, 153, 0.1); */
	background: url("/wp-content/themes/niftic/ginas-report-chart-assets/bg-images/bubble_background.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-clip: padding-box;
	float: left;
	position: relative; /* to fit absolutely positioned bubble wrapper to this parent height */
}

.perks-text-left {
	width: 50%;
	float: left;
	margin-right: 30px;
}

.perks-text-right {
	width: 50%;
	margin-left: 30px;
	float: right;
}

.perks-left {
	width: 55%;
	float: left;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -50px;
}

.perks-first {
	margin-top: 0px;
}

.perks-right {
	width: 55%;
	float: right;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -50px;
}

.image-stretch {
	width: 100%;
}

.methane-problem-parent {
	display: flex;
}

.methane-sources-parent {
	display: flex;
	justify-content: space-evenly;
	gap: 20px 10px;
}

.methane-section {
	padding: 3% 12%;
}

.methane-section h1 {
	padding: 8px 0px;
}

.methane-accordions-bg h4 {
	padding-bottom: 30px;
}

li:not(.menu-item) {
	list-style-type: disc;
	padding-left: 25px;
}
ul:not(.menu):not(.sub-menu) {
	margin-block-end: 1em;
}
.bullet-padding {
	padding: 30px;
}
.small-font-bullets li:not(.menu-item) {
	font-size: 16px;
}

.left-text-wider {
	width: 70%;
	float: left;
}
.right-text-narrower {
	width: 35%;
	float: right;
	background-color: #ffffff;
	padding: 30px;
}

.left-text-narrower {
	width: 35%;
	float: left;
}
.right-text-wider {
	width: 65%;
	float: right;
	padding: 30px;
}

.ginas-text p {
	font-size: 16px;
}

/* Agriculture & food systems under the microscope */
.introduction-parent {
	display: flex;
	gap: 0px 60px;
	background: linear-gradient(0deg, #f6f2f0, #f6f2f0), rgba(219, 203, 197, 0.3);
	background-clip: padding-box;
}

/* Methane in the food & ag system */
.methane-sources-bg {
	background: #dadbce;
	background-clip: padding-box;
}

/* Innovations that reduce food & ag emissions bring a wealth of benefits */
.innovations-button {
	background: none;
	border: 2px solid #597a25;
	text-transform: unset !important; /* prevent letters from being all uppercase */
	float: left;
}
.innovations-button.active {
	background: #597a25;
	color: #ffffff;
}
.button-group-text {
	float: left;
	padding-right: 25px;
	padding-top: 10px;
}
.innovation-chart-parent {
	display: flex;
	justify-content: center;
	gap: 0px 30px;
	clear: both;
}
.methane-benefits-bg-image {
	background: url("/wp-content/themes/niftic/ginas-report-chart-assets/bg-images/Innovations that reduce emissions bring wealth of benefits.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	clear: both;
}
.benefits-text h2 {
	color: #ffffff;
}
.benefits-bg {
	background: #f0f0f0;
}

/* Investment must increase rapidly */
.graphic-desktop {
	display: block;
}
.graphic-mobile {
	display: none;
}

/* Innovations drive emissions reductions */
.methane-innovations-bg {
	background: #e9eade;
	background-clip: padding-box;
}
.methane-innovations-bg-image {
	background: url("/wp-content/themes/niftic/ginas-report-chart-assets/bg-images/Innovations Drive Methane Emissions Reductions.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.text-on-image {
	padding: 5%;
	width: 50%;
}
.methane-innovations-category-parent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	/* justify-items: center; */
	/* background: url("/wp-content/themes/climate-works/ginas-report-chart-assets/bg-images/grid-background.jpg");  */
	gap: 5px 5px;
}
.methane-innovations-category {
	background-color: #ffffff;
	/* background: url("/wp-content/themes/climate-works/ginas-report-chart-assets/bg-images/grid-background-dark.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center; */
	padding: 17px 20px 0px;
}

/* Accordions */
.methane-accordions-bg {
	background: #f8f9f4;
}
.accordion-text {
	width: 25%;
	float: left;
	padding: 2px;
}
/* .accordion-chart {
  width: 90%;
} */
.accordion-text-full-width-desktop {
	width: 70%;
	/* float: left; */
	padding: 2px;
}
.accordion-text-full-width-mobile {
	width: 100%;
	/* float: left; */
	padding: 2px;
	display: none;
}
.accordion-flex-wrapper {
	width: 75%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.accordion-flex-wrapper-top {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
	/* color: #ffffff; */
	cursor: pointer;
	padding: 0px 18px 0px 0px;
	width: 100%;
	/* text-align: left; */
	border: none;
	outline: none;
	transition: 0.4s;
	margin: 5px 0px;
	text-transform: unset !important; /* prevent letters from being all uppercase */
	background: #ece9de;
	display: flex;
	justify-content: space-between;
}
.accordion p {
	float: left;
	/* padding: 0; */
	margin: 15px;
	color: #000000;
}
.accordion-img {
	padding: 5px 20px 0px 21px;
	float: left;
}
.accordion.active,
.accordion:hover {
	background-color: #e1dbc6;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.accordion-right:after {
	content: "\002B"; /* Unicode character for "plus" sign (+) */
	font-size: 35px;
	color: #000000;
	float: right;
	margin-left: 5px;
	margin-top: 6px;
}
.accordion-right.active:after {
	content: "\2212"; /* Unicode character for "minus" sign (-) */
}
.accordion-section-title {
	float: left;
}
.accordion-toggle-button {
	float: right;
}
.accordion-group {
	padding-top: 30px;
}
.expand-button {
	background-color: transparent;
	text-decoration: underline;
	text-transform: unset !important;
	font-size: 17px;
	padding: 17px 0px 0px 0px;
}
.accordion-left p {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.maturity-panel {
	display: none;
}
.accordion-left {
	min-width: 0;
}

/* Policymakers have the tools to take action now */
.methane-public-inv-parent {
	display: flex;
}
.methane-public-inv-left {
	width: 60%;
	padding: 0px 8px;
}
.methane-public-inv-right {
	width: 40%;
	padding: 0px 8px;
}
.public-investment-background {
	background: url("/wp-content/themes/niftic/ginas-report-chart-assets/bg-images/Policymakers have the tools to take action now.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 1500px) {
	.methane-problem-parent,
	.introduction-parent {
		display: inline-block;
	}
	.left-text-wider,
	.right-text-narrower {
		width: 100%;
	}
	.methane-sources-parent {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1200px) {
	.perks-left,
	.perks-right {
		width: 80%;
		margin-top: 30px;
	}
	.text-on-image {
		width: 80%;
	}
	.methane-innovations-bg-image {
		background-position: left;
	}
	.methane-innovations-category-parent {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.accordion-flex-wrapper-top {
		flex-wrap: wrap;
	}
	.accordion-text {
		width: 50%;
	}
	.accordion-flex-wrapper {
		width: 50%;
	}
	.accordion-text-full-width-desktop {
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	.methane-section {
		padding: 3% 8%;
	}
	.methane-problem-text {
		width: 100%;
		padding: 0px;
	}
	.accordion-text {
		width: 100%;
		padding: 0px;
	}
	.accordion-flex-wrapper {
		width: 100%;
	}
	.perks-left,
	.perks-right {
		width: 100%;
		margin-top: 30px;
	}
	.right-text-wider,
	.left-text-narrower {
		width: 100%;
	}
	.innovation-chart-parent {
		flex-wrap: wrap;
	}
	.accordion-maturity {
		display: none;
	}
	.maturity-panel {
		display: inline-block;
	}
	.public-investment-background {
		display: none;
	}
	.methane-public-inv-left {
		width: 100%;
	}
	.graphic-desktop {
		display: none;
	}
	.graphic-mobile {
		display: block;
	}
}

@media screen and (max-width: 900px) {
	.accordion-flex-wrapper {
		justify-content: center;
	}
	.accordion-flex-wrapper-top {
		justify-content: center;
	}
}

@media screen and (max-width: 720px) {
	.accordion-text {
		width: 100%;
		padding: 0px;
	}
	.accordion-text-full-width-desktop {
		display: none;
	}
	.accordion-text-full-width-mobile {
		display: inline-block;
	}
	.text-on-image {
		width: 100%;
	}
	.accordion-img {
		padding: 5px 0px 0px 5px;
	}
	.accordion p {
		font-size: 16px;
		float: none;
		text-align: left;
		padding-left: 12px;
	}
}

/* Bubble animation - inspired by https://codepen.io/diyorbek0309/pen/mdwbEve */
.perks-bubble-wrapper div {
	height: 60px;
	width: 60px;
	border: 3px solid rgba(255, 255, 255, 0.7);
	border-radius: 50px;
	position: absolute;
	top: 10%;
	left: 10%;
	animation: 4s linear infinite;
}
div .dot {
	height: 10px;
	width: 10px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	top: 20%;
	right: 20%;
}
.perks-bubble-wrapper div:nth-child(1) {
	top: 20%;
	left: 20%;
	animation: animate 8s linear infinite;
}
.perks-bubble-wrapper div:nth-child(2) {
	top: 60%;
	left: 80%;
	animation: animate 10s linear infinite;
}
.perks-bubble-wrapper div:nth-child(3) {
	top: 40%;
	left: 40%;
	animation: animate 3s linear infinite;
}
.perks-bubble-wrapper div:nth-child(4) {
	top: 66%;
	left: 30%;
	animation: animate 7s linear infinite;
}
.perks-bubble-wrapper div:nth-child(5) {
	top: 90%;
	left: 10%;
	animation: animate 9s linear infinite;
}
.perks-bubble-wrapper div:nth-child(6) {
	top: 30%;
	left: 60%;
	animation: animate 5s linear infinite;
}
.perks-bubble-wrapper div:nth-child(7) {
	top: 70%;
	left: 20%;
	animation: animate 8s linear infinite;
}
.perks-bubble-wrapper div:nth-child(8) {
	top: 75%;
	left: 60%;
	animation: animate 10s linear infinite;
}
.perks-bubble-wrapper div:nth-child(9) {
	top: 50%;
	left: 50%;
	animation: animate 6s linear infinite;
}
.perks-bubble-wrapper div:nth-child(10) {
	top: 85%;
	left: 38%;
	animation: animate 10s linear infinite;
}
.perks-bubble-wrapper div:nth-child(11) {
	top: 10%;
	left: 90%;
	animation: animate 9s linear infinite;
}
.perks-bubble-wrapper div:nth-child(12) {
	top: 20%;
	left: 70%;
	animation: animate 7s linear infinite;
}
.perks-bubble-wrapper div:nth-child(13) {
	top: 20%;
	left: 20%;
	animation: animate 8s linear infinite;
}
.perks-bubble-wrapper div:nth-child(14) {
	top: 60%;
	left: 5%;
	animation: animate 6s linear infinite;
}
.perks-bubble-wrapper div:nth-child(15) {
	top: 90%;
	left: 80%;
	animation: animate 9s linear infinite;
}
.perks-bubble-wrapper div:nth-child(16) {
	top: 39%;
	left: 15%;
	animation: animate 4s linear infinite;
}
.perks-bubble-wrapper div:nth-child(17) {
	top: 75%;
	left: 27%;
	animation: animate 7s linear infinite;
}
.perks-bubble-wrapper div:nth-child(18) {
	top: 44%;
	left: 73%;
	animation: animate 8s linear infinite;
}
.perks-bubble-wrapper div:nth-child(19) {
	top: 28%;
	left: 88%;
	animation: animate 6s linear infinite;
}
.perks-bubble-wrapper div:nth-child(20) {
	top: 47%;
	left: 65%;
	animation: animate 9s linear infinite;
}
.perks-bubble-wrapper div:nth-child(21) {
	top: 93%;
	left: 35%;
	animation: animate 9s linear infinite;
}
@keyframes animate {
	0% {
		transform: scale(0) translateY(0) rotate(70deg);
	}
	100% {
		transform: scale(2) translateY(-100px) rotate(360deg);
	}
}
.advisory-btn {
	position: relative;
}
.advisory-btn .cta {
	cursor: pointer;
}
.advisory-modal-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
	padding-top: 96px;
	padding-bottom: 64px;
	display: none;
}
.advisory-modal-wrap.active {
	display: flex;
}
.advisory-modal-bg {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.2);
	height: 100%;
	width: 100%;
	cursor: pointer;
}
.advisory-modal.container {
	position: relative;
	background: white;
	padding: 40px 64px;
	height: auto;
	overflow-y: scroll;
}
.advisory-modal .modal-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}
.advisory-modal .close {
	background: none;
	padding: 0;
	height: 32px;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.advisory-modal .close span {
	display: block;
	height: 32px;
	width: 32px;
	position: relative;
	transform: rotate(45deg);
}
.advisory-modal .close span::after {
	content: "\002B";
	font-size: 47px;
	color: #000000;
	display: block;
	transform: translate(-50%, -50%);
	position: absolute;
	height: 32px;
	width: 32px;
	left: 50%;
	line-height: 32px;
	top: 45%;
}
.advisory-committee-member + .advisory-committee-member {
	margin-top: 40px;
}
.committee-member-header {
	display: flex;
}

@media screen and (max-width: 768px) {
	.committee-member-header.team-col {
		text-align: left;
		flex-direction: row;
	}
	.committee-member-header.team-col .team-image {
		margin-right: 16px;
		margin-bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	.advisory-modal-wrap,
	.advisory-modal.container {
		padding: 32px 16px;
	}
}

input[type="checkbox"][name="reports[]"] {
    scale: 1.1;
    margin-right: 6px;
}

body.modal-open {
  overflow: hidden;
}
.niftic-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.niftic-modal.--open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(50 48 47 / 60%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  opacity: 1;
}

.niftic-modal-content {
  background: #E9EADE;
  position: relative;
  overflow: scroll;
  height: 100vh;
  max-height: unset;
  border-radius: 0px;
}

.niftic-modal-close {
  position: fixed;
  top: 24px;
  right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3276_21372)'%3E%3Cpath d='M25.3332 8.54667L23.4532 6.66667L15.9998 14.12L8.5465 6.66667L6.6665 8.54667L14.1198 16L6.6665 23.4533L8.5465 25.3333L15.9998 17.88L23.4532 25.3333L25.3332 23.4533L17.8798 16L25.3332 8.54667Z' fill='%23387A6E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3276_21372'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  height: 32px;
  width: 32px;
  cursor: pointer;
  background-color: #E9EADE;
  border-radius: 10px;
}

.niftic-modal-content button[type="submit"] {
	color: #387a6e;
	position: relative;
	text-transform: none;
	background: none;
	padding: 0;
}
.niftic-modal-content button[type="submit"] h4 {
	position: relative;
	color: #387a6e;
	padding-right: 29px;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -1px;
	display: inline-block;
}
.niftic-modal-content button[type="submit"] h4::after {
	content: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.3872 8.27344L9.88721 17.5304L0.387208 8.27344L2.28721 6.42204L8.58156 12.5554L8.58156 0.891061L11.2686 0.891061L11.2686 12.4816L17.4872 6.42204L19.3872 8.27344Z' fill='%23387A6E'/%3E%3Crect x='1.36963' y='19.6973' width='16.9977' height='2.57267' fill='%23387A6E'/%3E%3C/svg%3E%0A");
	position: absolute;
	right: 0;
	top: 4px;
	display: block;
}

@media screen and (min-width: 767px) {
  .niftic-modal-content {
    max-height: 80vh;
    height: auto;
    border-radius: 15px;
    max-width: 715px;
  }
  .niftic-modal-close {
    position: absolute;
  }
}
.container.password-protect-wrap {
	padding: 120px 0;
}
.container.password-protect-wrap input[type="submit"] {
	background-color: #387A6E !important;
	color: #ffffff !important;
}

.team-col {
    align-items: center;
}

.team-col .team-image {
    height: 124px;
    width: 124px;
    min-height: 124px;
    min-width: 124px;
    max-height: 124px;
    max-width: 124px;
    position: relative;
    border-radius: 124px;
    background: #E9EADE;
    overflow: hidden;
    margin-right: 24px;
}

.team-col .team-image img, .staff_image_container img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}