#projects-container {
	background: #0A2635;
	padding: 50px 0px;
}

#projects-container h2 {
	color:white;
	text-transform: uppercase;
	text-align: center;
	font-size: 32px;

}


#projects-container > .box {
	border: rgb(5, 60, 70) solid 20px;
	background: white;
	margin: 50px auto;
	max-width: 70%;
	padding: 20px;
}

.projects {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}

.project {
	overflow: auto;
	width: 23%;
	color: white;
	text-decoration:  none;
	-webkit-box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.caption {
	color: black;
	text-align: center;
	padding: 20px;
}

/*START: Add the project backgrounds here*/
.DistanceCalculator {
	background: url("../images/projects/DistanceCalculator/bg.png") center center;
	background-size: cover;
}

.ear_test {
	background: url("../images/projects/ear_test/bg.png") center center;
	background-size: cover;
}

.pacman {
	background: url("../images/projects/pacman/bg.png") center center;
	background-size: cover;
}

.tankz {
	background: url("../images/projects/tankz/bg.png") center center;
	background-size: cover;	
}

.uoftutor {
	background: url("../images/projects/uoftutor/bg.png") center center;
	background-size: cover;	
}

.placeholder {
	background: url("../images/project-placeholder.jpg") center center;
	background-size: cover;
}

/* bg for projects ends here*/

.content {
	box-sizing: border-box;
	padding: 38%;
	overflow: auto;
	display:flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
  	border: solid 0px rgba(0,0,0,0.4);

}

.content > .github-icon > img {
	width: 20px;
	height: 20px;
	margin-top: 10px;
	opacity: 0;
	transition-duration: 0.5s;
	transition-delay: 0.1s;
}



.content > .text{
	opacity:0;
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}


.content:hover {
	transition-duration: 0.5s;
	box-shadow: inset 0px 0px 101px 100px rgba(34,153,204,1), 
				0px 0px 201px 56px rgba(152,197,245,1);
	-webkit-box-shadow: inset 0px 0px 101px 100px rgba(34,153,204,1), 
				0px 0px 201px 56px rgba(152,197,245,1);
	-moz-box-shadow: inset 0px 0px 101px 100px rgba(34,153,204,1), 
				0px 0px 201px 56px rgba(152,197,245,1);
}

.content:hover > .text {
	opacity: 1;
}

.content:hover  img {
	opacity: 1;
}

@media handheld,screen and (max-width: 800px)
{ 

   .caption {
      margin-bottom: 20px;
   }



}