:root {
	--dash: #58305c;
	--purple: #954469;
	--lightpurple: #ca6168;
	--darkorange: #f08b60;
	--lightorange: #ffbf5d;
	--lightgray: #3d3f43;
	--bone: #efebdb;
	--shadow: #cccccc;
}

.error {
	border: 2px solid rgb(170,62,73);
	border-radius: 10px;
	font-family: Arial;
	font-size: 15px;
	color: rgb(170,62,73);
	background-color: rgb(242,222,223);
	padding: 10px;
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 570px;
	display: inline-block;
	position: -webkit-sticky;
	position: fixed;
	top: 0px;
	/*left: 725px;*/
	right: calc((100vw - 1228px) / 2);
	margin-right: 0px;
}

body {
	background-image: linear-gradient(var(--lightorange),var(--darkorange),var(--lightpurple),var(--purple));
	margin: 0;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

.bg {
	background-image: url(../images/bg-dots-qtr.png);
	/*display: flex;*/
	padding: 30px;
	background-size: 20%;
	min-height: 100vh;
}

.container {
	display: flex;
	margin: 20px auto 20px auto;
	flex-direction: column;
	/*width: 1200px;*/
	border: 4px solid var(--dash);
	background-color: #ffffff;
	box-shadow: 5px 5px 30px var(--dash);
	max-width: 1200px;
}

/*.mpPlaceHolder {
	min-height: calc(100vh - 340px);
}*/

.header {
	display: flex;
	width: 100%;
	background-color: var(--dash);
}

.header img {
	width: 100%;
}

.topmenu {
	display: flex;
	height: 40px;
	margin-bottom: 20px;
	background-color: var(--dash);
}

.topmenu p {
	color: #ffffff;
	text-align: center;
	margin: 0px;
	filter: drop-shadow(2px 2px var(--lightgray));
}

.topAdopt, .topFoster, .topVolunteer, .topDonate {
	flex: 25%;
	padding-top: 6px;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.topAdopt:hover {
	background-color: var(--purple);
}

.topFoster:hover {
	background-color: var(--lightpurple);
}

.topVolunteer:hover {
	background-color: var(--darkorange);
}

.topDonate:hover {
	background-color: var(--lightorange);
}

.border-left {
	border-left: 2px solid #ffffff;
}

.border-right {
	border-right: 2px solid #ffffff;
}

.intro {
	/*display: flex;*/
	padding: 0px 20px 0 20px;
}

.intro a {
	text-decoration: none;
	color: var(--dash);
}

.intro a:hover {
	text-decoration: underline;
}

.sections {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sectionpair {
	display: flex;
	flex: 50%;
	justify-content: space-around;
	margin-bottom: 30px;
}

.adopt, .foster, .volunteer, .donate {
	margin: 0px 10px 0 10px;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 35px 100%, 0px 190px);*/
	width: 260px;
	height: 240px;
	cursor: pointer;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
	overflow: hidden;
}

.downloads {
	flex: 100%;
	display: flex;
	justify-content: space-around;
	margin-bottom: 30px;
}

.downloadwrapper {
	width: 48%;
	margin: 0px 20px 0 10px;
	aspect-ratio: 96/11;
}

.doc-download {
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 7% 100%, 0 25%);*/
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
}

.downloads p {
	font-family: "futura-pt";
	font-weight: 800;
	font-size: 2.6vw;
	right: 0;
	bottom: 0;
	margin: 1px 5px 0px 0px;
	z-index: 10;
	position: absolute;
	color: #ffffff;
}

.downloadpop {
	height: 100%;
	position: absolute;
	width: 100%;
	transition: left .2s;
	left: 100%;
	background-color: #ffffff;
	opacity: .25;
}

.doc-download:hover .downloadpop {
	left: 0;
}

.purple {
	background-color: var(--purple);
	color: var(--purple);
}

.lightpurple {
	background-color: var(--lightpurple);
	color: var(--lightpurple);
}

.darkorange {
	background-color: var(--darkorange);
	color: var(--darkorange);
}

.lightorange {
	background-color: var(--lightorange);
	color: var(--lightorange);
}

.adopt {
	background-color: var(--purple);
	position: relative;
	color: var(--purple);
}

.foster {
	background-color: var(--lightpurple);
	position: relative;
	color: var(--lightpurple);
}

.volunteer {
	background-color: var(--darkorange);
	position: relative;
	color: var(--darkorange);
}

.donate {
	background-color: var(--lightorange);
	position: relative;
	color: var(--lightorange);
}

.group {
	padding-left: 20px;
	padding-right: 20px;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 7% 100%, 0 75%);*/
	
}

.imgFoster, .imgVolunteer, .imgDonate {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.imgFoster img, .imgVolunteer img, .imgDonate img {
	width: 50%;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 10% 100%, 0 90%);*/
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
}

.hdnButton {
	display: none;
}

.mission {
	display: flex;
	padding: 0px 20px 0 20px;
	flex-direction: column;
}

.contact {
	background-color: var(--dash);
}

.title {
	font-family: "futura-pt";
	font-weight: 700;
	font-size: 100px;
	color: #fff;
	margin: 0;
	line-height: 150px;
}

p {
	font-family: "futura-pt";
	font-weight: 700;
	font-size: 24px;
	color: var(--lightgray);
}

p a {
	color: var(--dash);
	text-decoration: none;
}

p a:hover {
	text-decoration: underline;
}

ul {
	padding-left: 50px;
	padding-right: 12px;
}

li {
	list-style: square;
}

li>p.intro {
	padding-left: 5px;
}

li::marker {
	color: var(--dash);
	font-size: 30px;

}

.sectionpop {
	height: 173px;
	position: absolute;
	width: 240px;
	top: 173px;
	transition: top .5s, color .25s;
	z-index: 1;
	padding: 10px;
}

.adopt .sectionpop {
	background-color: var(--purple);
}

.foster .sectionpop {
	background-color: var(--lightpurple);
}

.volunteer .sectionpop {
	background-color: var(--darkorange);
}

.donate .sectionpop {
	background-color: var(--lightorange);
}

.adopt:hover .sectionpop, .foster:hover .sectionpop, .volunteer:hover .sectionpop, .donate:hover .sectionpop {
	top: 0;
	pointer: cursor;
	color: #ffffff;
}

.intro p {
	text-align: center;
}

.intro p.note {
	/*margin-top: -20px;*/
	font-size: 14px;
	margin-bottom: 10px;
}

.heading p:nth-child(1) {
	text-align: center;
	font-size: 6vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}

.heading p:nth-child(2) {
	margin-top: -1vw;
	font-size: 2vw;
	text-align: center;
}

.sections p {
	font-family: "futura-pt";
	font-weight: 800;
	font-size: 54px;
	color: #ffffff;
	text-align: right;
	vertical-align: bottom;
	margin: 1px 5px 0px 0px;
	z-index: 10;
	position: relative;
}

.sections img {
	width: 260px;
}

.sectionpop p {
	font-family: "futura-pt";
	font-size: 24px;
	color: unset;
}

.group img {
	width: 100%;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
}

.upcomingeventswrapper {
	display: flex;
	justify-content: center;
	margin: 30px 0px;
	padding: 0px 20px;
}

.upcomingevents {
	width: 100%;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
	background-color: var(--dash);
}

.upcomingevents p {
	font-size: 50px;
	color: #fff;
	text-align: center;
	margin: 10px 0px;
}

.eventwrapper {
	display: flex;
	justify-content: center;
	margin: 5px;
	background-color: #fff;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	flex-wrap: wrap;
}

.eventcontainer {
	border-radius: 10px;
	width: 550px;
	height: 100px;
	margin: 10px;
	display: flex;
	cursor: pointer;
}

.eventdate {
	width: 100px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.eventdate p {
	font-size: 35px;
	line-height: 40px;
	margin: 0px;
	letter-spacing: .1rem;
}

.eventinfocontainer {
	display: flex;
	flex-direction: column;
	width: 446px;
}

.eventinfo-title {
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eventinfo-title p {
	font-size: 18px;
	margin: 0px 0px;
	letter-spacing: .1rem;
}

.eventinfo-details {
	height: 61px;
	background-color: #fff;
	border-bottom-right-radius: 8px;
}

.eventinfo-details p {
	font-size: 18px;
	margin: 5px 5px;
	color: var(--lightgray);
}

.mission p {
	font-size: 18px;
	text-align: center;
	font-style: italic;
	margin-top: 18px;
	margin-bottom: 4px;
}

.mission p:nth-child(2) {
	margin-top: 4px;
	margin-bottom: 18px;
}

.mission a {
	color: var(--dash);
	text-decoration: none;
}

.mission a:hover {
	text-decoration: underline;
}

.contact p {
	color: #ffffff;
	text-align: center;
	margin: 12px 0px 12px 0px;
}

.contact a {
	text-decoration: none;
	color: #ffffff;
}

.contact a:hover {
	text-decoration: underline;
}

.footer {
	display: flex;
	justify-content: space-between;
}

.footer > div {
	display: flex;
}

.footer img {
	height: 50px;
	align-self: center;
}

.footer p {
	text-align: right;
	font-size: 60px;
	margin: 2px 2px 0px 0px;
	line-height: 58px;
}

#fullList > div:nth-child(odd) > div {
	background-color: var(--purple);
	color: var(--purple);
}

#fullList > div:nth-child(odd) > div div {
	background-color: var(--purple);
}

#fullList > div:nth-child(even) > div {
	background-color: var(--lightpurple);
	color: var(--lightpurple);
}

#fullList > div:nth-child(even) > div div {
	background-color: var(--lightpurple);
}

#fullList > div:nth-child(4n-1) > div {
	background-color: var(--darkorange);
	color: var(--darkorange);
}

#fullList > div:nth-child(4n-1) > div div {
	background-color: var(--darkorange);
}

#fullList > div:nth-child(4n) > div {
	background-color: var(--lightorange);
	color: var(--lightorange);
}

#fullList > div:nth-child(4n) > div div {
	background-color: var(--lightorange);
}

.adoptionlist {
	flex: 100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.adoptionlist p{
	font-weight: 800;
	text-align: right;
	vertical-align: bottom;
	margin: 1px 5px 0px 0px;
	z-index: 10;
	color: #ffffff;
}

.adoptitemwrapper {
	width: 47%;
	margin: 0px 5px 40px 0px;
	aspect-ratio: 13/12;
}

.adoptitem {
	width: 100%;
	height: 100%;
	margin: 0;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 13% 100%, 0 80%);*/
	position: relative;
	cursor: pointer;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
	overflow: hidden;
}

.adoptitemwrapper img {
	width: 100%;
	height: 70%;
}

.adoptitemwrapper .liststats {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 2vw;
}

.adoptitemwrapper .listname {
	position: absolute;
	bottom: 4%;
	right: 0;
	font-size: 8vw;
}

.adoptitemwrapper .liststatus {
	position: absolute;
	bottom: 23%;
	right: 0;
	font-size: 2vw;
	font-style: italic;
}

.adoptionpop {
	width: 100%;
	height: 70%;
	top: 70%;
	padding: 0px;
	position: absolute;
	transition: top .5s, color .25s;
	z-index: 1;
}

.adoptionpop p {
	font-size: 3vw;
	margin-right: 5%;
	position: relative;
	color: unset;
}

.adoptitem:hover .adoptionpop {
	top: 0;
	cursor: pointer;
	color: #ffffff;
}

.profilePhotoContainer {
	padding: 20px;
	max-height: 900px;
	max-width: 1200px;
	overflow: hidden;

	display: flex;
	justify-content: center;
	position: relative;
}

.profilePhotoContainer img,
.profilePhotoContainer video{
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
}

.photoPrev {
	width: 50%;
	height: 100%;
	z-index: 3;
	position: absolute;
	left: 5px;
	cursor: pointer;
}

.photoPrev:hover .photoPrevBox img {
	opacity: 1;
}

.photoNext {
	width: 50%;
	height: 100%;
	z-index: 3;
	position: absolute;
	right: 5px;
	cursor: pointer;
}

.photoNext:hover .photoNextBox img {
	opacity: 1;
}

.photoNextBox, .photoPrevBox {
	width: 15%;
	height: 100%;
}

.photoNextBox img {
	height: 100%;
	position: absolute;
	right: 20px;
	opacity: .7;
	box-shadow: unset;
}

.photoPrevBox img {
	height: 100%;
	position: absolute;
	left: 20px;
	opacity: .7;
	box-shadow: unset;
}

.profilePhotoContainer>img,
.profilePhotoContainer>video{
	display: none;
	z-index: 1;
}

.profilePhotoContainer .showPhoto {
	display: unset;
}

.profilePhotoContainer .landscape {
	max-width: 100%;
}

.profilePhotoContainer .portrait {
	max-height: 100%;
}

.profileContainer {
	display: flex;
}

.profileStats {
	flex: 40%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	padding-top: 12px;
	padding-left: 12px;
}

.statName {
	flex: 40%;
}

.statValue {
	flex: 60%;
}

.statName p, .statValue p {
	margin-top: 12px;
	margin-bottom: 12px;
}

.profileDesc {
	flex: 60%;
	padding-right: 12px;
}

.formWrapper {
	display: flex;
	flex-wrap: wrap;
	padding: 12px;
}

.formLeftCol {
	flex: 45%;
	text-align: center;
	/*background-color: red;*/
}

.formSpacer {
	flex: 5%;
	/*background-color: purple;*/
}

.formRightCol {
	flex: 45%;
	/*background-color: green;*/
}

.form2Col {
	flex: 100%;
	/*background-color: orange;*/
}

.donations {
	display: flex;
	margin-bottom: 40px;
}

.donationContainer {
	flex: 33%;
	background-color: #ffffff;
	box-shadow: 10px 10px var(--shadow);
	border-radius: 10px;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
	border: 2px solid #ac98ae;
}

.donationTitle {
	height: 40px;
	background-color: #ac98ae;
	padding-top: 6px;
}

.donationTitle p {
	color: #ffffff;
	text-align: center;
	margin: 0px;
	filter: drop-shadow(2px 2px var(--lightgray));
}

.donationContent {
	background-color: #ffffff;
	/*width: 100%;
	height: 100%;*/
	padding-top: 10px;
}

.donationContent .intro {
	padding: 0px;
}

.donationContent p {
	margin: 0px;
}

.paypalButton {
	background: rgb(255,209,64);
	border-radius: 1000px;
	height: 50px;
	width: 90%;
	margin: auto;
	cursor: pointer;
}

.paypalButton:hover {
	background: rgb(255,232,136);
}

.paypalButton .paypalButtonContent {
	margin: auto;
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}

.paypalQR {
	width: 45%;
	margin: auto;
	padding-top: 10px;
}

.venmoQR {
	width: 80%;
	margin: auto;
	padding-top: 10px;
}

.paypalQR img, .venmoQR img {
	width: 100%;
}

.paypalButtonContent p {
	display: inline-block;
	color: rgb(0,48,135);
	font-weight: 700;
	font-size: 16px;
}

.paypalButton img {
	height: 30px;
}

.venmoButton {
	background: #008cff;
	border-radius: 1000px;
	height: 50px;
	width: 90%;
	margin: auto;
	cursor: pointer;
}

.venmoButton:hover {
	background: #0074de;
}

.venmoButton .venmoButtonContent {
	margin: auto;
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}

.venmoButtonContent p {
	display: inline-block;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
}

.venmoButton img {
	height: 30px;
	margin-right: 5px;
}

.donationContent .check {
	text-align: center;
}

.fieldWrapperFullWidth, .fieldWrapperTextArea {
	margin: auto;
	margin-top: 30px;
	/*margin-bottom: 30px;*/
	background: #ffffff);
	width: calc(100% - 6px);
	padding: 3px;
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%, 0 75%);*/
}

.fieldWrapperTextArea {
	padding-bottom: 0px;
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%, 0 90%);*/
}

.fieldWrapperFullWidth input {
	width: calc(100% - 18px);
	height: 40px;
	background-color: #ffffff;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 2% 100%, 0 74.5%);*/
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 5px;
	color: var(--lightgray);
	font-weight: 700;
	font-size: 20px;
	font-family: "futura-pt";
	border: 4px solid var(--purple);
	border-radius: 10px;
}

.fieldWrapperTextArea textarea {
	width: calc(100% - 18px);
	height: 200px;
	background-color: #ffffff;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 2% 100%, 0 90%);*/
	padding: 5px;
	color: var(--lightgray);
	font-weight: 700;
	font-size: 20px;
	resize: none;
	font-family: "futura-pt";
	border: 4px solid var(--purple);
	border-radius: 10px;
}

.fieldWrapper {
	margin: auto;
	background: #ffffff;
	width: calc(100% - 6px);
	padding: 3px;
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 75%);*/
}

.fieldWrapper input {
	width: calc(100% - 18px);
	height: 40px;
	background-color: #ffffff;
	/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 4.5% 100%, 0 74.5%);*/
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 5px;
	color: var(--lightgray);
	font-weight: 700;
	font-size: 20px;
	font-family: "futura-pt";
	border: 4px solid var(--purple);
	border-radius: 10px;
}

.formWrapper input:focus, .formWrapper textarea:focus {
	outline: none;
}

@media (max-width: 1205px) {

	.sectionpair {
		flex: 100%;
	}

	.sectionwrapper {
		width: 48%;
		margin: 0px 20px 0 10px;
		aspect-ratio: 13/12;
	}

	.adopt, .foster, .volunteer, .donate {
		width: 100%;
		height: 100%;
		margin: 0;
		/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 13% 100%, 0 80%);*/
	}

	.sectionwrapper img {
		width: 100%;
		height: 70%;
	}

	.sectionwrapper p {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 8vw;
	}

	.sectionpop {
		width: 100%;
		height: 70%;
		top: 70%;
		padding: 0px;
	}

	.sectionpop p {
		font-size: 3vw;
		margin-right: 5%;
		position: relative;
	}

	.profileContainer {
		flex-direction: column;
	}

	.profileStats {
		padding-right: 12px;
	}

	.profileDesc {
		padding-left: 12px;
	}

	.formLeftCol {
		flex: 100%;
		text-align: center;
		/*background-color: red;*/
	}

	.formSpacer {
		display: none;
		/*flex: 5%;*/
		/*background-color: purple;*/
	}

	.formRightCol {
		flex: 100%;
		margin-top: 30px;
		/*background-color: green;*/
	}

	.fieldWrapper {
		/*clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%, 0 75%);*/
	}

	.fieldWrapper input {
		/*clip-path: polygon(0 0, 100% 0, 100% 75%, 100% 100%, 2% 100%, 0 74.5%);*/
	}
}

@media (min-width: 1215px) {
	.adoptitemwrapper .listname {
		font-size: 97px;
	}

	.adoptitemwrapper .liststats, .adoptitemwrapper .liststatus {
		font-size: 24px;
	}

	.adoptionpop p {
		font-size: 37px;
	}

	.doc-download p {
		font-size: 32px;
	}

	.heading p:nth-child(1) {
		font-size: 73px;
	}

	.heading p:nth-child(2) {
		font-size: 25px;
	}
}