@charset "utf-8";
/*--- reset ---*/
body,dl,dt,dd,ul,ol,li,th,td,form,input,textarea,p {margin:0; padding:0;}
img {display:block; border:0;}
li {list-style:none}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
article,aside,canvas,figure,figure img,figcaption,footer,header,hgroup,menu,nav,section,audio,video {display:block; margin:0; padding:0;}

/* ----- Typekit ----- */
/* 
"source-han-sans-traditional" 400,700
"prenton" 400,700 / normal & italic

font-family:"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHei", sans-serif;
font-family:"prenton","微軟正黑體", "Microsoft JhengHei", sans-serif;
*/

/*--- global ---*/
html {overflow-y:scroll;}
body {
font-family:"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHei", sans-serif;
text-align:center; font-size:17px; line-height:1.6; color:#2c1b14;
background-color:#3a231a;
background-color:#efefef;
}
h1,h2,h3,h4,h5,h6 {margin:0; line-height:1.2;}
p {text-align:justify; text-justify:distribute;}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed; border:1px solid #000;}
th {border:1px solid #000;}
td {border:1px solid #000;}
a {outline:none; text-decoration:none;}
.clear {clear:both;}
input {vertical-align:middle;}

/*--- common ---*/
.sectionwpr {position:relative; width:100%;}
.centerwpr {position:relative; margin:0 auto; max-width:1100px; padding:0 20px;}

.quoteMark {display:inline-block; width:30px;
/* font-size:40px; line-height:20px;
opacity:0.5; position:relative; top:8px; */
}

/*--- hero ---*/
body.home {background-color:#9b6e16;}

.sectionwpr.hero {height:100vh; padding-bottom:72px;
box-sizing:border-box;
}
.sectionwpr.hero:before {content:""; display:block; width:100%; height:72px;
position:absolute; left:0; bottom:0;
background-color:#9b6e16;
}

.hero--img {height:100%;}

.hero--content {width:100%; height:520px; position:absolute; bottom:40px; left:0;}
.hero--content .centerwpr {height:100%;}
.hero--content .centerwpr:after {content:""; display:table; clear:both;}

.hero--part1 {width:calc(100% - 420px); height:100%; float:left; position:relative;
border-radius:1px 0 0 1px;
display:flex; justify-content:center;
background:linear-gradient(to bottom, rgba(238,205,118,.95) 0%,#eac46a 100%);
}
.hero--part1 .valign {width:100%; margin-top:80px;}
.hero--part1 h1 {margin-bottom:56px; position:relative;
font-size:50px; color:#231916; text-align:center;
}
.hero--part1 h1:before {content:""; display:block; width:96px; height:14px;
position:absolute; left:-10px; top:50%; margin-top:-7px; z-index:5; 
background-color:#a90b04;
}

.hero--part1 p {max-width:460px; margin:0 auto; position:relative;
color:#413324; text-align:center; font-size:22px; line-height:1.65;
}

.hero--btn {display:block; width:42px; height:42px; cursor:pointer;
position:absolute; left:50%; bottom:30px; margin-left:-21px;    
background-color:#754a0b; border-radius:50%;
background-image:url("../images/hero-slice.png"); background-size:127px auto;
background-position:15px -115px;
transition:400ms; transition-property:background-color; 
}
.hero--btn:hover {background-color:#5c3507;}

.hero--part2 {width:420px; height:100%; float:right; position:relative; overflow:hidden;
border-radius:0 1px 1px 0;
background:linear-gradient(to bottom, rgba(255,255,255,0.95) 0%,#fff 100%);
}

.hero--logo {height:210px; margin:0 auto 20px auto; position:relative;
display:flex; justify-content:center; align-items:center;
}
.hero--logo .logo {width:99px; height:103px; flex-shrink:0;
background-image:url("../images/weichuan-logo.png"); background-size:100% auto;
background-repeat:no-repeat; 
}
.hero--logo .badge {width:29px; height:190px; flex-shrink:0;
position:absolute; left:50%; top:18px; margin-left:70px;    
background-image:url("../images/weichuan-badge.png"); background-size:100% auto;
background-repeat:no-repeat; 
}

.hero--soy {height:250px; position:relative;
display:flex; justify-content:center;
}
.hero--soy .soy {height:100%; position:relative; margin:0; flex-shrink:0;}
.hero--soy img {height:100%;}

#sliderAnchor {width:100%; position:absolute; left:0; bottom:40px;}

/*--- slider ---*/
.sectionwpr.slider {padding-bottom:32px; margin-top:-8px;
background-color:#9b6e16;
}
.slider--container {padding:0 24px; max-width:1164px;}

.slider--slot a {display:block; margin:8px; position:relative;
background-color:#754a0b; border-radius:1px;
transition:300ms; transition-property:transform,opacity; transition-delay:50ms; 
}
.slider--slot a:hover {transform:scale(0.965); opacity:0.9;}
.slider--slot.coming a:hover {transform:scale(1); opacity:1;}

.slider--slot img {width:100%;}

.slider--img {width:100%; padding-top:66.67%;
background-position:center center;
background-size:100% auto; border-radius:1px 1px 0 0;
}

.slider--caption {height:40px; padding:0 25px; position:relative;
color:#ede8e3; line-height:1; text-align:left; font-size:17px;
display:flex; align-items:center;
}
.slider--caption:after {content:""; display:block; width:56px; height:8px;
position:absolute; right:20px; top:50%; margin-top:-4px;
background-image:url("../images/slider/slider-btn.png");
background-repeat:no-repeat; background-size:60px auto;
background-position:28px 0;
}

.slider--slot.coming a {cursor:default;}
.slider--slot.coming .slider--img {opacity:0.5;} 
.slider--slot.coming a:hover .slider--img {background-size:100% auto;}

.slider--slot.coming a:after {content:""; display:block; position:absolute; left:50%; top:50%;
width:140px; height:64px; margin-left:-70px; margin-top:-52px;
background-image:url("../images/slider/slider-soon.png");
background-repeat:no-repeat; background-size:140px auto;
}

.slick-arrow {position:absolute; top:50%; z-index:200;
width:32px; height:60px; margin-top:-30px; padding:0; cursor:pointer; outline:0 !important;
font-size:0; line-height:0;
border:none; background-color:transparent;
background-image:url("../images/slider/slider-btn.png");
background-repeat:no-repeat; background-size:60px auto;
opacity:0.7; transition:300ms; transition-property:opacity;
}
.slick-arrow:hover {opacity:1;}
.slick-prev {left:0; background-position:0 -29px;}
.slick-next {right:0; background-position:20px -91px;}


/* --- chefsalon ---*/
.chefsalon {padding:40px 0 120px 0;
background-color:#ede8e3;
}
.chefsalon h1 {position:relative; margin-bottom:20px;
text-align:left; font-size:30px; line-height:120%;
}
.chefsalon h1:before {content:""; display:block; width:100%; height:10px;
position:absolute; left:0; top:50%; margin-top:-4px;
background-color:#a90b04;
}
.chefsalon h1 span {position:relative; padding-right:20px;
background-color:#ede8e3;
} 

.chefsalon--intro {margin:0 auto 30px auto; position:relative;
max-width:860px; height:260px;
display:flex; justify-content:space-between; align-items:center;
}

.chefsalon--portrait {width:260px; height:260px; margin-right:50px;
border-radius:50%; overflow:hidden; flex-shrink:0;
}
.chefsalon--portrait img {width:100%;}

.chefsalon--desc {max-width:540px;
font-size:18px; text-align:left;
}
.chefsalon--desc h1 {font-size:32px;}

.chefsalon--desc2 {padding:20px 20px 25px 20px; position:relative;
font-size:16px; line-height:26px;    
background-color:#966915; border-radius:0 0 1px 1px;
color:#fff;
}
.chefsalon--desc2+.video-container {margin-top:30px;}

.chefsalon--desc2 h3 {font-size:21px;}

.chefsalon--desc2 p {max-width:900px; margin:0 auto;
text-align:center; color:#f1ede7;
}
.chefsalon--desc2 h3+p {margin-top:10px;}

/* --- youtube embed ---*/
.video-container {position:relative; padding-bottom:56.25%;
padding-top:0; height:0; overflow:hidden; margin:0 auto;
border-radius:1px 1px 0 0;
}
.video-container iframe,.video-container object,.video-container embed {
position:absolute; top:0; left:0; width:100%; height:100%;
border:0 none;
}


/* --- chefchoice ---*/
.chefchoice {padding:0 0 100px 0;
background-color:#8a5e11; border-top:12px solid #7d520d;
border-bottom:12px solid #7d520d;
}
.chefchoice .centerwpr {max-width:860px;}

.chefchoice h1 {max-width:540px; height:80px; margin:-60px auto 55px auto; position:relative;
font-size:32px; line-height:80px; white-space:nowrap; color:#fff;
background-color:#941508; border-radius:2px;
box-shadow:0 2px 2px rgba(0,0,0,0.2);
}
.chefchoice h1:before,.chefchoice h1:after {content:""; display:block;
width:80px; height:80px; position:absolute; top:19px;
background-size:80px auto; background-repeat:no-repeat;
}
.chefchoice h1:before {left:-60px;
background-image:url("../images/chefchoice/ribbon-left.png");
}
.chefchoice h1:after {right:-60px;
background-image:url("../images/chefchoice/ribbon-right.png");
}

.chefchoice h2 {margin-bottom:20px;
font-size:28px; color:#fff;
}
.chefchoice h2 br {display:none;}
.chefchoice .intro {max-width:720px; margin:0 auto 70px auto;
color:#f0ece7; text-align:center;
}

.chefchoice--entry {position:relative;
padding:45px 0 45px 204px;  
display:flex; justify-content:center; align-items:center;
color:#896f5d; font-size:18px;
background-color:#ede8e3; border-radius:2px;
background:linear-gradient(to bottom, #ede8e3 0%,#e3dace 100%);
}
.chefchoice--entry+.chefchoice--entry {margin-top:95px;}

.chefchoice--image {width:auto; height:335px; 
position:absolute; left:60px; top:50%; margin-top:-163px;
}
.chefchoice--image.alt {display:none;}

.chefchoice--oil {max-width:540px;}
.chefchoice--oil h3 {position:relative;
font-size:30px; color:#422912; margin-bottom:20px;
display:flex; justify-content:center; align-items:center;
}

.chefchoice--oil h3:before,
.chefchoice--oil h3:after {content:"";
width:35px; height:2px; position:relative; top:2px;
background-color:#b19f92;
}
.chefchoice--oil h3:before {margin-right:14px;}
.chefchoice--oil h3:after {margin-left:14px;}

.itqi {color:#422912; margin-bottom:5px;}

.chefchoice--oil h4 {margin-bottom:20px;
font-size:20px; color:#422912;
display:flex; justify-content:center; align-items:center;
}

.itqi-star {width:18px; height:18px; display:block; margin:0 2px;
background-image:url("../images/hero-slice.png"); background-size:127px auto;
background-repeat:no-repeat; background-position:0 -185px;
}

.chefchoice--oil h4 span {margin:0 8px;}
.chefchoice--oil h4 br {display:none;}

.chefchoice--oil p {text-align:center;}

/* cheftip */
.cheftip {padding-bottom:90px;
background-color:#ede8e3;
}

.cheftip--header {margin:0 auto; position:relative;
height:320px; vertical-align:middle;
display:inline-flex; justify-content:center; align-items:center;
}
.cheftip--header .portrait {width:320px; height:320px; margin-right:37px;
border-radius:50%; overflow:hidden;
position:relative; top:-60px;
}
.cheftip--header img {width:100%;}

.cheftip--header .valign {text-align:left; position:relative; top:-15px;}
.cheftip--header p {white-space:nowrap; display:inline-block; position:relative;
color:#362018; line-height:130%; vertical-align:middle;
}
.cheftip--header .l1 {font-size:32px; font-weight:bold;}
.cheftip--header .l2 {font-size:30px; font-weight:normal; padding-left:64px;}
.cheftip--header .l2:before {content:""; display:block; width:50px; height:10px;
position:absolute; left:4px; top:50%; margin-top:-5px;
background-color:#ffa522;
}

.cheftip--entry {text-align:center; font-size:0; line-height:0;}

.cheftip--entry .imgwpr {width:39.9%; max-width:465px; 
display:inline-block; vertical-align:middle;
}
.cheftip--entry .imgwpr.small {display:none;}
.cheftip--entry .imgwpr img {width:100%; border-radius:1px;}

.cheftip--entry .content .imgwpr {width:100%; max-width:none;
display:block;
}

.cheftip--entry .content {width:59.9%; max-width:560px; height:240px; 
position:relative; vertical-align:middle;
text-align:left; color:#362018; font-size:17px; line-height:27px;
background-color:#fff; box-shadow:0 0 8px rgba(0,0,0,0.06);
box-sizing:border-box; border-radius:1px;
display:inline-flex; align-items:center;
}
.cheftip--entry .content:after {content:""; display:block; width:25px; height:100%;
position:absolute; top:0;
background-color:#fff;
}

.cheftip--entry.t01 .content {padding:0 55px 0 30px;}
.cheftip--entry.t02 .content {padding:0 30px 0 55px; text-align:right;}
.cheftip--entry.t02 .content p {text-align:right;}

.cheftip--entry.t01 .content:after {left:-25px;}
.cheftip--entry.t02 .content:after {right:-25px;}
.cheftip--entry.t03 .content:after {display:none;}

.cheftip--entry.t03 .imgwpr {vertical-align:top;}
.cheftip--entry.t03 .content {display:inline-block; vertical-align:top;
padding:40px 55px; height:auto;
}
.cheftip--entry.t03 .content .imgwpr {margin-top:36px; margin-bottom:30px;}

.cheftip--entry .content h2 {position:relative; margin-bottom:22px;
font-size:28px; font-weight:normal; line-height:100%;
}

.tiptag {width:124px; height:66px; position:absolute; z-index:200; 
display:flex; justify-content:center; align-items:center;   
font-weight:bold; color:#fff; font-size:17px; letter-spacing:1px;
background-color:#fed06a; border-radius:1px;
}
.tiptag .num {font-size:23px; margin-left:6px; margin-top:-4px;}

.t01 .tiptag {left:-112px; top:34px;}
.t02 .tiptag {bottom:-14px; right:-38px;}
.t03 .tiptag {left:-124px; bottom:0;}

.cheftip--hr {margin:59px auto 60px auto; height:1px; max-width:998px;
border-bottom:1px dashed #bcb4b4;
}

.tiptag--m {display:none; width:70px; height:40px; position:relative; top:-4px; left:-8px;
justify-content:center; align-items:center; vertical-align:middle; margin-right:5px;
font-weight:bold; color:#fff; font-size:15px; letter-spacing:1px;
background-color:#fed06a; border-radius:1px;
}


/* chefbuy */
.chefbuy {padding:80px 0;
background-color:#e5ddd5;
}
.chefbuy .centerwpr:after {content:""; display:table; clear:both;}

.chefbuy h1 {font-size:30px; margin-bottom:40px;}
.chefbuy h1 i {display:inline-block; width:142px; height:50px;
vertical-align:middle; position:relative; top:-2px;
background-image:url("../images/hero-slice.png"); background-size:127px auto;
background-position:0 -272px; background-repeat:no-repeat;
}

.chefbuy--group {width:49.9%; float:left;}
.chefbuy--group h2 {max-width:330px; margin:0 auto 18px auto; height:40px;
font-size:22px; font-weight:normal; line-height:40px; letter-spacing:1px;
background-color:#fff;
}


/* nav */
.nav {width:100%; z-index:9998; 
position:fixed; left:0; top:0;
}
.nav--btn {display:block; width:42px; height:42px; cursor:pointer;
position:absolute; top:15px;
font-size:0; line-height:0;
border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.1);
background-image:url("../images/navbtn.png"); background-size:100px auto;
background-repeat:no-repeat;
}
.nav--btn.mirrormedia {left:15px;
background-color:#1e1916;    
background-position:0 0px;
}
.nav--btn.share {left:67px;
background-color:#1e1916;    
background-position:-58px 0;
}
.nav--btn.menuTrigger {right:15px;
background-color:#f7f5f5; background-image:none;
}
.nav--btn.menuTrigger:hover {background-color:#fff;}

.menuTrigger .icon {width:20px; height:2px; position:absolute; left:50%; top:50%;
margin-left:-10px; margin-top:-1px;
background-color:#362119;
transition:300ms; transition-property:transform;
pointer-events:none;
}
.menuTrigger .icon:before,.menuTrigger .icon:after {content:""; display:block;
width:20px; height:2px; position:absolute; left:0;
background-color:#362119;
}
.menuTrigger .icon:before {top:-6px;}
.menuTrigger .icon:after {bottom:-6px;}

.nav--btn.menuTrigger:hover .icon {transform:rotate(-90deg);}

.menu {position:fixed; left:0; top:0; width:100%; z-index:9999;
pointer-events:none;
}
.menu .overlay {width:100%; height:100%; position:fixed; left:0; top:0;
display:none;
}
.menu--container {width:320px; height:100%; position:fixed; right:-370px; top:0;
text-align:left;    
background-color:#f4ebdf; box-shadow:0 0 14px rgba(0,0,0,0.2);
transition:300ms; transition-property:right; 
display:flex; flex-direction:column; justify-content:center;
}

.menu.active {pointer-events:auto;}
.active .overlay {display:block;}
.active .menu--container {right:0;}

.menuClose {display:block; width:42px; height:42px; cursor:pointer;
position:absolute; right:15px; top:15px;
border-radius:50%; transform:rotate(45deg);
opacity:0;
}
.menuClose:hover {background-color:#ebe0d3;}
.active .menuClose {opacity:1;}

.menuClose .icon {width:20px; height:2px; position:absolute; left:50%; top:50%;
margin-left:-10px; margin-top:-1px;
background-color:#362119;
}
.menuClose .icon:before {content:""; display:block; width:2px; height:20px;
position:absolute; left:50%; top:50%;
margin-left:-1px; margin-top:-10px;
background-color:#362119;
}

.menu--home {display:block; width:150px; height:150px; margin:35px auto 25px auto;
background-color:#fdfbf9; border-radius:50%;
background-image:url("../images/logo-dark.png"); background-size:144px auto;
background-repeat:no-repeat; background-position:2px 3px;
}

.menu--item {margin:0 25px;}
.menu--item li {border-bottom:1px solid #e3d7cb;}
.menu--item a {display:block; height:80px; cursor:pointer; position:relative;
font-size:18px; color:#523222; line-height:80px; color:#44291d;
padding-left:35px;
}
.menu--item a span {position:relative; z-index:10;}
.menu--item a:before {content:""; display:block; width:100%; height:100%;
position:absolute; left:-25px; top:0; padding:0 25px;
background-image:url("../images/menubg.png"); background-repeat:repeat-y;
opacity:0; transition:300ms; transition-property:opacity; transition-delay:50ms; 
}
.menu--item a:hover:before {opacity:0.9;}

.menu--item a:after {content:""; display:block; width:10px; height:19px;
position:absolute; right:5px; top:50%; margin-top:-9px;      
background-image:url("../images/slider/slider-btn.png");
background-size:40px auto; background-repeat:no-repeat;
background-position:1px -111px;
pointer-events:none; transition:300ms; transition-property:right; 
}
.menu--item a:hover:after {right:0;}

.menu--ext {padding:25px 0 25px 60px; margin-top:-1px;
color:#523222; background-color:#e9dfd3; 
border-top:1px solid #e3d7cb; border-bottom:1px solid #e3d7cb; 
}
.menu--ext .title {margin-bottom:8px;}
.menu--ext li {list-style:disc; list-style-position:inside;
color:#63483a; padding-left:6px;
}
.menu--ext a {color:#523222; font-size:15px; line-height:34px;}
.menu--ext a:hover {border-bottom:2px dotted #795f50;}

.menu--fb {border-top:none;}
.menu--fb li {border-bottom:none;}

.menu--item .home {display:flex; align-items:center;}
.menu--item .home i {width:22px; height:21px; display:block;
position:relative; margin-right:8px;    
background-image:url("../images/hero-slice.png");
background-size:127px auto; background-repeat:no-repeat;
background-position:0 -552px;
}


/* recipes hero */
.rehero {width:45%; height:100%; position:fixed; left:0; top:0; z-index:100;}
.rehero--img {position:absolute; left:0; top:0; width:100%; height:calc(100% - 62px);
background-size:cover; background-position:right top;
}
/* .re02 .rehero--img {background-position:center center;}
.re03 .rehero--img {background-position:center 60%;}
.re04 .rehero--img {background-position:center 85%;}
.re05 .rehero--img {background-position:center center;} */

.rehero--footer {width:100%; height:62px; position:absolute; left:0; bottom:0;
background-color:#fff;
}
/* .rehero--name {position:absolute; right:0; top:0;
padding:0 30px; height:62px; line-height:62px; letter-spacing:1px;
color:#fff; font-size:19px; white-space:nowrap;
background-color:#9b6e16;    
} */
.rehero--name {position:absolute; right:0; top:0;
padding:0 15px; height:62px; letter-spacing:1px;
color:#fff; font-size:19px; line-height:1.2; text-align:left;
background-color:#9b6e16; 
display:flex; justify-content:center; align-items:center;
min-width:160px;
}
.type2 .rehero--name {font-size:17px;}

.rehero--oil {position:absolute; left:8px; bottom:8px;}
.rehero--oil:after {content:""; display:table; clear:both;}
.rehero--oil .oil {height:108px; float:left;}
.rehero--oil .oil:last-child {margin-right:0;}
.rehero--oil .oil img {height:100%;}

.rehero--subtitle {position:absolute; left:165px; top:0;
height:62px; line-height:62px; letter-spacing:1px;
color:#2d1b15; font-size:19px; white-space:nowrap;
}

/* recipes container */
.recontainer {padding-left:45%; position:relative;
background-color:#e7dfd8;
}
.recontainer .sectionwpr:first-child {background-color:#ede8e3;}

.type2 .recontainer .sectionwpr {background-color:#ede8e3;}
.type2 .recontainer .sectionwpr:nth-child(even) {background-color:#e7dfd8;}

/* .recontainer .sectionwpr.even {background-color:#e7dfd8;} */
.recontainer .centerwpr {max-width:740px; padding:60px 30px;}
/* .recontainer .centerwpr:last-child {padding-bottom:60px;} */
.type2 .recontainer .sectionwpr:first-child .centerwpr {padding-top:35px;}

.reintro {position:relative;}
.reintro--chef {height:380px; position:absolute; right:0; top:50%;
margin-top:-190px;
}
.reintro--chef img {height:100%;}
.reintro--content {margin-right:226px; padding:40px 120px 40px 60px;
font-size:16px; line-height:27px; text-align:left;    
display:flex; flex-direction:column; justify-content:center; align-items:cetner;
background-color:#fff; min-height:400px;
}
.reintro--content h2 {position:relative;
font-size:26px; margin-bottom:30px;
}
.reintro--content h2:before {content:""; display:block; width:44px; height:10px;
position:absolute; left:-64px; top:50%; margin-top:-5px;
background-color:#a90b04;
}

.recontent {position:relative; padding-top:25px;}
.type2 .recontent {padding-top:0;}

.recontent .video-container {margin-bottom:40px;}

.recontent--title {position:relative; margin-bottom:50px;}
.type2 .recontent--title {margin-bottom:28px;}

.recircle {position:absolute; left:0; top:50%; width:100px; height:100px; margin-top:-50px;}
.recircle .circle {width:92px; height:92px; position:absolute; left:0; bottom:0;
font-size:50px; line-height:88px; text-align:center; color:#2d1b15; font-weight:bold;
border:4px solid #2d1b15; border-radius:50%;
}
.recircle .text {font-size:15px; text-align:center; line-height:100%; margin-top:-24px;}

.recontent h2 {display:inline-block; padding:0 50px; margin:0 auto; max-width:400px;
line-height:34px; font-size:28px; text-align:center; color:#2d1b15;
border-left:2px solid #2d1b15; border-right:2px solid #2d1b15;
}
.recontent h2.long {padding:0 20px;}

.recontent img {width:100%;}

.type2 .recontent .complete {margin-bottom:40px;}

.recontent--final {margin-bottom:40px;}

.recontent--entry {position:relative; min-height:35px;
margin-bottom:40px;
text-align:left; line-height:27px;
}
.recontent--entry:last-child {margin-bottom:0;}
.recontent h3 {position:absolute; left:0; top:0;
width:73px; white-space:nowrap; padding:4px 0;
color:#544a46; font-size:17px; font-weight:normal; text-align:center;
background-color:#faf9f7; border-radius:1px;
}
.recontent p {font-size:18px; padding-left:92px;}

.ingredient ul {margin-bottom:22px; padding-left:95px;}
.ingredient li {margin-bottom:6px; max-width:500px;
display:flex; justify-content:space-between; align-items:center;
letter-spacing:1px;
}
.ingredient .name {flex-shrink:0; margin-right:15px;}
.ingredient .quantity {flex-shrink:0; margin-left:15px;}

.ingredient .dotted {content:""; display:block; height:10px;
flex:1;
background-image:url("../images/recipes/dotted.png"); background-repeat:repeat-x;
background-size:auto 2px; background-position:left center;
}

/* .ingredient div {display:inline-block; vertical-align:middle;} */
/* .ingredient .name {width:342px; margin-right:18px;
background-image:url("../images/recipes/dotted.png"); background-repeat:repeat-x;
background-size:auto 2px; background-position:right center;
} */
/* .ingredient .text {padding-right:18px;
background-color:#ede8e3;
}
.even .ingredient .text {background-color:#e7dfd8;} */

.condiment ol {padding-left:92px; font-size:18px;}
.condiment ol li {list-style:decimal; list-style-position:inside;}

.recontent--entry.step {padding-top:60px;}
.step--entry {margin-bottom:35px;}
.step--entry:last-child {margin-bottom:0;}
.step--entry .text {margin-bottom:15px; margin-left:60px; padding-left:12px;
line-height:23px; position:relative;
border-left:1px solid #2d1b15;
}
.step--entry .st {position:absolute; left:-60px; top:50%; width:60px; height:19px;
font-size:15px; line-height:19px; letter-spacing:1px; 
margin-top:-9px;
}

/* --- type2 --- */
.type2 .recontent--entry.step {padding-top:0;}
.type2 .step--entry {padding-left:95px; margin-bottom:0;}
.type2 .step--entry+.step--entry {margin-top:20px;}
.type2 .step--entry .text {margin:0; padding-left:0;
border-left:none;
display:flex;
}
.type2 .step--entry .st {position:relative; left:auto; top:auto; width:auto; height:auto;
margin-top:0; white-space:nowrap; flex-shrink:0; line-height:23px;
}
.type2 .step--entry .st:after {content:"/"; margin:0 6px 0 8px;
position:relative; top:-1px; opacity:0.7;
}
/* --- type2 --- */

.recontent--entry .anno {font-size:13px; position:relative; top:-5px; margin:0 2px;}

.step--tips {display:flex;
font-size:15px;
background-color:#f8f6f4;
}
.step--tips .t1 {padding:0 11px;
color:#fff; font-weight:700;    
background-color:#966915;    
display:flex; align-items:center; justify-content:center;
}
.step--tips .t2 {padding:5px 12px; line-height:1.4;}

/* footer */
.footer {padding:16px 0;
font-size:14px; line-height:22px; color:#a48777;
background-color:#3f2814;
}
.footer li {margin-bottom:2px;}
.footer .m1 i {display:none; vertical-align:middle; width:32px; height:2px;
background-color:#a48777;
}
.footer .m1 i.left {margin-right:6px;}
.footer .m1 i.right {margin-left:6px;}


/* recipes footer */
.recipes .footer {padding:0 0 12px 0; margin-top:-35px;
color:#887265;
background-color:#e7dfd8;
}
.recontainer .footer .centerwpr {padding-top:0; padding-bottom:0;}
.recipes .footer .m1 i {display:inline-block; background-color:#8c766a;}

.recipes.type2 .footer {margin-top:0; padding-top:12px;}


/* back top */
#fixBtn {position:fixed; right:15px; bottom:15px; z-index:9997;
transition:200ms; transition-property:opacity;
opacity:0; pointer-events:none;
}
#fixBtn.active {opacity:1; pointer-events:auto;}

#fixBtn a {display:block; width:50px; height:50px; position:relative;
background-color:#fdfcfb; border-radius:2px; cursor:pointer;
background-image:url("../images/hero-slice.png"); background-repeat:no-repeat;
background-size:127px auto;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
#fixBtn a:hover {background-color:#fff;}

#backHome {background-position:11px -469px; margin-bottom:10px;}
#backTop {background-position:14px -408px;}



/* ----- top nav: share button ----- */
#shareBtn {position:absolute; left:67px; top:15px;}

.nav--btn.share {left:0; top:0; z-index:100;
background-color:#1e1916; background-position:-58px 0;
}

.nav--btn.social {
background-image:url("../images/btn-social.png"); 
background-size:100% auto;
top:0; visibility:hidden; pointer-events:none;
transition-duration:250ms; transition-property:top,visibility;
}
.social.facebook {
background-color:#3b5998; background-position:0 0px;
}
.social.line {
background-color:#00b900; background-position:0 -67px;
}
.social.gplus {
background-color:#df4f3f; background-position:0 -134px;
}

.expand .nav--btn.social {visibility:visible; pointer-events:auto;}
.expand .social.facebook {top:52px;}
.expand .social.line {top:104px;}
.expand .social.gplus {top:156px;}

/* temp (for og image screen shot) */
/* #menuContainer,.nav,#fixBtn {display:none;} */