html { overflow: hidden }
.mobileHeader {	display: flex; justify-content: center; align-items: center; width: 100%; position: absolute; top: 0px; height: 7%; padding: 2% 0% 2% 0%; background-color: #ededed; }
.searchBar { display: flex; justify-content: center; align-items: center; width: 100%; position: absolute; top: 0px; height: 7%; padding: 2% 0% 2% 0%; background-color: #ededed; }


/*border: 1px black solid; display: table; display: table-cell;*/
.menuIconSection { display: table; width: 7%; margin: 0% 2% 0% 2%; text-align: center; }
.menuIconCellSection  { display: table-cell; vertical-align: middle; text-align: center; width: 100%; position: relative; }

.logoSection { width: 52%; height: 100%; padding: 0% 2% 0% 2%; text-align: center; }
.cartSection {  width: 33.3%; height: 100%; vertical-align: middle; text-align: center; position: relative; text-align: center; color: white; font-size: 0.9em; } 
.userSection {  width: 33.4%; height: 100%; vertical-align: middle; text-align: center; color: white; position: relative; } 
.searchSection { width: 33.3%; height: 100%; vertical-align: middle; text-align: center; } 

.searchInputSection { display: table; width: 82%; margin: 0% 2% 0% 2%; } 
.searchIconSection { display: table; width: 2%; margin: 0% 2% 0% 0%; } 
.searchCancelSection { display: table; width: 6%; margin: 0% 2% 0% 2%; } 

.userContainer { position: relative; text-align: center; color: white; height: 10%; }
.centered { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; }

.menuIconImg { width: 90%; cursor: pointer; vertical-align: middle; }
.logoImg { height: 100%; cursor: pointer; vertical-align: middle; }
.searchIconImg { height: 80%; cursor: pointer; vertical-align: middle; }
.userIconImg { height: 80%; cursor: pointer; vertical-align: middle; }
 
.mobileSlideInMenu{ overflow: hidden; z-index: 100; width: 40%; height: 100%; border: 1px solid #b3b3b3; position: absolute; left: -50%; top: 0px; background-color: #456b00; color: white; padding: 1% 5% 1% 5%; }
.mobileMenuItemRow { display: flex; width: 100%; height: 10%; }
.mobileMenuItemColumn50 { width: 50%; height: 100%; cursor: pointer; } 
.mobileMenuItemColumn100 { width: 100%; height: 100%; cursor: pointer; } 
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }


#mobileMain { position: absolute; left: 0; right: 0; top: 11%; bottom: 0; overflow-y: scroll; width: 100%; /* Provide scrollbars if needed, position below header, and derive height from top/bottom  */ }

.flex100 { width: 100%; display: flex; justify-content: center; align-items: center; }
.pt20 { padding-top: 40px; }
.pr0 { padding-right: 0px; }
.pb20 { padding-bottom: 40px; }
.pl0 { padding-left: 0px; }

.div100 { width: 98%; margin: 0% 1% 0% 1%; border: 4px solid white; text-align: center; vertical-align: middle; color: black; font-size: 1em; }
.div50 { width: 46%; border: 2px solid #b4b3b4; margin: 0% 2% 0% 2%; background-color: #fff; color: #b4b3b4; cursor: pointer; }