.grid-container .cell .card
{
	position: relative;
	height: calc(300px - 75px);
	background: #fff;
	float: left;
	margin: 25px auto;
	border-style: outset;
	border-radius: 10px;
	transition: 0.5s;
	display: block;
	text-decoration: none;
}
.grid-container .cell .card .card-section
{
	position: relative;
	top: 0;
	left: 0;
	align-content: center;
	transition: 0.5s;
	/* z-index: 1; */
}
.grid-container .cell .card:hover 
{
	background: #002157;
	opacity: 1;
	transition: 0.5s;
	border-style: outset;
	border-radius: 10px;
}
.grid-container .cell .card:hover .card-section
{
	top: 10px;
	align-content: center;
	bottom: calc(100% - 20px);
	transition: 0.5s;
	opacity: 1;
	color: #fff;
}

.grid-container .cell .card .card-section img
{
	position: relative;
	content-align: center;
	border-style: inset;
	border-radius: 10px;
	border: 1;
	transition: 0.5s;
}

.grid-container .cell .card:hover .card-section img
{
	opacity: 0;
	color: #002157;
	border-radius: 10px;
	transition: 0.5s;
}
.grid-container .cell .card .card-section h3
{
	position: relative;
	content-align: center;
	transition: 0.5s;
	color: #000;
}
	
.grid-container .cell .card:hover .card-section h3
{
	position: relative;
	opacity: 1;
	color: #fff;
	text-align: center;
	transition: 0.5s;
	transform: translate(0%, -200%);
}

.grid-container .cell .card .card-section a
{
	position: relative;
	content-align: center;
	transition: 0.5s;
	color: #000;
	text-decoration: none;
}
.grid-container .cell .card:hover .card-section a
{
	position: relative;
	opacity: 1;
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: 0.5s;
	transform: translate(0%, -150%);
}
.grid-container .cell .card .hover-content
{
	opacity: 0;
	color: #fff;
	padding: 5px;
	text-align: center;
	transition: 0.5s;
	display: block;
	text-decoration: none;
}
.grid-container .cell .card:hover .hover-content
{
	top: 50%;
	opacity: 1;
	padding: 5px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	transform: translate(0, -125%);
	transition: 0.5s;
	display: block;
}
.grid-container .cell .card:hover .hover-content a
{
	opacity: 1;
	padding: 5px;
	text-align: center;
	display: flex;
    justify-content: center;
	color: #fff; 
	text-decoration: none;
	transition: 0.5s;
}
.card:hover .hover-content3
{
	transform: translate(0, -115%);
	transition: 0.5s;
}

/* this is for the h3 */
.grid-container .cell .card:hover .card-section .threeline
{
	transform: translate(0%, -145%);
}
/*
.hover-content3 a
{
	opacity: 1;
	padding: 5px;
	text-align: center;
	display: flex;
    justify-content: center;
	color: #fff; 
	text-decoration: none;
	transition: 0.5s;
}*/