.pcont {
	margin : 20px auto;
	width : 70%;
}

.pjh2 {
	display : table;
	margin : 0 auto;
	text-align : center;
	font-size : max(5vw,30px);
	color : #2C2828;
	background-image : linear-gradient(rgba(1,82,60,0.5), 5%, rgba(1,82,60,0),10%,rgba(1,82,60,0),95%, rgba(1,82,60,0.5));
	font-family : 'Big Shoulders Stencil Text';
}

.pjh3 {
	text-align : center;
	font-size : max(2vw,20px);
	font-family: 'Times new Roman';
	font-weight : 900;
}

.ptextl p, .ptextr > p {
	font-size : 22px;
	
}

.pcont ul {
	list-style-type : none;
}

.pcont ul li {
	padding : 15px;
	display : block;
}

.ppiccl {
	grid-column-start : 1;
	width : 100%;
	height : 250px;
	display : inline-block;
	
}

.ppiccr {
	grid-column-start : 3;
	width : 100%;
	height : 250px;
	display : inline-block;
}


.ptextr {
	padding : 10px;
	grid-column-start : 2;
	grid-column-end : 4;
	font-size : 12px;
	display : block;
	width : 100%;
	height : 250px;
}
.ptextl {
	padding : 10px;
	grid-column-start : 1;
	grid-column-end : 3;
	font-size : 12px;
	display : inline-block;
	width : 100%;
	height : 250px;
}


.ppicl {
	width : 100%;
	border-top-right-radius: 60%;
	border-bottom-right-radius: 60%;
	height : 250px;
}

.ppicr {
	width : 100%;
	border-top-left-radius: 60%;
	border-bottom-left-radius: 60%;
	height : 250px;
}



.p1 {
	background-image : url('p1.png');
	background-size : cover;
	background-color : #525050;
} 

.p2 {
	background-image : url('p2.png');
	background-size : cover;
	background-color : #525050;
}
.p3 {
	background-image : url('p3.png');
	background-size : cover;
	background-color : #525050;
}

.ptile {
  /* Add shadows to create the "card" effect */
  display : inline-grid;
  grid-template-columns : 30% 40% 30%;
  width : 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.5s;
  background-color : #EDEBCA;
}

/* On mouse-over, add a deeper shadow */
.ptile:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width : 780px) {
	.pcont {
		width : 90%;
		margin : 0 auto;
		padding : 0;
	}
	.pcont ul {
		margin : 0 auto;
		padding : 0;
	}
	
	.ppicr,.ppicl,.ppiccl, .ppiccr,.ptextl,.ptextr {
		height : 150px;
	}
	.ptextl > p, .ptextr > p{
		display : none;
	}
	.ptile {
			grid-template-columns : 40% 20% 40%;
			padding : 0;
 	}
	
	.ptile:hover .ptextl p, .ptile:hover .ptextr p{
		display : block;
		position : absolute;
		transition : 0.5s;
		left : 0px;
		margin : 10px 10px;
		background-color : #fff5c2;
	}
}