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

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

/* GRAPHICS HERO */
.hero-graphics-ampersand,
.hero-graphics-brochure {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-animation: graphicsLeft 2s ease-in-out 0s 1 backwards;
	-webkit-animation: graphicsLeft 2s ease-in-out 0s 1 backwards;
	-ms-animation: graphicsLeft 2s ease-in-out 0s 1 backwards;
	animation: graphicsLeft 2s ease-in-out 0s 1 backwards;
}
@-moz-keyframes graphicsLeft {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-webkit-keyframes graphicsLeft {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-ms-keyframes graphicsLeft {
	0%   { left: 0; }
	100% { left: 50%; }
}
@keyframes graphicsLeft {
	0%   { left: 0; }
	100% { left: 50%; }
}
.hero-graphics-ampersand {
	margin-top: -4em;
	margin-left: -37em;
}
.hero-graphics-brochure {
	margin-top: 7em;
	margin-left: -43em;
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.hero-graphics-pantone {
	position: absolute;
	top: 50%;
	right: 50%;
	margin-right: -42em;
	-moz-animation: graphicsPantone 2s ease-in-out .5s 1 backwards;
	-webkit-animation: graphicsPantone 2s ease-in-out .5s 1 backwards;
	-ms-animation: graphicsPantone 2s ease-in-out .5s 1 backwards;
	animation: graphicsPantone 2s ease-in-out .5s 1 backwards;
}
@-moz-keyframes graphicsPantone {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-webkit-keyframes graphicsPantone {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-ms-keyframes graphicsPantone {
	0%   { right: 0; }
	100% { right: 50%; }
}
@keyframes graphicsPantone {
	0%   { right: 0; }
	100% { right: 50%; }
}
.hero-graphics-plants-left,
.hero-graphics-plants-right {
	position: absolute;
	top: -3em;
	-moz-animation: graphicsTopPlants 2s ease-in-out 1.5s 1 backwards;
	-webkit-animation: graphicsTopPlants 2s ease-in-out 1.5s 1 backwards;
	-ms-animation: graphicsTopPlants 2s ease-in-out 1.5s 1 backwards;
	animation: graphicsTopPlants 2s ease-in-out 1.5s 1 backwards;
}
@-moz-keyframes graphicsTopPlants {
	0%   { top: -22em; }
	100% { top: -3em; }
}
@-webkit-keyframes graphicsTopPlants {
	0%   { top: -22em; }
	100% { top: -3em; }
}
@-ms-keyframes graphicsTopPlants {
	0%   { top: -22em; }
	100% { top: -3em; }
}
@keyframes graphicsTopPlants {
	0%   { top: -22em; }
	100% { top: -3em; }
}
.hero-graphics-plants-left {
	left: 50%;
	margin-left: -36em;
	-moz-animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-ms-animation-delay: 2s;
	animation-delay: 2s;
}
.hero-graphics-plants-right {
	right: 50%;
	margin-top: 3em;
	margin-right: -35em;
}
.hero-graphics-plants-bottom {
	position: absolute;
	left: 50%;
	bottom: -5.5em;
	margin-left: -19.16em;
	-moz-animation: graphicsBottomPlants 2s ease-in-out 2.5s 1 backwards;
	-webkit-animation: graphicsBottomPlants 2s ease-in-out 2.5s 1 backwards;
	-ms-animation: graphicsBottomPlants 2s ease-in-out 2.5s 1 backwards;
	animation: graphicsBottomPlants 2s ease-in-out 2.5s 1 backwards;
}
@-moz-keyframes graphicsBottomPlants {
	0%   { bottom: -23em; }
	100% { bottom: -5.5em; }
}
@-webkit-keyframes graphicsBottomPlants {
	0%   { bottom: -23em; }
	100% { bottom: -5.5em; }
}
@-ms-keyframes graphicsBottomPlants {
	0%   { bottom: -23em; }
	100% { bottom: -5.5em; }
}
@keyframes graphicsBottomPlants {
	0%   { bottom: -23em; }
	100% { bottom: -5.5em; }
}
@media screen and (min-width: 1850px) and (min-height: 1100px) {	
	.hero-graphics-plants-left {
		margin-left: -38em;
	}
	.hero-graphics-ampersand {
		margin-top: -8em;
		margin-left: -40em;
	}
	.hero-graphics-brochure {
		margin-top: 9em;
		margin-left: -50em;
	}
	.hero-graphics-pantone {
		margin-right: -50em;
	}
}
@media screen and (max-width: 1300px) {
	.hero-graphics-ampersand,
	.hero-graphics-brochure {
		left: 0;
	}
	@-moz-keyframes graphicsLeft {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-webkit-keyframes graphicsLeft {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-ms-keyframes graphicsLeft {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@keyframes graphicsLeft {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	.hero-graphics-ampersand {
		margin-left: .5em;
	}
	.hero-graphics-brochure {
		margin-left: -6em;
	}
	.hero-graphics-pantone {
		right: 0;
		margin-right: -6em;
	}
	@-moz-keyframes graphicsPantone {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-webkit-keyframes graphicsPantone {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-ms-keyframes graphicsPantone {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@keyframes graphicsPantone {
		0%   { right: -50%; }
		100% { right: 0; }
	}
}
@media screen and (max-width: 1100px) {
	.hero-graphics-ampersand {
		margin-top: -10em;
	}
	.hero-graphics-brochure {
		margin-top: 3em;
		margin-left: -8em;
	}
	.hero-graphics-plants-left {
		left: 0;
		margin-top: -4em;
		margin-left: -4em;
	}
	.hero-graphics-plants-right {
		right: 0;
		margin-top: -1em;
		margin-right: -2em;
	}
}
@media screen and (max-width: 900px) {
	.hero-graphics-ampersand {
		margin-top: -8em;
		margin-left: -1em;
	}
}
@media screen and (max-width: 650px) {
	.hero-graphics-ampersand,
	.hero-graphics-brochure,
	.hero-graphics-pantone {
		display: none;
	}
	.hero .hero-graphics-plants-left {
		transform: scale(.6);
		margin-top: -7em;
		margin-left: -6em;
	}
	.hero .hero-graphics-plants-right {
		transform: scale(.65) rotate(45deg);
		margin-top: -3.5em;
		margin-right: -4.5em;
	}
	.hero-graphics-plants-bottom {
		margin-left: -19em;
	}
}
@media screen and (max-width: 500px) {
	.hero .hero-graphics-plants-left {
		transform: scale(.5);
		margin-left: -7em;
	}
	.hero .hero-graphics-plants-right {
		transform: scale(.55) rotate(45deg);
		margin-top: -4.25em;
		margin-right: -5.5em;
	}
	.hero .hero-graphics-plants-bottom {
		transform: scale(.55);
		margin-bottom: -1em;
	}
}

/* GRAPHICS PORTFOLIO */
.logos {
	display: flex;
	margin-top: 3em;
}
.logos-i {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 0 25%;
	width: 25%;
}
.logos-i-stitching {
	margin: 0 2em;
}
.logo-spark-reverse,
.logo-stitching-reverse,
.logo-pine-reverse {
	opacity: 0;
}
@media screen and (min-width: 1151px) {
	.logos-i-spark:hover .logo-spark,
	.logos-i-stitching:hover .logo-stitching,
	.logos-i-pine:hover .logo-pine {
		transform: scale(-1, 1);
	}
	.logos-i-spark:hover .logo-spark-background {
		fill: #373737;
	}
	.logos-i-stitching:hover .logo-stitching-background {
		fill: #1A2F54;
	}
	.logos-i-pine:hover .logo-pine-background {
		fill: #0F351B;
	}
	.logos-i-spark:hover .logo-spark-normal,
	.logos-i-stitching:hover .logo-stitching-normal,
	.logos-i-pine:hover .logo-pine-normal {
		opacity: 0;
	}
	.logos-i-spark:hover .logo-spark-reverse,
	.logos-i-stitching:hover .logo-stitching-reverse,
	.logos-i-pine:hover .logo-pine-reverse {
		opacity: 1;
	}
}
@media screen and (max-width: 1150px) {
	.logos {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
	}
	.logos-i {
		flex: 0 0 50%;
		width: 50%;
		margin: 1em 0 0;
	}
	.logos-show .logo-spark,
	.logos-show .logo-stitching,
	.logos-show .logo-pine {
		transform: scale(-1, 1);
	}
	.logos-show .logo-spark-background {
		fill: #373737;
	}
	.logos-show .logo-spark-normal,
	.logos-show .logo-stitching-normal,
	.logos-show .logo-pine-normal {
		opacity: 0;
	}
	.logos-show .logo-spark-reverse,
	.logos-show .logo-stitching-reverse,
	.logos-show .logo-pine-reverse {
		opacity: 1;
	}
	
	.logos-show .logo-stitching-background {
		fill: #1A2F54;
	}
	.logos-show .logo-pine-background {
		fill: #0F351B;
	}
}
@media screen and (max-width: 800px) {
	.logos-i {
		flex: 0 0 100%;
		width: 100%;
	}
}