/****/
/****/
/****************************this is test from url https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 ********************/
/***      #00A86B ***jade**             BEBDB8 smoke      **/          /** lime 00FF00 **/
/******************************* section 1 create header and navlist ******/
body {margin:0;padding:0;

background-color: #FFFFFF;
background-color: #FFEFD5;
}
body,table,tr,td {font-family:Verdana,Arial,Helvetica,sans-serif;
color:black;
font-size:16px;
}
h1{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1.8em;text-align:center;margin-top:5px;margin-bottom:10px;color:#CD5C5C;} /*indianred*/
h2{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1.4em;margin-top:5px;margin-bottom:10px;color:#CD5C5C;} /*indianred*/
h3{font-family:Verdana,Arial,Helvetica, sans-serif;font-size:14px;margin-top:0;margin-bottom:5px;color:#CD5C5C;}
p {text-indent: 30px;}
h1,h2,h3{color:#000;}
.h2_top_img{
width:200px;
}
/*
h1{
 text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
} */

.header {
background-color: #fff;
background-color: #FFEFD5;
background-color: moccasin;
/*background-color: tan;
background-color: #000;
background-color: cornsilk;
background-color: orange;
background-color: lavenderblush;  */
/*background-color: salmon;
background-color: sandybrown;
background-color: gold;   */
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
/* position: fixed; */ /************this causes the header to not scroll with the page**************/
width: 100%;
height:auto;
z-index: 3;
overflow:hidden;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover {background-color: #f4f4f4;}
.header .logo {
display: block;
float: left;
color:#00A86B; /***jade**/
font-size: 2em;
font-weight:bold;
padding: 10px 20px;
text-decoration: none;
}

.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*******************************************section 2*********************/
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {top: 5px;}
.header .menu-icon .navicon:after {top: -5px;}
/******************************************section 3 *******************/
.header .menu-btn {display: none;}
.header .menu-btn:checked ~ .menu {max-height: 240px;}
.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}
/******************************** section 4 ********************/

@media (min-width: 48em) {   /**********this is for anything over this width***/
.headertop{width:50%}
.header li {float: left;}
.header li a {padding: 20px 30px;}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {display: none;}
}
/*******************************end header *********************/
.content{
width:100%;
min-height:300px;
padding:10px;
}

.cleaner{clear:both;}
.clearleft{clear:left;}
.space5{height: 5px;}
.space10{height: 10px;}
.responsive_img {max-width:100%;height:auto;}
.responsive_imgfl {max-width:100%;float:left;height:auto;border:0;}
.responsive_imgfr {max-width:100%;float:right;height:auto;border:0;}

/*********************** this is for fancy h2 display ******************/
.hgrid {
width:220px;
float:left;
display: grid;
grid-template-columns: 20px 200px;
grid-template-rows: auto auto 7px;
margin-right:10px;
margin-bottom:10px;
}
@media (max-width: 48em) {   /**********this is for anything under this width***/
.hgrid {width:100%;}
.responsive_imgfr{margin-top:10px;}
}
.hleft {
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.hrtop {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.hrmid {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.hrbtm {
grid-column: 2 / 3;
grid-row: 3 / 4;
background-color: #00A86B;
}

.thumbcont{
float:left;
padding:2px;
margin:5px;
border:2px solid #00A86B;
border-radius:5px;
}
/*********** button to close large image ****************/
#lrg-container{float:left;position: relative;}
#lrg-image-btn {float: left;}
#lrg-image-btn input { position: absolute; top: 20px; left: 20px;display: none;cursor: pointer;}


#footer{
width:100%;
min-height: 50px;
background-color: #f4f4f4;
text-align: center;
padding-top: 10px;
font-size: 80%;
font-weight: bold;
/*border-top:2px solid #BEBDB8;*/
border-top:1px solid #E7E4E4;
/*border-bottom:1px solid #BEBDB8;*/
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
}

.footerinner{width:500px;}
.footerphl{width:50%;float:left;}
.footerphr{width:50%;float:left;}

#zigfooter{
width:100%;
height:20px;
font-size:70%;
text-align:center;
margin-top: 8px;
margin-bottom: 8px;
padding: 2px;
font-weight: bold;
}
#zigfooter a:link{text-decoration: none; color: blue;}
#zigfooter a:visited{text-decoration: none; color: blue;}
#zigfooter a:hover{text-decoration: underline; color: red;}
/*******************************back to top button ********************/
#myBtn {
display: none;    /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color:#00A86B; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}

#myBtn:hover{background-color: #555; /* Add a dark-grey background on hover */}