@font-face {
		  font-family: 'fontello';
		  src: url('fontello.eot?43769857');
		  src: url('fontello.eot?43769857#iefix') format('embedded-opentype'),
			   url('fontello.ttf?43769857') format('truetype'),
			   url('fontello.svg?43769857#fontello') format('svg');
		  font-weight: normal;
		  font-style: normal;
		}
		 
		[class^="icon-"]:before, [class*=" icon-"]:before {
		  font-family: "fontello";
		  font-style: normal;
		  font-weight: normal;
		  speak: none;
		  display: inline-block;
		  text-decoration: inherit;
		  width: 1em;
		  margin-right: .2em;
		  text-align: center;
		  font-variant: normal;
		  text-transform: none;
		  line-height: 1em;
		  margin-left: .2em;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		
		/* helpers */
		.clearfix:before, .clearfix:after {content: " "; display: table;}
		.clearfix:after {clear: both;}
		.clearfix {*zoom: 1;}
		.clearfix {clear: both;}
		.hidden {display: none;}
		 
		.icon-left-dir:before { content: '\e800'; } 
		.icon-right-dir:before { content: '\e801'; } 
		.icon-popup:before { content: '\e802'; } 
		.icon-mail-alt:before { content: '\f0e0'; }

		html {font-size:16px; padding:0; margin:0;}
		body {font-size:1em; padding:0; margin:0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
		
		/* buttons and alert spans */
		.button.large {font-size:0.8em; text-align:left; padding:.3em; box-sizing:border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; transition:all 0.5s ease; background:#eee; display:block; color:#fff; text-decoration:none; box-sizing:border-box; padding:10px; display: flex; align-items: center; justify-content: left; background:#00aade;}
		.button.large.lighter {background:#999;}
		.button.large span[class^="icon-"]:before, .button.large span[class*=" icon-"]:before {float:left; clear:none; font-size:5em; padding:0; margin:0; transition:all 0.5s ease;}
		.button.large h2 {margin:0; padding:0; font-size:1.75em;}
		.button.large h3 {margin:0; padding:0;}
		.button.large:hover {background:#333;}
		.button.large:hover span[class^="icon-"]:before, .button.large:hover span[class*=" icon-"]:before {color:#00aade;}
		
		.button.large.lighter:hover {}
		
		header {width:100%; height:20vh; position:fixed; top:0; left:0; background:center bottom no-repeat url(lms-head.png); background-size:cover;}
		main {height:100vh; width:100vw; text-align:center; vertical-align:middle; overflow:hidden; display:table-cell; z-index:10;}
		main .centered {display:inline-block; margin:0 auto;}
		main h1 {font-size:1.2em; margin:1em 0;}
		main #learning-brand {width:240px; height:auto; margin-bottom:3em;}
		main ul.button-block {display:block; clear:both; list-style:none; margin:0; padding:0; box-sizing:border-box;}
		main ul.button-block li {clear:both; box-sizing:border-box; margin:0; padding:0.5em;}
		main ul.button-block li a {width:100%; box-sizing:border-box;}
		main p {width:100%; clear:both; display:block; margin-top:3em;}
		footer {width:100%; height:20vh; position:fixed; bottom:0; left:0; background:center top no-repeat url(lms-foot.png); background-size:cover; z-index:-1;}
		footer #mpi-brand {position:fixed; right:20px; bottom:20px;}
		
		@media only screen and (max-width: 1300px){
			main ul.button-block li {clear:both; margin-bottom:10px;}
		}
		@media only screen and (max-width:990px){
			main {height:auto;}
			header, footer {position:relative; clear:both;}
			footer  #mpi-brand {position:absolute; left:calc(50% - 87px); bottom:15px;}
		}