body {
	align-content: center;
	justify-content: center;
	height: 100%;
}

#container {
	max-width: 600px;
	margin: 0 15px;
}

h2 {
	font-weight: normal;
}

.portfolio-item {
	color: #ffffff;
	border-radius: 20px;
	padding: 20px;
	height: 100px;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 0 20px;
	position: relative;
	overflow: hidden;
	transition: all .5s;
}

.case-study {
	color: #ffffff;
	border-radius: 20px;
	padding: 10px 20px;
	height: 50px;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	margin: -10px 0 20px 40px;
	position: relative;
	overflow: hidden;
	transition: all .5s;
}

.portfolio-item:hover {
	//box-shadow: 0 0 10px 5px rgba(0,0,0,0.25);
	transform: scale(1.1);
	z-index: 1;
}

.case-study:hover {
	margin-left: 0;
}

.portfolio-item#noredink {
	background: #ff3e80;
}

.case-study#noredink {
	background: rgba(255,62,128,.8);
}

.portfolio-item#noredink-internal {
	background: #e68800;
}

.case-study#noredink-internal {
	background: rgba(230,136,0,.8)
}

.portfolio-item#loyal3 {
	background-color: #00a4fa;
}

.portfolio-item#schilling {
	background-color: #00a4fa;
}

.portfolio-item#sassoon {
	background-color: #6fc704;
}

.portfolio-item#transition {
	background-color: #A839E7;
}

.portfolio-item .bg-image {
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	margin: 0 -20px;
	opacity: .2;
	filter: blur(5px);
	transition: .5s all;
	filter: saturation(0);
}

.portfolio-item#noredink .bg-image {
	background-image: url(noredink-thumb.png);
}

.portfolio-item#noredink-internal .bg-image {
	background-image: url(noredink-internal-thumb.png);
	filter: grayscale(100), blur(5px);
}

.portfolio-item#loyal3 .bg-image {
	background-image: url(loyal3-thumb.png);
}

.portfolio-item#schilling .bg-image {
	background-image: url(schilling-thumb.png);
}

.portfolio-item#sassoon .bg-image {
	background-image: url(sassoon-thumb.png);
}

.portfolio-item#transition .bg-image {
	background-image: url(transition-thumb.png);
}

.portfolio-item:hover .bg-image {
	filter: blur(0);
	opacity: .2;
}

.portfolio-item#noredink:hover {
	box-shadow: 0 0 5px rgb(235, 80, 128);
}

.portfolio-item#noredink-internal:hover {
	box-shadow: 0 0 5px rgb(242, 143, 0);
}

.portfolio-item#loyal3:hover {
	box-shadow: 0 0 5px rgb(32, 174, 255);
}

.portfolio-item#schilling:hover {
	box-shadow: 0 0 5px rgb(32, 174, 255);
}

.portfolio-item#sassoon:hover {
	box-shadow: 0 0 5px rgb(86, 200, 0);
}

.portfolio-item#transition:hover {
	box-shadow: 0 0 5px rgb(168, 57, 231);
}

.portfolio-item h1 {
	font-size: 25px;
	margin: 0;
}

.case-study h1 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.portfolio-item h2 {
	font-size: 20px;
	margin: 0;
}

.metadata a#resume:hover {
	background-color: #ffbd6c;
}

.metadata a#contact:hover {
	background-color: #20dfff;
}

@media (max-width: 960px) {

	h1 {
		font-size: 25px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	.metadata {
		flex-direction: column;
	}
	
	.metadata a {
		flex-basis: 50px;
		line-height: 50px;
	}

}