/* @override http://127.0.0.1:4000/ui/css/subpages.css */

/* subpage specific code */

iframe { max-width: 98%; }

.subpage p.intro-large {
	font-family: var(--typeface-sans);
	font-size: 1.42em;
	line-height: 1.4;
	font-weight: 300;
}

@media screen and (max-width: 667px) {
	.subpage p.intro-large {
			font-size: 1.2em;
	}
}

.subpage strong {
	font-weight: 500;
}

.subpage .fluid-width-video-wrapper {
	margin: 30px 0;
}

.subpage .article__header {
	padding: 15px 0 0 0;
	max-width: 45em;
}

@media screen and (max-width: 879px) {
	.subpage .article__header {
		max-width: 38em;
		padding: 15px 0 0 15px;
	}
}

@media screen and (min-width: 640px) and (max-width: 750px) {
	.subpage .article__header {
		max-width: 45em;
		padding-left: 32px;
		padding-right: 32px;
	}
}
@media screen and (min-width: 568px) {

	.team-grid.four-col {
	grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}
}

}
@media screen and (max-width: 568px) {
/*	body.subpage .article__header {
		margin-top: 15px !important;

	}
*/	
	p.intro-large {
		font-size: 1.2em;
	}
}

.subpage .article__header h1 {
	margin-bottom: 20px;
}

@media screen and (min-width: 1200px) {
	body.subpage .article__header {
		max-width: 45em;
	}
}

body.subpage article h2, h3, h4 {
	line-height: 1.3;
}

body.subpage article h2 {
	font-family: var(--typeface-serif);
	font-size: 1.75em;
}

body.subpage article h3 {
	font-family: var(--typeface-sans);
	font-size: 1.4em;
	font-weight: 500;
}

body.subpage article h4 {
	font-family: var(--typeface-sans);
	font-size: 1.2em;
	font-weight: 500;
	margin-top: 15px;
	margin-bottom: 0;
}

@media screen and (max-width: 599px) {
	body.subpage header h1 {
		font-size: 2em !important;
	}

	body.subpage article h2 {
		font-size: 1.5em;
		border-top: 1px solid var(--grey);
		padding-top: 30px;
	}
	
	body.subpage article h2:first-of-type {
		margin-top: 1em;
		border-top: none;
		padding-top: 0;
	}
	
	body.subpage article h3 {
		font-size: 1.25em;
	}
	
	body.subpage article h4 {
		font-size: 1em;
	}
}

body.subpage article h3 {
	margin-top: 37px;
}

body.subpage article h2 + h3 {
	margin-top: 25px;
}

body.subpage article ul li {
	margin-bottom: 8px;
}

body.subpage aside a:hover {
	transform: none !important;
}

body.subpage aside .toc {
	border-top: 6px solid;
}

@media screen and (min-width: 939px) {
	body.subpage aside .toc {
		display: block;
	}
}

body.subpage aside .toc h6 {
	background: none;
}

body.subpage aside .toc h6:hover {
	text-decoration: none;
}

body.subpage aside .toc ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	border-top: 1px solid;
	margin-top: 6px;
}

body.subpage aside .toc li {
	border-bottom: 1px solid;
	padding: 6px 0;
}

body.subpage aside .toc li:last-child {
	border-bottom: none;
}

body.subpage aside .toc li a:hover {
	background: var(--yellow);
}

/* see line 2885+ on article.css */

.subpage .presents-box { 
    padding-bottom: 0;
}
        
.subpage .presents-box h5 {
    margin-bottom: 1em;
}

.subpage .presents-box h6 {
    padding-top: .66em;
}


.subpage .presents-box img {
    float: right;
    margin-top: 0.3em;
    margin-bottom: 0em;
    padding-right: .75em;
    height: auto;
    max-width: 5.5em;
    background-color: none;
}

.subpage .presents-col-container {
    margin-top: -1.5em;
    margin-bottom: 3em;
}


/*  IN WIDER VIEWPORTS: 
- don't show the fact-box at the bottom of the article-body
- show the aside containing the fact-bax (.hide-on-narrow-vp)
- show the factbox within an aside */
@media screen and (min-width: 939px) {

	.subpage .presents-box {
	    display: none;
	}
	
	.subpage .aside .presents-box {
	    display: block;
	}
}

.subpage .index-page__story-list .presents-box {
    display: block;  /* Show presents-box at all views on index-pages. */
}

.subpage .presents-box.index-list-spacing { 
    margin-top: 2em;
}  /* Matches margin to the common index-list-spacing margin */


.subpage .presents-box.text-block-container {
	border-bottom: 0;
	border-top: 6px solid;
}

.subpage .presents-box p {
	font-family: var(--typeface-sans);
	font-size: 1em;
	line-height: 1.4;
	margin-top: 7px;
	border-bottom: 1px solid #333;
	padding-bottom: 15px;
}

.subpage .presents-box h5 {
	font-weight: normal;
	text-align: center;
	font-size: 0.9em;
	font-family: var(--typeface-sans);
	letter-spacing: 0.03em;
	border-bottom: 1px solid #111;
	padding-bottom: 15px;
	margin-top: 1.4em;
}

.subpage .presents-box h6,
body.subpage aside .toc h6 {
	font-family: var(--typeface-sans);
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0;
	text-align: left;
	line-height: 1.5 !important;
	border: 0;
	background: none;
	color: #111 !important;
	padding: 0 !important;
}

.subpage .presents-box h6 a {
	text-transform: none;
	text-decoration: underline;
	color: #111 !important;
	font-weight: bold !important;
	padding: 0;
}

.subpage .presents-box a:hover {
	transform: scale(1);
	font-size: 1em;
	background: var(--yellow);
	border: 0;
}

.subpage .presents-box h6:hover {
	border: 0;
}

.subpage .presents-box img {
	float: right;
	margin-top: 14px;
}

.subpage .article-footer.main-col-container {
	padding-bottom: 30px !important;
}

/* team */


.team .top-photo {
	margin: 18px 0 42px;
	width: 100%;
	height: auto;
}

.team .team-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 7%;
	grid-row-gap: 45px;
	column-gap: 49px;
}

.team .team-grid:last-of-type {
	margin-bottom: 40px;
}

.team .person {
	grid-columns: auto / span 1;
}

.team .person > * {
	font-family: var(--typeface-sans);
}

.team .person img {
	width: 100%;
	height: auto;
	margin: 0 0 8px;
}

.team .person .name {
	font-size: 1.12em;
}

.team .person .title {
	font-weight: bold;
	line-height: 1.4;
}

.team .person p {
	font-size: 1em;
	line-height: 1.4;
	margin: 7px 0 0 0;
}

.team .person p a {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media screen and (min-width: 842px) {
	.team .article__body.main-col-container {
		max-width: 46.9em !important;
		margin: 0 auto !important;
		left: 0;
	}

	.team header.article__header {
		max-width: 46.9em !important;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.team .team-grid {
		grid-column-gap: 5%;
		column-gap: 42px;
	}
}

@media screen and (max-width: 567px) {
	.team .team-grid {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 6%;
		grid-row-gap: 40px;
	}
	
	.team h2 {
		margin-top: 45px !important;
	}
}

@media screen and (max-width: 375px) {
	.team .team-grid {
		grid-template-columns: 1fr;
	}
	
	.team .person .name {
		font-size: 1.25em;
	}
	
	.team .person .title {
		font-size: 1.15em;
	}
	
	.team .person p {
		font-size: 1.1em;
	}
	
	.contacts-list p {
		line-height: 1.7;
	}
}