/* responsive media settings =================================================*/

/* phone/fax/advice "buttons" ================================================*/
.hoverButton {
	text-align: start;
	flex-grow: 0;
}

/* hamburger =================================================================*/
.hamburgerContainer {
	/* display: none; */
  	margin: auto;
	font-size: 10pt;
	color: white;
	position: absolute;
	z-index: 5;
	margin-left: -128px;
	left: -100%;
	background-color: transparent;
	width: 128px;
	border-right: 1px sol÷id #1f1f6f;
	/* border-radius: 0 5px; */
}

.hamburgerContainer:hover {
	display: block;
}

/*============================================================================*/
/* the trick here is hover over container renders child (buttons) visible ====*/
/*============================================================================*/
.hamburgerContainer:hover .hamburgerButton {
	display: block;
}

.hamburgerImage {
	/* hamburger menu not normally visible */
	display: none;
	height: 50px;
	float: right;
	position: relative;
	z-index: 10;
}

.hamburgerImage:mouseout {
	display: none;
}

.hamburgerItems {
	width: 128px;
	float: right;
	z-index: 5;
	display: none;
}

.hamburgerButton {
	padding: 5px;
	float: right;
	border-style: none none solid none;
	border-width: 1px;
	border-color: white;
	border-radius: 0px;
	color: white;
	background-color: #1f1f6f;
	text-align: left;
	font-size: 12px;
	width: 128px;
	box-shadow: none;
	display: none;
	margin: 0px;
}

.hamburgerButton:hover {
	color: #cccccc;
}

.last {
	border: none;
	padding-right: 0px;
}
.hamburgerButton:focus {
	transform: none;
	/* border-color: green; */
	text-decoration: none;
	color: blue;
	border: none;
}

@media screen and (max-width: 1600px){
	.M8M9 {
		display: none;
	}
}

/* check for hover not available =============================================*/
@media (hover:none) {
}

@media (max-width: 1200px) {
	.siblingsTable {
		width: 75%;
	}
	.siblings {
		width: auto;
	}
}

@media (max-width: 1000px) {
	.siblingsTable {
		width: 90%;
	}
	.siblings {
		width: auto;
	}
	.hideNarrowText {
		display: none;
	}
	.flexFast {
		flex-grow: 0;
	}
	.cherry {
		height: 76px;
	}
	.cherry_left {
		width: 40%;
	}
}

/* vertical footers once the screen gets too narrow ==========================*/
@media (max-width: 815px) {
	/* .leftFooter, .centreFooter, .rightFooter {
		width: 95%;
	} */
	.categoryList {
		columns: 3;
	}
}

@media (max-width: 775px) {
	/* .topLogo {
		display: unset;
	}
	.logo {
		display: none;
	} */
}

@media (max-width: 700px) {
	.bigProductContainer {
		flex-wrap: wrap;
	}
	.detailsContainer {
		flex-wrap: wrap;
	}
	.PO {
		font-size: 16px;
	}
}

@media (max-width: 650px) {
	.PO {
		font-size: 12px;
	}
	.orderNumberTitle {
		font-size: 12px;
	}
	.orderNumber {
		font-size: 12px;
	}
	.orderTable {
		font-size: 12px;
	}
	.cart {
		font-size: 12px;
	}
}

@media (max-width: 600px) {
	.footer {
		flex-flow: column;
		text-align: left;
	}
	.leftFooter {
		width: 100%;
		margin-bottom: 16px;
	}
	.rightFooter {
		width: 100%;
		margin-bottom: 16px;
	}
	.vehicleRecordOuter {
		flex-flow: column;
	}
}

/* hide the cart =============================================================*/
/* hide the block menu, move to hamburger ==================================*/
@media (max-width:870px) {
	.vehicleInfoContainer {
		flex-flow:wrap-reverse;
		justify-content: center;
	}
	.vehicleInfo {
		width: 100%;
	}
	.cartMenu {
		display: none;
	}
	.topMenu {
		display: none;
	}
	.logo {
		display: none;
	}
	.productMenu {
		display: none;
	}
	.categoryList {
		columns: 2;
	}
	.orderNumberTitle {
		font-size: 12px;
	}
	.orderNumber {
		font-size: 12px;
	}
	.boldData {
		font-size: 12px;
	}
	.POnoFill {
		width: initial;
	}
	.hamburgerContainer {
		display: block;
		left: unset;
		right: 6px;
	}
	.hamburgerImage {
		display: block;
	}
	.topMenu {
		display: none;
	}
	.blockMenu {
		display: none;
	}
	.top {
		position: sticky;
		top: 0px;
	}
	.logoImage {
		display: none;
	}
	.smallLogo {
		display: block;
	}
	.carouselContainer {
		display: none;
	}
	.orderTable {
		font-size: 12px;
	}
	.cart {
		font-size: 12px;
	}
	.orderButton {
		display: none;
	}
	.qedTD {
		font-size: 12px;
	}
}

@media (max-width: 500px) {
	.PO {
		display: none;
	}
	.bigProductContainer {
		flex-flow: column;
	}
	.bigProductImageContainer {
		align-self: center;
		width: 90%;
	}
	.bigProductDetails {
		align-self: center;
		width: 90%;
	}
	.siblings {
		align-self: center;
	}
	.moreInformation {
		align-self: center;
	}
	.otherDocuments {
		align-self: center;
	}
	.brandFilter {
		margin-top: 0px;
	}
	.dumpster {
		display: none;
	}
	.favLess {
		display: none;
	}
	.favList {
		display: none;
	}
	.qedTD {
		font-size: 10px;
	}
	.qedLess {
		display: none;
	}
	.addNumber {
		font-size: 10px;
		width: 24px;
	}
	.tableSums {
		font-size: 10px;
	}
	.orderTablePrice {
		width: 50px;
	}
}


/* form labels need to be left aligned =======================================*/
@media (max-width: 490px) {
	.adminLabel {
		text-align: left;
		padding-left: 6px;
	}
}



@media (max-width: 420px) {
	.thistle {
		display: none;
	}
}

@media (max-width: 400px) {
	.buyMore {
		display: none;
	}
	.siblingsTable {
		font-size: 14px;
	}
}

@media (max-width: 400px) {
	.categoryList {
		columns: 1;
	}
}


/* move the hamburger menu on tiny screens ===================================*/
@media (max-height: 400px) {
	.hamburgerItems {
		margin-top: -50px;
	}
	.favTable {
		height: 300px;
		font-size: 12px;
	}
	.redButton {
		margin: 0px;
	}
}