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

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

/* WEBSITE HERO */
.hero-website-desktop {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -2em;
	margin-left: -55.5em;
	-moz-animation: websiteDesktop 2s ease-in-out 0s 1 backwards;
	-webkit-animation: websiteDesktop 2s ease-in-out 0s 1 backwards;
	-ms-animation: websiteDesktop 2s ease-in-out 0s 1 backwards;
	animation: websiteDesktop 2s ease-in-out 0s 1 backwards;
}
@-moz-keyframes websiteDesktop {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-webkit-keyframes websiteDesktop {
	0%   { left: 0; }
	100% { left: 50%; }
}
@-ms-keyframes websiteDesktop {
	0%   { left: 0; }
	100% { left: 50%; }
}
@keyframes websiteDesktop {
	0%   { left: 0; }
	100% { left: 50%; }
}
.hero-website-mobile {
	position: absolute;
	top: 50%;
	right: 50%;
	margin-top: 7em;
	margin-right: -37em;
	-moz-animation: websiteMobile 2s ease-in-out .5s 1 backwards;
	-webkit-animation: websiteMobile 2s ease-in-out .5s 1 backwards;
	-ms-animation: websiteMobile 2s ease-in-out .5s 1 backwards;
	animation: websiteMobile 2s ease-in-out .5s 1 backwards;
}
@-moz-keyframes websiteMobile {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-webkit-keyframes websiteMobile {
	0%   { right: 0; }
	100% { right: 50%; }
}
@-ms-keyframes websiteMobile {
	0%   { right: 0; }
	100% { right: 50%; }
}
@keyframes websiteMobile {
	0%   { right: 0; }
	100% { right: 50%; }
}
.hero-website-plants-left,
.hero-website-plants-right {
	position: absolute;
	top: -1em;
	-moz-animation: websiteTopPlants 2s ease-in-out 1s 1 backwards;
	-webkit-animation: websiteTopPlants 2s ease-in-out 1s 1 backwards;
	-ms-animation: websiteTopPlants 2s ease-in-out 1s 1 backwards;
	animation: websiteTopPlants 2s ease-in-out 1s 1 backwards;
}
@-moz-keyframes websiteTopPlants {
	0%   { top: -25em; }
	100% { top: -1em; }
}
@-webkit-keyframes websiteTopPlants {
	0%   { top: -25em; }
	100% { top: -1em; }
}
@-ms-keyframes websiteTopPlants {
	0%   { top: -25em; }
	100% { top: -1em; }
}
@keyframes websiteTopPlants {
	0%   { top: -25em; }
	100% { top: -1em; }
}
.hero-website-plants-left {
	left: 50%;
	margin-left: -35em;
}
.hero-website-plants-right {
	right: 50%;
	margin-right: -35.5em;
	-moz-animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
.hero-website-plants-bottom {
	position: absolute;
	left: 50%;
	bottom: -7.5em;
	margin-left: -22em;
	-moz-animation: websiteBottomPlants 2s ease-in-out 2s 1 backwards;
	-webkit-animation: websiteBottomPlants 2s ease-in-out 2s 1 backwards;
	-ms-animation: websiteBottomPlants 2s ease-in-out 2s 1 backwards;
	animation: websiteBottomPlants 2s ease-in-out 2s 1 backwards;
}
@-moz-keyframes websiteBottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@-webkit-keyframes websiteBottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@-ms-keyframes websiteBottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@keyframes websiteBottomPlants {
	0%   { bottom: -25em; }
	100% { bottom: -7.5em; }
}
@media screen and (min-width: 1850px) and (min-height: 1100px) {	
	.hero-website-desktop {
		margin-top: -5em;
		margin-left: -70em;
	}
	.hero-website-mobile {
		margin-top: 1em;
		margin-right: -45em;
	}
}
@media screen and (max-width: 1100px) {
	.hero-website-desktop {
		left: 0;
		margin-top: -3em;
		margin-left: -20em;
	}
	@-moz-keyframes websiteDesktop {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-webkit-keyframes websiteDesktop {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@-ms-keyframes websiteDesktop {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	@keyframes websiteDesktop {
		0%   { left: -50%; }
		100% { left: 0; }
	}
	.hero-website-mobile {
		right: 0;
		margin-top: 2em;
		margin-right: -2em;
	}
	@-moz-keyframes websiteMobile {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-webkit-keyframes websiteMobile {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@-ms-keyframes websiteMobile {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	@keyframes websiteMobile {
		0%   { right: -50%; }
		100% { right: 0; }
	}
	.hero-website-plants-left {
		left: 0;
		margin-left: -3em;
	}
	.hero-website-plants-right {
		right: 0;
		margin-top: -5em;
		margin-right: -1em;
	}
}
@media screen and (max-width: 900px) {
	.hero-website-plants-left {
		margin-top: -3em;
	}
	.hero-website-plants-right {
		margin-top: -8em;
	}
}
@media screen and (max-width: 650px) {
	.hero-website-desktop,
	.hero-website-mobile {
		display: none;
	}
	.hero .hero-website-plants-left {
		margin-top: -4em;
	}
	.hero .hero-website-plants-right {
		transform: scale(.6) rotate(20deg);
		margin-top: -9.5em;
		margin-right: -4em;
	}
}
@media screen and (max-width: 500px) {
	.hero .hero-website-plants-right {
		transform: scale(.5) rotate(20deg);
		margin-top: -9em;
		margin-right: -4em;
	}
}

/* WEBSITE PORTFOLIO */
.portfolio {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 3em 0;
}
.portfolio + .portfolio {
	margin-top: 7em;
}
.portfolio-desktop {
	position: relative;
	flex: 0 0 36.67em;
	width: 36.67em;
}
.portfolio-mobile {
	position: relative;
	display: flex;
	justify-content: center;
	flex: 1 0 20%;
	width: 20%;
}
.portfolio-device {
	position: absolute;
	z-index: -1;
}
.portfolio-website {
	position: relative;
	overflow: hidden;
}
.portfolio-desktop .portfolio-website {
	width: 27.7em;
	height: 17.45em;
	margin: 1.3em 0 0 4.5em;
}
.portfolio-mobile .portfolio-website {
	width: 8.1em;
	height: 14.55em;
	margin: .65em 0 0;
}
.portfolio-website img {
	position: absolute;
	margin-top: 0;
	transition: margin 1.5s ease-in-out;
}
.portfolio-mobile.portfolio-curtis-swisher img {
	transition: margin 4s ease-in-out;
}
@media screen and (min-width: 1001px) {
	.portfolio-desktop.portfolio-curtis-swisher .portfolio-website:hover img {
		margin-top: -25.1em;
	}
	.portfolio-mobile.portfolio-curtis-swisher .portfolio-website:hover img {
		margin-top: -65.5em;
	}
	.portfolio-desktop.portfolio-my-career-quest .portfolio-website:hover img {
		margin-top: -22.15em;
	}
	.portfolio-mobile.portfolio-my-career-quest .portfolio-website:hover img {
		margin-top: -19.05em;
	}	
}
@media screen and (max-width: 1000px) {
	.portfolio-desktop,
	.portfolio-mobile {
		font-size: .7em;
	}
}
@media screen and (max-width: 750px) {
	.portfolio-o {
		display: flex;
		margin: 2em 0;
	}
	.portfolio {
		flex: 0 0 50%;
		width: 50%;
		margin: 0;
	}
	.portfolio + .portfolio {
		margin: 0;
	}
	.portfolio-mobile {
		flex: 0 0 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 1em;
	}
	.portfolio-desktop {
		display: none;
	}
}
@media screen and (max-width: 550px) {
	.portfolio-o {
		flex-wrap: wrap;
	}
	.portfolio {
		flex: 1 0 100%;
		width: 100%;
	}
	.portfolio + .portfolio {
		margin: 4em 0 0;
	}
}