form {
	display: table-row;
	text-align: center; 
	width: 75%;
	margin: 0 auto;
}


a.mdl-navigation__link {
	font-size: 22px;
}

.slideshowContainer {
	max-width: 918px; 
	margin-left: auto; 
	margin-right: auto;
	margin-top: 15px;
}

.rslidesNav {
	text-align: center;
}

.containerRow {
	
	max-width: 85%; 
	margin: 0 auto 0 auto; 
	display: flex;
	flex-wrap: wrap;
	
}

.containerStandard {
	
	max-width: 85%; 
	margin: 0 auto 0 auto; 
	
}

.demo-card-business.mdl-card {
  width: 380px;
  height: 400px;
  margin: 0 auto 5 auto;
}
.demo-card-business > .mdl-card__title {
  color: #fff;
  background:
    url('resources/images/business-security.jpg');
	background-size: cover;
}

.demo-card-home.mdl-card {
  width: 380px;
  height: 400px;
  margin: 0 auto 5 auto;

}
.demo-card-home > .mdl-card__title {
  color: #fff;
  background:
    url('resources/images/home-security.jpg');
	background-size: cover;
}

.demo-card-dsc.mdl-card {
  width: 380px;
  height: 400px;
  margin: 0 auto 5 auto;
}
.demo-card-dsc > .mdl-card__title {
  color: #fff;
  background:
    url('resources/images/dsc-panels.png');
	background-size: cover;
}

.demo-card-dsc832.mdl-card {
  width: 380px;
  height: 400px;
  margin: 0 auto 5 auto;
}
.demo-card-dsc832 > .mdl-card__title {
  color: #fff;
  background:
    url('resources/images/dsc-power832.jpg');
	background-size: cover;
}

.demo-card-dsckey.mdl-card {
  width: 380px;
  height: 400px;
  margin: 0 auto 5 auto;
}
.demo-card-dsckey > .mdl-card__title {
  color: #fff;
  background:
    url('resources/images/dsc-keyfob.jpg');
	background-size: cover;
}

h2.mdl-card__title-text {
	color: #003361;
}

/* I really don't know why the hamburger button isn't aligning right on mobile. This is a fix for it. */
.mdl-layout__drawer-button > i {
	margin-top: 10px;
}

.mdl-js-textfield {
	margin: 5 5;
}