/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries


/* fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* SNIPCART
–––––––––––––––––––––––––––––––––––––––––––––––––– */


#benefits ul {
  list-style: none;
}

#benefits ul li:before {
  content: '✓';
  padding-right: 5px;
    color: #9ad485;
}

.snipcart-form__label {
  letter-spacing: 1.2px !important;
  margin-top:24px !important;
  font-weight:bold !important;
}

.snipcart-item-quantity__label {
  letter-spacing: 1.2px !important;
  margin-top:24px !important;
  font-weight:bold !important;
}


.snipcart-summary-fees__notice {
  line-height: 24px !important;
    padding-bottom: 24px !important;
}

.snipcart-featured-payment-methods__list {
  display:none !important;
}

.snipcart-cart__footer-buttons .snipcart-button-link, .snipcart-cart__footer-buttons .snipcart-button-primary {
  background-color: #FFE5CB !important;
}

.snipcart-button-primary {
  background-color: #FFE5CB !important;
  background: #FFE5CB !important;
}

.snipcart-button-primary:hover {
  background: #FFCE9D !important;
}

.snipcart-modal__close-title {
  letter-spacing: 1px !important;
  text-transform: none !important;
}

.snipcart-cart-header .snipcart-modal__close-icon, .snipcart-cart-header__icon {
  color:#F6934B !important;
}

.snipcart__box--badge-highlight {
  background-color:#FFE5CB !important;
  color:#544030 !important;
}

.snipcart__box--badge {
  color:#544030 !important;
}

.snipcart-featured-payment-methods__link {
  line-height:21px !important;
}

.snipcart-button-link {
  text-transform:none !important;
  border:0 !important;
  background: none !important;
  color:#F6934B !important;
  letter-spacing:1px !important;
}

.snipcart__icon {
  color:#544030  !important;
}

.snipcart-form-radio__label {
  margin-top:0px  !important;
}

.snipcart-form-radio:checked+label:before {
  background-color:#F6934B  !important;
  border-color:#F6934B  !important;
}


.snipcart-shipping-rates-list-item--highlight {
  border-color:#F6934B  !important;
}

.snipcart__font--std {
  letter-spacing:1px !important;
}

.snipcart__font--slim {
  letter-spacing:1px !important;
}

.snipcart-shipping-address__subtitle {
  letter-spacing:1px !important;
}

.snipcart-form-radio__label {
  font-size:11px !important;
}

.snipcart__notice__icon snipcart__icon {
  margin-right:12px !important;
}




.snipcart-total-price {
  font-size: 12px;
    padding: 0 0 0px 7px;
    top: -5px;
    position: relative;
    color:#573F2D;
    font-weight:bold;
}


.snipcart-items-count {
      padding: 0px 2px 1px 4px;
    position: relative;
    background: #f8ac7f;
    color:#fff;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    top: -40px;
    right: -11px;
}

.button:hover {
  background:#FFCE9D;
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  transform:  scale(1.1);
}


.icon:hover {
  
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  transform:  scale(1.3);
}



.count {
  position: relative;
    top: 18px;
    text-align: center;
}

/* GENERAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */


@font-face {
    font-family: 'pear_leavesregular';
    src: url('/images/pear_leaves-webfont.woff2') format('woff2'),
         url('/images/pear_leaves-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




#header-product-title {
   position:absolute;
   
    left: 25%;
    top: 40%;

    padding:30px;
    border-radius: 20px;
}



/* gallery */
.gallery {
  position: relative;
}
.gallery:hover .thumb {
  opacity: .4;
}
.thumb {
  height: 200px;
  width: 25%;
  background: no-repeat center center;
  background-size: cover;
  transition: opacity 200ms;  
}
.gallery .thumb:hover {
  opacity: 1; /* overrides blur, so active img is not blurred */
}
.thumb:before, .thumb:after { 
  opacity: 0; 
  width: 80%;
}
.thumb:last-of-type:before, .thumb:last-of-type:after { opacity: 1; }
.thumb:hover:before, .thumb:hover:after { 
  z-index: 100; /* so this image stays on top */
  opacity: 1;
  transition: opacity 200ms;
}
/* this is the full-size image  */
.thumb:before { 
  content: '';
  position: absolute;
  top: 0; left: 20%;
  height: 100%;
  /*padding-left: 10px; /* creates gap */
  background: inherit;
  background-position: 20px center; /* moves the image slightly right so there's a gap between thumbnails and full-size */
}
#menu
{
  position: absolute;
  width: 300px;

  margin: -100px 0 0 -70px;
  padding: 50px 50px 100px 50px;
  padding-top: 125px;
  
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}


@media only screen and (min-width:240px) and (max-width: 450px){
   .thumb {
  width: 25%; height: 100px;
}

.thumb:before, .thumb:after { 

  width: 77%;
}


  
}


/* instagram gallery */

/*start gallery css
 */



.insta {
  width:303px; height:686px; border: solid 1px #DEDFE0;
}

:root {
  --gutter: 20px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 10px;
  grid-template-rows: 688px;
  grid-auto-flow: column;
  grid-auto-columns: 302px;

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}





/*body {
  display: grid;
  place-items: center;
 
}*/

ul {
  list-style: none;
  padding: 0;
}



.app {
  width: 100%;
  height: 750px;
 
  
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding-top: 24px;
}



.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}






.accordion {
  background-color: #fff;
  border-top: #543F30 solid 1px !important;
    border-radius:0px;
  color: #573F2D;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
font-size:1.6rem;
font-weight:600;
  transition: 0.4s;
  margin-bottom:0px;
  white-space: normal;
}

.active{
   background:#fff;
   border-bottom: 0px !important;
   border-left: 0px !important;
   border-right: 0px !important;
}


.accordion:hover {
   background:#fff;
 
   border-left: 0px !important;
   border-right: 0px !important;
}


.accordion:after {
  content: '\002B';
  color: #F6934B;
  font-weight: 400;
  float: right;
  margin-right: -15px;
  font-size:38px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;


}



/* toggle
–––––––––––––––––––––––––––––––––––––––––––––––––– */




#order-formatting{padding:30px;}
.ziggy{
    position:relative;
    background-color:#E6E6E6;
    max-width:375px;
    

    
}
.ziggy:before{
    content:"";
    display:block;
    position:absolute;    
    bottom:-10px;
    transform:rotate(180deg);
    width:100%;
    height:10px;
    background:linear-gradient(45deg, transparent 33.333%, #E6E6E6 33.333%, #E6E6E6 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #E6E6E6 33.333%, #E6E6E6 66.667%, transparent 66.667%);
    background-size:20px 40px;
}

.ziggy:after{
    content:"";
    display:block;
    position:absolute;    
    top:-10px;
    
    width:100%;
    height:10px;
    background:linear-gradient(45deg, transparent 33.333%, #E6E6E6 33.333%, #E6E6E6 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #E6E6E6 33.333%, #E6E6E6 66.667%, transparent 66.667%);
    background-size:20px 40px;
}

#webheader1 {
  padding: 20px 0 20px 0; text-align:center;
}

#webheader2 {
  background-color: #FBF3EC;
  width:100%;
}

footer {
  background-color: #ECAF86;
  padding: 0 16px;
}


.header-links a{
  color:#573F2D; padding: 20px 15px 20px 15px; border-radius:8px; letter-spacing: 3px; font-size:12px;font-weight:bold;
}

.dietary {
  background-color: #FBF3EC;
}

.shopping-icon {
  color:#543F30; padding: 10px 0px 10px 0px; border-radius:8px; font-size:15px;
}

#shop-icon {
  fill:"#543F30";
}

#eclairiss-logo {
  width:150px; height:40px;
}

#eclairiss-logo-mobile {
   width:120px; height:35px; padding-top:10px;
}

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }
  
  
/* IMAGES
–––––––––––––––––––––––––––––––––––––––––––––––––– */


#header-product-img {
  margin: 0 auto;
    background: no-repeat;
    
    height: 550px;
    background-position: 100% 50%;
    background-attachment: fixed;
}








.inline-photo {
  opacity: 0;
  -webkit-transform: translateY(4em) rotateZ(-5deg);
          transform: translateY(4em) rotateZ(-5deg);
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  width: 90%;

  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}







.header-img {
  background:#FBF3EC url('/images/header-eclairiss-tiny-01.jpg') no-repeat;

  background-repeat: no-repeat;
  background-size: cover;
  height:500px;
   background-position: center; 
    animation: fadeInImage 2.25s;
  -webkit-animation: fadeInImage 2.25s;
  -moz-animation: fadeInImage 2.25s;
  -o-animation: fadeInImage 2.25s;
  -ms-animation: fadeInImage 2.25s;
  z-index:0;
  transition-timing-function: ease-out;
}

@keyframes fadeInImage {
  0% {opacity:0; transform: translateY(10px); }
  100% {opacity:1; transform: translateY(0px);}
}

@-moz-keyframes fadeInImage {
  0% {opacity:0; transform: translateY(10px);}
  100% {opacity:1; transform: translateY(0px);}
}

@-webkit-keyframes fadeInImage {
  0% {opacity:0; transform: translateY(10px);}
  100% {opacity:1; transform: translateY(0px);}
}

@-o-keyframes fadeInImage {
  0% {opacity:0; transform: translateY(10px);}
  100% {opacity:1; transform: translateY(0px);}
}

.pickup-img {
  background: url('/images/kings-cross.jpg') no-repeat;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height:500px;
   background-position: center; 
    animation: fadeInImage 2.25s;
  -webkit-animation: fadeInImage 2.25s;
  -moz-animation: fadeInImage 2.25s;
  -o-animation: fadeInImage 2.25s;
  -ms-animation: fadeInImage 2.25s;
  z-index:0;
  transition-timing-function: ease-out;
}

.about-img {
  background: url('/images/school.png') no-repeat;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height:500px;
   background-position: center; 

  z-index:0;

}



.follow-img {
width:100%;
height:554px;
margin-top:50px;
background: url('../images/eclairiss-instagram.png');
background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
     animation: fadeInImage 2.25s;
  -webkit-animation: fadeInImage 2.25s;
  -moz-animation: fadeInImage 2.25s;
  -o-animation: fadeInImage 2.25s;
  -ms-animation: fadeInImage 2.25s;

}

#webheader2 .container {max-width:700px;}


/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {

  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 15px; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #7c7c7c; line-height: 30px; letter-spacing: 3px; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: bold; }
h1 { font-family: "pear_leavesregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; font-size: 60px; line-height: 60px; letter-spacing: 2px; color: #544030;}
h2 { font-family: "pear_leavesregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; font-size: 60px; line-height: 60px; letter-spacing: 2px; color: #544030;}
h3 { color:#492A12; letter-spacing: 7px; font-size: 15px; font-weight:bold; text-transform: uppercase; padding-bottom:20px;}
h4 { font-family: "pear_leavesregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#fff; padding-bottom: 15px; padding-top: 40px; font-weight: 300; font-size: 40px; letter-spacing: 2px;}
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {  }
  h2 { }
  h3 { font-size: 1.6rem; color:#573F2D;}
  h4 {  }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #F6934B;
  text-decoration:none; }
a:hover {
  color: #0FA0CE; }
  .active {border:solid 1px red;}

  .a{fill:#fff;}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {

  display: inline-block;
  
  padding: 12px 30px;
  color: #544030 !important;
  text-align: center;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  border:0px;
  
  text-transform: uppercase !important;
  text-decoration: none;
  white-space: nowrap;
  background-color: #FFE5CB;
  border-radius: 6px;
  letter-spacing: 3.2px;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 48px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  /*border: 1px solid #544030;*/
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  /*margin-bottom: .5rem;*/
  }
fieldset {
  padding: 0 16px 0 16px;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline;  
  vertical-align:middle;
transform: scale(1.2);
    margin-right: 10px;
    margin-top: -6px;


}
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 0rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
 /* margin-bottom: 1.5rem;*/ }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* SHI NEW alignment
–––––––––––––––––––––––––––––––––––––––––––––––––– */





.align-center {
	text-align:center;
}

input[type="checkbox"]
{
    margin-right: 6px;
}

label,input{
    display: inline-block;
    vertical-align: middle;
}






#menuToggle
{
  display: block;
  position: relative;
  top: 0px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 25px;
  height: 2px;
  margin-bottom: 4px;
  position: relative;
  
  background: #563E2C;
  border-radius: 0px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;

  margin: -100px 0 0 -70px;
  padding: 50px 50px 100px 50px;
  padding-top: 125px;
  
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 17px 0 17px 60px;
    font-size: 16px;
    text-align: left;
    
    width: 96%;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

#menu a {
color:#543F30;  border-radius:8px; letter-spacing: 3px; font-size:15px;font-weight:600;

}

#myHeader {
  background:#fff; box-shadow: 0 0 10px 0 rgba(0,0,0,.08);

 z-index:1
}

#topper{background:#d0af50; width:100%; height:38px;}

  #topper .row {text-align:center; color:#fff; padding-top:5px; text-transform: uppercase; font-weight:bold; letter-spacing: 0.2rem; font-size:12px;}

}



/* Facebook widget
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.eafr-widget-root.jsx-1593698034 {
  margin:0 auto;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) { input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select{width:100%;}}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

  input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select{width:100%;}
}

/* Larger than desktop */
@media (max-width: 749px) {
#webheader2 {display:none !important;}
#webheader1{display:none !important;}


.ten.columns.special { width: 82.6666666667% !important; }
.one.columns.special { width: 4.66666666667% !important; }





}
@media (max-width: 500px) {
.follow-img {
background: url('../images/mobile-follow.png');
background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
height:400px;

        }


.header-img {
  background:#FBF3EC url('/images/mobile-header.jpg') no-repeat;
  background-size:cover;
}




#header-product-img {
 
    background-position: top center;
    background-attachment: none;
    background-size: cover;
}


#header-product-title {
  left:10%;
  top:30%;
}



}
/* Larger than tablet */
@media (min-width: 750px) {

.container1 {display:none;
  input{width:100%;}

  }}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}