@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:200,400,500,800|Montserrat:300,400,600');

:root {

  /* Header Variables */

	/* Main color palette */
	--color-dark-one: #082f44;
	--color-dark-two: #1c1a17;
  --color-dark-three: #004d71;
	--color-med-one: #007ba8;
  --color-med-two: #4c9dea;
	--color-light-one: #ffffff;
	--color-light-two: #ececec;
	--color-light-three: #f9f9f9;
	--color-light-four: #d4d6d7;

	/* Basic buttons, information callouts and accents */
	--color-info: #3699f7;
	--color-info-shade: #287fc6;
	--color-info-tint: #e4f0fe;

	/* Primary action buttons, progress callouts and accents */
	--color-progress: #2FC61E;
	--color-progress-shade: #25ae15;
	--color-progress-tint: #e4f8e1;

	/* Error highlighting, icons and backgrounds */
	--color-error: #ED1C24;
	--color-error-shade: #ce2430;
	--color-error-tint: #ffebeb;

	/* add a white tint to a container that overlays a darker color for emphasis */
	--color-tint-one: rgba(255,255,255,0.2);

	/* add a black shade to a container that overlays a lighter color to de-emphasize */

	--font-primary: 'Libre Franklin', Arial, sans-serif;
	--font-secondary: 'Montserrat', Helvetica, sans-serif;

  --type-unit-xxl: 2rem;
  --type-unit-xl: 1.7rem;
  --type-unit-lg: 1.5rem;
  --type-unit-md: 1rem;
  --type-unit-sm: 0.8rem;
  --type-unit-xs: 0.5rem;

  --font-weight-blk: 900;
  --font-weight-bld: 700;
  --font-weight-sbld: 500;
  --font-weight-reg: 300;
  --font-weight-thin: 200;
  --font-weight-light: 100;

}

/* =============================================================================== */
/* Basic Layout - MOBILE FIRST                                                     */
/* =============================================================================== */

/* =============== BASIC TYPE STYLING ================================ */

h2,h3,h4,h5,h6 {	margin: 0; padding: 0; }
h1, h2,h3 { font-family: var(--font-secondary); font-weight: 200; }
h4, h5, h6 { font-family: 'Libre Franklin', Arial, sans-serif; font-weight: 600; line-height: 1.7rem; }
h1 { font-size: 1.8rem; margin: 1.25rem 0 0.4rem; color: var(--color-dark-two); }
h2, h2 span { font-size: 1.8rem; margin: 1.25rem 0 0.4rem; color: var(--color-dark-two) }
h2 span { color: #4c9dea; }
h3 { font-size: 1.3rem; margin-top: 0.6rem;	padding: .3rem 0 0.2rem  }
h3.eyebrow { font-weight: 500; font-family: var(--font-primary); color: var(--color-info-shade); font-size: 1.1rem; padding: 0.4rem 0rem 0.2rem; margin: 1.1rem 0 0.4rem; }
h4 { font-size: 1.2rem; font-weight: 500; margin-top: 1rem; padding: 0.3% 0.5%; }
sup { font-size: 0.8em; padding-left: 0.4em; } /* relative to the parent font size */
h5 { font-size: 1rem; line-height: 1.3rem; }
main li { padding-left: 0.3rem; margin-left: 0.8rem;}

img.site-logo { width: 65vw; }

/* =============== BUTTONS & LINKS ================================ */
a, a:hover { color: var(--color-info); text-decoration: none; }
header a { margin: 0; } /* override margins for the logo */

main a, main button, main input[type=button], main input[type=submit] { margin: 1rem 0; }

button, input[type=button], input[type=submit] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; background-color: var(--color-progress); background-size: 20px; background-repeat: no-repeat;  color: var(--color-light-one); border-radius: 4px; padding: .4rem .6rem; width: auto; font-family: var(--font-primary); font-size: 1rem; cursor: pointer; }
button:hover, input[type=button]:hover, input[type=submit]:hover { background-color: var(--color-progress-shade);}

button:disabled, button[disabled], input[disabled=disabled] { background-color: rgb(150,150,150); cursor: pointer; }

button.btn-secondary, input[type=button].btn-secondary { background-color: var(--color-info); }
button.btn-secondary:hover, input[type=button].btn-secondary:hover { background: var(--color-info-shade);}

button.expanding::after { content: "\0020\25BE"; }
button.expanding { background-color: var(--color-light-two); color: var(--color-info-shade); }
button.expanding:hover { background-color: var(--color-light-four); }
.button-group { display: flex; gap: 0.6rem; }

/* =============== HERO BANNER ================================ */

#hero { min-height: 300px; padding: 2rem; background-position: center; background-size: 2100px; background-repeat: repeat-x; }
#hero .title, #hero h1, #hero p { color: var(--color-light-one); }
#hero .title { font-family: var(--font-tertiary); text-transform: uppercase; font-weight: var(--font-weight-blk); font-size: 2.2rem; margin: 1.1rem 0 0.3rem; line-height: 2.3rem; }
#hero p { font-size: 1.5rem; line-height: 1.8rem; font-family: var(--font-secondary); }
#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; }
#hero .product-title { 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.bnr-products { background-image: url('/img/banners/bnr_product-detail.png'); }


/* =============================================================================== */
/* Desktop Layout - LARGER SCREENS ONLY                                            */
/* =============================================================================== */
@media screen and (min-width: 1000px) {
  /* Custom Modules */
  .modBoxRound { border-radius: 3rem; background: var(--color-light-two); padding: 3rem; }
  .modBoxSquare { padding: 5rem 3rem 7rem; } /* make these boxes taller so the background has room */
  .modStripe { background-color: var(--color-dark-one); color: var(--color-light-one); padding: 3rem 0; }
  .modStripe h1, .modstripe h2 { color: var(--color-light-one); }
}