/* General stuff */

html {
	font-size: 62.5%;
}

body {
	position: relative;
	padding: 0;
	margin: 0;
	vertical-align:top;
	min-width: 600px;
	font-family: Lato,Helvetica,Arial;
	color: #333;
	font-size: 1.4rem;
	background-color: white;
}

input, select, textarea {
	color: #424242;
	background: #E2E2E2;
	font-size: 1.4rem;
	padding: 0.4rem;
	border: 1px solid black;
	outline: none;
}

input::selection {
	color: white;
	background-color: #57F;
}

input:focus {
	outline: 2px solid rgb(77,144,254,0.5);
	outline-offset: -1px;
}

table, td {vertical-align:top;}

img, a img {
	border: none;
}

a:link, a:visited {
	color: black;
	text-decoration: none;
}

a:hover  {
	color: #FF0000;
}

a:active {
	color: #336699;
}

h1 {
	text-transform:uppercase;
	font-size: 1.8rem;
	padding-top: 108px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
}

#onePageText {
	text-transform:uppercase;
	font-size: 1.8rem;
	margin-left: 1rem;
	padding-top: 60px;
	color: #888;
	text-align: center;
}

h2 {
    text-transform:uppercase;
	font-size: 2rem;
	margin-top: 2rem;
	color: #666;
}

h3 {
	text-transform:uppercase;
	font-size: 1.6rem;
	margin-top: 1.6rem;
	margin-bottom: 0.2rem;
	color: #444;
}

h4 {
	text-transform:uppercase;
	font-size: 1.2rem;
	margin-top: 0rem;
	margin-bottom: 0.8rem;
	color: #666;
}

address {
    font-size: 1.5rem;
    font-style: normal;
    color: #003466;
}


/* header area */

#navRight {
    display: flex;
    align-self: flex-end;
}

#navDivider {
    display: flex;
    align-items: center;
    background-color: #222;
    height: 2.6rem;
    margin-top: 0.4rem;
}

#navDivider img {
    float: left;
    padding: 0.3rem;
    opacity: 0.5;
}

#navMainWrapper {
    background-color: black;
    padding: 0rem 1rem 0rem 1rem;
}

#logoSpace {
    position: absolute;
    width: 260px;
    top: 38px;
    height: 36px;
}

#logoFloat {
		position: absolute;
		top: 5px;
		z-index: 10000;
		pointer-events: none;
}

#logoFloatShort {
		position: absolute;
		top: 32px;
		z-index: 10000;
		display: none;
		pointer-events: none;
}

#logoFloatMini {
		position: absolute;
		top: 4px;
		z-index: 10000;
		display: none;
		pointer-events: none;
		width: 12rem;
		height: 4rem;
}

#navMain {
    display: flex;
    flex-direction: column;
    margin: auto;
    background-repeat: no-repeat;
    background-position-y: 1.1rem;
    background-size: 450px 115px;
    max-width: 1000px;
    color: #aaa;
    background-color: black;
}

#indexCategoriesHeading, #productListHeading {
/*	text-align: right; */
}

#indexCategoriesHeading a, #productListHeading a {
		color: #444;
}

@media screen and (max-width: 830px) {
    #navMain {
        background-size: 260px 36px;
    }

		#logoFloat {
				display: none;
		}
		#logoFloatShort {
				display: block;
		}
}

@media screen and (max-width: 540px) {
    #navMain {
				background-position-y: 4.2rem;
        background-size: 200px 28px;
    }

		#logoFloatShort {
				display: none;
		}
		#logoFloatMini {
				display: block;
		}

	#logoSpace {
		width: 200px;
	}
}

#menuButton {
    height: 2.6rem;
    display: none;
    background: none;
    font-weight: bold;
    padding-right: 1.2rem;
    border-right: 1px solid black;
	align-items: center;
}

#menuButton:hover {
    background-color: #444;
}

#menuButton:active {
    background-color: #222;
}


/* Center content */

#centerColumn {
	width: 100%;
}

.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding-left: 1rem;
}

#contentMainWrapper {
    padding: 0rem 1rem 0rem 1rem;
}

#contentBackground {
    position: absolute;
    width: 100%;
    height: 145px;
    margin-top: -1px;
    overflow: hidden;
    background-color: black;
    z-index: -100;
}

#contentMain {
    max-width: 1000px;
    margin: auto;
	display: flex;
    color: #333;
}

.cartToggle {
    align-self: center;
	color: black;
    background-color: #c4bc46;
	width: 14rem;
    box-shadow: 0rem 0.3rem 0.8rem #0008;
	z-index: 1;
    margin-bottom: 1rem;
}

.cartHide, .cartHide:active, .cartHide:hover {
    background-color: black !important;
    box-shadow: none !important;
    cursor: default;
}

.loginLink {
    margin-right: 0.5rem;
}


/* Side box areas */

#navColumnOneWrapper, #navColumnTwoWrapper {
    z-index: 1000;
}


/* Grid layouts */

.centerBoxHeading {
	text-align: center;
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
}

.imageLess .columnar-item {
		padding: 0;
}

.imageLess .columnar-item:hover, .categoryNameNoImage:hover {
		background-color: #444;
		color: white;
}

.columnar-item {
    padding: 0.8rem;
    margin: 0rem 0.8rem 0.8rem 0rem;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
}

.columnar-item img {
	object-fit: cover;
	width: calc(33.3vw - 122px);
	height: calc(33.3vw - 122px);
	max-width: 22.5rem;
	max-height: 22.5rem;
}

.categoryNameNoImage {
	width: 100%;
	overflow: hidden;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #ccc;
}

.categoryName, .specialsName {
	width: 100%;
	height: 3.4rem;
	overflow: hidden;
}

/* Address book items */
.addressForm {
	margin-left: -0.8rem;
	margin-right: -1.2rem;
}

.addressOperationForm {
	max-width: 50rem;
	display: inline-block;
}

.addressNote {
    background-color: #c4bc46;
    color: black;
    padding: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0.8rem;
}


/* Table related classes */
.scRow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-right: 12px;
    max-height: 100px;
}

.scNoHeightLimit {
	max-height: none;
}

.scRow.ng-hide {
    transition:all 0.3s ease 0s;
    opacity:0;
    max-height: 0px;
}

.scCol {
    flex: 1 1;
    text-align: left;
    align-self: center;
	font-size: 14px;
    font-weight: normal;
    line-height: normal;
    padding: 0px 4px 0px 4px;
}

.scSmallFont {
	font-size: 12px;
}

.scLargeCol {
	flex-basis: 120px;
    flex-grow: 0;
}

.scFixedCol {
    flex-basis: 80px;
    flex-grow: 0;
}

.scFixedCol {
    flex-basis: 80px;
    flex-grow: 0;
}

.scPriceCol {
    flex-basis: 40px;
    flex-grow: 0;
}

.scPriceColLarge {
    flex-basis: 60px;
    flex-grow: 0;
}

.scImgCol {
    flex-basis: 0;
    flex-grow: 0;
}

.scDouble {
    flex: 2 1;
    padding-left: 16px;
}

.scTitle {
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    background-color: #333;
    color: white;
}

.scStock {
        color: #304da0;
        font-size: 12px;
        margin-top: 2px;
}

.scOut {
    color: #b03030;
}

.scAttributes {
    margin: 8px 8px 8px 16px;
}

.scSubmit {
    border: none;
    color: white;
    background-color: #084082;
    width: 80%;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px;
}

.scTools {
    /*background-color: #e5eef5;*/
    display: flex;
}

.scTools button {
    border: none;
    color: white;
    background-color: #e5eef5;
    padding: 6px 2px 6px 2px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    width: 220px;
}

button.scGreen {
    background-color: #c4bc46;
	color: black;
    flex-grow: 1;
}

button.scGreen:hover {
    background-color: #e5dc53;
	color: black;
}

button.scOrange {
    background-color: #666;
    flex-grow: 0;
}

button.scOrange:hover {
    background-color: #888;
}

.scCenter {
    text-align: center;
}

.scProduct {
    margin-top: 8px;
    margin-bottom: 8px;
}

.scRight {
    text-align: right;
}

.scDiv {
    flex-basis: 100%;
    border-bottom: 1px solid #e5eef5;
}

.scImage
{
	object-fit: cover;
	width: 50px;
    height: 50px;
    margin-left: -0.4rem;
}

.scInput {
    overflow: hidden;
    cursor: pointer;
    border: none;
    width: 2px;
    text-align: center;
}

.scInput[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.scPrice, .scPreviousPrice, .scSpecialPrice {
    font-weight: bold;
}

.scPreviousPrice {
    text-decoration-line: line-through;
}

.scSpecialPrice {
    color: red;
}

.scTotal, .scTotalLabel {
    font-weight: bold;
    font-size: 18px;
    padding-top: 8px;
    padding-bottom: 16px;
    flex-basis: 60px;
    flex-grow: 0;
}

.scTotal {
    flex-basis: 4px;
}

.scButton {
    border: none;
    background-color: #eef4ff;
	font-size: 14px;
}

.scButton:hover {
    cursor:pointer;
}

.scButton:focus {
    outline: none;
}


/* Product price display settings */
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale {
 	color: orangered;
	line-height: normal;
	font-weight: bold;
}

/* warnings, errors, messages */

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-min-height: 1.8rem;
    padding: 0.2rem;
}

.messageStackWarning, .messageStackError {
    color:#F00;
}

.messageStackSuccess {
    background-color: #F1F6E6;
    color: #333;
}

.messageStackCaution {
    background-color: #FFFFBB;
    color: #333;
}

#orderTotals {
	margin-right: 16px;
	font-weight: bold;
	line-height: 20px;
}

.pointer
{
    cursor: pointer;
}

.alert {
    color: #FF0000;
}

.advisory {}

.important {
    font-weight: bold;
}
.notice {}
.rating {}

.clearBoth {
	clear: both;
}

/* footer content */

.footer {
	color: #333;
	padding: 3rem;
	max-width: 1000px;
	margin: 0rem auto 0rem auto;
	font-size: 1rem;
	text-align: center;
}

.footer a {
	color: #333;
	font-weight:bold;
}


/*#bannerThree {padding:43px 0px 0px 3px; margin:0;}*/