/*************************************************
 *PORTFOLIO PAGE
 *************************************************/
.PortfolioItems {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	width:100%;
}
.PortfolioItem {
	display: inline-block;
	position: relative; /* Gives our child overlay a confined space to sit in */
	width:100%;
}

/* The block that contains the icons for more info, laid over the picture element */
.PortfolioItemOverlay {
	background-color: rgba(100, 0, 255, 0.5);
	position:absolute;
	right:0;
	top:0;
}
a.ItemIcon {
	font-size:2em;
	color:#fff;
	margin:0.1em;
	float:right;
	clear:right;
}
a.ItemIcon:hover { color:#00BCFF; }

.PortfolioItem picture img {
	display:block;
	margin:auto;
}
/*************************************************
 *PORTFOLIO PAGE OVERLAYS (POPUPS)
 *************************************************/

.Portfolio .DetailOverlaysVisible {
	background-color: rgba(100, 0, 255, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	overflow-x:hidden;
	overflow-y:auto;
}
.PortfolioDetail {
	display:none;
}
.PortfolioDetailVisible {
	background-color: rgba(0, 0, 0, 0.8);
	color:#fff;
	padding:0.5em;
	position:relative;
	display:block;
}
.PortfolioDetail .icon-close {
	float:right;
	margin: 0 0.5em;
	font-size:2em;
}


/* Content for the a-tags that are styled with icons */
.PortfolioItemOverlay span { display:none; }

.PortfolioItemImages .PictureContainer {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	width:100%;
}

.PortfolioItemImages picture {
	width:100%;
}

/*************************************************
 * MEDIA QUERIES
 *************************************************/

/* Everything bigger than a phone screen */
@media only screen and (min-width: 401px) {

	.PortfolioItem {
		width:45%;
	}

}

/* This is where lines of text are at their maximum so the whole page gets a margin */
@media only screen and (min-width: 670px) {

	.PortfolioItem {
		width:30%;
	}

	.PortfolioDetailVisible {
		max-width:670px;
		margin:auto;
		left:0;
		right:0;
	}

	.PortfolioItemImages picture {
		width:50%;
	}
}
@media only screen and (min-width: 800px) {
	main {
		/* first image is closest to the viewer */
		background-image:url("../img/bottom_left.svg"), url("../img/top_right.svg");
		background-position: left bottom, right top;
		background-repeat: no-repeat, no-repeat;
	}
}