#landing {
	height: 600px;
	overflow: hidden;
	position: relative;
	background-color: var(--primary);
}
#animalcollage {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	filter: drop-shadow(-50px 0px 20px #0004);
	transition: all 0.5s ease-out;
}
@media only screen and (max-width: 1200px) {
	#animalcollage {
		filter: grayscale(0.3) brightness(0.7);
		opacity: 0.3;
	}
}
#textsection {
	position: absolute;
	top: 300px;
	left: 50px;
	z-index: 2;
}
@media only screen and (max-width: 1100px) {
	#leaf1 {
		display: none;		
	}
	#textsection {
		top: 100px;
	}
	#landing {
		height: 400px;
	}
}
#textsection .title {
	font-size: 36px;
	color: var(--primary-text);
}
#textsection .description {
	font-size: 28px;
	color: var(--primary-text);
	font-family: Lato;
}
section {
	background-color: var(--tertiary);
	background-image: url(/src/img/splat.svg);
	background-repeat: no-repeat;
	background-size: 70vw;
	background-position: 30vw -20%;
	display: flex;
	justify-content: space-around;
	overflow: hidden;
}
section .subsection {
	width: 400px;
	margin: 40px;
	z-index: 2;
}
section .subsection .title {
	color: var(--primary-text);
	font-size: 36px;
}
section .subsection .title img {
	height: 40px;
}
section .subsection .title svg {
	height: 40px;
	width: 40px;
}
section .subsection .title span {
	vertical-align: top;
}
section .subsection .textsection {
	min-height: 170px;
	border-radius: 10px;
	font-size: 20px;
	padding: 20px;
	color: var(--primary-text);
	font-family: Lato;
}
.deco {
	position: absolute;
	max-width: 300px;
	z-index: -1;
}
#leaf1 {
	filter: drop-shadow(-30px -30px 4px #0002);
	transform: rotateZ(160deg) translate(40px, 180px);
	z-index: 1;
}

@media only screen and (max-width: 700px) {
	section {
		display: block;
	}
	.subsection {
		padding: 20px;
		margin: 0 !important;
	}
	.subsection .title {
		padding-left: 20px;
	}
}