/*@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #222;
}*/
.dark {
	--text-primary: #b6b6b6;
	--text-secondary: #ececec;
	--bg-primary: #333;
	--bg-secondary: #141418;
	--sub-text: #e6772e;
	--opacity: 0.1;
  }
  
  .light {
	--text-primary: #1f1f1f;
	--text-secondary: #000000;
	--bg-primary: #ffffff;
	--bg-img: url(../images/bg-light.jpg) repeat 0 0 fixed;
	--bg-secondary: #555555;
	--sub-text: #e6772e;
	--opacity: 0.4;
  }
.container
{
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20px auto;
height: 100%;
}
.container .card
{
	position: relative;
	height: 400px;
	display: flex;
	width: 25%;
	margin: 1rem;
	/*box-shadow: 0 5px 15px rgba(0,0,0,.4);
	background: rgba(0,0,0,.2);*/
	flex: 1 0 21%;
}
.container .card .imgBx
{
	/* position: absolute;
	top: 0;
	left: 0; */
	height: 100%;
	width: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s ease-in-out;
	overflow: hidden;
	background-color: transparent;
	box-shadow: -6px -6px 10px rgba(255,255,255,0.1), 6px 6px 10px rgba(0, 0, 0, 0.4);
}
.card-content p{
	color: #fff;
}
#design img{
}
#print img{
	width: 90%;
}
#pack img{
	width: 80%;
	transform: translate(-10px,10px);
}
#dist img{
	width: 90%;
}
#concepts img{
	width: 90%;
	left: -20px;
	position: relative;
	filter: hue-rotate(70deg);
}
#branding img{
	width: 90%;
	filter: hue-rotate(130deg);

}
#production img{
	width: 90%;
	filter: hue-rotate(70deg);

}
#digital img{
	width: 90%;
	filter: hue-rotate(10deg);

}
.container .card:hover .imgBx
{
	width: 150px;
	height: 150px;
	left: -85px;
	background: transparent;
	bottom: calc(50%);
	transition: 0.5s ease-in-out;
	box-shadow: none;
	filter: hue-rotate(30deg) brightness(.3);
	z-index: -1;
}
.container .card .imgBx:before
{
	content: attr(data-text);
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 6em;
	color: rgba(255,255,255,.05);
	font-weight: 700;
}

.container .card .imgBx img
{
	/*max-width: 100px;*/
	width: 75%;
	transition: 0.5s ease-in-out;
}
.container .card:hover .imgBx img
{
	/*max-width: 75px;*/
}
.container .card .card-content
{
	position: absolute;
	opacity: 0;
	right: 0;
	/*width: calc(100% - 75px);*/
	height: 100%;
	padding: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: inset -6px -6px 10px rgba(255,255,255,0.1), inset 6px 6px 10px rgba(0, 0, 0, 0.4);
}
.container .card .card-content h3{
	color: #e6772e;
	margin-bottom: 1em;
	font-size: 2em;
	font-weight: 300;
} 
.container .card .card-content a
{
	display: inline-block;
	margin-top: 10px;
	padding: 5px 10px;
	background: #333;
	text-decoration: none;
	color: #fff;
}
@media (max-width: 992px)
{
	.container
	{
		position: relative;
		width: 100%;
		flex-direction: column;
    	align-items: center;
	}
	.container .card
	{
		width: 400px;
	}
}
@media (max-width: 768px)
{
	.container .card 
	{
		max-width: 300px;
		height: auto;
		flex-direction: column;
		margin: 1em auto;
	}
	.container .card .card-content h3 {
		font-size: 1.25em;
		margin: .5em auto;
		color: #e6772e;
	}
	.container .card .card-content p {

	}
	.container .card .imgBx
	{
		position: relative;
	}
	.container .card .imgBx,
	.container .card:hover .imgBx
	{
		width: 100%;
		height: 200px;
		left: 0;
		background: transparent;
	}
	.container .card .imgBx img,
	.container .card:hover .imgBx img
	{
		max-width: 60%;
	}
	.imgBx:hover, .imgBx:active {
		opacity: .3;
	}
	.container .card .card-content
	{
		/* display: none; */
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.container .card .card-content.clicked {
		display: block;
		position: relative;
	}
}

@media (max-width: 500px) {

	


}