body.page-template-tpl-eoy2020,
body.post-template-tpl-eoy2020 {
	overflow-x: hidden;
}

/*
Setting 'overflow-x: hidden' on the body hides the editor!
But we can target the admin side with .edit-post-visual-editor
and unset our hidden.
 */
body.page-template-tpl-eoy2020.edit-post-visual-editor,
body.post-template-tpl-eoy2020.edit-post-visual-editor {
	overflow-x: unset;
}


body.page-template-tpl-eoy2020 *,
body.post-template-tpl-eoy2020 * {
	box-sizing: border-box;
}

body.page-template-tpl-eoy2020 .maxwidth-container,
body.post-template-tpl-eoy2020 .maxwidth-container {
	box-sizing: border-box;
	max-width: 1250px;
	padding: 25px;
	margin: 0 auto;
	position: relative;
}

body.page-template-tpl-eoy2020 .maxwidth-container.no-side-padding,
body.post-template-tpl-eoy2020 .maxwidth-container.no-side-padding {
	padding-left: 0;
	padding-right: 0;
}

body.page-template-tpl-eoy2020 .nopadding,
body.post-template-tpl-eoy2020 .nopadding {
	padding: 0;
}

.has-text-align-center {
	text-align: center;
}


.eoy2020-hero {
	text-align: center;
	position: relative;
	max-width: 732px !important;
	margin: 0 auto;
}

.eoy2020-hero img {
	width: 100%;
	height: auto;
}



.eoy2020-hero span {
	display: block;
	position: absolute;
	overflow: hidden;
}

.eoy2020-hero span::after {
	border-radius: 999px;
}



span.eoy2020-hero-dot-a,
span.eoy2020-hero-dot-b
{
	top: -10px;
	right: -85px;
	animation: rotation 4s infinite linear;
}

span.eoy2020-hero-dot-b {
	right: unset;
	left: -80px;
	top: 15px;
	animation: rotation 9s infinite reverse linear;
}

span.eoy2020-hero-dot-a::after,
span.eoy2020-hero-dot-b::after
{
	content: '';
	display: block;
	width: 33px;
	height: 33px;
	background-color: #3D9D79;
	margin-right: 20px;
	margin-bottom: 20px;
}

span.eoy2020-hero-dot-b::after {
	width: 22px;
	height: 22px;
}



span.eoy2020-hero-dot-c,
span.eoy2020-hero-dot-d
{
	top: -50px;
	right: 0;
	animation: rotation 7s infinite reverse linear;
}

span.eoy2020-hero-dot-d {
	left: -50px;
	top: 50%;
	right: unset;
	animation: rotation 3s infinite linear;
}

span.eoy2020-hero-dot-c::after,
span.eoy2020-hero-dot-d::after
{
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	background-color: #6F00C6;
	margin-right: 10px;
	margin-bottom: 10px;
}




span.eoy2020-hero-dot-e {
	left: -100px;
	top: 35%;
	animation: rotation 6s infinite linear;
}

span.eoy2020-hero-dot-e::after
{
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	background-color: #F9B429;
	margin-left: 20px;
	margin-bottom: 20px;
}





@keyframes rotation {
	100% {
		transform: rotate(360deg);
	}
}



body.page-template-tpl-eoy2020 h1,
body.page-template-tpl-eoy2020 h2,
body.post-template-tpl-eoy2020 h1,
body.post-template-tpl-eoy2020 h2 {
	text-align: center;
	max-width: 1200px;
	margin: 50px auto;
	padding: 0 50px;
	box-sizing: border-box;
	font-size: 72px;
	line-height: 79.2px;
}

body.page-template-tpl-eoy2020 h2,
body.post-template-tpl-eoy2020 h2 {
	font-size: 64px;
}

body.page-template-tpl-eoy2020 h2.eoy2020-report-title,
body.post-template-tpl-eoy2020 h2.eoy2020-report-title {
	text-align: start;
	padding: 0;
	margin: -10px 0 25px;
}


body.page-template-tpl-eoy2020 p,
body.post-template-tpl-eoy2020 p {
	line-height: 1.5em;
	padding-bottom: 1.5em;
	margin-bottom: 0;
	max-width: 1200px;
}

body.page-template-tpl-eoy2020 #fl-main-content > p,
body.post-template-tpl-eoy2020 #fl-main-content > p {
	margin: 70px auto;
	padding: 0 35px;
	font-size: 25px;
}



body.page-template-tpl-eoy2020 hr.wp-block-separator.is-style-default,
body.post-template-tpl-eoy2020 hr.wp-block-separator.is-style-default {
	max-width: unset;
	width: 100%;
	border: 0;
}

body.page-template-tpl-eoy2020 hr.wp-block-separator.is-style-default,
body.post-template-tpl-eoy2020 hr.wp-block-separator.is-style-default,
.eoy2020-block {
	border-bottom: 1px solid #E1E1E1;
}

.eoy2020-block:last-of-type {
	border-bottom: 0;
}


h3.eoy2020-project-title {
	padding: 20px 0 15px;
}


.eoy2020-projects {
	display: block;
	max-width: 95%;
	margin: 0 auto;
	column-count: 2;
/*	column-width: 500px; */
	column-gap: 120px;
	column-fill: balance;
}


.eoy2020-project {
	display: block;
	break-inside: avoid;
	width: 100%;
	max-width: 585px;
	padding-bottom: 70px;
}

/*
Firefox bug - which only happens with JS turned on?!
We need 'break-inside: avoid' for the project blocks, so that the text doesn't flow into the next column.
But for some reason, at certain screen widths, this means that Firefox will either split the final
box into two columns, or make it invisible. It's definitely a bug, as resizing the viewport makes it appear
as expected, and then going back to the previous viewport size it remains good (i.e. it fixes it!).
So the easiest solution seems to be to remove break-inside from the final block.
 */
.eoy2020-project:last-of-type {
	break-inside: unset;
}

.eoy2020-project-image {
	position: relative;
	text-align: right;
}

.eoy2020-project-image img {
	width: 206px;
	height: 206px;
	border-radius: 999px;
	object-fit: cover;
}

.eoy2020-project-image::after {
	content: '';
	width: 36px;
	height: 36px;
	position: absolute;
	border-radius: 999px;
	background: #3D9D79;
	margin-right: 16px;
	margin-bottom: 16px;
	transform-origin: bottom right;
	animation: rotation 9s infinite reverse linear;
}

.eoy2020-project:nth-of-type(1) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(3) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(6) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(8) .eoy2020-project-image::after {
	width: 18px;
	height: 18px;
	background: #F9B429;
}

.eoy2020-project:nth-of-type(1) .eoy2020-project-image::after {
	top: 30px;
	right: 250px;
}

.eoy2020-project:nth-of-type(3) .eoy2020-project-image::after {
	top: 140px;
	right: 250px;
	animation: rotation 9s infinite linear;
}

.eoy2020-project:nth-of-type(2) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(8) .eoy2020-project-image::after {
	top: 20px;
	right: 250px;
	animation: rotation 11s infinite reverse linear;
}

.eoy2020-project:nth-of-type(3) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(5) .eoy2020-project-image::after {
	top: 142px;
	right: 260px;
	animation: rotation 14s infinite reverse linear;
}

.eoy2020-project:nth-of-type(4) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(6) .eoy2020-project-image::after {
	top: 30px;
	right: 270px;
	animation: rotation 7s infinite linear;
}

.eoy2020-project:nth-of-type(7) .eoy2020-project-image::after,
.eoy2020-project:nth-of-type(9) .eoy2020-project-image::after {
	right: 270px;
}



.eoy2020-report-section.bg_orange {
	background: #F9B429;
}

.eoy2020-report-section.bg_green {
	background: #3D9D79;
}

.eoy2020-report-section.bg_purple {
	background: #6F00C6;
}

.eoy2020-report-section.image_on_right > .eoy2020-report-section-inner {
	background-image: linear-gradient(to right, #fff 62%, transparent 62%);
}

.eoy2020-report-section.image_on_left > .eoy2020-report-section-inner {
	background-image: linear-gradient(to left, #fff 62%, transparent 62%);
}

.eoy2020-report-section.image_on_left .eoy2020-report {
	flex-direction: row-reverse;
}

.eoy2020-report {
	display: flex;
	max-width: 95%;
	margin: 0 auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

html[dir="ltr"] .eoy2020-report {
	flex-direction: row-reverse;
}

html[dir="ltr"] .eoy2020-report-section.image_on_left .eoy2020-report {
	flex-direction: row;
}


.eoy2020-report > * {
	display: block;
	width: 50%;
}

.eoy2020-report-image {
	padding: 70px 35px;
}

.eoy2020-report-image img {
	border-radius: 20px;
	width: 100%;
	max-width: 503px;
	height: auto;
}

.eoy2020-report-body {
	padding: 70px 2vw;
}

.eoy2020-project-info > p:last-of-type,
.eoy2020-report-text > p:last-of-type
{
	padding-bottom: 0;
}

.eoy2020-report-body > h3 {
	margin-top: 0;
}



.eoy2020-donate-section {
	background: #fff url(https://animals-now.org/wp-content/uploads/eoy2020-donation-bg-desktop.jpg) no-repeat 35% 50%;
	background-size: cover;
	padding: 70px 35px;
	margin-top: -2px;
}

.eoy2020-donate-inner {
	background: #fff;
	width: 500px;
	max-width: 100%;
	padding: 50px;
	border-radius: 20px;
}

body.page-template-tpl-eoy2020 .eoy2020-donate-section h2,
body.post-template-tpl-eoy2020 .eoy2020-donate-section h2 {
	font-size: 30px;
	line-height: 36px;
	padding: 0;
	margin: 0 0 15px;
}

body.page-template-tpl-eoy2020 .eoy2020-donate-section p,
body.post-template-tpl-eoy2020 .eoy2020-donate-section p {
	text-align: center;
}

.eoy2020-donate-section .donate-form {
	padding: 0 !important;
}




@media screen and (min-width: 769px) {

	.eoy2020-smallscreen {
		display: none;
	}

	.eoy2020-donate-section {
		padding-left: calc(50% + 50px);
		display: flex;
		flex-direction: row-reverse;
	}

}


.eoy2020-orbit {
	display: none;
	z-index: -10;
}

body.page-template-tpl-eoy2020,
body.post-template-tpl-eoy2020 {
	background: #fff;
}

body.page-template-tpl-eoy2020 .fl-page-content,
body.post-template-tpl-eoy2020 .fl-page-content {
	background: transparent;
}


@media screen and (min-width: 1500px) {

	.eoy2020-projects-section {
		position: relative;
		overflow: hidden;
	}

	.eoy2020-projects-section .orbit-1a {
		display: block;
		width: 274px;
		height: 274px;
		background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='297.5px' height='297px' viewBox='-169 -12 297.5 297' enable-background='new -169 -12 297.5 297' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%2323CFA4' stroke-width='2' cx='-19.755' cy='136.585' r='135.5'/%3E%3Ccircle fill='%23F9B429' cx='115.245' cy='136.773' r='13'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
		background-size: contain;
		position: absolute;
		top: calc(50% - 137px);
		left: -137px;
		animation: rotation 16s infinite linear;
	}

	.eoy2020-projects-section .orbit-1b {
		display: block;
		width: 380px;
		height: 380px;
		background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='297.5px' height='297px' viewBox='-169 -12 297.5 297' enable-background='new -169 -12 297.5 297' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23F9B429' stroke-width='2' cx='-19.755' cy='136.585' r='135.5'/%3E%3Ccircle fill='%236F00C6' cx='-154.717' cy='137.773' r='9'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
		background-size: contain;
		position: absolute;
		top: calc(50% - 190px);
		left: -190px;
		animation: rotation 13s infinite reverse linear;
	}

	.eoy2020-projects-section .orbit-2a {
		display: block;
		width: 274px;
		height: 274px;
		background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='297.5px' height='297px' viewBox='-169 -12 297.5 297' enable-background='new -169 -12 297.5 297' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%2323CFA4' stroke-width='2' cx='-19.755' cy='136.585' r='135.5'/%3E%3Ccircle fill='%23F9B429' cx='115.245' cy='136.773' r='9'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
		background-size: contain;
		position: absolute;
		bottom: -137px;
		right: -47px;
		animation: rotation 16s infinite linear;
	}

	.eoy2020-projects-section .orbit-2b {
		display: block;
		width: 380px;
		height: 380px;
		background: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='297.5px' height='297px' viewBox='-169 -12 297.5 297' enable-background='new -169 -12 297.5 297' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23F9B429' stroke-width='2' cx='-19.755' cy='136.585' r='135.5'/%3E%3Ccircle fill='%236F00C6' cx='-21.503' cy='1.635' r='12'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
		background-size: contain;
		position: absolute;
		bottom: -190px;
		right: -100px;
		animation: rotation 13s infinite reverse linear;
	}

}





@media screen and (max-width: 769px) {

	.eoy2020-largescreen {
		display: none;
	}


	body.page-template-tpl-eoy2020 h1,
	body.page-template-tpl-eoy2020 h2,
	body.post-template-tpl-eoy2020 h1,
	body.post-template-tpl-eoy2020 h2
	{
		text-align: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 25px;
		box-sizing: border-box;
		/*
		font-size: 32px;
		line-height: 42px;
		*/
		font-size: 9vw;
		line-height: 11vw;
	}

	.eoy2020-hero {
		width: 75%;
	}

	.eoy2020-hero span {
		display: none;
	}

	body.page-template-tpl-eoy2020 #fl-main-content > p,
	body.post-template-tpl-eoy2020 #fl-main-content > p {
		margin: 35px auto;
		padding: 0 25px;
		font-size: 17px;
		line-height: 22px;
	}

	.eoy2020-projects {
		column-count: unset;
		max-width: calc(100% - 50px);
	}

	.eoy2020-report {
		display: block;
		max-width: calc(100% - 50px);
	}

	.eoy2020-report > * {
		width: 100%;
	}

	.eoy2020-report-section-inner {
		background-image: linear-gradient(to bottom, transparent 142px, #fff 142px) !important;
	}

	.eoy2020-report-image {
		padding: 50px 0 25px;
		max-width: 325px;
		margin: 0 auto;
	}



	.eoy2020-donate-section {
		background: #fff url(https://animals-now.org/wp-content/uploads/eoy2020-donation-bg-mobile.jpg) no-repeat center bottom;
		background-size: 100% auto;
		padding: 25px;
		padding-bottom: 125vw;
		position: relative;
	}

	.eoy2020-donate-inner {
		background: #fff;
		width: 100%;
		max-width: 500px;
		padding: 25px;
		border-radius: 20px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
		margin-left: auto;
		margin-right: auto;
	}

	body.page-template-tpl-eoy2020 .eoy2020-donate-section h2,
	body.post-template-tpl-eoy2020 .eoy2020-donate-section h2 {
		font-size: 30px;
		line-height: 38px;
		padding: 0;
		text-align: start;
	}

	body.page-template-tpl-eoy2020 .eoy2020-donate-section p,
	body.post-template-tpl-eoy2020 .eoy2020-donate-section p {
		text-align: start;
	}

	.eoy2020-donate-section .donate-val-button {
		width: 56px;
		height: 56px;
	}



	.eoy2020-donate-section {
		border-top: 70px solid #fff;
	}

	.eoy2020-donate-section > span::after {
		border-radius: 999px;
	}

	.eoy2020-donate-section > span {
		position: absolute;
	}

	span.eoy2020-donate-dot-a,
	span.eoy2020-donate-dot-b
	{
		top: -10px;
		left: 20%;
		animation: rotation 4s infinite linear;
	}

	span.eoy2020-donate-dot-b {
		top: -32px;
		left: 45%;
		animation: rotation 9s infinite reverse linear;
	}

	span.eoy2020-donate-dot-c {
		top: -48px;
		left: 57%;
		animation: rotation 6s infinite linear;
	}

	span.eoy2020-donate-dot-a::after,
	span.eoy2020-donate-dot-b::after,
	span.eoy2020-donate-dot-c::after
	{
		content: '';
		display: block;
		width: 33px;
		height: 33px;
		background-color: #3D9D79;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	span.eoy2020-donate-dot-b::after {
		width: 16px;
		height: 16px;
		background-color: #F9B429;
		margin-right: 14px;
		margin-bottom: 14px;
	}

	span.eoy2020-donate-dot-c::after {
		width: 10px;
		height: 10px;
		margin-right: 8px;
		margin-bottom: 8px;
		background-color: #6F00C6;
	}

}