/* font for whole site =======================================================*/
/* @font-face {
   font-family: 'Open Sans', helvetica, arial, san-serif;
} */

* {
   font-family: 'Open Sans', helvetica, arial, san-serif;
}

body {
	margin: 0px;
}

fieldset {
	border: none;
}

a {
	color: inherit;
}

p {
	margin: 0px;
}

.home {
	text-align: center;
	color: #696969;
}

.mainBody {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}

.bodyDetails {
	display: flex;
	flex-direction: column;
	margin: 10px;
	color: #696969;
	width: 100%;
}

.bodyText {
	text-align: left;
	/* margin: 10px; */
}

.bodyTextDetail {
	text-align: center;
	margin: 10px;
	align-self: center;
}

.bodyFlexCenter {
	display: flex;
	margin: 10px;
	flex-flow: column;
}

.bodyText1 {
	font-size: 14pt;
}

.bodyText2 {
	font-size: 11pt;
}

.bodyTextCentred {
	margin: 10px;
	align-self: center;
	font-weight: bold;
}

.bodyTitle {
	text-align: center;
	height: 200px;
	background-image: url("/images/sys/hunterLogo.png");
	background-size: cover;
	background-repeat: no-repeat;
}

.bodyTitleText {
	color: #e0dddd;
	padding: 72px;
}
.bodyTitleShade {
	background-color: rgba(31, 31, 111, 0.45);
	height: 200px;
}

.bodyBig {
	font-size: 32pt;
}

.topTitle {
	padding: 40px;
	background-image: url(/images/sys/hunterLogoBlur.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgba(31,31,111,0.45);
	color: white;
	font-size: 40px;
	font-weight: 100;
}

.topText {
	font-size: 24px;
	padding: 30px;
}

.subTitle {
	font-size: 14pt;
}

/* ============================================= */
/*                                               */
/* marketing                                     */
/*                                               */
/* ============================================= */

.swatchText {
	width: 44px;
	text-align: right;
	margin-top: 8px;
	margin-left: 4px;
	margin-right: 8px;
}

.marketingPicture1class {
	text-align: center;
}

.modal-content-marketing {
	/* background-color: #fefefe; */
	margin: 10px auto;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 12px;
	max-width: 90%;
	overflow: auto;
}

.marketingButtons {
	display: flex;
	flex-flow: row;
	background-color: white;
}

.editMarketingButton {
	margin-top: 4px;
	margin-bottom: 4px;
	width: fit-content;
	border: none;
	background-color: transparent;
}

.editMarketingText {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.editMarketingButtons {
	display: flex;
	flex-flow: row;
	background-color: white;
}

/* .editMarketingColourButtons {
	display: flex;
	flex-flow: wrap;
	background-color: white;
} */

.marketingColours {
	flex-flow: wrap;
	justify-content: initial;
	margin-bottom: 6px;
}

.marketingColor, .marketingInk, .marketingStyle, .colorText{
	/* margin: 4px; */
	/* margin-top: 8px; */
	width: 18px;
	height: 24px;
	/* border: 1px solid lightgray; */	
	/* border-radius: 8px; */
	cursor: pointer;
	margin-bottom: 8px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 8px;
}

.marketingText {
	width: 99%;
	font-size: 14pt;
	resize: none;
	text-align: center;
	border: 1px solid lightgrey;
	margin: 2px auto;
}

.marketingReveal {
	min-height: 8px;
	min-width: 200px;
	border: 1px solid red;
}

/* must follow marketingText and marketingPicture */
/* ============================================== */
.focussed {
	border: 2px solid #38adfe;
	border-radius: 4px;
	padding: 2px;
}

.notFocussed {
	border: 2px solid lightgrey;
	border-radius: 4px;
	padding: 2px;
}

.styleImage {
	height: 24px;
	width: 24px;
	margin: 2px;
}

.fontLarger {
	margin-top: 4px;
}

.paperIcon {
	width: 18px;
}

.inkIcon {
	margin-left: -18px;
	margin-top: 6px;
}

.createMarketingButton {
	margin: 4px;
	width: fit-content;
	border: none;
	background-color: transparent;
}

.colorText {
	text-align: center;
	padding-top: 8px;
	width: 18px;
	height: 19px;

	/* puts picture of paper behind A of ink selector */
	/* ============================================== */
	background-image: url(/images/sys/paperIcon.png);
	background-repeat: no-repeat;
	background-size: contain;

	/* with a touch of colour so we can see yellow A and white A */
	/* ========================================================= */
	/* background-color: rgb(240,240,240); */
}

.colorTextTransparent {
	background-image: url(/images/sys/paperIconTransparent.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.darkPaper {
	background-color: rgb(220, 220, 220);
}

.separator {
	width: 2px;
	height: 36px;
}

.fontSizeLabel {
	margin-top: 8px;
	color: grey;
}

.marketingBlank {
	width: 27px;
	margin: 4px;
}

/* ============================================= */
/*                                               */
/* home                                          */
/*                                               */
/* ============================================= */

.homeImageContainer {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.homeBodyDetails {
	display: flex;
	flex-direction: column;
	margin: 10px;
	color: #696969;
	max-width: 75%;
	/* width: 100%; */
}

/* ============================================= */
/*                                               */
/* generic                                       */
/*                                               */
/* ============================================= */

.author {
	width: 95%;
	max-width: 600px;
}

.records {
	display: flex;
	flex-flow: column;
	width: 95%;
	align-items: center;
}

.recordButtons {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.recordOuter {
	margin-bottom: 24px;
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	flex-flow: column;
	padding: 8px;
	/* width: 90%; */
	/* max-width: 360px; */
	font-size: 14pt;
}

.recordContent {
	padding: 4px;
	white-space: pre-line;
	width: 99%;
}

.pictureFrame {
	display: flex;
	flex-flow: column;
}

.picture {
	max-width: 100%;
	margin-bottom: 4px;
}

/* ============================================= */
/*                                               */
/* vehicles                                      */
/*                                               */
/* ============================================= */

.vehicleOuter {
	margin-bottom: 24px;
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	display: flex;
	flex-flow: column;
	padding: 8px;
	width: 90%;
	max-width: 600px;
	font-size: 14pt;
}

.vehicleSelectedOuter {
	margin-bottom: 0px;
}

.vehicleAuthorBox {
	width: 95%;
	max-width: 600px;
}

.vehicleAuthorSelected {
	max-width: revert;
}

.vehicleRecordOuter {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-bottom: 0px;
	margin-right: 16px;
}

.vehicleBody {
	justify-content: center;
	flex-flow: row;
}

.vehicles {
	display: flex;
	flex-flow: column;
	width: 100%;
	align-items: center;
}

.vehicle {
	display: flex;
	flex-flow: column;
	margin: 24px;
	max-width: 600px;
	padding-top: 8px;
	font-size: 14pt;
	width: 100%;
}

.vehicleType {
	display: flex;
	flex-flow: column;
	/* margin: 24px; */
	max-width: 600px;
	padding-top: 8px;
	font-size: 14pt;
	/* align-items: center; */
}

.vehicleButton {
	color: #1f1f6f;
	border: 1px solid #e0dddd;
	border-radius: 32px;
	padding: 5px;
	/* width: 200px; */
	align-self: center;
	margin: 20px;
}

.vehicleInput {
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	padding: 8px;
	font-size: 14pt;
}

.vehicleInfoContainer {
	display: flex;
	flex-flow: row;
	max-width: 100%;
	margin: 20px;
	padding: 8px;
	border: 1px solid #1f1f6f;
	border-radius: 8px;
}

.vehicleInfo {
	margin: 10px;
	padding-top: 20px;
	display: flex;
	flex-flow: column;
	width: 35%;
}

.vehicleInfoPicture {
	max-width: 100%;
}

.vehicleInfoColumn {
	display: flex;
	flex-flow: column;
}

.vehicleTypeSpan {
	margin: 8px;
	text-align: center;
}

.vehicleSelectedContent {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	white-space: pre-line;
	padding: 4px;
}

.editVehicleTextButton {
	background-color: #1f1f6f;
	border: 1px solid;
	border-color: white;
	border-radius: 5px;
	box-shadow: 0em 0.2em 0.2em #9e9e9e;
	color: white;
	font-size: 12pt;
	margin: 0px;
	margin-top: 8px;
	margin-bottom: -12px;
	margin-left: 20px;
}

.learnMore {
	align-self: center;
}

/* ============================================= */
/*                                               */
/* vacancies                                     */
/*                                               */
/* ============================================= */

.vacancyOuter {
	/* margin-bottom: 24px; */
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	flex-flow: column;
	padding: 8px;
	width: 90%;
	max-width: 600px;
	font-size: 14pt;
	margin-bottom: -1px;
}

.vacancyAuthorBox {
	width: 95%;
	max-width: 600px;
	margin-top: 24px;
}

.vacancyBody {
	justify-content: center;
}

.vacancies {
	display: flex;
	flex-flow: column;
	width: 100%;
	align-items: center;
}

.vacancy {
	display: flex;
	flex-flow: column;
	/* margin-bottom: 24px; */
	/* border: 1px solid #1f1f6f;
	border-radius: 12px; */
	/* text-align: center; */
	max-width: 600px;
	padding: 8px;
	width: 95%;
	font-size: 14pt;
}

.vacancyInput {
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	padding: 8px;
	font-size: 14pt;
}

/* ============================================= */
/*                                               */
/* blog                                          */
/*                                               */
/* ============================================= */

.blogOuter {
	/* ?not used? */
	margin-bottom: 24px;
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	flex-flow: column;
	padding: 8px;
	width: 90%;
	max-width: 360px;
	font-size: 14pt;;
}

.blogBody {
	/* max-width: 400px; */
	justify-content: center;
}

.blogs {
	display: flex;
	flex-flow: column;
	width: 100%;
	align-items: center;
}

.blog {
	display: flex;
	flex-flow: column;
	margin-bottom: 24px;
	max-width: 600px;
	padding: 8px;
	width: 95%;
	font-size: 14pt;;
}

.blogContent {
	padding: 4px;
	white-space: pre-line;
}

.blogInput {
	padding: 8px;
	border: 1px solid #1f1f6f;
	border-radius: 8px;
	padding: 8px;
	font-size: 14pt;
}

.hunterFileButton {
	font-size: 14pt;
}

.filePicker {
	width: 75%;
}

.noborder {
	border: none;
	padding: 5px;
}

input[type="file"] {
	display: none;
}

.picturePicker {
	display: flex;
	flex-flow: row;
	/* margin: 4px; */
}

.swatches {
	display: flex;
	flex-flow: wrap;
	/* margin-left: 35px; */
}

.postPicture {
	/* width: 100%; */
	/* border: 1px solid #1f1f6f;
	border-radius: 8px; */
	/* margin-top: 8px; */
	max-width: 100%;
	margin-bottom: -4px;
}

.createPostButton {
	margin: 4px;
	width: fit-content;
	border: none;
	background-color: transparent;
}

.postBody {
	font-size: 14pt;
	resize: none;
	width: 100%;
	border: 1px solid #1f1f6f;
	border-radius: 12px;
	padding: 8px;
}

.postColor {
	margin: 4px;
	margin-top: 8px;
	width: 32px;
	height: 32px;
	border: 1px solid lightgray;
	border-radius: 8px;
	cursor: pointer;
}

.editorColumn {
	display: flex;
	flex-flow: column;
}

.editorColumnReverse {
	flex-flow: column-reverse;
}

.team {
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}

.teamMember {
	display: flex;
	flex-flow: column;
	width: 200px;
}

.scrollRegion {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 600px;
	max-width: 100%;
}

.doScroll {
	height: 1200px;
	overflow: auto;
}

.pictureContainer {
	display: flex;
	flex-flow: column;
	align-items: center;
}

/* ============================================= */
/*                                               */
/* image zoom window                             */
/*                                               */
/* ============================================= */
.zoomWindow {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	/* padding-top: 0 20px; */
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	/* background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.zoomImage {
	/* border: 1px solid grey; */
	border-radius: 8px;
	padding: 4px;
	background-color: white;
	width: 95%;
	max-width: 95%;
	max-height: 95%;
	object-fit: contain;
	margin: 4px;
	margin-top: -16px;
}

.zoomClose {
	margin-right: 5.5%;
	transform: translateY(40px);
	align-self: end;
	background-color: white;
	height: 24px;
	border-radius: 14px;
}

/* ============================================= */
/*                                               */
/* end of types                                  */
/*                                               */
/* ============================================= */

.resize {
	margin-left: 8px;
}

.header::after {
	content: "";
	position: absolute;
	height: 10px;
	width: 2000px;
	border-bottom: 1px solid #d1d1d1;
}

.headerLined {
	margin-right: 10px;
	font-weight: bold;
}

.ourServices {
	text-align: center;
	margin: 10px;
	margin-bottom: 64px;
	color: #696969;
}

.serviceTitle {
	font-size: 24pt;
	color: #1f1f6f;
}

.serviceList {
	font-size: 16pt;
	padding-inline-start: 0px;
}

.callUs {
	text-align: center;
	display: flex;
	background-color: #1f1f6f;
}

.callUsItem {
	width: 50%;
	margin: 12px;
}

.callUsText {
	color: #e0dddd;
	margin: 20px;
}

.callSmall {
	font-size: 24pt;
}

.callBig {
	font-size: 32pt;
}

.callUsButtonContainer {
	flex: auto;
	margin-bottom: 16px;
}

.callUsButton {
	color: #e0dddd;
	border: 1px solid #e0dddd;
	border-radius: 32px;
	padding: 5px;
}

.emptyBand {
	background-color: #38adfe;
	height: 80px;
	margin-bottom: 32px;
}

.bodyContainer {
	display: flex;
	justify-content: space-evenly;
	flex-flow: row;
}

.cursorBusy {
	cursor: progress;
}

.bodyContent {
	max-width: 1230px;
	width: 100%;
}

.cookieIcon {
	height: 32px;
	width: 32px;
}

.cookieButton {
	background-color: #f5f5f5;
	border: 1px solid;
	border-color: white;
	border-radius: 5px;
	box-shadow: 0em 0.2em 0.2em #9e9e9e;
	margin: 5px;
}

.cookiesYes {
    color: green;
}

.cookiesNo {
    color: #e2231a;
}

/* styling for top logo strip ================================================*/
.top {
	justify-content: space-between;
	width: 100%;
	background-color: white;
}

.topLogo {
	text-align: center;
}

.productMenu {
	align-self: flex-end;
}

.noPad {
	padding-inline-start: 0px;
}

.topMenu {
	margin-right: 10px;
}

.last {
	border: none;
	padding-right: 0px;
}

@media print{
	.noPrint {
		display: none;
	}
}

@media print {
	footer {
		page-break-after: always;
	}
}

.deleteText {
	color: #e2231a;
	text-decoration: none;
	font-weight: bold;
}

.tinyPic {
	/* height: 32px; */
	width: 32px;
}

.bodyContainer {
	display: flex;
	justify-content: space-evenly;
	flex-flow: row;
}

.cursorBusy {
	cursor: progress;
}

.bodyContent {
	max-width: 1230px;
}

.M8M9 {
	width: 25%;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	
	/* allow space for editor above */
	margin-top: 82px;
}

.blockMenu {
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	top: 0px;
	position: sticky;
	position: -webkit-sticky;
	z-index: 2;			/* so it's on top of the carousel and product page image */
	background-color: #f0f0f1;
	background-color: white;
	align-items: center;
}

.menuLogo {
	display: none;
}

.navLink {
	padding-bottom: 20px;
}

.stickySubMenus {
	position: sticky;
	position: -webkit-sticky;
	top: 57px;
	z-index: 2;
}

.productNav {
	margin-left: 5px;
	margin-right: 5px;
}

.cartIcon {
	margin-right: 5px;
	margin-top: 5px;
}

.smallLogo {
	max-height: 50px;
}

.cartMenu {
	margin-right: 5px;
	display: flex;
}

/* styling for top logo strip ================================================*/
.top {
	justify-content: space-between;
	width: 100%;
	background-color: white;
}

.topSearch {
	width: fit-content;
	border: none;
	margin: auto;
}

.searchText {
	width: 150px;
	align-content: center;
}

.searchIcon {
	transform: translateX(-6px) translateY(7px);
	height: 22px;
}

.search {
	margin-bottom: 5px;
}

.logoImage {
	height: 90px;
	padding-left: 5px;
	padding-top: 5px;
	padding-right: 5px;
}

.topMenu {
	margin-right: 10px;
	display: flex;
	justify-content: space-evenly
}

.hideHref {
	color: #696969;
	text-decoration: none;
	font-size: 14pt;
}

.hideHref:visited {
	text-decoration: none;
}

.hideHref:hover {
	text-decoration: underline;
}

.href {
	color: #696969;
	color: inherit;
	text-decoration: none;
	font-weight: bold;
}

.href:visited {
	text-decoration: none;
}

.href:hover {
	text-decoration: underline;
	cursor: pointer;
}

.topNav {
	background-color: transparent;
	display: block;
	float: right;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 12pt;
	text-decoration: none;
	margin-bottom: 10px;
	border-right: 1px solid;
}

.menuHighlight {
	font-weight: bold;
	color: #1f1f6f;
}

.productMenu {
	align-self: flex-end;
}

.subMenu {
	display: none;
	flex-flow: row;
	justify-content: space-evenly;
	justify-content: flex-end;
	background-color: white;
	margin: 10px;
	margin-top: -10px;
	position: absolute;
	width: 98%;
	background-color: #e7e9eb;
	z-index: 15;					/* appear on top of carousel */
}

.subMenu2 {
	width: auto;
	margin-left: 10px;
}

.subMenu3 {
	width: 300px;
	margin-left: 125px;
	flex-flow: none;
	justify-content: unset;
}

.subMenuColumn {
	flex-flow: column;
}

.subMenuItem {
	list-style: none;
	font-size: 10pt;
	padding: 3px;
}

.menuRight {
	text-align: right;
}

.dealsContainer {
	margin-top: 5px;
}

.deal {
	padding: 5px;
	text-align: center;
	font-size: 14px;
}

.colourSubMenuItem {
	list-style: none;
	font-size: 10pt;
	padding: 10px;
}

.menuColumn {
	display: block;
	margin-left: 10px;
	margin-right: 10px;
}

.noPad {
	padding-inline-start: 0px;
}

.mainMarketing {
	display: flex;
	flex-direction: column;
	margin: 5px;
	margin-bottom: 0px;
}

.marketingLineContainer {
	display: flex;
	justify-content: space-around;
	margin-top:5px;
}

.bottomMarketing {
	display: flex;
	justify-content: space-around;
	margin: 5px;
}

.marketingLineContainerLast {
	display: flex;
	justify-content: space-around;
	align-self: center;
	text-align: center;
	width: 80%;
}

.smallText {
	font-size: 12px;
}

.marketingLine {
	padding: 5px;
	width: 100%;
}

.marketingGroup {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.marketing {
	width: 31%;
	padding: 5px;
}

.markeditContainer {
	display: flex;
	flex-flow: row;
	align-items: center;
}

.colours {
	text-align: center;
	border: 1px solid grey;
	border-radius: 5px;
	margin: 5px;
}

.margin {
	margin: 5px;
}

.margin20 {
	margin: 20px;
}

.eyeIcon {
	width: 24px;
	transform: translateX(276px);
}

.eyeIconLogin {
	width: 24px;
	transform: translateX(290px);
}

.labelButton {
	padding: 6px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.bigProductContainer {
	display: flex;
	justify-content: space-around;
	margin-top: 5px;
	flex-wrap: wrap;
	/* border: 1px solid #e2231a; */
	/* border-radius: 5px; */
}

.bigProductImageContainer {
	width: 30%;
	text-align: center;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	/* border: 1px solid green; */
	margin: 5px;
	max-width: 300px;
}

.bigImage {
	/* border: 1px solid #e2231a; */
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: space-around;
}

.bigProductImage {
	width: 99%;
	margin-top: 5px;
	object-fit: scale-down;
}

.bigProductDetails {
	width: 30%;
	text-align: left;
	margin: 5px;
	display: flex;
	flex-flow: column;
	align-self: flex-start;
	margin-left: 0px;
	margin-right: 0px;
	max-width: 300px;
}

.productWords {
	margin-top: 10px;
}

.productBuyNow {
	margin-left: 10px;
	width: max-content;
}

.thumbnails {
	display: flex;
	flex-flow: wrap;
	align-self: center;
	margin: 5px;
	justify-content: space-around;
}

.thumbnail {
	max-width: 40px;
	max-height: 40px;
	margin: 5px;
	object-fit: scale-down;
	border: 1px solid #c0c0c1;
	border-radius: 3px;
	font-size: 10px;
	padding: 5px;
}

.thumbLink {
	margin: 5px;
	max-height: 50px;
	border: 1px solid #c0c0c1;
}

.thumbnailContainer {
	display: flex;
	flex-flow: column;
	/* justify-content: center; */
	align-items: center;
}

.detailThumbnails {
	display: flex;
	justify-content: center;
	align-self: center;
}

.thumbnailCaption {
	font-size: 12px;
	color: #404041;
	text-align: center;	
}

.detailsContainer {
	display: flex;
	flex-flow: wrap;
	margin-top: 5px;
	justify-content: space-between;
}

.categoryList {
	columns: 4;
	list-style-type: none;
}

.flexCategory {
	display: flex;
	justify-content: center;
}

.flexCategoryItem {
	flex-flow: column;
}

.moreInformationHeader {
	margin-left: 10px;
}

.moreInformationTitle {
	font-weight: bold;
	font-size: 20px;
	text-align: left;
	margin-bottom: 5px;
	margin-top: 5px;
}

.moreInformation {
	padding-left: 5px;
	margin-left: 5px;
	overflow: auto;
	height: 400px;
}

.dumpster {
	font-size: 12px;
	max-width: 600px;
}

.currencyLogo {
	width: 24px;
	padding-left: 10px;
	border: none;
	border-radius: 5px;
	padding-left: 2px;
	padding-right: 2px;
	margin-left: 10px;
	float: right;
}

.currencyLogoHamburgerSelected {
	border: 1px solid white;
}

.otherDocuments {
	/* width: 40%; */
	display: flex;
	flex-flow: column;
	margin-left: 10px;
}

.fixedWidth {
	width: 100px;
}

.bold {
	font-weight: bold;
}

.boldText {
	font-size: 16pt;
	padding: 4px;
	margin-top: 2px;
}

.siblingsTable {
	width: 35%;
}

.siblings {
	border: none;
	margin: 5px;
	align-self: flex-start;
}

.siblings th {
	text-align: left;
	color: black;
}

.siblings td {
	border: none;
}

.siblingButton {
	position: unset;
}

.addNumber {
	width: 36px;
	margin-top: 5px;
	font-size: 18px;
}

.productImage {
	width: 99%;
	max-width: 200px;
	max-height: 130px;
	min-height: 130px;
	margin-top: 5px;
	object-fit: scale-down;
}

.productImageSmall {
	width: 99%;
	max-width: 90%;
	max-height: 100%;
	margin-top: 5px;
	object-fit: scale-down;
}

.productContainer {
	display: flex;
	justify-content: space-around;
	margin-top: 5px;
	flex-wrap: wrap;
}

.product {
	width: 320px;
	height: 320px;
	text-align: center;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.productDescription {
	font-size: 20px;
	font-weight: bold;
	color: #e2231a;
	margin-left: 5px;
}

.sku {
	text-align: left;
	margin-left: 5px;
}

.stockCode {
	font-weight: bold;
}

.price {
	text-align: left;
	margin-left: 5px;
}

.priceCost {
	font-size: 20px;
	font-weight: bold;
}

.productSmall {
	width: 320px;
	height: 320px;
}

.productLink {
	max-width: 240px;
	max-height: 240px;
	color: #404041;
	object-fit: scale-down;
}

.productBorderBox {
    border: 1px solid #a7a9ab;
    border-radius: 3px;
}

.smallProductDescription {
	margin-left: 5px;
	font-weight: bold;
	text-align: left;
	height: 40px;
}

.tiny {
	font-size: 12px;
}

.databaseOutput {
	margin: 5px;
	padding: 5px;
	font-family: monospace;
}

.footerContainer {
	display: flex;
	text-align: center;
	margin-top: 5px;
	flex-direction: column;
}

.footer {
	width: 99%;
	display: flex;
	text-align: right;
	justify-content: space-between;
	padding: 5px;
	font-size: 12pt;
}

.leftFooter {
	width: 25%;
	text-align: left;
}

.centreFooter {
	width: 30%;
}

.rightFooter {
	width: 25%;
	/* font-size: 12px; */
}

.leftFooterHeader {
	border: 0px solid #1f1f6f;
	border-bottom-width: 5px;
	font-weight: bold;
	font-size: 16px;
}

.centreFooterHeader {
	border: 0px solid #e2231a;
	border-bottom-width: 5px;
	font-weight: bold;
	font-size: 16px;
}

.rightFooterHeader {
	border: 0px solid #1f1f6f;
	border-bottom-width: 5px;
	font-weight: bold;
	font-size: 16px;
}

.followUs {
	margin: 0px;
	margin-bottom: -10px;
}

.mtype {
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

.mainContentHeader {
	background-color: #a7a9ab;
	border: solid;
	border-color: black;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
	border-radius: 5px;
	box-shadow: 0em 0.2em 0.2em #9e9e9e;
	color: black;
	font-size: 14px;
	line-height: 18px;
	margin: 5px;
	margin-top: 10px;
	padding: 5px;
	text-align: left;
	width: 98%;
}

.mainButton {
	float: right;
	/* transform: translateY(-5px); */
	height: 28px;
	margin-top: -24px;
}

.verbiage {
	font-size: 12px;
	margin: 5px;
	padding: 5px;
	margin-top: 10px;
	background: white;
}

table {
	border-collapse: collapse;
}

.qedTable {
	border-collapse: collapse;
	font-size: 14px;
	padding: 5px;
	margin: 10px;
	border: 1px solid #808081;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

.qedTableBorders {
	border: 1px solid #808081;
}

.qedTH {
	border: 1px solid #808081;
	border-left: none;
	border-right: none;
	text-align: center;
	color: #e2231a;
	padding: 5px;
}

.qedTD {
	border: 1px solid #808081;
	border-left: none;
	border-right: none;
	color: black;
	padding: 5px;
}

.smallTable {
	width: auto;
	padding: 0px;
}

tr:nth-child(even) {
	background-color: #e7e9eb; /* */
}

.borderTop {
	border-top: 1px solid #808081;
	border-bottom: none;
	padding: 5px;
}

.adminMap {
	display: none;
}

.scrollTableContainer {
	overflow-x: auto;
	height: 400px;
}

.scrollTable {
	margin-left: 5px;
}

.scrollTableHead {
	inset-block-start: 0;
	background: #e7e9eb;
	position: sticky;
}

.scrollTableBody {
	padding: 10rem 2rem 50rem;
}

.tableRight {
	text-align: right;
}

.tableLeft {
	text-align: left;
}

.tableSums {
	border: 1px solid #808081;
	text-align: right;
	border-left: none;
	border-right: none;
}

.discounted {
	color: #e2231a;
	font-weight: bold;
}

.tableTotal {
	background-color: #a7a9ab;
	font-weight: bold;
	color: white;
	text-align: right;
	padding-right: 5px;
}

.tableTrailer {
	font-weight: bold;
	font-size: 11px;
	text-align: right;
	border: none;
}

.tableBold {
	font-weight: bold;
}

.orderTable {
	margin: 5px;
	width: 100%;
}

.orderTableRef {
	width: 200px;
	text-align: left;
}

.orderTableName {
	width: 300px;
	text-align: left;
}

.orderTablePrice {
	width: 80px;
}

.noFill {
	background-color: white;
	padding: 5px;
}

.POnoFill {
	background-color: white;
	width: 17%;
}

.cc {
	height: 40px;
}

.POpad {
	width: 200px;
}

.POcenter {
	text-align: center;
}

/* position buttons ==========================================================*/

.disabledButton {
	background-color: lightgrey;
}

.bottomGroup {
	align-self: flex-end;
	margin-bottom: -15px;
	width: 100%;
}


.priceBubble {
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50px;
	margin-top: -102px;
	transform: translate(198px, 300px) rotate(30deg);

	color: white;
	text-align: center;
	border: 1px solid;
	font-weight: bold;
	border-color: transparent;
}

.bigPriceBubble {
	transform: translate(-85px, 0px) rotate(30deg);
	align-self: baseline;
}

.priceBubbleOffer {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	margin-top: -52px;
	font-size: 10px;
	transform: translate(148px, 200px) rotate(30deg);

	color: white;
	text-align: center;
	border: 1px solid;
	font-weight: bold;
	border-color: transparent;
}

.priceBubbleLook {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	margin-top: -52px;
	font-size: 10px;
	transform: translate(148px, 200px) rotate(30deg);

	color: white;
	text-align: center;
	border: 1px solid;
	font-weight: bold;
	border-color: transparent;
}

.hunterButton {
	background-color: #1f1f6f;
	border: 1px solid;
	border-color: white;
	border-radius: 5px;
	box-shadow: 0.2em 0.2em 0.2em #9e9e9e;
	color: white;
	margin: 5px;
	font-size: 12pt;
}

.hunterButtonPadded {
		background-color: #1f1f6f;
		border: 1px solid;
		border-color: white;
		border-radius: 5px;
		box-shadow: 0em 0.2em 0.2em #9e9e9e;
		color: white;
		margin: 5px;
		font-size: 12pt;
		padding: 4px;;
}

.hunterButton:hover {
	color: #cccccc;
}

.hunterbutton:active {
	transform: translateY(2px);
	box-shadow: 0em 0.1em 0.1em #9e9e9e;
}

.loggedInAsHolder {
	position: absolute;
	top: 4px;
	right: 4px;
}

.loggedInAs {
	font-weight: bold;
	color: #1f1f6f;
}

.cartContainer {
	display: flex;
	justify-content: space-around;
}

.cartButton {
	margin-right: 10px;
	margin-bottom: 10px;
	float:	right;
}

.cart {
	margin-top: 10px;
	padding: 5px;
	overflow-x: auto;
	width: fit-content;
	align-self: center;
	max-width: 800px;
	width: 100%;
}

.cartText {
	padding-top: 9px;
}

.cartForm {
	display: flex;
	flex-direction: column;
	margin: 10px;
}

.orderContainer {
	display: flex;
	justify-content: space-around;
}

.orders {
	margin-top: 10px;
	padding: 5px;
	overflow-x: auto;
	width: fit-content;
	align-self: center;
	max-width: 800px;
	width: 100%;
}

.addToCartForm {
	margin-top: 10px;
	width: 175px;
}

.addToCartFields {
	border: none;
	display: flex;
}

.selectOrder {
	font-size: 12px;
	margin-top: 10px;
	padding-top: 10px;
}

.PO {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.orderNumberTitle {
	font-size: 14px;
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 5px;
}

.orderNumber {
	color: #e2231a;
	font-weight: bold;
}

.orderDateTitle {
	font-size: 14px;
	padding-right: 10px;
	padding-top: 10px;
	float: right;
	margin-top: -26px;
}

.boldData {
	font-weight: bold;
}

.delivery {
	font-size: 14px;
	font-weight: bold;
	padding-left: 10px;
	padding-top: 5px
}

.loginContainer {
	display: flex;
	justify-content: space-around;
}

.login {
	margin-top: 5px;
	width: 90%;
	max-width: 600px;
	align-self: center;
}

.loginForm {
	background: #f5f5f5;
	margin: 5px;
	padding: 5px;
	align-self: center;
	margin-bottom: 0px;
}

.registerField {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 5px;
}

.registerReport {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.registerText {
	width: 200px;
	margin-left: 5px;
}

.registerButton {
	margin: 0px;
	margin-left: 107px;
}

.fieldSet {
	border: none;
	font-size: 14px;
	display: flex;
	flex-flow: column;
}

.adminSection {		/* outer div for settings ================================*/
	display: flex;
	justify-content: center;
	font-size: 14px;
	flex-flow: wrap;
}

.adminText {
	margin-left: 5px;
	width: 200px;
	font-size: 12pt;
}

.adminResult {
	margin-left: 5px;
	color: #e2231a;
	font-weight: bold;
}

.formButtons {
	margin-left: 15px;
	margin-bottom: 10px;
	display: flex;
	justify-content: flex-end;
}


form {
	border: none;
	box-shadow: none;
}

.adminForm {
	background: #f5f5f5;
	margin: 5px;
	padding: 5px;
	align-self: center;
}

.adminFieldSet {
	border: none;
	font-size: 12pt;
	display: flex;
	flex-flow: column;
	text-align: left;
}

.adminLabel {
	transform: translateY(-2px);
	margin-left: 5px;
	margin-top: 5px;
}

.adminSelect {
	margin-left: 5px;
	width: 208px;
	-webkit-appearance: none;
	appearance: none;
	padding: 2px;
	border: 1px solid lightgrey;
	background: white;
	color: black;
	width: 208px;
}

.adminSelectWide{
	width: 308px;
}

.wide {
	width: 400px;
}


.adminCheckbox {
	margin-right: 195px;
	margin-top: 6px;
	margin-left: 4px;
}

.carouselCheckbox {
	margin-right: 195px;
	margin-left: 5px;
}

.productCheckbox {
	margin-right: 295px;
}

.adminTextArea {
	margin-left: 5px;
	width: 360px;
	height: 100px;
	resize: none;
}

.adminBusinessCard { /* business card for settings ===========================*/
	display: flex;
	flex-flow: wrap;
	font-size: 14px;
	line-height: 24px;
	padding: 5px;
	min-width: 300px;
	height: fit-content;
	margin: 5px;
}

.marketingFieldSet {
	border: none;
	font-size: 14px;
	display: flex;
	flex-flow: column;
	text-align: left;
	align-items: start;
}

.staffHeading {
	font-weight: bold;
	margin-bottom: 32px;
}

.staffImage {
	float: left;
	margin: 5px;
}

.staffDetails {
	margin: 10px;
	margin-left: 110px;
}

.staffName {
	font-weight: bold;
	font-size: 10px;
}

.staffMobile {
	font-weight: bold;
	font-size: 10px;
}

.staffRegion {
	font-size: 10px;
}

.staffEmail {
	font-size: 10px;
}

.homeImage {
	max-width: 100%;
}

.thistle {
	max-width: 100px;
}

.social {
	font-size: 12px;
	margin-bottom: 10px;
	align-self: center;
}

.socialLinks {
	display:flex;
	flex-flow: column;
}

.socialLink {
	max-width: 100%
}


.socialIcon {
	transform: translateY(10px);
}

.craftedBy {
	font-size: 10px;
	text-align: center;
	margin: 5px;
	color: #a7a9ab;
}

.siteMap {
	display: flex;
	justify-content: center;
}

.siteMapBlock {
	margin: 5px;
}


.first {
	padding-left: 0px;
}

.last {
	border: none;
	padding-right: 0px;
}

.hamburgerContainer {
	display: none;
}

.hamburgerItems {
	flex-flow: column;
}

.topLogo {
	text-align: center;
}

.topLogoImage {
	max-width: 95%;
}

.map {
	margin: 10px;
	padding: 5px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.iFrame {
	min-width: 160px;
	height: 400px;
	border: none;
	width: 50%;
	width: 100%;
}

.location {
	flex-flow: column;
	width: 100%;
	text-align: center;
}

.address {
	font-weight: lighter;
}

.addressHeading {
	font-weight: bold;
}

.upperCase {
	text-transform: uppercase;
}

.buyerName {
	font-weight: bold;
}

.buyerText {
	text-align: center;
}

.buyer {
	text-align: center;
	font-size: 12px;
}

.aboutUsStaff {
	display: flex;
	flex-flow: wrap;
	font-size: 14px;
	line-height: 24px;
	padding: 5px;
	width: 100%
}

.importContainer {
	display: flex;
	flex-flow: column;
	width: 100%;
	padding: 5px;
}

.exportContainer {
	display: flex;
	flex-flow: column;
	width: 100%;
	padding: 5px;
}

.picturesContainer {
	min-height: 200px;
	width: 98%;
	text-align: center;
}

.dropzone {
	height: 100%;
	min-height: 200px;
	background-color: #f0f0f1;
	border: 1px solid #e0e0e1;
	border-radius: 5px;
}

.darker {
	background-color: #e0e0e1;
}

.dz-message {
	font-weight: bold;
	font-size: 18px;
}

.staffPictureForm {
	width: 200px;
	height: 200px;
	margin: 5px;
}

.searchTableContainer {
	display: flex;
	margin: 5px;
	flex-flow: column;
	align-items: center;
}

.searchTableInner {
	margin-top: 5px;
}

.searchTable {
	border: none;
	margin: 5px;
}

.searchHeader {
	color: black;
}

.searchForContainer {
	z-index: 10;
	background: white;
	border: 1px solid #a7a9ab;
	position: absolute;
	width: auto;
	font-size: 10pt;
	transform: translateY(-12px);
}

.searchForItem {
	list-style: none;
	margin-right: 5px;
	margin-left: -35px;
}

.report {
	width: 100%;
	height: 75%;
}

.reportContainer {
	margin: 5px;
	padding: 5px;
	background: #f5f5f5;
}

.reportTitle {
	font-weight: bold;
	font-size: 18pt;
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}

.right {
	float: right;
}

.buyMore {
	font-size: 12px;
	font-weight: bold;
}

.postcodeLookup {
	display: flex;
	flex-flow: column;
	width: 208px;
	height: 50px;
	margin-left: 109px;
}

.exportMargin {
	margin-left: 10px;
	margin-top: 10px;
}

.exportHeading {
	font-weight: bold;
	font-size: 24px;
}

.longDescription {
	width: 530px;
	height: 400px;
	margin-left: 5px;
	border: 1px solid #404041;
	border-radius: 2px;
	background-color: white;
	padding: 5px;
	overflow: auto;
}

.productCopyButton {
	height: 20px;
}

#getaddress_button {
	width: 72px;
	margin-left: -80px;
	margin-top: -21px;
}

#getaddress_input {
	width: 200px;
}

#getaddress_dropdown {
	width: 208px;
	margin-bottom: 5px;
}

#getaddress_error_message {
	margin: 0px;
}

.copyright {
	background-color: #a7a9ab;
	border-radius: 5px 5px 0px 0px;
	color: white;
	font-size: 12px;
	padding: 3px;
	text-align: center;
}

.marketingDisplay {
	width: 100%;
	margin: 5px;
}

.marketingPicture {
	width: 95%;
	/* max-width: 600px; */
}

.marketingShadowPicture {
	box-shadow: 5px 5px 5px #9e9e9e;
}

.box {
	border: 1px solid #e2231a;
	border-radius: 5px;
}

.strikethrough {
	text-decoration: line-through;
	color: grey;
	font-size: 12pt;
}

.smallStrike {
	font-size: 10pt;
}

.brand {
	text-align: left;
	margin-left: 5px;
	display: none;
}

.subCategory {
	text-align: left;
	margin-left: 5px;
	display: none;
}

.brandScroller {
	overflow: auto;
	height: 900px;
}

.brandFilter {
	color: black;
	text-align: right;
	margin-top: -19px;
}

.subCategoryFilter {
	text-align: right;
}

.autoHeight {
	height: auto;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #38adfe;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 66%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.infoImage {
	margin-left: 4px;
}

.createPost {
	flex-direction: column;
	display: flex;
	position: relative;
	/* width: 500px; */
}

.postAuthor {
	width: 600px;
}

.postAuthorBox {
	width: 95%;
	max-width: 600px;
}

.postVacancyBox {
	width: 95%;
	max-width: 600px;
}

.loading {
	/* busy cursor feedback */
	/*======================*/
    cursor: wait; 
}

.loading * {
    /* disable all mouse events on subElements */
	/*=========================================*/
    pointer-events: none; 
}

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 0 20px;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	/* background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
	/* ?not used? */
	background-color: #fefefe;
	margin: 10px auto;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 12px;
	max-width: 360px;
	/* max-width: 360px;
    max-height: 100%;
    overflow-y: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;*/
	overflow: auto;
}

.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	align-self: end;
}

.createPostAdd {
	margin-top: 24px;
}

.postButtons {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.postColours {
	flex-flow: wrap;
	justify-content: initial;
}

.deletePictureButton {
	display: flex;
	flex-flow: row;
	justify-content: right;
}

.editPostButtons {
	display: flex;
	flex-flow: row;
	justify-content: left;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
  
.iconImage {
	height: 16px;
	margin-top: 3px;
}

.hidden {
	display: none;
}

/* printing styles */
/* =============== */
@media print{
	.noPrint {
		display: none;
	}
}

@media print {
	footer {
		page-break-after: always;
	}
}

/* height styles */
/* ============= */
@media (max-height: 800px) {
	.topTitle {
		padding: 0px;
	}
	.topText {
		padding: 0px;
	}
}

/* width styles */
/* ============ */
@media (max-width: 600px) {
	.map {
		flex-flow: column;
	}
	.iFrame {
		width: 100%;
	}
}

@media (max-width: 300px) {
	.callBig {
		font-size: 20pt;
	}
	.callSmall {
		font-size: 14pt;
	}
	a {
		font-size: 12pt;
	}
}