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:0.2rem;
	font-weight:inherit; font-size:inherit;
	background:transparent;
}

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 .75rem/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 .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:-.5rem}
.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}

#filter label.herbal:hover {color:#06f; border-color:#06f}
#filter label.black:hover {color:#a22; border-color:#a22}
#filter label.oolong:hover {color:#0bb; border-color:#0bb}
#filter label.green:hover {color:#693; border-color:#693}
#filter label.white:hover {color:#eb7; border-color:#eb7}

.badge.herbal, #filter label.herbal.chk {background:#06f; color:#fff}
.badge.black, #filter label.black.chk {background:#a22; color:#fff}
.badge.oolong, #filter label.oolong.chk {background:#0bb; color:#fff}
.badge.green, #filter label.green.chk {background:#693; color:#fff}
.badge.white, #filter label.white.chk {background:#eb7; color:#fff}




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; padding:0 .5em; line-height:inherit; text-transform:lowercase}

body button.gold, body .button.gold {border:0; background:#ffd05c; color:rgba(0, 0, 0, .87) !important}
body button.silver, body .button.silver {border:0; background:#999; color:#fff !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.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, #location > div > 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)}

	#location > div > input::-webkit-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#location > div > input:-ms-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#location > div > input::-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#location > div > input:-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#location > div > 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 .3s;
}

header nav > div {
	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;
}

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

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

#usermenu:focus > input:checked + label:before, #usermenu > input:checked:focus + label:before {transform:rotateX(180deg)}
#usermenu:focus > input:checked ~ div, #usermenu > input:checked:focus ~ div {max-height:15em; opacity:1}

#usermenu img {
	-webkit-flex:0 0 2.5em; flex:0 0 2.5em;
	width:2.5em; height:2.5em;
	margin-right:1em;
	border:solid 1px #fff; border-radius:55%;
}

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

#newsfeed label {
	position:relative;
	width: 3.2em;
	margin: 0;
	background: url(/img/ico/bell.svg) no-repeat 50% / auto 50%
}
	#newsfeed label.notify:after {
		content:'';
		position:absolute; top:33%; left:1.8em; z-index:1;
		width:.6em; height:.6em;
		border:solid 2px #ffd05c; border-radius:55%;
		background:#ea4d4d;
		animation:bounceOut 1.5s infinite;
	}






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(2px); filter:blur(2px);
}

#bg img {position: absolute; top:-101vh; left:-101vw; background:url(/img/teago.png) 0 0 / 0 0; opacity:.01}

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



#teago {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	display: -webkit-flex; display: flex;
	width: 100vw;
	margin:0 0 2rem;
	border-top:solid 1px #0e170b;
	background:#ffd05c;
}
#teago > * {
	display: -webkit-inline-flex; display:inline-flex;
	-webkit-align-items: center; align-items: center;
	min-height:2.5rem;
	padding:0 1rem 0 2.8rem;
	white-space:nowrap;
}
#teago > span:first-child {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-flex-wrap:wrap; flex-wrap:wrap;
	background:url(/img/ico/pig.svg) no-repeat 1rem 30% / auto 60%;
	white-space:normal
}

#teago a {padding-left: 2.4rem; border-left:solid 1px #dba626; background:url(/img/ico/apple.svg) no-repeat 1rem 40% / auto 50%; font-size:.8rem; font-weight:600; opacity:.36; transition:.3s}
	#teago a:before {content:'Apple Store'}
#teago a[href*='google'] {background:url(/img/ico/google-play.svg) no-repeat 1rem 50% / auto 45%}
	#teago a[href*='google']:before {content: 'Google Play'}
#teago a:hover {opacity:1}

#t-go-mob {display:none}



@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 figcaption .by_comp {font-size:.9rem; color:#b0ba3c}
#carousel figcaption .by_comp:before {content:'by'; margin-right:.5rem}



#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:100 0 auto; flex:100 0 auto;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:stretch; align-items:stretch;
	min-width:320px; min-height:auto;
	padding-bottom:7rem;
}


#location, .header {
	-webkit-flex:1 0 100%; flex:1 0 100%;
	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:flex-start; align-items:flex-start;
	position:relative; z-index:1;
	width:60vw; min-width:300px;
	padding:1em 1.5em;
}

#location {max-width:none; padding:1em 14vw}

#location h1, .header h1 {
	-webkit-flex:0 1 auto; flex:0 1 auto;
	color:#fff;
	text-shadow:1px 1px 0 rgba(0, 0, 0, .54)

}
#location h1 b, .header h1 b {color:#fb0}

#location > div {
	-webkit-flex:1 1 320px; flex:1 1 320px;
	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;
	position:relative;
	width:auto; min-width:320px
}

#location button {position:absolute; top:0; right:0; margin:0}
#location > div > input {
	-webkit-flex:1 1 160px; flex:1 1 160px;
	width:auto; min-width:160px;
	margin:0 1rem;
	color:#fb0; border-color:#fff;
	background-color:rgba(0, 0, 0, .54);
}
#location #addrvar {
	-webkit-flex-basis:100%; flex-basis:100%;
	position:absolute; top:3rem; left:0; z-index:1;
	margin:0; padding:1rem;
	background:rgba(0, 0, 0, .75);
	color:#fff;
}
#location #addrvar label:hover {cursor:pointer; background:rgba(255, 255, 255, .25)}


#filter {
	-webkit-flex:1 0 100%; flex:1 0 100%;
	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;
	border-radius:.2em;
	background:rgba(0, 0, 0, .54);

}
#filter fieldset {min-width:300px; margin:.5rem 0}
#filter label {-webkit-flex:0 1; flex:0 1; position:static; display:inline-block; padding:.5rem; border:solid 1px #fff; border-radius:.24rem; color:rgba(0, 0, 0, .54); background:rgba(255, 255, 255, .5); cursor:pointer; -webkit-user-select:none;user-select:none; transition:all .3s}
#filter input {display:none}

#filter .rating label {font:400 .6rem/1rem 'ico'; color:rgba(0, 0, 0, .36)}
#filter label:hover {color:#d68824; border-color:#d68824}
#filter label.chk {color:#fff; background:#d68824}
/* See .badge classes */





article {
	-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:stretch; align-items:stretch; */
	max-width:18vw; min-width:300px;
	margin:1rem;
	border-radius:.2rem;
	box-shadow:1px 1px 10px -3px rgba(0, 0, 0, 0.38);
	line-height:1.5;
	transition:all .5s;
}
article:hover {box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38)}

article > figure {
	min-height:300px; height:18vw;
	position:relative;
	z-index:1
}
article .badge {font-size:1em; top:.5em; left:-.5em; text-shadow:1px 1px rgba(0, 0, 0, .24)}
article a.img {position:absolute; top:0; right:0; bottom:0; left:0}
article a.img[name] {cursor:default}

article section {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	mmin-height:9rem;
	position:relative;
	padding:1em 1.5em;
	overflow:hidden;
	border-radius:0 0 .2em .2em;
	background:#f9f7ef;
}
article hgroup {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:space-between; justify-content:space-between;
	margin:0 0 .5rem;
}
article h1 {
	-webkit-flex:1 0 100%; flex:1 0 100%;
	margin:0 0 .5rem;
	font-size:1em;
	text-transform:uppercase;
}
article a.author, article time, article a.more {font-size:.8em; opacity:.54}
article a.author {margin:0 1.5em 0 0 }
article a.author:before {content:'by '}
article p {font-size:.9em}
article a.more {float:right; margin:.5em 0 0; color:#d68824; opacity:.75; transition:opacity .3s}
article a.more:hover {opacity:1}









/* FORMS */

span.image {
	display:inline-block;
	height:16rem; width:16rem;
	min-height:16rem; min-width:16rem;
	max-height:16rem; max-width:16rem;
	background:transparent 0 / cover;
	margin:1rem auto; padding:4rem 0 0;
	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 {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:.2rem}
#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:.2rem}
#hello #img-form {background:transparent}

.tmp-img {position:relative; display:inline-block; height:16rem; width:16rem; margin:1rem; border-radius:.2rem}
.tea .forms b.icon-del,
.company .forms b.icon-del,
.forms .tmp-img b.icon-del {display:none; position:absolute; top:0; right:-1rem; 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 {display:block; top:-.5rem; right:-.5rem}
.forms .tmp-img b.icon-del:before {line-height:inherit}
#hello .tmp-img b.icon-del {background:#fff}
.tea .forms b.icon-del:hover,
.company .forms b.icon-del:hover,
.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:.2rem}
.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:space-between; justify-content:space-between;
	-webkit-align-items:center; align-items:center
}
.forms .img_url b {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; 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 .autocomplete {position:relative; border:0}
.forms .autocomplete label {display:block; font-size:.8rem; font-weight:300; margin:0; padding:.2rem .5rem}

.forms .autocomplete label,
.forms .autocomplete label.matched input {display:none}

.forms .autocomplete label.matched {
	display:block;
	position:absolute; z-index:1; top:0; left:0;
	width:100%;  overflow:hidden;
	padding:.2rem 0 .2rem 1rem;
	text-align:left;
	background:#ffe;
}
.forms .autocomplete label:hover {background:#fec; cursor:pointer}
.forms .autocomplete label.checked {display:inline; position:static; white-space:nowrap}
.forms .autocomplete label.checked input {display:inline; width:auto; margin:0 .5rem 0 0}

.forms .autocomplete b {
	display:none;
	position:absolute; top:-2.8rem; right:0;
	margin:0; padding:0 1rem;
	border:solid 1px rgba(0, 0, 0, .2); border-radius:.2rem;
	color:#fff; background:#e9b876;
	font-weight:700; font-size:.8rem; line-height:1.7rem;
	white-space:nowrap; text-transform:uppercase;
	cursor:pointer;
}

.forms .autocomplete b:hover {background:#d38932}





.forms fieldset {border:0; margin:0}
#uploader, .hidden {display:none !important}
#forupload {position:relative; display:inline-block; width:16rem; margin:0 auto; 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:'\e80f';
	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}

#addrvar {margin:-1rem 0 0; padding:0 0 1rem; border-radius:.2rem}
#addrvar input {width:auto; min-width:auto}
.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}
#addrvar h3 {text-align:left; margin: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}


.popupform {text-align:center}
.popupform .stars {font-size:2.5rem; letter-spacing:.3rem; margin: 0 0 1rem; cursor:pointer}
.popupform .stars:before, .popupform .stars:after {content:''; position:absolute; left:-1em; height:1.3em; width:1em}
.popupform .stars:after {left:auto; right:-1em}
.popupform textarea, .popupform input {display:block; width:100%; height:10rem}
.popupform input {height:auto; margin:0 0 1rem; 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:8rem; padding:.75rem .05rem}

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

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

/* PAGE */

article.full {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	min-width:320px; width:80vw; max-width:none; height:100%;
	margin:0 auto 7rem; padding:1rem 7vw;
	background:#d9d9da url(/img/bodybg.png);
}

article.full:before {
	content:'';
	position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0;
	border-radius:.2rem;
	background:#ffe;
	opacity:.6
}

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:.2rem;
	box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38);
	text-align:center;
	font-size:1rem; font-weight:900; text-decoration:underline
}
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.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%}



article.full > * {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	-webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; user-select:none;
}
article.full section {max-width:none; padding:1rem 0; background:none; overflow:visible}
article.full section.intro {-webkit-flex-basis:100%; flex-basis:100%; margin:0; padding:0}
article.full section.info {
	display:-webkit-flex; display:flex;
	-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;
	padding:0;
}

article.full a[name] {position:relative; top:-5rem; z-index:-1; display:inline-block; max-height:0}

figure.gallery {-webkit-flex:0 1 280px; flex:0 1 280px; width:15vw; min-width:280px; min-height:280px}
figure.gallery .fotorama__stage {min-height:280px; border-radius:.24rem; background:rgba(159, 152, 53, .36)}
figure.gallery img {border-radius:.24rem; background:rgba(255, 255, 255, .75)}

figure.gallery .icon-cam {
	position:absolute; z-index:1; bottom:-.5rem; right:-.5rem;
	border: solid 3px #f0f0e7; border-radius: 100%;
	cursor:pointer;
}
figure.gallery .icon-cam:before {
	border: solid 1px #777; border-radius: 100%;
	width: 3rem; height: 3rem; line-height: 3rem;
	color:#777; background:#f0f0e7;
	font-size:1.3rem;
	transition:all .3s
}
figure.gallery .icon-cam:hover:before {background:#d68824; color:#fff}

article.full section.info > hgroup {-webkit-flex:1 0 100%; flex:1 0 100%; display:block; text-align:center}
	article.full section.info > hgroup .badge {position:static}
	article.full h1 {font-size:1.5rem; margin:.5rem 0 0; text-align:center}
	article.full h1 sup, article.full h2 sup {vertical-align:top; display:inline-block; width:2rem; height:2rem; margin:0 0 0 .5rem; font-size:1rem; line-height:1.9rem; border:solid 1px #000; border-radius:100%; color:#000; background:transparent; text-align:center; opacity:.54; transition:all .3s}
	article.full h2 sup {font-size:2rem; font-weight:300}
	article.full h1 sup:hover, article.full h2 sup:hover {border:solid 1px #777; color:#fff; background:#d68824; opacity:.75; cursor:pointer}


	article.full p {margin:1rem 0; font-size:1rem}
	article.full hgroup > p {margin:.5rem 0}
	article.full p.cont span {white-space:nowrap}
	article.full p.cont a, article.full p.cont span.error {color:#06f; opacity:.54; transition:opacity .3s; cursor:pointer; text-decoration:underline}
	article.full p.cont a[title=address] {color:#027}
	article.full p.cont span.error:hover {opacity:1}
	article.full p.cont a:before {display:inline-block; width:2rem; height:2rem; margin:0 .5rem; font-size:1rem; line-height:2rem; border:solid 1px #000; border-radius:100%; color:#000; background:transparent; transition:all .3s}
	article.full p.cont a:hover:before {color:#fff; background:#d68824; opacity:.75}

article.full section.info > div {
	-webkit-flex:1 1 540px; flex:1 1 540px;
	min-width:540px;
	display:inline-block;
	padding:1rem 2rem;
}

#chars {
	position:relative;
	-webkit-flex:1 1 280px; flex:1 1 280px;
	width:15vw; min-width:280px;
	margin:0 2rem; padding:1rem;
}

	#chars .icon-cup {position:absolute; z-index:-1; left:-.27em; bottom:-.18em; font-size:16rem; line-height:1; opacity:.1}
	#chars span {font-weight:600}
	#chars .gold {color:#d93}
	#chars .grey {opacity:.24}

/*
	.forms #chars {padding:1rem .5rem}
	#chars select {display:inline-block; width:5.4rem; margin:0; padding:0 .2rem}
	.forms #chars span {padding:.2rem 0}
	.forms #chars .today {background:transparent}
	.forms #chars span b {width:3em}
*/

article.full aside {-webkit-flex:0; flex:0; margin:.2rem 0 1rem; text-align:right}
.fb_iframe_widget {margin:0 auto; width:70vw}
.fb-like, .fb-share-button {width:auto; margin:0 .2rem}

article.company, article.empty, article.changes {
	-webkit-align-self:flex-start; align-self:flex-start;
	height:auto;
	margin:0;
	background:rgba(255, 255, 240, .75)
}
article.empty, article.changes {padding:1rem}
article.company:before, article.empty:before, article.changes:before {content:none}
article.full section.friends {width:100%}

section.friends h3 {margin-bottom:1rem}

	article table {background:#fef8e7; font-size:.8rem; margin:0 auto}
	article th {background:#e19333; color:#fff; text-transform:uppercase; text-align:center; padding:5px 20px}
	article td {padding:5px 20px; text-align:center; vertical-align:middle}
	article td:nth-child(1) {color:#f60}
	article td:nth-child(1), article td:nth-child(2), article td:nth-child(3) {text-align:left}
	article tr:nth-child(2n) td {background:#f7e8cb}
	article tr:hover td {background:#e5c698}
	article .original td {background:#efe}
	article tr.selected td {background:#acf}
	article td b {color:#db6d00; font-weight:900}
	article td a {color:#3a3e45}
	article td .img {position:static; width:3rem; height:3rem; margin:0 .5rem 0 0; border:solid 1px rgba(0, 0, 0, .2); border-radius:.2rem}
	article td.actions {white-space:nowrap; word-spacing:.5rem}


ul {text-align:left}
	li {
		display:-webkit-flex; display:flex;
		-webkit-flex-flow:row wrap; flex-flow:row wrap;
		-webkit-justify-content:center;	justify-content:center;
		padding:1.2rem 0;
		border-bottom:solid 1px rgba(0, 0, 0, .1);
	}
	li:last-child {border:0}

		.i-image {-webkit-flex:0 0 auto; flex:0 0 auto; display:inline-block; width:3rem; height:3rem; overflow:hidden; margin-right:1rem; border:solid 1px rgba(0, 0, 0, .1); border-radius:.24rem; background:border-box no-repeat #fff 50% 50% / cover}
		.i-image.user {
			display: -webkit-inline-flex; display: inline-flex;
			-webkit-justify-content: center; justify-content: center;
			-webkit-align-items: center; align-items: center;
			border-radius: 55%;
			vertical-align: middle;
			margin: 0 1rem 1rem 0;
			text-decoration: none;
			font-weight: 900;
			font-size: 1.2em;
			color: #fff;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, .36);
		}

		li h3, li h4 {font-size:1rem; text-transform:uppercase}
		li h4 {color:#9f9835}
		li p {color:rgba(0, 0, 0, .75)}

		.rate {margin:.25rem 0}
		.rate .stars {top:-2px}

	time {font-weight:400; font-size:.8rem; line-height:1.3rem}
	.hint time {color:rgba(0, 0, 0, .87); 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;
}


.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:0; right:0;
}

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

.ctrl .icon-steepster {background:url(../img/ico/steepster-logo.svg) no-repeat 0 0 / 80%; opacity:.54; transition:.3s}
.ctrl .icon-steepster:hover {opacity:1}

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

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

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

.response {position:relative; margin:1rem; padding:1rem 1.5rem; border-radius:1rem; background:#d1cfa5}
.response:after {content:''; position:absolute; top:0; right:-1.5rem; width:0; height:0; border:solid 1.5rem #fff; border-color:#d1cfa5 transparent transparent}
.response .ctrl {-webkit-flex-flow:row nowrap; flex-flow:row nowrap; top:1rem; right:1rem}

#events time {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
/*	-webkit-justify-content:center; justify-content:center; */
	-webkit-align-items:center; align-items:center;
	position:relative;
	margin:0 1rem; padding:0 1rem 1rem 0;
	text-transform:uppercase;
	opacity:1;
}

#promos li {padding:1rem; border:dashed 4px rgba(214, 136, 36, .2); border-radius:1rem}
#promos li > div {min-width:250px}

#events time:before, #promos li:before {position:absolute; z-index:-1; top:-.5rem; left:-.5rem; font-size:3rem; line-height:1; color:#9f9835; opacity:.15}
#promos li:before {top:auto; left:1rem; bottom:1rem; font-size:7rem}
#promos li:before, #promos h4 {color:#d68824}
#events time span.md {font-size:1.5rem; font-weight:900; color:#d68824}
#events time span.y {font-size:1rem; font-weight:900}
#events time span.hm {font-size:1.5rem; line-height:1; font-weight:300}


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: 1000px) {
	figure.gallery {margin-left:-5vw}
	#chars {margin-right:-5vw}

	#teago {font-size:1.5vw}
}

@media all and (max-width: 725px) {
	figure.gallery {width:90%; margin:0}
	#chars {margin:2rem 0}

	#teago {font-size:2.2vw}
	#teago a {padding-left:2rem}
	#teago a[href]:before {content:''}
}

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

	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}

	#teago {margin:0 0 1rem; font-size:.8rem}
	#teago > * {display:none}
	#teago > span:first-child {display:inherit}
	#t-go-mob {
		display:block;
		position:fixed; bottom:0; z-index:9;
		width:100vw;
		padding:1rem 2rem;
		background:#fff url(/img/teago.png) no-repeat 1.3rem 50% / auto 65%;
		box-shadow:0 -5px 10px -3px rgba(0, 0, 0, 0.38);
		text-align:right;
		font-size:4.3vw;
	}
	#t-go-mob > a, #t-go-mob > b {display:inline-block; margin:1em 0 0 1em; font-size:.75em}

	main {padding-top:3.2rem}

	h2 {text-align:center}

	#bg {min-height:50%}

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

	#location h3, .header h3 {flex-basis:100%}

	article.full section {padding-top:0}
	article.full section.info > div {min-width:280px}

	footer {padding:1rem 0}
}

@media all and (max-width: 460px) {
	#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;
	}

	#location, .header {padding:.5rem}
	#content {padding:0 0 7rem}
	article:not(.full) {flex-flow:row nowrap; min-width:95vw; height:auto; margin:1rem 0; box-shadow:none}
	article:not(.full) figure {width:25vw; min-width:25vw; height:auto; min-height:25vw}
	article:not(.full) figure .img {border-radius:.2rem 0 0 .2rem}
	article:not(.full) section {width:70vw; height:auto; min-height:auto; border-radius:0 .2rem .2rem 0}

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

	article:not(.full) [class*=top] {
		position:absolute; z-index:1; top:.25rem; right:-3.5rem;
		width:auto; padding:0;
		color:#fb0; background:transparent;
		border:0;
		box-shadow:none;
		font-size:.5rem; font-weight:900; text-decoration:underline
	}
	article:not(.full) [class*=top]:before {content:'BEST'; color:rgba(0, 0, 0, .75); margin:0 auto}
	article:not(.full) [class*=top]:after {content:none}

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

}