@charset "utf-8";
body {
	padding-left: 5%;
	padding-right: 5%;
	align-content: center;
	text-align: center;
	align-self: center;
	margin: 0 auto;
	width: 680px;
}

h1{
	font-size: 3.5EM;
	color: #ffffff;
	font-family: Ubuntu, Helvetica, Arial, "sans-serif";
	font-weight: 500;
	text-align: left;
	padding: 70px 0 0 310px;
	margin-bottom: 15px;
}

h2{
	font-size: 1.5EM;
	color: #ffffff;
	font-family: Ubuntu, Helvetica, Arial, "sans-serif";
	font-weight: 300;
	text-align: left;
	align: right;
	margin-top: 0;
	padding-left: 310px;
}

h3{
	font-size: 1.8EM;
	color: #383838;
	font-family: Ubuntu, Helvetica, Arial, "sans-serif";
	text-align: left;
}

p{
    font-family: Ubuntu, Helvetica, Arial, "sans-serif";
	font-size: 1EM;
	color: #383838;
}

.rightmain{
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	background-color:#ffffff;
	padding:5% 0;
	float:left;
	width:30%;
	align-content: center;
	margin: 100px 0;
}

.centermain{
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	background-color:#ffffff;
	margin: 100px 5%;
	padding:5% 0;
	float: left;
	width:30%;
	align-content: center;
}

.leftmain{
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	background-color:#ffffff;
	padding:5% 0;
	float:left;
	width:30%;
	align-content: center;
    clear:left;
	margin: 100px 0;
}

.header {
	clear:right;
	background-color: rgba(255,255,255,0.7);
    
}

.sticky {
	position: fixed;
	padding: 0 !important;
    max-width: 680px;
    background-color: rgba(255,255,255,0.7);
	top: 0;
}

html {
	scroll-behavior: smooth;
}

.topnav {
	overflow: hidden;
	background-color: rgba(0,0,0,0.00);
	position: relative;
}

.topnav #myLinks {
	display: none;
}

.topnav a {
  color: #ffffff;
	background-color: #383838;
  padding: 14px 16px;
  display: block;
	font-family: Ubuntu, Helvetica, Arial, "sans-serif";
	font-size: 1EM;
	text-decoration: none;
}

.topnav a.icon {
  background: #383838;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
	background-color: #777777;
  color: white;
}

.active{
	background-color: rgba(0,0,0,0.00) !important;
}

.herotext {
	background: url(SVG/num3.svg) no-repeat 0 0;
	border-radius: 10px;
	background-size: cover;
	height: 350px;
}


header div div {position: fixed;z-index: 500;width: 340px;}
		header > a + div:hover div {display: block!important;}

.cb1{
	padding: 5% 5% 17% 5%;
	background-color: #f9f9f9;
	clear: left;
	height: 300px;
	margin: 0 5% 100px;
}

.knight{
	height: 300px; 
	float: left; 
	transition: transform 1s;
	margin-left: 13%;
	margin-top: -50px;
}

.knight:hover{
	-ms-transform: scale(.9); /* IE 9 */
	-webkit-transform: scale(.9); /* Safari 3-8 */
	transform: scale(.9); 
}

.cb2{
	padding: 5% 5% 17% 5%;
	background-color: #f9f9f9;
	clear: left;
	height: 300px;
	margin: 0 5% 100px;
}

.cb3{
	padding: 5% 5% 10% 5%;
	background-color: #ffffff;
	clear: left;
	height: 300px;
	margin: 0;
}

.cb4{
	padding: 5% 5% 10% 5%;
	background-color: #ffffff;
	clear: left;
	height: 300px;
	margin: -50px 0 50px;
}

.revo{
	height: 300px; 
	float: left; 
	transition: transform 1s;
	margin-right: 10%;
	margin-top: -50px;
}

.revo:hover{
	-ms-transform: scale(.9); /* IE 9 */
	-webkit-transform: scale(.9); /* Safari 3-8 */
	transform: scale(.9); 
}

.soldier{
	height: 300px; 
	float: left; 
	transition: transform 1s;
	margin-left: 9%;
	margin-top: -20px;
}

.soldier:hover{
	-ms-transform: scale(.9); /* IE 9 */
	-webkit-transform: scale(.9); /* Safari 3-8 */
	transform: scale(.9); 
}

.warp{
	height: 150px; 
	float: left; 
	transition: transform 1s;
	margin-right: 13%;
	margin-top: -200px;
}

.warp:hover{
	-ms-transform: scale(.9); /* IE 9 */
	-webkit-transform: scale(.9); /* Safari 3-8 */
	transform: scale(.9); 
}

footer{
	background-color: #383838;
	text-align: left;
	padding: 5%;
	margin: 0 auto;
	clear: both;
}

form{
	color: #383838;
}