/*
 * Page-specific responsive fixes.
 *
 * SiteOrigin switches page 27 to its mobile layout at 780px. iPads commonly
 * use a wider portrait viewport, leaving the desktop columns too narrow and
 * clipping widgets that have their own minimum width.
 */
@media (min-width: 781px) and (max-width: 1024px) {
	body.page-id-27 #pg-27-0.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-0.panel-no-style,
	body.page-id-27 #pg-27-1.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-1.panel-no-style,
	body.page-id-27 #pg-27-2.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-2.panel-no-style,
	body.page-id-27 #pg-27-3.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-3.panel-no-style,
	body.page-id-27 #pg-27-4.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-4.panel-no-style {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	body.page-id-27 #pg-27-0 > .panel-grid-cell,
	body.page-id-27 #pg-27-0 > .panel-row-style > .panel-grid-cell,
	body.page-id-27 #pg-27-1 > .panel-grid-cell,
	body.page-id-27 #pg-27-1 > .panel-row-style > .panel-grid-cell,
	body.page-id-27 #pg-27-2 > .panel-grid-cell,
	body.page-id-27 #pg-27-2 > .panel-row-style > .panel-grid-cell,
	body.page-id-27 #pg-27-3 > .panel-grid-cell,
	body.page-id-27 #pg-27-3 > .panel-row-style > .panel-grid-cell,
	body.page-id-27 #pg-27-4 > .panel-grid-cell,
	body.page-id-27 #pg-27-4 > .panel-row-style > .panel-grid-cell {
		width: 100%;
		margin-right: 0;
	}

	body.page-id-27 #pgc-27-0-0,
	body.page-id-27 #pgc-27-1-0,
	body.page-id-27 #pgc-27-2-0 {
		margin-bottom: 24px;
	}

	body.page-id-27 #pl-27 .panel-grid-cell {
		padding-right: 0;
		padding-left: 0;
	}

	body.page-id-27 #pl-27 .panel-grid-cell-empty {
		display: none;
	}

	body.page-id-27 #panel-27-1-0-0 > .panel-widget-style {
		padding-right: 0;
		padding-left: 0;
	}

	body.page-id-27 #panel-27-2-0-1 > .panel-widget-style,
	body.page-id-27 #panel-27-2-0-2 > .panel-widget-style,
	body.page-id-27 #panel-27-2-1-0 > .panel-widget-style,
	body.page-id-27 #panel-27-2-1-1 > .panel-widget-style,
	body.page-id-27 #panel-27-3-0-0 > .panel-widget-style,
	body.page-id-27 #panel-27-3-0-1 > .panel-widget-style {
		min-height: auto;
	}

	body.page-id-27 #panel-27-3-0-1 > .panel-widget-style {
		margin-right: 0;
		margin-left: 0;
	}

	body.page-id-27 iframe,
	body.page-id-27 img {
		max-width: 100%;
	}
}

/*
 * iPad landscape: keep the useful two-column sections, but stack the tall
 * hero/sidebar row so the fixed-width principal slider is never clipped and
 * the following content is not separated by a large empty area.
 */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.page-id-27 #headbar .panel-row-style {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	body.page-id-27 #headbar .menu {
		white-space: nowrap;
	}

	body.page-id-27 #headbar .menu > li > a {
		padding-right: 3px;
		font-size: 16px;
	}

	body.page-id-27 #headbar .menu > li > .sub-menu {
		left: 50%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 600px;
		max-width: calc(100vw - 48px);
		max-height: calc(100vh - 150px);
		overflow-x: hidden;
		overflow-y: auto;
		transform: translate(-50%, 5px);
	}

	body.page-id-27 #headbar .menu > li:hover > .sub-menu,
	body.page-id-27 #headbar .menu > li:focus-within > .sub-menu {
		height: auto;
		opacity: 1;
		transform: translate(-50%, 0);
	}

	body.page-id-27 #headbar .menu > li > .sub-menu > li {
		width: auto;
		padding-right: 14px;
		padding-left: 14px;
	}

	body.page-id-27 #headbar .menu > li:focus-within > .sub-menu > li {
		height: auto;
		overflow: visible;
	}

	body.page-id-27 #headbar .menu > li > .sub-menu > li > a {
		white-space: normal;
		line-height: 1.35;
	}

	body.page-id-27 #pg-27-0.panel-has-style > .panel-row-style,
	body.page-id-27 #pg-27-0.panel-no-style {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	body.page-id-27 #pg-27-0 > .panel-grid-cell,
	body.page-id-27 #pg-27-0 > .panel-row-style > .panel-grid-cell {
		width: 100%;
		margin-right: 0;
	}

	body.page-id-27 #pgc-27-0-0 {
		margin-bottom: 24px;
	}

	body.page-id-27 #pgc-27-0-1 img,
	body.page-id-27 #pgc-27-0-1 iframe {
		max-width: 100%;
	}
}

@media (min-width: 781px) and (max-width: 1199px) {
	body.page-id-27 #pgc-27-0-1 #n2-ss-4-align {
		margin-right: auto;
		margin-left: auto;
	}
}