/* CSS Document */

/* Biography Panel */
.biography-panel {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto;
	grid-column-gap: 0px;
	grid-row-gap: 0px;	
	background-image: url("../images/backgrounds/bio-background.png");
    background-repeat: no-repeat;
	background-size: cover;
}

.side-label { grid-area: 1 / 1 / 2 / 2;  }
.bio-text { grid-area: 1 / 2 / 2 / 3 }
.bio-pic { grid-area: 1 / 3 / 2 / 4 }

.bio-text p {
	font-family: Neuvetica-Thin;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 1.5px;
	text-indent: 50px;
	padding: 10px 20px 10px 20px
}

.bio-pic { 
    border-left-style: solid;
	border-left-color: black;
	border-left-width: 6px;
}

.bio-pic img { 
	height: 100%;  
	max-width: 100%;
    border-radius: 0px 20px 20px 0px;
	padding: 0px;
}

.biography-panel button {
	cursor: pointer;
	font-size: 12px;
	border-radius: 5px;
	padding: 5px 10px;
	margin-left: 10px;
	background: linear-gradient(to right, #3d7a79 50%, #33cccc 100%);
}

.bio-text .next-page-icon {
	width: 18px;
	padding-left: 6px
}

.bio-text .prev-page-icon {
	width: 18px;
	padding-right: 6px
}

/* adjust for smaller screen */
@media only screen and (max-width: 800px), only screen and (orientation:portrait){
	.biography-panel {
		display: grid;
		grid-template-columns: repeat(3, auto);
		grid-template-rows: repeat(4, auto);
		grid-column-gap: 0px;
		grid-row-gap: 0px;	
		background-image: url("../images/backgrounds/bio-background.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.side-label { grid-area: 1 / 1 / 5 / 2;  }
	.bio-text { grid-area: 1 / 2 / 3 / 4 }
	.bio-pic { grid-area: 3 / 2 / 5 / 4 }

	.bio-text p {
		font-family: Neuvetica-Thin;
		font-size: 14px;
		line-height: 16px;
		letter-spacing: 1.5px;
		text-indent: 25px;
		padding: 5px 20px 5px 5px
	}

	.bio-pic { 
		border-left-style: none;
		border-left-color: black;
		border-left-width: 6px;
	}

	.bio-pic img { 
		height: auto;  
		max-width: 100%;
		border-radius: 0px 0px 10px 0px;
		padding: 0px;
	}

	.biography-panel button {
		cursor: pointer;
		font-size: 12px;
		border-radius: 5px;
		padding: 5px 5px;
		margin-left: 10px;
		background: linear-gradient(to right, #3d7a79 50%, #33cccc 100%);
	}

	.bio-text .next-page-icon {
		width: 16px;
		padding-left: 6px
	}

	.bio-text .prev-page-icon {
		width: 16px;
		padding-right: 6px
	}
}

/* pages of biography */
#page-1 {display : block }
#page-2, #page-3 {display : none }

/* pages of biography */
#page-1-pic {display : block }
#page-2-pic, #page-3-pic {display : none }