@charset "UTF-8";

/*
Hess Blue: #1955A6
Hess Grey: #98A3AB
Dark Blue: #0A2C5D
Text Grey: #515C64

font-family: 'Archivo Narrow', sans-serif;
    Archivo Narrow: weights—400;600;700

font-family: 'Archivo', sans-serif;
    Archivo: weights—300;500;700
*/

html {
  scroll-behavior: smooth;
}
body {
	margin: auto;
	padding: 0;
	width: 100%;
	background-image: url(../siteGFX/BGpattern.svg);
	background-repeat: repeat;
	background-size: 40px;
}

.container {
  display: grid;
  grid-auto-flow: row;
  grid-template-areas:
      "mainContent"
      "fatFooter"; 
  max-width: 800px;
  width: 100%;
	border: 1px solid #98A3AB;
	margin: 0 auto 0 auto;
	background-color: #FFF;
	overflow: hidden;
}

a:link {
	color: #1955A6;
	text-decoration: none;
    font-weight: 700;
}
a:visited {
	color: #0A2C5D;
	text-decoration: none;
}
a:hover {
	color: #FFD67A;
	text-decoration: underline;
}

.mainContent, .fatFooter {
  padding: 0px;
 }

/* MAIN CONTENT */
.mainContent {
  grid-area: mainContent; 
  width: 95%; 
	margin: 0 0 0 50px;
}
.mainContent p, h1, h2, h3, table {
    padding-right: 50px;
    color: #515C64;
}
.mainContent header {
    background-color: #98A3AB;
    height: 47px;
    padding: 30px 0 0 50px;
    margin: 0 -1000px 0 -360px;
}
.mainContent hr.head {
    border-top: 1px solid #E0DDDD;
    margin-left: 0px;
    margin-top: 6px;
}
.mainContent h1.superset {
	font-family: 'Archivo Narrow', sans-serif;
    font-size: 16px;
    margin: -10px 0 0px 2px;
    font-weight: 600;
    letter-spacing: 8px;
	color: #FBAE00;
}
.mainContent h1 {
    font-family: 'Archivo Narrow', sans-serif;
    color: #1955A6;
    font-size: 52px;
    line-height: 48px;
    font-weight: 400;
    margin: 0 0 12px 0px;
    letter-spacing: -0.5px;
}
.mainContent h2 {
    font-family: 'Archivo Narrow', sans-serif;
    margin: 30px 8.5% 10px 0px;
    color: #0A2C5D;
    font-size: 38px;
    line-height: 38px;
    font-weight: 400;
}
.mainContent h4 {
    font-family: 'Archivo Narrow', sans-serif;
	margin: 5px 0 10px 0px;
    color: #0A2C5D;
    font-size: 30px;
    line-height: 28px;
    font-weight: 400;
}
.mainContent h4.subset {
    margin: 30px 0 0px 2px;
	color: #FBAE00;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
	letter-spacing: 4px;
}
.mainContent h4.baserule {
	border-bottom: 1px solid #ccc; 
	padding-bottom: 10px;
}
.mainContent h5 {
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #1955A6;
	margin: 10px 0 5px 0px;
}
.mainContent p {
    font-family: 'Archivo', sans-serif;
    text-indent: 20px;
    margin: 0px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
.mainContent p.prime {
    text-indent: 0px;
    font-size: 18px;
    line-height: 25px;
}
.mainContent p.first {
    text-indent: 0px;
}
.mainContent p.firstplus {
    text-indent: 0px;
    margin-top: 8px;
}
img.bullet {
    width: 16px;
    margin: 0 5px 1px 0px;
}


/* FORM STYLES */
form {
	width: 92%;
	font-family: 'Archivo', sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: #515C64;
}
.section-title {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 18px;
	color: #fff;
	background-color: #1955A6;
	margin: 0 0 0 -15px;
	padding: 6px 0 5px 15px;
}
form p.formplus {
	text-indent: 0px;
    margin-top: 12px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
}
form p.formplusplus {
	text-indent: 0px;
    margin-top: 18px;
	font-size: 15px;
	line-height: 19px;
	font-weight: 300;
}
form input.textbox {
	width: 92%;
	margin: 6px 0px;
	font-size: 15px;
	font-family: 'Archivo', sans-serif;
}
form textarea.textbox {
	width: 92%;
	margin: 6px 0px;
	font-size: 15px;
	line-height: 18px;
	font-family: 'Archivo', sans-serif;
}
form .spaceup {
	margin-top: 21px;
}
form .astrx {
	color: #BD0202;
	baseline-shift: baseline;
    vertical-align: -18%;
    font-size: 18px;
    font-weight: bold;
}
form p.astrxText {
	color: #BD0202;
	font-size: 13.5px;
	text-indent: 0px;
}
form .btn-grey {
	color: black;
	background-color: #edeeef;
	border: 1px solid #b5b6b7;
	border-radius: 3px;
	padding: 7px 12px 5px 9px;
}
form .btn-white {
	color: black;
	background-color: white;
	border-color: #b5b6b7;
	border: 1px solid #b5b6b7;
	border-radius: 3px;
	padding: 7px 12px 5px 11px;
}
form .btn-grn {
	color: #1E4220;
	background-color:#E5F3E6;
	border-color: #b5b6b7;
	border: 1px solid #b5b6b7;
	border-radius: 3px;
	padding: 7px 12px 5px 10px;
}
form .input-error {
	outline: 2px solid #BD0202;
}
form .input-error-checkbox {
	outline: 2px solid #BD0202;
}
form .oops {
	color: #BD0202;
	border: 1px solid #BD0202;
	padding: 5px 15px 6px 15px;
	background-color: #F6EFD0;
}


/* FAT FOOTER */
.fatFooter {
    grid-area: fatFooter; 
    width: 100%; 
    display: flex;
    flex-wrap: wrap;
    background-color: #E0E3E6;
    margin: 30px 0 0 -25px;
    padding: 10px 10px 50px 25px;
    font-family: 'Archivo Narrow', sans-serif;
}



/* MEDIA QUERIES  .  MEDIA QUERIES  .  MEDIA QUERIES */


@media all and (max-width : 650px ){
	  
.container { 
    grid-template-areas: 
      "mainContent"
      "hessSidebar"
      "fatFooter"; 
    grid-template-columns: 1fr;
}	
	
.mainContent {
	grid-area: mainContent; 
	margin: 0 0 0 30px;
    width: 95%;
}
.mainContent h1.superset {
    letter-spacing: 8px;
	white-space: nowrap;
}
.mainContent p, h1, h2 {
    padding-right: 30px;
}
.mainContent p.mcSpacer {
	display: none;
}
p.formplus br {
	display: none;		
}
}	


@media all and (max-width: 450px) {
		
.mainContent h1.superset {
    letter-spacing: 5px;
	white-space: nowrap;
}
}