/* 
Membership child page 
/content/dam/oclc/membership/css/membership_child_page.css
*/

/* Reset */

@import url("https://www.oclc.org/content/dam/oclc/membership/css/membership_reset.css");


/* Child page headlines */

#membership-childpg #hero-institutions,
#membership-childpg #hero-individuals,
#membership-childpg #hero-councils {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 350px;
	margin-bottom: 2.5rem;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 450px;
}

#membership-childpg #hero-institutions {
	background-image: url('https://www.oclc.org/content/dam/oclc/membership/bg_childpage_hero_institutions.jpg');
}

#membership-childpg #hero-individuals {
	background-image: url('https://www.oclc.org/content/dam/oclc/membership/bg_childpage_hero_individuals.jpg');
}

#membership-childpg #hero-councils {
	background-image: url('https://www.oclc.org/content/dam/oclc/membership/bg_childpage_hero_councils.jpg');
}

#membership-childpg h1 {
	width: 450px;
}

#membership-childpg h1 span {
	display: table;
}

#membership-childpg h1 .pgid {
	max-width: 75%;
	font-family: 'Graphik Bold', Helvetica, Arial, 'Arial Unicode MS', sans-serif;
	font-size: 32px;
	line-height: 36px;
	color: #ffffff;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	padding: 14px 20px 12px;
	margin-bottom: 24px;
}

#membership-childpg h1 .hed {
	font-family: 'Graphik Light', Helvetica, Arial, 'Arial Unicode MS', sans-serif;
	font-size: 52px;
	line-height: 56px;
	letter-spacing: -1px;
	padding-right: 32px;
}

#membership-childpg #hero-institutions h1 .pgid {
	background-color: #00AFD7;
}

#membership-childpg #hero-individuals h1 .pgid {
	background-color: #AE2573;
}

#membership-childpg #hero-councils h1 .pgid {
	background-color: #333F48;
}

@media screen and (min-width: 1400px) {
	#membership-childpg #hero-institutions,
	#membership-childpg #hero-individuals,
	#membership-childpg #hero-councils {
		min-height: 460px;
		background-size: 600px;
	}

	#membership-childpg h1 {
		width: 500px;
	}

	#membership-childpg h1 .pgid {
		font-size: 36px;
		line-height: 40px;
	}

	#membership-childpg h1 .hed {
		font-size: 56px;
		line-height: 62px;
	}
}

@media screen and (max-width: 900px) {
	#membership-childpg h1 {
		width: 100%;
	}
	#membership-childpg h1 .pgid {
		max-width: none;
	}
	#membership-childpg #hero-institutions,
	#membership-childpg #hero-individuals,
	#membership-childpg #hero-councils {
		min-height: 0px;
		background-position: bottom left;
		background-size: 75%;
		padding-bottom: 65% !important;
	}
}

@media screen and (max-width: 800px) {
	#membership-childpg h1 .pgid {
		font-size: 26px;
		line-height: 30px;
	}
	#membership-childpg h1 .hed {
		font-size: 48px;
		line-height: 52px;
	}
}

@media screen and (max-width: 480px) {
	#membership-childpg #hero-institutions,
	#membership-childpg #hero-individuals,
	#membership-childpg #hero-councils {
		background-size: 80%;
		padding-bottom: 65% !important;
	}
	#membership-childpg h1 .hed {
		font-size: 44px;
		line-height: 48px;
	}
}

@media screen and (max-width: 320px) {
	#membership-childpg #hero-institutions,
	#membership-childpg #hero-individuals,
	#membership-childpg #hero-councils {
		background-size: 90%;
		padding-bottom: 80% !important;
	}
}

#membership-childpg h2 {
	font-family: 'Graphik Bold', Helvetica, Arial, 'Arial Unicode MS', sans-serif;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: -0.5px;
	margin-bottom: 1rem;
}

#membership-childpg h3 {
	font-family: 'Graphik Semibold', Helvetica, Arial, 'Arial Unicode MS', sans-serif;
	font-size: 21px;
	line-height: 25px;
	letter-spacing: -0.5px;
	margin-bottom: 1rem;
}

/* https://webaim.org/techniques/css/invisiblecontent/ */
.visually-hidden:not(:focus):not(:active) {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}