*,*::before,*::after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	_transition: color .2s,background-color .2s,background .2s,border-color .2s,fill .2s,stroke .2s;
}

:root {
	--vw: 1vw;
	--vh: 1vh;
	--vmin: 1vmin;
	--vmin1: var(--vmin,1vmin);
	--vmin100: calc(var(--vmin,1vmin)*100);
	--vmax: 1vmax;
	--vmax0-1: calc(var(--vmax,1vmax)*.1);
	--vmax0-5: calc(var(--vmax,1vmax)*.5);
	--vmax0-6: calc(var(--vmax,1vmax)*.6);
	--vmax1: var(--vmax,1vmax);
	--vmax2: calc(var(--vmax,1vmax)*2);
	--vmax3: calc(var(--vmax,1vmax)*3);
	--vmax4: calc(var(--vmax,1vmax)*4);
	--vmax5: calc(var(--vmax,1vmax)*5);
	--vmax6: calc(var(--vmax,1vmax)*6);
	--vmax7: calc(var(--vmax,1vmax)*7);
	--vmax20: calc(var(--vmax,1vmax)*20);
	--vmax100: calc(var(--vmax,1vmax)*100);
}

:root {
	--ui-page-background: #333;
	--ui-page-icon-color: #000;
	--ui-backdrop-color-background-off: rgba(0,0,0,0); /* #0000 */
	--ui-backdrop-color-background-on: rgba(0,0,0,.6); /* #0009 */
	--ui-header-color-text: #1a73e9;
	--ui-header-color-text-sub: #1a73e9;
	--ui-header-color-icon: #1a73e9;
	--ui-header-color-background: #f8f9fb;
	--ui-header-font-family: Roboto,Arial,Sans-serif;
	--ui-item-color-text: #2d2d2d;
	--ui-item-color-text-sub: #2d2d2d;
	--ui-item-color-icon: #2d2d2d;
	--ui-item-color-background: #fff;
	--ui-item-color-border: #2d2d2d;
	--ui-item-font-family: Roboto,Arial,Sans-serif;
	--dialog-color-text: #2d2d2d;
	--dialog-color-background: #fff;
	--ui-strip-color-text: #2d2d2d;
	--ui-strip-color-background: rgba(255,255,255,.87); /* #fffd */
	--ui-modal-color-text: #2d2d2d;
	--ui-modal-color-background: #fff;
	--ui-button-color-text: #2d2d2d;
	--ui-button-color-background: #ddd;
	--ui-button-color-backdrop: #fff;
	--ui-button-color-border: #000;
	--ui-icon-color: #fff;
}

/* HTML & BODY */

html {
	position: relative;
	_background: #9be5ff;
	_background-color: #000;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	touch-action: none;
}

body {
	position: relative;
	/*
	min-width: 100vw;
	min-width: calc(var(--vw,1vw)*100);
	min-height: 100vh;
	min-height: calc(var(--vh,1vh)*100);
	max-width: 100vw;
	max-width: calc(var(--vw,1vw)*100);
	max-height: 100vh;
	max-height: calc(var(--vh,1vh)*100);
	*/
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	font-family: Roboto,Arial,sans-serif;
	font-size: 100%;
	user-select: none;
	_transform: scale(1.02);
	_overflow: hidden;
}

/* APP */

a {
	display: inline-flex;
	min-width: 26px;
	min-height: 30px;
	align-items: center;
	justify-content: center;
	color: var(--ui-link-color-text,#09f);
	text-decoration: none;
}

a:hover {
	color: var(--ui-link-color-text-hover,#f66);
}

/* JOA */

.sheet-requirement,
noscript {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 75% 0 0 0;
	background: var(--ui-page-background) url('image/logo-floristexpress-icon.svg') center no-repeat;
	background-size: 50%;
	font-size: 2vmax;
	font-size: var(--vmax2);
	text-align: center;
}

/* APP */

.app-floristexpress.app-loading {
	_opacity: 0;
	_transform: scale(1);
	_animation: keyframes-app-run .5s;
	_animation: keyframes-app-run 0s;
}

/* GROUP SHEET */

.group-sheet {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	_z-index: 20;
}

/* SHEET */

.sheet {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #000;
	_background-color: var(--ui-page-background);
	font-size: 1.4vmax;
	font-size: calc(var(--vmax,1vmax)*1.4);
	opacity: 0;
	transition: opacity .2s linear,visibility 0s .2s linear;
	_will-change: opacity,visibility;
}

/* SHEET TITLE */

.sheet-title {
	background-color: var(--ui-page-background);
	background-image: url('image/logo-floristexpress-icon.svg');
	background-position: 50% 25%;
	background-repeat: no-repeat;
	background-size: 100vmin;
	background-size: var(--vmin100);
	_visibility: hidden;
	_transform: scale(10);
	_animation: keyframes-app-run 1s,keyframes-app-run .5s 1s forwards reverse;
	transition: opacity .2s linear,visibility 0s .2s linear;
	z-index: 2;
}

/* GROUP PAGE */
.group-page {

}

/* PAGE */

.page {
	display: block;
	position: absolute;
	width: 100vmax;
	width: var(--vmax100);
	height: 100vmin;
	height: var(--vmin100);
	padding: 16vmin 2vmax 1vmax 2vmax;
	padding: calc(var(--vmin,1vmin)*16) var(--vmax2) var(--vmax1) var(--vmax2);
	color: var(--dialog-color-text);
	background-color: var(--dialog-color-background);
	font-size: 1.4vmax;
	font-size: calc(var(--vmax,1vmax)*1.4);
	letter-spacing: .1vmax;
	letter-spacing: var(--vmax0-1);
	opacity: 0;
	transform: scale(0);
	transition: opacity .2s ease-out,transform .2s ease-out,z-index 0s .2s linear;
	will-change: opacity,transform;
}

.page-body h1 {
	font-size: 2.5vmax;
	font-size: calc(var(--vmax,1vmax)*2.5);
}

.page-body h2 {
	font-size: 2vmax;
	font-size: var(--vmax2);
}

.page-body h3 {
	font-size: calc(var(--vmax,1vmax)*1.638);
}

.page-body h1,
.page-body h2,
.page-body h3,
.page-body p {
	_display: inline-block;
	margin: 1vmax 0 0 0;
	margin: 1em 0 0 0;
}

.page-body p {
	display: block;
}

.page-body ul {
	_margin: 0;
}

.page footer {
	display: block;
	padding: 2vmax 0;
	padding: var(--vmax2) 0;
	column-span: all;
	text-align: center;
}

/* PAGE - STATE */

.offline .page-purchase-offline {
	height: 6vmin;
	height: calc(var(--vmin,1vmin)*6);
}

.offline .page-purchase-body {
	height: 80vmin;
	height: calc(var(--vmin,1vmin)*80);
}

.render-page-news .page-news,
.render-page-purchase .page-purchase,
.render-page-terms-and-conditions .page-terms-and-conditions {
	transform: scale(1);
	_transition: opacity .2s ease-out,transform .2s ease-out;
	_transition: transform .3s linear;
	opacity: 1;
	z-index: 16;
}

.form-message-pobox label#inputaddress1label::after {
	opacity: 1;
}

/* ANIMATION */

@keyframes keyframes-app-run {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes keyframes-fade {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-zoom {
	0% {
		transform: scale(0.25);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes keyframes-photo-hit {
	0% {
		transform: scale(1.2);
	}
	20% {
		transform: scale(0.90);
	}
	40% {
		transform: scale(1.05);
	}
	60% {
		transform: scale(0.98);
	}
	80% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes keyframes-photo-gone {
	90% {
		transform: translateX(-200vmax) translateY(-200vmax) rotate(-360deg);
		transform: translateX(calc(var(--vmax,1vmax)*-200)) translateY(calc(var(--vmax,1vmax)*-200)) rotate(-360deg);
	}
	91% {
		transform: scale(0.1);
		opacity: 0;
	}
	100% {
		transform: scale(1.2);
		opacity: 1;
	}
}

@keyframes keyframes-raspberry {
	0% {
		transform: rotate(-34deg) rotateX(0deg);
	}
	50% {
		transform: rotate(-34deg) rotateX(-60deg) perspective(4vmax);
		transform: rotate(-34deg) rotateX(-60deg) perspective(var(--vmax4));
	}
	100% {
		transform: rotate(-34deg) rotateX(0deg);
	}
}

@keyframes keyframes-coin {
	0% {
		transform: rotateY(-90deg) rotateX(20deg) rotateZ(0deg);
	}
	100% {
		transform: rotateY(270deg) rotateX(20deg) rotateZ(0deg);
	}
}

@keyframes keyframes-coin-shine {
	0% {
		background-position: 100% -50%;
	}
	15% {
		background-position: -100% 200%;
	}
	100% {
		background-position: -100% 100%;
	}
}

/* MEDIA QUERY - FULLSCREEN */

@media
(device-width: 100vw) and (device-height: 100vh),
(display-mode: fullscreen) {
	#ui-button-fullscreen {
		opacity: 0;
		transition: transform .2s linear,opacity .2s linear;
		pointer-events: none;
	}

	#ui-token {
		right: 11%;
		transition: right .2s .2s ease-out;
	}
}

/* MEDIA QUERY - ORIENTATION */

_@media
(orientation: portrait) {
	.app-floristexpress {
		transform: rotate(90deg) translateX(-100vmin);
		transform: rotate(90deg) translateX(calc(var(--vmin,1vmin)*-100));
		transform-origin: bottom left;
		_transition: transform 2s linear;
	}
}