*, *:before, *:after {box-sizing: border-box;}
article, footer, header,section {display: flex;}
a {text-decoration: none;}
a, a:hover {color: inherit;}


/* ----------------------------------------------------------- global */
body {background: #6B6055; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; scroll-behavior: smooth;}
#container {width: 960px; margin: 0 auto;
	-webkit-box-shadow: 0px 2px 30px -2px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 30px -2px rgba(0,0,0,0.4);
	box-shadow: 0px 2px 30px -2px rgba(0,0,0,0.4);
}

header {height: 80px; position: -webkit-sticky; position: sticky; top: 0; z-index: 999;
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );}

body {font: normal 200 1em/1.5em 'helvetica'; color: white; text-align: left;}
input[type=radio] {display: none;}


/* -------------------------------------------------------- NAV */
nav#top-menu {	width: 798px; height: 80px;
				margin: 0 auto;

				display: flex; 
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
}
		#home {	display: inline-flex;
				flex: 1 0 312px;
			
				text-align: left;
		}
			.logo {	background: url("../images/teahouse-name.svg") no-repeat; 
					width: 150px; height: 26px;
					margin-right: 12px;
			}
			#phone {color: #D49F4B; line-height: 180%;}

		#icon-top {	background: url("../images/teahouse-logo.svg") 50% 0% no-repeat; 
					width: 70px; height: 70px;
		}

		#sub-menu {	flex: 1 0 312px;
					justify-content: flex-end;
			
					text-align: right !important;
		}
			#sub-menu a {margin-right: 24px; color: #fff;}
				#sub-menu a:last-child {margin-right: 0;}

				#sub-menu a:hover {color: #D49F4B;}
.nav-icon {
  margin: 1em;
  width: 40px;
}

.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
  background-color: #fff;
  border-radius: 3px;
  content: "";
  display: block;
  height: 5px;
  margin: 7px 0;
  transition: all .2s ease-in-out;
}


/* NAV-MAIN */
#nav-main	/* container */	
{
flex: 1 0 312px; order: 0;
justify-content: flex-end;
position: relative;
z-index: 999;
top: 0;
right: 0; text-align: right !important;
}
	#nav-main > a
	{
	display: none;
	}
	
	#nav-main li
	{
	position: relative;
	}
 
		#nav-main li a
		{
		color: #fff;
		line-height: 60px;
		margin-right: 24px;
		display: flex;
		}
			#nav-main li a:active
			{
			background-color: none;
			}

			#nav-main span:after
			{
			width: 0;
			height: 0;

			content: "";

			display: inline-flex;
			position: relative;
			
			vertical-align: middle;
			}

	/* first level */
 
	#nav-main > ul
	{
	height: 60px; /* 60 */

	background-color: rgba(0,0,0,0);
	}
		#nav-main > ul > li
		{
		height: 100%;
			display: inline-flex;

		}
			#nav-main > ul > li > a
			{
			height: 100%;

			text-align: right;
			}
				#nav-main > ul > li:not( :last-child ) > a
				{
				}
				
					#nav-main > ul > li:hover > a,
					#nav-main > ul:not( :hover ) > li.active > a
					{
					color: #D49F4B;
					}

	/* second level */
 
	#nav-main li ul
	{
	background-color: #373D0D;

	display: none;
	position: absolute;

	top: 100%;
	}
		#nav-main li:hover ul
		{
		display: block;

		left: 0;
		right: 0;
		}
			#nav-main li:not( :first-child ):hover ul
			{
			left: -1px;
			}
			#nav-main li ul a
			{
			text-align: center;
			padding: 0.75em; /* 15 (20) */
			}
				#nav-main li ul li a:hover,
				#nav-main li ul:not( :hover ) li.active a
				{
				color: #C7D67F; background-color: #4e5520;
				}



/* ----------------------------------------------------------- SECTION */
section	{overflow: hidden; position: relative;}
	article {width: 810px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin: 50px 75px; padding: 6px;}
	.slider article {flex-flow: column;} 
		article.space, div.space {margin-top: 240px;}
	article.right {align-items: flex-end; text-align: right;}
	article.left {align-items: flex-start; text-align: left;}


section.v-notice {background: #a00505; z-index: 100; flex-flow: row wrap; padding: 12px 80px;}
	.v-notice h3, .v-notice p {text-align: center; width: 100%; color: #eabf62;}

section#slider {height: 600px; margin-top: -80px; background-color: #000;}

	section#intro {height: 150px; background-color: #F9F1E4; display: flex; justify-content: center; align-items: center;}
		blockquote {font: italic 200 2em/1.25em "Helvetica", sans-serif; color: #000; text-shadow: 0px 1px 0px #fff; text-align: center;}
	section#voucher {height: 500px; min-height: 500px; background: url("../images/th-voucher-img.jpg") no-repeat, #624B31; background-size: cover; background-position: center; display: flex;  justify-content: center; align-items: center;}

		#voucher article {text-align: left; flex-direction: column;}
			#voucher article h2 {color: #FFF; font-weight: 300; text-transform: none; font-style: italic; font-size: 45px; line-height: 120%; text-shadow: 0 1px 3px rgba(0,0,0,0.5);}
			#voucher article p {max-width: 393px;text-shadow: 0 1px 3px rgba(0,0,0,0.5);}

	section#resdiary {background: #fff; color: #251c14; margin: auto;} /* resdiary widget */
		#resdiary  {height: 100%;}

		#resdiary h2 {color: #ab7821; text-transform: none; width: 100%;}

	section#appstore {background: url("../images/app-background.png") no-repeat right bottom, #D49F4B;} /* appstore links */
			#appstore article {}
				#appstore article h2,
				#appstore article p {color: #251c14; text-shadow: 0 1px 1px rgba(255,255,255,0.5);}
					#appstore article h2{text-transform: none; font-style: italic; width:100%;}

				.app-download {width: 100%; margin-top: 12px;}
				.app-download a {margin-right: 10px;}

	
.heading {position: absolute; top:140px; left: -60px; width: 150px; color: rgba(0,0,0,0.2); transform: rotate(90deg); font: normal 600 2em/1.25em "Helvetica", sans-serif; text-transform: uppercase; z-index: 999;} 

a.th-menus {position: relative; display: inline-flex; margin-right: 12px; margin-bottom: 12px;}
a.th-menus img {width:100%;}
	a.th-menus:after {
		content: ""; display: block; position: absolute; top: 0; bottom: 0; width: 100%;
		background-color: #795852; opacity: 0; 
		-webkit-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
		-moz-transition: visibility 0s linear 0.5s,opacity 0.5s linear;
		transition: visibility 0s linear 0.5s,opacity 0.5s linear;
	}
		a.th-menus:hover:after {opacity: 0.8;}

	.caption {position: absolute; top: 0; bottom: 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; text-align: center; font-size: 11px; font-weight: 400; line-height: 12px; color: #fff; z-index: 10; opacity: 0;}
		.caption:hover {opacity: 1;}

	.shadows {box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.49);}

	section#photo {min-height:640px; background-color: #382C22;}
	section#menus {min-height:600px; background-color: #2B1D1F;}
			#menus article :last-child {margin-right: 0;}

	section#insta {min-height: 492px; background-color: #F2F2F2; color: black;}
		#insta .heading {color: rgba(0,0,0,0.1);}

			#insta article { flex-flow: column;}
				.instagram-link {font: normal 200 2em/1.25em 'Helvetica', sans-serif; color: #D49F4B;margin-bottom: 24px;}
					.instagram-link:hover {color: #2B1D1F;}

footer {	display: flex; flex-flow: column; position: relative; overflow: hidden;
			background: #382C22; color: white; text-align: left !important;
			padding-top: 80px; padding-bottom: 24px; margin-bottom: 20px;
}
#copy {text-align: center; margin-bottom: 150px;}

	#map {width:786px; display: inline-flex; background: #fff; margin: 0 auto; padding: 6px 6px 0px 6px;}
		.google-maps, .tripadvisor {overflow: hidden;}

	footer article {margin: 30px 75px 30px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;}
		.address, .hours, .info {vertical-align: top; text-align: left !important;}
			.info {width: 474px; flex: 6 0 474px; margin-right: 12px;}
			.address {width: 231px; flex: 3 0 231px;}
				.address span {color: #D49F4B;}
				.address p {display: inline;}

	.social {width: 30px; flex: 0 0 30px; display:flex; flex-flow: column nowrap; margin-top: 12px;margin-right: 12px;}
	.social a.icon {width: 30px; height: 30px; display:inline-flex; flex: 0 0 30px; margin-bottom:24px;}

		a.icon.email {background: url("../images/teahouse-icon-email.svg") no-repeat; background-size: cover;}
		a.icon.instagram {background: url("../images/teahouse-icon-instagram.svg") no-repeat; background-size: cover;}
		a.icon.facebook {background: url("../images/teahouse-icon-facebook.svg") no-repeat; background-size: cover;}
			a:hover.icon.email,
			a:hover.icon.instagram,
			a:hover.icon.facebook {background-position-x: -40px !important;}


hr.line {color: #D49F4B;}
hr.line {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(212, 159, 75, 0.7);
    border-bottom: 1px solid rgba(212, 159, 75, 0.3);
	margin: 24px 0;
}
h2 {
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 2.5rem;
	line-height: 120%;
	margin-bottom: 12px;
}
.menu p {margin-bottom: 12px;}

.t-cap {text-transform: uppercase;}


/* -------------------------------------------------------- CAROUSEL */
section#sliders {margin-top: -80px !important;}
#slider .carousel-item {max-height: 550px;}

/* Slider Pagger */ 
.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}
.carousel-indicators [data-bs-target] {
	width: 10px; height: 10px; margin-right: 6px;
	display: inline-block; cursor: pointer;
	border-radius: 2px;
	transform: rotate(45deg);
	background: rgba(255,255,255,0.3);
	border: solid 1px rgba(255,255,255,0.5);
}
	.carousel-indicators li.active {background-color: #fff;}
	.carousel-indicators li:hover, .carousel-indicators li:active {opacity: 1;}

#slider .carousel-caption {bottom: 3rem;}
#slider .carousel-caption h2 {text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);}
#slider .carousel-caption p {text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);}

#slider .btn {margin-top: 12px; border: none; border-radius: 0;}
	#slider .btn-info {color: #fff; text-transform: uppercase; background-color: rgba(203,170,113,0.8);}
#voucher .btn {margin-top: 12px; border: none;}
	#voucher .btn-info {color: #fff; text-transform: uppercase; background-color: rgba(203,170,113,0.8);}

	#slider .btn-info:hover,#slider .btn-info:active,
	#voucher .btn-info:hover,#voucher .btn-info:active {background: rgba(255,255,255,0.2);}

/* -------------------------------------------------------- MENUS */
#menu .carousel-indicators {bottom: -2rem;}
#menu .carousel-inner {width: 80%; margin: 0 auto;}
	#menu .col {margin-bottom: 1rem;}

.card {
	overflow: hidden; height:100%;
	border-radius: 6px; 
	background-color: #897864; border: 3px solid #897864;
}
	.card:hover {background-color: #6a5533; border: 3px solid #6a5533; color: #fff;}

.card .card-body {padding: 1rem; font-size: 1rem;}
.card-title {text-transform: uppercase;}

.card img {max-height: 260px; object-position: top left;}


/* -------------------------------------------------------- MASONRY PHOTO and INSTAGRAM */
.masonry-wrapper {
	max-width: 794px; margin-top: 35px; border: solid 2px #2B221A;
	background:#2B221A;
}

#lightbox-carousel .carousel-item img {width: 100%;}
.photo-thumb {max-width:33.33%; min-height:70px;}
	.photo-thumb:hover {opacity: 0.5;} 
.modal-content {background-color: rgba(0, 0, 0, 0.9);}

.insta-wrapper {
	max-width: 794px; border: solid 3px #fff;
	background: #fff;
}
.insta-wrapper .row .col-6 {padding: 6px;}

/* -------------------------------------------------------- XMAS */
section#xmas {height: 600px; background: url("../images/offer-back-xmas-2025.jpg") no-repeat 0 0, #0e2625; align-items: flex-end;}
section#xmas h2 {color: #edc48d; text-transform: none; font-size: 2rem;} /* xmas xgold lite */
section#xmas p {color: #fff;} /* xmas white */
	section#xmas p span {text-decoration: underline;}
.slide3 {background: url("../images/th-image03-xmas2025.jpg"); left: 200%}
.slide3 .button {background: #d69364; background: rgba(214,147,100,0.8); color:#f7eecd;} /* xmas xgold blk */


/* -------------------------------------------------------- media queries */

@media only screen and (max-width: 480px) {
	#container {width: 100%;}

	article, footer article {width: auto !important; margin: 50px 12px 12px !important; flex-flow: column wrap; flex-basis: auto !important;}
	article.right {align-items: flex-start !important;}
	ul {height: auto;}
	.heading {display: none;} section{overflow: hidden;}
	
	section#appstore {background: #D49F4B;}
	
	/* NAV */

#top-menu {width: 100%; margin-left: 12px !important;}
#home {order:2; position: relative; margin:0; padding:0;}
	#icon-top {display: none; height: 26px;}

#nav-main
{
position: relative; order:1; flex: 1 0 50px !important;
top:0; left:0; padding:0;
}
	#nav-main > a
	{
	width: 30px;
	height: 30px;
	
	text-align: left;
	text-indent: -9999px;
	background: url("../images/menu_link.svg") no-repeat center center;
	top:-5px; left:5px;
	
	position: relative;
	}
		#nav-main > a:hover {opacity:0.7;}
		
		#nav-main:not( :target ) > a:first-of-type,
		#nav-main:target > a:last-of-type
		{display: flex;}

	/* first level */
	#nav-main > ul
	{
	height: auto;
	
	display: none;
	position: absolute;
	background-color: rgba(0,0,0,0.5) !important;
	left: 0;
	}
		#nav-main:target > ul {display: flex;}
			#nav-main > ul > li {width: 100%; float: none;}
	
	#nav-main > ul > li > a {height: auto; text-align: left; padding: 0 1em;}
				
	#nav-main > ul > li:not( :last-child ) > a {}
			#nav-main li a:active {background-color: #2B1D1F !important;}

	/* PHOTO */
	section#photo {padding:0 !important;}
	.masonry-wrapper,.insta-wrapper {max-width: 100%; margin:0;}
	.masonry {columns: 3 !important;}
	.masonry-insta {padding: 12px 0;}
	
	
	/* MENUS */
	.menu-pagination {position: absolute; max-height:100px; left: 12px; top: 60px !important; font-size: 10px; text-align: left;}
	.menu-pagination label {padding: 6px 0px !important; margin: 0px 2px;}
		.menu-pagination label:after {content:""; color: #fff; padding-left: 0;}
	.menu {padding-top: 80px;}

	.card img {max-height: 120px;}
	
	#slider .carousel-caption {bottom: 1rem;}
	#slider .btn {margin-top: 0;}
	h2 {font-size: 2rem;}
	
	.carousel-caption > * {padding: 0;}
	.carousel-control-prev {left: -18px;}
	.carousel-control-next {right: -18px;}
	
#insta article {padding: 0;}
	a.th-menus {margin-right:0}
	/* FOOTER */

footer {padding-top: 0; padding-bottom: 0;}	
	#map {width: auto !important; flex-flow: column wrap; margin: 12px;}
	#map iframe {width: 100% !important; overflow: hidden !important;}
		.address {width: 100% !important;overflow: hidden !important; flex-basis: auto !important; flex-flow: column wrap !important; margin: 24px 0;}
		.info {width: 100% !important;overflow: hidden !important; flex-basis: auto !important; flex-flow: column wrap !important; margin: 0 0 24px;}
		.social {width: 100%; height: 30px !important; flex-flow: row nowrap !important; flex-basis: auto !important;}
		.social a.icon {margin-right: 12px;}
		#copy {text-align: left; margin-left: 12px; margin-bottom: 24px;}
}