html {
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
	font-size: 62.5%;
	line-height: 1.65;
	letter-spacing: .2px;
	--font-serif: Georgia, Times, 'Times New Roman', serif;
	--dt: 0;
}
@media (hover: hover) {
	html {
		--dt: 1;
	}
}
body, html {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	overflow: auto;
	overflow-x: hidden;
	font-size: 1.4rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body * {
	box-sizing: border-box;
background-blend-mode: inherit;
}

[class^="ico-"], [class*=" ico-"]{
	font: normal 1em/1 Arial, sans-serif;
	display: inline-block;
	font-size: 5vmax;
	color: white;
	cursor: pointer;
}
.ico-cls {
	position: absolute;
	right: 2vw;
	top: 2vh;
	z-index: 99;
}
.ico-cls:before{ content: "\2716"; }

.app, .viewport {
	display: flex;
	overflow: hidden;
}
.app {
/*
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
*/
	flex-direction: column;
	height: 100%;
background-image: linear-gradient(to bottom, rgba(168, 149, 104, 0.5) 0, rgba(168, 149, 104, 0.5) 80%, rgba(255, 255, 255, 0.59) 100%), url(../img/bg_cal-4.jpg);
background-size: cover;
background-clip: border-box;
background-repeat: no-repeat;
background-position: center;
}
.viewport {
	flex-grow: 1;
	max-height: 100%;
}
.flex {
	display: flex;
}
.flex-column {
	flex-direction: column;
}

main {
	position: relative;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
main > section {
	width: 100%;
	position: relative;
	padding: 0 4vw 4vw;
	flex-grow: 1;
	margin: 0 auto;
}

#sn {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: auto;
	image-rendering: optimizespeed;
	pointer-events: none;
}