@charset "UTF-8";

/* CSS Document */
header {
	width: 100%;
	display: grid;
	grid-template-columns: 40px 1fr 1fr 1fr 40px;
	grid-template-rows: 70px 0.5fr 1fr 0.5fr;
}

header .caption {
	grid-column: 2 / 5;
	grid-row: 3;
	align-self: center;
}

header .caption h2 {
	font-size: 48px;
	font-weight: 500;
	line-height: 5;
	color: white;
	text-shadow: 2px 3px 5px black;
}

header .header-bk {
	grid-column: 1 / 6;
	grid-row: 2 / 5;
	background: url("../images/erniemolly_copy_400.jpg") right no-repeat;
	background-size: cover;
}

header .header-bk img {
	display: none;
}

.summary {
	max-width: 1400px;
	margin: 20px auto;
	padding: 20px 40px;
	line-height: 2;
}

.summary h3 {
	font-size: 24px;
	font-weight: 300;
}

.summary h4 {
	font-size: 24px;
	font-weight: 300;
	font-style: italic;
	margin: 20px auto;
	width: 90%;
}



@media screen and (max-width: 960px) {
	header .caption h2 {
		font-size: 32px;
		line-height: 1.5;
	}

	header .header-bk {
		background: none;
	}

	header .header-bk img {
		display: inline-block;
		width: 100%;
		height: auto;
	}

	.summary h3 {
		font-size: 20px;
	}

	.summary h4 {
		font-size: 20px;
	}

	.tab_no ul li a {
		font-size: 22px;
		margin: 20px auto;
		color: blue;
	}

}


@media screen and (max-width: 1200px) {
	.board .member {
		width: 30%;
		margin-left: 2.5%;
	}

	.board .member:nth-child(n) .details-modal {
		width: 209%;
		left: 108%;
		top: 0;
	}

	.board .member:nth-child(3n) .details-modal {
		left: -217%;
	}

	.board .member:nth-child(3n-1) .details-modal {
		width: 100%;
		height: 208%;
		left: 108%;
		top: 0;
	}

	.board .member:nth-last-child(-n+1) .details-modal {
		top: auto;
		bottom: 1%;
	}

	.tab_no ul li a {
		font-size: 22px;
		margin: 20px auto;
		color: blue;
	}
}

@media screen and (max-width: 580px) {
	.board .member {
		width: 92%;
		margin: 10px auto;
	}

	.board .member h2 {
		font-size: 22px;
	}

	.board .member h4 {
		font-size: 18px;
	}

	.tab_no li a {
		width: 92%;
		margin: 20px auto;
		font-size: 22px;
		margin: 20px auto;
		color: blue;
	}
}