/* Copyright (c) 2020 Aviado Inc. All rights reserved. */

/*
 * header
 */
 
#header {
	overflow: hidden;
}

.stand2 #header, .stand3 #header {
	position: absolute;
	left: 0;
	bottom: 0;
}

.stand2 #header {
	width: 50%;
}

.stand3 #header {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30%;
}

.web #header {
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
}

#header img {
	width: 100%;
}

/*
 * address
 */

.web #address {
	position: absolute;
	right: 0.5em;
	top: calc(400px - 4em);
	height: 4em;
	text-align: right;
}

.web #address a {
	font-weight: bold;
}

.web #mopos {
	top: 400px;
}

/*
 * qrcode
 */

#qrcode {
	position: absolute;
	right: 1em;
	width: 6em;
	bottom: 1em;
	height: 6em;
}

#qrcode img {
	width: 100%;
}

/*
 * order
 */

#order {
	position: absolute;
	height: 8em;
	bottom: 25%;
	width: 8em;
    left: 50%;
    transform: translateX(-50%);
}

#order img {
	width: 100%;
}

/*
 * slides
 */

.stand2 #slides, .stand3 #slides {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.web #slides {
	position: absolute;
	width: 100%;
	height: 400px;
	overflow: hidden;
}

/*
 * mopos
 */

.stand2 #mopos, .stand3 #mopos {
	left: 1em;
	right: 1em;
	top: 1em;
	bottom: 1em;
}

#mopos div.caption {
	height: 3em;
	padding: 0.9em 0 0 0.9em;
}

#mopos div.caption>span {
	font-size: 110%;
}

#mopos div.tabs div.tab {
	text-transform: uppercase;
	padding: 0.8em;
	margin-bottom: 0.2em;
}

#mopos div.tabs div.tab>span {
	font-size: 105%;
}

#mopos div.tabs div.tab.selected {
	font-weight: bold;
}

#mopos div.items div.caption {
	text-transform: uppercase;
}

#mopos div.items div.item {
	position: relative;
}

.web #mopos div.tabs div.caption {
	margin-right: -0.3em;
}

.web #mopos div.items div.caption {
	margin-left: -0.1em;
}

/* grid1 */

#mopos div.items.grid1 div.item {
	width: 100%;
	height: 4em;
	margin-bottom: 0.2em;
}

#mopos div.items div.item-image, #mopos div.items div.item-number, #mopos div.items div.item-text, #mopos div.items div.item-price {
	position: absolute;
}

#mopos div.items div.item-image img {
	width: 100%;
}

#mopos div.items.grid1 div.item-image, #mopos div.items.grid1 div.item-number {
	top: 0;
	left: 0;
	height: 4em;
	width: 4em;
}

#mopos div.items div.item-number>div {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-style: italic;
	font-weight: bold;
}

#mopos div.items.grid1 div.item-number>div {
	font-size: 160%;
}

#mopos div.items.grid1 div.item-text {
	top: 0;
	height: 3.8em;
	left: 4em;
	right: 0.4em;
}

#mopos div.items div.item-text>div {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
}

#mopos div.items div.item-price {
	bottom: 0.2em;
	right: 0.4em;
}

/* grid2 */

#mopos div.items.grid2 div.item,
#mopos div.items.gridw div.item {
	width: calc(50% - 0.1em);
	height: 5em;
	margin-bottom: 0.2em;
}

#mopos div.items.grid2 div.item:nth-child(odd),
#mopos div.items.gridw div.item:nth-child(odd) {
	margin-right: 0.2em;
}

#mopos div.items.grid2 div.item-image, #mopos div.items.grid2 div.item-number,
#mopos div.items.gridw div.item-image, #mopos div.items.gridw div.item-number {
	top: 0;
	left: 0;
	height: 5em;
	width: 5em;
}

#mopos div.items.grid2 div.item-number>div,
#mopos div.items.gridw div.item-number>div {
	font-size: 200%;
}

#mopos div.items.grid2 div.item-text,
#mopos div.items.gridw div.item-text {
	top: 0;
	height: 4.7em;
	left: 5em;
	right: 0.4em;
}

/* grid3 */

#mopos div.items.grid3 div.item {
	width: calc(33.3% - 0.2em);
	height: 5em;
	margin-right: 0.2em;
	margin-bottom: 0.2em;
}

#mopos div.items.grid3 div.item:nth-child(3n+0) {
	width: 33.3%;
	margin-right: 0;
}

#mopos div.items.grid3 div.item-image, #mopos div.items.grid3 div.item-number {
	top: 0;
	left: 0;
	height: 5em;
	width: 5em;
}

#mopos div.items.grid3 div.item-number>div {
	font-size: 200%;
}

#mopos div.items.grid3 div.item-text {
	top: 0;
	height: 4.7em;
	left: 5em;
	right: 0.4em;
}

/* grid3x */

#mopos div.items.grid3x div.item {
	width: calc(33.3% - 0.2em);
	padding-top: 40%;
	margin-right: 0.2em;
	margin-bottom: 0.2em;
}

#mopos div.items.grid3x div.item:nth-child(3n+0) {
	width: 33.3%;
	margin-right: 0;
}

#mopos div.items.grid3x div.item-image, #mopos div.items.grid3x div.item-number {
	left: 0;
	width: 100%;
	bottom: 0;
}

#mopos div.items.grid3x div.item-number {
	top: 0;
}

#mopos div.items.grid3x div.item-number>div {
	font-size: 500%;
}

#mopos div.items.grid3x div.item-text {
	top: 0.4em;
	left: 0.4em;
	right: 0.4em;
	text-align: center;
}

#mopos div.items.grid3x div.item-text>div {
	position: relative;
	top: 0;
    transform: none;
    font-size: 120%;
}