@charset "utf-8";
/* CSS Document */

header nav
{
	margin-top: 23px;
	padding-right: 15px;
	float: right;
	font-family: "Trajan Pro";
	}

section h1
{
	font-size:36px;
	margin-left: 25px;
	font-family:"Bebas Neue","Helvetica Neue",Gotham, Helvetica, Arial, sans-serif;
}

#Plans
{
	text-align: center;
	margin-top: -70px;
	height: 600px;
}

.mui-btn
{
	position:absolute;
	bottom: 0px;
	left:25%;
	right:25%;
}
	

#HomePlans
{
	position:relative;
	border:thick;
	border-style:dashed;
	float:left;
	margin-left: 5%;
	width: 25%;
	height: 430px; 

}

.HomePlanPic
{
	width: 100%;
}
#CorporatePlans
{
	position:relative;
	border:thick;
	border-style:dashed;
	float:right;
	margin-right: 5%;
	width: 25%;
	height: 430px;

}
#BuisnessPlans
{
	position:relative;
	border:thick;
	border-style:dashed;
	float:left;
	margin-left: 6%;
	margin-right: 4%;
	width: 25%;
	height: 430px;

}
#navButton2
{
	background: #023F48;
}


article h2
{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:24px;
	
}

#spacer
{
	
	height: 100px;
	text-align:center;
	font-family: "bebas neue";
	font-size:24px;
}

Table
{
	margin-top: 50px;
	padding-top: 50px;
	margin: 0 auto;
	font-size:24px;
}
.TableHeader
{
	background-color:#FE0000;
	color: white;
}


.Header1
{
	background-color:#FFFF01;
	width: 200px;
}

.Header2
{
	background-color: #C0504E;
	color: white;
	width: 160px;
}

.Header3
{
	background-color: #9BBB58;
	color: white;
	width: 160px;
}

.Header4
{
	background-color: #8165A2;
	color: white;
	width: 160px;
}

.Header5
{
	background-color: #375F90;
	color: white;
	width: 160px;
}

th
{
	height: 60px;
	font-family: calibri;
}

td
{
	text-align:center;
}

tr,td, th {
border-width: 1px;
border-style: solid;
border-color: black;
}

button{
  position:absolute;
  bottom: 0px;
  left:25%;
  right:25%;
  text-align:center;
  border: none;
  outline:none;
  cursor: pointer;
  background: #1384A1;
  color: white;
  padding: 1px 60px;
  border-radius: 2px;
  font-size: 16px;
}

.fab{
  border-radius: 50%;
  margin:0;
  padding: 20px;
}

.material{
  position:relative;
  color:white;
  margin: 20px auto;
  height:400px;
  width:500px;
  background:#f45673;
  
}

.ripple{
  overflow:hidden;
}

.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;

    
  animation: ripple-animation 2s;
}


@keyframes ripple-animation {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(100);
      opacity: 0;
    }
}