/* Phone and tablet layout. One breakpoint, max-width 799px, matching markets.css.
   At 800px and up, including desktop at 960px and wider, none of these rules apply.
   Muse ID rules set fixed widths, so the resets below use !important. */

.nav-toggle
{
	display: none;
}

@media screen and (max-width: 799px)
{
	html,
	body
	{
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden;
	}

	body
	{
		font-size: 16px;
		line-height: 1.5;
	}

	#page,
	#page_position_content
	{
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 0 !important;
	}

	#page .position_content
	{
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#page .colelem,
	#page .grpelem,
	#page .clip_frame,
	#page .popup_anchor,
	#page .SlideShowContentPanel,
	#page [id^="pu"],
	#page [id^="ppu"]
	{
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		float: none !important;
		clear: both !important;
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 16px !important;
	}

	#page img
	{
		max-width: 100% !important;
		height: auto !important;
	}

	#page .site-wordmark img
	{
		width: auto !important;
		height: 40px !important;
		max-width: 46vw !important;
		max-height: 40px !important;
	}

	#page p,
	#page li,
	#page blockquote,
	#page .normal_text,
	#page .Heading--p-paragraph-body
	{
		font-size: 16px !important;
		line-height: 1.5 !important;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	#page_position_content > :not(.site-header):not(#main-content)
	{
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header
	{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 64px;
		margin: 0 !important;
		padding: 8px 12px !important;
		overflow: visible;
	}

	.nav-toggle
	{
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid #222222;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		background: #FAFFD1;
		cursor: pointer;
	}

	.nav-toggle:focus
	{
		outline: 2px solid #222222;
		outline-offset: 2px;
	}

	.nav-toggle-bars
	{
		display: block;
		position: relative;
		width: 18px;
		height: 2px;
		background: #222222;
	}

	.nav-toggle-bars:before,
	.nav-toggle-bars:after
	{
		content: "";
		position: absolute;
		left: 0;
		width: 18px;
		height: 2px;
		background: #222222;
	}

	.nav-toggle-bars:before
	{
		top: -6px;
	}

	.nav-toggle-bars:after
	{
		top: 6px;
	}

	.site-header.has-toggle .site-nav
	{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10001;
		box-sizing: border-box;
		width: 100%;
		max-height: calc(100vh - 64px);
		margin: 0;
		padding: 0 0 12px;
		overflow-x: hidden;
		overflow-y: auto;
		text-align: left;
		background-color: #FAFFD1;
		background-image: url("../images/eng_graph_tile-page-fr.png");
		background-repeat: repeat;
		border-bottom: 1px solid #222222;
	}

	.site-header.has-toggle.is-menu-open .site-nav
	{
		display: block;
	}

	.site-nav > ul
	{
		display: block;
	}

	.site-nav > ul > li
	{
		display: block;
		margin: 0;
		border-top: 1px solid rgba(34, 34, 34, 0.15);
	}

	.site-nav > ul > li > a
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		padding: 10px 16px;
	}

	.site-nav .site-sub
	{
		position: static;
		display: none;
		width: auto;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		padding: 0 0 8px;
		border: none;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		background: transparent;
	}

	.site-nav .has-sub:hover > .site-sub,
	.site-nav .has-sub:focus-within > .site-sub
	{
		display: none;
	}

	.site-nav .has-sub.is-open > .site-sub,
	.site-nav .has-sub.is-open:hover > .site-sub,
	.site-nav .has-sub.is-open:focus-within > .site-sub
	{
		display: block;
	}

	.site-nav .site-sub a
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		padding: 10px 16px 10px 28px;
		white-space: normal;
	}

	.home-intro,
	.home-cards,
	.family-page,
	.family-page h1,
	.family-quote,
	.family-group,
	.family-cards,
	.family-turn,
	.engineering-page,
	.engineering-page h1,
	.engineering-quote,
	.engineering-blurb,
	.engineering-cards,
	.engineering-cartoon,
	.computers-hub-title,
	.homelab-cards,
	.interests-hub-title,
	.interests-cards,
	.cloud-hub-title,
	.cloud-hub-mark,
	.cloud-cards,
	.america-page,
	.america-page h1,
	.america-jump,
	.america-doc,
	.america-text,
	.america-facsimile,
	.notes-page,
	.programming-page,
	.programming-page h1,
	.programming-blurb,
	.troubleshooting-page,
	.troubleshooting-page h1,
	.troubleshooting-intro,
	.troubleshooting-section-wrap,
	.page-toc,
	.resume-board,
	.resume-main,
	.resume-rail,
	.markets-page,
	.markets-page h1,
	.markets-intro,
	.markets-layout,
	.markets-contents,
	.markets-main,
	.markets-brief,
	.markets-archive,
	.markets-charts-page,
	.markets-charts-page h1,
	.charts-layout,
	.charts-contents,
	.charts-main,
	.charts-intro,
	.chart-group,
	.couple-added,
	.god-leaders-note
	{
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		box-sizing: border-box;
	}

	.troubleshooting-section-wrap,
	.NoWrap
	{
		white-space: normal !important;
	}

	.home-cards,
	.family-cards,
	.engineering-cards,
	.homelab-cards,
	.interests-cards,
	.cloud-cards
	{
		overflow: visible !important;
		height: auto !important;
	}

	.home-card,
	.family-card,
	.engineering-card,
	.homelab-card,
	.interests-card,
	.cloud-card,
	.home-card + .home-card,
	.engineering-card + .engineering-card
	{
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 420px !important;
		height: auto !important;
		margin: 0 auto 28px !important;
	}

	a.home-pill,
	a.family-pill,
	a.engineering-pill,
	a.homelab-pill,
	a.interests-pill,
	a.cloud-pill,
	span.homelab-pill,
	span.interests-pill
	{
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 44px;
	}

	a.home-photo,
	a.family-photo,
	a.engineering-photo,
	a.homelab-photo,
	a.interests-photo,
	a.cloud-photo,
	span.homelab-photo,
	span.interests-photo
	{
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.home-card img,
	.family-card img,
	.family-group img,
	.engineering-card img,
	.interests-card img,
	.cloud-card img,
	.couple-added img,
	.america-facsimile img,
	.troubleshooting-hero
	{
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto 16px !important;
	}

	a.homelab-photo,
	span.homelab-photo
	{
		position: relative !important;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	#page .homelab-photo img
	{
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		object-fit: cover;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	#page .homelab-photo-logo img
	{
		object-fit: contain;
	}

	.programming-page .programming-blurb p,
	.programming-page .Programming--p,
	.programming-page .Programming--h2
	{
		white-space: normal !important;
		overflow-wrap: break-word !important;
		text-align: left !important;
	}

	.resume-board
	{
		display: block !important;
	}

	.resume-role
	{
		display: block !important;
	}

	.resume-role-logo,
	.resume-role-logo img
	{
		position: static !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		width: auto !important;
		max-width: 180px !important;
		height: auto !important;
		margin: 0 0 12px !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	}

	.resume-rail
	{
		position: static !important;
		top: auto !important;
	}

	#page .SSSlide
	{
		position: relative !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	.SSSlideLinks
	{
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100% !important;
		height: auto !important;
		gap: 8px;
	}

	.SSSlideLink
	{
		width: auto !important;
		margin: 0 !important;
		left: auto !important;
		float: none !important;
		position: relative !important;
	}

	.charts-layout,
	.markets-layout
	{
		display: block !important;
	}

	.charts-contents,
	.markets-contents
	{
		position: static !important;
		width: auto !important;
		max-width: 100% !important;
		max-height: none !important;
		margin-bottom: 16px !important;
	}

	#page .chart-plot
	{
		position: relative !important;
		width: 100% !important;
		height: 220px !important;
		max-width: 100% !important;
	}

	#page .chart-plot svg
	{
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: 220px !important;
	}

	#page .chart-tooltip
	{
		position: absolute !important;
		width: auto !important;
		max-width: 90% !important;
		height: auto !important;
		white-space: normal !important;
	}

	#page .member-page,
	#page .member-page h1,
	#page .member-blurb,
	#page .member-hero,
	#page .member-grid,
	#page .member-row,
	#page .resume-masthead,
	#page #u2544-6,
	#page #u11803,
	#page #u11807,
	#page .america-doc > h2,
	#page .america-facsimile,
	#page .america-text,
	#page .tool-cat,
	#page .page-toc,
	#page .page-top,
	#page #u11616,
	#page #u11622,
	#page #u11709,
	#page #u11617-6,
	#page #u11623-6,
	#page #u11712-24,
	#page #u11620,
	#page #u11624,
	#page #u11710,
	#page #u11621-37,
	#page #u11625-45,
	#page #u11711-287,
	#page #u11627,
	#page #u11628,
	#page #u11727,
	#page #ppu11616,
	#page #ppu11622,
	#page #ppu11709
	{
		position: relative !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		white-space: normal !important;
		box-sizing: border-box;
	}

	#page .member-row img
	{
		float: none !important;
		width: 100% !important;
		max-width: 320px !important;
		height: auto !important;
		margin: 0 auto 16px !important;
	}

	#page .member-hero img,
	#page .member-grid img
	{
		float: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 16px !important;
	}

	.chart-head
	{
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.chart-card h3
	{
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
	}

	.chart-stats
	{
		max-width: 100%;
		text-align: left;
	}

	#page #u887-6,
	.site-footer
	{
		display: block !important;
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 24px auto 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		text-align: center !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	table
	{
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	#page #page_position_content > .clip_frame,
	#page #page_position_content > .couple-added,
	#page #page_position_content > img.colelem
	{
		box-sizing: border-box;
		width: calc(100% - 32px) !important;
		max-width: calc(100% - 32px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#page .clip_frame
	{
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow: hidden;
	}

	#page .clip_frame img,
	#page img.colelem,
	#page .couple-added img
	{
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#page .rounded-corners,
	#page .rounded-corners img,
	#page .couple-added img
	{
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	#page .programming-page #pu11616,
	#page .programming-page #pu11622,
	#page .programming-page #pu11709,
	#page .programming-page #u11627,
	#page .programming-page #u11628,
	#page .programming-page #u11727
	{
		display: none !important;
	}

	#page .programming-page #u11621-37,
	#page .programming-page #u11625-45,
	#page .programming-page #u11711-287
	{
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-top: 8px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		padding: 12px 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		background-color: #293134;
		border: 1px solid #000000;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5);
	}

	#page .programming-page #u11621-37 p,
	#page .programming-page #u11625-45 p,
	#page .programming-page #u11711-287 p
	{
		width: -webkit-max-content !important;
		width: max-content !important;
		max-width: none !important;
		min-width: 100%;
		box-sizing: border-box;
		margin: 0 !important;
		color: #FFFFFF;
		font-family: "Courier New", Courier, monospace;
		font-size: 16px !important;
		line-height: 1.45 !important;
		white-space: pre !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
	}

	#page .programming-page #u11621-37 p.Programming--comment,
	#page .programming-page #u11625-45 p.Programming--comment,
	#page .programming-page #u11711-287 p.Programming--comment
	{
		color: #83C763;
	}
}
