@charset "UTF-8";
/* Index CSS Document */

/*
	font-family: gastromond, serif;
	font-family: brandon-grotesque, Brandon Grotesque, sans-serif;
	Mint: #3AB0A5;
	Red: #DB4744;
	Navy: #1A2F54;
*/

/* HERO */
.index-hero p {
	max-width: 37em;
}
.hero-man-standing,
.hero-woman-ponytail,
.hero-woman-seated {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-animation: left 2.5s ease-in-out 0s 1 backwards;
	-webkit-animation: left 2.5s ease-in-out 0s 1 backwards;
	-ms-animation: left 2.5s ease-in-out 0s 1 backwards;
	animation: left 2.5s ease-in-out 0s 1 backwards;
}
@-moz-keyframes left {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-webkit-keyframes left {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-ms-keyframes left {
	0%   { left: 0; }
	100% { left: 50%; }
}
@keyframes left {
	0%   { left: 0; }
	100% { left: 50%; }
}
.hero-man-standing {
	margin-top: -14em;
	margin-left: -31.75em;
	animation-delay: 1s;
}
.hero-woman-ponytail {
	margin-top: -11em;
	margin-left: -43.5em;
	animation-delay: 2s;
}
.hero-woman-seated {
	margin-top: -2em;
	margin-left: -34em;
}
.hero-man-beard,
.hero-woman-wheelchair {
	position: absolute;
	top: 50%;
	right: 50%;
	-moz-animation: right 2.5s ease-in-out 0s 1 backwards;
	-webkit-animation: right 2.5s ease-in-out 0s 1 backwards;
	-ms-animation: right 2.5s ease-in-out 0s 1 backwards;
	animation: right 2.5s ease-in-out 0s 1 backwards;
}
@-moz-keyframes right {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-webkit-keyframes right {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-ms-keyframes right {
	0%   { right: 0; }
	100% { right: 50%; }
}
@keyframes right {
	0%   { right: 0; }
	100% { right: 50%; }
}
.hero-man-beard {
	margin-top: -11em;
	margin-right: -41em;
	animation-delay: 1.5s;
}
.hero-woman-wheelchair {
	margin-top: -4.5em;
	margin-right: -33em;
	animation-delay: .5s;
}
.hero-plant-left,
.hero-plant-right {
	position: absolute;
	top: -2em;
	-moz-animation: topPlants 2s ease-in-out 3.25s 1 backwards;
	-webkit-animation: topPlants 2s ease-in-out 3.25s 1 backwards;
	-ms-animation: topPlants 2s ease-in-out 3.25s 1 backwards;
	animation: topPlants 2s ease-in-out 3.25s 1 backwards;
}
@-moz-keyframes topPlants {
	0%   { top: -20em; }
	100% { top: -2em; }
}
@-webkit-keyframes topPlants {
	0%   { top: -20em; }
	100% { top: -2em; }
}
@-ms-keyframes topPlants {
	0%   { top: -20em; }
	100% { top: -2em; }
}
@keyframes topPlants {
	0%   { top: -20em; }
	100% { top: -2em; }
}
.hero-plant-left {
	left: 50%;
	margin-top: 1em;
	margin-left: -24em;
}
.hero-plant-right {
	right: 50%;
	margin-right: -32.5em;
}
.hero-plant-bottom {
	position: absolute;
	bottom: -7.5em;
	left: 50%;
	margin-left: -17.65em;
	-moz-animation: bottomPlants 2s ease-in-out 3.25s 1 backwards;
	-webkit-animation: bottomPlants 2s ease-in-out 3.25s 1 backwards;
	-ms-animation: bottomPlants 2s ease-in-out 3.25s 1 backwards;
	animation: bottomPlants 2s ease-in-out 3.25s 1 backwards;
}
@-moz-keyframes bottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@-webkit-keyframes bottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@-ms-keyframes bottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@keyframes bottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@media screen and (min-width: 1850px) and (min-height: 1100px) {	
	.hero-man-standing {
		margin-left: -38em;
	}
	.hero-woman-ponytail {
		margin-left: -56em;
	}
	.hero-woman-seated {
		margin-left: -43em;
	}
	.hero-man-beard {
		margin-right: -50em;
	}
	.hero-woman-wheelchair {
		margin-right: -40em;
	}
}
@media screen and (max-width: 1250px) {
	.hero-woman-ponytail {
		margin-left: -39em;
	}
	.hero-man-beard {
		margin-top: -10em;
		margin-right: -39em;
	}
}
@media screen and (max-width: 1100px) {
	.hero-man-standing,
	.hero-woman-ponytail,
	.hero-woman-seated {
		left: 0;
	}
	@-moz-keyframes left {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-webkit-keyframes left {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-ms-keyframes left {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@keyframes left {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	.hero-man-standing {
		margin-left: -1.5em;
	}
	.hero-woman-ponytail {
		margin-left: -7em;
	}
	.hero-woman-seated {
		margin-left: -3em;
	}
	.hero-man-beard,
	.hero-woman-wheelchair {
		right: 0;
	}
	@-moz-keyframes right {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-webkit-keyframes right {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-ms-keyframes right {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@keyframes right {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	.hero-man-beard {
		margin-right: -4em;
	}
	.hero-woman-wheelchair {
		margin-right: -3em;
	}
	.hero-plant-left {
		left: 0;
		margin-top: -2em;
		margin-left: 4em;
	}
	.hero-plant-right {
		right: 0;
		margin-top: -5em;
		margin-right: 2em;
	}
}
@media screen and (max-width: 900px) {
	.hero-man-standing {
		margin-left: -4em;
	}
	.hero-woman-ponytail {
		margin-left: -7.5em;
	}
	.hero-woman-seated {
		margin-left: -4em;
	}
	.hero-man-beard {
		margin-right: -6em;
	}
	.hero-woman-wheelchair {
		margin-right: -4em;
	}
	.hero-plant-left {
		margin-top: -3em;
		margin-left: -7em;
	}
	.hero-plant-right {
		margin-top: -6em;
		margin-right: -5em;
	}
	.hero-plant-bottom {
		margin-left: -17em;
		margin-bottom: -2em;
		transform: scale(.9);
	}
}
@media screen and (max-width: 650px) {
	.hero-man-standing,
	.hero-woman-ponytail,
	.hero-woman-seated,
	.hero-man-beard,
	.hero-woman-wheelchair {
		display: none;
	}
}

/* DESIGN TYPES */
.design-o {
	overflow: hidden;
}
.design {
	display: flex;
	margin: 3em 0 0 -3em;
}
.design-i {
	flex: 1 0 25%;
	width: 25%;
	margin: 0 0 0 3em;
	text-align: center;
}
.design-i .button {
	width: 100%;
}
.design-i:nth-of-type(odd) h4 a {
	color: #3365A0;
}
.design-i:nth-of-type(even) h4 a {
	color: #DB4744;
}
.design-i h4 a:hover {
	color: #3AB0A5;
}
.design-i:nth-of-type(odd) .button {
	border-color: #3365A0;
	color: #3365A0;
}
.design-i:nth-of-type(even) .button {
	border-color: #DB4744;
	color: #DB4744;
}
.design-i:nth-of-type(odd) .button:after {
	background: #3365A0;
}
.design-i:nth-of-type(even) .button:after {
	background: #DB4744;
}
.design-i .button:hover {
	color: #FFF;
}
.design-i-wedding {
	position: relative;
	padding-top: 14em;
}
.design-wedding {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -9.5em;
}
@media screen and (max-width: 1250px) and (min-width: 1001px) {
	.design h4 {
		font-size: 1.5em;
	}
}
@media screen and (max-width: 1000px) {
	.design {
		flex-wrap: wrap;
		margin: 0;
	}
	.design-i {
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
	}
	.design-i:nth-of-type(3) {
		margin-top: 2em;
	}
	.design-i .button {
		width: auto;
	}
}
@media screen and (max-width: 500px) {
	.design-i .button {
		width: 100%;
	}
}