/* Layout */

* {
  box-sizing: border-box;
}

html, body { width:100%; height:100%; margin:0px; padding:0px; }

p, span, div, ul, ol, li, h1, a { font-family: myriad-pro, sans-serif; }

a { text-decoration:none; }

h1 { text-transform:uppercase; font-size:40px;}

p { font-size:16px; }

.title { font-size:40px; text-transform:uppercase; margin-bottom:15px;}

.title-text { font-size:20px; margin-bottom:20px;}

.section-content { width:100%; margin:0 auto; }
 
.container { width:1100px; margin:0 auto; padding:30px; }

.top { padding-top:74px; }

.section-title { padding:30px; font-size:40px; text-transform:uppercase;  background:#fef9da; }

.link-button { 
  border-radius: 30px;
  background:#f2f3f5;
  border:1px solid #ccc;
  color:#000;
  font-size:18px;
  padding: 20px 30px;
  margin:20px 10px;
  display:inline-block;
  transition:0.3s;
  position:relative;
  cursor:pointer;
}

.link-button:hover { 
  padding: 20px 40px;
  
}

.link-button:hover::after { 
  
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f105";
  position:absolute;
  top:19px;
  right:15px;
  font-size:24px;
  z-index:10;
  
}

.link-button-back { 
  border-radius: 30px;
  background:#f2f3f5;
  border:1px solid #ccc;
  color:#000;
  font-size:18px;
  padding: 20px 30px;
  margin:20px 10px;
  display:inline-block;
  transition:0.3s;
  position:relative;
  cursor:pointer;
}

.link-button-back:hover { 
  padding: 20px 40px;
  
}

.link-button-back:hover::before { 
  
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f104";
  position:absolute;
  top:19px;
  left:15px;
  font-size:24px;
  z-index:10;
  
}

.subscribe-link-button { 
  border-radius: 30px;
  background:#f2f3f5;
  border:1px solid #ccc;
  color:#000;
  font-size:16px;
  padding: 10px 20px;
  margin:10px;
  display:inline-block;
  transition:0.3s;
  position:relative;
  cursor:pointer;
}

.subscribe-link-button:hover { 
  padding: 10px 30px;
  
}

.subscribe-link-button:hover::after { 
  
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f105";
  position:absolute;
  top:7.5px;
  right:10px;
  font-size:24px;
  z-index:10;
  
}

.mobile { display:none; }

.desktop { display:block; }

.text-link { color:#aaa; text-decoration:underline; transition:0.3s;}

.text-link:hover { opacity:0.6; text-decoration:none; }


.search-result-form { position:relative;width:450px; }

.search-button-result-page { background:#000; float:left; border:none; padding:14px; color:#fff; margin-top:1px; cursor:pointer; right:26px;  position:absolute;}


.search-text-field { color:#333; display:block; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)!important; border:1px solid #eee; padding:5px 10px; }


.search-result-title { font-size:20px; font-weight:bold; margin-bottom:10px; color:#000;  transition:0.3s; opacity:1; display:inline-block;}

.search-result-title:hover {  opacity:0.6; }

.search-result-excerpt { font-size:14px; font-weight:bold; color:#000;}

.search-result-url { font-size:14px; font-weight:bold; color:#aaa; transition:0.3s; display:inline-block; }

.search-result-url:hover { text-decoration:underline; }

.search hr { margin-top:5px; margin-bottom:5px; padding:0; }


.search .text-field { color:#333; font-size:18px; display:block; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)!important; border:1px solid #eee; padding:10px 50px 10px 10px; width:400px; position:relative; left:50%; margin-left:-200px;}

.search-result-form { position:relative;width:450px; }

.search-no-results { text-align:center; color:#333; font-size:18px; margin-bottom:90px;}


/* Spacing */

.spacing-bottom-desktop-40-mobile-20 { margin-bottom:40px; }

.spacing-bottom-desktop-40-mobile-0 { margin-bottom:40px; }

.spacing-bottom-desktop-60-mobile-30 { margin-bottom:60px; }

.text-padding-30 { padding:30px; }

.spacing-bottom-30 { margin-bottom:30px; }

.reduce-spacing-bottom-30 { margin-bottom:-30px;  }

.product-menu-spacing  { padding:20px; }

.section-spacing {
  display: block;
  height: 74px; /*same height as header*/
  margin-top: -74px; /*same height as header*/
  visibility: hidden;
}

.article-img { margin-bottom:20px; }


/* Animations */

.fade-in { animation: fade-in-effect 3s;  }
.fade-in-delay-0-5 { 
  animation-name: fade-in-effect;
  animation-duration: 3s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards; 
  opacity:0;
}
.fade-in-delay-1 { 
  animation-name: fade-in-effect;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards; 
  opacity:0;
}
@keyframes fade-in-effect {
  0%   { 
opacity:0;
}
  100% { 
opacity:1;
}
}

/* Desktop menu */

.nav {
    position: fixed;
    z-index: 99;
    width:100%;
    height:74px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)!important;
}

.nav-links { position:absolute; right:30px; top:20px; }

.logo { position:absolute; top:20px; left:30px; }

.logo-img { height:25px; width:auto;}
.footer-logo-img { height:40px; width:auto; margin-top:30px;margin-bottom:30px }


.link { 
    text-decoration:none; 
    font-size:18px; 
    color:#fcfac0;  
    -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: #000;
    margin-right:15px;  
    transition: 0.3s; 
    border-bottom:none; }

.link:hover { color:#ffc53a;}

.nav-product-menu {
  position: relative;
  display: inline-block;
}

.nav-product-menu .nav-product-menu-text {
  visibility: hidden;
  width: 990px;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0px;
  margin-left:-425px;
  opacity: 0;
  transition: opacity 1s;
  
}

.nav-product-menu .nav-product-menu-background { 
  background-color: #fff;
  color:#000;
  text-align: left;
  padding: 0 10px;
  width: 915px;
  margin-top:10px;
  
}

.nav-product-menu:hover .nav-product-menu-text {
  visibility: visible;
  opacity: 1;
}

.nav-product-menu-text span { font-size:18px; color:#000; letter-spacing:2px; text-transform:uppercase;  display:inline-block;  padding-bottom:5px; }

.nav-product-menu-text a { font-size:15px; color:#333; text-transform:uppercase; display:block; margin-bottom:10px; }

.nav-product-menu-text a:hover, .nav-product-menu-text span:hover { color:#aaa;  }

.nav-product-menu-text hr { padding:0px; margin:0px 0px 10px 0px; }

.stripe-background {  width:100%; height:10px; background-image: linear-gradient(90deg, #ffffff 25%, #e5e6a3 25%, #e5e6a3 50%, #ffffff 50%, #ffffff 75%, #e5e6a3 75%, #e5e6a3 100%);
background-size: 40.00px 40.00px; position:absolute; bottom:0; }

.fb, .ig, .tt { width:26px; height:26px; margin-right:5px; margin-bottom:6px; transition:0.3s;}
.yt { width:26px; height:26px; margin-bottom:6px; transition:0.3s;}

.fb:hover, .ig:hover, .yt:hover, .tt:hover { opacity:0.6; }

.footer-fb, .footer-ig, .footer-tt { width:26px; height:26px; margin-right:5px; margin-bottom:6px; transition:0.3s; display:inline-block;}

.footer-fb:hover, .footer-ig:hover, .footer-tt:hover { opacity:0.6; }


.search-box {
  position: relative;
  display: inline-block;
  cursor:pointer;
}

.search-box .search-box-container {
  visibility: hidden;
  width: 260px;
  text-align: center;
  position: absolute;
  padding:10px;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -115px;
  opacity: 0;
  transition: opacity 1s;
}

.search-box .search-box-container::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.search-box:hover .search-box-container {
  visibility: visible;
  opacity: 1;
}
.search-button { background:#000; float:left; border:none; padding:8px; color:#fff; cursor:pointer;}

.search-text-field { width:180px; padding:5px; font-size:16px; float:left; border-radius:0px; border:1px solid #ccc; }

.text-field { display:block; background:#fff;  border:1px solid #eee; padding:10px 20px; width:100%; }

/* Content */

.content-img { margin-top:30px; margin-bottom:30px; }

/* Footer */

.footer { background-color:#f3f3f3; width:100%; margin-top:100px; position:relative;}

.footer-stripe-background {  width:100%; height:10px; background-image: linear-gradient(90deg, #ffffff 25%, #e5e6a3 25%, #e5e6a3 50%, #ffffff 50%, #ffffff 75%, #e5e6a3 75%, #e5e6a3 100%);
background-size: 40.00px 40.00px; position:absolute; top:0; }

.footer-discover { float:left; margin-right:120px; }

.footer-explore { float:left;  }

.footer-product-left { float:left; margin-right:50px; }

.footer-product-right { float:left;  }

.footer-konnichiwa { float:left; margin-right:70px; }

.newsletter { float:left; margin-right:55px; width:300px; }

.footer-text-field { display:block; background:#fff;  border:1px solid #eee; font-size:14px; padding:14px 20px; width:100%; }

.retailers { float:left; width:420px;}
 
.footer-title { font-size:26px; text-transform:uppercase; margin-bottom:20px;  }

.footer span { font-weight:bold; margin-bottom:15px;}

.footer a { color:#666; display:block; margin-bottom:10px;}

.footer a:hover { opacity:0.6; text-decoration:underline;}

.footer hr { border:none; background-color:#ccc; margin:15px 0; padding:0; height:1px; width:90%; }

.footer-social { float:left; margin-right:10px; transition:0.3s;  }

.footer-retailer { float:left; margin-right:30px; margin-bottom:10px; transition:0.3s; } 

.copyright { float:left; font-size:14px; }

.policy-links { float:right;  font-size:14px; }

.policy-links a { display:inline-block; }

.footer-hr-line { width:100%!important; }

/* Rating */

.review-rating { margin-top:20px; margin-bottom:20px; }

.review-rating span { font-size:26px; }

.full {
  color:#f4ef00;
}
.half {

}
.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#f4ef00 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile button */

.mobile-menu-button { position:absolute; right:15px; top:15px; color:#fcfac0;  -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: #000; font-size:30px; cursor:pointer; transition:0.3s;}
    
.mobile-menu-button-close { position:absolute; right:15px; top:-8px; color:#fcfac0;  -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: #000; font-size:50px; cursor:pointer; transition:0.3s; -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */ } 

/* Accordion */

.accordion {
  background-color: #eee;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
   position:relative;
   border-bottom:1px solid #fff;
}
.accordion::after {
    
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f067";
  position:absolute;
  top:20px;
  right:15px;
  font-size:18px;
    
}

.active, .accordion:hover {
    
  background-color: #ccc; 
}

.active::after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f068";
  position:absolute;
  top:20px;
  right:15px;
  font-size:18px;
}

.panel {
  padding: 30px;
  display: none;
  background-color: #fff;
  overflow: hidden;
  box-shadow:none;
  
}

/* FAQ, Happenings, Saborino Stories, Samples, Contact, Search, Policy, Sitemap */

.samples, .saborino-stories, .contact, .write-a-review, .search, .policy, .sitemap { width:1100px; margin:0 auto; padding:30px 60px; text-align:left; }

.saborino-stories-article  { width:1080px; margin:0 auto; padding:30px 60px; text-align:left;  }

.saborino-stories-article h1 { font-size:30px; margin-bottom:30px; display:block; }

.saborino-stories-article h2 { font-size:24px; margin-top:20px; margin-bottom:20px; display:block; }

.saborino-stories-article h3 { font-size:20px; margin-bottom:20px; display:block; }

.saborino-stories-article p { line-height:24px;  }

.saborino-stories-article a { color:#999; transition:0.3s;}
.saborino-stories-article a:hover { opacity:0.6; text-decoration:underline;}

.sitemap ol, .sitemap ul { list-style:none; }

.pagination {
         display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}   

.pagination a {   
        font-size:18px;   
        color: black;   
        float: left;   
        padding: 8px 16px;   
        text-decoration: none;   
        border:1px solid #ccc;   
        transition:0.3s;
}   

.pagination a.active {   
            background-color: #fcfac0;
            color:#000;
}   

.pagination a:hover:not(.active) {   
        background-color: #ffc53a;
        color:#000;
        opacity:0.6;
}

.article-category-container { width:100%; margin:0 auto 20px auto; text-align:center;} 

.article-category-active { background-color: #fcfac0; color:#000; font-size:16px; padding:10px 20px; margin:0 5px 10px 5px; display:inline-block; border:1px solid #ccc; cursor:pointer; }

.article-category { background-color: #fff; color:#000; font-size:16px; padding:10px 20px; margin:0 5px 10px 5px; display:inline-block; border:1px solid #ccc; transition:0.3s; cursor:pointer;}

.article-category:hover{ background-color: #ffc53a;  }

.article-category-menu {
  position: relative;
  display:inline-block;
  z-index:99!important;
}

.article-category-menu .article-category-menu-text {
  visibility: hidden;
  width: 190px;
  position: absolute;
  z-index: 99;
  top:100%;
  left: -30px;
  opacity: 0;
  transition: opacity 1s;
    margin-left:30px;
    

  
}

.article-category-menu .article-category-menu-background { 
  color:#000;
  text-align: left;
  width: 190px;
  z-index:99!important;
}

.article-category-menu:hover .article-category-menu-text {
  visibility: visible;
  opacity: 1;
  z-index:99!important;
}

.article-category-menu .article-category-menu-background a { display:block; margin-bottom:10px; color:#000; }

.article-category-menu .article-category-menu-background a:hover { color:#ffc53a; }


.category-menu-active { color:#ffc53a!important; }

 /* Happenings */

.happenings { width:1200px; margin:0 auto; padding:30px 60px; text-align:left; }

.faq { width:1260px; margin:0 auto; padding:30px; text-align:left; }


.article-title { font-size:24px; margin-bottom:20px; }

.temp { position:absolute; background:rgba(0,0,0,0.8); z-index:99; width:1100px; height:960px; color:#fff; padding:15%; margin-left:-50px;}

.temp p { font-size:20px!important; }

@media only screen and (max-width: 1099px) {
    
/* Mobile layout */
    
h1 { text-transform:uppercase; font-size:34px;}

p { font-size:16px; }

.title { font-size:34px; text-transform:uppercase; margin-bottom:15px;}

.title-text { font-size:20px; margin-bottom:20px;}

.section-content { width:100%; margin:0 auto; }

.section-title { padding:20px; font-size:34px; text-transform:uppercase;  background:#fef9da; }
 
.container { width:100%; margin:0 auto; padding:20px 30px; }

.mobile { display:block; }
.desktop { display:none; }

.search-result-form { position:relative;width:100%; }

.search-button-result-page { background:#000; float:left; border:none; padding:8px; color:#fff; margin-top:1px; cursor:pointer; right:0;  position:absolute;}
/* Mobile menu */

.nav {
    position: fixed;
    z-index: 99;
    width:100%;
    height:74px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)!important;
}

.nav-links { position:relative; left:0; right:0; top:74px; display:none; width:100%; height:600px; background:#fff; padding:30px; overflow-x:auto;}



.logo { position:absolute; top:20px; left:30px; }

.link { 
    text-decoration:none; 
    text-transform:uppercase; 
    font-size:20px; 
    color:#fcfac0;  
    -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: #000;
    margin-right:15px;  
    transition: 0.3s; 
    border-bottom:none;
    display:block;
    margin-bottom:20px;
    
}

.link:hover { color:#ffc53a;}

.nav-product-menu {
  position: relative;
  display: inline-block;
  visibility: visible;
}

.nav-product-menu .nav-product-menu-text {
  display:none;
  width: 100%;
  position: relative;
  z-index: 99;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 1s;
  visibility: visible;
  overflow-x:auto;
  margin-left:0;
  
}

.nav-product-menu .nav-product-menu-background { 
  display:none;
  background-color: #fff;
  color:#000;
  text-align: left;
  padding: 0 10px;
  width: 100%;
  margin-top:10px;
  visibility: visible;
  opacity: 1;
  overflow-x:auto;
}

.nav-product-menu:hover .nav-product-menu-text {
  visibility: visible;
  opacity: 1;
}

.nav-product-menu-text span { font-size:18px; color:#000; letter-spacing:2px; text-transform:uppercase;  display:inline-block;  padding-bottom:5px; }

.nav-product-menu-text a { font-size:15px; color:#333; text-transform:uppercase; display:block; margin-bottom:10px; }

.nav-product-menu-text a:hover, .nav-product-menu-text span:hover { color:#aaa;  }

.nav-product-menu-text hr { padding:0px; margin:0px 0px 10px 0px; }

.stripe-background {  width:100%; height:10px; background-image: linear-gradient(90deg, #ffffff 25%, #e5e6a3 25%, #e5e6a3 50%, #ffffff 50%, #ffffff 75%, #e5e6a3 75%, #e5e6a3 100%);
background-size: 40.00px 40.00px; position:absolute; bottom:0; }

.fb, .ig, .tt { width:26px; height:26px; margin-right:5px; margin-bottom:6px; transition:0.3s;}
.yt { width:26px; height:26px; margin-bottom:6px; transition:0.3s;}

.fb:hover, .ig:hover, .yt:hover, .tt:hover { opacity:0.6; }

/* Spacing */

.spacing-bottom-desktop-40-mobile-20 { margin-bottom:20px; }

.spacing-bottom-desktop-40-mobile-0 { margin-bottom:0; }

.spacing-bottom-desktop-60-mobile-30 { margin-bottom:30px; }

.product-menu-spacing { padding:0 20px 20px 20px; }

/* Footer */

.footer { margin-top:60px; }

.footer-title { font-size:26px; text-transform:uppercase; margin-top:20px; margin-bottom:20px;  }

.copyright { float:none; font-size:14px; margin-bottom:20px;}

.policy-links { float:none;  font-size:14px; margin-bottom:20px; }

.retailers { float:none; width:100%;}


/* FAQ, Happenings, Saborino Stories, Samples, Contact, Search, Policy */

.faq, .happenings, .samples, .saborino-stories, .saborino-stories-article, .contact, .write-a-review, .search, .policy, .sitemap { width:100%; margin:0 auto; padding:30px; text-align:left; }

.sitemap ol, .sitemap ul { list-style:none; }

/* Article */

#article-top-nav-button { width:100%; text-align:center; padding:15px;  z-index:1; border-bottom:1px solid #ccc; background:#ffc53a; cursor:pointer; color:#000; }

#article-top-nav-button span {font-weight: normal; font-style: normal; font-size:18px; color:#000; position:relative; margin-left:-10px; }

#article-top-nav-button .down-arrow::after {
    border: solid #000;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    content: '';
    top: 0;
    right: -25px;
}

#article-top-nav-button .up-arrow::after {
    border: solid #000;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: absolute;
    content: '';
    top: auto;
    bottom:0;
    right: -25px;
}

#article-top-nav { padding:20px; }

.article-category-active-mobile {  color:#000; font-size:16px; padding:10px 20px; margin:5px; display:block;  cursor:pointer; background:#fcfac0;}

.article-category-mobile { color:#000; font-size:16px; padding:10px 20px; margin:5px; display:block;  cursor:pointer; }

.article-category-mobile-left-spacing { margin-left:20px; }

/* Temp */

.temp { width:90%; height:1600px; padding:20px; margin-left:0; }

.temp p { font-size:18px!important;  }

}

/* Saborino Stories */

.saborino-stories-article p { margin-bottom:20px; }