* { -webkit-text-size-adjust:none !important; }
input[type="submit"] {-webkit-appearance:none;appearance:none;}


*, html, body { margin:0; padding:0; font-family:roboto, sans-serif; }


.ctr { text-align:center; }
.tx_lgt { font-weight:300; }
.op0 { opacity:0; }
.op1 { opacity:1; }
.noshrink { flex-shrink:0; }
.nogrow { flex-grow:0; }
.doshrink { flex-shrink:1; }
.dogrow { flex-grow:1; }


h1, h2, h3, h4 { padding:0.6em 10px 0.3em; }
p { padding:0.5em 10px 0.8em; }
ul li { margin:10px 10px 10px 26px; }
a { color:#575756; text-decoration:none; }
hr { border:none; height:0; width:100%; border-bottom:solid 3px #fff; border-top:solid 3px #f8b334; }
h1 { font-size:1.6em; line-height:1.2em; }
h2 { font-size:1.5em; line-height:1.4em; }
p { line-height:1.3em; }

html {
	background-color:#333;
	overflow-y:scroll;
	color:#111;
	line-height:1.2em;
}

body {
	margin:0 auto;
	padding:0;
	width:420px;
	height:inherit;
	min-height:100vh;
	position:relative;
}

.outer {
	margin:0;
	width:400px;
	height:inherit;
	min-height:500px;
	padding:70px 10px 10px; /*header & footer*/
	position:relative;
	background-color:#a0e5f5;
}

#container {
	background:#fdfdfd;
	border-radius:30px;
	position:relative;
	padding:15px 30px;
}


.header {
	position:fixed;
	top:0;
	z-index:100;
	width:400px;
	height:50px;
	padding:10px 0;
	opacity:0;
	transition:opacity 400ms;
}
img.mainmenu { height:40px; width:40px; margin-top:5px; float:right; }
.subheader {
	display:flex; flex-direction:row; align-content:center; align-items:center;
	height:50px; padding:10px 10px;
	position:fixed; top:0; left:0; width:330px; z-index:101;
}
.subheader span { flex-grow:1; font-size:1.1em; line-height:1.1em; font-weight:bold; color:#fff; text-align:center; }
.subheader img { flex-shrink:0; height:45px; padding-right:10px; }





.splash { height: 100vh; margin: -85px -40px -25px; background:#0099cb url("../img/splash.png") no-repeat center top; background-size:contain; }
.splash span { display:block; text-align:center; padding-top:60vh; }

.app_alert { position:fixed; top:10vh; z-index:100; background:rgba(255, 255, 255, 0.8); left:4vw; right:4vw; border:#fff; border-radius:5px; box-shadow:0 0 5px #aaa; padding:5px; color:#000; }








/*div.mainmenu { position:fixed; width:0; top:70px; right:0; transition:width 400ms ease; overflow-x:hidden; box-shadow:2px 2px 6px #666; z-index:90; max-height:calc(100vh - 70px - 54px); }
.mainmenu.open, .mainmenu > ul { width:420px; }
.mainmenu li { background:#fff; border-bottom:solid 5px #a0e5f5; list-style:none; font-weight:bold; font-size:16px; padding:12px 5px; line-height:1.2em; margin:0; }*/

ul.basicmenu { height:calc(100vh - 90px - 30px); display:flex; flex-direction:column; justify-content:space-around; }
.menu li, .basicmenu li { list-style:none; font-weight:bold; font-size:20px; padding:10px; line-height:1.2em; margin:0; text-align:center; }
.menu li, .basicmenu li, .menu li a, .basicmenu li a { color:#b2bed0; }
.basicmenu li img { height:12vh; }
.menu li span, .basicmenu li span { display:block; }

/*.basicmenu li, .mainmenu li { text-transform:uppercase; }*/
.menu li { height:40px; }
.menu .circle { line-height:24px; width:35px; height:24px; padding:7px 0 9px 5px; }
.menu .circle img, .menu .circle svg { max-height:24px; max-width:24px; }



iframe { height:calc(100vh - 90px - 30px); width:100%; border:0; }






/** loading **/
@keyframes eff_loading_ani {
	0% {text-shadow:0 0 0 #fff; color:rgba(255,255,255,0.4); }
	100% {text-shadow:0 0 3px #fff, 0 0 8px #fff; color:rgba(255,255,255,1); }
}
@-webkit-keyframes eff_loading_ani {
	0% {text-shadow:0 0 0 #fff; color:rgba(255,255,255,0.4); }
	100% {text-shadow:0 0 3px #fff, 0 0 8px #fff; color:rgba(255,255,255,1); }
}

.eff_loading { animation: eff_loading_ani 1600ms linear 0s infinite alternate; -webkit-animation: eff_loading_ani 1600ms linear 0s infinite alternate;}



.eff_fadeout { opacity:0; transition:opacity ease 500ms; }
.eff_fadein { opacity:1; transition:opacity ease 500ms; }





/* nav/content specific */

body.loading .outer #container { background:none; }
body.root .outer { background-color:#e8e8e7; }