/**
################################################################
CUSTOM CSS FOR JAMES PURBA & PARTNERS
By: Vincent Purba
################################################################
**/

h3 {
	font-size: 3vw;
}

.center {
	width: 100%;
	text-align: center;
}

.header-staff {
	background-image: linear-gradient(0deg, rgba(32, 44, 100, 1), rgba(32, 44, 100, 0.6)), url("img/bg_staff.jpg");
	background-size: 100%
	background-position: bottom;
}

.jpp-grid {
	display: grid;
	grid-template-areas: 
	"title-1 title-1 image-1"
	"text-1 text-1 image-1"
	"skill-1 skill-2 image-1";
	padding: 2.5vw;
	gap: 2%;

	text-align: justify;
}

.title-jpp {
	grid-area: title-1;
}

.text-jpp {
	grid-area: text-1;
	margin-right: 7.5%;
}

.image-jpp {
	grid-area: image-1;
}

.image-jpp p {
	margin-top: 1vh;

	font-size: 1.25vw;
	text-align: center;
	font-family: "Cormorant", serif;
}

.image-jpp img {
	width: 22.5vw;
}

.skill-jpp-1 {
	grid-area: skill-1;
	margin-right: 10%
}

.skill-jpp-2 {
	grid-area: skill-2;
	margin-right: 15%
}

.skill-jpp-3 {
	grid-area: skill-3;
	margin-right: 15%
}

.staff-list-grid {
	display: grid;
	grid-template-areas: 
	"staff-image-1 staff-title-1 staff-title-1"
	"staff-image-1 staff-text-1 staff-text-2"
	"staff-image-1 staff-text-1 staff-text-2";
	padding: 2.5vw;
	gap: 5%;	
}

.staff-hiring-grid {
	display: grid;
	grid-template-areas: 
	"staff-image-1 staff-title-1 staff-title-1"
	"staff-image-1 staff-text-1 staff-text-1"
	"staff-image-1 staff-text-1 staff-text-1";
	padding: 2.5vw;
	gap: 5%;	
}

.staff-image-1 {
	grid-area: staff-image-1;
}

.staff-image-1 img {
	width: 15vw;
	border-radius: 50%;
}

.staff-title-1 {
	grid-area: staff-title-1;	
}

.staff-title-1 p {
	font-size: 1.35vw;	
	font-weight: 200;
}

.staff-text-1 {
	grid-area: staff-text-1;	
}

.staff-text-2 {
	grid-area: staff-text-2;	
}

.container-blue {
	padding: 2% 10% 2% 10%;
	align-items: center;
	color: white;
	background: rgba(32, 44, 100, 1);
}

.container-white {
	padding: 2% 10% 2% 10%;
	align-items: center;
	background: rgba(250, 250, 250,1);
}

.container-grey {
	padding: 5% 10% 5% 10%;
	align-items: center;
	background: rgba(240, 240, 240,1);
}