@media (orientation:portrait) {
	body{
		min-height: calc(var(--vh, 1vh) * 100 );
		overflow-x: hidden;
	}
}

#ticket-qr-div.no-item .item-desc {
	height: 98px;
}

@media (orientation:landscape) and (max-height: 550px) and (min-width:600px) and (max-width:1000px) {
	html {
		width: calc(var(--vw, 1vw) * 100 );
		height: calc(var(--vh, 1vh) * 100 );
		display: flex;
		justify-content: center;
		align-items: center;
	}
	body.started {
		transform: rotate(270deg);
		min-height: calc(var(--vw, 1vw) * 100 );
		    min-width: calc(var(--vh, 1vh) * 100 );
	}
	
	body.started #main-menu {
		height: calc(var(--vw, 1vw) * 100 );
		/* width: calc(var(--vw, 1vw) * 100 ); */
	}
	#page:not(.enlarge-qr) #brand-collab-qr-div .item-desc {
		top: calc(var(--vw, 1vw) * 50 );
	}
	#qr-hunt-div {	
		/* height: calc(var(--vw, 1vw) * 100 ); */
	}
	#qr-hunt-div #item-balance {
	    transform: translateY( calc( -100% - 50px) );
		top: calc(var(--vw, 1vw) * 50 );
	}
	.enlarged-hint div#main-menu-content:before {
		height: calc(var(--vw, 1vw) * 100 );
		width: calc(var(--vh, 1vh) * 100 );
	}
	
}
@media (orientation:landscape) and (max-height: 550px) and (min-width:800px) and (max-width:1000px) {
	#qr-hunt-div #item-balance {
		top: 400px;
	}
}
.item-wrapper.loaded .item-qr-wrapper {
    transform: scale(1);
}

#page:not(.enlarge-qr) .item-wrapper.loaded#brand-collab-qr-div .item-qr-wrapper {
	transform: scale(1);
}
.enlarge-qr .item-wrapper .item-qr-wrapper {
    transform: scale(1) translateY(-21%);
}
#page #main {
	position:relative;
	
}
#page #main:before {
	background-position-y: 0%;
}
#page #main:after {
	background-position-y: 100%;

}


#page #main-menu:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/cny2023/rabbit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    display: block;
}

.btn-wrapper.special-bg-1 {
	    background: transparent;
}

.doge-menu-my-ticket.ticket-type-vip {
	background-color:#0e0000;
}




body.started:not([class*="doge-menu-"]) #main-menu {
	min-height: 644px;
}

.started.doge-menu-my-ticket.ticket-type-vip #page #main:before {
	background-image: url(../img/cny2023/vip-top-1-2.png);
	background-position-y: calc( 50% - 194px );
}
.started.doge-menu-my-ticket.ticket-type-vip #page #main:after {
	background-image: url(../img/cny2023/vip-bottom-1.png);
	background-position-y: calc( 50% + 160px );
}


.doge-menu-my-ticket .item-desc .item-number {
	display:none;
}

.btn, .btn-primary {
    border:0px none transparent;
}
#main {
	justify-content: center;
}
#page {
	overflow-x: hidden;
	width: 100%;
    max-width: 420px;
	background-image: url(../img/cny2023/bg.webp);
    background-size: cover;
}
body:not(.started) #page{
	min-height: calc(var(--vh, 1vh) * 100 );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#main-menu-wrapper {
	/* max-height: 550px; */
    position: relative;
	z-index:3;

}
#mainLogo {
	/* display: none; */
    width: 230px;
    height: auto;
    z-index: 19;
    position: absolute;
    left: 50%;
    /* top: 50%; */
    /* transform: translate(-50%,calc( -50% - 190px )) scale(1); */
    top: 40px;
    transform: translate(-50%,0%) scale(1);
}

#mainLogo img {
	display:block;
}

.item-qr.type-vip {
	background-color: #ffcaca;
	
}

.item-selected #mainLogo {
	transform: translate(-50%,0) scale(0);
}

#mainLogo img.logo-part-1 {
	width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
	position: relative;
	z-index:2;

}



.modal-header {
	position:relative;
}
.modal-title {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#emailHelp {
	text-align:center;
}
#log-in-customer-modal .row {
	justify-content: center;
}
#log-in-customer-modal .form-label {
	display:none;
}
#log-in-customer-modal .modal-body {
	max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
#main-menu-content {
	z-index:5;
	transform: translate(-50%,-50%) scale(0);
	
	opacity:0;
	position: absolute;
    top: 50%;
    left: 50%;
}
#main-menu-content.show {
	opacity:1;
	transform: translate(-50%,calc( -50% + 25px )) scale(1);
}

.selected-my-ticket #main-menu-content.show {
	transform: translate(-50%,calc( -50% + 25px )) scale(1);
}

#main-menu {
	padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: calc(var(--vh, 1vh) * 100 );
    /* max-height: 800px; */
    position: relative;
    margin-left: auto;
    margin-right: auto;
}


#main-menu .btn-wrapper-outer {
	padding: 0;
    width: 135px;
    height: 168px;
    position: absolute;
    /* top: 50%; */
    bottom: 42px;
    left: 50%;
    border-radius: 12px;
}
#main-menu .btn-wrapper {
	
	padding: 0 0 0 0;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 40px;
}
#main-menu .item {
    background-color: transparent;
    width: calc( 100% - 2px );
    height: calc( 100% - 2px );
    display: block;
    padding: 0;
    border-radius: 0px;
    opacity: 1;
    border: 0;
    background-size: contain;
    background-repeat: no-repeat;
}
#main-menu .item span {
	text-transform: uppercase;
	font-weight: 500;
	padding: 12px;
	text-align: center;
	display: block;
	line-height: 1.2;
	margin-left: auto;
    margin-right: auto;
	max-width: 5.2em;
	margin-bottom: -0.1em;
	color:#fff;
}
#main-menu .selected .item span {
    padding: 0;
    text-align: left;
    margin-left: 90px;
    font-size: 20px;
    letter-spacing: 1px;
	margin-top: 14px;
}
#main-menu .selected .item span:before {
    content:"< BACK TO HOME";
    display:block;
    font-size:9px;
    font-weight:400;
	letter-spacing: 0px;
	 opacity:0.6;
	 margin-bottom: 3px;
}
#main-menu .selected .item span:after {
    content:"";
    display:block;
    border-bottom:1px solid #fff;
    margin-right:66px;
    opacity:0.4;
    margin-left:-20px
}
#main-menu .btn-wrapper-outer.selected .btn-wrapper .item {
	background:#b7964f;
	border-radius:40px;
}


#main-menu .btn-wrapper-outer:nth-child(1) .item {
	background-image:url(../img/cny2023/btn-1.png);
}
#main-menu .btn-wrapper-outer:nth-child(2) .item {
	background-image:url(../img/cny2023/btn-2.png);
}
#main-menu .btn-wrapper-outer:nth-child(3) .item {
	background-image:url(../img/cny2023/btn-3.png);
}
#main-menu .btn-wrapper-outer:nth-child(4) .item {
	background-image:url(../img/cny2023/btn-4.png);
}

.selected.btn-wrapper-outer {
	
}

#main-menu .btn-wrapper-outer.selected .item span {
	max-width:100%;
}


#main-menu-logo-div {
    min-width: 50px;
    min-height: 50px;
    width: auto;
    height: auto;
    position: absolute;
    bottom: 160px;
    left: 50%;
	transform: rotate(-225deg) scale(0) translate(-50%,-50%);
    z-index: 20;
	border-radius: 5px;
}
#main-menu-logo-div:not(.show-menu) {
	width: 50px;
    height: 50px;
	border: 2px solid #594a42;
}

#main-menu-logo-div.show-menu {
	background-image:unset;
}
#main-menu-logo {
	opacity:0;
	width: 55%;
	height: auto;
	transform: translate(-50%,-50%) rotate(-45deg);
	position: absolute;
	top: 50%;
	left: 50%;
	/* display:none!important; */
}
#main-menu-logo-div.show {
	transform: translate(-50%,calc( 50% + 70px )) rotate(45deg) scale(1);
	/* transform: translate( calc( -50% + 0.5px ),calc( 50% + 52px )) rotate(45deg) scale(1); */
	transform: translate(-50%, -50% ) rotate(45deg) scale(1);
}
#main-menu-logo-div.show #main-menu-logo {
	opacity:1;
}
#main-menu > .btn-wrapper-outer:nth-child(1) {
	
	transform-origin: 100% 100%;
	transform: translate(-100% ,-100% ) rotate(-45deg) scale(0);
	z-index:14;
	
}
#main-menu.show > .btn-wrapper-outer:nth-child(1) {
	transform: translate(-100% ,-100% ) rotate(0deg) scale(1);
}

#main-menu > .btn-wrapper-outer:nth-child(2) {
	transform-origin: 0% 100%;
	transform:translate(0%,-100%) rotate(-90deg) scale(0);
	z-index:13;
}
#main-menu.show > .btn-wrapper-outer:nth-child(2) {
	transform: translate(0% ,-100% ) rotate(0deg) scale(1);
}
#main-menu > .btn-wrapper-outer:nth-child(3) {
	
	transform-origin: 100% 0%;
	transform:translate(-100%,0%) rotate(-270deg) scale(0);
	z-index:12;
}
#main-menu.show > .btn-wrapper-outer:nth-child(3) {
	transform: translate(-100% ,0% ) rotate(0deg) scale(1);
}
#main-menu > .btn-wrapper-outer:nth-child(4) {
	
	transform-origin: 0% 0%;
	transform:translate(0%,0%) rotate(-180deg) scale(0);
	z-index:11;
}
#main-menu.show > .btn-wrapper-outer:nth-child(4) {
	transform: translate(0% ,0% ) rotate(0deg) scale(1);
}

#main-menu.show.shown > .btn-wrapper-outer {
	transform-origin:50% 100%;
}

#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer {
	
}
#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.selected {
	/* position: fixed; */
	width: calc( 100% - 10px );
    height: 70px;
    transform: translate(-50% , 0% ) rotate(0deg) scale(1);
    top: 10px;
    z-index: 18;
}

#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected span {
	font-size:1.4em;
}
#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected {		
	display:none;
	top:100%;
	left:50%;
    transform-origin:50% 100%;
}


#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected-1 {
    transform: translate(calc( -50% - 85px ), calc( -100% - 15px )  ) rotate(0deg) scale(0.5633);
}
#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected-2 {	
    
    transform: translate(-50% , calc( -100% - 15px ) ) rotate(0deg) scale(0.5633);
}
#main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected-3 {	
    
    transform: translate(calc( -50% + 85px ) , calc( -100% - 15px ) ) rotate(0deg) scale(0.5633);
}

#main-menu-wrapper.item-selected #main-menu-logo-div {
	display:none;
}


@media(max-height:539px) {
	
		
	/* #main-menu-content.show { */
		/* transform: translate(-50%,-50%) scale(1); */
	/* } */
	/* #main-menu-wrapper { */
		/* position:relative; */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu-logo-div { */
		/* top:50%; */
		/* left:0; */
		/* transform: translate(-79px,calc( -50% - 119px )) rotate(-315deg) scale(0.5); */
	/* } */
	/* #main-menu-wrapper.item-selected .item span { */
		/* font-size: 1.4em; */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.selected .item span { */
		/* /* font-size: 2em; */ */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.selected .btn-wrapper { */
		/* transform:scale(1.2) translateX(10px); */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.not-selected, */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer.selected { */
		/* transform-origin: 50% 50%; */
		/* width: 150px; */
		/* height: 150px; */
		/* left: 0; */
		/* top: 50%; */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer:nth-child(1) { */
		/* transform: translateX(-120px) translateY(calc( -50% - 65px  )) scale(0.4); */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer:nth-child(2) { */
		/* transform: translateX(-120px) translateY(calc( -50% - 5px  )) scale(0.4); */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer:nth-child(3) { */
		/* transform: translateX(-120px) translateY(calc( -50% + 55px  )) scale(0.4); */
	/* } */
	/* #main-menu-wrapper.item-selected #main-menu > .btn-wrapper-outer:nth-child(4) { */
		/* transform: translateX(-120px) translateY(calc( -50% + 115px  )) scale(0.4); */
	/* } */
	
	
}


.selected .btn-wrapper.special-bg-1, #main-menu-logo-div {
	background-image:url(../img/cny2023/square-gradient-bg.svg);
	background-repeat:no-repeat;
	background-size:contain;
	background-color: transparent;
}

#main-menu-wrapper.item-selected #main-menu-logo-div.show-menu,
#main-menu-logo-div.show-menu {
	transform: translate(-50%,50%) rotate(0deg) scale(1);
}
#main-menu-logo-div.show-menu #main-menu-logo {
	transform:translate(-50%,-50%) rotate(-225deg) scale(0);
	
}
#main-menu .item:active span,
#main-menu .item:hover {
	color:#fff;
}
#menu2 {
	
    width: 70px;
    height: 70px;
    /* max-width: 100%; */
    display: flex;
    /* opacity: 0; */
    overflow: hidden;
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    transform: translate(0%,0%) scale(0);
    justify-content: center;
    align-items: center;
    /* transform-origin: 50% 50%;*/
}
#main-menu-logo-div.show-menu #menu2 {
    width: auto;
    height: auto;
    transform: translateY(-50px) scale(1);
}
#menu2 .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    margin: 2px;
    border-radius: 12px;
    width: calc( 100% - 4px );
    height: calc( 100% - 4px );
    width: auto;
    padding: 10px;
}
#menu2 .btn {
	opacity:0;
	
	text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.8em;
	transform:scale(1);	
    width: 100%;
}
#menu2 .container > .btn:not(:last-child) {
	margin-bottom:5px;
}

#menu2 .btn.close-btn {
	width:auto;
	margin-top:5px;
}

#main-menu-logo-div.show-menu #menu2 .btn {
	opacity:1;
}

/* Chrome, Safari, Edge, Opera */
input.otp::-webkit-outer-spin-button,
input.otp::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.otp[type="number"] {
  -moz-appearance: textfield;
}


#drink-tokens-div .wrapper {
	display: flex;
    width: 300px;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
}
#drink-tokens-div.loaded .wrapper {
	transform: translateY(60px);
}
#drink-tokens-div .fnbtoken svg {
	vertical-align: middle;
    width: 98px;
    height: 98px;
    fill: #fff;
    padding: 10px;
}

#drink-tokens-div .fnbtoken-status-invalid svg {
	fill:#8080808c;
}
#drink-tokens-div .fnbtoken-status-used svg {
	fill:#8080808c;
}
#drink-tokens-div .fnbtoken-status-valid svg {
	fill:orange;
}

#drink-tokens-div .ticket-qr:after {
	content: "";
    
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    font-size: 13px;
    transform: translate(-50%, -50%) rotate(360deg) scale(2);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    border: 3px solid;
    text-align: center;
    width: 80px;
    padding: 3px 8px;
    background-color: #000;
    line-height: normal;
}
#drink-tokens-div .fnbtoken {
	position: relative;
    background-color: transparent;
    border: 0;
    padding: 0;
	margin:0;
	overflow:hidden;
}
#drink-tokens-div .fnbtoken:after {
	content: "";
    
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    font-size: 12px;
    transform: translate(-50%, -50%) rotate(360deg) scale(2);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    border: 3px solid;
    text-align: center;
    width: 73px;
    padding: 3px 8px;
    background-color: #000;
    line-height: normal;
}
#drink-tokens-div .fnbtoken.fnbtoken-status-invalid:after {
    opacity: 1;
    content: "Invalid";
    transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}
#drink-tokens-div .fnbtoken.fnbtoken-status-used:after {
    opacity: 1;
    content: "Used";
    transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}
#drink-tokens-div.loading .item {
	transform: rotate(180deg) scale(0);
}
#drink-tokens-div.loaded .item {
	 transform: rotate(0deg) scale(1);
}

#drink-tokens-div .fnbtoken {
	transition:none !important;
	margin-bottom:20px;
}


.ticket-type-vip .item-qr-wrapper {
	background-image: url(../img/cny2023/bg-color-1-1.jpg);
    background-size: contain;
    background-repeat: repeat-x;
}

.item-desc.type-hennessy-whiskey {
	/* display:none; */
}
.item-desc.type-hennessy-whiskey .item-type {
	display:none;
}

.item-desc.type-hennessy-whiskey .item-number {
	/* display:none; */
}

/* .enlarge-qr #brand-collab-qr-div .item-desc > * { */
	/* display:none; */
/* } */
/* .enlarge-qr #brand-collab-qr-div .item-desc > .item-number { */
	/* display:block; */
/* } */
.enlarge-qr .modal-body p.item-number.text-center {
	top:95px;
}

.enlarge-qr div#main-menu-wrapper,
.enlarge-qr #fnbtoken-modal {
	background-color:#000;
}
.enlarge-qr p.item-number.text-center {
    display:block;
    position:absolute;
    font-size:3em;
    left:50%;
    top:140px;
    transform: translateX(-50%) translateY(100px);
}

.btn-wrapper-outer.selected:after {
	content: "";
    position: absolute;
    width: 54px;
    height: 54px;
    top: 8px;
    right: 9px;
    background-image: url(../img/cny2023/cny2023-white-circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    display: block;;
}

.item-desc {
    width: 100%;
}
.selected-my-ticket .day_slot {
    margin-top:45px;
}
.day_slot > span {
    text-align:left;
    font-family:'avenirlight';
    text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,0.2);    
}
.day_slot > span:before {
    display: inline-block;
    margin-right:2em;
    font-family:'hennessysansregular';

}

.day_slot > .time:before {
    content: "Slot:";
}

.day_slot > .day {
	margin-bottom:20px;
}
.day_slot > .day:before {
    content: "Date:";
}
.selected-my-ticket .item-qr-wrapper {

	
}
.selected-my-ticket .item-desc {
	height:unset;
}
	
#main-menu .qr-hunt:not(.selected) .item span {
	max-width:unset;
	padding:unset;
}

.omakase.item-qr {
	filter:sepia(0.7);
}