/* Main Header Elements
---------------------------------------------------------------- */
#HeaderContainer {width: 100%; z-index: 1;}

/* Header Top (Desktop)
---------------------------------------------------------------- */
#HeaderTop {width: 100%; height: 116px; background: #c23172; z-index: 1;}
#HeaderLogoTop {float: left; padding: 0 0 0 10px;}
#HeaderLogoTextTop {float: left; padding: 44px 0 0 25px; font-size: 25px; font-weight: bold; color: white;}
@media only screen and (min-width: 800px) {#HeaderLogoTextTop {font-size: 30px;}}

#HeaderMenu {float: right; padding: 15px 15px 0 0; text-align: right; color: white;}
#HeaderMenu a {color: white;}
#HeaderMenu a:link {color: white;}
#HeaderMenu a:hover {color: #f3d6e3;}
#HeaderMenu a:active {color: #f3d6e3;}

#HeaderSearch {position: relative; float: right; box-sizing: border-box; width: 300px; height: 32px; margin: 35px 0 0 0; padding: 0 0 0 0;}
#HeaderTxtkeysContainer {float: left; width: 100%;}
#HeaderTxtkeys {width: 100%; height: 32px; border: 0; border-radius: 5px; margin: 0; padding: 0 10px 0 10px; color: #222222; font-size: 16px;} /* padding-right is 40px if we put the search magnifying glass back. */

#HeaderTxtkeysSearchButtonContainer {float: left; margin: -6px 0 0 -32px; padding: 0; color: #c23172; font-size: 30px; cursor: pointer;}
#HeaderTxtkeysSearchButtonContainer:hover {color: #611a2d;}

#HeaderSearchFiltersDiv {position: absolute; left: 0; top: 32px; width: 300px; padding: 10px; border: #cccccc 1px solid; color: #222222; background: #84b077; z-index: 1; display: none;}
.HeaderSearchFilters {width: 100%; border: #cccccc 1px solid;}

#HeaderSearchFiltersCloseBtn {position: absolute; bottom: -14px; right: -12px; width: 26px; height: 26px; border: #999999 2px solid; border-radius: 13px; color: #ffffff; background: #000000; text-align: center; font-family: Verdana; font-size: 15px; font-weight: bold; line-height: 18px; cursor: pointer; z-index: 2002;}
#HeaderSearchFiltersCloseBtn:hover {color: #000000; background: #ffffff;}

/* Navbar Bottom (Mobile)
---------------------------------------------------------------- */
#HeaderTopMobile {width: 100%; height: 75px; background: #c23172; z-index: 1;}
#HeaderLogoBtm {float: left; padding: 5px 0 0 10px;}
#HeaderLogoTextBtm {float: left; padding: 30px 0 0 20px; font-size: 20px; font-weight: bold; color: white;}

#NavBarTxtkeysContainer {float: left; width: 100%;}
#NavBarTxtkeys {width: 100%; height: 32px; border: 0; border-radius: 5px; margin: 19px 0 0 0; padding: 0 10px 0 10px; color: #222222; font-size: 16px;}  /* padding-right is 40px if we put the search magnifying glass back. */

#NavBarTxtkeysSearchButtonContainer {float: left; margin: 13px 0 0 -32px; padding: 0; color: #c23172; font-size: 30px; cursor: pointer;}
#NavBarTxtkeysSearchButtonContainer:hover {color: #611a2d;}

#HeaderBtmContainer {width: 100%; z-index: 1;}
#HeaderBtm {height: 70px; width: 100%; padding-left: 12px; background: #c23172; display: flex; flex-flow: nowrap; z-index: 1;}

#HeaderBurgerDiv {width: 69px; padding: 20px 0 0 12px;}
#HeaderBurgerContainer {box-sizing: content-box; float: left; width: 42px; margin: 0; padding: 0;}
.HeaderBurger {box-sizing: content-box; width: 42px; height: 27px; border-radius: 3px; padding-top: 5px; background: #611a2d; cursor: pointer;}
.HeaderBurgerLine {width: 22px; height: 2px; margin: 4px 0 0 10px; background: #f0eee8;}

#NavbarSearchFiltersCloseBtn {position: absolute; bottom: -14px; right: -12px; width: 26px; height: 26px; border: #999999 2px solid; border-radius: 13px; color: #ffffff; background: #000000; text-align: center; font-family: Verdana; font-size: 15px; font-weight: bold; line-height: 18px; cursor: pointer; z-index: 2002;}
#NavbarSearchFiltersCloseBtn:hover {color: #000000; background: #ffffff; }

/* Navbar Bottom Sliding Menu (Mobile)
---------------------------------------------------------------- */
@media (min-width: 769px) {#MainMenu {display: none;}}
.DropdownMenuSection a {text-decoration: none;}
.DropdownMenuTop {width: 200px; height: 50px; background: blue; color: white; display: none;}
.DropdownMenuItems {display: none;}
.DropdownMenu1 {height: 40px; padding-top: 8px; background: black; color: white; font-size: 16px; text-align: center; text-transform: uppercase; cursor: pointer;}
.DropdownMenu1:hover {background: #611a2d;}
.DropdownMenu1Item {color: white;}
.DropdownMenu1Selected {background: #611a2d;}

/* Show and Hide Desktop and Mobile Headers
---------------------------------------------------------------- */
#HeaderTop {display: none;}
#HeaderTopMobile {display: block;}
#HeaderBtmContainer {display: block;}

@media only screen and (min-width: 769px) {
	#HeaderTop {display: block;}
	#HeaderTopMobile {display: none;}
	#HeaderBtmContainer {display: none;}
}

@media only screen and (min-width: 992px) {
	#HeaderSearch {width: 400px;}
	#HeaderSearchFiltersDiv {width: 400px;}
}
