html, body {
	position:absolute;
	top:0; left:0;
    width:100vw; height:100%;
    background:#d9d9da url(/img/bodybg.png);
    overflow:hidden;
    font-size:100%;
    font-weight:400;
	color:rgba(0, 0, 0, .87);
}

*, :before, :after {
	list-style:none; margin:0; padding:0; border:0; outline:0; box-sizing:border-box;
	font-family:'Libre Franklin', sans-serif;
	line-height:1.3;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1); transform:translate3d(0, 0, 0) scale3d(1, 1, 1);
	-webkit-overflow-scrolling:auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

select {font-weight:inherit; font-size:inherit; background:transparent}

article a {text-decoration:underline}
a, h1 a {cursor:pointer; color:inherit; font-weight:inherit; font-size:inherit; text-decoration:none}

h1, h2, h3, b, strong {font-weight:900}

input, textarea, select {
    -webkit-user-select:text; user-select:text;
	-webkit-appearance:none;
	padding:.75em 1em;
	border:solid 1px rgba(0, 0, 0, .54); border-radius:.2rem;
	font-weight:inherit; font-size:inherit;
	background:ivory;
	box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .3);
}

input[type="radio"] {-webkit-appearance:radio}
input[type="checkbox"] {-webkit-appearance:checkbox}

input[type="email"] {padding:.75em 1em .75em 3em !important; background:url(/img/ico/email.svg) no-repeat .7em 50% / auto 60%}
input[type="password"] {padding:.75em 1em .75em 3em !important; background:url(/img/ico/pass.svg) no-repeat .7em 50% / auto 60%}

::-webkit-input-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
:-ms-input-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
::-moz-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
:-moz-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
::placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}

:active {outline:0}


hr {display:block; flex-basis:100%; margin: 1rem 0; border:solid 1px rgba(0, 0, 0, .24); border-width:1px 0 0}

#hello {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-justify-content:flex-start; justify-content:flex-start;
	-webkit-align-items:center; align-items:center;
	position:absolute; z-index:9;
	width:100vw; height:100%;
	overflow:auto;
	padding:6.2rem 0 0;
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
	background-color: rgba(0, 0, 0, .3);
}
#hello > * {-webkit-flex:0 1 auto; flex:0 1 auto; width:20rem; padding:1rem; background:#fff}
#hello h1 {padding:1rem 1rem 0; text-align:center; font-size:1.5rem; border-radius:.24rem .24rem 0 0}
#hello > div {text-align:center; margin:-1px 0 0}

#hello .yn {padding:0 1rem .5rem; border-top:solid 1px rgba(0, 0, 0, .36)}
	#hello .yn button {width:auto; font-size:.9rem}

#hello > div:last-child {border-radius:0 0 .24rem .24rem}


#hello ul li {display:block; padding:1rem; list-style:disc}
#hello ul li b.icon-deal {margin-right:1rem}
#hello ul li a {text-decoration:underline; transition:all .3s}
#hello ul li a:hover {color:#fb0}


#hello ~ *, #logreg:not(.hidden) ~ *, .blur {-webkit-filter:blur(3px); filter:blur(3px)}

.hidden {
	position:absolute !important;
	top:-200vh !important;
	left:-200vw !important;
	bottom:auto !important;
}

.hint {font-size:.75rem !important; color:inherit; opacity:.54}

.stars {
	font:normal 400 1.5rem/1 'ico';
	text-decoration: none;
	text-transform: none;
	display:inline-block !important;
	position:relative;
	color:rgba(0, 0, 0, .2);
	letter-spacing:2px;
	margin:0 0 .5em;
	white-space:nowrap;
}
.stars .gold {
	font:inherit;
	position:absolute;
	top:0; left:0;
	width:100%; height:1.3em;
	overflow:hidden;
	color:#fb0
}

.categories, figure > .badge {position:absolute; z-index:1; top:5%; left:10%;}
.badge {
	display:inline-block;
	margin:0 0 3px; padding:.2em .5em;
	border:solid 1px rgba(255, 255, 255, .24); border-radius:.24em;
	font-size:.8em; font-weight:600;
	text-shadow:1px 1px rgba(0, 0, 0, .54);
	white-space:nowrap;
	color:#fff;
	background:rgba(0, 0, 0, .75);
}

.badge.error {background:#f81025; color:#fff !important}

.badge.afternoon-tea {background:#c50}
.badge.appetizers {background:#da1}
.badge.breakfast {background:#693}
.badge.desserts {background:#707}
.badge.drinks {background:#029}
.badge.entrees {background:#a20}
.badge.sides {background:#07f}

body button, body .button {
	position:relative;
	display:inline-block;
	min-width:5em;
	padding:0 1em;
	border:solid 1px rgba(0, 0, 0, .54); border-radius:2.5em;
	color:rgba(0, 0, 0, .75);
	line-height:2.5;
	font-size:1rem; font-weight:700;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	transition:all .3s;
}
body button:not(.flat), body .button:not(.flat) {box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24)}
body button:not(.flat):hover, body .button:not(.flat):hover {box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38)}
body button:not(.flat):active, body .button:not(.flat):active {box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24)}

body button.short, body .button.short {min-width:auto; height:2em; font-size:.8rem; line-height:2; text-shadow:none}

body button.gold, body .button.gold {border:0; background:#ffd05c; color:rgba(0, 0, 0, .87) !important}
body button.orange, body .button.orange {border:0; background:#d68824; color:#fff !important}
body button.green, body .button.green {border:0; background:#9f9835; color:#fff !important}
body button.red, body .button.red {border:0; background:#ea4d4d; color:#fff !important}
body button.orange-o, body .button.orange-o {border-color:#d68824; background:rgba(214, 136, 36, .1); color:#d68824 !important}
body button.green-o, body .button.green-o {border-color:#9f9835; background:rgba(159, 152, 53, .1); color:#9f9835 !important}

body button.silver, body .button.silver, body button.minus, body .button.minus
	{border:0; background:#999; color:#fff !important}

body button.disabled, body .button.disabled {pointer-events:none; opacity:.5; box-shadow:none}

.img {display:block; overflow:hidden; border-radius:.24em 0 0 .24em; background:rgba(255, 255, 255, .4) 50% 50% / cover}
.img img {width:100%}

div[class*="icon-"] {align-items:center; white-space:normal; font-style:italic}
div[class*="icon-"]:before {font-size:4.5em; color:#989f35; opacity:.3; margin-right:2rem}
	div.icon-attention {background:rgba(255, 140, 40, .2)}
	div.icon-like {background:rgba(140, 160, 50, .3)}


header {
	display:-webkit-flex; display:flex;
	-webkit-align-items:stretch; align-items:stretch;
	position:absolute; top:0; left:0; right:0; z-index:7;
	min-width:320px; height:5.2rem;
	background:#0e170b;
}

header, header a, footer a, footer span, .badge {color:rgba(255, 255, 255, .87); text-decoration:none}

#logo {-webkit-flex:0 1 auto; flex:0 1 auto; position:relative; font-size:1.3rem; margin:0 2rem .6rem 5vw}
#logo:before {position:relative; top:.2em; font-size:2.2em; color:#ffd05c}
#logo > a {display:inline-block; padding:0 0 0 .2em; font-size:1.7em; font-weight:400; line-height:1}
#logo > span {position:absolute; right:0; bottom:0; font-size:1.72em; font-weight:400; color:#fff; opacity:.75; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:100% 90%; transform-origin:100% 90%}
#logo > span a {display:inline-block; font-size:1.3em}
#logo > span a:before {font-size:1.3em}


header > div {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	display:-webkit-flex; display:flex;
	-webkit-justify-content:flex-end; justify-content:flex-end;
	-webkit-align-items:stretch; align-items:stretch;
	/* position:absolute; top:0; right:5vw */
}

header > div > * {
	display:-webkit-inline-flex; display:inline-flex;
	-webkit-align-items:center; align-items:center;
	padding:1.8em 1.4vw 2em;
	transition:all .3s
}

header [for="srchinp"] {display:none}

#search {-webkit-flex:1 1 auto; flex:1 1 auto; position:relative; max-width:25rem; /* width:25rem; min-width:25rem */}
	#search input {
		width:100%; height:2.5rem;
		padding:.75em 5.4em .75em 3em;
		border:solid 1px; border-radius:2.5em;
		color:#fff;
		background:url(/img/ico/search_white.svg) no-repeat .75em 50% / auto 70%
	}
	#search input::-webkit-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input:-ms-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input::-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input:-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input::placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}

	#search button {position:absolute; right:1.4vw; z-index:1}

header > div > span[action="subscribe"]:before {font-size:1.6em; margin-right:.3em; cursor:pointer}
header > div > span[action="subscribe"]:after {content:'Subscribe to newsletter'; width:auto}
header > div > span[action="subscribe"]:hover {background:rgba(255, 255, 255, .1)}


#usermenu {
	position:relative;
	-webkit-flex:0 1 auto; flex:0 1 auto;
	display:inline-block;
	padding:0;
	background:#1c2e16;
}

header > div > span[action="logreg"] {font-weight:600; background:#1c2e16; cursor:pointer}
header > div > span[action="logreg"]:hover {color:#ffd05c}

header nav > label {
	display:-webkit-flex; display:flex;
	-webkit-align-items: center; align-items: center;
	height:100%;
	margin:0 1.4vw;
	font-weight:600;
	cursor:pointer;
}

#usermenu > label:before {
	-webkit-order:1; order:1;
	font-size:.8em;
	margin-left:1em;
	-webkit-backface-visibility:visible; backface-visibility:visible;
	transition:.3s;
}

header nav > div, header nav > ul {
	position:absolute; top:100%; left:0;
	min-width:100%; max-height:0; overflow:hidden;
	border-radius:0 0 .24rem .24rem;
	background:#1c2e16;
	opacity:0;
	box-shadow: 5px 5px 10px -3px rgba(0, 0, 0, 0.38);
	transition:.3s .3s;
}

header nav > ul {right:0; left:auto; min-width:320px; overflow:auto; color:rgba(0, 0, 0, .87); background:#fff}

header nav > input ~ div a {
	display:block;
	width:100%;
	padding:.5em 1em;
	border-top:solid 1px rgba(255, 255, 255, .54);
}

header nav > input ~ div a:hover {background:#3c5e26}
header nav > input ~ div a:before {margin-right:1em}

header nav:focus > input:checked + label:before {-webkit-transform:rotateZ(90deg); transform:rotateZ(90deg)}
header nav:focus > input:checked ~ div, header nav:focus > input:checked ~ ul {max-height:15em; opacity:1}

header nav img {
	-webkit-flex:0 0 2.5em; flex:0 0 2.5em;
	width:2.5em; height:2.5em;
	margin-right:1em;
	border:solid 1px rgba(255, 255, 255, .75); border-radius:55%;
}

#newsfeed {
	-webkit-flex:0 1 auto; flex:0 1 auto;
	display:inline-block;
	padding:0;
	background:#ffd05c;
}

#newsfeed label {
	-webkit-justify-content: center; justify-content: center;
	position:relative;
	width: 3.2em;
	margin: 0;
	color: #ffd05c;
	background: url(/img/ico/bell.svg) no-repeat 50% / auto 50%;
}
	#newsfeed label:after {
		content:'';
		position:absolute; top:33%; left:1.8em; z-index:1;
		width:.8em; height:.8em;
		border:solid 2px; border-radius:55%;
		background:#ea4d4d content-box;
		opacity:0;
		animation: none 1.5s forwards;
		transition:.5s;
	}

	#newsfeed label.notify:after {opacity:1; animation:bounceOut 1.5s infinite}

#newsfeed img {float:left}

header nav > ul li {position:relative; padding:.5rem 3rem .5rem 1rem; border-top:solid 1px rgba(0, 0, 0, .24); font-size:.8rem}
header nav > ul li:first-child {border:0}
header nav > ul li.emphasis {font-weight:700}
	header nav > ul li a {color:#d68824; text-decoration:underline}
	header nav > ul li b {color:#ea4d4d}
	header nav > ul li span.icon-cancel {position:absolute; top:.5rem; right:.5rem; font-size: 1rem; opacity:.54; cursor:pointer; transition:.3s}
	header nav > ul li span.icon-cancel:hover {color:#ea4d4d; opacity:1}





main {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-align-items:flex-start; align-items:flex-start;
	position:absolute; z-index:0; top:0; left:0;
	width:110vw; height:100%; padding:5.2rem 10vw 0 0;
	overflow-y:auto; overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	-webkit-perspective:1px; perspective:1px;
	-webkit-perspective-origin:0 0; perspective-origin:0 0;
	-webkit-transform-style:preserve-3d; transform-style:preserve-3d;
}




@media all /* Login and Register */
{
#logreg {
	position:absolute; z-index:7; top:5.2rem; right:0; bottom:0; left:0;
	overflow:auto;
	text-align:center;
	padding:1rem 0;
	background-color: rgba(0, 0, 0, .36);
}

#logreg .icon-cancel {position:absolute; z-index:1; right:.5rem; top:.25rem; font-size:1.2rem; color:rgba(0, 0, 0, .54); cursor:pointer; transition:.3s}

#logreg .icon-cancel:hover {color:rgba(0, 0, 0, .87)}

#logreg form {
	position:absolute; top:1rem; right:0; left:0;
	width:20rem; overflow:hidden;
	margin:0 auto; padding-bottom:1.5rem;
	border-radius:.24rem;
	color:rgba(0, 0, 0, .87);
	background:#fff;
	box-shadow:1px 1px 3px 1px rgba(0, 0, 0, 0.36)
}

#logreg form h2 {padding:1rem}
#logreg form h2 + span {
	display:block;
	margin:0 0 1rem; padding:0 1rem;
	font-size:.9rem;
}

#logreg input, #logreg button, .yn button {display:inline-block; width:18rem; margin:1rem 1rem .5rem}

#logreg input {padding:.75em 1em .75em 3em}
#logreg input[name="password"] + p.hint {height:0; overflow:hidden; padding:0 1rem; text-align:left; opacity:0; transition:.5s}
#logreg input[name="password"]:focus + p.hint {height:3em; opacity:.54}
#logreg input.match {
	background:
		url(/img/ico/ok.svg) no-repeat 100% 50% / auto 80%,
	url(/img/ico/pass.svg) no-repeat .7em 50% / auto 60%;
}

#logreg button {width:15rem; font-size:1.1rem}

#logreg form > span {display:inline-block; position:relative; opacity:1}

#loginform [name="password"] + .hint {display:block; margin:0 1rem 1rem; text-align:right}

#logreg input.link {display:inline; width:auto; margin:0; padding:0; border:0; color:#d68824; font-weight:600; text-decoration:underline; cursor:pointer}

#accountform label {display:block; margin:1rem; text-align:left}
#accountform input.hidden + label:before {
	content:'';
	display:inline-block;
	width:1.2em; height:1.2em;
	margin-right:.75em;
	vertical-align:middle;
	border:solid 1px rgba(0, 0, 0, .54); border-radius:.2rem;
	transition:.3s;
}

#accountform input.hidden:checked + label:before {
	content: '\2713';
	border-color:rgba(0, 0, 0, 0);
	background:#ffd05c;
	text-align:center;
}

}




#bg {
	position:absolute; z-index:0; top:0; left:0;
	width:100.5vw; height:30vw; min-height:42rem;
	-webkit-transform-origin:0 0 0; transform-origin:0 0 0;
	-webkit-transform-style:preserve-3d; transform-style:preserve-3d;

	-webkit-transform:translate3d(0, -5rem, -1.5px) scale3d(2.5, 2.5, 2.5);
	transform:translate3d(0, -5rem, -1.5px) scale3d(2.5, 2.5, 2.5);

	box-sizing:content-box;
	overflow:hidden;
}

#bg:before {
	content:'';
	position:absolute; top:-1rem; right:-1rem; bottom:-1rem; left:-1rem;
	box-shadow:inset 0 0 100vw #110;
	background:url(/img/b_bg.jpg) 50% 50% / cover no-repeat #240;
	-webkit-filter:blur(5px); filter:blur(5px);
	/*animation:movie 60s infinite alternate;*/
}

#bg img {position: absolute; top:-101vh; left:-101vw; opacity:0.01}

#cbase, #content {-webkit-flex:1 0 auto; flex:1 0 auto; width:100vw; padding:0 5vw}

#teago {
	width: 100vw;
	padding:0 5vw;
	background: rgba(255, 255, 255, .45);
}
#teago span {display:inline-block; min-width:20%; margin:0 1rem; white-space:nowrap}



@media all /* Carousel */
{
#cbase, #content {
	display:-webkit-flex; display:flex;
	position:relative;
}
#cbase {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	-webkit-align-items:center; align-items:center;
	max-height:30vw; min-height:15rem;
	margin:1rem 0;
	overflow:hidden;
}

#cbase > span {
	position:absolute; z-index:1; top:25%; left:0;
	padding:1rem;
	border-radius:100%;
	font-size:3rem; line-height:1;
	background:rgba(0, 0, 0, .5);
	color:#fff;
	opacity:.4;
	cursor:default;
	transition:opacity .3s;
}
	#cbase > span:before, #cbase > span:after {line-height:1}

#cbase > span:last-child {left:auto; right:0}
#cbase:hover > span {opacity:.87; cursor:default}

#carousel {
	-webkit-flex:100 0 auto; flex:100 0 auto;
	display:-webkit-flex; display:flex;
	-webkit-align-items:flex-start; align-items:flex-start;
	position:relative;
	text-shadow:1px 1px rgba(0, 0, 0, .38)
}
#carousel figure, #carousel > a {
	-webkit-flex:0 1 auto; flex:0 1 auto;
	position:relative;
	width:16vw; min-width:12rem; max-width:17rem;
	margin:1vw;
	text-align:center;
}
#carousel * {-khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none; transition:all .3s}

#carousel .img, #carousel > a:before {
	width:12vw; height:12vw;
	min-width:10rem; min-height:10rem;
	max-width:15rem; max-height:15rem;
	margin:0 auto;
	border:solid 1px rgba(0, 0, 0, .24); border-radius:100%;
	transition:all .3s
}

#carousel figcaption {margin:1vw 0 0}
#carousel figcaption a, #carousel figcaption time {font-weight:700; color:#fff; opacity:.75}
#carousel figcaption a {display:block; white-space:nowrap; text-transform:capitalize; overflow:hidden; text-overflow:ellipsis}
#carousel figcaption time {font-weight:300}

#carousel figure:hover .img, #carousel > a:hover:before {box-shadow:0 0 20px #fec}
#carousel figure:hover a {opacity:1}

#carousel > a {
	padding: 0;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	transition: all .3s
}

#carousel > a:before {
	display:-webkit-flex; display:flex;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	background: rgba(255, 255, 255, .2);
	border: solid 3px;
	font-size:calc(3rem + 3vw);
	margin-bottom: 1rem;
}

#carousel > a:hover {color:#fb0}

#cbase.fold {max-height:0}

}


#content {
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:flex-start; align-items:flex-start;
	min-width:320px; max-width:80rem;
	margin:0 auto; padding-bottom:7rem;
}

#filter {

	-webkit-flex:1 1 auto; flex:1 1 auto;
	max-width:15rem;
	min-width:12rem;

	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:space-around; justify-content:space-around;
	-webkit-align-items:center; align-items:center;
	margin:.5rem 0; padding:1rem 0;
	border-radius:.24em;
	background:#f9f7ef;

}
	#switch {display:none}
#filter form {flex:1 1 auto; min-width:12rem; max-width:none; height:auto; padding:0; margin:0 1rem}
#filter form .fieldset {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-align-items:flex-start; align-items:flex-start;
}

#filter form label {flex:0 1 120px; width:120px; min-width:120px; height:1.3em; margin:.5rem; padding:0; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; cursor:pointer; -webkit-user-select:none; user-select:none; font-size:.8rem; font-weight:400; transition:all .3s}
#filter input[type="checkbox"] {display:inline-block; width:auto; margin-right:.25rem}
#filter form label:hover {color:#ea4d4d}
#filter #options button {width:auto; min-width:12rem}
/* See .badge classes */


#content h1.white {flex-basis:100%; color:#fff; text-align:center; text-shadow:1px 1px 0 rgba(0, 0, 0, .54)}
	#content h1.white b {color:#fb0}

.tiles h1 {margin-right:auto; text-shadow: -1px -1px 1px rgba(255, 255, 255, .7)}
#tabs {
	display:-webkit-flex; display: flex;
	-webkit-justify-content: space-between; justify-content: space-between;
	-webkit-align-items: center; align-items: center;
	margin-left: 1rem;
	padding: .25rem .5rem;
	border-radius: .24rem;
	background: rgba(255, 255, 255, .5);
}
#tabs label {
	-webkit-flex:0 1; flex:0 1;
	margin:0 .5rem; padding:.5rem;
	white-space:nowrap;
	background:linear-gradient(0deg, #ea4d4d .1rem, transparent .2rem) no-repeat 50% 100% / 0;
	transition:.3s
}
#tabs label:before {margin-right:.5em}

input[name="group"], #filter-switch {display:none}
input#tried:checked ~ .tiles [for="tried"],
input#recipes:checked ~ .tiles [for="recipes"],
input#recent:checked ~ .tiles [for="recent"],
input#popular:checked ~ .tiles [for="popular"],
input#faves:checked ~ .tiles [for="faves"] {font-weight:700; background-size:100%}

input#faves:checked ~ .tiles [for="faves"]:before {color:#ea4d4d}

.tiles {
	-webkit-flex:1 0; flex:1 0;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-align-items: flex-start; align-items: flex-start;
	-webkit-justify-content:flex-start; justify-content:flex-start;
	width:auto; max-width:48rem;
	margin:1rem 0 0 2rem;
}

input[name="group"] ~ .tiles > article {
	-webkit-order:2; order:2;
	display:none;
	max-height:0; margin:0;
	overflow:hidden;
	opacity:0;
	transition:.5s
}

input#tried:checked ~ .tiles article.tried,
input#recipes:checked ~ .tiles article.recipes,
input#recent:checked ~ .tiles article.recent,
input#popular:checked ~ .tiles article.popular,
input#faves:checked ~ .tiles article.faves {-webkit-order:1; order:1; display:flex; max-height:none; margin:1rem 0; overflow:visible; opacity:1}



article, .tiles .recipe.win, .review, .subscribetile {
	-webkit-order:1; order:1;
	-webkit-flex:1 1 auto; flex:1 1 auto;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-align-items:flex-end; align-items:flex-end;
	/* width:39vw; max-width:39rem; min-height:20rem;*/
	margin:1rem 0;
	border-radius:.24rem;
	line-height:1.5;
	background:#f9f7ef;
	box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38);
	transition:all .5s;
}
/* article:hover, .tiles .recipe.win:hover {box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24)} */
article:last-child {margin-bottom:4rem; /* / -webkit-align-self:flex-start; align-self:flex-start /* */}

#content > h1.white + article, article.full ~ h1.white ~ article {-webkit-order:unset !important; order:unset !important}

.subscribetile {
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:space-between; justify-content:space-between;
	-webkit-align-items:stretch; align-items:stretch;
	padding:1rem 1.5rem;
	background: #ffd05c;

}

	.subscribetile div, .subscribetile hgroup {
		position:relative;
		-webkit-flex:1 1 auto; flex:1 1 auto;
		width:48%; min-width:240px;
		display:-webkit-flex; display:flex;
		-webkit-align-items:center; align-items:center;
	}

	.subscribetile input {
		-webkit-flex:1 1 auto; flex:1 1 auto;
		width:100%; height: 2.5em;
		padding:.75em 7.5em .75em 3em;
		border:0; border-radius:2.5em;
		background-color:#fff;
	}
	.subscribetile button {position:absolute; right:0; z-index:1}


	.subscribetile hgroup {-webkit-flex-flow:row wrap; flex-flow:row wrap}
	.subscribetile hgroup > * {width:100%}


.recipe.win {max-width:60rem}
	.recipe.win:before {
		content:url(/img/medal.svg);
		position:absolute; top:0; right:0; z-index:1;
		width:15vw; max-width:3.5rem;
		transform:translate3d(-15%, -15%, 0)
	}

article hgroup {
	-webkit-order:2; order:2;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:space-between; justify-content:space-between;
	padding:1em 3em 1em 1.5em;
}
	article h1 {
		-webkit-flex:1 0 100%; flex:1 0 100%;
		display:-webkit-flex; display:flex;
		margin:0 0 .5rem;
		font-size:1.8em;
		text-transform:capitalize;
	}
	article time {font-size:.8em; opacity:.54}

article > * {-webkit-flex:0 1 auto; flex:0 1 auto; width:calc(100% - 15rem)}

article.quote {position:relative; background:#def}
article.quote:before {
	content:''; 
	position:absolute; bottom:.5rem; right:5rem; z-index:0; 
	width:7rem; height:8rem; 
	background:url(../img/teachef.svg) no-repeat 0 50% / cover;
	transform: rotateZ(-10deg);
	transform-origin: 50% 50%;
	opacity:.75
}
article blockquote {
	position:relative; z-index:1;
	width: 90%;
	margin: 1em auto 1rem;
	text-align:center; font: 400 3rem/.8 'Allura', cursive
}
	article blockquote i {margin:1em 0 0; float: right; font-size:2rem; font-family:inherit}

article > figure:not(.author) {
	-webkit-order:1; order:1;
	-webkit-flex:1 1 100%; flex:1 1 100%;

	position:absolute; top:0; left:0; z-index:1;
	width:15rem; /* max-width:15rem; min-width:6rem; */
	height:100%; min-height:100%;
}

	article > figure:not(.author) .fotorama,
	article > figure:not(.author) .fotorama__wrap {height:100%}

	article > figure:not(.author) .fotorama__wrap {display:flex; flex-flow:column;}
	article > figure:not(.author) .fotorama__stage {flex:1 0 auto}
	article > figure:not(.author) .fotorama__stage img {height:100% !important; object-fit:cover}

article .categories, figure > .badge {font-size:1em; top:.5em; left:-.5em}
article a.img {position:absolute; top:0; right:0; bottom:0; left:0}
article a.img[name] {cursor:default}

article section {
	-webkit-order:3; order:3;
	-webkit-flex:1 1; flex:1 1;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column; flex-flow:column;
	padding:1em 1.5em;
	overflow:hidden;
}


.author {
	display:-webkit-inline-flex; display:inline-flex;
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-align-items:center; align-items:center;
	padding:1em 1.5em 2em;
	font-size:.9em;
}
	.author.about {-webkit-order:6; order:6}
	.author:not(.about) {flex-flow:row wrap; white-space:nowrap; padding:0}
	.author img {width:2.5rem; height:2.5rem; margin:0 1rem 0 0; border-radius:55%}
	.author a {color:#ea4d4d; margin-right:1rem}
	.author a:before {content:'by '}

article p {font-size:1em; hyphens:auto}
article div p {margin:0 0 1em}
	article a.more {float:right; margin:.5em 0 0; color:#ea4d4d; opacity:.75; font-weight:700; transition:opacity .3s}
	article a.more:hover {opacity:1}




.line {
	-webkit-order:4; order:4;
	display:-webkit-flex; display:flex;
	-webkit-flex-wrap:wrap; flex-wrap:wrap;
	-webkit-justify-content:space-between; justify-content:space-between;
	-webkit-align-items:flex-end; align-items:flex-end;
	padding:1em 1.5em;
	font-size:.9em;
}
	.recipe .line .stars {margin-left:0; font-size:.9em}
	.recipe .line i, .recipe.brief .prep span {white-space:nowrap}
	.recipe .prep span:last-child {margin-left:1rem}
	.recipe .prep span:before {opacity:.36}

.recipe .line + hr {-webkit-order:5; order:5}

.user .line b {white-space:normal}

.comment {
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-align-items:flex-start; align-items:flex-start;
}

.review hgroup {
	-webkit-flex-direction:column; flex-direction:column;
	-webkit-align-items:flex-start; align-items:flex-start;
}

#similar {
	display:-webkit-flex;display:flex;
	-webkit-flex-wrap:wrap;flex-wrap:wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:flex-start;align-items:flex-start;
	width:100%; max-width:60rem;
	margin:2rem auto
}
#similar h2 {-webkit-flex-basis:100%; flex-basis:100%}

#similar article {-webkit-flex:1 1; flex:1 1; -webkit-flex-flow:row nowrap !important; flex-flow:row nowrap !important; -webkit-align-items:stretch !important; align-items:stretch !important; width:28rem; min-width:40%; max-width:50%; margin:.5rem}


#similar article > figure:not(.author) {position:relative; -webkit-flex:0 0 25%; flex:0 0 25%; width:25%; min-width:25%; height:auto; margin:0}
#similar article > section {display:block; width:75%}
#similar article .line {padding:1rem 0 0}
#similar article h1 {font-size:1.2em}
#similar article h1 a {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* FORMS */
@media all {
span.image {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column; flex-flow:column;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	height:30vw; width:30vw;
	min-height:10rem; min-width:10rem;
	max-height:16rem; max-width:16rem;
	background:transparent 50% 50% / cover;
	margin:1rem auto; padding:.5rem;
	border:solid 1px #777; border-radius:.5rem;
	text-align:center;
	font-size:2rem;
	overflow:hidden;
}

.account span.image, .user span.image {border-radius:100%}

span.image i {font-weight:900; color:#fff; text-shadow:1px 1px 2px #000; opacity:.75}

span.add {border:dashed 3px rgba(0, 0, 0, .24)}
span.add i {color:rgba(0, 0, 0, .24); text-shadow:none}

.forms button {margin:1rem .5rem}

.forms .autocomplete b {display:inline-block; height:25px; width:auto !important; background:#e9b876; border:1px solid #efb66b; border-radius:12px; box-shadow:0 -5px 5px 3px #ce7e22 inset; color:#fff; font-weight:700; font-size:12px; line-height:25px; margin:20px 10px 0 0; cursor:pointer; padding:0 15px; white-space:nowrap; text-decoration:none; text-transform:uppercase}


.forms {display:block; margin:1rem auto; padding:1rem; min-width:300px; max-width:70vw; text-align:center}
#img-form {background:rgba(159, 152, 53, .15); border-radius:.24rem}
#img-form .error {position:absolute; top:40%; left:0; z-index:4; padding:.5rem 0; background:rgba(0, 0, 0, .75); font-style:normal; border-radius:.24rem}
#hello #img-form {background:transparent}
.tmp-img {position:relative; display:inline-block; height:16rem; width:16rem; margin:1rem; border-radius:.24rem}
.forms .tmp-img b.icon-del {display:block; position:absolute; top:-.5rem; right:-.5rem; font-size:2rem; line-height:1; border:0; border-radius:100%; background:#e2e1ca; color:rgba(0, 0, 0, .75); cursor:pointer; transition:all .3s}
.forms .tmp-img b.icon-del:before {line-height:inherit}
#hello .tmp-img b.icon-del {background:#fff}
.tmp-img b:hover {color:rgba(0, 0, 0, 1)}

.forms .tmp-img fieldset {position:absolute; bottom:-1.5rem; left:0; right:0; text-align:center; background:#fff; border-radius:.24rem}
.forms .tmp-img fieldset label {display:inline-block; cursor:pointer; transition:all .3s}
.forms .tmp-img fieldset label:hover {color:#d68824}






.forms .img_url {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	width:100%
}
.forms .img_url b {-webkit-flex-basis:100%; flex-basis:100%}
.forms .img_url input {-webkit-flex:1 0 100%; flex:1 0 100%; height:3rem; border-radius:3rem; font-weight:300}
.forms .img_url span {position: absolute; right: 0; bottom: 0; height:3rem; margin:0 0 0 .5rem; line-height:3rem}


#account-form {margin-top:0; padding-top:0}
#account-form span.icon-power {text-decoration:underline}
#account-form span.icon-power:hover {color:#a20; cursor:pointer}


.forms label, .forms .label {display:block; margin:1rem 0 0; font-weight:700; text-align:left}
.forms input, .forms textarea, .forms select, .forms .autocomplete {display: block; width: 100%}

.forms fieldset {border:0; margin:0}
#uploader, .hidden {display:none !important}
#forupload {
	display:block;
	position:relative;
	width:16rem;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
}
#uploadFile {position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; opacity:0; outline:none; border:0; cursor:pointer}



#forupload span.loading:before {
	content:'\e819';
	display:block;
	text-align:center;
	font-family:'ico'; font-size:4rem;
	color:rgba(0, 0, 0, .24);
	-webkit-animation: bounce 1s linear both infinite; animation: bounce 1s linear both infinite;
}

#forupload span.loading:after {
	content:'loading...';
	display:block;
	text-align:center;
	color:rgba(0, 0, 0, .24);
}


#forupload span.loading i {display:none}

.forms fieldset input {display:inline; width:auto; min-width:auto; margin:0 1rem 0 0}
.forms fieldset label {display:block; font-size:.8rem; font-weight:300; margin:0; padding:.2rem 1rem}

.forms .inline label, .forms .inline input {display:inline-block; width:auto; white-space:nowrap}

.error {color:#e20 !important}
.error-field {background:rgba(255, 0, 0, .1) !important}

.forms .icon-del {display:none; position:absolute; top:2rem; right:1rem; line-height:1; font-size:2.6rem; color:#dc4a38; background:#fff; border:solid 1px #fff; border-radius:100%; cursor:pointer; z-index:2}



#review-form .stars {font-size:2.5rem; letter-spacing:.3rem; margin: 0 0 1rem; color:rgba(0, 0, 0, .24); cursor:pointer; user-select:none; -ms-user-select:none; -moz-user-select:none; -webkit-user-select:none}
#review-form .stars:before, #review-form .stars:after {content:''; position:absolute; left:-1em; height:1.3em; width:1em}
#review-form .stars:after {left:auto; right:-1em}


.popupform {text-align:center}

.popupform textarea, .popupform input {display:block; width:100%; height:10rem}
.popupform input {height:auto; margin:1rem 0; text-align:center}
.contactus input {text-align:left}
.popupform fieldset {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row nowrap; flex-flow:row nowrap;
	-webkit-justify-content:space-around; justify-content:space-around;
	max-width:280px;
	margin:auto
}
.popupform fieldset input {-webkit-flex:0 1 auto; flex:0 1 auto; min-width:auto; max-width:7rem}

.popupform [name='code'] {width:280px; margin:1rem auto 0}

.popupform .or {display:block; width:2rem; height:2rem; margin:0 auto 1rem; line-height:2rem; background:rgba(0, 0, 0, .54); color:#fff; border-radius:100%; text-align:center; font-size:.8rem; font-weight:900}

		p.badge_exm {
			display:-webkit-flex; display:flex;
			-webkit-flex-flow:row wrap; flex-flow:row wrap;
			-webkit-justify-content:center; justify-content:center;
			margin:0 0 1rem;
			text-align:left;
		}
		p.badge_exm > span {-webkit-flex:1 1; flex:1 1; min-width:280px}
		p.badge_exm:before {content:''; -webkit-flex:0 1 121px; flex:0 1 121px; height:72px; margin:.25rem 1rem; background:url(/img/badge_exm.png) no-repeat 0 0 / auto 72px}
		p.badge_exm.both:before {-webkit-flex:0 1 256px; flex:0 1 256px}

.popupform p.left {margin:0 .5rem 1rem; text-align:left}




fieldset.inline {text-align:left}
fieldset.inline .label {display:inline-block}
#hours, #minutes, #servings {width:4.3rem; margin:0 0 0 .5rem}
label.inline input {font-weight:initial}

}



/* PAGE */
@media all {
article.full {
	-webkit-order:unset; order:unset;
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-align-items:flex-start; align-items:flex-start;
	width:100%; max-width:60rem;
}

article.full > *, article section hgroup {-webkit-order:unset; order:unset; width:auto}

article.thx, article.thx p[align='right'] {padding:1rem}
article.thx figure {display:none}

article .sharing {display:flex; margin:0 1rem 1rem}
	article .sharing > * {
		flex:0 1 6rem;
		display:inline-flex;
		align-items:center;
		width:6rem; min-width:6rem; height:2.5rem;
		margin:0 1rem .5rem 0;
		overflow: hidden;
		border-radius:2.5rem;
		cursor:pointer;
		box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24);
		transition:.3s;
	}
	article .sharing > *:hover {box-shadow:3px 3px 5px -1px rgba(0, 0, 0, 0.38)}
		article .sharing span:before {
			-webkit-flex:0 0 2.4rem; flex:0 0 2.4rem;
			width:2.4rem; height:2.4rem; line-height:2rem;
			border:solid .3rem transparent;
			border-radius:55%;
			background:#fff content-box;
		}
		article.user .sharing span {
			flex: 0 0 2.4rem;
			min-width: 2.4rem;
		}
		article.user .sharing:before {content:none; -webkit-order:2; order:2; height:1px; width:100%; min-width:100%; margin:1rem 0 0}
		article .sharing a {-webkit-order:7; order:7; width:auto; min-width:10.7rem; font-weight:600}
		article .sharing a:before {margin:0 .25rem 0 -.75rem; font-size:2.4rem}
		article .sharing a.icon-teachef:before {margin:-.25rem .25rem 0 -.75rem; font-size:1.8rem}
		article .sharing .icon-twi {-webkit-order:3; order:3; color:#fff; background:#55acee}
		article .sharing .icon-twi:before {color:#55acee}
		article .sharing .icon-fb {-webkit-order:4; order:4; color:#fff; background:#3b5998}
		article .sharing .icon-fb:before {color:#3b5998}
		article .sharing .icon-pinterest {-webkit-order:5; order:5; color:#fff; background:#cc2127}
		article .sharing .icon-pinterest:before {color:#cc2127}
		article .sharing .icon-print {-webkit-order:6; order:6; background:#ffd05c}


article.full > figure:not(.author) {
	-webkit-order:unset; order:unset;
	flex:0 1 32vw;
	position:relative;
	width:32vw; min-width:10rem; max-width:20rem;
	padding:0; margin:0 0 1rem;
	text-align:center;
}

article.full section {padding:0}

article.full > #summary {display:block}
article.full > #summary .prep {display:block; margin:1rem 0 0; text-align:right}

article.full > div {flex:1 0 100%; display:flex; padding:1rem 2rem}
article.full > div > h3 {
	-webkit-flex:0 1 8rem; flex:0 1 8rem;
	width:8rem; min-width:8rem;
}
article.full > div > div {flex:0 1 40rem;}

	article.edit h1 {margin:1rem 0 0; -webkit-justify-content:center; justify-content:center;}
	article.edit h1 .error {font-style:italic; font-weight:300; font-size:1rem}
	article h1 sup {-webkit-flex:0 0 auto; flex:0 0 auto; height:1.3em; margin:0 0 0 .5rem; cursor:pointer}

article .fotorama__stage {border-radius:.24rem 0}

	figure > [class*=top] {
		position:absolute; z-index:1; top:-.5rem; right:-.5rem;
		width:6em; padding:.2em .4em;
		color:#fb0; background:#332;
		border:solid .01em #332;
		border-radius:.24rem;
		box-shadow: 0 .2rem 1rem #fec;
		text-align:center;
		font-size:1rem; font-weight:900; text-decoration:underline
	}
	figure.gallery > [class*=top] {right:auto; left:-.5rem}
	figure > [class*=top]:before {content:'BEST'; color:#fff; margin:0 auto}
	figure > .topN:before {content:'#'}
	figure > [class*=top]:after {content:''; position:absolute; bottom:-1.4em; left:0; border-style:solid; border-width:.7rem 3rem; border-color:#332 transparent transparent}


article.user {
	justify-content: center !important;
	align-items: center !important;
}
article.user section {padding:1rem}
article.user section p {flex-basis:100%; margin:0 0 1rem;}
article.user section p b {color:#ea4d4d}

article.user figure {
	order: unset !important;
	height: unset !important;
	text-align:center;
}

.badges {
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
}
.badges img {
	width:10vw; min-width:3rem; max-width:5rem;
	height:10vw; min-height:3rem; max-height:5rem;
	margin:0 .5vw
}




article.account {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:flex-start; align-items:flex-start;
}

article.account h1 {-webkit-flex:1 0 100%; flex:1 0 100%}

figure.gallery .fotorama__stage {min-height:100%; border-radius:.24rem 0 0 0}
figure.gallery img {border-radius:.24rem; background:rgba(255, 255, 255, .75)}


article.empty {
	-webkit-order:unset; order:unset;
	display:block;
	padding:1rem;
}

article.empty > * {width:auto; margin:initial}
article.empty:before {content:none}

article.full ul {text-align:left; -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2}

	.full li {
		list-style:disc inside;
		break-inside: avoid;
	}

	time {font-weight:400; font-size:.8rem; line-height:1.3rem}
	.hint time {opacity:1}
	small {color:rgba(0, 0, 0, .38); font-weight:300}


li > div {-webkit-flex:1 1; flex:1 1; position:relative; min-width:280px; padding-right:2.5rem; white-space:normal}

li > div hgroup {
	-webkit-flex-flow:row nowrap; flex-flow:row nowrap;
	-webkit-justify-content:flex-start; justify-content:flex-start;
	-webkit-align-items:flex-start; align-items:flex-start;
}

li .ctrl {
	-webkit-flex:0 1 auto; flex:0 1 auto;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	min-width:auto;
	position:absolute; z-index:1; top:.5rem; right:.5rem;
}

li .ctrl [class*='icon-'] {
		width:2rem; height:2rem;
		margin:0 0 .5rem .5rem;
		cursor:pointer
	}

li .ctrl [class*='icon-']:before {
		width:2rem; height:2rem; line-height:2rem;
		margin:0;
		border:solid 1px rgba(0, 0, 0, .54); border-radius:2rem;
		color:rgba(0, 0, 0, .54); background:rgba(214, 136, 36, 0);
		transition:background .3s
	}

li .ctrl [class*='icon-']:hover:before {
		background:rgba(214, 136, 36, .2)
	}

	article p.forms {margin:0; padding:0}


.act {flex:1 0 100%; order:10; display:flex; padding:.5rem 1.5rem; margin-top:1rem; border-top:solid 1px rgba(0, 0, 0, .2)}
.act span {margin-right:2em; color:rgba(0, 0, 0, .54); transition:.3s}
.act span:before {font-size:1.2em; margin-right:.5em}
.act span.icon-like:not([action='readonly']):hover, .act span.icon-like.did,
.act span.icon-dislike:not([action='readonly']):hover, .act span.icon-dislike.did {color:#04f; cursor:pointer}
.act span.icon-comment:hover, .act span.icon-comment.did {color:#4a0; cursor:pointer}
.act span.icon-attention:hover, .act span.icon-attention.did {color:#c20; cursor:pointer}

#add-review {flex:1 0 100%; text-align:center}
#add-review .stars {margin:0 auto .5rem; font-size:3rem}
#add-review .button {margin:1rem auto; font-weight:600}


#reviews  {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	width:100%; max-width:60rem;
}

#reviews .review {min-height:13rem}

#reviews li li {padding-left:2rem}
#reviews li li > article {background:#ece9d4; transform:scale3d(.9, .9, 1) translateX(-5%)}
.comment div {margin-top:1rem}
}


#add-recipe {
	-webkit-order:unset; order:unset;
    -webkit-flex-flow: row wrap; flex-flow: row wrap;
    -webkit-justify-content: space-around; justify-content: space-around;
    -webkit-align-items: center; align-items: center;
    padding: 0 1rem;
    border: dashed 2px #ea4d4d;
}
#add-recipe > * {flex:0 1 auto; min-width:0; max-width:none; margin:1rem 0}
#add-recipe > h1 {width:auto; font-size:3rem; text-align:center}
#add-recipe > p  {width:45%}
	#add-recipe > p a {color:#ea4d4d}
#add-recipe > .button {width:11rem; vertical-align:middle}
#add-recipe > .button:before {margin-right:.25em; font-size:1.5rem; line-height:1}




footer {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row-reverse wrap; flex-flow:row-reverse wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	position:absolute; z-index:1; bottom:0; left:0;
	width:100%; min-width:320px;
	padding:1rem 10vw 1rem 7vw;
	font-size:.8rem;
	background:#0e170b;
}
footer > * {-webkit-flex:0 1 auto; flex:0 1 auto; text-align:center}
footer nav {margin:1rem 2em}
footer #menu {-webkit-order:unset; order:unset; min-width:100%; margin:0}
	footer #menu a {background:no-repeat 0 50% / auto 80%; padding-left:1.5em}

footer a, footer span {display:inline-block; margin:0 1rem; opacity:.75; white-space:nowrap; cursor:pointer; transition:all .3s}
footer a:hover, footer span:hover {opacity:1}
#social a {margin:0 .25rem}



@media all and (max-width: 840px) {

	header > div > span[action="subscribe"]:after {content:'Subscribe'}

	article .sharing span {-webkit-flex:0 0 2.4rem; flex:0 0 2.4rem; min-width:2.4rem}

	#filter {
		flex-flow:column nowrap;
		justify-content:flex-start;
		align-items:stretch;
		position:absolute; top:5rem; right:0; bottom:0; left:0; z-index:5;
		width:100vw; max-width:100vw;
		margin:0;
		border-radius:0;
		transform:translateX(-100vw);
		transition:.5s;
	}

		#switch {
			display:block;
			position:absolute; top:3.3rem; right:-2.4rem; z-index:1;
			width:2.4rem; height:2.6rem;
			border-radius:0 .24rem .24rem 0;
			text-align:center;
			line-height:2.6rem;
			background:#989f35;
			color:#fff;
			backface-visibility:visible;
			transition:.5s;
		}

		#filter #search {flex:0 0 auto}

	#filter-switch:checked ~ #filter {transform:translateX(0)}
		#filter-switch:checked ~ #filter #switch {transform:translateX(-2.4rem) rotateY(180deg)}
		#filter-switch:checked ~ #filter form {overflow:auto}
	#filter hr {flex-basis:auto; width:100%}

	.tiles {width:100%; margin:0}
}

@media all and (max-width: 719px) {

	#bg {min-height:50%}

	#logo {margin-left:4vw}

	#content {padding:1rem 2vw 7rem}

#tabs {margin:0 0 0 auto}


article, .tiles .recipe.win, .review {
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-align-items:flex-start; align-items:flex-start;
}
article > * {width:100%}
article > hgroup {-webkit-order:1; order:1}
article.recipe > .line {-webkit-order:2; order:2}
article > figure:not(.author) {
	-webkit-order:3; order:3;
	flex:0 1 39vw;
	position:relative;
	width:39vw; max-width:none;	min-width:10rem;
	height:10rem;
	padding:0; margin:0 0 1rem;
}
article.review > figure:not(.author) {height:unset}
	article > figure:not(.author) .img,	article .fotorama__stage {border-radius:0 .24rem .24rem 0}

article .sharing span {flex:0 0 6rem; min-width:6rem}

article.full > figure:not(.author) {-webkit-order:3; order:3;}
article.full > * {-webkit-order:4; order:4}
article.full > section {-webkit-order:1; order:1; flex-basis:100%}
#summary {flex:1 1; padding:0 2rem 1rem}


article.user {
    align-items: flex-start !important;
}


article.user .sharing {
	-webkit-flex-wrap:wrap; flex-wrap:wrap;
	-webkit-justify-content:center;
}

	footer {padding:1rem 0}

#similar article {-webkit-flex:1 0; flex:1 0; width:100%; min-width:100%; max-width:none; margin:.5rem 0}

#similar article > figure:not(.author) {position:relative; flex:0 0 25%; width:25%; min-width:25%; height:auto; margin:0; padding:0}
#similar article > figure:not(.author) .img {border-radius:.24rem 0 0 .24rem !important}

}

@media all and (max-width: 600px) {

	#similar article {flex-basis:100%}


html, body {min-width:320px}

header {height:3.2rem}

#logo {margin:-.2em 4vw; font-size:.9rem}
#logo > span {-webkit-transform-origin:100% 75%; transform-origin:100% 75%}

header > div > * {padding:.6em 2vw .6em}

header nav > div {left:auto; right:0}

header [for="srchinp"] {display:block; font-size:1.4rem; line-height:1}

#search {
	position:absolute;
	top:100%; right:120vw; z-index:2;
	width:100vw; max-width:none; height:3.2em;
	overflow:hidden;
	background:#0e170b;
	transition:.3s;
}

#search.open {right:0}

header > div > span[action="subscribe"] {display:none}

header > div > span[action="logreg"] {-webkit-flex:0 1; flex:0 1; white-space:nowrap; font-size:.7em; background:inherit}

#usermenu {background:rgba(0, 0, 0, 0)}
	#usermenu label:before, #usermenu label b {display:none}
	#usermenu img {width:2em; max-width:2em; height:2em; margin:0 .5em}


#newsfeed label {width:2.6em}


#logreg, #filter {top:3.2rem}
	#logreg form {top:0}


main {padding-top:3.2rem}

}


@media all and (max-width: 480px) {

#cbase {min-height:0; max-height:auto; margin:1rem 0 2rem; overflow:visible;}
#cbase span, #cbase figure {display:none}
#carousel > a {display:flex; align-items:center; margin:0 auto;}
#carousel > a:before {
	flex:0 0 4rem;
	width: 4rem; min-width: 4rem;
	height: 4rem; min-height: 4rem;
	margin:0 1rem 0 0;
	border-width:2px;
	font-size: 2rem;
}


	article .categories, figure > .badge {top: -.5em; left:.5rem; font-size:.8rem}
	#hello {padding:3.7rem .5rem .5rem}
	.response {margin:1rem -2rem 0 0}


article, .tiles .recipe.win, .review {
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-align-items:flex-start; align-items:flex-start;
}
article > figure:not(.author), article.full > figure:not(.author) {
	flex:1 0 100%;
	position:relative;
	width:100%; max-width:none; height:auto;
	padding-bottom:73%; margin:0 0 1rem
}
article.full > figure:not(.author), article.review > figure:not(.author) {padding:0}
article > figure:not(.author) .img, article .fotorama__stage {border-radius:0}
.author:not(.about) figcaption {display:flex; flex-direction:column}
	article .sharing span {flex:0 0 2.4rem; min-width:2.4rem}


article.full > div {flex:1 0 100%; display:flex; flex-wrap:wrap; padding:1rem 2rem}
article.full > div > h3 {
	-webkit-flex:1 0 100%; flex:1 0 100%;
	width:100%;
	margin:0 0 1rem;
}

article h1 {font-size:1.5em}

article.user .sharing:before {content:''}

footer a, footer span {margin:0 .25rem; opacity:1}
#menu a {width:1em; overflow:hidden; font-size:.9rem}

}