/*	main */
	main {
		background-color: var(--gray-100);
	}

	main h3 {

	}

	main h3 span {
		color: var(--blue);
	}

/*	aside */
	main aside, main section {
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 16%);
	}

	main aside {
		overflow: hidden;
		height: 0px;
		transition: height 0.5s ease 0s;
		position: relative;
	}

	main aside.open {
		overflow-y: auto;
		height: calc(80vw);
		max-height: 100vh;
		transition: height 0.5s ease 0s;
		z-index: 9;
	}

	.aside-toggle {
		position: relative;
		display: flex;
		justify-content: center;
	}

	.aside-toggle > button {
		border: solid 2px var(--blue-dark);
		border-radius: 4vw;
		background-color: #fff;
		padding: .5rem 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: -4vw;
		width: 16vw;
		height: 8vw;
		color: var(--blue-dark);
	}

	#map-search-wrap {
		overflow: hidden;
		max-height: 70px;
		position: sticky;
		top: 0;
		z-index: 1;
		box-shadow: 3px 2px 4px 0 rgb(0 0 0 / 16%);
		transition: all 0.5s ease 0s;
		background-color: #fff;
	}

	#map-search-wrap.open {
		overflow-y: auto;
		max-height: 80vh;
		transition: all 0.5s ease 0s;
	}

	#map-search-wrap form {
		padding-bottom: 2rem;
	}

	.search-toggle {
		position: sticky;
		top: 70px;
		display: flex;
		justify-content: center;
	}

	.search-toggle > button {
		border: none;
		border-radius: 0 0 .5rem .5rem;
		background-color: #fff;
		padding: .5rem 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 36px;
		color: var(--black);
		background-color: var(--gray-500);
		border-top: solid 1px var(--gray-500);
	}

/*	form */
	main aside .form .form-item {
		border-bottom: solid 1px var(--gray-200);
		margin: 0;
		padding: 1rem;
	}

	main aside .form .form-item:last-child {
		border-bottom: none;
	}

	main aside .form-item label {
		display: block;
		font-size: 1.2em;
		font-weight: 500;
		margin-bottom: .5rem;
	}

	main aside .form-item ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	main aside .form-item ul li {
		flex: 1 1 50%;
		display: flex;
		align-items: center;
		margin: .25rem 0;
	}

	main aside .form-item ul li input[type=radio] {
		margin-right: .25rem;
	}

/*	section header */
	main section header {
		border-bottom: solid 1px var(--gray-200);
	}

	main section header .btns {
		padding: .75rem;
	}

	main section header button {
		margin: 0 .25rem;
	}

/*	section body */
	main section .body .title-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		margin: 1rem;
	}

	main section .body .title-header h3 {
		margin: 0;
	}

/*	dining-list */
	.dining-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.dining-list > li, .swiper-slide > li {
		border-bottom: solid 1px var(--gray-200);
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		transition: all .5s;
	}

	.dining-list > li.selected {
		background-color: var(--blue-light);
		transition: all .5s;
	}

	.dining-list > li:hover {
		cursor: pointer;
	}

	.dining-list > li:hover > .num {
		transform: scale(1.1);
		transition: all .5s;
	}

	.dining-list .num {
		padding-right: 0.5rem;
	}

	.dining-list .num span {
		background-color: var(--blue-dark);
		color: #fff;
		border: none;
		border-radius: 50%;
		font-size: 1rem;
		font-family: var(--font-serif);
		font-weight: 900;
		width: 2rem;
		height: 2rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
	}

	.dining-list .cont {
		flex: 1;
		margin-top: 5px;
	}

	.dining-list .head {
		flex: 1;
	}

	.dining-list h4 {
		margin: 0;
		line-height: 1;
	}

	.dining-list h4 span {
		font-weight: 300;
		font-size: 0.8em;
		color: var(--gray-600);
		vertical-align: 1.5px;
		margin-left: .25rem;
	}

	.dining-list .pic {
		width: 110px;
		height: 110px;
		object-fit: cover;
	}

	.dining-list .loc-info {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: .5rem 0;
	}

	.dining-list .loc-info > div:not(:last-child):after {
		content: '|';
		font-size: 0.5em;
		vertical-align: 2px;
		color: var(--gray-500);
		padding: 0 .35rem;
	}

	.dining-list .tag {
		color: var(--gray-600);
		line-height: 1;
	}

	.dining-list .fav label {
		font-size: 0.75em;
		font-weight: 700;
		color: var(--orange);
		margin-top: 1rem;
	}

	.dining-list .fav ul {
		list-style: none;
		margin: 0 0 0 .5rem;
		padding: 0;
	}

	.dining-list .fav ul li::before {
		content: '✓';
		color: var(--blue-dark);
		margin-right: .5rem;
	}

	.dining-list .fav .other-title {
		margin-left: .5rem;
		color: var(--gray-500);
		font-family: var(--font-condensed);
	}

	.dining-list .price {
		margin-left: .5rem;
    }

	.dining-list .description {
		margin-top: 1rem;
		font-family: var(--font-serif);
		color: var(--gray-600);
	}

	#load-more {
		width: 100%;
		padding: 1rem;
		border: none;
		background-color: var(--gray-200);
		font-weight: 500;
		height: 40px;
	}

	main.map #load-more {
		width: auto;
		background-color: var(--black);
		color: #fff;
		position: absolute;
		border-radius: 2rem;
		padding: 0.5rem 1rem;
		right: 0;
		margin: 1rem;
		z-index: 8;
	}

	@media (min-width: 992px) {
		main.list .dining-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		main.map #load-more {
			top: 80px;
			left: 400px;
			right: initial;
		}
	}

/*	map */
	#map {
		height: 18vw;
	}

	#application.map footer#footer {
		display: none;
	}

	#application.map {
		grid-template-rows: auto 1fr;
	}

	main.map #map {
		height: 100%;
		z-index: 5;
	}

	.view-map, .view-list {
		background-color: var(--blue-dark);
		color: #fff;
		border: transparent;
		border-radius: 2rem;
		padding: .5rem 1rem;
		font-size: large;
		height: 40px;
	}

	.view-map:hover, .view-list:hover {
		color: #fff;
	}

	.view-map {
		position: fixed;
		left: 50%;
		bottom: 2rem;
		transform: translateX(-50%);
		z-index: 8;
	}


	.view-list {
		position: absolute;
		z-index: 8;
		margin: 1rem;
	}

	#swiper {
		position: absolute;
		z-index: 8;
		bottom: 1rem;
		left: 0;
		width: 100vw;
		min-height: 28.88vw;
	}

	.swiper {
		display: flex;
		overflow-x: hidden;
	}

	.swiper .swiper-wrapper {
		align-items: flex-end;
	}

	.swiper .swiper-slide {
		padding: 1rem;
	}

	.swiper .swiper-slide-active > li {
	}

	.swiper .swiper-slide-prev {
		left: 25px;
	}

	.swiper .swiper-slide-next {
		margin-left: -25px;
	}

	.swiper .swiper-slide > li {
		background-color: #fff;
		box-shadow: 3px 2px 4px 0 rgb(0 0 0 / 16%);
		border-radius: 5px;
		max-height: 160px;
		transition: height 5s;
		overflow: hidden;
	}

	@media (min-width: 768px) {
		#application {
		}

		main.list .cont-container,
		main.map .cont-container {
			display: grid;
			grid-gap: 1.5rem;
			grid-template-columns: 250px 1fr;
			padding: 1.5rem 0;
		}

		main section header {
			display: flex;
			justify-content: space-between;
		}

		.view-map-desktop {
			border-left: solid 1px var(--gray-200);
			padding: 0 .75rem;
			display: flex;
			align-items: center;
			font-weight: 500;
		}
		.view-map-desktop img {
			margin-right: .25rem;
		}

		/*.view-map {
			display: none;
		}*/

		#map {
			min-height: 300px;
		}

		main.map {
			display: grid;
			grid-template-columns: 400px 1fr;
			padding: 0;
		}

		main aside {
			height: calc(100vh - 72px);
			overflow-y: auto;
		}

		main.map aside {
			box-shadow: 3px 0px 4px 0 rgb(0 0 0 / 16%);
			
		}

		main.map section {
			box-shadow: none;
		}

		.aside-toggle {
			display: none;
		}
	}

/*	view */
	main.dining-view {
		background-color: transparent;
	}

	@media (min-width: 768px) {
		main.dining-view {
			background-color: var(--gray-100);
			padding-top: 1rem;
			padding-bottom: 3rem;
		}

		main.dining-view .cont-container > header,
		main.dining-view .description,
		main.dining-view div.review,
		main.dining-view .menu-item,
		main.review .review-form,
		main.dining-view .box {
			background-color: #fff;
			box-shadow: 3px 2px 3px 1px rgb(0 0 0 / 16%);
			margin: 1rem;
			padding: 2rem;
		}
	}

	@media (min-width: 992px) {
		main.dining-view ul.menu {
			grid-template-columns: repeat(4, 1fr);
		}
	}

/*	main.menu */
	main.menu {
		background-color: transparent;
		padding-bottom: 3rem;
	}

	main.menu .logo {
		max-width: 100%;
	}

	main.menu header {
		margin: 2rem;
	}

	main.menu header h1 {
		margin: 2rem 0;
		font-weight: 900;
		font-family: var(--font-title);
		color: var(--gray-500);
		margin: 3rem 0 2rem 0;
		font-size: 3rem;
		font-weight: 700;
	}

	main.menu h2 {
		display: flex;
		align-items: center;

		font-family: var(--font-condensed);
		font-weight: 900;
		font-size: 3rem;
		color: var(--gray-900);

		margin: 4rem 1rem 1rem 1rem;

		background-image: linear-gradient(
			-225deg,
			#231557 0%,
			#44107a 29%,
			#ff1361 67%,
			#fff800 100%
		);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;
		text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 2s linear infinite;
	}

	@keyframes textclip {
		to {
			background-position: 200% center;
		}
	}

	main.menu h2 span {
		margin-left: .5rem;

		font-size: 0.8em;
		font-weight: 500;

		flex: 0 0 auto;
	}

	main.menu h2 span:before {
		content: '•';
	}

	main.menu h2 a {
		margin-right: .5rem;
		font-size: 0.8em;
	}

    main.menu .mcat_desc {
        font-size: 0.8em;
        font-style: italic;
        padding: 1rem;
        background-color: var(--gray-100);
        margin: -1rem 0 2rem 0;
    }

	@media (min-width: 768px) {
		main.menu .cont-container,
		header.menu .cont-container {
			max-width: 740px;
		}

		main.menu h2 {
			font-size: 4.5rem;
			margin: 4rem 0 2rem 0;
		}
	}

/*	.menus */
	.menus {
		list-style: none;
		margin: 0;
		padding: 1rem;
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: repeat(2, 1fr);
	}

	/* styling */
	.menus li {
		border: dotted 1px var(--gray-900);
		border-radius: 0.5rem;
		line-height: 1.2;
		transition: all .5s;
	}

	.menus li a {
		display: block;
		padding: 2rem;
		height: 100%;

		color: var(--gray-900);
		font-size: large;
		font-weight: 700;

		transition: all .5s;
	}

	.menus li a span {
		display: block;
		font-weight: 300;
		font-size: 0.8em;
	}

	.menus li.has-bg {
		border: none;
		position: relative;
		overflow: hidden;
	}

	.menus li.has-bg .bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;

		background-size: cover;
		background-position: center;
	}

	.menus li.has-bg a {
		color: #fff;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	}

	.menus li.has-bg a span {
		font-weight: 500;
	}

	/* hover */
	.menus li:hover {
		border: solid 1px var(--black);
		background-color: var(--black);
		transition: all .5s;
	}

	.menus li:hover a {
		color: var(--red-light);
		transition: all .5s;
	}

	.menus li.has-bg:hover a {
		padding-bottom: 5rem;
	}

	.menus li.has-bg:hover {
		border: none;
		background-color: transparent;
		position: relative;
		overflow: hidden;
	}

	.menus li.has-bg:hover .bg {
		border-radius: 0.5rem;
    	animation: imageAnimation 10s;
	}

	/* rcmd */
	.menus li.rcmd {
		grid-column: span 2;
		min-height: 300px;
	}

	.menus li.rcmd a {
		font-size: xx-large;
	}

	@media (min-width: 768px) {
		.menus li a {
			min-height: 150px;
		}
	}

/*	animation */
	@keyframes imageAnimation { 
		0% {
			transform: scale(1);
			animation-timing-function: ease-in;
		}

		30% {
		    transform: scale(1.3) translate(10%, -3%);
		    animation-timing-function: ease-in;
		}

		/*50% {
		    transform: scale(1.3) translate(8%, -2%);
		}*/

		70% {
		    transform: scale(1.3) translate(-3%, 10%);
		    animation-timing-function: ease-in;
		}

		100% {
			transform: scale(1);
			animation-timing-function: ease-out;
		}
	}

/*	ul.menu */
	main.menu ul.menu {
		margin: 0;
		padding: 0;
		padding-bottom: 2rem;
		list-style: none;
	}

	ul.menu li {
		line-height: 1.2;
	}

	main.menu ul.menu li:not(:last-child):after {
        display: block;
        height: 5rem;
        text-align: center;
        content: '...';
        color: var(--gray-300);
        font-size: 5rem;
        line-height: 0;
	}

	ul.menu img, 
	ul.menu video {
		width: 100%;
	}

	ul.menu span.other-title {
		font-weight: 300;
		color: var(--gray-600);
	}

	ul.menu span.other-title span {
		margin-right: .25rem;
	}

	ul.menu span.other-title span:first-child {
		color: var(--gray-900);
	}

	ul.menu h5 {
		text-align: center;
		margin-bottom: 1rem;
		color: var(--gray-600);
		font-weight: 400;
	}

	ul.menu header h6 {
		font-size: 1.1rem;
		font-weight: 900;
		margin-bottom: 0.15rem;
		line-height: 1;
		position: relative;
	}

	ul.menu header h6 .etitle {
		font-weight: 300;
		margin-left: 0.25rem;
		color: var(--gray-700);
	}

    ul.menu header .sequence {
    	position: absolute;
        margin-left: -1.75rem;
        font-style: italic;
        font-family: var(--font-serif);
        font-weight: 700;
        color: var(--red-dark);
    }

	ul.menu header label {
		display: block;
		margin-bottom: 0.25rem;
		font-weight: 400;
		font-size: 0.75rem;
		color: var(--gray-500);
	}

	ul.menu span.other-title {
		font-weight: 300;
		color: var(--gray-600);
	}

	ul.menu span.other-title span {
		margin-right: .25rem;
	}

	ul.menu span.other-title span:first-child {
		color: var(--gray-900);
	}

	ul.menu span.extra {
        font-size: x-small;
        margin-right: .5rem;
        background-color: var(--green);
        color: #fff;
        padding: 0 .25rem;
        border-radius: .125rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        vertical-align: 2px;
	}

    ul.menu .price-wrap {
        text-align: right;
        line-height: 1.2;
    }

    ul.menu .currency-label {
        color: var(--gray-500);
        font-size: 0.8em;
        margin-right: 0.5rem;
        font-style: italic;
        font-weight: 300;
        white-space: nowrap;
        vertical-align: 2px;
    }

    ul.menu .currency {
    	font-size: 1rem;
        font-family: var(--font-condensed);
        color: var(--black);
        font-weight: 700;
    }

    ul.menu .ingredients {
    	margin: 2rem;
    }

    ul.menu .ingredients label {
    	display: block;
    	font-size: x-small;
    	text-transform: uppercase;
    	color: var(--gray-500);
    	font-weight: 700;
    }

    ul.menu .description {
        /*text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;*/
        margin: 2rem;
    }

    ul.menu .description:hover {
    	text-overflow: unset;
    	display: block;
    }

	ul.menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	ul.menu > ul > li:not(:first-child) {
		margin-top: 3rem;
	}

	ul.menu li header {
		margin-top: 1rem;
	}

	.rmenu-all {
		text-align: right;
		margin-bottom: 1rem;
	}

	.rmenu-all a {
		display: inline-block;
		padding: .5rem 1rem;
		background-color: var(--black);
		color: #fff;
	}

	ul.menu .combo {
        padding: 1rem;
        border-width: .5rem;
        border: dashed 1px var(--gray-300);
        border-radius: .5rem;
        background-color: var(--gray-100);
        margin: 1.5rem 2rem;
        position: relative;
	}

    ul.menu .combo:not(:last-child):after {
        content: '+';
        font-size: 30px;
        font-weight: 900;
        color: var(--gray-600);
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1.8rem;
    }

    ul.menu .combo label {
    	display: block;
        font-weight: bold;
        color: var(--orange);
    }

    ul.menu .combo .combo-item {
    	display: inline-block;
    	margin: 1rem 1rem 0 0;
    }

    ul.menu .combo .combo-item .etitle {
    	font-weight: 300;
    	color: var(--gray-700);
    }

/*	slider */
	.slider {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.slider li {
		opacity: 0;
		position: absolute;
		top: 0;
		transition: all .5s ease;
	}

	.slider li.active {
		opacity: 1;
		transition: all .5s ease;
	}

	.slider li img,
	.slider li video {
		width: 100%;
	}

	.slider nav {
		position: absolute;
		bottom: 1.5rem;
		z-index: 1;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slider nav button {
		border: solid 1px rgba(255, 255, 255, 0.7);
		background-color: rgba(255, 255, 255, 0.3);
		width: 25px;
		height: 25px;
		padding: 0;
		margin: 0 .25rem;
	}

	.slider nav button.active {
		border: solid 1px var(--red-dark);
		background-color: var(--red-dark);
	}

	.slider nav button.paused {
		color: #fff;
	}

	.slider nav button.paused .bi::before {
		vertical-align: initial;
		line-height: 25px;
	}

/*	review related */
	.review-btns {
		display: flex;
		justify-content: space-between;
		border-top: solid 1px var(--gray-200);
		padding: 1rem .25rem;
	}

	.message {
		padding: 1.5rem;
	}

	button .cnt {
		color: var(--red-dark);
		margin-left: .25rem;
	}

	@media (min-width: 768px) {
		.review-btns {
			position: absolute;
			right: 1.5rem;
			bottom: 1.5rem;
			display: block;
			border: none;
			padding: 0;
			white-space: nowrap;
		}
	}

/*	review form */
	.review-form {
		padding: 1rem;
	}

	.review-form label {
		color: var(--orange);
		font-size: 0.8em;
		font-weight: 500;
		display: block;
	}

	.review-form .form-item {
		margin-top: 2rem;
	}

	.review-form .form-radio span.block {
		display: inline-flex;
		align-items: center;
		line-height: 1;
		margin: .5rem .5rem .5rem 0;
	}

	.review-form .form-radio span.block input {
		margin-right: .25rem;
	}

	.review-form textarea {
	}

	.review-form .submit {
		text-align: right;
		margin: 2rem 0;
	}

	.review-form .submit .form-control {
		width: 150px;
		display: initial;
	}

/*  blog */
    .blog-list {
        list-style: none;
        margin: 0;
        padding: 0;
        margin-bottom: 50px;
    }

    .blog-list > li {
        border-radius: 4vw;
        box-shadow: 0.15vw 0.15vw 1vw 0.15vw rgba(59, 59, 59, 0.15);
        background: #fff;

        padding: 0;
        margin: 0 0 6vw 0;

    }

    .blog-list main {
    	background-color: #fff;
    	border-radius: 4vw;
    }

    @media (min-width: 768px) {
        .blog-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 1.5rem;
        }

        .blog-list.tasters_choice {
            display: block;
        }

        .blog-list > li {
        	border-radius: 0;
        }

    }

    /*@media (min-width: 992px) {
        .blog-list {
            grid-template-columns: repeat(3, 1fr);
        }
    }*/

/*	review-photos */
	.review-photos {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.review-photos img {
		max-width: 100%;
	}

	.review-photos li {
		margin: 1px 0;
	}

	@media (min-width: 576px) {
		.review-photos {
			display: flex;
		}

		.review-photos img {
			max-width: 25%;
		}
	}