/*  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.375; color: #4E4E4E; }

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: 'Philosopher', sans-serif; font-weight: bold; color: #B9811D; }

h1 { margin: 0.4em 0; font-size: 55px; font-family: 'Philosopher', sans-serif; line-height: 1.0364; }
h2 { font-size: 50px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

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

/*  Wrapper  */

.wrapper { overflow: hidden; padding-top: 130px; }


/*  Container  */

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


/*  Button  */

.btn { display: inline-block; vertical-align: middle; padding: 18px 40px; background: #F75319; border: 0; border-radius: 0; 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: #CF3D09; color: #fff; }


/*  Header  */

.header { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; padding: 26px 0; background: #fff; }

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

.header__logo { display: inline-block; vertical-align: middle; width: 216px; height: 40px; 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; }

/*  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: 40px; }
.nav__item:first-child { margin-left: 0; }

/*  Hero  */

.hero { }

.hero__body { display: flex; flex-flow: row nowrap; }
.hero__content { margin-right: 50px; }
.hero__image { flex: 0 0 450px; margin-left: 10px; }

.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%; }


/*  Price  */

.price { margin-top: 20px; }
.price__body { display: flex; flex-flow: row nowrap; align-items: center; }
.price__old { position: relative; margin-right: 20px; font-family: 'Philosopher', sans-serif; color: #B9811D; font-weight: bold; font-size: 30px; }
.price__old:after { content: ''; position: absolute; right: 0; top: 0; width: 120%; height: 3px; background: currentColor; transform-origin: 100% 0; transform: rotate(-20deg); }
.price__current { margin-right: 20px; font-family: 'Philosopher', sans-serif; color: #764D29; font-weight: bold; font-size: 55px; }
.price__current sup { font-size: 50%; }
.price__foot { color: #764D29; letter-spacing: 0.135em; }


/*  Contents  */
.contents { padding: 55px 0 35px; }
.contents h2 { text-align: center; }

.contents__hr { position: absolute; right: 100%; top: 105px; margin-right: 15px; border: 0; width: 10px; height: 10px; background: #DCD3C2; border-radius: 50%; }
.contents__hr:before { content: ''; position: absolute; top: 4px; right: 100%; height: 2px; width: 200px; background: #DCD3C2; }
.contents__num { color: #F4CF7E; font-size: 74px;  font-family: 'Philosopher', sans-serif; font-weight: bold; line-height: 1; }

.contents__items { list-style: none outside none; }

.contents__item { display: flex; flex-flow: row nowrap; align-items: center; margin-bottom: 20px; }
.contents__item:last-child { margin-bottom: 0; }

.contents__body { position: relative; flex: 0 0 480px; }
.contents__body h3 { color: #764D29; }
.contents__image { position: relative; z-index: 10; flex: 0 1 600px; text-align: center; }

.contents__item:nth-child(even) { text-align: right; }
.contents__item:nth-child(even) .contents__image { order: 2; }
.contents__item:nth-child(even) .contents__hr { right: auto; margin-right: 0; left: 100%; margin-left: 15px; }
.contents__item:nth-child(even) .contents__hr:before { right: auto; left: 100%; }


/*  Features  */

.features { min-width: 0; padding: 55px 0 125px; }
.features h2 { max-width: 730px; margin: 0 auto 70px; text-align: center; }

.features__items { display: flex; flex-flow: row nowrap; list-style: none outside none; }

.features__item { flex: 1 1 15%; padding: 0 16px; text-align: center; }
.features__item:last-child { flex-basis: 20%; }
.features__item figure { height: 120px; margin-bottom: 25px; }
.features__item img { max-height: 100%; width: auto; height: auto; }


/*  Product  */

.product { background: #f9f2e4; }

.product__body { display: flex; align-items: center; }
.product__content { flex: 0 0 50%; padding: 40px 120px 40px 0; }
.product__content h2 { color: #764D29; }
.product__image { position: relative; flex: 0 0 50%; min-height: 600px; align-self: stretch; }
.product__image img { position: absolute; left: 0; top: 0; width: 50vw; height: 100%; max-width: none; object-fit: cover; }

.product:nth-child(even) .product__content { order: 2; padding-left: 120px; padding-right: 0; }
.product:nth-child(even) .product__image { order: 1; }
.product:nth-child(even) .product__image img { right: 0; left: auto; }


/*  FAQ  */

.faq { padding: 60px 0; ; }
.faq h3 { margin-bottom: 1em; color: #764D29; }
.faq p { margin-bottom: 2em;  }
.faq p:last-child { margin-bottom: 0; }

/*  Footer  */

.footer { padding: 50px 0; font-size: 14px; background-color: #DCD3C2; }

.footer a { color: #4E4E4E; text-decoration: underline; }
.footer a:hover { 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; }


/*  Tablet  */

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

	h1 { font-size: 50px; }
	h2 { font-size: 45px; }
	h3 { font-size: 28px; }
}


/*  Mobile  */

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

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


	.btn { padding: 15px 16px; }

	.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; color: #fff; font-size: 16px; }
	.nav__item a { display: block; padding: 14px 38px; color: #fff; }
	.nav__item a:focus { background: #ab947f; }
	.nav ul { display: block; position: absolute; z-index: 100; right: 0; top: 100%; min-width: 294px; padding: 28px 0; background: #b8a695; 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); }

	.hero__slider { margin: 0 -18px 10px; }
	.hero .swiper-pagination { position: static; margin-top: 10px; }
	.hero .swiper-pagination-bullet { width: 13px; height: 13px; background: #f9f2e4; opacity: 1; }
	.hero .swiper-pagination-bullet-active { background: #B9811D; }
	.hero__content { margin-right: 0; }

	.price { position: fixed; z-index: 50; bottom: 0; left: 0; width: 100%; padding: 18px; background: #f9f2e4; text-align: center; }
	.price__body { justify-content: center; }
	.price__old { font-size: 20px; }
	.price__current { font-size: 40px; }
	.price__foot { font-size: 11px;  }

	.contents { padding: 40px 0 10px; }
	.contents__item { display: block; text-align: left !important; margin-bottom: 40px; }
	.contents__item:last-child { margin-bottom: 0;  }
	.contents__image { text-align: center; }
	.contents__image img { max-width: 140px;  }
	.contents__num { font-size: 40px; }
	.contents__hr { display: none; }

	.features { padding: 10px 0 30px; }
	.features h2 { text-align: left; margin-bottom: 30px; }

	.features__items { display: block; }

	.features__item { display: flex; align-items: flex-start; text-align: left; padding: 10px 0; }
	.features__item figure { flex: 0 0 90px; margin-right: 30px; height: auto; }

	.product__body { display: block; }
	.product__content { padding: 35px 0 25px !important; }
	.product__image { margin: 0 -18px; min-height: 0; }
	.product__image img { position: static; width: auto; height: 280px; }

	.faq { padding: 30px 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; }
}

@media (max-width: 374px) {
	.btn { font-size: 12px; padding: 12px 18px;	}
	.price__old { font-size: 16px; }
	.price__current { font-size: 30px; }
	.price__foot { font-size: 10px; }
}