/*
	The following elements are div containers that should have the same widths on the screen at all resolution break points:
		#HeaderContainer (header.css)
		#resultsheader (resultsheader.css)
		#SearchResultsContainer (results.css) Note: This should be 20px wider than the other containers.
		#SearchResultsPagination (pagination.css)
		#SearchNavContainer (searchnav.css)
		#LightboxesContainer (lightboxes.css)
*/

/* Show either the Mobile Header or the Desktop Header
---------------------------------------------------------------- */
#HeaderMobileMenu {display: block;}
#HeaderContainer {display: none;}

@media only screen and (min-width: 1024px) {
	#HeaderMobileMenu {display: none;}
	#HeaderContainer {display: block;}
}

/* Mobile Header
---------------------------------------------------------------- */
#HeaderBurgerLogo480 {display: none;}

@media only screen and (min-width: 480px) {
	#HeaderBurgerLogo320 {display: none;}
	#HeaderBurgerLogo480 {display: block;}
}
@media only screen and (max-width: 480px) {
	.BurgerButtonOpen {
		margin-top: -3px; 
		cursor: pointer;
	}
}
/* Desktop Header
---------------------------------------------------------------- */
.HeaderButton {height: 36px; border: 0; padding: 0px 15px 5px 15px; background: black; color: white; font-weight: bold;}
.HeaderButton:hover {text-decoration: underline;}
.HeaderButton:active {background: #3778a0; text-decoration: none;}
.HeaderButton:focus {outline:0;}

.HeaderCalculateButton {width: 100px; border: 0; background: black; color: white; font-size: 11pt; font-weight: bold;}
.HeaderCalculateButton:hover {text-decoration: underline;}
.HeaderCalculateButton:active {background: #3778a0; text-decoration: none;}

.HeaderViewBasketButton {width: 100%; height: 50px; border: 0; color: white; background: #3778a0; font-size: 12pt; font-weight: 600;}
.HeaderViewBasketButton:hover {text-decoration: underline;}
.HeaderViewBasketButton:active {background: black; text-decoration: none;}

#HeaderContainer {box-sizing: border-box; width: 100%; padding: 0 10px 0 10px;}
#HeaderWrap {box-sizing: border-box; width: 100%; border-bottom: #dcdcdc 1px solid; background: #f5f5f5;}
#HeaderLogo320 {float: left;}
#HeaderLogo480 {float: left; display: none;}
#HeaderLogo1024 {float: left; display: none;}
#HeaderBurgerContainer {float: right; padding-top: 35px; cursor: pointer;}
.HeaderBurgerLine {width: 22px; height: 2px; background: black;}
.HeaderBurgerSpacer {width: 22px; height: 4px;}
#HeaderBurgerLabel {float: right; padding: 32px 20px 0 0; color: #1f1f1f; font-size: 12pt;}
#HeaderMenu {float: right; margin-top: -100px}
#HeaderMobileMenu {font-size:12pt; line-height: 24pt }

@media only screen and (min-width: 480px) {
	#HeaderLogo320 {display: none;}
	#HeaderLogo480 {display: block;}
	#HeaderBurgerContainer {float: right; padding-top: 48px;}
	#HeaderBurgerLabel {float: right; padding: 45px 20px 0 0; color: #1f1f1f; font-size: 12pt;}
}

@media only screen and (min-width: 1024px) {
	#HeaderContainer {width: 940px; margin: 0 auto; padding: 0;}
	#HeaderLogo480 {display: none;}
	#HeaderLogo1024 {display: block;}
	#HeaderBurgerContainer {display: none;}
	#HeaderBurgerLabel {display: none;}
	#HeaderMenu {display: block; margin-top: 0px}
}

@media only screen and (min-width: 1280px) {
	#HeaderContainer {width: 1024px;}
}

@media only screen and (min-width: 1440px) {
	#HeaderContainer {width: 1120px;}
}

@media only screen and (min-width: 2560px) {
	#HeaderContainer {width: 1280px;}
}
.HeaderMenuItemBold {
	text-decoration: none;
}

.HeaderMenuItemBold:hover{
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
}
/* Shopping Cart Dropdown in the Desktop Header.
---------------------------------------------------------------- */
#HeaderMenuItemBasketLine {position: absolute; right: 0; bottom: -1px; width: 100%; border-bottom: black 1px solid; z-index: 4; display: none;}
#HeaderMenuItemBasketDropdown {position: absolute; right: 0; top: 60px; width: 332px; border: #dcdcdc 1px solid; background: white; font-weight: normal; text-align: left; z-index: 4; display: none;}

/* Delete from Cart Icon
---------------------------------------------------------------- */
.fa-trash-alt {color: #ce141c;}
.fa-trash-alt:hover {color: #6b070b;}

/* Skip navigation
---------------------------------------------------------------- */
.skip-nav{
	background: #fff;
	color: #000;
	font-weight: 700;
	left: 50%;
	padding: 4px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
}

.skip-nav:focus {
	transform: translateY(0%);
}