/* CSS Reset
----------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, blockquote
{ margin: 0; padding: 0; border: 0; font-size: 100%; list-style:none }

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* CSS Begin
----------------------------------------------------------------------------------------------------*/
html, body { height: 100% }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: "Raleway", sans-serif; background: #ddd9cd url(../images/background-wood-light.jpg) repeat; color: #5e4f2b }

body { font-size: 1em; line-height: 1.4; min-width: 903px; width: 100%; text-align: center }

.wrap { display:table; width:100%; height: 100% }

/* CLEAR FIX*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.clearfix {display: inline-block}
/* Hides from IE-mac */
* html .clearfix {height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */

a { color: #7db50e; -webkit-transition: color 0.2s linear 0s; -moz-transition: color 0.2s linear 0s; -ms-transition: color 0.2s linear 0s; -o-transition: color 0.2s linear 0s; transition: color 0.2s linear 0s }
a:hover { color: #5e4f2b }
a:hover, a:active, a:focus, a:active { outline: none; -moz-outline-style: none }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea { overflow: auto; vertical-align: top; resize: vertical }

.green { color: #7db50e }

a.btn { display: inline-block; text-align: center; text-decoration: none }
a.btn-block { display: block }
a.btn-white { color: #fff }
a.btn-bleach, .cartinfo a, .cartinfo a.cart_recall_link b { color: #ffdcaf }
a.btn-green { color: #7db50e }
a.btn-yellow { color: #ffe156 }
a.btn-bg-green, .btn-submit { background: #70a00e; color: #fff }
a.btn-bg-green:hover, .btn-submit:hover { background:#7aae11 }

a.btn-underline, .cartinfo a { position: relative; padding-bottom: 1px }
a.btn-underline:before, .cartinfo a:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; transition: width 0s ease }

a.btn-underline:after, .cartinfo a:after { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; /*background: blue;*/ transition: width .5s ease }
a.btn-underline-white:after, a.btn-underline-white:hover:before { background: #fff }
a.btn-underline-bleach:after, .cartinfo a:after, a.btn-underline-bleach:hover:before, .cartinfo a:hover:before { background: #ffdcaf }
a.btn-underline-green:after, a.btn-underline-green:hover:before { background: #7db50e }
a.btn-underline-yellow:after, a.btn-underline-yellow:hover:before { background: #ffe156 }

a.btn-underline:hover:before, .cartinfo a:hover:before { width: 0%; /*background: blue;*/ transition: width .5s ease }
a.btn-underline:hover:after, .cartinfo a:hover:after { width: 0%; background: transparent; transition: width 0s ease }

.logo, .nav li, .footer-info li { float: left; display: inline }

.nav { float: right; display: inline }

.bg-top { background:url(../images/bg-top.png) -1px 0 repeat-x; width: 100%; height: 40px; z-index: 4; position: absolute; top: -40px; left: 0 }
.bg-bottom { background:url(../images/bg-btm.png) -1px 0 repeat-x; width: 100%; height: 40px; z-index: 4; position: absolute; top: 0; left: 0 }

.container { padding: 0 25px; margin: 0 auto; position: relative }
.ie8 .container { width: 980px; margin: 0 auto }

@media only screen and (min-width: 1248px) {
	.container { width: 1154px; margin: 0 auto }
}

@media only screen and (min-width: 1450px)  { 
	.container { width: 1356px }
}


/* Header
----------------------------------------------------------------------------------------------------*/
.header { position: relative; padding: 2em 0 4em; background:url(../images/bg-nav.jpg) center 100% no-repeat #222; background-size: cover }
.header-home { background-image:url(../images/bg-home.jpg); background-position: center 0; min-height: 500px; position: relative; color: #fff; box-shadow: 0 -150px 70px -70px #000000 inset; -webkit-box-shadow: 0 -150px 70px -70px #000000 inset }

.logo { position: relative; z-index: 4}
.logo h1 { display: inline-block; margin-right: 30px; vertical-align: top }
.logo a { display: inline-block }

.nav { position: relative; z-index: 4; font-size: 1.2em; margin-top: 20px }

.nav li { margin-left: 15px; padding: 10px }
.nav li.nav-home { background: #222; z-index: 4 }
.nav li.nav-viewmenu { padding-left: 15px; z-index: 2; background: #ec2f36 }
.nav li.nav-menu { z-index: 1; padding-left: 15px }

/* Total Checkout Button -----------*/
.total { position: relative; z-index: 3; padding: 0 }
.total a.btn-total { padding: 10px; position: relative; text-align: center; top: -5px }
.total a.btn-total span { background: url(../images/icon-total.png) no-repeat 3px 0; display: inline-block; line-height: 1; padding-left: 30px; text-align: left }

.motto { position: relative; margin-top: 1em; z-index: 4 }
.motto a { text-decoration: none; display: block; min-height: 335px }
.motto a h2 { color: #fff }
.motto h1, .motto h2 { text-shadow: 0 1px 5px #000 }
.motto h1 { font-size: 2.5em; color: #a9e239 }
.motto h1 span { position: relative }
.motto h1 span:before, .motto h1 span:after { content: ""; width: 125px; height: 1px; border-top: 1px solid #fff; position: absolute; top: 25px; -webkit-box-shadow: 0 1px 2px #000; box-shadow: 0 1px 2px #000  }
.motto h1 span:before { left: -135px }
.motto h1 span:after { right: -135px }
.motto h2 { font-size: 1.7em; font-weight: 600 }
.header-home p { position: absolute; width: 90%; left: 5%; bottom: 70px; font-size: 1.2em; text-shadow: 0 2px 1px #000; z-index: 4 }

@media only screen and (min-width: 1248px) {
	.motto h1 span:before, .motto h1 span:after { width: 200px }
	.motto h1 span:before { left: -210px }
	.motto h1 span:after { right: -210px }
}

/* Main
----------------------------------------------------------------------------------------------------*/
.main { background: #f7f5ec url(../images/bg.png) 0 0 repeat; font-size: .9em; padding-top: 50px; text-aligcn: left; position: relative; z-index: 2 }

/* Home -----------*/
.home-upsells { margin: 0 auto; width: 855px; padding-bottom: 3em; text-align: center }
.home-upsell { position: relative; background: #fff; border: 5px solid #afaa94; padding: 25px 15px 25px 185px; text-align: left; width: 206px }
.home-upsell img { position: absolute; top: -20px; left: 10px; width: 165px }
.home-upsell h2 { font-size: 1.3em; font-weight: 600; line-height: 1.1 }
.home-menu { /*margin-right: 20px*/ margin: 0 auto; width: 350px; font-size: 1.2em; padding-left: 240px }
.home-upsell.home-menu img { width: 205px }

.home-hire { padding: 15px; font-size: 1.5em; position: relative; margin-top: -50px; margin-bottom: 30px; background: #e3e1d8; }

.home-hire .btn { padding: 5px 15px; font-size: 0.8em; margin-left: 10px }

@media only screen and (min-width: 1248px) {
	.home-upsells { width: 1154px }
	.home-upsell { width: 250px; font-size: 1.2em; padding-left: 280px; padding-right: 20px }
	.home-upsell img { width: auto }
}

/* About -----------*/
.about { text-align: left; font-size: 1.2em; padding-bottom: 2em }
.about p { margin-bottom: 1em }
.about h1 { font-size: 1.8em; font-weight: 600 }
.about h2 { font-size: 1.4em; font-weight: 600; margin-bottom: .2em }

.about-feature { font-size: 1.2em; padding-top: 1em; border-width: 1px 0; border-color: #c0b18d; border-style: solid; margin-bottom: 1.5em; text-align: center }

@media only screen and (min-width: 1248px) {
	.about-franchise p { float: left; display: inline; width: 48% }
	.about-franchise p:first-of-type { margin-right: 4% }
}

/* Static Menu -----------*/
.menu-static-title { font-size: 1.4em; margin-bottom: .5em; padding: 0 20px }
.menu-static-title h1, .menu-static-title a { color: #7db50e }
.menu-static-title a:hover { color: #5e4f2b }
.menu-static-title p { margin-bottom: 15px }
.menu-static-title h1 { font-size: 1.8em; font-weight: 400 }

/* Contact -----------*/
.contact { padding-bottom: 2em }
.contact-title { font-size: 1.4em; text-align: left; margin-bottom: .5em; padding: 0 20px }
.contact-title h1, .menuchoices-title a { color: #7db50e }
.contact-title a:hover { color: #5e4f2b }
.contact-title h1, .menuchoices-title p { display:inline-block }
.contact-title p { float: right; display: inline; margin-top: 15px }
.contact-title h1 { font-size: 1.8em; font-weight: 400 }

.contact iframe { width: 100%; height: 600px }
.contact-map { border: 5px solid #afaa94; height: 600px }

.contact-info { margin: 0 25px 10px }
.contact-info p { float: left; display: inline; font-size: 1.2em; margin-right: 15px }
.contact-info p em { font-weight: 400; font-style: normal; display: inline-block }
.contact-info p span { background: #edeadb; display: inline-block; padding: 5px 10px; margin: 0 5px 5px }
.contact-info p font font { display: inline-block }
.contact-info p a { font-weight: 400 }
.contact-info p strong { vertical-align: middle }

/* Career -----------*/
.career { padding-bottom: 2em; text-align: left }
.career-title { font-size: 1.4em; padding: 1em 0; border-width: 1px 0; border-color: #c0b18d; border-style: solid; margin-bottom: 1.5em; text-align: center }
.career-title h1 { color: #7db50e; font-size: 1.8em; font-weight: 600; display:inline-block }
.career-title p { margin-top: 15px }

#application { width: 800px; margin: 0 auto }
#application h2 { font-size: 1.7em; font-weight: 600; text-align: center }
#application h3 { padding: 10px 10px 0 }
#application p { text-align: center; margin-bottom: 5px }

.form-control { width: 90%; padding: 5px 3%; background: #f7f7f7; border: 1px solid #b3a480; margin-bottom: 5px }
textarea.form-control { padding: 5px 2%; width: 96% }

.control-label { padding: 5px 0 0; font-weight: 700; display: block }
.radio, .checkbox { margin: 5px 10px 0 0; float: left }

.employer { margin-top: 10px }
.career-divider { border-bottom: 1px solid #b3a480; padding-bottom:20px; margin-bottom: 20px }
.availability-chart { margin-top: 20px }
.availability-chart td .radio { float: none; margin: 0 }

.form-section { margin-bottom: 2em }
.form-section-alt { background: #fdfdf9; padding: 20px 10px }
.col { float: left; box-sizing: border-box; padding: 5px 10px }
.col-1 { width: 100% }
.col-2 { width: 50% }
.col-3 { width: 33.333% }
.col-4 { width: 25% }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.form-group .field { position: relative }

.form-group span.error { color: #4d3b3e; background: #fee2e5 url(../images/error.png) 8px 9px no-repeat; min-height: 16px; font-size: .9em; font-style: italic; padding: 7px 15px 7px 30px; border: 2px solid #edc1c6; display: inline-block; position: absolute; top: 40px; width: 75%; left: 1%; z-index: 3 }

.form-group span.error:after, .form-group span.error:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }

.form-group span.error:after { border-color: rgba(254, 226, 229, 0); border-bottom-color: #fee2e5; border-width: 10px; margin-left: -10px; }
.form-group span.error:before { border-color: rgba(237, 193, 198, 0); border-bottom-color: #edc1c6; border-width: 13px; margin-left: -13px; }

.form-group span.error-top { top: -45px }
.form-group span.error-with-label { top: 65px }

.form-group span.error-top:after, .form-group span.error-top:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }

.form-group span.error-top:after { border-color: rgba(254, 226, 229, 0); border-top-color: #fee2e5; border-width: 10px; margin-left: -10px; }
.form-group span.error-top:before { border-color: rgba(237, 193, 198, 0); border-top-color: #edc1c6; border-width: 13px; margin-left: -13px; }

.form-group .invalid input, .form-group .invalid select { border-color: #d5232a; border-width: 3px; background-color: #ffeaf1 }
.form-group  .valid input, .form-group .valid select { background-color: #e7feef }

.idealforms-field-radio.invalid label { color: #f6575e }

.form-error {  background: #fee2e5; border: 2px solid #e4383f; color: #e4383f; font-weight: 700; margin-bottom: 10px; padding: 10px }

.btn-submit { border: 0; font-size: 2em; font-weight: 400; margin-left: 1%; padding: 10px 0; text-transform: uppercase; width: 98%; cursor: pointer }

/* Footer
----------------------------------------------------------------------------------------------------*/
.footer { position: relative; z-index: 4; font-size: 1.2em }
.footer h3 { margin-bottom: .3em; font-size: 1.6em; font-weight: 400; line-height: 1 }
.footer p { margin-bottom: .3em }

.bg-wood-dark { background: url(../images/bg-wood-dark.jpg) 0 15px repeat-x }
.footer-giftcard { background:url(../images/giftcard.png) 0 55px no-repeat; color: #fff; padding: 4em 0 3em 285px; text-align: left; width: 350px; margin: 0 auto }
.footer-giftcard h3 { color: #ffdcaf }
.footer-giftcard a { margin-right: 10px }

.footer-about { color: #fff; padding: 4em 25px 3em }
.footer-about h3 { color: #ffdcaf; font-size: 1.4em }
.footer-about a { margin-right: 10px }

.footer-feedback { background: #6a8800 url(../images/footer-bg.jpg) -120px 0 no-repeat; padding: 2em 25px 4em 500px; text-align: left; color: #fff; overflow: hidden }
.footer-feedback h3 { color: #ffe156 }

@media only screen and (min-width: 1248px) {
	.footer-feedback { background-position: 0 0; padding-left: 715px }
}

@media only screen and (min-width: 1450px) {
	.footer-feedback { padding-left: 50% }
}

.footer-info { background: #fbf9ef url(../images/bg.png) 0 0 repeat; margin: 0 35px; font-size: .9em; position: relative } 
.footer-info:before, .footer-info:after { width: 100%; position: absolute; left: 0; content: ""; height: 40px }
.footer-info:before { background:url(../images/bg-top.png) 0 0 repeat-x; top: -40px  }
.footer-info:after { background:url(../images/bg-btm.png) 0 0 repeat-x; bottom: -40px }

.footer-info h3 { color: #7db50e }
.footer-info p { font-weight: 600 }
.footer-info p em { font-weight: 400; font-style: normal; display: inline-block }
.footer-info ul { margin: 0 25px; padding-bottom: 10px }
.footer-info li { text-align: left; padding-left: 2%; width: 31.3333% }

.footer-info p span { background: #edeadb; display: block; padding: 5px 10px; margin-bottom: 5px }
.footer-info p font font { display: inline-block }
.footer-info p a { font-weight: 400 }

.footer-border { border-color: #d3ceb9; border-width: 0 1px; border-style: solid; padding: 0 25px 10px; min-height: 160px; height: auto !important; height: 160px }

@media only screen and (min-width: 1248px) {
	.footer-border { min-height: 120px }
}

.btn-social { background-image:url(../images/icon-social.png); background-repeat: no-repeat; text-decoration: no-repeat; overflow: hidden; text-indent: -9999px; display: inline-block; width: 30px; height: 35px; margin-right: 10px }
.btn-fb { background-position: 0 0 }
.btn-fb:hover { background-position: 0 -79px }
.btn-twitter { background-position: -45px 0 }
.btn-twitter:hover { background-position: -45px -79px }
.btn-instagram { background-position: -92px 0 }
.btn-instagram:hover { background-position: -92px -79px }

.backtotop { position: fixed; bottom: 25px; right: 0; font-weight: 700; text-align: center; text-transform: uppercase; opacity: .8; z-index: 4 }
.backtotop a { display: block; color: #fff; text-decoration: none; padding: 10px 15px; background: #b8b5a9; background: rgba(0,0,0,0.4) }

.copyright { color: #5a5549; line-height: 1.7; padding: 30px 0 }
.copyright small { font-size: .8em; display: inline-block; margin-right: 5px; vertical-align: middle }
.copyright a { color: #5a5549; font-size: .8em; display: inline-block; margin-left: 4px }
.copyright a:hover { color: #c00 }
.credit { position: relative; top: 2px; }



/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}