body {
	margin: 0;
	padding: 0;
	background-color: black;
}
#header {
	z-index: 100;
	width: 100%;
	height: 32px;
	padding: 16px;
	background-color: #607D8B;
	box-shadow: 0 2px 5px rgba(0,0,0,0.26);
	color: white;
	float: left;
	font-size: 18px;
	vertical-align: center;
	line-height: 64px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-family: "RobotoDraft","Roboto",sans-serif;
	text-rendering: optimizeLegibility;
	position: fixed;
	display: block;
	top: -1;
}
#pre-body {
	padding-top: 20%;
	color: white;
	text-align: center;
	line-height: 64px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-family: "RobotoDraft","Roboto",sans-serif;
	text-rendering: optimizeLegibility;
	text-shadow: 0px 4px 12px black;
	transition-duration: 0.4s;
	cursor: default;
	margin-bottom: 30%;
}
#mainT, #subT {
	transition-duration: 0.4s;
	transition-delay: 0s;
}
#pre-body.Scrolled, #mainT.pre-body-titleScroll, #subT.pre-body-s-titleScroll {
	font-size: 6pt;
	text-shadow: 0px 3px 4px black;
	transition-duration: 0.75s;
	line-height: 23px;
	padding: 10px;
	margin-bottom: 8%;
}
#mainT.pre-body-title {
	font-size: 75pt;
	animation-duration: 3s;
	animation-name: pre-body-title;
	transition-duration: 0.4s;
}
@keyframes pre-body-title {
	0% {-webkit-filter: opacity(0%)};
	98% {-webkit-filter: opacity(0%)};
	100% {-webkit-filter: opacity(100%)};
}
.pre-body-subtitle {
	animation-duration: 6s;
	animation-name: pre-body-subtitle;
	font-size: 24pt;
}
@keyframes pre-body-subtitle {
	0% {-webkit-filter: opacity(0%)};
	98% {-webkit-filter: opacity(0%)};
	100% {-webkit-filter: opacity(100%)};
}
#body {
	font-family: "RobotoDraft","Roboto",sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	padding-top: 50px;
	padding-left: 100px;
	background-color: white;
	color: #212121;
	padding-bottom: 50px;
	box-shadow: 0 -2px 4px rgba(0,0,0,0.23);
}
.chapT {
	color: #607D8B;
	font-size: 34px;
	font-weight: 400px;
	line-height: 40px;
	box-sizing: border-box;
	-webkit-margin-before: 0.83em;
	margin-bottom: 100px;
}
.background-video {
	background-image: url(media/background.jpg);
	background-size: cover;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translate(-50%, -50%);
}
.appcard {
	width: 100px;
	height: 80px;
	display: -webkit-inline-box;
	vertical-align: middle;
	text-align: -webkit-center;
	padding: 30px;
	padding-top: 50px;
	margin: 20px;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition-duration: 0.3s;
	color: white;
	border-radius: 4px;
}
.appcard:active {
	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
	margin: 20px;
}
.appcard:hover {
	filter: opacity(0.88);
}
.appcard:active::after {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0s;
}
.appcard::-moz-focus-inner {
	border: none;
}
a {
	text-decoration: none;
	color: white;
	cursor: pointer;
}
a.normal {
	border-bottom-style: dotted;
	border-width: 1px;
	color: #212121;
	cursor: pointer;
	transition-duration: 0.2s;
}
a.normal:visited {
	color: #333;
}
a.normal:hover {
	border-bottom-style: solid;
	margin-left: 10px;
}

#go2Top {
	position: fixed;
	right: -5px;
	bottom: 50px;
	transition-duration: 0.5s;
	padding: 10px;
	outline: none;
	padding-right: 30px;
	font-family: "RobotoDraft","Roboto",sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: #333;
	cursor: pointer;
}
#go2Top.TopH {
	right: -300px;
}

input[type="button"] {
	background-color: #FFF;
	border-style: solid;
	border-width: 1px;
	border-color: #E0E0E0;
	padding: 3px;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	font-family: "RobotoDraft","Roboto",sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 15px;
	text-rendering: optimizeLegibility;
	color: #212121;
	border-radius: 4px;

}
input[type="button"]:active {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}