body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: #FFFFFF url(/_astro/bgcolor.gc9XPq31.jpg) repeat-x;
}

#Main  {
	width: 900px;
	height: 2300px;
	position:relative;
	text-align:left;
	margin-left: auto;
	margin: auto;
	background-image: url(/_astro/mainpage.CAf80Bvf.jpg);
    background-repeat:no-repeat;
}

#MainV2  {
	width: 900px;
	height: 1000px;
	position:relative;
	text-align:left;
	margin-left: auto;
	margin: auto;
	background-image: url(/_astro/mainpage.CAf80Bvf.jpg);

}

/*extend page, more css but less graphics, quicker load, more flexibility*/
#repeaterleft-sales  {
	background-image: url(/_astro/repeaterleft.dx91C7aB.jpg);
	position:absolute;
	left: -55px;
	top: 735px;
	width: 31px;
	height: 1132px;
}

#repeaterright-sales  {
	background-image: url(/_astro/repeaterright.BWs5OGQE.jpg);
	position:absolute;
	left: 772px;
	top: 745px;
	height: 1121px;
	width: 30px;
}

#repeaterbottom-sales  {
	background-image: url(/_astro/bottom.KxBiYWug.jpg);
	position:absolute;
	left: -77px;
	top: 1866px;
	height: 84px;
	width: 902px;
}
#repeaterleft  {
	background-image: url(/_astro/repeaterleft.dx91C7aB.jpg);
	position:absolute;
	left: -55px;
	top: 735px;
	width: 31px;
	height: 1148px;
}

#repeaterright  {
	background-image: url(/_astro/repeaterright.BWs5OGQE.jpg);
	position:absolute;
	left: 772px;
	top: 745px;
	height: 1151px;
	width: 30px;
}

#repeaterbottom  {
	background-image: url(/_astro/bottom.KxBiYWug.jpg);
	position:absolute;
	left: -77px;
	top: 1875px;
	height: 84px;
	width: 902px;
}

#repeaterleft-privacy  {
	background-image: url(/_astro/repeaterleft.dx91C7aB.jpg);
	position:absolute;
	left: -55px;
	top: 715px;
	width: 31px;
	height: 1672px;
}

#repeaterright-privacy  {
	background-image: url(/_astro/repeaterright.BWs5OGQE.jpg);
	position:absolute;
	left: 772px;
	top: 744px;
	height: 1642px;
	width: 30px;
}

#repeaterbottom-privacy  {
	background-image: url(/_astro/bottom.KxBiYWug.jpg);
	position:absolute;
	left: -77px;
	top: 2385px;
	height: 81px;
	width: 902px;
}

#repeaterleft-oo  {
	background-image: url(/_astro/repeaterleft.dx91C7aB.jpg);
	position:absolute;
	left: -55px;
	top: 1726px;
	width: 31px;
	height: 126px;
}

#repeaterright-oo  {
	background-image: url(/_astro/repeaterright.BWs5OGQE.jpg);
	position:absolute;
	left: 772px;
	top: 1814px;
	height: 752px;
	width: 30px;
}

#repeaterbottom-oo  {
	background-image: url(/_astro/bottom.KxBiYWug.jpg);
	position:absolute;
	left: -77px;
	top: 658px;
	height: 81px;
	width: 902px;
}

#repeaterbottom-order  {
	background-image: url(/_astro/bottom.KxBiYWug.jpg);
	position:absolute;
	left: -77px;
	top: 658px;
	height: 81px;
	width: 902px;
}

/*end Extension section*/

#Main2  {
	width: 758px;
	height: 1725px;
	position:absolute;
	text-align:left;
	left: 76px;
	top: 340px;
	color: #1b0e43;
}

#Main3  {
	width: 758px;
	height: 700px;
	position:absolute;
	text-align:left;
	left: 76px;
	top: 340px;
	color: #1b0e43;
}

h1{
font-size: 16px;
}

#title  {
	position: absolute;
	top: -134px;
	height: 59px;
	left: 322px;
	width: 402px;
}

#specialproduct   {
	width:655px;
	height: 205px;
	background-image: url(/_astro/specialpromo.B9dvK-Yf.png);
	position:relative;
	padding: 10px;
	line-height: 25px;
	left: 30px;
}
/* NOT live's — the one stylesheet this build adds (DECISIONS D-4).

   Live's XHTML 1.0 Transitional doctype puts browsers in almost-standards
   mode; Astro always emits `<!DOCTYPE html>`, i.e. full standards mode. The
   one difference that bites: in almost-standards mode a line holding nothing
   but an image (or iframe) reserves no descender gap under it; in standards
   mode it does, ~4px each. This page has four such lines — the two 650x1800
   graphics and the two YouTube embeds, each alone inside a <center> — and
   without this rule everything after them sits 4-16px lower than on live
   (the Manta box, the fifth, carries the same fix inline in index.astro).

   Bottom-aligning each one puts its bottom edge on the line box's bottom, so
   the strut's descender falls inside the element's own height and the line
   box is exactly the element's height again — what almost-standards mode
   computes. The kit's standard alternative to rewriting the doctype after the
   build (startmynewbusiness did the same for a textarea). */
#Main2 center > img,
#Main2 center > iframe {
  vertical-align: bottom;
}
/*
 * responsive.css — NOT live's (DECISIONS D-14, Josh 2026-11-09: "make it
 * responsive"). Live is a fixed 900px desktop page with no viewport meta; this
 * makes it usable on tablets and phones.
 *
 * Every rule sits under max-width: 916px — the widest window in which the 900px
 * frame plus a desktop scrollbar (17px) cannot fit. From 917px up NOTHING here
 * applies and the page stays pixel-identical to live (scripts/probe-parity.mjs).
 * Live's stylesheet stays verbatim; no font size changes.
 *
 * Live draws the page with one 900x1104 artwork (mainpage.jpg): a white panel
 * with a rounded top-left corner on the purple gradient, the "e" logo and the
 * "ExternalSEOandSEM.com" lettering. Artwork cannot narrow, so below the
 * breakpoint the masthead — the panel's top 313px, x 36..864 — is cropped out
 * of it and scaled to the screen, and the panel continues beneath it in CSS at
 * exactly the masthead's edges.
 *
 * Selectors repeat live's own, so they win on source order (this file is
 * imported after Style.css) rather than on extra specificity.
 */

@media (max-width: 916px) {
  /* The frame: a fluid panel with the body's purple gradient showing in
     12px gutters, as live's art shows it beside its panel. 22px from the top =
     live's dark band above the panel. Never wider than the art's own panel
     (828px), so the masthead is never upscaled. */
  #Main {
    width: calc(100% - 24px);
    max-width: 828px;
    height: auto;
    margin: 22px auto 0;
    background-image: none;
    box-shadow: 5px 0 6px -3px rgba(0, 0, 0, 0.6);
  }

  /* The masthead, cropped out of mainpage.jpg: the panel from x 36 to 864,
     y 22 to 335 (logo, lettering, rounded corner). The percentages are the
     crop: size 900/828, position 36/(900-828) and 22/(1104-313). */
  #Main::before {
    content: "";
    display: block;
    aspect-ratio: 828 / 313;
    background: url(/_astro/mainpage.CAf80Bvf.jpg) no-repeat 50% 2.7813% / 108.6957% auto;
  }

  /* The copy column, back in normal flow on the panel's white. It becomes a
     fixed-layout table only so the tagline (#title, live's LAST child, drawn
     into the masthead on desktop) can sit directly under the masthead as the
     table's caption; everything else stays one ordinary block-flow cell, so
     every margin and spacer <br /> behaves as on desktop. */
  #Main2 {
    position: static;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 12px 24px;
    background: #fff;
    overflow-wrap: break-word;
  }

  #title {
    position: static;
    display: table-caption;
    caption-side: top;
    width: auto;
    height: auto;
    padding: 0 12px;
    background: #fff;
  }

  /* The two 650x1800 graphics and the two 560x315 embeds shrink with the
     column and keep their proportions. The 200px badges and the Manta box
     fit as they are (the narrowest column, at 320px, is 272px). */
  #Main2 center > img {
    max-width: 100%;
    height: auto;
  }
  #Main2 center > iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
  }
}