/* styles used everywhere */

body
{
font-family:Verdana,"Lucida Sans",sans-serif;
}
h1
{
color:#000080;  /* Navy Blue */
font-size:1.25em;
}
h2
{
font-size:1.25em;
}
h3
{
font-size:1.125em;
font-style:italic;
}
p
{
font-size:1.0em;
padding: 0px 10px 10px;
}
li
{
font-size:1.0em;
padding: 12px 3px;
}
a:link, a:visited
{
color:#696969;
}
a:hover, a:active
{
color:#000099;
}
img
{
border:none;
}
hr
{
display:block;
margin-top:6px;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
width:70%;
height:2px;
border-style:none;
background-color:#CCCCCC;
}

/* styles used on the home page */

.toplinks 
{
text-align:center;
color: #696969;
padding:0px 10px;
font-family:Verdana,"Lucida Sans",sans-serif;
font-size:0.875em;
}
.toplinks img
{
position:relative;
top:6px;
}
.logo
{
text-align:center;
padding:10px 0px;
}
.keybutton
{
text-align:center;
}
.keybutton h1
{
color: #000080;
font-size:1.375em;
}
.keybutton p
{
color: #000000;
font-size:1.0em;
font-style:italic;
}
a.keybutton:link, a.keybutton:visited
{
display: inline-block;
background-color: #CCCCCC;
border:none;
border-radius:30px;
padding:15px 30px;
margin:8px;
text-decoration:none;
}
a.keybutton:hover, a.keybutton:active
{
background-color: #808080;
}
a.keybutton:hover h1, a.keybutton:hover p
{
color: #FFFFFF;
}
.featuredproduct
{
text-align:center;
padding:12px;
}
.featuredproduct div
{
box-sizing:border-box;
height:100%;
padding:15px 10px;
border-radius: 25px;
border: 2px solid #CCCCCC;
}
.featuredproduct p
{
text-align:left;
}
.info
{
text-align:left;
padding:20px 40px;
}
.testimonial
{
text-align: center;
color: #696969;
padding:20px 10px;
font-size:1.0em;
font-style:italic;
}
.testimonialname
{
text-align: center;
color: #000080;
font-size:0.9375em;
font-style:italic;
}
.footer
{
text-align: center;
color: #696969;
padding:20px 10px;
font-size:0.875em;
}

/* home page grid area names */

.item1 { grid-area: TLK; }
.item2 { grid-area: LGO; }
.item3 { grid-area: B_B; }
.item4 { grid-area: B_T; }
.item5 { grid-area: B_K; }
.item6 { grid-area: FP1; }
.item7 { grid-area: FP2; }
.item8 { grid-area: FP3; }
.item9 { grid-area: FP4; }
.item10 { grid-area: FP5; }
.item11 { grid-area: FP6; }
.item12 { grid-area: BEN; }
.item13 { grid-area: CST; }
.item14 { grid-area: TST; }
.item15 { grid-area: BLK; }
.empty-area1 { grid-area: aaa; background-color: #696969; }
.empty-area2 { grid-area: bbb; background-color: #696969; }
.empty-area3 { grid-area: ccc; background-color: #696969; }
.empty-area4 { grid-area: ddd; background-color: #696969; }

/* home page layout and styles */

.grid-container-home {
  display: grid;
  justify-content: center;
  background-color: #696969;
  column-gap: 0px;
  row-gap: 0px;
  grid-template-columns: minmax(380px, auto);
  grid-template-areas:
    'TLK'
    'LGO'
    'B_B'
    'B_T'
    'B_K'
    'FP1'
    'FP2'
    'BEN'
    'CST'
    'TST'
    'BLK';
}

.grid-container-home > div {
  background-color: #FFFFFF;
}

@media only screen and (min-width: 636px) {
  .grid-container-home {
    display: grid;
    justify-content: center;
    background-color: #696969F;
    column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: repeat(4, minmax(190px, 230px));
    grid-template-areas:
      'TLK TLK TLK TLK'
      'LGO LGO LGO LGO'
      'B_B B_B B_T B_T'
      'aaa B_K B_K bbb'
      'FP1 FP1 FP2 FP2'
      'BEN BEN BEN BEN'
      'CST CST CST CST'
      'TST TST TST TST'
      'BLK BLK BLK BLK';
  }
}

@media only screen and (min-width: 1008px) {
  .grid-container-home {
    display: grid;
    justify-content: center;
    background-color: #696969;
    column-gap: 0px;
    row-gap: 0px;
    grid-template-columns: repeat(6, minmax(190px, 230px));
    grid-template-areas:
      'TLK TLK TLK TLK TLK TLK'
      'LGO LGO LGO LGO LGO LGO'
      'B_B B_B B_T B_T B_K B_K'
      'aaa FP1 FP1 FP2 FP2 bbb'
      'BEN BEN BEN CST CST CST'
      'ccc TST TST TST TST ddd'
      'BLK BLK BLK BLK BLK BLK';
  }
}