/****************STYLE SHEET: HEADER FOOTER ELEMENTS********/
/*body {background: url(../shared/CHbodybg.jpg); background-size: 100% 100%;}*/
li .menuitem {list-style-type: none;}
ul#menulist {list-style-type: none;}

#SBCHheader {position: sticky; top: 0px; width: 99%; padding-left: 2px;
padding-top: 2px; display: flex; flex-direction: row; align-items: center; 
background-color: ivory; margin-bottom: 5px;
 border: solid; border-color: darkred; border-radius: 10px;  flex-wrap: wrap}
.headlogo {margin-left: 2px; margin-top: 5px; border: solid; display: block; max-height: 100px; width: auto; }
.headquickmsg { text-align: center; font-size: 1.5rem;
font-family: Arial; } 

.headdonateburger {display: flex; flex-direction: row; width: 100%; justify-content: center; align-items: center; flex-wrap: nowrap;}
.headmiddle {  width: 70%; display: flex; flex-direction: column; justify-content: space-around; align-content: space-around; }
/*.headmiddle > * {   flex: 1; }*/

.logobg {position: absolute; top: 0px; left: 0px; height: 56px; width: 100%;}

#headDonateButton {font-size: 1.4rem; background-color: darkred; color: white; width: 90px; line-height: 2.4rem; border-style: ridge; border-color: white; border-radius: 5px; text-align: center; font-family: Arial; cursor: pointer; max-height: 2.4rem; padding-left: 7px; padding-right: 7px;}

#headDonateButton a {color: white; }
.menubar {background-color: darkred; color: white; font-family: Arial; border-radius: 5px; }
#menulist {display: flex; justify-content: space-between;  text-decoration: none;  font-size: 1.3rem; color: white; }

.menuitem {list-style-type: none;}
/*.subitemtop:hover > .submenu {display: block;}*/
.subitemtop:hover > .submenu {display: flex; flex-direction: column; justify-content: space-between;}
.subitemtop:hover > .turncaret {transform: rotate(90deg);}
.submenu { display: none; margin-left: -30px; margin-bottom: 10px;}
.currentItem {text-decoration: underline;}

.hamline {background-color: black; width: 25px; height: 3px; display: none; margin: 5px;}
.turned {transform: rotate(0);}

@media only screen and (min-width: 700px) {

#menulist {flex-direction: row; width: 95%;  font-size: 1.5rem; }
.hamburger {display: none; }
.menubar {padding: 1px 1px; margin-top: 10px; width: 100%; padding-right: 2px; margin-left: -2px; width: 100%; }
.menuitem {border-style: none solid none solid; border-color: ivory; padding-left: 1.3rem; padding-right: 1.3rem; padding-top: .3rem; padding-bottom: .3rem;}
#menulist {margin: 0;}
.subitem {display: block;} 

}

@media only screen and (max-width: 699px) {
#menulist {width: 100%; height: 55vh; display: flex; flex-direction: column; 
/* line-height: 1rem; */ justify-content: space-between;}
.headmiddle {width: 60%;}
.menuitem {color: white; text-decoration: none;  list-style-type: none;}
.menubar { position: fixed; right: 0px;  width: 65vw; height: auto; max-height: 75vh; z-index: 10; top: 120px; border-radius: 7px;  transform: translatex(100%); transition: transform 0.5s ease-in; overflow-y: scroll; padding-top: 5px; } 
.headdonateburger { margin-right: 1%; margin-left: calc(49% - 45px); 
width: calc(50% + 45px); justify-content: space-between; margin-top: -15px; flex-wrap: nowrap;}
.hamline {display: block; margin-top: 0px;}
.hamburger { margin-top: 0px;  cursor: pointer; transition: all 0.3s ease;}
.nav-active {transform: translatex(0%); }
.hide-ov {overflow-y: hidden;}
.xburger #hamline1 {transform: rotate(-45deg) translate(-5px,6px);}
.xburger #hamline2 {opacity: 0;}
.xburger #hamline3 { transform: rotate(45deg) translate(-5px,-6px); }
#s2 li {margin-top: 1.5em; }
#sm1, #sm2, #sm3 {margin-bottom: 5px;}
.submenu {display: flex; flex-direction: column; justify-content: space-between;}
}

@media only screen and (max-width: 500px) {
.headlogo {max-height: 80px;}
}
@media only screen and (max-width: 350px) {
.headlogo {max-height: 70px; max-width: 30%;}
.headquickmsg: {font-size: 1.2em;}
.headdonateburger {justify-content: flex-start; }
}

#m1 a, #m2 a, #m3 a, #m4 a, #m5 a, #m6 a, #m7 a, #m8 a, #m9 a, #m10 a, 
#sm1 a, #sm2 a, #sm3 a {color: white; max-width: 100%; list-style-type: none;}
.menuitem a {text-decoration: none; max-width: 100%}
.menuitem a:hover{text-decoration: underline;}
.menuitem {text-decoration: none;}
/*************Footer********************/
#SBCHfooter {border-style: groove none none none; border-color: ivory}
.logoimg {max-height: 100px; width: auto; }
.ivorybacktext {/*background-color: rgba(255, 255, 240, .2); */ border-radius: 3px; padding: .5em; color: black;}
/***new footer stuff ***/
.footer {padding-top: 1em; background-color: ivory;}
#footerAddr {display: flex; flex-direction: row; width: 99%; margin: 0 auto; justify-content: space-around; align-items: center; padding-bottom: 10px; align-items: center;}
/****footeraddricons will replace footeraddr after test January 2022****/
#footerAddrIcons {display: flex; flex-direction: row; width: 290px; margin: 0 auto; justify-content: space-between; align-items: flex-start;  flex-wrap: no-wrap;}
.footerText {height: .8em;}
.footerIcons {display: flex; flex-direction: row;}
#infoadd {height: 35px; width: auto;}
#talogo {height: 55px; width: auto; padding-top: 3px;}
#taimg {height: 51px; width: auto; }
#instalogo {height: 63px; width: auto;  padding-top: 3px;}
@media only screen and (min-width: 600px) {
/* #footerAddr { max-width: 600px; flex-wrap: nowrap;}*/
/*#footerAddrIcons { max-width: 500px; flex-wrap: nowrap;}*/
}