/*--------------------------------------------------------------
Non-Grid Layout Adjustments - MOBILE ONLY
--------------------------------------------------------------*/
.pad_vert-sm, .pad_vert-md, .pad_horz-md, .pad_all-md { 
  padding: 0 0 0.4rem; margin: 0; } /* needs bottom padding to accommodate for button padding */
section { padding: 0 2rem; margin: 2rem 0; } /* used margins for vertical space so they collapse */
#pageContainer section:first-of-type { margin: 4.5rem 0 0rem; }
section.widescreen { padding: 0; }

#hero { padding: 2rem 2rem 1rem; margin: 50px 0 0; min-height: 300px; color: var(--color-light-one);
  background-position: center; background-size: 2100px; background-repeat: repeat-x; }
#hero.shaded { background-blend-mode: multiply; background-color: rgba(0,0,0,0.4); }
#hero > * { display: flex; flex-wrap: wrap; align-content: center; height: 100%; }
#hero .hero-title, #hero .product-title { flex-direction: column; grid-column: 2/5; }
#hero .product-title, #hero .product-image { align-items: center;}
#hero .product-title .orb { height: 70px; flex: 0 0 70px; align-self: center; } /* Size for the gas orb on products pages */
#hero .product-image { flex-direction: row;  align-items: center; grid-column: 5/8; }
#hero .product-image .monitor { flex: 0 0 auto; height: 290px; margin: 0 auto; } /* Size of the monitor product */
#hero h1 { font-family: var(--font-tertiary); text-transform: uppercase; font-weight: 900; font-size: 2.2rem; margin: 1.1rem 0 0.3rem; line-height: 2.3rem; }
#hero p { font-size: 1.5rem; line-height: 1.8rem; margin-top: 1.2rem;  font-family: var(--font-secondary); }

#hero.bnr-product-detail { background-image: url('/img/banners/bnr_product-detail.png'); }


/*--------------------------------------------------------------
CSS Grid Layout Adjustments
--------------------------------------------------------------*/
@media screen and (min-width: 800px) {
/* Layout modifiers */
.pad_vert-sm { padding: 1rem 0; }
.pad_vert-md { padding: 3rem 0; }
.pad_horz-md { padding: 0 3rem; }
.pad_all-md {padding: 3rem; }
.margin_all_0 { margin: 0; }
.pad_all_0 { padding: 0; }

#pageContainer section:last-of-type { margin-bottom: 2rem; } /* add extra space after the last section of the page */
#pageContainer section#hero { margin: 0; } /* remove top margin for larger screens */

.site { display: grid; grid-template-rows: 70px 40px auto auto; grid-gap: 0rem 3rem; height: 100%;	}

header {	grid-column: 2/-2; grid-row: 1; }

nav#mainNav {	grid-column: 1/-1; grid-row: 2; grid-template-columns: subgrid; display: grid; border-top: 2px solid var(--color-light-four); }
nav#mainNav ul { grid-column: 2/-2; }

/*--------------------------------------------------------------
Hero banners at the top of pages
--------------------------------------------------------------*/

#hero { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; margin: 0; height: 300px; padding: 2rem 0; background-size: 1500px; }
#hero > * { padding-top: 0; }
#hero p { margin-top: 0.5rem;}
#hero .product-image .monitor { height: 350px; } /* Size of the monitor product */

.hero-block { grid-column: 2/8; } /* spreads banner content to the whole contained content area */

#pageContainer {	position: relative; grid-column: 1/-1; grid-row: 4; display: grid; grid-template-columns: subgrid; height: auto;  }
#pageContainer form, #pageContainer ul.connectBorder { grid-column: span 6; } /* Fix forms that are in the new content template */

section { grid-column: 2/-2; display: grid; grid-template-columns: subgrid; padding: 0; margin: 2rem 0; }
contentblock { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; } /* RootSeven content editor block that only appears when signed in as editor */
/* .pageSect_slim, .pageSect_half, .pageSect_wide, .pageSect_full { display: grid; grid-template-columns: subgrid; } */
.pageSect_slim { grid-column: span 2; }
.pageSect_half { grid-column: span 3; }
.pageSect_wide { grid-column: span 4; }
.pageSect_full { grid-column: span 6; }
.flexSect { display: flex; flex-wrap: wrap; gap: 3rem; }
.subSect_half { flex: 1 0 45%; }
section.widescreen { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; background-size: 1600px; }

footer#mainFooter { 
  display: grid; grid-template-columns: subgrid; 
  grid-column: 1/-1; grid-row: 5; grid-gap: 0rem 1.5rem;
  padding: 0 50px; height: 100%;	}
#footerContents, .widescreenContents { display: grid; grid-template-columns: subgrid; grid-column: 2/-2; }
#footerContents ul { grid-column: span 3; }
}

/** Microsoft Edge */
@supports (-ms-ime-align: auto) {

  }

  /** Chrominum */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) and (min-width: 800px) and (max-width: 1400px) {
  nav#mainNav, #pageContainer, footer#mainFooter, #hero, section.widescreen, contentblock {	grid-template-columns: 3rem repeat(6, 1fr) 3rem; grid-gap: 0 3rem;}
  section, section.widescreenContents, #footerContents, #hero.shaded {	grid-template-columns: repeat(6, 1fr); grid-gap: 0 3rem;}
  }
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) and (min-width: 1400px) {
  nav#mainNav, #pageContainer, footer#mainFooter, #hero, section.widescreen, contentblock {	grid-template-columns: 1fr repeat(6, 180px) 1fr; grid-gap: 0 3rem;}
  section, .widescreenContents, #footerContents {	grid-template-columns: repeat(6, 180px); grid-gap: 0 3rem;}
  }

  /** Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  }

@media screen and (min-width: 800px) and (max-width: 1400px) { 
	.site { grid-template-columns: 3rem repeat(6, 1fr) 3rem; }
}

@media screen and (min-width: 1400px) {
  /* Layout modifiers */

  .site {grid-template-columns: 1fr repeat(6, 180px) 1fr;	}
  section.widescreen { background-size: cover; }
  .hero-block { grid-column: 2/5; } /* fixes banner content inside the left half of the page */
  #footerContents ul { grid-column: span 2; }
  .pageSect_slim { grid-column: span 2; }
}