body {
    font-family: 'GothPro', Arial, sans-serif;
    line-height: 1.2;
    dis-background: #3f3f3f;
    dis-color: #fff;
    background-color: #ffffff;
    color: #000;
    -webkit-font-smoothing: antialiased;
    margin: 0px;
    padding: 0px;
}

body[section=adv] {
    background-color: #bf2c37;
}

a {
    color: inherit;
}

/* LAYOUT */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.button100 {
    cursor: pointer;
    width: 100%;
    height: 40px;
    background-color: #505050;
    color: #fff;
    font-weight: 600;
    padding: 0 2px 0 2px;
    line-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    vertical-align: bottom;
    text-transform: uppercase;
    text-align: center;
}

.buttonbasic {
    display: inline-block;
    cursor: pointer;
    width: auto;
    height: 40px;
    background-color: #505050;
    color: #fff;
    font-weight: 600;
    padding: 0 15px 0 15px;
    line-height: 42px;
    font-size: 16px;
    vertical-align: bottom;
    text-transform: uppercase;
    text-align: center;
}
.buttonbasicsmaller {
    height: 25px;
    line-height: 27px;
    font-size: 12px;
}
.buttonbasic a { text-decoration: none; }

.frontBanner { width: 100%; margin-bottom: 20px; }
.frontBanner img { width: 100%; }
.sectionFrontCatNavi img { width: 95%; }
.sectionFrontCatNavi p { font-size: 16px; text-transform: uppercase; font-weight: 600; color: #000; }
.sectionFrontCatNavi a { text-decoration: none; }
.sectionFrontCatNavi a:hover { text-decoration: underline; }
.sectionTitle { font-weight: bold; font-size: 32px; text-transform: uppercase; color: #6b1a00; text-align: center; width: 100%; max-width: 1000px; margin: 0 auto 20px; }
.sectionTitlePDPTitle { text-align: left; color: #5d3e29; margin: 0; line-height: 30px;}
.sectionTitlePDPSubTitle { text-align: left; color: #5d3e29; font-weight: 200; font-size: 18px; margin: 0; margin-top: 15px; }
.sectionTitlePDPPrice { text-align: left; color: #464646; font-weight: 200; margin: 0; margin-top: 10px; margin-bottom: 10px; }
.sectionTitlePDPPriceUndiscounted { text-align: left; color: #464646; font-weight: bold; margin: 0; margin-top: 10px; margin-bottom: 10px; font-size: 18px; font-style: italic; }
.sectionTitlePDPPriceUndiscounted span { text-decoration: line-through; font-style: normal; }

.pdpAvailabilityCaption { font-weight: 200; margin-bottom: 15px; display: none; }
.pdpAvailabilityCaption .fa { display: none; }
.pdpAvailabilityCaption1 { display: block; }
.pdpAvailabilityCaption1 span { color: #009857; font-weight: bold; }
.pdpAvailabilityCaption1 .fa-check { display: inherit; }
.pdpAvailabilityCaptionTitle1 { display: none; }
.pdpAvailabilityCaption2 { display: block; font-size: 22px; }
.pdpAvailabilityCaption2 span { color: #BF2B37; font-weight: bold; }
.pdpAvailabilityCaption2 .fa-times { display: inherit; }
.pdpAvailabilityCaptionTitle2 { display: none; }
.pdpAvailabilityCaption3 { display: block; font-size: 22px; }
.pdpAvailabilityCaption3 span { font-weight: bold; }
.pdpAvailabilityCaptionTitle3 { display: inline-block; }
.pdpAvailabilityCaption1[section=adv] span { color: #ffffff; }
.pdpAvailabilityCaption2[section=adv] span { color: #ffffff; }
.addToCartButton { margin-bottom: 20px; }

.addToCartButton { z-float: left; display: inline-block; background-color: #bf2b37; font-size: 16px; color: #ffffff; padding: 5px; margin-right: 0; cursor: pointer; }
.addToCartButton input { font-size: 16px; font-weight: bold; text-align: center; width: 35px; height: 30px; line-height: 30px; color: #bf2b37; margin-right: 5px; }
.addToCartLoading { display: none; x-float: right; x-margin-right: 100px; }

.sectionSubTitle { font-weight: bold; font-size: 28px; text-transform: uppercase; color: #6b1a00; text-align: center; width: 100%; x-max-width: 1000px; margin: 30px auto 0px; }
.sectionSubTitleBottomSpacer { font-weight: bold; font-size: 28px; text-align: center; width: 100%; max-width: 1000px; margin: 30px auto 30px; }
.sectionTitleLight { font-weight: normal; font-size: 28px; text-transform: uppercase; color: #000; text-align: left; width: 100%; x-max-width: 1000px; margin: 20px 0 20px 0; }
.sectionTitleLightAdv { font-weight: normal; font-size: 28px; text-transform: uppercase; color: #fff; text-align: center; width: 100%; x-max-width: 1000px; margin: 20px auto 20px; }

.section { width: 80%; font-size: 0; max-width: 1300px; margin: 0 auto; vertical-align: top; }
.sectionFrontAdv { font-size: 0; margin: 0 auto; vertical-align: top; background-color: #d5313d; color: #fff; width: 100%; padding: 30px 0 25px 0; }

.section.dob { margin-bottom: 25px;
    d-height: 220px;
    position: relative;
    z-index: 999;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version, currently not supported by any browser */

}
.section.search { margin-bottom: 25px;
    d-height: 220px;
    position: relative;
    z-index: 999;
    background-color: #fff;
    color: #631C00;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version, currently not supported by any browser */

}
.section.dob input { width: 50px; font-family: 'GothPro', Arial, sans-serif; border: 1px solid #e8e8e8; height: 40px; line-height: 45px; font-size: 16px; color: #030303; padding: 0 5px 0 5px; font-weight: 600; }
.section.dob input#dobYear { width: 70px; }
.section.dob span { font-weight: bold; margin-right: 5px; }
.section.dob .button100 { width: 180px; margin: 0px auto; }

.browseOrder { font-size: 16px; font-weight: 600; }
.browseOrder a { margin-right: 5px; font-weight: normal; }
.browseOrder a.active { font-weight: bold; }
.browsePage { font-size: 16px; float: right; font-weight: 600; }
.browsePage a { margin-left: 5px; margin-right: 5px; font-weight: normal; }
.browsePage a.active { font-weight: bold; }

.sectionc { display: inline-block; padding: 0; margin: 0; vertical-align: top; font-size: 14px; }
.sectionc.w25 { width: 25%; }
.sectionc.w333 { width: 33.3%; }
.sectionc.w40 { width: 40%; }
.sectionc.w50 { width: 50%; }
.sectionc.w60 { width: 60%; }
.sectionc.mid { vertical-align: middle; }

.sectionprod { padding-top: 40px; padding-bottom: 40px; padding-right: 10px; padding-left: 10px; }
.sectionprod div.imgAlignerHolder { display: table; table-layout: fixed; width: 100%; }
.sectionprod div.imgAlignerCell { height: 320px; display: table-cell; text-align: center; vertical-align: middle; margin-bottom: 10px; }
.sectionprod img { max-width: 95%; max-height: 300px; margin-bottom: 20px; cursor: pointer; vertical-align: middle; text-align: center; display:block; margin-left:auto; margin-right:auto; }
.sectionprod p { font-size: 16px; dis-text-transform: uppercase; font-weight: 600; color: #000; }
.sectionprod a { text-decoration: none; }
.sectionprod a:hover { text-decoration: underline; }
.sectionprod.red p { color: #fff; }
.sectionprod p.name { margin: 0; }
.sectionprod p.price { margin: 5px 0 5px 0; font-weight: 200; }
.sectionprod p.price span { text-decoration: line-through; }
.sectionprod p.discountCaption { margin: 0; font-style: italic; }

.sectionprodsmaller { }
.sectionprodsmaller img { max-height: 300px; }

.sectionprodlargerimg img { max-height: 350px; }

.paraTitle { margin: 20px 0 10px 0; font-size: 14px; color: #303030; font-weight: bold; line-height: 20px; }

.para { margin: 5px 20px 5px 0; font-size: 14px; font-weight: normal; line-height: 20px;  }
.para.centered { text-align: center; }
.para.smaller { margin: 5px 20px 5px 0; font-size: 12px; font-weight: normal; line-height: 16px;  }
.para.dob { margin-right: 0px; margin-top: 15px; margin-bottom: 15px; }
.para.err { color: #ff0000; font-weight: bold; display: none; }

#dobDimmer { position:fixed; padding:0; margin:0; top:0px; left:0; width: 100%; height: 100%; background:rgba(255,255,255,0.9); }
.dobDimmerNoScroll { overflow-x: hidden; overflow-y: hidden; overflow: hidden; }

#searchFormHolderMain { display: none; }
#searchDimmer { position:absolute; padding:0; margin:0; top:340px; left: 0; width: 100%; height: 100%; background:rgba(255,255,255,0.9); display: none; }
#searchDimmer[section=adv] { background:rgba(0,0,0,0.9); }

#searchKeyword { font-size: 42px; height: 70px; line-height: 70px; x-padding: 25px 10px 25px 10px; x-min-width: 500px; border: 0; border-bottom: 1px solid #631C00; color: #631C00; }
#searchKeyword:focus{ outline: none; }

#searchKeywordSmaller { font-size: 28px; height: 35px; line-height: 28px; border: 0; border-bottom: 1px solid #631C00; color: #631C00; width: 95%; }
#searchKeywordSmaller:focus{ outline: none; }

.signInWrapper { margin: 10px 0 10px 0; }

.inputFieldset { margin: 10px 0 10px 0; }
.inputFieldset.slim { font-size: 14px; }

.inputCaption {
    font-family: 'GothPro', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    transform: translate(-100px,10px);
    width: 90px;
    text-align: right;
    white-space: nowrap;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inputCaptionWide {
    transform: translate(-200px,10px);
    width: 190px;

}

.inputCaptionSlimLarge {
    transform: translate(0,0);
    display: block;
    position: relative;
    text-align: left;
    margin-bottom: 5px;
    font-size: 16px;
}


.inputCaptionSlim {
    transform: translate(0,0);
    display: block;
    position: relative;
    text-align: left;
    margin-bottom: 5px;
    font-size: 14px;
}



.inputText { font-family: 'GothPro', Arial, sans-serif; width: 100%; border: 1px solid #e8e8e8; height: 35px; line-height: 40px; font-size: 16px; color: #030303; padding: 0 5px 0 5px; font-weight: 600; }

.inputTextSlim { font-family: 'GothPro', Arial, sans-serif; width: 90%; border: 1px solid #e8e8e8; height: 35px; line-height: 40px; font-size: 14px; color: #030303; padding: 0 5px 0 5px; font-weight: 400; }

.buttonRed { background-color: #c02c38; }
.buttonRedBordered { background-color: #D5313D; border: 2px solid #fff; }

.nonWideHolder {
    width: 95%;
    max-width: 300px;
    margin: 0 auto;

}

.somewhatWideHolder {
    width: 95%;
    max-width: 600px;
    margin: 0 auto;

}

/* http://stackoverflow.com/questions/15557627/heading-with-horizontal-line-on-either-side/23155413#23155413 */
.paraTitleEmph {
     overflow: hidden;
     text-align: center;
     font-size: 24px;
     font-weight: 200;
     color: #888888;
     margin: 20px 0 20px 0;
 }
.paraTitleEmph > span{
    position: relative;
    display: inline-block;
}
.paraTitleEmph > span:before, .paraTitleEmph > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 1px solid;
    width: 592px; /* half of limiter */
    margin: 0 20px;
}
.paraTitleEmph > span:before{
    right: 100%;
}
.paraTitleEmph > span:after{
    left: 100%;
}

.formErrorMsg { width: 100%; background-color: #C02C38; font-size: 14px; color: #ffffff; padding: 10px; box-sizing: border-box; display: block; margin-bottom: 25px; display: none; }

.cartProcessHolder { width: 100%; text-align: center; font-size: 16px; }
.cartProcessHolderItem.active { color: #641c00; text-decoration: underline; }
.cartProcessHolderItem { display: inline-block; margin: 0 10px 0 10px; }

.sectionTitle[section=adv] { color: #ffffff; }

div[section=adv] { color: #ffffff; }
.sectionprod[section=adv] a { color: #ffffff; }

.addToCartButton[section=adv] {
    border: 2px solid #ffffff; padding: 0;
}
.addToCartButton[section=adv] input {
    border: 3px solid #ffffff;
}
.addToCartLoading[section=adv] {
    background-color: #fff;
    padding-top: 4px;
}
a[section=adv] { color: #ffffff; }


#divOrderForm { font-size: 16px; }
#divOrderForm .divOrderFormSection { width: 33%; display: inline-block; vertical-align: top; }

#divOrderPreviewForm { font-size: 16px; }
#divOrderPreviewForm .divOrderPreviewFormSection { width: 33%; display: inline-block; vertical-align: top; }

#searchKeywordSmallerHolder { display: none; }

#loginWelcomeDimmer {
position:absolute;
padding:0;
margin:0;
top:0;
left: 0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.9); display: none;
z-index: 999999;
}

#topNaviGrindersItem { display: none; }

@media (max-width: 1023px) {
    #searchKeywordTableHolder { display: none; }
    #searchKeywordSmallerHolder { display: block; }

    #topNaviGrindersItem { display: block; }

}

@media (max-width: 1000px) {
    .sectionc.w333 { width: 50%; }
    .sectionc.w25 { width: 33.3%; }
}

@media (max-width: 900px) {

    .sectionTitle { font-weight: bold; font-size: 22px; }

    .sectionc.w40 { width: 100%; }
    .sectionc.w50 { width: 100%; }
    .sectionc.w60 { width: 100%; }
    .para { margin: 5px 0 5px 0; }

    .inputCaption {
        transform: translate(0,0);
        display: block;
        position: relative;
        text-align: left;
        margin-bottom: 5px;
    }

    /* this will move the forgotten password link below the signin button http://stackoverflow.com/questions/17455811/swap-div-position-with-css-only */
    .signInWrapper {
        position: relative;
        margin-bottom: 60px;
    }
    .signInWrapper #forgottenPassLinkDiv {
        position: absolute;
        top: 100%;
        width: 100%;
        margin-top: 20px;
        dis-top: 100px;
    }
    .signInWrapper #signInButtonDiv {
        dis-position: relative;
        dis-bottom: 100px;
    }
}

@media (max-width: 880px) {
    #divOrderForm .divOrderFormSection { width: 100%; margin-top: 25px; }
    #divOrderPreviewForm .divOrderPreviewFormSection { width: 100%; margin-top: 25px; }
    .inputTextSlim { width: 100%; }

}

@media (max-width: 680px) {
    .sectionc.w333 { width: 100%; }
    .sectionc.w25 { width: 50%; }
}

@media (max-width: 500px) {
    .sectionc.w25 { width: 100%; }
}

/* LG */
.highlightText {
	color:rgb(191, 44, 55);
	font-weight:bold;
}

.normalText {
	font-size:16px;
	color:rgb(108, 108, 108);
	font-weight:normal;
}

.relativeCenterHorizontal {
	position:relative;
	left:50%;
	transform:translateX(-50%);
}

.bold {
	font-weight:bold;
}

.footerSocialsRed {
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width:850px;
	margin:0px 0px;
	padding:12px 0px;
	padding-left:0px;
	padding-bottom:10px;
	margin-top:5px;
}

.footerSocials {
	border-top: 1px solid #6b6b6b;
	border-bottom: 1px solid #6b6b6b;
	width:850px;
	margin:0px 0px;
	padding:12px 0px;
	padding-left:0px;
	padding-bottom:10px;
	margin-top:5px;
}

.footerSocialsContainer {
	width:100%;
	margin-left:-2px;
}

.footerSocial {
	float:center;
	width:19%;
	padding:0px;
	margin:0px;
}

.footerSocial img {
	float:left;
	margin-right:8px;
}

.footerSocialText {
	float:left;
	line-height:17px;
}