/*  Base  */
*,
*:before,
*:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

body { min-width: 320px; background: #fff; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.5; color: #3E3E3E; }

a { color: #764D29; text-decoration: none; }
a:hover { color: #f75319; }

figure { margin: 0; }

img { vertical-align: middle; max-width: 100%; height: auto; }

h1,
h2,
h3,
h4,
h5,
h6 { margin: 0 0 0.5em;  font-family: 'Montserrat', sans-serif; color: #000; }

h1 { font-size: 50px; font-weight: 300; text-transform: uppercase; }
h2 { font-size: 40px; font-weight: 500; text-transform: uppercase; }
h3 { font-size: 30px; font-weight: 500; text-transform: uppercase; }
h4 { font-size: 24px; font-weight: 600; }
h5 { font-size: 16px; }
h6 { font-size: 13px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; }

.visible-mobile { display: none !important; }

/*  Wrapper  */

.wrapper { overflow: hidden; }


/*  Container  */

.container { margin: 0 auto; padding: 0 18px; max-width: 1200px; }


/* Icons */
.icon-cart { display: inline-block; vertical-align: middle; width: 21px; height: 20px; background: url(../images/icon-cart.png); background-size: 100% 100%; }
.icon-user { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/icon-user.png); background-size: 100% 100%; }
.icon-facebook { display: inline-block; vertical-align: middle; width: 12px; height: 23px; background: url(../images/icon-facebook.png); background-size: 100% 100%; }
.icon-instagram { display: inline-block; vertical-align: middle; width: 23px; height: 23px; background: url(../images/icon-instagram.png); background-size: 100% 100%; }
.icon-mail { display: inline-block; vertical-align: middle; width: 22px; height: 18px; background: url(../images/icon-mail.png); background-size: 100% 100%; }
.icon-left { display: inline-block; vertical-align: middle; width: 26px; height: 45px; background: url(../images/icon-left.png); background-size: 100% 100%; }
.icon-right { display: inline-block; vertical-align: middle; width: 26px; height: 45px; background: url(../images/icon-right.png); background-size: 100% 100%; }

/*  Button  */

.btn { display: inline-block; vertical-align: middle; padding: 14px 40px; min-width: 270px; background: #000; border: 0; border-radius: 25px; color: #fff; font-weight: 500; line-height: 1.4; text-transform: uppercase; text-align: center; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all .2s ease-out; }
.btn:hover { background: #333; color: #fff; }
.btn--light { background: #fff; color: #3E3E3E; }
.btn--light:hover { background: #eee; color: #3E3E3E; }


/*  Header  */

.header { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; padding: 30px 0; transition: all 0.2s ease-out; }

.header__inner { display: flex; align-items: center; justify-content: space-between; }

.header__logo { display: inline-block; vertical-align: middle; width: 270px; height: 50px; background-image: url(../images/logo.png); background-size: 100% 100%; transition: all 0.2s ease-out; text-indent: -1000px; overflow: hidden; }
.header__logo:hover { opacity: 0.7; }
.header.is-fixed { padding: 20px 0; background: rgba(255,255,255,.8); }
.header.is-fixed .header__logo { width: 162px; height: 30px; }

/*  Navigation  */

.nav { text-transform: uppercase; transition: all 0.2s ease-out; }

.nav ul { display: flex; align-items: center; list-style: none outside none; }

.nav__item { margin-left: 30px; font-weight: 600; color: #000; }
.nav__item:first-child { margin-left: 0; }
.nav__item a { padding: 0 12px;color: inherit; }
.nav__item a:hover { color: #aa8352; }
.nav__item a:hover i { opacity: 0.8; }
.nav__item i { position: relative; }

.nav__count { visibility: hidden; position: absolute; right: -1em; top: -0.25em; font-size: 10px; min-width: 16px; padding: 0 1px; line-height: 1.6; font-weight: bold; color: #fff; background: #000; border-radius: 8px; text-align: center; }
.nav__count.is-visible { visibility: visible; }


/*  Sticky Product  */
.sticky-product { position: fixed; z-index: 100; left: 0; bottom: 0; width: 100%; padding: 8px 0; background: #fff; }
.sticky-product__body { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sticky-product__image { flex: 0 0 auto; }
.sticky-product__image img { max-height: 64px; width: auto; height: 100%; }
.sticky-product__name { margin-bottom: 0; font-size: 20px; font-weight: 500; letter-spacing: 0.2em; }
.sticky-product__price { font-weight: 500; letter-spacing: 0.1em; white-space: nowrap; }
.sticky-product__quantity { display: flex; flex-flow: row nowrap; align-items: center; }
.sticky-product__quantity label { margin-right: 16px; font-weight: 500; letter-spacing: 0.1em;  }
.sticky-product__quantity input { width: 114px; height: 46px; padding: 0 16px; background: #FAF8F1; border: 0; border-radius: 23px; -webkit-appearance: none; -moz-appearance: none; appearance: none;  ont-size: 20px; font-weight: bold; text-align: center; }

@keyframes submitLoading {
    from { opacity: 0.3; }
    to   { opacity: 0.8; }
}

.sticky-product .is-loading { animation: 0.6s infinite submitLoading alternate; pointer-events: none; }

/*  Hero  */

.hero { position: relative; background: #FAF8F2; padding-top: 110px; }

.hero__image { position: absolute; left: 0; top: 0; width: 100%; }
.hero__image img { width: 100%; height: auto; object-fit: cover; object-position: center center; }
.hero__body { position: relative; text-align: center; padding: 70px 0; max-width: 840px; margin: 0 auto; }
.hero__content { max-width: 640px; margin: 0 auto; margin-bottom: 2em; font-size: 1.25em; font-style: italic; text-align: left; }
.hero__content ul { list-style-position: inside; }
.hero__content p:not(:last-child) { margin-bottom: 1em; }
.hero__title { line-height: 1.35; }
.hero__title strong { display: block; font-size: 2em; font-weight: bold; color: #AA8352; letter-spacing: 0.2em; }

.hero__foot { display: flex; flex-flow: row nowrap; margin-top: 15px; }
.hero__foot figure { flex: 1 1 40%; }
.hero__foot figure img { height: 400px; width: 100%; object-fit: cover; }
.hero__foot figure + figure { margin-left: 15px; flex-basis: 60%; }


/* Before After */

.before-after { padding: 90px 0 0; background: #FAF8F2; overflow: hidden; }
.before-after__content { margin-bottom: 50px; text-align: left; }
.before-after__content h3 { text-align: center; }
.before-after__content p { font-style: italic; }
.before-after__content p:not(:last-child) { margin-bottom: 1em; }
.before-after__items { position: relative; padding: 0 80px; margin: 0 -80px; }
.before-after__nav { position: absolute; left: 0; width: 100%; top: 50%; padding: 0 80px; }
.before-after__nav .swiper-button-prev:after,
.before-after__nav .swiper-button-next:after { content: none; }
.before-after__nav .swiper-button-next { right: 0; top: 50%; }
.before-after__nav .swiper-button-prev { left: 0; top: 50%; }
.before-after__nav .swiper-button-next:hover,
.before-after__nav .swiper-button-prev:hover { opacity: 0.7; }
.before-after__foot { margin-top: 40px; }
.before-after__foot h4 { margin: 0; font-size: 150px; line-height: 0.6; color: #fff; text-transform: uppercase; text-align: center; }


/*  Contents  */

.contents { padding: 80px 0 100px; }
.contents h2 { margin-bottom: 50px; text-align: center; letter-spacing: 0.2em; }

.contents__items { display: flex; list-style: none outside none; margin: 0 -15px; }

.contents__item { flex: 0 0 25%; padding: 0 15px; }
.contents__item:last-child { margin-bottom: 0; }

.contents__body { position: relative; flex: 0 0 480px; }
.contents__body h3 { color: #764D29; }
.contents__image { width: 80px; margin-bottom: 25px; }


/*  Product  */

.product { padding: 80px 0 100px; background: #AA8352; color: #fff; }

.product__head { text-align: center; }
.product__head h2 { color: #fff; }
.product__head h6 { color: #fff; }

.product__body { display: flex; flex-flow: row nowrap; align-items: center; }

.product__image { flex: 0 0 50%; }
.product__content { flex: 0 0 50%; padding-right: 30px; text-align: right; }
.product__content p { margin-bottom: 1.5em; }
.product__content p:last-child { margin-bottom: 0; }
.product__content h3,
.product__content h6 { color: inherit; }


/*  Products  */

.products { overflow: hidden; }

.products__body { display: flex; flex-flow: row nowrap; align-items: center; }

.products__image { position: relative; flex: 0 0 50%; align-self: stretch; min-height: 510px; }
.products__image img { position: absolute; left: 0; top: 0; width: 50vw; max-width: none; height: 100%; object-fit: cover; object-position: center center; }

.products__content { flex: 0 0 50%; padding: 80px 45px; text-align: right; }
.products__content p { max-width: 470px; margin-bottom: 1.5em; margin-left: auto; }
.products__content p:last-child { margin-bottom: 0; }
.products__content h3,
.products__content h6 { color: inherit; }

.products:nth-child(odd) .products__image { order: -1; }
.products:nth-child(odd) .products__image img { right: 0; left: auto; }
.products:nth-child(odd) .products__content { text-align: left; }
.products:nth-child(odd) .products__content p { margin-left: 0; }

/*  Testimonials  */

.testimonials { padding: 90px 0; }

.testimonials__head { margin-bottom: 60px; text-align: center; }
.testimonials__head h2 { letter-spacing: 0.2em; }

.testimonials .swiper-button-prev:after,
.testimonials .swiper-button-next:after { content: none; }
.testimonials .swiper-button-next { right: 20px; top: 50%; }
.testimonials .swiper-button-prev { left: 20px; top: 50%; }
.testimonials .swiper-button-next:hover,
.testimonials .swiper-button-prev:hover { opacity: 0.7; }

.testimonials .swiper-button-next i,
.testimonials .swiper-button-prev i { width: 12px; height: 19px; filter: brightness(10); }

.testimonials__item { display: flex; flex-flow: row nowrap; align-items: center; color: #fff; background: #AA8352; }
.testimonials__item figure { flex: 0 0 50%; }
.testimonials__item div { flex: 0 0 50%; padding: 20px 60px; }
.testimonials__item h3,
.testimonials__item h6 { color: inherit; }
.testimonials__item h3 { letter-spacing: 0.1em; }
.testimonials__item p { margin-bottom: 1.5em; }
.testimonials__item p:last-child { margin-bottom: 0; }


/*  Reviews  */

.reviews { padding: 90px 0; border-top: 3px solid #94928C; background: #faf8f2; }

.reviews__head { margin-bottom: 60px; text-align: center; }
.reviews__head h2 { letter-spacing: 0.2em; }
.reviews__item { position: relative; z-index: 1; margin-bottom: 60px; }
.reviews__item:nth-child(n+3) { display: none; }
.reviews__item img { width: 80px; margin-bottom: 20px;  }
.reviews__item h5 { margin-bottom: 40px; font-size: 20px; font-weight: 500; letter-spacing: 0.2em; }
.reviews__item p { position: relative; margin-bottom: 25px; max-width: 970px; font-style: italic; }
.reviews__item p:before { content: '“'; position: absolute; z-index: -1; left: -.15em; top: -.25em; font-size: 100px; font-weight: bold; font-family: sans-serif; line-height: 1; color: #E0E0E0; pointer-events: none; }
.reviews__rating { display: block; width: 24px; height: 23px; background: url(../images/star.png) repeat; background-size: 24px 23px; }
.reviews__rating--1 { width: 24px; }
.reviews__rating--2 { width: 48px; }
.reviews__rating--3 { width: 72px; }
.reviews__rating--4 { width: 96px; }
.reviews__rating--5 { width: 120px; }
.reviews__more { display: none; text-align: center; }
.reviews__more:nth-child(n+3) { display: block; }
.reviews__more .btn { border: 1px solid #94928C; }

.is-expanded .reviews__more { display: none !important; }
.is-expanded .reviews__item { display: block; }


/*  Instagram Wall  */

.instagram-wall { padding: 80px 0 100px; }

.instagram-wall h2 { margin-bottom: 60px; font-weight: 500; letter-spacing: 0.2em; text-align: center; }
.instagram-wall h6 { text-align: center; }


/*  Socials  */

.socials { padding: 60px 0 80px; background: #AA8352; color: #fff; }

.socials h3 { margin-bottom: 40px; font-weight: 500; letter-spacing: 0.1em; text-transform: none; }
.socials ul { display: flex; align-items: center; justify-content: space-between; list-style: none outside none; }
.socials ul a { display: inline-flex; flex-flow: row nowrap; color: #fff; font-weight: bold; }
.socials ul a:hover { color: #eee; }
.socials ul img { flex: 0 0 auto; margin-right: 0.5em; max-width: 22px; max-height: 22px; width: auto; height: auto; object-fit: contain; }


/*  Footer  */

.footer { padding: 40px 0 120px; font-size: 15px; font-weight: 500; background-color: #000; color: #B1B1B1; }

.footer a { color: #B1B1B1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: none; }

.footer .container { display: flex; align-items: center; justify-content: space-between; }

.footer__copyright { display: flex; align-items: center; list-style: none outside none; }
.footer__copyright li { margin-right: 40px; }

.footer__nav { display: flex; align-items: center; list-style: none outside none; }
.footer__nav li { margin-right: 40px; }


#sb_instagram.sbi_col_6 #sbi_images .sbi_items { margin: -15px;  }
#sb_instagram.sbi_col_6 #sbi_images .sbi_item { width: 25% !important; padding: 15px !important;}
#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(n+5) { display: none; }

/*  Tablet  */

@media (max-width: 1199px) {
	body { font-size: 14px; }

	h1 { font-size: 40px; }
	h2 { font-size: 35px; }
}


/*  Mobile  */

@media (max-width: 1023px) {
	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }

	.hidden-mobile { display: none !important; }
	.visible-mobile { display: block !important; }

	.btn { padding: 15px 16px; min-width: 200px; }

	.wrapper { padding-top: 58px; }

	.header { padding: 20px 0; }
	.header__logo { width: 94px; height: 18px; }

	.nav__toggle { position: absolute; right: 10px; top: 50%; width: 30px; height: 24px; margin-top: -12px; border-width: 2px 0; border-color: #764D29; border-style: solid; background: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.2s ease-out; }
	.nav__toggle:before,
	.nav__toggle:after { content: ''; position: absolute; left: 0; top: 9px; width: 100%; height: 2px; background: #764D29; transition: all 0.2s ease-out; }
	.nav__item { margin: 0; font-size: 16px; }
	.nav__item i { position: relative; }
	.nav__item a { display: block; padding: 12px 30px; }
	.nav__item a:focus {}
	.nav ul { display: block; position: absolute; z-index: 100; right: 0; top: 100%; width: 100%; background: #fff; padding: 28px 0; visibility: hidden; opacity: 0; box-shadow: 0 20px 20px 0 rgba(0,0,0,.1); transition: all 0.2s ease-out; }
	.nav.is-visible ul { visibility: visible; opacity: 1; }
	.nav.is-visible .nav__toggle { border-color: transparent; }
	.nav.is-visible .nav__toggle:before { transform: rotate(45deg); }
	.nav.is-visible .nav__toggle:after { transform: rotate(-45deg); }

	.sticky-product { display: none; }

	.hero { padding-top: 0; overflow: hidden; }
	.hero__title strong { font-size: 1.2em; }
	.hero__image { width: 140%; left: -20%; }

	.before-after { padding: 0; }
	.before-after__items { padding: 0; margin: 0; }
	.before-after__foot h4 { font-size: 50px; }

	.contents__items { display: block; }
	.contents__item { margin-bottom: 40px; }

	.product { padding: 60px 0; }
	.product__body { flex-flow: column nowrap; }
	.product__image { order: -1; }
	.product__content { padding: 0; margin-top: 30px; text-align: center; }

	.testimonials { padding: 60px 0; }
	.testimonials__item { display: block; }
	.testimonials__item div { padding: 20px 40px; }
	.testimonials .swiper-button-prev { left: 0; }
	.testimonials .swiper-button-next { right: 0; }

	.products__body { flex-flow: column nowrap;  }
	.products__content { padding: 40px 0; text-align: center !important; }
	.products__image { order: -1; min-height: 0; }
	.products__image img { position: static; width: 100%; height: auto; }

	.reviews { padding: 60px 0; }

	.instagram-wall { padding: 60px 0; }

	.socials { padding: 40px 0; }
	.socials ul { display: block; }
	.socials ul img { width: 22px; height: 22px; object-fit: contain; }
	.socials li { padding: 8px 0; }

	.footer { padding: 30px 0 150px; }
	.footer .container { display: block; }

	.footer__copyright,
	.footer__nav { display: block; }

	.footer__nav,
	.footer__copyright li,
	.footer__nav li { margin-bottom: 30px; }

	.footer__copyright li:last-child,
	.footer__nav li:last-child { margin-bottom: 0; }

	#sb_instagram.sbi_col_6 #sbi_images .sbi_item { width: 50% !important; }
}
