*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#main
{
  width: 100%;
  height: 100%;
  color: blue;
  background-color: green;
}
#top1
{
  width: 100%;
  height: 10%;
  color: #555555;
  background-color: white;
  font-size: 40;
  font-weight: 1000;
  padding: 15;
}
#col1
{
	color: #555555;
}
#col1:hover
{
	color: #4CAF50;
}
#col2
{
	color: #4CAF50;
}
#top1span
{
  color: black;
  font-size: 20px;
  font-weight: 400;
  justify-content: center;
  align-items: right;
}
#l
{
  width: 90px;
  height: 35px;
  background-color: #4CAF50;
  border-color: #4CAF50;
  border-radius: 5px;
  font-weight: 1000;
 align-items: right;
}
#top2
{
  width: 100%;
  height: 10%;
  color: #fff;
  background-color: #4CAF50;
  font-size: 25;
  font-weight: 300;
  padding: 15;
  letter-spacing: 8;
}
#mid
{
  width: 100%;
  height: 80%;
  color: #18417B;
  background-color: black;
}
#midleft
{
  width: 20%;
  height: 100%;
  color: #3A3A79;
  background-color: white;
  padding: 20;
  font-size: 18;
  float: left;
}
li a
{
  color: #000084;
  text-decoration: none;
}
#hea1
{
  font-size: 30;
  font-weight: 150;
}
#hea2
{
  font-size: 30;
  font-weight: 150;
}
#midcenter
{
  width: 50%;
  height: 100%;
  color: #555555;
  background-color: white;
  padding: 20;
  float: left;
}
#hea3
{
	font-size: 80;
	font-weight: 170;
    padding: 15;
}
#sp1
{
	font-size: 30;
	color: #3A3A3A;
}
#but1
{
	width: 150;
	height: 35;
	margin: 30;
	background-color: #616161;
    font-weight: 400;
	font-size: 15;
}
#but2
{
	width: 150;
	height: 35;
	margin: 30;
	background-color: #616161;
	border-color: #616161;
	font-weight: 400;
	font-size: 15;
}
#midright
{
	width: 30%;
	height: 100%;
	background-color: white;
	float: right;
	color: black;
	font-size: 20;
}
#but4
{
	width: 150;
	height: 35;
	margin: 10;
	background-color: #4CAF50;
	border-color: #4CAF50;
	font-weight: 500;
	font-size: 18;
}