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

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

/* WEDDING HERO */
.wedding-hero p {
	max-width: 49em;
}
.hero-wedding-couple {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -5em;
	margin-left: -44em;
	-moz-animation: weddingCouple 2s ease-in-out .5s 1 backwards;
	-webkit-animation: weddingCouple 2s ease-in-out .5s 1 backwards;
	-ms-animation: weddingCouple 2s ease-in-out .5s 1 backwards;
	animation: weddingCouple 2s ease-in-out .5s 1 backwards;
}
@-moz-keyframes weddingCouple {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-webkit-keyframes weddingCouple {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-ms-keyframes weddingCouple {
	0%   { left: 0; }
	100% { left: 50%; }
}
@keyframes weddingCouple {
	0%   { left: 0; }
	100% { left: 50%; }
}
.hero-wedding-pen,
.hero-wedding-invitation {
	position: absolute;
	top: 50%;
	right: 50%;
	-moz-animation: weddingRight 2s ease-in-out 0s 1 backwards;
	-webkit-animation: weddingRight 2s ease-in-out 0s 1 backwards;
	-ms-animation: weddingRight 2s ease-in-out 0s 1 backwards;
	animation: weddingRight 2s ease-in-out 0s 1 backwards;
}
@-moz-keyframes weddingRight {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-webkit-keyframes weddingRight {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-ms-keyframes weddingRight {
	0%   { right: 0; }
	100% { right: 50%; }
}
@keyframes weddingRight {
	0%   { right: 0; }
	100% { right: 50%; }
}
.hero-wedding-pen {
	margin-top: -15.5em;
	margin-right: -34em;
}
.hero-wedding-invitation {
	margin-top: 2em;
	margin-right: -45em;
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.hero-wedding-plants-left,
.hero-wedding-plants-right {
	position: absolute;
	top: -1em;
	-moz-animation: weddingTopPlants 2s ease-in-out 1.5s 1 backwards;
	-webkit-animation: weddingTopPlants 2s ease-in-out 1.5s 1 backwards;
	-ms-animation: weddingTopPlants 2s ease-in-out 1.5s 1 backwards;
	animation: weddingTopPlants 2s ease-in-out 1.5s 1 backwards;
}
@-moz-keyframes weddingTopPlants {
	0%   { top: -20em; }
	100% { top: -1em; }
}
@-webkit-keyframes weddingTopPlants {
	0%   { top: -20em; }
	100% { top: -1em; }
}
@-ms-keyframes weddingTopPlants {
	0%   { top: -20em; }
	100% { top: -1em; }
}
@keyframes weddingTopPlants {
	0%   { top: -20em; }
	100% { top: -1em; }
}
.hero-wedding-plants-left {
	left: 50%;
	margin-left: -34em;
}
.hero-wedding-plants-right {
	right: 50%;
	margin-right: -20em;
	-moz-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
.hero-wedding-plants-bottom {
	position: absolute;
	left: 50%;
	bottom: -13.5em;
	margin-left: -17.36em;
	-moz-animation: weddingBottomPlants 2s ease-in-out 2s 1 backwards;
	-webkit-animation: weddingBottomPlants 2s ease-in-out 2s 1 backwards;
	-ms-animation: weddingBottomPlants 2s ease-in-out 2s 1 backwards;
	animation: weddingBottomPlants 2s ease-in-out 2s 1 backwards;
}
@-moz-keyframes weddingBottomPlants {
	0%   { bottom: -31em; }
	100% { bottom: -13.5em; }
}
@-webkit-keyframes weddingBottomPlants {
	0%   { bottom: -31em; }
	100% { bottom: -13.5em; }
}
@-ms-keyframes weddingBottomPlants {
	0%   { bottom: -31em; }
	100% { bottom: -13.5em; }
}
@keyframes weddingBottomPlants {
	0%   { bottom: -31em; }
	100% { bottom: -13.5em; }
}
@media screen and (min-width: 1850px) and (min-height: 1100px) {	
	.hero-wedding-couple {
		margin-top: -6em;
		margin-left: -53em;
	}
	.hero-wedding-pen {
		margin-top: -19em;
		margin-right: -40em;
	}
	.hero-wedding-invitation {
		margin-top: 4em;
		margin-right: -55em;
	}
}
@media screen and (max-width: 1300px) {
	.hero-wedding-couple {
		margin-top: -3em;
		margin-left: -42em;
	}
	.hero-wedding-invitation {
		margin-right: -40em;
	}
}
@media screen and (max-width: 1100px) {
	.hero-wedding-couple {
		left: 0;
		margin-top: -8em;
		margin-left: -7em;
	}
	@-moz-keyframes weddingCouple {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-webkit-keyframes weddingCouple {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-ms-keyframes weddingCouple {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@keyframes weddingCouple {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	.hero-wedding-pen,
	.hero-wedding-invitation {
		right: 0;
	}
	@-moz-keyframes weddingRight {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-webkit-keyframes weddingRight {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-ms-keyframes weddingRight {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@keyframes weddingRight {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	.hero-wedding-pen {
		margin-right: -2em;
	}
	.hero-wedding-invitation {
		margin-right: -7em;
	}
	.hero-wedding-plants-left {
		left: 0;
		margin-top: -1em;
		margin-left: -3em;
	}
	.hero-wedding-plants-right {
		right: 0;
		margin-top: -1.5em;
		margin-right: 8em;
	}
}
@media screen and (max-width: 900px) {
	.hero-wedding-plants-left {
		margin-top: -2em;
		margin-left: -4em;
	}
	.hero-wedding-plants-right {
		margin-top: -2.5em;
		margin-right: 5em;
	}
}
@media screen and (max-width: 650px) {
	.hero-wedding-couple,
	.hero-wedding-pen,
	.hero-wedding-invitation {
		display: none;
	}
	.hero .hero-wedding-plants-left {
		transform: scale(.7) rotate(20deg);
		margin-top: -3em;
		margin-left: -8.5em;
	}
	.hero-wedding-plants-right {
		margin-top: -3.5em;
		margin-right: -1em;
	}
}
@media screen and (max-width: 500px) {
	.hero .hero-wedding-plants-left {
		transform: scale(.6) rotate(20deg);
		margin-top: -5em;
		margin-left: -8em;
	}
}

/* WEDDING PORTFOLIO */
.wedding {
	display: flex;
	width: 100%;
	max-width: 50em;
	margin: 3em auto 0;
}
.wedding-i {
	position: relative;
	flex: 1 0 40%;
	width: 40%;
}
.wedding-i:first-of-type {
	margin-right: 5em;
}
.wedding-invitation {
	position: relative;
	width: 100%;
}
.joly-rsvp,
.joly-thank-you,
.davis-hotels,
.davis-rsvp {
	position: absolute;
	width: 100%;
	top: 50%;
	right: 0;
}
.joly-rsvp,
.davis-hotels {
	z-index: -1;
}
.joly-thank-you,
.davis-rsvp {
	z-index: -2;
}
.joly-rsvp {
	margin-top: -45%;
}
.joly-thank-you {
	margin-top: -65%;
}
.davis-hotels {
	margin-top: -45%;
}
.davis-rsvp {
	margin-top: -40%;
}
@media screen and (min-width: 1101px) {
	.joly-wedding:hover .joly-invitation {
		transform: scale(.5);
		margin-left: -30%;
	}
	.joly-wedding:hover .joly-rsvp {
		transform: scale(.5);
		margin-top: -70%;
		margin-right: -25%;
	}
	.joly-wedding:hover .joly-thank-you {
		transform: scale(.4);
		margin-top: -44%;
		margin-right: -25%;
	}
	.davis-wedding:hover .davis-invitation {
		transform: scale(.5);
		margin-left: -25%;
	}
	.davis-wedding:hover .davis-hotels {
		transform: scale(.475);
		margin-top: -63%;
		margin-right: -34%;
	}
	.davis-wedding:hover .davis-rsvp {
		transform: scale(.575);
		margin-top: -16%;
		margin-right: -34%;
	}
}
@media screen and (max-width: 1100px) {
	.wedding-i:first-of-type {
		margin-right: 2em;
	}
	.wedding-show .joly-invitation {
		transform: scale(.5);
		margin-left: -30%;
	}
	.wedding-show .joly-rsvp {
		transform: scale(.5);
		margin-top: -70%;
		margin-right: -25%;
	}
	.wedding-show .joly-thank-you {
		transform: scale(.4);
		margin-top: -44%;
		margin-right: -25%;
	}
	.wedding-show .davis-invitation {
		transform: scale(.5);
		margin-left: -25%;
	}
	.wedding-show .davis-hotels {
		transform: scale(.475);
		margin-top: -63%;
		margin-right: -34%;
	}
	.wedding-show .davis-rsvp {
		transform: scale(.575);
		margin-top: -16%;
		margin-right: -34%;
	}
}
@media screen and (max-width: 800px) {
	.wedding {
		flex-wrap: wrap;
	}
	.wedding-i {
		flex: 0 0 100%;
		width: 100%;
	}
	.wedding-i:first-of-type {
		margin: 0 0 2em 0;
	}
	.wedding-show .joly-invitation {
		margin-left: -27%;
	}
	.wedding-show .joly-rsvp {
		margin-right: -27%;
	}
	.wedding-show .joly-thank-you {
		margin-right: -27%;
	}
	.wedding-show .davis-invitation {
		margin-left: -27%;
	}
	.wedding-show .davis-hotels {
	 	transform: scale(.4);
		margin-top: -60%;
		margin-right: -27%;
	}
	.wedding-show .davis-rsvp {
	 	transform: scale(.5);
		margin-top: -20%;
		margin-right: -27%;
	}
}