@import url('https://fonts.googleapis.com/css2?family=Satisfy&family=Oswald:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   SOFO'S ITALIAN MARKET - CUSTOM OVERRIDES
   ========================================================================== */

/*  --------------------------------------------------
:: Browser Resets
--------------------------------------------------  */
body {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Google Fonts - for example 
                                                - will render proper sizes in all browsers with this fix 
                                                (no matter what color - Firefox traditionally renders bolder for white color text) */
    margin: 0; 
    padding: 0; 
    position: relative;
/* FONT FAMILY */
	    font-family: 'Helvetica', Arial, sans-serif;
    font-size:1em;
    line-height: 1.5;
    color:#111111;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}   
.page {margin-top:95px;} 
.extra-remove-html {display:none !important;}                                           
div.red {
    height:5px; width:100%; background:#ac2929;
}
div.red.small {height:20px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
div.red.top {height:20px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
div.wood {
    height:1px; width:100%; background:#D6D2C4;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {font-family:'Oswald', sans-serif; color:#ac2929; line-height: 1.25; font-weight:400;  margin:0 0 2px;}
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family: 'Satisfy', cursive;font-weight:400;}
    h1 {font-size: 46px;}
    h2 {font-size: 36px;}
    h3 {font-size: 32px; font-weight:400;}
	h4 {font-size: 26px; color:#111; font-weight:400;}
	h5 {font-size:22px;}
	h6 {font-size:16px; text-transform:uppercase;}
    
    /* Heading Siblings - (when one heading follows another) */
    h1 + h2 {margin-top:15px;} /* styles for the h2 following an h1 */
    h2 + h3 {margin-top:15px;} /* styles for the h3 following an h2 */
    h3 + h4 {margin-top:15px;} /* etc */
    h4 + h5 {margin-top:15px;}
    h5 + h6 {margin-top:10px;}
    /* p tag styles directly after a heading */
    h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {margin-top:0;}
    p + h1, div + h1, ul + h1, ol + h1 {margin-top:50px;}
    p + h2, div + h2, ul + h2, ol + h2 {margin-top:40px;}
    p + h3, div + h3, ul + h3, ol + h3 {margin-top:30px;}
    p + h4, div + h4, ul + h4, ol + h4 {margin-top:25px;}
    p + h5, div + h5, ul + h5, ol + h5 {margin-top:20px;}
    p + h6, div + h6, ul + h6, ol + h6 {margin-top:15px;}
	/* Handwritten accent */
	.script {font-family: 'Satisfy', cursive;}
    
/* Elements */
p {}
a {color:#0961ac;}
    a:visited {}
    a:hover {}
    a:focus {}
    a:active {}
    
ul, ol {}
    li {}

em, i {font-style: italic;}
strong, b {font-weight: 700;}

hr {border: 0; border-bottom: 1px solid #D6D2C4; clear: both; display:block; height: 0; margin: 15px 0;}

small {font-size: 70%;}
img {display:inline-block; vertical-align:middle; max-width:100%; height:auto; -ms-interpolation-mode:bicubic}
textarea {height:auto; min-height:50px;}
select {box-sizing: border-box; width:100%;}
pre {overflow:auto;}

/* Buttons */
button {padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:5px;background:transparent;line-height:1}
    [data-whatinput='mouse'] button {outline:0}
a.button, p.button a, span.button a, input.button, #commerce input[type=submit], input[type=submit], #fixed-button {
    font-weight:800;
    display:inline-block;
    padding:7px 25px;
    text-align:center;
    font-size:16px;
    text-decoration:none;
    margin-bottom:15px;
    border:1px solid #366643;
    border-radius:4px;
    box-shadow:none;
    cursor:pointer;
    color:#fff;
    min-width:150px;
    font-family: 'Helvetica', sans-serif;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac2929+0,911d1d+100 */
    background: rgb(72, 136, 90); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(72, 136, 90,1) 0%, rgba(54, 102, 67,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48885a', endColorstr='#366643',GradientType=0 ); /* IE6-9 */
}
p.button {margin:0;}
    a.button:hover, p.button a:hover, span.button a:hover,  input.button:hover, #commerce input[type=submit]:hover, #fixed-button:hover {
    	background:rgba(72, 136, 90,1);
    }

button.btn.btn-default {
    font-family:'Noto Serif', 'Times New Roman', serif;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac2929+0,911d1d+100 */
    background: rgb(72, 136, 90); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(72, 136, 90,1) 0%, rgba(54, 102, 67,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48885a', endColorstr='#366643',GradientType=0 ); /* IE6-9 */
}

input[type=submit]#search-submit {
    min-width:0;
    background:transparent;
    font-size:0px;
    height:18px;
    width:18px;
    border:0;
    margin:0;
    padding:3px;
    background:url(../images/icon-search.png) no-repeat center top;
    display:inline-block;
}

    position: fixed;
    width: 210px;
    min-width: auto;
    right: -84px;
    top: 235px;
    color: #fff;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    text-align: center;
    z-index: 1001;
}

    color: #fff;
    text-decoration: none;
}

.nosm {display:none;}

/* Forms */
    /* basic input styles */
    input[type='text']{display:block;width:100%;height:2.2rem;margin:0 0 15px;padding:5px;font-family:inherit;border:1px solid #cacaca;background-color:#fff;color:#4b4b4e;transition:border .2s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type=text],input[type='password'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='month'],input[type='week'],input[type='email'],input[type='number'],input[type='search'],input[type='tel'],input[type='time'],input[type='url'],input[type='color'],
textarea {display:block;width:100%;height:2.2rem;margin:0 0 15px;padding:5px;font-family:inherit;border:1px solid #cacaca;background-color:#fff;color:#4b4b4e;transition:border .2s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}
@media only screen and (max-width: 640px) {
    [type='text'],[type='password'],[type='date'],[type='datetime'],[type='datetime-local'],[type='month'],[type='week'],[type='email'],[type='number'],[type='search'],[type='tel'],[type='time'],[type='url'],[type='color'],textarea
        {height: 3rem;}
}
textarea{max-width:100%}
textarea[rows]{height:auto}
[type='text']:focus,[type='password']:focus,[type='date']:focus,[type='datetime']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='week']:focus,[type='email']:focus,[type='number']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='url']:focus,[type='color']:focus,textarea:focus{outline:none;border:1px solid #8a8a8a;background-color:#fdfdfd}
    /* placeholder text styles - must stay separate */
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#b0acac}
input::-moz-placeholder,textarea::-moz-placeholder{color:#b0acac}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#b0acac}
input::placeholder,textarea::placeholder{color:#b0acac}
    /* Readonly Text Styles */
input:disabled,input[readonly],textarea:disabled,textarea[readonly]{background-color:#e8ebf3;cursor:not-allowed}
input:disabled:focus,input[readonly]:focus,textarea:disabled:focus,textarea[readonly]:focus{background-color:#e8ebf3;border:1px solid #cacaca}
[type='file'],[type='checkbox'],[type='radio']{margin:0 0 15px}
[type='checkbox'] + label,[type='radio'] + label{display:inline-block;vertical-align:baseline;margin-left:5px;margin-right:15px;margin-bottom:0}
[type='checkbox'] + label[for],[type='radio'] + label[for]{cursor:pointer}
label > [type='checkbox'],label > [type='radio']{margin-right:5px}
[type='file']{width:100%}
label{display:block;margin:0}
select{height:34px;margin:0 0 15px;padding:5px;font-family:inherit;border:1px solid #cacaca;border-radius:0;background-color:#fff;color:#4b4b4e;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138,138,138%29'></polygon></svg>");background-origin:content-box;background-position:right -1rem center;background-repeat:no-repeat;background-size:9px 6px;padding-right:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
@media screen and (min-width: 0\0) {
select{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==)}
}
select:focus{outline:none;border:1px solid #8a8a8a;background-color:#fdfdfd;transition:border .2s ease-out}
select:disabled{background-color:#fdfdfd;cursor:not-allowed}
select::-ms-expand{display:none}
select[multiple]{height:auto;background-image:none}
input[type="checkbox"], input[type="radio"] {width: auto;}
    /* Recaptcha styling */
.simpleAntiSpam div{margin:6px auto!important}
.g-recaptcha div{margin:0 auto!important}
    /* Date picker */
.ui-datepicker{background:#fff;border:1px solid #cacaca;padding:15px;margin:10px 20px;-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);}
.ui-datepicker-header{text-align:center;font-size:16px;font-weight:800}
.ui-datepicker-prev{float:left;font-size:13px;text-transform:uppercase}
.ui-datepicker-next{float:right;font-size:13px;text-transform:uppercase}
.ui-datepicker-title{clear:both}
.ui-datepicker-calendar{min-width:200px}
.ui-datepicker-calendar th{width:14.2%;font-weight:600}
.ui-datepicker-calendar td{vertical-align:middle;text-align:center}
.ui-datepicker-calendar td a{padding:2px}

/* Tables */
table {width:100%;}
caption, th, td {}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    table tbody tr td {padding:2% 0;}
/* remember to define focus styles! */
}


/* Sticky Classes - Foundation - DELETE IF NOT USING */
/*
.sticky-container{position:relative}
.sticky{position:relative;z-index:0;transform:translate3d(0,0,0)}
.sticky.is-stuck{position:fixed;z-index:5}
.sticky.is-stuck.is-at-top{top:0}
.sticky.is-stuck.is-at-bottom{bottom:0}
.sticky.is-anchored{position:relative;right:auto;left:auto}
.sticky.is-anchored.is-at-bottom{bottom:0} 
*/

/* Custom Sticky Classes - DELETE IF NOT USING */
	.sticky-container {background:#fff; position:absolute; top:0; left:0; width:100%; z-index: 1003; border-top: 10px solid #48885a;
    padding: 24px 0px 24px 0px;}
.sticky-container.stuck {position:fixed; width:100%; top:0; z-index: 1003;}
.logo-wrapper {
    width:190px;
    height:80px;
    background-image:url("https://www.shopsofos.com/media/sofos-italian-market-logo-2026.svg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    transition:all 0.4s ease;
}

.logo-wrapper a {
    display:block;
    width:100%;
    height:100%;
}

.logo-wrapper img {
    display:none;
}



/*  --------------------------------------------------
:: Menu Structure
--------------------------------------------------  */
/* Menu structe */
ul#ShopSite { /*margin:18px 0 0;*/ padding:0; list-style-type:none; text-align:right;}
ul#ShopSite > li {display:inline-block; position:relative; margin:0 0 0 15px;}
/* ul#ShopSite > li:first-child a, */
ul#ShopSite > li:last-child a {
    border:1px solid #560906;
    border-radius:4px;
    color:#fff;
    padding:5px 10px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac2929+0,911d1d+100 */
    background: rgb(172,41,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(172,41,41,1) 0%, rgba(145,29,29,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(172,41,41,1) 0%,rgba(145,29,29,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(172,41,41,1) 0%,rgba(145,29,29,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac2929', endColorstr='#911d1d',GradientType=0 ); /* IE6-9 */
}
ul#ShopSite li a {text-decoration:none; color:#111111; padding:5px; display:block;}
ul#ShopSite li ul {position:absolute; margin:0; padding:0; list-style-type:none; display:none;}

/* Custom Menu Styles */
    padding:6px 0;
    border-top:6px solid #48885a;
    background:#ffffff;
}

    align-items: center;
    margin: 0;}
a.see-more, a#menudisplay, a#searchdisplay {display:none !important;}
.utility-links a#searchdisplay,
.utility-links #searchdisplay,
a#searchdisplay {
    display:none !important;
}

.utility-links {font-size:14px; text-align:right;}
.utility-links a {color:#595959; padding:0 0 0 6px; margin:0 0 0 6px; border-left:1px solid #dedede;}
.utility-links span.nosm {display:none;}
.utility-links #search-field {display:inline-block; width:200px; height:1.5rem; margin:0;}

/* Mobile Menu Styles - 
referance mobile_menu.css and grab the associated styles for what side you want the menu on */

/* Functionality ***** REPLACE THESE ***********/
.cbp-spmenu {
	position: fixed;
	right: -240px;
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.menuOpen .cbp-spmenu {right:0;}

.cbp-spmenu-push {
	overflow-x: hidden;
	position: relative;
	right: 0;
	left:0;
}
.cbp-spmenu-push.menuOpen {right:240px; left:-240px; position:fixed;}
/*END REPLACE SECTION */

/*Custom Menu styles */
.cbp-spmenu {background:#f9efd3;}
.cbp-spmenu .menu-container {overflow-y:scroll;}

.cbp-spmenu-push.menuOpen #mobile-overlay-menu-open {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.55); z-index: 2000;} /* overlay - but not over header or X close button */

/* Menu Hamburger styles */
.showMobile {
    position: relative;
    height: 27px;
    width: 35px;
    cursor: pointer;
    transition: opacity .25s ease;
    float:right;
    display:none;
    margin-top:8px;
}
.cbp-spmenu .showMobile {margin:15px;}
    .showMobile:hover {}
    .showMobile.active .top {transform: translateY(11px) translateX(0) rotate(45deg);}
    .showMobile.active .middle {opacity: 0;}
    .showMobile.active .bottom {transform: translateY(-11px) translateX(0) rotate(-45deg);}
    .showMobile span {
        background: #ac2929;
        border: none;
        height: 4px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .35s ease;
        cursor: pointer;
    }
    .showMobile span:nth-of-type(2) {top: 11px;}
    .showMobile span:nth-of-type(3) {top: 22px;}


/* --------------------------------------------------
:: REGISTER
-------------------------------------------------- */
.signinscreen {max-width:390px; margin:20px auto; padding:20px; background:#fff7d0;}
.email_pw td {display:block; width:100%;}
.email_pw td input[type=text], .email_pw td input[type=password] {margin:0;}
.email_pw td a {font-size:14px; margin-bottom:15px; display:inline-block;}
.button166 {margin:15px auto; display:block !important;}
.cr .unused-text-button {display:block;  text-align:center;}
table.view_edit input[type=submit] {display:block; width:100%;}


/* --------------------------------------------------
:: HOMEPAGE
-------------------------------------------------- */
.callouts {
    padding:50px 0 30px;
    text-align:center;
	background:#f5f3ed;
}
.callouts.no-bg {background: none;}
.callouts .item {text-align:center; background:none; max-width:310px; margin:0 auto 30px;
  
}
	.callouts .item .title {background:#ffffff; color:#111; margin:0; padding-top: 6px; padding-bottom: 10px;border: 3px solid #111; font-size:30px;}
		.callouts .item img {display:block; width:100%; padding: 0px 15px 0px;}
.callouts .item .info {padding:15px; font-size:15px;}

.intro {padding:70px 0; background:#fff url(../images/bg-text.jpg) no-repeat center center; background-size:cover;}

.products {padding:50px 0; position:relative;}
.home .products {background:#f5f3ed url(../images/bg-wood-transparent.jpg) repeat-y left center;}
.sub .products {padding:0; background:#fff;}
.products .olives {position:absolute; bottom:-60px; right:0;}
.products h1 {text-align:center;}
.products .item, .cross-sell .item {
    margin-top:40px;
    border:1px solid #ab8c7f;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
    overflow:hidden;
}
.sub .products .item, .cross-sell .item {box-shadow:none; transition:border-color .25s ease; display: flex;}
.sub .products .columns {display:flex;}
.sub .products .item:hover {border-color:#ede1db;}
.products .item .info {background:rgba(255,255,255,.9); padding:25px; position:relative;}

/* universal */
.products .item .info .price, .cross-sell .item .info .price {font-size:26px; line-height:1; color:#ac2929; font-family:'Noto Serif', 'Times New Roman', serif; margin:0;}
.cross-sell .item .info .price {font-size:20px;}
.products .item .info .price .on-sale, .cross-sell .item .info .price .on-sale {text-decoration: line-through; color:#aaa; font-size:18px;}
.cross-sell .item .info .price .on-sale {font-size:14px;}
.products .item .info .price .price-sale, .cross-sell .item .info .price .price-sale {text-decoration: none; color:#ac2929;}
.products .item .info .name, .cross-sell .item .info .name {color:#111; margin:10px 0; font-weight:400;}
.cross-sell .item .info .name {font-size:18px;}
.products .item .info .name a, .cross-sell .item .info .name a {color:#111; text-decoration:none;}
.products .item .info .shop-link {margin:0;}
.products .item .info .shop-link a {margin:15px 0 0; font-size:18px; padding: 5px 15px; min-width: 0;}
/* end */
.products .item .info .border {border-left:1px solid #ebe3df;}
.products .item .info .image, .cross-sell .item .info .image  {text-align:center; padding:20px 20px 10px;}
.products .item .info .detail {text-align:center; padding:10px;}
.products .item .info .detail .starting, .cross-sell .item .info .detail .starting {margin:0; line-height:1;}
.cross-sell .item .info .detail .starting {font-size:14px;}
.products .item .info.callout, .cross-sell .item .info.callout {padding:0; display: flex; flex-flow: column; height: 100%;}
.products .item .info.callout .detail, .cross-sell .item .info.callout .detail {
    text-align:center; 
    padding: 0 35px 40px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f9efcf+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(249,239,207,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(249,239,207,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(249,239,207,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9efcf',GradientType=0 ); /* IE6-9 */
}
.products .item .info.callout .price {font-size:32px;}
.sub .products .item .info.callout .price {font-size:25px;}

.sub .products .item .info.callout .detail, .cross-sell .item .info.callout .detail {padding:0 20px 30px; height:100%;}
.sub .products .item .info .shop-button, .cross-sell .item .info .shop-button {transition:top .25s ease; position:absolute; text-align:center; top:calc(50% - -20px); left:0; right:0;}
.sub .products .item .info .shop-button p, .cross-sell .item .info .shop-button p {
    opacity:0;
    display:inline-block; 
    margin:0;
    font-weight:800;
    padding:5px 15px;
    text-align:center;
    font-size:18px;
    text-decoration:none;
    border:1px solid #560906;
    border-radius:4px;
    box-shadow:none;
    cursor:pointer;
    color:#fff;
    font-family:'Noto Serif', 'Times New Roman', serif;
    transition:opacity .25s ease;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac2929+0,911d1d+100 */
    background: rgb(172,41,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(172,41,41,1) 0%, rgba(145,29,29,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(172,41,41,1) 0%,rgba(145,29,29,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(172,41,41,1) 0%,rgba(145,29,29,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac2929', endColorstr='#911d1d',GradientType=0 ); /* IE6-9 */

}
.sub .products .item:hover .info .shop-button, .cross-sell .item:hover .info .shop-button {top:calc(50% - 30px);}
.sub .products .item:hover .info .shop-button p, .cross-sell .item:hover .info .shop-button p {opacity:1;}

.sub .products .item .info .overlay, .cross-sell .item .info .overlay {opacity:0; background:#fff; transition:opacity .25s ease; position:absolute; top:0; left:0; right:0; bottom:0;}
.sub .products .item:hover .info .overlay, .cross-sell .item:hover .info .overlay {opacity:.8;}
.sub .products .item .info .shop-url, .cross-sell .item .info .shop-url {margin:0; position:absolute; top:0; bottom:0; left:0; right:0; text-indent:-900px;}

.product-detail .image {margin-bottom:25px;}
.product-detail .image .prod_img {width:100% !important; text-align:center; border:1px solid #d7c3c3; background:#f0f0f0; overflow:hidden !important; position:relative;}
.product-detail .image .prod_img img {top:50%; left:50%; position:absolute; transform:translate(-50%,-50%);}
.product-detail table.small_img {width:auto;}
.product-detail td.small_img {width:115px !important;}
.product-detail td.small_img a {height:70px; width:100%; overflow:hidden; display:block; position:relative; width:113px;}
.product-detail td.small_img a img {position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;}
.product-detail .purchase-box {background:#fff7d0; padding:40px 30px 40px; text-align:center;}
.product-detail .starting { margin:0; line-height: 1;}
.product-detail .price { margin:0; font-family:'Noto Serif', 'Times New Roman', serif; font-size:38px; color:#ac2929; line-height: 1;}
.product-detail form {margin:30px 0;}
.product-detail form .add-top-cart {margin:15px 0 0;}

.home .red {
    height:300px; width:100%; background:#ac2929 url(/media/slideshow/Slider-Family-History.jpg) no-repeat center 15%; background-size:cover;
    -webkit-box-shadow: inset 0px 0px 13px 7px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 13px 7px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 13px 7px rgba(0,0,0,0.75);
}

/* cross sell specific */
.cross-sell {background:#f0f0f0; padding:50px 0;}
.cross-sell .row.large-up-4 .columns {display:flex;}
.cross-sell .item {background:#fff; position:relative; margin:20px 0;}
.cross-sell .item .info .cart-popup {margin:20px 0 3px;}
.cross-sell .item .info .cart-popup .button {font-size:14px; min-width:0px; padding:6px 17px; margin:0;}
.cross-sell .item .info .more-link {margin:0; font-size:14px;}
.cross-sell .order-overlay {text-align:center; transition:all .25s ease; transform:translate(0,100%); overflow:scroll; position:absolute; top:0; left:0; right:0; bottom:0; padding:10px; font-size:14px;}
.cross-sell .order-overlay.open {background:rgba(255,255,255,.85); transform:translate(0,0);}
.cross-sell .order-overlay form {margin-top:35px;}
.cross-sell .order-overlay form p {margin:0;}
.cross-sell .order-overlay select {padding:2px 20px 2px 2px; height:27px; margin-bottom:3px;}
.cross-sell .order-overlay input[type=text] {width:60px;}
.cross-sell .order-overlay .close {opacity:.8; font-size:18px;}
.cross-sell .order-overlay .close:hover {opacity:1; cursor:pointer;}
.cross-sell .order-overlay input[type=submit] {min-width:0; font-size:16px; padding:6px 17px; margin:20px 0 20px;}

.categories {
    padding:70px 0;
    text-align:center;
	background: #f5f3ed;
}
.categories h1 {margin-bottom:35px;}
.categories .item {
    background:#fff; border:1px solid #D6D2C4; position:relative; overflow:hidden; padding:30px 15px; margin:15px auto; max-width:310px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
}
.categories .item .cat-img {position:absolute; bottom:0; left:0;}
.categories .item .cat-img img {transition: transform .3s ease;}
.categories .item:hover .cat-img img {transform: scale(1.2,1.2);}
.categories .item .info {position:relative;}
.categories .item h4 {position:relative; margin:0 0 15px;}
.categories .item a {position:absolute; top:0; left:0; bottom:0; width:100%; text-indent:-900px;}

.recipes {padding:70px 0; text-align:center;}
.home .recipes {background:#f5f3ed url(../images/bg-drawing-pasta-dish.png) no-repeat top left;}
.sub .recipes {background: none !important;}
.recipes .item {margin:20px;}
.recipes .row:nth-child(odd) .item .columns:nth-child(odd) {order:2;}
.recipes .row:nth-child(odd) .item .columns:nth-child(even) {order:1;}
.recipes .item .info {background:#fff; text-align:left; padding:20px; font-size:14px; -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);
box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);}
.recipes .item .info h4 {text-align:center; font-weight:700; margin-bottom:8px;}
	.recipes .item .info h4 a {color: rgb(42, 42, 42); text-decoration:none; font-size: 30px;}
.recipes .item .info .more-link {text-align:center;}
.recipes .item .image img {border:1px solid #D6D2C4; width:100%;}

.sub.page .content {padding:50px 0 70px;}
.sub.page .product-cats {border:1px solid #ddd; padding:5px 10px;}
.sub.page .product-cats .lbl {display:inline-block; padding-right:20px;}
.sub.page .product-cats .left_pagelinks {display:inline-block; padding-right:20px;}

.products.recipe-prod {background:#f5f3ed; padding:50px 0;}
.sub .products.recipe-prod .item {margin:20px 0;}


/* --------------------------------------------------
:: COMMERCE (shopping cart, shipping, billing, confirmation, thank you page)
-------------------------------------------------- */
    margin:0;
    min-width:0;
    font-size:16px;
    padding:6px 12px;
}
table.cart {padding:15px; border-spacing: 0;}
table.cart .cart_image, table.cart .cart_quantity, table.cart .cart_delete {text-align:center;}
table.cart .cart_price, table.cart .cart_total {text-align:right;}
table.cart td {padding:3px 8px; font-size:13px; background:#f9edc0;}
table.cart th {font-size:12px; font-weight:400; padding:5px 5px 3px 5px;}
.cart td.cart_image, .cart td.cart_name, .cart td.cart_delete, .cart td.cart_sku, .cart td.cart_price, 
.cart td.cart_total, .cart td.cart_quantity, .cart td.cart_cp_sku, .cart td.cart_cp_price,
.cart td.cart_cp_total, .cart td.cart_cp_name, .cart td.cart_cp_image, .cart td.cart_cp_quantity {border-top:1px solid #fff;}
.cart .cart_empty {text-align:center; background:#f9edc0; padding:20px;}
table.cart .cart_quantity {width:60px;}
table.cart .cart_image {width:60px;}
table.cart .cart_name {text-align:left;}
table.cart select {height:28px; font-size:12px; margin-bottom:10px;}
table.cart textarea {margin-bottom:10px;}
.cart td.cart_quantity input[type=text] {width:30px; margin:0; height:1.6rem; font-size:12px;}
.unused-text-button {text-align:right; margin-top:60px;}
    border:none;
    background:transparent;
    padding:0;
    text-decoration:underline;
    color:#0961ac;
    font-weight:400;
    font-family:'Noto Sans', Arial, sans-serif;
}

input[name=zip_code] {width:150px;}

.ups_error {max-width:560px; margin:0 auto 20px; font-size:14px;}
.ups_error img {display:block; margin:0 auto;}
.ups_error p {margin:0;}

table.addr {padding:15px; border-spacing: 0; text-align:right; font-size:14px;}
table.addr .bill_addr_hdr {font-weight:700; text-align:left;}
table.addr .ship_addr_hdr {font-weight:700; text-align:left; padding-top:15px;}
table.addr .ship_check {text-align:left;}
table.addr .ship_check input[type=checkbox] {margin-right:5px;}

table.payment {padding:15px 15px; font-size:14px; text-align:right;}
table.payment .payment_hdr {text-align:left; font-weight:700;}
.order-btn {padding:15px; text-align:center;}

table.comm {padding:15px; font-size:14px; font-weight:700;}
.custom4 {padding:0 15px; font-size:14px;}

/* --------------------------------------------------
:: FOOTER
-------------------------------------------------- */
.enews {padding-top: 40px; text-align:center; background:#fff;}
.quicklinks {background:#fff; text-align:center; padding:10px 0;}
.quicklinks .footer_pagelinks {display:inline-block; padding:15px;}
.copyright {background:#fff; padding:10px 0;}
.copyright p {font-size:13px; color:#111111; margin:0;}
.copyright .thrive-links {display:none;}
.copyright .social {text-align:center;}
.copyright .social ul {margin:0; padding:0; list-style-type:none;}
.copyright .social ul li {margin:0; padding:0; display:inline-block;}
.copyright .social ul li a {display:block;}
.copyright .social ul li a img {width:30px;}
	
	/* Removes div class red small inside the footer */
.red.small {
    display: none !important;}

h2 {font-family: 'Satisfy', cursive;}
	
}

/* --------------------------------------------------
:: Search
-------------------------------------------------- */
.se_page, .se_perpage {text-align:center;}
table.search_table {margin:20px 0 10px; padding:20px; background:#fff7d0;}
table.search_table input[type=text] {margin:0;}
table.search_table input[type=submit] {margin:0 0 0 10px; padding:5px 25px 6px; min-width:0; }


/* --------------------------------------------------
:: Universal Classes
-------------------------------------------------- */
/* Alignment Classes */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.clear {clear: both;}
.imgleft {float: left; padding: 0 15px 15px 0;}
.imgright  {float: right; padding: 0 0 15px 15px;}
.imgcenter {display: inline-block; margin: auto;}

/* Miscellaneous Classes */
.formtextRequired {font-weight:bold;}
.formtextRequired:before {content:"*";}
.row.full-width, .columns.full-width {margin: 0!important; max-width: none!important; padding: 0!important; width: 100%!important;}
.hide { display: none; }
.hideclear { clear:both; height:0; overflow:hidden; visibility:hidden; }

/* Pagination Classes */
.prevnextCurrent, .prevnextLink, .prevnextWindow { display:inline-block; line-height:0; padding:15px 20px; margin:0 4px; text-align:center;}
.prevnextCurrent:hover, .prevnextLink:hover, .prevnextWindow:hover {}

/* Applies the warm cream background strictly to sub-pages */
.sub.page {
    background-color: #f5f3ed !important;
}
.content.recipes {
    background-color: transparent;
}

/* --------------------------------------------------
:: Other Miscellaneous
-------------------------------------------------- */

/* Google Maps & Locations Directory Classes */
.map_canvas img, .map_canvas embed, .map_canvas object, .mqa-display img, .mqa-display embed, .mqa-display object 
    {max-width: none !important;}

/* Removes random added height from Google Remarketing Tags - if tags are on the site */
iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left;}

/* responsive video wrapper */
.responsive-embed,.flex-video{position:relative;height:0;margin-bottom:1rem;padding-bottom:75%;overflow:hidden}
.responsive-embed iframe,.responsive-embed object,.responsive-embed embed,.responsive-embed video,.flex-video iframe,.flex-video object,.flex-video embed,.flex-video video{position:absolute;top:0;left:0;width:100%;height:100%}
.responsive-embed.widescreen,.flex-video.widescreen{padding-bottom:56.25%}

div#carouselinner {display:none;}
.bx-wrapper .bx-pager.bx-default-pager a, div#bx-pager a {
    border-radius:50%; 
    border:1px solid #fff;
    padding:0 !important;
    background:transparent !important;
    width:12px;
    height:12px;
    font-size:1px !important;
    overflow:hidden;
    text-indent:-200px;
    margin:0px 4px !important;
}
/* Fixes the slider shadow overlay */
.bx-wrapper {
    margin: 0px auto 0px auto !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, div#bx-pager a:hover {background:#fff !important; opacity:.6;}
.bx-wrapper .bx-pager.bx-default-pager a.active, div#bx-pager a.active {background:#fff !important;}
.bx-wrapper .bx-pager.bx-default-pager a.active:hover, div#bx-pager a.active:hover {opacity:1;}
.bx-wrapper li {height:580px;}
.bx-wrapper li .info {position:absolute; width:100%; bottom:100px; text-align:center; height:auto;}
.bx-wrapper li .info .row {display:flex;}
.bx-wrapper li .info h1 {background:rgba(172,41,41,.8); display:inline-block; color:#fff; padding:20px 40px; font-size:40px;}
.bx-wrapper li .info .slide-button {margin:60px 0 0;}
.bx-wrapper li .info .slide-button a {
    border:1px solid #366643;
    color:#fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1d158+0,e2c337+100 */
   background: rgb(72, 136, 90); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(72, 136, 90,1) 0%, rgba(54, 102, 67,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(72, 136, 90,1) 0%,rgba(54, 102, 67,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48885a', endColorstr='#366643',GradientType=0 ); /* IE6-9 */
}
.bx-wrapper li .info .slide-button a:hover {background:#48885a;}

div.text_overlay div#bx-pager {
    padding:20px 0;
/* Fixes the slider shadow overlay */
	bottom: 0px !important;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,0.76+99,0.5+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(3,3,3,0.76) 99%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(3,3,3,0.76) 99%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(3,3,3,0.76) 99%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
}

/* Slider text updated */
.bx-wrapper li .info h1 {
	font-family: 'Satisfy', cursive;
	font-size: 50px;
}
/* Fix: Applies a shadow that traces the exact shape of your PNG graphics */
.small-12 img { 
    -webkit-filter: drop-shadow(0px 10px 15px rgba(214, 210, 196,1)) !important;
    filter: drop-shadow(0px 10px 15px rgba(214, 210, 196,1)) !important;
    
    /* Clean up rule: Strip away the old rectangular container shadows */
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Watermark override for your sub-pages */
/* 1. Keep your main page background solid so text is readable */
.sub.page {
    position: relative !important;
    background-color: #F5F3EE !important; 
    z-index: -2;
}

/* 2. Put the SVG background on an isolated layer that handles the opacity */
.sub.page::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important; /* Pushes it safely behind your text */
    
    /* Your exact background rules go here */
    background-image: url('https://www.shopsofos.com/media/Olive-Outline-Fill.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 85% !important;
    
    /* THIS CHANGES ONLY THE SVG VISIBILITY */
    opacity: 0.20 !important; 
}

/* -------------------------------------------------- 
    :: Media Query Fixes
    
    Foundation classes & their media query sizes:
    .small-     max-width 640px
    .medium-    min-width 641px
    .large-     min-width 1025px
    .xlarge-    min-width 1441px
    .xxlarge-   min-width 1921px
--------------------------------------------------- */

/* Media Queries Large / Desktop & up */
@media only screen and (max-width: 1025px) { 
    
}
/* Media Queries Medium-Large / Between Tablet & Desktop */
@media only screen and (min-width: 641px) and (max-width: 1024px) { 
		    .page {margin-top:95px;}
	 .logo-wrapper {
		margin-left: 20px;
    }
}

/* Media Queries Medium / Tablet & up */
@media only screen and (min-width: 641px) { 
    
}

/* Media Queries Medium & Lower / Mid-tablet, phones & below */
@media only screen and (max-width: 860px) { 
    .logo-wrapper {
        width:140px;
        height:65px;
		margin-left: 20px;
    }
	.page {margin-top:63px;}
    
    ul#ShopSite {margin-top:5px;}
    .bx-wrapper li .info h1 {font-size:35px;}
}
@media only screen and (max-width: 767px) { 
    .showMobile {display:block;}
    .main_menu {display:none;}
    .hide-for-mobile {display:none;}
    .utility-links #search-field {width:150px;}

    ul#ShopSite {text-align:left; margin:5px 5px 25px;}
    ul#ShopSite > li {display:block; margin:0; border-bottom:1px solid #e7dab5;}
    ul#ShopSite > li a {padding:8px;}
    ul#ShopSite > li:first-child a, ul#ShopSite > li:last-child a {
        background:transparent;
        color:#111;
        padding:8px;
        border-radius:0;
        border:none;
    }
    .cbp-spmenu .utility-links {margin:0; padding:5px; text-align:center; font-size:16px;}
    .cbp-spmenu .utility-links #youraccount {margin:0; padding:0; border-left:0;}
    
}

/* Media Queries Small / Mobile */
@media only screen and (max-width: 640px) { 
    form table {width:100%; display:block;}
    form table tbody {display:block; width:100%;}
    form table tr {display:block; width:100%;}
    form td {display: block;}
    form input, form textarea, form select {width: 100%;}
    .copyright .thrive-links, .copyright {text-align:center;}
     .copyright .social {padding:10px 0;}

     .recipes .row:nth-child(odd) .item .columns:nth-child(odd) {order:1;}
    .recipes .row:nth-child(odd) .item .columns:nth-child(even) {order:2;}  

    .bx-wrapper li .info h1 {font-size:28px;}
}
    
/* Media Queries Extra Small / Phone */
@media only screen and (max-width: 479px) { 
    .logo-wrapper {
        width:100px;
        height:55px;
			margin-left: 15px;
    }
    
    .page {margin-top:63px;}
}
@media only screen and (max-width: 319px) { 
    
}

/* =========================================
   HEADER UTILITY LINKS + SEARCH
   ========================================= */

.utility-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0 !important;
    font-size: 14px;
}

/* Keep the search form on the same line */
.utility-links form {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Search input */
.utility-links #search-field {
    display: inline-block !important;
    width: 200px !important;
    max-width: 200px !important;
    height: 1.5rem !important;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Search button/icon */
.utility-links input[type="submit"]#search-submit {
    display: inline-block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 4px !important;
    padding: 3px !important;
    border: 0 !important;
    background: transparent url(../images/icon-search.png) no-repeat center top !important;
    background-size: 18px 18px !important;
    font-size: 0 !important;
    vertical-align: middle !important;
}

/* Hide the ShopSite "search display" text/link */
.utility-links a#searchdisplay,
.utility-links #searchdisplay {
    display: none !important;
}

/* Make the other utility links stay inline */
.utility-links > a,
.utility-links > span {
    display: inline-block;
    vertical-align: middle;
}

/* =========================================
   FIXED CURBSIDE BUTTON
   ========================================= */

    display: block !important;
    position: fixed !important;
    width: 210px !important;
    min-width: 0 !important;
    right: -84px !important;
    top: 235px !important;
    padding: 7px 25px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: #48885a !important;
    text-align: center !important;
    z-index: 1100 !important;
    transform: rotate(90deg) !important;
    -webkit-transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important;
}

    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
}

/*  --------------------------------------------------
:: Print Styles                                        Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
--------------------------------------------------  */
.print-only { display: none !important; }
@media print {
	* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
	-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
	p a, p a:visited { color: #444 !important; text-decoration: underline; }
	p a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
	tr, img { page-break-inside: avoid; }
	@page { margin: 0.5cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3{ page-break-after: avoid; }
	.hide-on-print { display: none !important; }
	.print-only { display: block !important; }
}