﻿.triangle {
	position: absolute;
	transition: 1s;
}

	.triangle.one {
		bottom: 0;
		left: -30%;
		width: 160%;
		transition: 0.75s;
	}

	.triangle.two {
		bottom: 0;
		left: -20%;
		width: 140%;
		transition: 1s;
	}

	.triangle.three {
		bottom: 0;
		left: 0;
		width: 100%;
		transition: 1.25s;
	}

	.triangle.four {
		bottom: 0;
		left: 10%;
		width: 80%;
		transition: 1.5s;
	}

.logo {
	height: 320px;
}

.blur-trees-background {
	background-image: url("../img/treesblured.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.rotate {
	-webkit-animation: spin 360s linear infinite;
	-moz-animation: spin 360s linear infinite;
	animation: spin 360s linear infinite;
}

@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.hands {
	position: absolute;
	height: 84%;
	left: 0;
	bottom: 0;
	transform: translateX(-27%);
}

.gold-standard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 1.5fr);
	grid-gap: 64px;
	width: 100%;
	border-radius: 16px;
	align-items: self-start;
}

	.gold-standard-grid > div {
		padding: 5%;
	}

	.gold-standard-grid > div > h3 {
		font-size: 2.4em;
	}

.gold-standard-arrow {
	position: relative;
	height: 100%;
	width: 100%;
}

.gold-standard-arrow > img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.side-stacked-text {
	position: absolute;
	top: calc(100% / 3);
	transform: translateY(calc(-100% / 3));
	z-index: 100;
}

.side-stacked-container {
	margin-left: calc(100% / 3);
}

.plus-button {
	width: 64px;
	height: 64px;
	top: -32px;
	right: -32px;
	left: unset;
}

.farmers-background {
	background-image: url("../img/farmers.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

@media all and (max-width: 1080px) {
	.gold-standard-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}

		.gold-standard-grid > div {
			padding: 0;
		}

			.gold-standard-grid > div > h3 {
				font-size: 2.2em;
			}

	.side-stacked-text {
		position: relative;
		top: 0;
		transform: unset;
	}

	.side-stacked-container {
		margin-left: 0;
	}

		.side-stacked-container p {
			margin-top: 44px;
		}

	.plus-button {
		width: 64px;
		height: 64px;
		top: unset;
		bottom: -32px;
		right: unset;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media all and (max-width: 640px) {
	.gold-standard-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-gap: 48px;
	}

	.gold-standard-grid > div > h3 {
		font-size: 1.8em;
	}
}

@media all and (max-width: 420px) {

	.logo {
		height: 128px;
	}

	.hands {
		height: 90%;
		transform: translateX(-24%);
	}

}
