html { font-size: 10px; box-sizing: border-box; }
body { font: 2.5rem Verdana, "Trebuchet MS", Arial, sans-serif;}
h1   { font-size: 4rem; }
h2   { font-size: 3rem; margin-bottom: 5px;}
h3   { font-size: 2.5rem; margin-bottom: 5px;}
p    {  margin: 0 0 1em; }
li   { list-style-type: none;}
/*hr {display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}*/
/*hr {width: 300px;margin-left: auto;margin-right: auto;height: 100px;background-color:#666;opcaity: 0.5;}*/
/*hr {width: 300px;margin-left: auto;margin-right: auto; height: 5px; background-color:#666; opcaity: 0.5;}*/
hr {width: 80%  ;margin-left: auto;margin-right: auto; height: 5px; }

.zig-zag { border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 40px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 40px 40px; background-color: #EC173A;}

.incline-line{ width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; transform: rotate(10deg); border-color: purple; }

*, *:before, *:after { box-sizing: inherit;}

body {
	margin: 0;
	padding: 0;
	background-image: url("../images/BKGNDMintGrn.jpg");
    background-size: 100%;
	text-align: center;
	color: black
}

.grid-container {
  width: 100%;
  height:800px;
  margin: auto;
  display: grid;
  grid-template-columns: 200px 300px;
  grid-template-rows: 150px 300px 300px 50px;
  gap: 5px;
  padding: 10px;
}

.grid-container > div {
	/*background-image: url("../images/BKGNDMintGrn.jpg");*/
    text-align: center;
    padding: 5px 5px;
    font-size: 1.8rem;
    border: solid 2px red;
}


.item1 {
  grid-column: 1 / span 3;
}
    
.item2 {
    grid-row: 2 / span 2;
}    
    
.item3 {
    grid-column: 2 /span 2;
    grid-row: 2 /span 2;
}
     
    
.item4 {
    grid-column: 1 /span 3;
} 

/* CSS Grid Styles */
/*
.grid-container2 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: repeat(3, minmax(75px, auto));
   grid-gap: 2rem;
}
*/
 .grid-container2 {
  width: 100%;
  height:800px;
  margin: auto;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 150px repeat(2, minmax(350px, auto)) 50px;
  gap: 5px;
  padding: 10px;
}

.grid-container2 > div {
    text-align: center;
    padding: 5px 5px;
    font-size: 1.8rem;
    border: solid 2px red;
}
.item01 {grid-column: 1 / span 4;}
    
.item02 {grid-row: 2 / span 2;}    
    
.item03 {
    grid-column: 2 /span 2;
    grid-row: 2 /span 2;
}

/*
.item04 p {
    font-size: 2rem;
    line-height: 1.35;
}  
*/

.item04 {grid-row: 2 /span 2;}   
    
.item05 {grid-column: 1 /span 4;}  

.top {vertical-align: top;}

/*.left {
    position: absolute;
    left: 220px;
    top: 40px;
}

.right {
    position: absolute;
    right: 220px;
    top: 40px;
}
*/

.left {float: left; margin: -100px 60px;}

.right {float: right;margin: -100px 60px;}

h1 .left {float: left; margin: 0 10px;}

h1 .right {float: right;margin: 0 10px;}

.center {
    margin-left:  auto;
    margin-right: auto;
}

/*

.item1 { grid-area: header;}
.item2 { grid-area: leftMenu;}
.item3 { grid-area: main;}
.item4 { grid-area: footer;}

.grid-container {
    display: grid;
    grid-template: 50 100 100 100 200 200/ auto auto auto auto auto auto;
    grid-template-areas: 
        'header header header header header header' 
        'leftMenu leftMenu submain submain submain submain' 
		'leftMenu leftMenu main main main main'
        'leftMenu leftMenu main main main main'
        'footer footer footer footer footer footer';
    gap: 5px;
    background-color: teal;
    padding: 5px;
}
*/

td { 
    vertical-align: top;    
    border: solid 1px #777; 
}

figure {
    display: inline-block;
    margin: .5em;
    position: relative;
}

figcaption {
    background-color: rgba(255,255,255,.4);
    padding: .5em;
    position: absolute;
    bottom: 0;
    width: 100%
}

#topBanner { 
    font-size: 3rem;
    font-weight: bold;
    padding: 5px 3px;
    color: green;
    text-shadow: -2px 3px 1px #000;
}

#topLogo {
    margin: 5px 0 10px;
	font-size: 4rem;
    color:blue;
    text-shadow: -1px 2px 2px violet,
                 1px 1px 5px  white,
                 1px 1px 20px purple,
                 0px 1px 20px yellow,
                 1px 0px 20px green;
    
}

.sideLogo {
    margin: 5px 0 20px;
    color: black;
    text-shadow: -1px 2px 3px red,
                 1px 1px 10px white,
                 1px 1px 20px blue,
                 0px 1px 20px yellow,
                 1px 0px 20px red;
}

#price {
    margin: 5px 0 20px;
    color: blue;
    text-shadow: -1px 2px 3px red,
                 1px 1px 10px yellow,
                 1px 1px 20px yellow,
                 0px 1px 25px white,
                 1px 0px 30px red,
                 1px 0px 35px red;
}

#lprice {
    margin: 5px 0 20px;
    color: rebeccapurple;
    text-shadow: -1px 2px 4px #000,
                 1px 1px 10px red,
                 1px 1px 20px red,
                 1px 1px 30px red,
                 2px 2px 40px white;
}

img {
	border-radius: 5%;
	box-shadow: 0 4px 4px 1px #999;
}

.ovalPic p img {
	border-radius: 50%;
	border: solid 3px #fff;
	box-shadow: 0 4px 4px #999;
}

.navtop li { 
    display: inline-block;
    padding: 0;
    margin: 0;
}

.navtop  a:link {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 1.8rem; 
	font-weight: bold;
	*/text-decoration: none;*/
	color: black; 	
}
	
.navtop  a:visited { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 1.8rem; 
	font-weight: bold;
	text-decoration: none; 
	color: black; 	
}

.navtop  a:hover   {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 1.8rem; 
	font-weight: bold;
	text-decoration: underline; 
	color: yellow; 	
}

nav.navLside {
    color: #000;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 5;
}

.navLside a:link {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 2rem; 
	font-weight: bold;
	text-decoration: underline; 
	color: navy; 	
}
	
.navLside  a:visited { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 2rem;
	font-weight: bold;
	text-decoration: underline; 
	color: navy; 	
}
	
.navLside  a:hover   {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 2rem;
	font-weight: bold;
	text-decoration: none; 
	color: red; 	
}

table.topRow { 
	width: 100%; 
	border-collapse: collapse;
    border: solid 3px #777; 
    margin-left: auto;
    margin-right: auto;

}

.leftCol   { 
    width: 300px;
    min-height: 600px;
    border: solid 5px #777; 
    text-align: center;
	font-size: 1.5rem; 
	font-weight: bold;
	color: blue; 
}
.centerCol { 
    width: 600px;
    min-height: 600px;
    border: solid 5px #777;
    text-align: center;
	font-size: 2rem; 
	font-weight: bold;
	color: blue; 
}

.rightCol  { 
    width: 2fr;
    min-height: 600px;
    border: solid 5px #777; 
	text-align: center;
	font-size: 2rem; 
	font-weight: bold;
	color: blue; 
}

 .leftCol td, .centerCol td, rightCol td{
    vertical-align: middle;
}

thead th { 
	background-color: steelblue; 
	font-size: 25px; 
	font-weight: bold;
	color: black; 
}

h1 { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 4rem;
	text-align: center;
	text-decoration: none;	
	color: #238e68;
}

h2 { 
	font-family: Arial, sans-serif; 
	font-size: 30px; 
	color: navy;
}

h2#topBanner {
   	font-family: Arial, sans-serif; 
	font-size: 45px; 
	text-align: center;	
	text-decoration: underline;
	color: #004080; 

}

h2.emails {
	font-family: Arial, sans-serif; 
	font-size: 45px; 
	text-align: center;	
	text-decoration: underline;
	color: #004080;
}

.emails a:link {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 45px; 
	font-weight: bold;
	text-decoration: underline; 
	color: navy;/*#676464 Drkgrey*/ 	
}
	
.emails a:visited { 
	font-family:  Verdana, Arial, sans-serif; 
	font-size: 15px; 
	font-weight: bold;
	text-decoration:underline; 
	color: #676464; /*Drkgrey*/	
}
	
.emails a:hover {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	font-weight: bold;
	text-decoration: underline; 
	color: red; 
}


h3 { 
	font-family: Arial, sans-serif; 
	font-size: 13px; 
	color: #07FC13;
}

p.title1 {
	font-family: Arial, sans-serif; 
	font-size: 20px; 
	text-align: center;
	text-decoration: none;	
	color: black;
}



footer {
    background-color: #363636;
    color: #fff;
    text-align: right;
    margin-top: 2em;
    padding: 1em 1em .5em;
    position: sticky; 
    font-size: 1rem;
    width: 100%;
}

footer img {
    border: none;
	box-shadow: none;
    position: absolute;
    top: -40px;
    right: 1px;
}
.firstLetter p::first-letter{
    font-size: 200%;
    font-style: italic;
    line-height: .6;
    font-family: Courier, Georgia, Tahoma, "Tebuchet MS", sans-serif;
    /*font-size: 6rem;*/
    letter-spacing: 5px;
    margin-top: 5px;
    color: white;
    text-shadow: 0px 0px 20px rgb(0,255,255),
                 0px 0px 20px rgb(0,255,255),
                 0px 0px 20px rgb(0,255,255),
                 0px 0px 20px rgb(0,255,255);
}
	/*color: #676464; Drkgrey*/
	/*color: #FFFFFF; white*/
	/*color: #000000; black*/
	/*color: #FC0707; red  */
	/*color: #07FC13; green*/
	/*color: #3007FC; blue*/
	/*color: #F0FC07; yellow*/
	/*color: #07FCF8; teal*/