/* CSS RESET */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
/* /CSS RESET */

/* DEFAULT STYLES */
	body { background-color: white; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: 'Raleway', sans-serif; }
	#app .app-container { position: relative; width: 420px; height: 740px; background: linear-gradient(#013eb8, #016da5, #02c4b4); }

/* MENU */
	#hamburger { position: absolute; max-width: 40px; max-height: 30px; top: 15px; left: 15px; }
	#hamburger img { width: 100%; }
	#hamburger img:hover { cursor: pointer; }
	#side-nav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: white; overflow-x: hidden; padding-top: 60px; transition: 0.5s; height: 680px; position: absolute; box-shadow: inset 0 0 20px rgba(0,0,0,0.15); }
	#side-nav li { text-align: center; transition: all 0.3s; }
	#side-nav li a { text-decoration: none; color: #444; display: block; padding: 20px 10px; font-size: 16px; transition: all 0.3s; }
	#side-nav li.alt { background-color: rgba(0,0,0,0.03); }
	#side-nav li:hover { background-color: rgba(0,0,0,0.1); }
	#side-nav li.header { text-transform: uppercase; line-height: 1.15; font-size: 16px; padding-bottom: 20px; }
	#side-nav li.header strong { font-size: 18px; font-size: 22px; font-weight: bold; letter-spacing: 2px; }
	#side-nav li.header:hover { background: none; }
	#side-nav li a:hover { color: #0772fb; }
	#side-nav a.close-btn { position: absolute; top: 5px; right: 15px; font-size: 36px; margin-left: 50px; color: #0772fb; padding: 0; }

/* MAIN CONTENT */
	#main-content { display: flex; flex-direction: column; justify-content: center; align-content: center; height: 100%; }
	#main-content .inner .logo { max-width: 40%; margin: 0 auto 40px; display: flex; }
	#main-content .inner .inputs { display: block; padding: 25px; background: rgba(220,245,245,0.5); border: none; width: 70%; margin: 25px 15%; box-sizing: border-box; font-family: 'Raleway', sans-serif; }
	#main-content .inner .inputs:focus, #main-content .inner .inputs:active { background: rgba(220,245,245,0.25); border: 1px solid rgba(220,245,245,0.5); padding: 24px; box-shadow: 0 0 3px rgba(0,0,0,0.25) }
	#main-content .inner input[placeholder], [placeholder], *[placeholder] { color: white; font-weight: bold; font-size: 15px; }
	#main-content .inner button { display: flex; justify-content: center; align-self: center; color: white; font-size: 17px; letter-spacing: 1px; padding: 20px; background: transparent; border: 1px solid white; width: 70%; margin: 25px 15%; box-sizing: border-box; font-family: 'Raleway', sans-serif; transition: all 0.3s }
	#main-content .inner button:hover { cursor: pointer; background: rgba(0,0,0,0.15); }

/* LOGIN ERROR MESSAGE */
	#input-fields span { display: block; padding: 14px; text-align: center; background: #f2dede; border: none; width: 70%; margin: 25px 15%; box-sizing: border-box; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.1; border: 1px solid #ebccd1; color: #a94442; border-radius: 4px; }